/* ============================================ */
/* RESET COMPLETO PARA HEADER - MÁXIMA PRIORIDAD */
/* ============================================ */

#main-header,
#main-header * {
    color: inherit !important;
}

#main-header h1,
#main-header h2,
#main-header h3,
#main-header h4,
#main-header h5,
#main-header h6,
#main-header span,
#main-header a,
#main-header p,
#main-header div,
#main-header nav {
    color: inherit !important;
}

/* Restaurar colores específicos del header */
#main-header .text-cyan-400 {
    color: #06b6d4 !important;
}

#main-header .text-white {
    color: #ffffff !important;
}

#main-header .text-blue-600 {
    color: #2563eb !important;
}

/* Botones de sesión en header */
#session-buttons button,
#session-buttons a {
    color: #ffffff !important;
}

#session-buttons .bg-blue-600 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

#session-buttons .text-white {
    color: #ffffff !important;
}

#session-buttons .text-gray-700,
#session-buttons .text-gray-800,
#session-buttons .text-gray-900 {
    color: #ffffff !important;
}

/* Perfil de usuario - TODO EN BLANCO */
#main-header .user-dropdown,
#main-header .user-profile {
    color: #ffffff !important;
}

#main-header .user-profile * {
    color: #ffffff !important;
}

#main-header .user-name {
    color: #ffffff !important;
    fill: #ffffff !important;
}

#main-header .user-email {
    color: rgba(255, 255, 255, 0.8) !important;
    fill: rgba(255, 255, 255, 0.8) !important;
}

#main-header .user-avatar {
    color: #ffffff !important;
    fill: #ffffff !important;
}

#main-header .user-info {
    color: #ffffff !important;
}

#main-header .user-info div {
    color: #ffffff !important;
}

/* Menú desplegable - TODO EN BLANCO */
.user-dropdown-menu {
    background: rgba(31, 41, 55, 0.98) !important;
    color: #ffffff !important;
}

.user-dropdown-menu,
.user-dropdown-menu * {
    color: #ffffff !important;
}

.user-dropdown-item {
    color: #ffffff !important;
}

.user-dropdown-item svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.user-dropdown-item:hover {
    color: #ffffff !important;
}

.user-dropdown-item.logout:hover {
    color: #ff6b6b !important;
}

/* Enlaces de navegación en header - VISIBLES Y CLAROS */
#main-header .hidden.lg\:flex {
    display: flex !important;
}

#main-header nav a {
    color: #ffffff !important;
    display: inline-block !important;
}

#main-header nav a:hover {
    color: #06b6d4 !important;
}

/* Asegurar que el div de navegación sea visible */
#main-header > nav > div:nth-child(2) {
    display: flex !important;
}

/* ============================================ */
/* CONFIGURACIÓN TAILWIND */
/* ============================================ */
.neumorphic-shadow {
      box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
    }
    .dark .neumorphic-shadow {
      box-shadow: 5px 5px 10px #141516, -5px -5px 10px #1c1d1e;
    }
    .neumorphic-shadow-inset {
      box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;
    }
    .dark .neumorphic-shadow-inset {
      box-shadow: inset 5px 5px 10px #141516, inset -5px -5px 10px #1c1d1e;
    }
    .neumorphic-shadow-active {
      box-shadow: inset 2px 2px 5px #d1d1d1, inset -2px -2px 5px #ffffff;
    }
    .dark .neumorphic-shadow-active {
      box-shadow: inset 2px 2px 5px #141516, inset -2px -2px 5px #1c1d1e;
    }
    .neumorphic-input {
      background-color: transparent;
      border: none;
      box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;
    }
    .dark .neumorphic-input {
      box-shadow: inset 5px 5px 10px #141516, inset -5px -5px 10px #1c1d1e;
    }
    .neumorphic-checkbox {
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 0.5rem;
      box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
      position: relative;
      cursor: pointer;
      outline: none;
    }
    .dark .neumorphic-checkbox {
      box-shadow: 5px 5px 10px #141516, -5px -5px 10px #1c1d1e;
    }
    .neumorphic-checkbox:checked {
      box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;
    }
    .dark .neumorphic-checkbox:checked {
      box-shadow: inset 5px 5px 10px #141516, inset -5px -5px 10px #1c1d1e;
    }
    .neumorphic-checkbox:checked::after {
      content: '✔';
      color: #3b82f6;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

/* ============================================ */
/* ESTILOS GENERALES DEL BODY */
/* ============================================ */
body {
    padding-top: 0;
    transition: padding-top 0.3s ease;
    position: relative;
    overflow-x: hidden;
    font-family: 'Manrope', sans-serif;
}

/* ✅ CAMBIO: Fondo degradado principal actualizado al de index.html */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    /* Gradiente actualizado: morado fuerte -> morado suave -> blanco */
    background: linear-gradient(180deg, 
        rgba(152, 83, 237, 1) 0%, 
        rgba(180, 150, 220, 1) 60%, /* Morado más suave */
        rgba(255, 255, 255, 1) 100%
    );
}

/* ✅ CAMBIO: Fondo degradado modo oscuro actualizado al de index.html */
body.dark::before {
    /* Gradiente actualizado: morado oscuro -> morado grisáceo -> slate-900 */
    background: linear-gradient(180deg, 
        rgba(76, 35, 115, 1) 0%, 
        rgba(85, 60, 115, 1) 60%, /* Morado más suave y oscuro */
        rgb(15 23 42) 100% /* slate-900 */
    );
}

/* Overlay superior */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: -2;
    background: radial-gradient(ellipse at top,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 70%
    );
    pointer-events: none;
}

body.dark::after {
    background: radial-gradient(ellipse at top,
        rgba(106, 173, 224, 0.1) 0%,
        transparent 70%
    );
}

/* ============================================ */
/* EFECTOS NEUMÓRFICOS */
/* ============================================ */
.neumorphic-shadow {
    box-shadow: 5px 5px 10px #d1d1d1, -5px -5px 10px #ffffff;
}

.dark .neumorphic-shadow {
    box-shadow: 5px 5px 10px #141516, -5px -5px 10px #1c1d1e;
}

.neumorphic-shadow-inset {
    box-shadow: inset 5px 5px 10px #d1d1d1, inset -5px -5px 10px #ffffff;
}

.dark .neumorphic-shadow-inset {
    box-shadow: inset 5px 5px 10px #141516, inset -5px -5px 10px #1c1d1e;
}

.neumorphic-shadow-active {
    box-shadow: inset 2px 2px 5px #d1d1d1, inset -2px -2px 5px #ffffff;
}

.dark .neumorphic-shadow-active {
    box-shadow: inset 2px 2px 5px #141516, inset -2px -2px 5px #1c1d1e;
}

/* ============================================ */
/* ESTILOS DEL HEADER */
/* ============================================ */
header {
    background: rgba(31, 41, 55, 0.3);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(106, 173, 224, 0.2);
}

/* ============================================ */
/* PERFIL DE USUARIO */
/* ============================================ */
.user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(106, 173, 224, 0.2);
}

.user-profile:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(106, 173, 224, 0.4);
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6AADE0, #8FBFE3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.125rem;
    box-shadow: 0 2px 8px rgba(106, 173, 224, 0.3);
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-size: 0.875rem;
    font-weight: bold;
    color: white;
}

.user-email {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================ */
/* MENÚ DESPLEGABLE */
/* ============================================ */
.user-dropdown {
    position: relative;
}

.user-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.75rem;
    background: rgba(31, 41, 55, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(106, 173, 224, 0.3);
    border-radius: 0.75rem;
    padding: 0.375rem;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    color: white;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.user-dropdown-item:hover {
    background: rgba(106, 173, 224, 0.25);
    transform: translateX(2px);
}

.user-dropdown-item.logout:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #ff6b6b;
}

.user-dropdown-item svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* ============================================ */
/* MAIN CONTENT */
/* ============================================ */
main {
    margin-top: 70px;
}

/* ============================================ */
/* FORZAR TEMA CLARO EN ELEMENTOS ESPECÍFICOS (CORREGIDO) */
/* ============================================ */

/* Calendario - Día actual en color morado suave */
#calendario-grid button.hoy-actual {
    background-color: #a78bfa !important; /* Morado suave/violeta-400 */
    color: #ffffff !important;
    border: 1px solid #8b5cf6 !important; /* Morado más fuerte/violeta-500 */
}

/* Calendario - Día seleccionado en color morado más fuerte */
#calendario-grid button.fecha-seleccionada {
    background-color: #7c3aed !important; /* Morado principal/violeta-600 */
    color: #ffffff !important;
    border-color: #6d28d9 !important; /* Morado oscuro/violeta-700 */
}

/* Grid de horas - Tema claro con nuevo fondo */
#horas-grid {
    color: #1f2937 !important;
}

#horas-grid .hora-btn {
    background-color: #f8fafb !important; /* ✅ CAMBIO: Nuevo fondo gris muy claro */
    color: #1f2937 !important;
    border: 1px solid #e2e8f0 !important; /* Borde gris más suave */
}

#horas-grid .hora-btn:hover {
    background-color: #f1f5f9 !important; /* Un poco más oscuro al hover */
}

#horas-grid .hora-btn.activa {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9) !important;
    color: white !important;
    border-color: #0284c7 !important;
}

/* Títulos en main - Tema claro */
main h1, main h2, main h3, main h4, main h5, main h6 {
    color: #1f2937 !important;
}

main p {
    color: #1f2937 !important;
}

/* Modal - Tema claro */
#modal-confirmacion {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#modal-confirmacion > div {
    background-color: #ffffff !important;
}

#modal-confirmacion h3,
#modal-confirmacion p {
    color: #1f2937 !important;
}

#modal-confirmacion button {
    background: linear-gradient(to right, #06b6d4, #0ea5e9) !important;
    color: white !important;
}

/* Inputs del formulario - Tema claro con nuevo fondo */
#form-cita input[type="text"],
#form-cita input[type="email"],
#form-cita input[type="tel"],
#form-cita select,
#form-cita textarea {
    background-color: #f8fafb !important; /* ✅ CAMBIO: Nuevo fondo gris muy claro */
    color: #1f2937 !important;
    border-color: #e2e8f0 !important; /* Borde gris más suave */
}

#form-cita input[type="text"]:focus,
#form-cita input[type="email"]:focus,
#form-cita input[type="tel"]:focus,
#form-cita select:focus,
#form-cita textarea:focus {
    background-color: #ffffff !important;
    border-color: #06b6d4 !important;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1) !important;
}

/* Labels en formulario - Tema claro */
#form-cita label {
    color: #374151 !important;
}

/* Checkboxes en formulario - Tema claro */
#form-cita input[type="checkbox"] {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
}

/* ✅ CAMBIO PRINCIPAL: Campos neumórficos en main - Tema claro con nuevo fondo */
main .neumorphic-shadow {
    background-color: #f8fafb !important; /* <-- LÍNEA CLAVE PARA EL CAMBIO */
    color: #1f2937 !important;
}

/* Span y a específicos dentro del formulario */
#form-cita a {
    color: #06b6d4 !important;
}
/* ============================================ */
/* SCROLLBAR PERSONALIZADO */
/* ============================================ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(106, 173, 224, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(106, 173, 224, 0.7);
}

/* ============================================ */
/* ANIMACIONES PARA MODAL */
/* ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* ============================================ */
/* CLASES DE ANIMACIÓN */
/* ============================================ */

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-pop-in {
    animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.hidden {
    display: none !important;
}

/* ============================================ */
/* RESPONSIVE PARA MÓVILES */
/* ============================================ */

@media (max-width: 640px) {
    #modal-confirmacion {
        padding: 1rem;
    }

    #modal-confirmacion .rounded-3xl {
        border-radius: 1.5rem;
    }
} 

/* ============================================ */
/* ESTILO PARA BOTONES DE HORA OCUPADA     */
/* ============================================ */
.hora-btn.ocupada {
    opacity: 0.5;
    cursor: not-allowed !important;
    background-color: #e5e7eb !important; /* Gris claro */
    color: #9ca3af !important; /* Gris oscuro */
    border-color: #d1d5db !important;
}

.dark .hora-btn.ocupada {
    background-color: #374151 !important; /* Gris oscuro */
    color: #6b7280 !important; /* Gris más claro */
    border-color: #4b5563 !important;
}

/* ============================================ */
/* ESTILOS PARA EL BÚHO AVISADOR FLOTANTE */
/* ============================================ */

.buho-aviso-container {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 45; /* Por debajo del header (z-50) pero por encima del contenido */
    width: 180px; /* Tamaño base, puede crecer con hover */
    cursor: pointer;
    transition: width 0.4s ease, transform 0.4s ease;
}

.buho-aviso-container:hover {
    transform: translateY(-50%) scale(1.05);
    width: 200px; /* Un poco más grande al hacer hover */
}

.buho-aviso-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
    transition: filter 0.3s ease;
}

.buho-aviso-container:hover .buho-aviso-img {
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
}

/* --- Estilos del Globo de Mensaje --- */
.buho-globo-mensaje {
    position: absolute;
    right: 110%; /* Posiciona el globo a la izquierda del contenedor */
    top: 50%;
    transform: translateY(-50%);
    width: 380px; /* Ancho del globo */
    background-color: #ffffff;
    color: #1f2937;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
    transform: translateY(-50%) translateX(20px); /* Empieza un poco más a la derecha */
}

/* Mostrar el globo al hacer hover o con la clase 'show' */
.buho-aviso-container:hover .buho-globo-mensaje,
.buho-globo-mensaje.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Vuelve a su posición original */
}

/* Flecha que apunta al búho */
.buho-globo-flecha {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #ffffff;
}

/* Contenedor interno del texto y botón */
.buho-globo-contenido {
    padding: 20px;
    position: relative;
}

.buho-globo-contenido p {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
}

.buho-globo-contenido p:last-child {
    margin-bottom: 0;
}

/* Botón para cerrar el globo */
.buho-globo-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.buho-globo-cerrar:hover {
    background-color: #dc2626;
}

/* --- Responsive para móviles --- */
@media (max-width: 768px) {
    .buho-aviso-container {
        width: 120px;
        right: 10px;
    }

    .buho-globo-mensaje {
        width: 280px;
        right: 100%;
    }
    
    .buho-globo-contenido {
        padding: 15px;
    }

    .buho-globo-contenido p {
        font-size: 13px;
    }
}

/* ======================================================= */
/* 🎨 NUEVO DISEÑO AMIGABLE PARA EL MENÚ DESPLEGABLE   */
/* ======================================================= */

.servicios-dropdown-menu {
  /* Posicionamiento y visibilidad (controlado por JS) */
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem; /* Un poco más de espacio */
  width: 22rem; /* Un poco más ancho */
  max-width: 90vw;
  z-index: 100; /* Asegura que esté por encima de todo */

  /* --- ESTILO VISUAL --- */
  background: rgba(109, 45, 151, 0.7); /* Fondo blanco semitransparente */
  backdrop-filter: blur(16px); /* Efecto de desenfoque de fondo (glassmorphism) */
  -webkit-backdrop-filter: blur(16px); /* Para Safari */

  border-radius: 1.5rem; /* Bordes muy redondeados */
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil */

  /* Sombras suaves y profundas */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); /* Sombra oscura y difuminada */
  
  /* Transiciones para la animación de apertura/cierre */
  transform-origin: top center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Padding general para dar espacio a los elementos */
  padding: 1rem;
}

/* Estilos para el modo oscuro */
.dark .servicios-dropdown-menu {
  background: rgba(30, 41, 59, 0.8); /* Fondo oscuro semitransparente */
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* --- ESTILOS DE LOS ENLACES DENTRO DEL MENÚ --- */
.servicios-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Espacio entre icono y texto */
  padding: 0.875rem 1rem; /* Padding generoso */
  border-radius: 1rem; /* Bordes redondeados para cada enlace */
  
  /* Color de texto */
  color: #1e293b; /* slate-800 */
  font-weight: 500;
  
  /* Transición suave para el hover */
  transition: all 0.2s ease-in-out;
}

/* Estilos para los enlaces en modo oscuro */
.dark .servicios-dropdown-menu a {
  color: #f1f5f9; /* slate-100 */
}

/* --- EFECTO HOVER --- */
.servicios-dropdown-menu a:hover {
  background-color: rgba(152, 83, 237, 0.15); /* Fondo morado suave al pasar el mouse */
  color: #7c3aed; /* Texto morado */
  transform: translateX(4px); /* Se mueve un poco a la derecha */
}

.dark .servicios-dropdown-menu a:hover {
  background-color: rgba(152, 83, 237, 0.25);
  color: #a78bfa; /* Morado más claro para el hover en modo oscuro */
}

/* --- ESTILOS PARA TEXTO E ICONOS --- */
.servicios-dropdown-menu .font-medium {
  font-weight: 600; /* Un poco más negrita */
  color: inherit; /* Hereda el color del <a> */
}

.servicios-dropdown-menu .text-sm {
  font-size: 0.875rem;
  color: #64748b; /* slate-500 */
  margin-top: 0.125rem; /* Espacio mínimo entre título y descripción */
}

.dark .servicios-dropdown-menu .text-sm {
  color: #94a3b8; /* slate-400 */
}

.servicios-dropdown-menu .text-cyan-400 {
  color: #06b6d4; /* Color cian para los iconos */
}

/* --- ANIMACIÓN DE APERTURA Y CIERRE (Controlada por JS) --- */
/* El menú está oculto por defecto */
.servicios-dropdown-menu.opacity-0 {
  opacity: 0;
  visibility: hidden; /* Usa visibility en lugar de invisible para mejor transición */
  transform: scale(0.95) translateY(-10px);
  pointer-events: none; /* Evita clics cuando está oculto */
}

/* El menú es visible cuando JS añade la clase */
.servicios-dropdown-menu.opacity-100 {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Transición para la flecha */
#servicios-arrow {
  transition: transform 0.3s ease-in-out;
}

/* Ajuste para el header */
#main-header {
  z-index: 40;
}