/* Importación de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos personalizados */
html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: clip;
    max-width: 100vw;
}

body {
    font-family: 'Inter', sans-serif;
    margin-top: 0; /* Asegura que no haya margen en la parte superior del body */
    /* La línea de padding-top se ha comentado/eliminado como solicitaste */
}

/* Animación suave para el menú móvil */
#mobile-menu {
    /* Asegura que la transición funcione correctamente con position: absolute */
    transition: transform 0.3s ease-in-out; /* Eliminado top de la transición ya que no se usa */
}

/* Clase para controlar la visibilidad y posición del menú móvil */
/* Se ajusta el valor de ocultamiento para asegurar que no se vea */
#mobile-menu:not(.is-open) {
    transform: translateY(-100%); /* Oculta el menú completamente */
}
#mobile-menu.is-open {
    transform: translateY(0); /* Muestra el menú */
}


/* Fondo para la sección principal (Hero) */
.hero-bg {
    background-image: url('img/FachadaColegio.webp');
    background-size: cover;
    background-position: center;
}

/* Estilo para enlaces activos en la navegación (ejemplo) */
.nav-link-active {
    font-weight: 700;
    border-bottom: 2px solid #3b82f6; /* Azul como ejemplo */
}

/* Estilo base para botones */
.btn {
    @apply inline-block px-6 py-3 rounded-lg shadow-md text-white font-semibold transition duration-300 ease-in-out;
}

/* Estilo para botón primario */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700;
}

/* Estilo para botón secundario */
.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700;
}

/* Asegurar que el footer quede abajo (ya estaba bien) */
html, body {
    min-height: 100%; /* Usar min-height en lugar de height */
    display: flex;
    flex-direction: column;
}

main {
    flex-grow: 1;
}

/* Animación para iconos al pasar el ratón */
.icon-animated {
    display: inline-block; /* Asegura que la transformación funcione */
    transition: transform 0.3s ease-in-out; /* Añade una transición suave */
}

/* Animación para imágenes al pasar el ratón */
.image-animated {
    display: inline-block; /* Asegura que la transformación funcione */
    transition: transform 0.3s ease-in-out; /* Añade una transición suave */
}

/* Las animaciones de hover (scale) se manejan con clases de Tailwind en el HTML */
/* No se necesitan reglas CSS adicionales aquí para eso */

/* --- Corrección para títulos cortados por el header fijo --- */
/* Añade un margen superior a las secciones que son destino de los enlaces del menú
   para que el header fijo no cubra el título al hacer scroll.
   Ajusta este valor (ej. 6rem) según la altura real de tu header. */
#inicio, /* Incluir #inicio también si se enlaza a él desde fuera de la página */
#nosotros,
#oferta,
#vida,
#admisiones,
#comunidad,
#contacto,
#testimonios { /* Incluir todas las secciones a las que se podría enlazar */
    scroll-margin-top: 6rem; /* Valor de ejemplo, ajusta si es necesario */
}

/* Estilos para el mensaje del formulario */
.bg-green-100 { background-color: #d1fae5; }
.text-green-700 { color: #047857; }
.bg-red-100 { background-color: #fee2e2; }
.text-red-700 { color: #b91c1c; }

/* --- Animaciones de Entrada al Scroll (Intersection Observer) --- */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Retardos secuenciales para tarjetas */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* Accesibilidad: desactivar animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --- Barra de Acción Móvil Inferior (Mobile Dock) --- */
.mobile-dock {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 8px);
}

.mobile-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4b5563;
    padding: 0.5rem 0.25rem;
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.mobile-dock-item i {
    font-size: 1.25rem;
    margin-bottom: 0.2rem;
}

.mobile-dock-item:active {
    transform: scale(0.92);
}

.mobile-dock-item.highlight {
    color: #2563eb;
}

/* Espacio en body para que el dock no tape el pie de página en móviles */
@media (max-width: 767px) {
    body {
        padding-bottom: 4.2rem;
    }
}

/* --- Lightbox Modal (Visor de Galería) --- */
#lightbox-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#lightbox-modal.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#lightbox-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-img-container img {
    max-height: 82vh;
    max-width: 92vw;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
}

/* Botones de filtro de galería activos */
.gallery-filter-btn.active {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* --- Formulario Multi-Pasos Inteligente --- */
.step-indicator {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.step-indicator.active {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.step-indicator.completed {
    background-color: #10b981;
    color: #ffffff;
}

.step-indicator.pending {
    background-color: #e5e7eb;
    color: #6b7280;
}

.level-card {
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.25s ease;
}

.level-card:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.level-card.selected {
    border-color: #2563eb;
    background-color: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

.reason-chip {
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.reason-chip.selected {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

/* Pestañas del Calendario */
.tab-btn.active {
    border-bottom: 3px solid #2563eb;
    color: #2563eb;
    font-weight: 700;
}

/* ==========================================================================
   SISTEMA DE MODO CLARO / OSCURO (LIGHT & DARK MODE)
   ========================================================================== */

/* Suavizado de transición de tema */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Estilos base de Modo Oscuro */
html.dark body {
    background-color: #030712; /* gray-950 */
    color: #f3f4f6; /* gray-100 */
}

/* Barra de Navegación Superior */
html.dark header,
html.dark #site-header {
    background-color: #111827 !important; /* gray-900 */
    border-bottom: 1px solid #1f2937 !important; /* gray-800 */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html.dark header span.text-gray-800,
html.dark header .text-gray-900 {
    color: #f9fafb !important;
}

html.dark #desktop-menu a:not(.btn):not(.text-blue-600),
html.dark #mobile-menu a:not(.btn):not(.text-blue-600) {
    color: #d1d5db;
}

html.dark #desktop-menu a:not(.btn):hover,
html.dark #mobile-menu a:not(.btn):hover {
    color: #60a5fa;
    background-color: rgba(55, 65, 81, 0.4);
}

html.dark #mobile-menu {
    background-color: #111827;
    border-bottom: 1px solid #1f2937;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Barra Móvil Inferior (Mobile Dock) */
html.dark .mobile-dock {
    background: rgba(17, 24, 39, 0.95);
    border-top: 1px solid #374151;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

html.dark .mobile-dock-item {
    color: #9ca3af;
}

html.dark .mobile-dock-item.highlight {
    color: #60a5fa;
}

/* Botón Toggle de Modo Claro / Oscuro */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    color: #4b5563;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.theme-toggle-btn:hover {
    background-color: #f3f4f6;
    color: #1f2937;
    border-color: #d1d5db;
    transform: scale(1.06);
}

html.dark .theme-toggle-btn {
    border-color: #374151;
    background-color: #1f2937;
    color: #fbbf24; /* Ámbar sol */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html.dark .theme-toggle-btn:hover {
    background-color: #374151;
    color: #f59e0b;
    border-color: #4b5563;
}

/* Tarjetas y Contenedores en Modo Oscuro */
html.dark .level-card {
    border-color: #374151;
    background-color: #1f2937;
    color: #f3f4f6;
}

html.dark .level-card:hover {
    border-color: #60a5fa;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

html.dark .level-card.selected {
    border-color: #3b82f6;
    background-color: rgba(37, 99, 235, 0.18);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

html.dark .reason-chip {
    border-color: #374151;
    background-color: #1f2937;
    color: #e5e7eb;
}

html.dark .reason-chip:hover {
    border-color: #60a5fa;
}

html.dark .reason-chip.selected {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

html.dark .step-indicator.pending {
    background-color: #374151;
    color: #9ca3af;
}

/* Inputs, Textareas y Selectores */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"],
html.dark input[type="date"],
html.dark input[type="url"],
html.dark textarea,
html.dark select {
    background-color: #111827;
    border-color: #374151;
    color: #f9fafb;
}

html.dark input[type="text"]:focus,
html.dark input[type="email"]:focus,
html.dark input[type="tel"]:focus,
html.dark input[type="date"]:focus,
html.dark input[type="url"]:focus,
html.dark textarea:focus,
html.dark select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Modales en Modo Oscuro */
html.dark .modal-content,
html.dark #modal-admin-event > div,
html.dark #modal-admin-circular > div,
html.dark #modal-event-detail > div {
    background-color: #111827;
    border: 1px solid #374151;
    color: #f9fafb;
}

/* ==========================================================================
   PRESERVACIÓN ESTRICTA: BOLETA OFICIAL SEP / SGA (NO INVERTIR COLORES)
   ========================================================================== */
html.dark #boleta-page-1,
html.dark #boleta-page-2 {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html.dark #boleta-page-1 *,
html.dark #boleta-page-2 * {
    color: inherit;
}

html.dark #boleta-page-1 table,
html.dark #boleta-page-2 table,
html.dark #boleta-page-1 th,
html.dark #boleta-page-2 th,
html.dark #boleta-page-1 td,
html.dark #boleta-page-2 td {
    border-color: #000000 !important;
}

html.dark #printable-boleta-container {
    background-color: transparent !important;
}

/* ==========================================================================
   PRESERVACIÓN ESTRICTA: ESTADO DE CUENTA OFICIAL (HOJA BLANCA IMPRIMIBLE)
   ========================================================================== */
#printable-estado-cuenta-container,
html.dark #printable-estado-cuenta-container,
.edo-cta-sheet,
html.dark .edo-cta-sheet {
    background-color: #ffffff !important;
    color: #111827 !important;
}

#printable-estado-cuenta-container *,
html.dark #printable-estado-cuenta-container * {
    color: inherit;
}

#printable-estado-cuenta-container table,
html.dark #printable-estado-cuenta-container table,
#printable-estado-cuenta-container th,
html.dark #printable-estado-cuenta-container th,
#printable-estado-cuenta-container td,
html.dark #printable-estado-cuenta-container td {
    border-color: #d1d5db !important;
}

#printable-estado-cuenta-container .bg-gray-50,
html.dark #printable-estado-cuenta-container .bg-gray-50 {
    background-color: #f9fafb !important;
}

#printable-estado-cuenta-container .bg-gray-100,
html.dark #printable-estado-cuenta-container .bg-gray-100 {
    background-color: #f3f4f6 !important;
}

#printable-estado-cuenta-container .text-emerald-800,
html.dark #printable-estado-cuenta-container .text-emerald-800 {
    color: #065f46 !important;
}

#printable-estado-cuenta-container .text-emerald-700,
html.dark #printable-estado-cuenta-container .text-emerald-700 {
    color: #047857 !important;
}

#printable-estado-cuenta-container .text-red-600,
html.dark #printable-estado-cuenta-container .text-red-600 {
    color: #dc2626 !important;
}

#printable-estado-cuenta-container .text-amber-700,
html.dark #printable-estado-cuenta-container .text-amber-700 {
    color: #b45309 !important;
}

#printable-estado-cuenta-container .text-gray-900,
html.dark #printable-estado-cuenta-container .text-gray-900 {
    color: #111827 !important;
}

/* --- BOTÓN FLOTANTE DE WHATSAPP (CRO CTA) --- */
.floating-whatsapp-btn {
    box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4), 0 8px 10px -6px rgba(37, 211, 102, 0.2);
    will-change: transform;
}
.floating-whatsapp-btn:hover {
    box-shadow: 0 20px 30px -5px rgba(37, 211, 102, 0.5), 0 10px 15px -5px rgba(37, 211, 102, 0.3);
}

/* --- MENÚ DESPLEGABLE (DROPDOWN DE NAVEGACIÓN) --- */
.dropdown-group {
    position: relative;
}

.dropdown-group:hover .dropdown-menu,
.dropdown-group:focus-within .dropdown-menu,
.dropdown-group.is-active .dropdown-menu {
    display: block !important;
    animation: fadeInDropdown 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dropdown-group:hover .dropdown-arrow,
.dropdown-group:focus-within .dropdown-arrow,
.dropdown-group.is-active .dropdown-arrow {
    transform: rotate(180deg);
}

@keyframes fadeInDropdown {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   SMART HEADER & SCROLL-TO-TOP BUTTON
   ========================================================================== */
header,
#site-header {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, box-shadow 0.2s;
    will-change: transform;
}

header.header-hidden,
#site-header.header-hidden {
    transform: translateY(-100%);
}

header.header-scrolled,
#site-header.header-scrolled {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Botón flotante Volver Arriba */
#scroll-to-top {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, color 0.2s;
}

#scroll-to-top.is-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}