/* Estilos generales para la página de servicios */

body {
    font-family: sans-serif; /* O la fuente que prefieras */    
  }
  
  .precio{
    color: #000000;
    font-weight: 600;
  }

  /* Estilos para las tarjetas de servicio principales */
  .service-card {
    background-color: #f9fafb; /* Equivalente a bg-gray-100 */
    /* Otros estilos base que ya tenías */
  }
  
  /* Estilo hover para subservicios en la lista principal */
  .services-grid .sub-service:hover {
    background-color: #E5E7EB; /* Equivalente a hover:bg-gray-200 */
  }
  
  /* Estilos para el Modal */
  .modal-overlay {
    /* Puedes añadir transiciones aquí si quieres */
  }
  
  .capitalize {
    text-transform: capitalize;
    font-weight: 600;    
  }

  .modal-content {
    /* Estilos base del contenido del modal */
    max-height: 85vh; /* Evita que el modal sea demasiado alto */
    display: flex;
    flex-direction: column;
  }
  
  #modal-services {
    /* Asegura que esta parte sea la que haga scroll si es necesario */
    overflow-y: auto;
  }
  
  .act-btn{
    background-color: #ffffff; /* Equivalente a bg-blue-500 */
    color: rgb(0, 0, 0); /* Equivalente a text-white */
    transition: background-color 0.2s ease; /* Transición suave */
    border: #000000 2px solid; /* Equivalente a border-gray-300 */
    font-weight: 700;
  }

  /* Estilo para el botón de cerrar modal */
  #close-modal {
    background-color: #EF4444; /* Equivalente a bg-red-500 */
    color: white; /* Equivalente a text-white */
    transition: background-color 0.2s ease; /* Transición suave */
  }
  
  #close-modal:hover {
    background-color: #ff0702; /* Equivalente a hover:bg-red-600 */
  }
  
  /* Estilo para el botón Continuar/Seguir */
  #continue-button {
    background-color: #ffffff; /* Equivalente a bg-blue-500 */
    color: rgb(0, 0, 0); /* Equivalente a text-white */
    transition: background-color 0.2s ease, opacity 0.2s ease; /* Transición suave */
  }
  
  #continue-button:hover:not(:disabled) { /* Aplicar hover solo si no está deshabilitado */
    background-color: #1363cb; /* Equivalente a hover:bg-orange-600 */
  }
  
  #continue-button:disabled {
    opacity: 0.5; /* Equivalente a disabled:opacity-50 */
    cursor: not-allowed; /* Indica que el botón está deshabilitado */
  }
  
  /* Estilo para subservicios SELECCIONADOS dentro del modal de peluquera */
  #services-modal .sub-service.selected {
    background-color: #388fec7b;
    border-radius:8px ;
    font-weight: 500;
    padding: 10PX;
    /*Opcional: hacer el texto un poco más bold */  ;    
}
  
  /* Estilo hover para opciones de peluquera en el modal de servicio */
  #services-modal .hairdresser-option:hover {
    background-color: #DBEAFE; /* Equivalente a hover:bg-blue-200 */
  }
  
  /* Estilo para opciones de peluquera SELECCIONADAS en el modal de servicio */
  #services-modal .hairdresser-option.selected {
    background-color: #388fec7b; /* Equivalente a bg-blue-300 */    
  }
  
  /* Estilo hover para tarjetas de peluquera en la lista principal (opcional) */
  .hairdresser-card:hover {
      opacity: 0.8; /* Equivalente a hover:opacity-80 */
  }
  
  /* --- Añade aquí cualquier otro estilo CSS que necesites --- */