.contenedor {
  background-color: #fff;
  border-radius   : 12px;
  box-shadow      : 0 10px 15px rgba(0, 0, 0, 0.1);
  padding         : 24px;
  margin-top      : 2rem;
  width           : 100%;
  box-sizing      : border-box;
}

h1,
h2 {
  text-align   : center;
  color        : #1a202c;
  margin-bottom: 24px;
}

h2 {
  font-size  : 1.5rem;
  font-weight: 700;
}

/* Estilos de Sección */
.seccion {
  margin-bottom: 32px;
}

.titulo-seccion {
  font-size    : 1.25rem;
  font-weight  : 600;
  color        : #4a5568;
  margin-bottom: 16px;
  text-align   : center;
}

/* Cuadrícula de Especialistas */
.cuadricula-especialistas {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap                  : 16px;
}

.tarjeta-especialista {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  padding       : 16px;
  border        : 2px solid #e2e8f0;
  border-radius : 8px;
  transition    : all 0.2s ease-in-out;
  cursor        : pointer;
  text-align    : center;
}

.tarjeta-especialista:hover {
  border-color    : #818cf8;
  background-color: #eef2ff;
  box-shadow      : 0 4px 6px rgba(0, 0, 0, 0.1);
}

.avatar-especialista img {
  width        : 64px;
  height       : 64px;
  border-radius: 9999px;
  object-fit   : cover;
}

.avatar-especialista {
  display        : flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  font-size      : 2rem;
  font-weight    : 600;
  margin-bottom  : 8px;
}

.nombre-especialista {
  font-size    : 1.125rem;
  font-weight  : 600;
  color        : #2d3748;
  margin-bottom: 4px;
}

.rol-especialista,
.especialidad-especialista {
  font-size: 0.875rem;
  color    : #4a5568;
}

.disponibilidad-limitada {
  font-size       : 0.75rem;
  color           : #ef4444;
  font-weight     : 600;
  margin-top      : 4px;
  padding         : 2px 6px;
  background-color: #fee2e2;
  border-radius   : 4px;
}

.cuadricula-fechas,
.cuadricula-horarios {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap                  : 8px;
  margin-bottom        : 24px;
}

.tarjeta-fecha,
.franja-horaria {
  padding      : 12px;
  border       : 2px solid #e2e8f0;
  border-radius: 8px;
  text-align   : center;
  transition   : all 0.2s ease-in-out;
  cursor       : pointer;
  font-size    : 0.875rem;
  color        : #2d3748;
}

.tarjeta-fecha:hover,
.franja-horaria:hover {
  border-color    : #818cf8;
  background-color: #eef2ff;
  box-shadow      : 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Horas ocupadas */
.franja-horaria.ocupada {
  background-color: #fee2e2;
  border-color    : #ef4444;
  color           : #991b1b;
  cursor          : not-allowed;
  opacity         : 0.7;
  position        : relative;
}

.franja-horaria.ocupada:hover {
  background-color: #fee2e2;
  border-color    : #ef4444;
  box-shadow      : none;
}

.franja-horaria.ocupada::after {
  content : '✕';
  position: absolute;
  top     : 50%;
  right   : 8px;
  transform: translateY(-50%);
  color    : #dc2626;
  font-weight: bold;
}

.nombre-dia-fecha {
  font-size: 0.75rem;
  color    : #4a5568;
}

.numero-dia-fecha {
  font-size  : 1.25rem;
  font-weight: 600;
  color      : #2d3748;
}

.nombre-mes-fecha {
  font-size: 0.75rem;
  color    : #4a5568;
}

/* Estilo de Input de Fecha */
.contenedor-input-fecha {
  display        : flex;
  justify-content: center;
  margin-bottom  : 24px;
}

.input-fecha {
  padding      : 12px;
  border       : 2px solid #e2e8f0;
  border-radius: 8px;
  font-size    : 1rem;
  color        : #2d3748;
  width        : 100%;
  max-width    : 400px;
  box-sizing   : border-box;
  outline      : none;
  transition   : border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.input-fecha:focus {
  border-color: #4f46e5;
  box-shadow  : 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Lista de Servicios */
.lista-servicios {
  display       : flex;
  flex-direction: column;
  gap           : 12px;
  margin-bottom : 24px;
}

.item-servicio {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 12px;
  border         : 2px solid #e2e8f0;
  border-radius  : 8px;
  transition     : all 0.2s ease-in-out;
  cursor         : pointer;
}

.item-servicio:hover {
  border-color    : #818cf8;
  background-color: #eef2ff;
  box-shadow      : 0 4px 6px rgba(0, 0, 0, 0.05);
}

.nombre-servicio {
  font-size  : 1rem;
  font-weight: 500;
  color      : #2d3748;
}

.precio-servicio {
  font-size  : 0.9rem;
  font-weight: 600;
  color      : #4a5568;
}

/* Sección de Resumen */
.detalles-resumen {
  background-color: #f7fafc;
  border-radius   : 8px;
  padding         : 16px;
  margin-bottom   : 24px;
}

.item-resumen {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 8px 0;
  border-bottom  : 1px dashed #e2e8f0;
}

.item-resumen:last-child {
  border-bottom: none;
}

.etiqueta-resumen {
  font-weight: 600;
  color      : #2d3748;
}

.valor-resumen {
  color: #4a5568;
}

.total-resumen {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding         : 12px;
  background-color: #e0e7ff;
  border-radius   : 8px;
  color           : #312e81;
  font-weight     : 700;
  font-size       : 1.25rem;
  margin-top      : 16px;
}

/* Botones */
.grupo-botones {
  display        : flex;
  justify-content: space-between;
  margin-top     : 24px;
}

.boton {
  padding      : 10px 20px;
  border-radius: 8px;
  transition   : all 0.2s ease-in-out;
  cursor       : pointer;
  font-weight  : 600;
  text-align   : center;
  border       : none;
  width        : 100%;
}

.boton.primario {
  background-color: #4f46e5;
  color           : #fff;
}

.boton.primario:hover {
  background-color: #4338ca;
}

.boton.secundario {
  background-color: #e2e8f0;
  color           : #4a5568;
}

.boton.secundario:hover {
  background-color: #cbd5e0;
}

.boton.exitoso {
  background-color: #10b981;
  color           : #fff;
}

.boton.exitoso:hover {
  background-color: #059669;
}

/* Modal de Confirmación (Oculto por defecto) */
.superposicion-modal {
  position        : fixed;
  top             : 0;
  left            : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display         : flex;
  justify-content : center;
  align-items     : center;
  z-index         : 1000;
  display         : none;
}

.contenido-modal {
  background-color: #fff;
  border-radius   : 8px;
  box-shadow      : 0 20px 25px rgba(0, 0, 0, 0.25);
  padding         : 24px;
  width           : 100%;
  max-width       : 400px;
  text-align      : center;
}

.titulo-modal {
  font-size    : 1.5rem;
  font-weight  : 700;
  color        : #059669;
  margin-bottom: 16px;
}

.mensaje-modal {
  color        : #4a5568;
  margin-bottom: 24px;
}

/* Barra de desplazamiento para secciones */
.contenido-desplazable {
  max-height   : 256px;
  overflow-y   : auto;
  padding-right: 8px;
}

/* Barra de desplazamiento personalizada para mejor estética */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background   : #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background   : #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Estilos adicionales para funcionalidad dinámica */
.seleccionado {
  border-color: #d07d68 !important;
  background-color: rgba(208, 125, 104, 0.1) !important;
  transform: scale(1.02);
}

.franja-horaria {
  cursor: pointer;
}

.item-servicio {
  cursor: pointer;
}

/* Formulario de datos del cliente */
.formulario-cliente {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.grupo-input {
  display: flex;
  flex-direction: column;
}

.grupo-input label {
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 0.5rem;
}

.grupo-input input,
.grupo-input textarea {
  padding: 0.75rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s ease-in-out;
}

.grupo-input input:focus,
.grupo-input textarea:focus {
  outline: none;
  border-color: #d07d68;
}

.grupo-input input:required:invalid {
  border-color: #e53e3e;
}

.grupo-input input:required:valid {
  border-color: #38a169;
}

/* Estados del botón */
.boton:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
  opacity: 0.6;
}

.boton.primario:disabled {
  background-color: #a0aec0;
}

/* Mensajes de estado */
.mensaje-seleccion {
  text-align: center;
  color: #718096;
  font-style: italic;
  padding: 2rem;
}

.mensaje-error {
  background-color: #fed7d7;
  color: #c53030;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  text-align: center;
}

/* Confirmación de reserva */
.confirmacion-detalles {
  background-color: #f7fafc;
  padding: 1rem;
  border-radius: 8px;
  margin: 1rem 0;
  text-align: left;
}

.confirmacion-detalles p {
  margin: 0.5rem 0;
}

.modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.boton.secundario {
  background-color: #e2e8f0;
  color: #4a5568;
}

.boton.secundario:hover {
  background-color: #cbd5e0;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
  .formulario-cliente {
    max-width: 100%;
  }
  
  .modal-buttons {
    flex-direction: column;
  }
  
  .confirmacion-detalles {
    font-size: 0.9rem;
  }
}