/* =====================================================================
   Chinchester - UI global
   - Modo nocturno (html.dark) sobre las utilidades de Tailwind
   - Tooltips con [data-tooltip]
   - Navbar que se oculta al bajar y aparece al subir ([data-autohide-nav])
   ===================================================================== */

/* ---------- Transición suave al cambiar de tema ----------
   Se usa la View Transition del navegador (un fundido de la página completa, sin recalcular
   cada elemento). Antes se aplicaba una transición a TODOS los elementos (html.theme-transition *),
   lo que provocaba el aviso "Forced reflow" en la consola. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Navbar auto-ocultable ---------- */
[data-autohide-nav] {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
}
[data-autohide-nav].nav-hidden {
    transform: translateY(-110%);
}
[data-autohide-nav].nav-scrolled {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* ---------- Tooltips (compactos, con flecha hacia el elemento) ---------- */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%) translateY(3px);
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 8px;
    border-radius: 5px;
    width: max-content;
    max-width: 170px;
    white-space: normal;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    z-index: 60;
}
/* Flecha: triángulo pegado al globo apuntando al botón */
[data-tooltip]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #1f2937;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, visibility .12s;
    z-index: 61;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
/* Pantallas táctiles: no hay "hover"; el tooltip se muestra al mantener presionado o al tocar
   un botón de solo ícono (clase .tt-show, la pone app-ui.js). Se evita el hover "pegado". */
@media (hover: none) {
    [data-tooltip]:hover:not(.tt-show)::after, [data-tooltip]:hover:not(.tt-show)::before { opacity: 0; visibility: hidden; }
    [data-tooltip] { -webkit-touch-callout: none; }
    [data-tooltip].tt-show::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); font-size: 12px; padding: 6px 10px; max-width: 220px; }
    [data-tooltip].tt-show::before { opacity: 1; visibility: visible; }
    /* Cerca de los bordes de la pantalla el globo se alinea para no cortarse */
    [data-tooltip].tt-show.tt-edge-left::after { left: 0; transform: none; }
    [data-tooltip].tt-show.tt-edge-right::after { left: auto; right: 0; transform: none; }
    .nav-link-tt[data-tooltip].tt-show::after, .nav-link-tt[data-tooltip].tt-show::before { display: block; }
}
html.dark [data-tooltip]::after { background: #f1f5f9; color: #0f172a; }
html.dark [data-tooltip]::before { border-top-color: #f1f5f9; }
/* ---------- Botón de modo nocturno ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgba(255, 255, 255, .15);
    color: inherit;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
    flex-shrink: 0;
}
.theme-toggle:hover { transform: rotate(15deg) scale(1.05); }
.theme-toggle .tt-sun { display: none; }
html.dark .theme-toggle .tt-sun { display: inline; }
html.dark .theme-toggle .tt-moon { display: none; }

.theme-toggle-floating {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 70;
    width: 44px;
    height: 44px;
    background: #fff;
    color: #4338ca;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
html.dark .theme-toggle-floating { background: #1e293b; color: #fbbf24; }
@media print { .theme-toggle-floating { display: none !important; } }

/* =====================================================================
   MODO NOCTURNO
   ===================================================================== */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1120; color: #e2e8f0; }

/* Fondos neutros */
html.dark .bg-white,
html.dark .bg-gray-50\/50 { background-color: #1e293b !important; }
html.dark .bg-gray-50 { background-color: #172033 !important; }
html.dark .bg-gray-100 { background-color: #243044 !important; }
html.dark .bg-gray-200 { background-color: #334155 !important; }
html.dark .bg-gray-300 { background-color: #475569 !important; }
html.dark .bg-gray-800 { background-color: #0f172a !important; }
html.dark .bg-white\/10 { background-color: rgba(255,255,255,.08) !important; }

/* Tintes suaves de color -> versión translúcida */
html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(99,102,241,.16) !important; }
html.dark .bg-blue-50,   html.dark .bg-blue-100   { background-color: rgba(59,130,246,.16) !important; }
html.dark .bg-green-50,  html.dark .bg-green-100  { background-color: rgba(34,197,94,.15) !important; }
html.dark .bg-red-50,    html.dark .bg-red-100    { background-color: rgba(239,68,68,.15) !important; }
html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(234,179,8,.15) !important; }
html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(168,85,247,.16) !important; }
html.dark .bg-pink-50,   html.dark .bg-pink-100   { background-color: rgba(236,72,153,.15) !important; }
html.dark .bg-teal-50,   html.dark .bg-teal-100   { background-color: rgba(20,184,166,.15) !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(249,115,22,.15) !important; }
html.dark .bg-cyan-50,   html.dark .bg-cyan-100   { background-color: rgba(6,182,212,.15) !important; }
html.dark .bg-green-200 { background-color: rgba(34,197,94,.3) !important; }

/* Hover de fondos neutros */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-white:hover { background-color: #2b3a52 !important; }
html.dark .hover\:bg-gray-200:hover,
html.dark .hover\:bg-gray-300:hover { background-color: #3b4a63 !important; }
html.dark .hover\:bg-indigo-50:hover,
html.dark .hover\:bg-purple-50:hover,
html.dark .hover\:bg-pink-50:hover,
html.dark .hover\:bg-blue-50:hover { background-color: rgba(99,102,241,.22) !important; }

/* Textos neutros */
html.dark .text-gray-900, html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #7c8aa0 !important; }
html.dark .text-black { color: #f1f5f9 !important; }

/* Textos de color oscuros -> versión clara legible */
html.dark .text-indigo-600, html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #a5b4fc !important; }
html.dark .text-blue-600, html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .text-green-600, html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac !important; }
html.dark .text-red-600, html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5 !important; }
html.dark .text-yellow-600, html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fde047 !important; }
html.dark .text-purple-600, html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: #d8b4fe !important; }
html.dark .text-pink-600, html.dark .text-pink-700, html.dark .text-pink-800 { color: #f9a8d4 !important; }
html.dark .text-teal-600, html.dark .text-teal-700, html.dark .text-teal-800 { color: #5eead4 !important; }
html.dark .text-orange-600, html.dark .text-orange-700, html.dark .text-orange-800 { color: #fdba74 !important; }

/* Los botones de color sólido mantienen su texto blanco */
html.dark [class*="bg-indigo-6"].text-white, html.dark [class*="bg-indigo-7"].text-white,
html.dark [class*="bg-green-6"].text-white, html.dark [class*="bg-red-6"].text-white,
html.dark [class*="bg-blue-6"].text-white, html.dark [class*="bg-purple-6"].text-white { color: #fff !important; }

/* Bordes */
html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-gray-300, html.dark .border-gray-400 { border-color: #475569 !important; }
html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + * { border-color: #334155 !important; }
html.dark .border-b, html.dark .border-t { border-color: #334155; }
html.dark hr { border-color: #334155; }

/* Formularios */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; }
html.dark option { background: #0f172a; color: #e2e8f0; }

/* Tablas */
html.dark table thead, html.dark thead.bg-gray-50, html.dark th { background-color: #172033 !important; color: #cbd5e1 !important; }
html.dark tbody tr:hover { background-color: #22304a !important; }

/* Código */
html.dark code { background-color: #0f172a !important; color: #c7d2fe !important; }

/* Sombras más profundas en oscuro */
html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-md, html.dark .shadow-lg, html.dark .shadow-xl {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45) !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: #0b1120; }
html.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }

/* Imágenes de logos oscuros sobre fondo oscuro */
html.dark .dark-invert { filter: invert(1) hue-rotate(180deg); }

/* No aplicar modo oscuro al imprimir */
@media print {
    html.dark body { background: #fff !important; color: #000 !important; }
}

/* En pantallas muy anchas las etiquetas del menú ya se ven: sin tooltip */
@media (min-width: 1536px) {
    .nav-link-tt[data-tooltip]::after, .nav-link-tt[data-tooltip]::before { display: none; }
}
/* Tooltips del nav superior se muestran hacia abajo */
nav [data-tooltip]::after { bottom: auto; top: calc(100% + 7px); }
nav [data-tooltip]::before { bottom: auto; top: calc(100% + 2px); border-top: 0; border-bottom: 5px solid #1f2937; }
html.dark nav [data-tooltip]::before { border-bottom-color: #f1f5f9; }

/* Fondos blancos semitransparentes (navbar sólida, tarjetas con opacidad) */
html.dark .bg-white\/95, html.dark .bg-white\/90, html.dark .bg-white\/80 { background-color: rgba(15, 23, 42, .92) !important; }
html.dark .bg-gray-100.text-gray-800 { color: #e2e8f0 !important; }
html.dark .text-cyan-600, html.dark .text-cyan-700, html.dark .text-cyan-800, html.dark .text-cyan-900 { color: #67e8f9 !important; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(16,185,129,.15) !important; }
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: #243044 !important; }

/* =====================================================================
   MODO NOCTURNO - PÁGINA DE INICIO (cielo nocturno elegante)
   ===================================================================== */
html.dark body.home-page {
    background:
        radial-gradient(1100px 620px at 12% -8%, rgba(99, 102, 241, .38), transparent 62%),
        radial-gradient(900px 520px at 92% 8%, rgba(168, 85, 247, .30), transparent 60%),
        radial-gradient(900px 700px at 50% 108%, rgba(236, 72, 153, .20), transparent 62%),
        linear-gradient(165deg, #0a0f2c 0%, #121338 45%, #1c1140 100%) !important;
    background-attachment: fixed !important;
}
/* Partículas más sutiles */
html.dark .home-page #particles-js { opacity: .45; }

/* Tarjetas de vidrio */
html.dark .home-page .bg-white\/10 {
    background-color: rgba(15, 23, 42, .45) !important;
    border-color: rgba(165, 180, 252, .16) !important;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .35), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
html.dark .home-page .bg-white\/20 {
    background-color: rgba(129, 140, 248, .16) !important;
    border-color: rgba(165, 180, 252, .25) !important;
}
html.dark .home-page .bg-white\/20:hover { background-color: rgba(129, 140, 248, .26) !important; }

/* Botones blancos -> degradado luminoso con texto blanco */
html.dark .home-page .bg-white,
html.dark .home-page .bg-white:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .35) !important;
}
html.dark .home-page .bg-white * { color: #fff !important; }
html.dark .home-page .bg-white:hover { filter: brightness(1.1); }

/* Tarjetas de juegos de colores: un poco más sobrias de noche */
html.dark .home-page .rounded-2xl[class*="from-"] {
    filter: saturate(.85) brightness(.88);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .45) !important;
}
html.dark .home-page .rounded-2xl[class*="from-"]:hover { filter: saturate(1) brightness(.98); }

/* Pie de página */
html.dark .home-page footer { background-color: rgba(2, 6, 23, .55) !important; border-color: rgba(165, 180, 252, .12) !important; }

/* Navbar de vidrio (inicio): buscador e idioma translúcidos, nada de negro */
html.dark #public-navbar.bg-white\/10 {
    background-color: rgba(10, 15, 44, .55) !important;
    border-color: rgba(165, 180, 252, .14) !important;
}
html.dark #public-navbar.bg-white\/10 input[type="search"],
html.dark #public-navbar.bg-white\/10 .lang-menu-btn {
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #f8fafc !important;
}
html.dark #public-navbar.bg-white\/10 input[type="search"]::placeholder { color: rgba(226, 232, 240, .65) !important; }

/* Selector de idioma en general (modo nocturno) */
html.dark .lang-menu-btn {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #6366f1 !important;
}

/* Tooltip más ancho (textos de ayuda) y visible también al enfocar un campo */
.tooltip-wide[data-tooltip]::after { max-width: 280px; font-size: 12px; padding: 6px 10px; text-align: left; }
.tooltip-on-focus[data-tooltip]:focus-within::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tooltip-on-focus[data-tooltip]:focus-within::before { opacity: 1; visibility: visible; }

/* =====================================================================
   MODO NOCTURNO UNIFICADO (mismo criterio que el inicio, en todo el sitio)
   Cielo nocturno + vidrio translúcido + botones en degradado
   ===================================================================== */
:root {
    --night-bg:
        radial-gradient(1100px 620px at 12% -8%, rgba(99, 102, 241, .32), transparent 62%),
        radial-gradient(900px 520px at 92% 8%, rgba(168, 85, 247, .24), transparent 60%),
        radial-gradient(900px 700px at 50% 108%, rgba(236, 72, 153, .16), transparent 62%),
        linear-gradient(165deg, #0a0f2c 0%, #121338 45%, #1c1140 100%);
    --glass: rgba(17, 24, 58, .62);
    --glass-strong: rgba(17, 22, 54, .96);
    --glass-soft: rgba(255, 255, 255, .05);
    --glass-border: rgba(165, 180, 252, .16);
    --glass-shadow: 0 10px 30px rgba(2, 6, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .04);
    --night-text: #e8ebff;
    --night-muted: #a9b1d6;
    --brand-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%);
}

/* Fondo: cielo nocturno en todas las páginas (login, registro, examen, juego...) */
html.dark body,
html.dark body.bg-gray-50,
html.dark body[class*="bg-gradient-to"],
html.dark body.kids-theme {
    background: var(--night-bg) !important;
    background-attachment: fixed !important;
    color: var(--night-text);
    animation: none !important;
}
html.dark body.kids-theme::before { opacity: .35; }

/* Tarjetas y paneles blancos -> vidrio */
html.dark .bg-white:not(a):not(button):not(input):not(select):not(textarea):not(option) {
    background-color: var(--glass) !important;
    border-color: var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    /* sin backdrop-filter: rompería elementos position:fixed internos (ej. temporizador del examen) */
}
html.dark .bg-gray-50:not(body) { background-color: rgba(30, 38, 84, .45) !important; }
html.dark .bg-gray-100 { background-color: var(--glass-soft) !important; }
html.dark .bg-gray-200 { background-color: rgba(255, 255, 255, .09) !important; }
html.dark .bg-gray-300 { background-color: rgba(255, 255, 255, .14) !important; }
html.dark .bg-gray-800, html.dark footer.bg-gray-800 {
    background-color: rgba(2, 6, 23, .55) !important;
    border-top: 1px solid rgba(165, 180, 252, .12);
}

/* Modales y menús desplegables: más opacos para leer bien */
html.dark .fixed .bg-white:not(a):not(button),
html.dark [role="dialog"] .bg-white:not(a):not(button),
html.dark #notifications-menu,
html.dark .absolute.bg-white {
    background-color: var(--glass-strong) !important;
}

/* Enlaces y botones blancos -> degradado luminoso con texto blanco */
html.dark a.bg-white,
html.dark button.bg-white {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .32) !important;
}
html.dark a.bg-white *, html.dark button.bg-white * { color: #fff !important; }
html.dark a.bg-white:hover, html.dark button.bg-white:hover { filter: brightness(1.1); }

/* Botones principales índigo -> mismo degradado de marca */
html.dark .bg-indigo-600:not(body):not(.rounded-full) {
    background: var(--brand-gradient) !important;
    border-color: transparent !important;
}
html.dark .hover\:bg-indigo-700:hover { filter: brightness(1.12); }

/* Textos */
html.dark .text-gray-900, html.dark .text-gray-800 { color: #f1f3ff !important; }
html.dark .text-gray-700 { color: #dfe3ff !important; }
html.dark .text-gray-600 { color: #b9c0e4 !important; }
html.dark .text-gray-500 { color: var(--night-muted) !important; }
html.dark .text-gray-400 { color: #8a92bd !important; }

/* Bordes y divisores con tono lavanda */
html.dark .border-gray-100, html.dark .border-gray-200,
html.dark .border-gray-300, html.dark .border-gray-400 { border-color: var(--glass-border) !important; }
html.dark .divide-gray-100 > * + *, html.dark .divide-gray-200 > * + * { border-color: var(--glass-border) !important; }
html.dark hr { border-color: var(--glass-border) !important; }

/* Formularios translúcidos (nada de negro) */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.dark select,
html.dark textarea,
html.dark .lang-menu-btn {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #f1f3ff !important;
    border-color: rgba(165, 180, 252, .25) !important;
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus {
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .25) !important;
    outline: none;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: rgba(185, 192, 228, .6) !important; }
html.dark option, html.dark select option { background: #161b45; color: #f1f3ff; }
html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: #8b5cf6; }

/* Navbars sólidas -> vidrio oscuro */
html.dark nav[data-autohide-nav].bg-white,
html.dark #public-navbar.bg-white\/95 {
    background-color: rgba(10, 15, 44, .72) !important;
    border-color: var(--glass-border) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none !important;
}
html.dark nav[data-autohide-nav].nav-scrolled { box-shadow: 0 8px 24px rgba(2, 6, 23, .45) !important; }
html.dark .bg-indigo-50.text-indigo-700 { background-color: rgba(129, 140, 248, .18) !important; color: #e0e7ff !important; }

/* Tablas */
html.dark table thead, html.dark thead.bg-gray-50, html.dark th {
    background-color: rgba(30, 38, 84, .6) !important;
    color: #c7cdf0 !important;
}
html.dark tbody tr:hover { background-color: rgba(129, 140, 248, .08) !important; }

/* Tarjetas y banners de colores: un poco más sobrios de noche */
html.dark body [class*="bg-gradient-to"]:not(a):not(button):not(input):not(nav),
html.dark [style*="linear-gradient"][class*="rounded"] {
    filter: saturate(.82) brightness(.86);
}
html.dark body [class*="rounded"][class*="bg-gradient-to"]:not(a):not(button):hover,
html.dark [style*="linear-gradient"][class*="rounded"]:hover { filter: saturate(.95) brightness(.95); }
/* Evitar doble atenuado en degradados anidados */
html.dark body [class*="bg-gradient-to"] [class*="bg-gradient-to"] { filter: none; }

/* Código */
html.dark code { background-color: rgba(129, 140, 248, .14) !important; color: #e0e7ff !important; }

/* Notificaciones Toast */
html.dark .chin-toast {
    background: rgba(20, 26, 66, .96) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--toast-color);
}

/* Barra de desplazamiento */
html.dark ::-webkit-scrollbar-track { background: #0a0f2c; }
html.dark ::-webkit-scrollbar-thumb { background: #2e3470; }

/* Botón flotante de modo nocturno */
html.dark .theme-toggle-floating { background: rgba(17, 24, 58, .9); border-color: var(--glass-border); }

/* ----- Vista previa del docente (estilos propios de preview-exam) ----- */
html.dark .preview-page .q-card { background: var(--glass) !important; border-color: var(--glass-border) !important; }
html.dark .preview-page .q-head { background: rgba(30, 38, 84, .6) !important; border-color: var(--glass-border) !important; color: var(--night-text); }
html.dark .preview-page .q-text { color: var(--night-text) !important; }
html.dark .preview-page .opt { background: rgba(255, 255, 255, .05) !important; border-color: var(--glass-border) !important; color: var(--night-text); }
html.dark .preview-page .opt.correct, html.dark .preview-page .answer-box { background: rgba(16, 185, 129, .16) !important; color: #a7f3d0; }
html.dark .preview-page .matching, html.dark .preview-page .ordering,
html.dark .preview-page .essay, html.dark .preview-page .explain { background: rgba(255, 255, 255, .05) !important; color: var(--night-text) !important; border-color: var(--glass-border) !important; }

/* No aplicar el tema nocturno al imprimir */
@media print {
    html.dark body { background: #fff !important; color: #000 !important; }
    html.dark .bg-white:not(a):not(button) { background: #fff !important; box-shadow: none !important; backdrop-filter: none; }
}

/* ----- Modales de confirmación (modal-notification.js) ----- */
html.dark .chinchester-modal-content {
    background: rgba(17, 22, 54, .97) !important;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 70px rgba(2, 6, 23, .7) !important;
}
html.dark .chinchester-modal-title { color: #f1f3ff !important; }
html.dark .chinchester-modal-message { color: var(--night-muted) !important; }
html.dark .chinchester-modal-details { background: rgba(255, 255, 255, .05) !important; color: #dfe3ff !important; }
html.dark .chinchester-btn-primary { background: var(--brand-gradient) !important; }
html.dark .chinchester-btn-secondary {
    background: rgba(255, 255, 255, .06) !important;
    color: #dfe3ff !important;
    border-color: var(--glass-border) !important;
}
html.dark .chinchester-btn-secondary:hover { background: rgba(255, 255, 255, .12) !important; }

/* Ventana del buscador general */
html.dark #global-search-modal mark { background: rgba(250, 204, 21, .3) !important; color: #fff !important; }

/* Degradados pastel claros (filtros, botones "Atrás", etiquetas) -> vidrio nocturno */
html.dark .from-indigo-50, html.dark .from-green-50, html.dark .from-purple-50,
html.dark .from-pink-50, html.dark .from-gray-100, html.dark .from-gray-50,
html.dark .from-blue-200, html.dark .from-blue-100, html.dark .from-blue-50,
html.dark .from-purple-100, html.dark .from-indigo-100 {
    background-image: none !important;
    background-color: var(--glass) !important;
    border-color: var(--glass-border) !important;
    filter: none !important;
}
html.dark .hover\:from-purple-50:hover, html.dark .hover\:from-indigo-50:hover {
    background-image: none !important;
    background-color: rgba(129, 140, 248, .18) !important;
}

html.dark .preview-page .q-head *:not(.q-num) { color: var(--night-muted) !important; }

/* ---------- Visor de imágenes ampliables ---------- */
img[data-zoomable] { cursor: zoom-in; transition: transform .15s ease, box-shadow .15s ease; }
img[data-zoomable]:hover { box-shadow: 0 6px 18px rgba(79, 70, 229, .3); }
.zoomable-wrap { position: relative; display: inline-block; }
/* Sin ícono de lupa encima de la imagen (era invasivo): basta el cursor de zoom y el texto de abajo */
.img-zoom-overlay {
    position: fixed; inset: 0; z-index: 10050;
    display: none; align-items: center; justify-content: center;
    background: rgba(6, 9, 30, .9);
    opacity: 0; transition: opacity .2s ease;
    touch-action: none;
}
.img-zoom-overlay.is-open { opacity: 1; }
.img-zoom-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 48px 16px; }
.img-zoom-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    transition: transform .15s ease; user-select: none; -webkit-user-drag: none;
    background: #fff;
}
.img-zoom-close {
    position: absolute; top: 14px; right: 18px; z-index: 2;
    width: 44px; height: 44px; border-radius: 9999px; border: none;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 30px; line-height: 1;
    cursor: pointer;
}
.img-zoom-close:hover { background: rgba(255, 255, 255, .28); }
.img-zoom-hint {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    color: rgba(255, 255, 255, .8); font-size: 13px; background: rgba(0, 0, 0, .35);
    padding: 6px 12px; border-radius: 9999px; white-space: nowrap;
}
@media (max-width: 640px) { .img-zoom-hint { white-space: normal; text-align: center; width: calc(100% - 32px); } }
@media print { .img-zoom-overlay { display: none !important; } }

/* Tooltip que se muestra HACIA ABAJO (cuando arriba no hay espacio) */
.tooltip-bottom[data-tooltip]::after { bottom: auto; top: calc(100% + 7px); }
.tooltip-bottom[data-tooltip]::before { bottom: auto; top: calc(100% + 2px); border-top: 0; border-bottom: 5px solid #1f2937; }
html.dark .tooltip-bottom[data-tooltip]::before { border-bottom-color: #f1f5f9; }
/* Si está pegado al borde derecho, alinear el globo a la derecha */
.tooltip-bottom.tooltip-right[data-tooltip]::after { left: auto; right: 0; transform: translateY(3px); }
.tooltip-bottom.tooltip-right[data-tooltip]:hover::after { transform: translateY(0); }

/* =====================================================================
   RENDIMIENTO EN CELULARES / PANTALLAS TÁCTILES
   Evita el scroll lento y los parpadeos al aparecer las tarjetas:
   se desactivan los efectos más costosos de pintar en GPUs móviles.
   ===================================================================== */
@media (max-width: 1024px), (hover: none) {
    /* El desenfoque de fondo (vidrio) se recalcula en cada frame del scroll */
    [class*="backdrop-blur"],
    html.dark nav[data-autohide-nav].bg-white,
    html.dark #public-navbar.bg-white\/95,
    html.dark #public-navbar.bg-white\/10 {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* Sin desenfoque, el vidrio necesita un poco más de opacidad para leerse bien */
    .bg-white\/10 { background-color: rgba(255, 255, 255, .16); }
    html.dark .home-page .bg-white\/10 { background-color: rgba(15, 23, 42, .72) !important; }
    html.dark #public-navbar.bg-white\/10, html.dark #public-navbar.bg-white\/95,
    html.dark nav[data-autohide-nav].bg-white { background-color: rgba(10, 15, 44, .94) !important; }

    /* Fondo fijo = repintar toda la pantalla en cada scroll en móviles */
    html.dark body, html.dark body.home-page,
    html.dark body.bg-gray-50, html.dark body[class*="bg-gradient-to"] {
        background-attachment: scroll !important;
    }

    /* Los filtros CSS sobre tarjetas grandes son costosos: atenuar con una capa en su lugar */
    html.dark body [class*="bg-gradient-to"]:not(a):not(button):not(input):not(nav),
    html.dark [style*="linear-gradient"][class*="rounded"],
    html.dark .home-page .rounded-2xl[class*="from-"] {
        filter: none !important;
        box-shadow: inset 0 0 0 9999px rgba(10, 15, 44, .14) !important;
    }

    /* Animaciones infinitas decorativas */
    .float-animation, .pulse-glow, .animate-pulse, .animate-bounce, .animate-ping, .animate-spin-slow {
        animation: none !important;
    }

    /* En táctil el "hover" se queda pegado y mueve tarjetas al hacer scroll */
    .card-hover:hover,
    [class*="hover:-translate-y"]:hover,
    [class*="hover:scale"]:hover,
    [class*="hover:shadow-2xl"]:hover {
        transform: none !important;
    }
    [class*="transition-all"] { transition-property: color, background-color, border-color, opacity !important; }

    /* Sombras grandes y difusas cuestan mucho al desplazar */
    .shadow-2xl { box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important; }

    /* Tarjetas: capa propia para que el scroll sea fluido */
    .grid > [class*="rounded"] { transform: translateZ(0); }
}

/* Usuarios que piden menos movimiento en su sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (max-width: 1024px), (hover: none) {
    /* Animaciones de entrada (animate.css): en móviles provocan que el contenido parpadee al aparecer */
    .animate__animated { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   NAV DEL INICIO EN CELULARES (modo claro)
   Sin el desenfoque (desactivado por rendimiento) el vidrio blanco al 16 % se volvía casi
   invisible sobre secciones claras: en pantallas pequeñas se usa un degradado sólido.
   ===================================================================== */
@media (max-width: 1024px) {
    html:not(.dark) #public-navbar.bg-white\/10 {
        background: linear-gradient(120deg, rgba(79, 70, 229, .97) 0%, rgba(124, 58, 237, .97) 55%, rgba(219, 39, 119, .95) 100%) !important;
        border-color: rgba(255, 255, 255, .18) !important;
        box-shadow: 0 6px 18px rgba(49, 46, 129, .22);
    }
    html:not(.dark) #public-navbar.bg-white\/10 input[type="search"] {
        background-color: rgba(255, 255, 255, .18) !important;
    }
}

/* ---------- Pequeñas animaciones del nav (solo transform/opacity: no afectan el rendimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
    /* Entrada suave al cargar la página */
    #public-navbar > .container { animation: navContentIn .55s cubic-bezier(.2, .8, .2, 1) backwards; }
    #public-navbar a img { animation: navLogoPop .7s cubic-bezier(.34, 1.56, .64, 1) .1s backwards; }
    @keyframes navContentIn { from { transform: translateY(-8px); } to { transform: none; } }
    @keyframes navLogoPop { from { transform: scale(.6) rotate(-12deg); } to { transform: none; } }

    /* Brillo que cruza el nav una sola vez */
    #public-navbar::after {
        content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
        background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .22) 50%, transparent 100%) no-repeat;
        background-size: 30% 100%; background-position: -60% 0;
        animation: navShine 1.6s ease .5s 1 both;
    }
    @keyframes navShine { 0% { opacity: 1; background-position: -60% 0; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 160% 0; } }

    /* Respuesta al tocar enlaces y botones */
    #public-navbar a, #public-navbar button { transition: transform .15s ease, background-color .2s ease, color .2s ease; }
    #public-navbar a:active, #public-navbar button:active { transform: scale(.94); }
    #public-navbar a:hover img { transform: rotate(-8deg) scale(1.06); transition: transform .25s ease; }

    /* Botón de menú: los ícono gira al abrir */
    #public-nav-toggle i { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
    #public-nav-toggle[aria-expanded="true"] i { transform: rotate(90deg); }
    #public-nav-toggle[aria-expanded="true"] { background-color: rgba(255, 255, 255, .18); }

    /* Menú móvil: se despliega y sus opciones entran una tras otra */
    #public-nav-menu:not(.hidden) { animation: navMenuIn .28s ease both; transform-origin: top; }
    #public-nav-menu:not(.hidden) > * { animation: navItemIn .32s ease both; }
    #public-nav-menu:not(.hidden) > *:nth-child(2) { animation-delay: .03s; }
    #public-nav-menu:not(.hidden) > *:nth-child(3) { animation-delay: .06s; }
    #public-nav-menu:not(.hidden) > *:nth-child(4) { animation-delay: .09s; }
    #public-nav-menu:not(.hidden) > *:nth-child(5) { animation-delay: .12s; }
    #public-nav-menu:not(.hidden) > *:nth-child(6) { animation-delay: .15s; }
    #public-nav-menu:not(.hidden) > *:nth-child(7) { animation-delay: .18s; }
    @keyframes navMenuIn { from { transform: scaleY(.92); } to { transform: none; } }
    @keyframes navItemIn { from { transform: translateX(-12px); } to { transform: none; } }
}
#public-navbar { position: sticky; }

/* =====================================================================
   TARJETAS DE ADMINISTRACIÓN (modo claro): sombra y borde más marcados
   ===================================================================== */
html:not(.dark) #admin-app .bg-white[class*="rounded"],
html:not(.dark) .staff-cards .bg-white[class*="rounded"] {
    border: 1px solid #d5dae3 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 6px 16px -4px rgba(15, 23, 42, .18) !important;
}
html:not(.dark) #admin-app .bg-white[class*="rounded"]:hover,
html:not(.dark) .staff-cards .bg-white[class*="rounded"]:hover {
    border-color: #c3c9d6 !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, .09), 0 12px 26px -8px rgba(15, 23, 42, .26) !important;
}

/* ===== Celular: márgenes laterales delgados =====
   Antes: contenedor 16px + tarjeta 24-32px por lado (el texto empezaba a 40-48px del borde).
   Ahora: contenedor 8px + tarjetas 12px (el texto empieza a ~20px). */
@media (max-width: 639px) {
    .container,
    .max-w-7xl.px-4, .max-w-6xl.px-4, .max-w-5xl.px-4, .max-w-4xl.px-4, .max-w-3xl.px-4, .max-w-2xl.px-4,
    .max-w-7xl.px-6, .max-w-6xl.px-6, .max-w-5xl.px-6, .max-w-4xl.px-6, .max-w-3xl.px-6 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Tarjetas y cajas redondeadas: el relleno de escritorio se reduce */
    [class*="rounded"].p-4, [class*="rounded"].p-5, [class*="rounded"].p-6, [class*="rounded"].p-8,
    main .p-6, main .p-8, .container .p-6, .container .p-8 { padding: 12px !important; }
    [class*="rounded"].px-4, [class*="rounded"].px-5, [class*="rounded"].px-6, [class*="rounded"].px-8,
    main .px-6, main .px-8, .container .px-6, .container .px-8 { padding-left: 12px !important; padding-right: 12px !important; }
}
/* Nada que sobresalga (p. ej. tooltips ocultos junto al borde) debe crear desplazamiento horizontal.
   En <html> y <body> a la vez y con prioridad: `clip` no crea contenedores de scroll, así el nav fijo (sticky)
   sigue funcionando. (Si <body> quedara en `hidden` —el inicio lo tiene— se volvería contenedor de scroll y el
   nav dejaría de ocultarse/aparecer; y solo en <body> no basta en celulares.) */
@supports (overflow: clip) {
    html, body { overflow-x: clip !important; }
}