@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("../fonts/BarlowSemiCondensed-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* BomberoFlash V3.6.2 PERF-RELIEF — extracción estructural Fase 1. */

/* ═══════════════════════════════════════════════
       SPLASH v2 — BomberoFlash
       Profesional, épico, con imagen real
       ═══════════════════════════════════════════════ */
    #appSplash {
      position: fixed; inset: 0; z-index: 99999;
      background:
        radial-gradient(circle at 12% 8%, rgba(245,158,11,.22) 0, rgba(245,158,11,0) 30%),
        radial-gradient(circle at 88% 86%, rgba(37,99,235,.26) 0, rgba(37,99,235,0) 34%),
        radial-gradient(circle at 50% 43%, rgba(30,64,175,.18) 0, rgba(30,64,175,0) 34%),
        linear-gradient(145deg,#111827 0%,#0b1730 52%,#111c32 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      transition: opacity 0.28s cubic-bezier(0.4,0,0.2,1);
      overflow: hidden;
      isolation: isolate;
    }
    #appSplash::before {
      content: '';
      position: absolute;
      z-index: 0;
      width: min(920px,130vw);
      height: min(920px,130vw);
      left: 50%; top: 43%;
      transform: translate(-50%,-50%) rotate(-10deg);
      border: 1px solid rgba(148,163,184,.08);
      border-radius: 42%;
      box-shadow: 0 0 0 80px rgba(148,163,184,.025), 0 0 0 180px rgba(148,163,184,.018);
      pointer-events: none;
    }
    #appSplash::after {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: linear-gradient(to bottom,transparent 4%,black 38%,black 72%,transparent 96%);
      mask-image: linear-gradient(to bottom,transparent 4%,black 38%,black 72%,transparent 96%);
      pointer-events: none;
    }
    #appSplash.splash-out { opacity: 0; pointer-events: none; }
    /* Utilidades extra usadas en el editor (sin CDN) */
    .normal-case { text-transform: none !important; }
    .-top-2 { top: -0.5rem; }
    .-right-2 { right: -0.5rem; }
    .max-h-72 { max-height: 18rem; }
    .pt-1\.5 { padding-top: 0.375rem; }
    .bg-indigo-50\/40 { background-color: rgb(238 242 255 / 0.4); }

    /* ── TÁCTIL (tablet/móvil): los botones que en PC aparecen al pasar el
       cursor (editar, borrar, portada...) se muestran SIEMPRE, porque en
       pantalla táctil no existe el hover. En PC no cambia nada.
       (Se excluyen los adornos decorativos con pointer-events-none.) ── */
    @media (hover: none), (pointer: coarse) {
      .group .opacity-0.group-hover\:opacity-100:not(.pointer-events-none) {
        opacity: 1 !important;
      }
    }

    /* ── iPhone: respetar el notch superior (zona segura) ──
       env() vale 0 en dispositivos sin notch, así que es seguro en PC/tablet. */
    header.h-20 {
      padding-top: env(safe-area-inset-top, 0px);
      height: calc(5rem + env(safe-area-inset-top, 0px));
    }
    #mainSidebar { padding-top: env(safe-area-inset-top, 0px); }
    /* La barra de progreso sticky del test también baja bajo el notch */
    #viewTestRunner .sticky.top-0 { top: env(safe-area-inset-top, 0px); }

    /* ── Fix móvil: barra del test no desborda la página ── */
    .bf-no-scrollbar::-webkit-scrollbar { display: none; }
    .bf-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
    /* Los botones de la barra del test no se comprimen al deslizar */
    #viewTestRunner .bf-no-scrollbar > button,
    #viewTestRunner .bf-no-scrollbar > label { flex-shrink: 0; }
    /* Explicación en modo normal: un punto más grande y legible */
    #testCard .answer-feedback .feedback-body { font-size: 1.05rem; line-height: 1.75; }
    #testCard .answer-feedback .feedback-correct-text { font-size: 0.95rem; }

    /* Nada dentro del test puede provocar scroll horizontal de toda la página */
    #viewTestRunner { overflow-x: hidden; }
    #testCard { max-width: 100%; }
    /* Respuestas largas: el texto SIEMPRE se parte dentro del marco
       (también en modo enfoque y durante la animación al responder) */
    #testCard .space-y-3 > div { max-width: 100%; }
    #testCard .focus-opt-text {
      flex: 1 1 0%;
      min-width: 0;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    #testCard .answer-feedback,
    #testCard .answer-feedback * {
      max-width: 100%;
      overflow-wrap: break-word;
    }
    /* ════════════════════════════════════════════════
       AZUL CORPORATIVO v6 — remapeo índigo/violeta → azul
       Capa aditiva: solo cambia el matiz, no la estructura.
       ════════════════════════════════════════════════ */
    .bg-indigo-50{background-color:#eff6ff !important}
    .text-indigo-50{color:#eff6ff !important}
    .border-indigo-50{border-color:#eff6ff !important}
    .ring-indigo-50{--tw-ring-color:rgb(239 246 255 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-50{--tw-gradient-to:#eff6ff var(--tw-gradient-to-position) !important}
    .via-indigo-50{--tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#eff6ff var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-100{background-color:#dbeafe !important}
    .text-indigo-100{color:#dbeafe !important}
    .border-indigo-100{border-color:#dbeafe !important}
    .ring-indigo-100{--tw-ring-color:rgb(219 234 254 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-100{--tw-gradient-from:#dbeafe var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(219 234 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-100{--tw-gradient-to:#dbeafe var(--tw-gradient-to-position) !important}
    .via-indigo-100{--tw-gradient-to:rgb(219 234 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#dbeafe var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-200{background-color:#bfdbfe !important}
    .text-indigo-200{color:#bfdbfe !important}
    .border-indigo-200{border-color:#bfdbfe !important}
    .ring-indigo-200{--tw-ring-color:rgb(191 219 254 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-200{--tw-gradient-from:#bfdbfe var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(191 219 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-200{--tw-gradient-to:#bfdbfe var(--tw-gradient-to-position) !important}
    .via-indigo-200{--tw-gradient-to:rgb(191 219 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#bfdbfe var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-300{background-color:#93c5fd !important}
    .text-indigo-300{color:#93c5fd !important}
    .border-indigo-300{border-color:#93c5fd !important}
    .ring-indigo-300{--tw-ring-color:rgb(147 197 253 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-300{--tw-gradient-from:#93c5fd var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(147 197 253 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-300{--tw-gradient-to:#93c5fd var(--tw-gradient-to-position) !important}
    .via-indigo-300{--tw-gradient-to:rgb(147 197 253 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#93c5fd var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-400{background-color:#60a5fa !important}
    .text-indigo-400{color:#60a5fa !important}
    .border-indigo-400{border-color:#60a5fa !important}
    .ring-indigo-400{--tw-ring-color:rgb(96 165 250 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-400{--tw-gradient-to:#60a5fa var(--tw-gradient-to-position) !important}
    .via-indigo-400{--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#60a5fa var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-500{background-color:#3b82f6 !important}
    .text-indigo-500{color:#3b82f6 !important}
    .border-indigo-500{border-color:#3b82f6 !important}
    .ring-indigo-500{--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position) !important}
    .via-indigo-500{--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#3b82f6 var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-600{background-color:#2563eb !important}
    .text-indigo-600{color:#2563eb !important}
    .border-indigo-600{border-color:#2563eb !important}
    .ring-indigo-600{--tw-ring-color:rgb(37 99 235 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position) !important}
    .via-indigo-600{--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-700{background-color:#1d4ed8 !important}
    .text-indigo-700{color:#1d4ed8 !important}
    .border-indigo-700{border-color:#1d4ed8 !important}
    .ring-indigo-700{--tw-ring-color:rgb(29 78 216 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-700{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-700{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position) !important}
    .via-indigo-700{--tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1d4ed8 var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-800{background-color:#1e40af !important}
    .text-indigo-800{color:#1e40af !important}
    .border-indigo-800{border-color:#1e40af !important}
    .ring-indigo-800{--tw-ring-color:rgb(30 64 175 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-800{--tw-gradient-from:#1e40af var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position) !important}
    .via-indigo-800{--tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1e40af var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-indigo-900{background-color:#1e3a8a !important}
    .text-indigo-900{color:#1e3a8a !important}
    .border-indigo-900{border-color:#1e3a8a !important}
    .ring-indigo-900{--tw-ring-color:rgb(30 58 138 / var(--tw-ring-opacity,1)) !important}
    .from-indigo-900{--tw-gradient-from:#1e3a8a var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-indigo-900{--tw-gradient-to:#1e3a8a var(--tw-gradient-to-position) !important}
    .via-indigo-900{--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1e3a8a var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-50{background-color:#eff6ff !important}
    .text-violet-50{color:#eff6ff !important}
    .border-violet-50{border-color:#eff6ff !important}
    .ring-violet-50{--tw-ring-color:rgb(239 246 255 / var(--tw-ring-opacity,1)) !important}
    .from-violet-50{--tw-gradient-from:#eff6ff var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-50{--tw-gradient-to:#eff6ff var(--tw-gradient-to-position) !important}
    .via-violet-50{--tw-gradient-to:rgb(239 246 255 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#eff6ff var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-100{background-color:#dbeafe !important}
    .text-violet-100{color:#dbeafe !important}
    .border-violet-100{border-color:#dbeafe !important}
    .ring-violet-100{--tw-ring-color:rgb(219 234 254 / var(--tw-ring-opacity,1)) !important}
    .from-violet-100{--tw-gradient-from:#dbeafe var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(219 234 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-100{--tw-gradient-to:#dbeafe var(--tw-gradient-to-position) !important}
    .via-violet-100{--tw-gradient-to:rgb(219 234 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#dbeafe var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-200{background-color:#bfdbfe !important}
    .text-violet-200{color:#bfdbfe !important}
    .border-violet-200{border-color:#bfdbfe !important}
    .ring-violet-200{--tw-ring-color:rgb(191 219 254 / var(--tw-ring-opacity,1)) !important}
    .from-violet-200{--tw-gradient-from:#bfdbfe var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(191 219 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-200{--tw-gradient-to:#bfdbfe var(--tw-gradient-to-position) !important}
    .via-violet-200{--tw-gradient-to:rgb(191 219 254 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#bfdbfe var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-300{background-color:#93c5fd !important}
    .text-violet-300{color:#93c5fd !important}
    .border-violet-300{border-color:#93c5fd !important}
    .ring-violet-300{--tw-ring-color:rgb(147 197 253 / var(--tw-ring-opacity,1)) !important}
    .from-violet-300{--tw-gradient-from:#93c5fd var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(147 197 253 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-300{--tw-gradient-to:#93c5fd var(--tw-gradient-to-position) !important}
    .via-violet-300{--tw-gradient-to:rgb(147 197 253 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#93c5fd var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-400{background-color:#60a5fa !important}
    .text-violet-400{color:#60a5fa !important}
    .border-violet-400{border-color:#60a5fa !important}
    .ring-violet-400{--tw-ring-color:rgb(96 165 250 / var(--tw-ring-opacity,1)) !important}
    .from-violet-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-400{--tw-gradient-to:#60a5fa var(--tw-gradient-to-position) !important}
    .via-violet-400{--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#60a5fa var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-500{background-color:#3b82f6 !important}
    .text-violet-500{color:#3b82f6 !important}
    .border-violet-500{border-color:#3b82f6 !important}
    .ring-violet-500{--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity,1)) !important}
    .from-violet-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position) !important}
    .via-violet-500{--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#3b82f6 var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-600{background-color:#2563eb !important}
    .text-violet-600{color:#2563eb !important}
    .border-violet-600{border-color:#2563eb !important}
    .ring-violet-600{--tw-ring-color:rgb(37 99 235 / var(--tw-ring-opacity,1)) !important}
    .from-violet-600{--tw-gradient-from:#2563eb var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position) !important}
    .via-violet-600{--tw-gradient-to:rgb(37 99 235 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#2563eb var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-700{background-color:#1d4ed8 !important}
    .text-violet-700{color:#1d4ed8 !important}
    .border-violet-700{border-color:#1d4ed8 !important}
    .ring-violet-700{--tw-ring-color:rgb(29 78 216 / var(--tw-ring-opacity,1)) !important}
    .from-violet-700{--tw-gradient-from:#1d4ed8 var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-700{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position) !important}
    .via-violet-700{--tw-gradient-to:rgb(29 78 216 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1d4ed8 var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-800{background-color:#1e40af !important}
    .text-violet-800{color:#1e40af !important}
    .border-violet-800{border-color:#1e40af !important}
    .ring-violet-800{--tw-ring-color:rgb(30 64 175 / var(--tw-ring-opacity,1)) !important}
    .from-violet-800{--tw-gradient-from:#1e40af var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-800{--tw-gradient-to:#1e40af var(--tw-gradient-to-position) !important}
    .via-violet-800{--tw-gradient-to:rgb(30 64 175 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1e40af var(--tw-gradient-via-position),var(--tw-gradient-to) !important}
    .bg-violet-900{background-color:#1e3a8a !important}
    .text-violet-900{color:#1e3a8a !important}
    .border-violet-900{border-color:#1e3a8a !important}
    .ring-violet-900{--tw-ring-color:rgb(30 58 138 / var(--tw-ring-opacity,1)) !important}
    .from-violet-900{--tw-gradient-from:#1e3a8a var(--tw-gradient-from-position) !important;--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
    .to-violet-900{--tw-gradient-to:#1e3a8a var(--tw-gradient-to-position) !important}
    .via-violet-900{--tw-gradient-to:rgb(30 58 138 / 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops:var(--tw-gradient-from),#1e3a8a var(--tw-gradient-via-position),var(--tw-gradient-to) !important}

    /* ── Tipografía más profesional (sutil) ── */
    h1, .text-4xl, .text-3xl, .text-2xl { letter-spacing: -0.02em; }
    /* Números que no "bailan" en contadores y estadísticas */
    .tabular-nums, [id*="Count"], [id*="count"], [id*="Pct"], [id*="Timer"], [id*="timer"] { font-variant-numeric: tabular-nums; }
    /* Bordes y separadores un punto más suaves (look corporativo) */
    .border-slate-200 { border-color: #e9eef5 !important; }
    hr { border-color: #e9eef5; }


    /* ── Formato de explicaciones: listas, encabezados, citas ──
       (Tailwind hace list-style:none global, así que lo reactivamos
        dentro del editor y de la explicación renderizada) */
    #editQExplEditor ul, .bf-expl ul { list-style: disc; padding-left: 1.5em; margin: .5em 0; }
    #editQExplEditor ol, .bf-expl ol { list-style: decimal; padding-left: 1.6em; margin: .5em 0; }
    #editQExplEditor li, .bf-expl li { margin: .2em 0; }
    #editQExplEditor ul ul, .bf-expl ul ul { list-style: circle; }
    #editQExplEditor ul ul ul, .bf-expl ul ul ul { list-style: square; }
    #editQExplEditor blockquote.bf-quote, .bf-expl blockquote.bf-quote,
    #editQExplEditor .bf-quote, .bf-expl .bf-quote {
      border-left: 4px solid #3b82f6; background: #eef2ff;
      padding: 8px 14px; margin: 8px 0; border-radius: 0 8px 8px 0;
      color: #3730a3; font-style: italic;
    }
    #editQExplEditor .bf-h, .bf-expl .bf-h {
      font-weight: 850; font-size: 1.02em; color: #17365d;
      margin: 1rem 0 .5rem; padding: .58rem .72rem;
      border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
      border-radius: .65rem; background: #eff6ff;
      letter-spacing: .025em; line-height: 1.35; text-wrap: balance;
    }
    #editQExplEditor hr, .bf-expl hr { border: 0; border-top: 1px solid #e2e8f0; margin: 12px 0; }
    /* H30: estructura limpia generada por Notebook Justifier. */
    #editQExplEditor .bf-section, .bf-expl .bf-section {
      margin: 1.2rem 0 .55rem; padding: .62rem .78rem;
      border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
      border-radius: .65rem; background: #eff6ff; color: #17365d;
      font-size: .93rem; font-weight: 900; line-height: 1.35;
      letter-spacing: .035em; text-transform: uppercase; text-wrap: balance;
    }
    #editQExplEditor .bf-section:first-child, .bf-expl .bf-section:first-child { margin-top: 0; }
    #editQExplEditor .bf-option-review, .bf-expl .bf-option-review {
      display: grid; gap: .45rem; padding-left: 0; list-style: none;
    }
    #editQExplEditor .bf-option-review li, .bf-expl .bf-option-review li {
      margin: 0; padding: .55rem .7rem; border: 1px solid #e2e8f0;
      border-radius: .7rem; background: rgba(255,255,255,.72);
    }
    /* Cajas de aviso (callouts) y código */
    #editQExplEditor .bf-callout, .bf-expl .bf-callout {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 10px 14px; margin: 8px 0; border-radius: 10px;
      border-left: 4px solid; font-weight: 500; line-height: 1.5;
    }
    #editQExplEditor .bf-callout-ico, .bf-expl .bf-callout-ico { flex-shrink: 0; }
    #editQExplEditor .bf-callout-ok, .bf-expl .bf-callout-ok { background:#ecfdf5; border-color:#10b981; color:#065f46; }
    #editQExplEditor .bf-callout-warn, .bf-expl .bf-callout-warn { background:#fffbeb; border-color:#f59e0b; color:#92400e; }
    #editQExplEditor .bf-callout-danger, .bf-expl .bf-callout-danger { background:#fff1f2; border-color:#e11d48; color:#9f1239; }
    #editQExplEditor code.bf-code, .bf-expl code.bf-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      background:#f1f5f9; color:#0f172a; padding:1px 6px; border-radius:5px;
      font-size:0.9em; border:1px solid #e2e8f0;
    }
    /* H21: fórmulas y tablas ligeras, sin MathJax ni dependencias externas. */
    #editQExplEditor .bf-rich-math, .bf-expl .bf-rich-math {
      display:inline-block; font-family: Georgia, 'Times New Roman', serif;
      font-size:1.02em; color:#0f172a; white-space:nowrap; margin:0 .08em;
    }
    #editQExplEditor .bf-rich-math-block, .bf-expl .bf-rich-math-block {
      display:block; text-align:center; margin:.55em 0; font-size:1.12em;
    }
    #editQExplEditor .bf-rich-math sup, #editQExplEditor .bf-rich-math sub,
    .bf-expl .bf-rich-math sup, .bf-expl .bf-rich-math sub { line-height:0; font-size:.72em; }
    .bf-rich-frac { display:inline-flex; flex-direction:column; vertical-align:middle; text-align:center; line-height:1.05; margin:0 .12em; }
    .bf-rich-frac > span:first-child { border-bottom:1px solid currentColor; padding:0 .18em .08em; }
    .bf-rich-frac > span:last-child { padding:.08em .18em 0; }
    .bf-rich-sqrt { display:inline-flex; align-items:flex-start; }
    .bf-rich-sqrt > span { border-top:1px solid currentColor; padding:0 .1em; margin-top:.12em; }
    .bf-rich-image { display:block; max-width:100%; max-height:15rem; object-fit:contain; border:1px solid #e2e8f0; border-radius:.75rem; margin:.5rem 0; background:#fff; }
    #editQExplEditor .bf-rich-table-wrap, #editQExplEditor .bf-table-wrap,
    #eqPreviewPanel .bf-rich-table-wrap, #eqPreviewPanel .bf-table-wrap,
    .bf-explanation-prose .bf-rich-table-wrap, .bf-explanation-prose .bf-table-wrap,
    .bf-expl .bf-rich-table-wrap, .bf-expl .bf-table-wrap {
      overflow-x:auto; margin:.85rem 0 1rem; border:1px solid #b8c8dc;
      border-radius:.8rem; background:#fff; box-shadow:0 8px 22px rgba(15,23,42,.07);
      max-width:100%; scrollbar-color:#94a3b8 #eef2f7; scrollbar-width:thin;
    }
    #editQExplEditor .bf-rich-table, #editQExplEditor .bf-table,
    #eqPreviewPanel .bf-rich-table, #eqPreviewPanel .bf-table, #eqPreviewPanel table,
    .bf-explanation-prose .bf-rich-table, .bf-explanation-prose .bf-table, .bf-explanation-prose table,
    .bf-expl .bf-rich-table, .bf-expl .bf-table {
      display:table; border-collapse:separate; border-spacing:0; width:100%; min-width:44rem;
      table-layout:auto; font-size:.9em; line-height:1.45; background:#fff;
      font-variant-numeric:tabular-nums; box-sizing:border-box;
    }
    #editQExplEditor .bf-rich-table th, #editQExplEditor .bf-rich-table td,
    #editQExplEditor .bf-table th, #editQExplEditor .bf-table td,
    #eqPreviewPanel .bf-rich-table th, #eqPreviewPanel .bf-rich-table td,
    #eqPreviewPanel .bf-table th, #eqPreviewPanel .bf-table td,
    #eqPreviewPanel table th, #eqPreviewPanel table td,
    .bf-explanation-prose .bf-rich-table th, .bf-explanation-prose .bf-rich-table td,
    .bf-explanation-prose .bf-table th, .bf-explanation-prose .bf-table td,
    .bf-explanation-prose table th, .bf-explanation-prose table td,
    .bf-expl .bf-rich-table th, .bf-expl .bf-rich-table td,
    .bf-expl .bf-table th, .bf-expl .bf-table td {
      border-right:1px solid #d7e0ec; border-bottom:1px solid #d7e0ec;
      padding:.72rem .78rem; vertical-align:top; text-align:left;
      overflow-wrap:anywhere;
    }
    #editQExplEditor .bf-rich-table th:last-child, #editQExplEditor .bf-rich-table td:last-child,
    #editQExplEditor .bf-table th:last-child, #editQExplEditor .bf-table td:last-child,
    #eqPreviewPanel table th:last-child, #eqPreviewPanel table td:last-child,
    .bf-explanation-prose table th:last-child, .bf-explanation-prose table td:last-child,
    .bf-expl .bf-rich-table th:last-child, .bf-expl .bf-rich-table td:last-child,
    .bf-expl .bf-table th:last-child, .bf-expl .bf-table td:last-child { border-right:0; }
    #editQExplEditor .bf-rich-table thead th, #editQExplEditor .bf-table thead th,
    #eqPreviewPanel table thead th,
    .bf-explanation-prose table thead th,
    .bf-expl .bf-rich-table thead th, .bf-expl .bf-table thead th {
      background:#17365d; color:#fff; font-weight:850; letter-spacing:.01em;
    }
    #editQExplEditor .bf-rich-table tbody tr:nth-child(even), #editQExplEditor .bf-table tbody tr:nth-child(even),
    #eqPreviewPanel table tbody tr:nth-child(even),
    .bf-explanation-prose table tbody tr:nth-child(even),
    .bf-expl .bf-rich-table tbody tr:nth-child(even), .bf-expl .bf-table tbody tr:nth-child(even) { background:#f7fafc; }
    #editQExplEditor .bf-rich-table tbody td:first-child, #editQExplEditor .bf-table tbody td:first-child,
    #eqPreviewPanel table tbody td:first-child,
    .bf-explanation-prose table tbody td:first-child,
    .bf-expl .bf-rich-table tbody td:first-child, .bf-expl .bf-table tbody td:first-child {
      width:27%; min-width:11.5rem; background:#eff6ff; color:#17365d; font-weight:750;
    }
    #editQExplEditor .bf-rich-table tbody tr:last-child td, #editQExplEditor .bf-table tbody tr:last-child td,
    #eqPreviewPanel table tbody tr:last-child td,
    .bf-explanation-prose table tbody tr:last-child td,
    .bf-expl .bf-rich-table tbody tr:last-child td, .bf-expl .bf-table tbody tr:last-child td { border-bottom:0; }
    #editQExplEditor .bf-rich-list, .bf-expl .bf-rich-list { margin:.45rem 0; }
    #editQExplEditor .bf-rich-arrow, .bf-expl .bf-rich-arrow { padding-left:1.25rem; color:#475569; }
    #editQExplEditor .bf-h-ico, .bf-expl .bf-h-ico { display:inline-block; margin-right:.35rem; }
    #editQExplEditor .bf-h-ok, .bf-expl .bf-h-ok,
    #editQExplEditor .bf-section-solution, .bf-expl .bf-section-solution,
    #editQExplEditor .bf-section-memory, .bf-expl .bf-section-memory {
      color:#065f46; border-color:#86efac; border-left-color:#059669; background:#ecfdf5;
    }
    #editQExplEditor .bf-h-warn, .bf-expl .bf-h-warn,
    #editQExplEditor .bf-section-exam, .bf-expl .bf-section-exam {
      color:#92400e; border-color:#fcd34d; border-left-color:#d97706; background:#fffbeb;
    }
    #editQExplEditor .bf-h-danger, .bf-expl .bf-h-danger,
    #editQExplEditor .bf-section-review, .bf-expl .bf-section-review,
    #editQExplEditor .bf-section-traps, .bf-expl .bf-section-traps {
      color:#9f1239; border-color:#fecdd3; border-left-color:#e11d48; background:#fff1f2;
    }
    #editQExplEditor .bf-section-theory, .bf-expl .bf-section-theory,
    #editQExplEditor .bf-section-outline, .bf-expl .bf-section-outline,
    #editQExplEditor .bf-section-comparison, .bf-expl .bf-section-comparison,
    #editQExplEditor .bf-section-sources, .bf-expl .bf-section-sources {
      color:#075985; border-color:#bae6fd; border-left-color:#0284c7; background:#f0f9ff;
    }
    #editQExplEditor .bf-section-solution + p, .bf-expl .bf-section-solution + p {
      padding:.72rem .82rem; border:1px solid #bbf7d0; border-radius:.7rem; background:#f0fdf4;
    }
    #editQExplEditor .bf-section-review + ul, .bf-expl .bf-section-review + ul,
    #editQExplEditor .bf-section-traps + ul, .bf-expl .bf-section-traps + ul,
    #editQExplEditor .bf-section-exam + ul, .bf-expl .bf-section-exam + ul {
      padding-left:0; display:grid; gap:.45rem; list-style:none;
    }
    #editQExplEditor .bf-section-review + ul > li, .bf-expl .bf-section-review + ul > li,
    #editQExplEditor .bf-section-traps + ul > li, .bf-expl .bf-section-traps + ul > li {
      margin:0; padding:.62rem .72rem; border-left:3px solid #fda4af;
      border-radius:.45rem; background:#fff7f8;
    }
    #editQExplEditor .bf-section-exam + ul > li, .bf-expl .bf-section-exam + ul > li {
      margin:0; padding:.62rem .72rem; border-left:3px solid #f59e0b;
      border-radius:.45rem; background:#fffcf2;
    }
    #editQExplEditor .bf-section-memory + p, .bf-expl .bf-section-memory + p {
      padding:.78rem .88rem; border:1px solid #a7f3d0; border-radius:.7rem;
      background:#f0fdf4; color:#064e3b;
    }
    #editQExplEditor .bf-section-exam + ul strong, .bf-expl .bf-section-exam + ul strong { color:#92400e; }
    #editQExplEditor .bf-section-traps + ul strong, .bf-expl .bf-section-traps + ul strong { color:#9f1239; }
    #editQExplEditor .bf-study-steps, .bf-expl .bf-study-steps {
      padding:.65rem .8rem .65rem 2rem; border:1px solid #dbeafe; border-radius:.7rem; background:#f8fbff;
    }
    @media (max-width:640px) {
      #editQExplEditor .bf-rich-table, #editQExplEditor .bf-table,
      #eqPreviewPanel table, .bf-explanation-prose table,
      .bf-expl .bf-rich-table, .bf-expl .bf-table { min-width:40rem; font-size:.84em; }
      #editQExplEditor .bf-rich-table th, #editQExplEditor .bf-rich-table td,
      #editQExplEditor .bf-table th, #editQExplEditor .bf-table td,
      #eqPreviewPanel table th, #eqPreviewPanel table td,
      .bf-explanation-prose table th, .bf-explanation-prose table td,
      .bf-expl .bf-rich-table th, .bf-expl .bf-rich-table td,
      .bf-expl .bf-table th, .bf-expl .bf-table td { padding:.62rem .65rem; }
    }

    /* ════════════════════════════════════════════════
       REFINAMIENTO VISUAL v5 (Fase 1) — capa aditiva
       Sombras más suaves, foco/selección de marca,
       microtransiciones. No cambia layout.
       ════════════════════════════════════════════════ */
    /* Sombras modernas y sutiles (tinte frío, menos "duras") */
    .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.03) !important; }
    .shadow-md { --tw-shadow: 0 2px 4px -1px rgb(15 23 42 / 0.05), 0 4px 10px -2px rgb(15 23 42 / 0.06) !important; }
    .shadow-lg { --tw-shadow: 0 4px 6px -2px rgb(15 23 42 / 0.05), 0 12px 24px -4px rgb(15 23 42 / 0.08) !important; }
    .shadow-xl { --tw-shadow: 0 8px 16px -4px rgb(15 23 42 / 0.06), 0 20px 40px -8px rgb(15 23 42 / 0.10) !important; }
    .shadow-2xl{ --tw-shadow: 0 16px 32px -8px rgb(15 23 42 / 0.10), 0 32px 64px -12px rgb(15 23 42 / 0.16) !important; }

    /* Selección de texto con color de marca */
    ::selection { background: rgb(59 130 246 / 0.22); color: #1e1b4b; }

    /* Foco visible y coherente (accesibilidad + marca) en interactivos */
    button:focus-visible, a:focus-visible,
    input:focus-visible, textarea:focus-visible,
    select:focus-visible, [tabindex]:focus-visible,
    [contenteditable="true"]:focus-visible {
      outline: 2px solid rgb(59 130 246 / 0.55);
      outline-offset: 2px;
      border-radius: 8px;
    }

    /* Microtransición uniforme en botones que no la traen ya */
    button { transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .12s ease; }
    /* Feedback táctil sutil al pulsar cualquier botón */
    button:active { transform: translateY(0.5px) scale(0.995); }

    /* Las cards blancas con borde se sienten un pelín más "vivas" al pasar el cursor */
    @media (hover:hover) and (pointer:fine) {
      .bg-white.rounded-2xl.border, .bg-white.rounded-3xl.border { transition: box-shadow .25s ease, border-color .25s ease; }
    }

    /* Sin vignette ni acentos extra: el vídeo lleva su propio tratamiento visual */


    /* Vídeo intro cinemática */
    .splash-video-wrap {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
    .splash-video-wrap::before {
      content: '';
      position: absolute;
      left: -12%; right: -12%; bottom: -28%;
      height: 52%;
      background: radial-gradient(ellipse at center,rgba(249,115,22,.18),rgba(249,115,22,0) 68%);
      pointer-events: none;
    }
    .splash-video-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      animation: splashVideoFade 0.6s ease-out both;
    }
    @keyframes splashVideoFade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    /* Degradado inferior para legibilidad del texto sobre el vídeo */
    .splash-video-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(6,7,10,0.35) 0%, rgba(6,7,10,0) 25%, rgba(6,7,10,0) 55%, rgba(6,7,10,0.85) 100%);
      pointer-events: none;
    }
    .splash-brand-live {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: min(660px,92vw);
      isolation: isolate;
      animation: splashFadeIn .42s cubic-bezier(.22,1,.36,1) both;
    }
    .splash-brand-live::before,
    .splash-brand-live::after {
      content: '';
      position: absolute;
      left: 50%; top: 52%;
      transform: translate(-50%,-50%);
      border-radius: 999px;
      pointer-events: none;
      z-index: -1;
    }
    .splash-brand-live::before {
      width: min(430px,84vw);
      aspect-ratio: 1;
      border: 1px solid rgba(96,165,250,.12);
      background: radial-gradient(circle,rgba(37,99,235,.12),rgba(37,99,235,0) 64%);
    }
    .splash-brand-live::after {
      width: min(270px,60vw);
      aspect-ratio: 1;
      border: 1px solid rgba(251,191,36,.15);
    }
    .splash-kicker {
      margin-bottom: 18px;
      color: #93c5fd;
      font-size: clamp(8px,1.5vw,10px);
      font-weight: 800;
      letter-spacing: .28em;
      text-align: center;
      padding-left: .28em;
    }
    .splash-mark {
      width: 90px;
      height: 96px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(147,197,253,.62);
      border-radius: 27px 27px 36px 36px;
      background: linear-gradient(155deg,#93c5fd 0%,#2563eb 100%);
      color: #172033;
      box-shadow: 0 22px 55px rgba(37,99,235,.22), inset 0 1px rgba(255,255,255,.55);
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -.04em;
      text-shadow: 0 1px rgba(255,255,255,.2);
    }
    .splash-wordmark {
      margin-top: 26px;
      color: #f8fafc;
      font-size: clamp(34px,7vw,56px);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -.055em;
      text-shadow: 0 12px 35px rgba(0,0,0,.3);
    }
    .splash-wordmark span { color:#93c5fd; }
    .splash-tagline-live {
      margin-top: 14px;
      color: #cbd5e1;
      font-size: clamp(9px,1.7vw,11px);
      font-weight: 650;
      letter-spacing: .22em;
      text-align: center;
      padding-left: .22em;
    }
    /* Emblema SVG (legacy, no usado pero conservado por compatibilidad) */
    .splash-hero {
      position: relative;
      width: 92px; height: 92px;
      flex-shrink: 0;
      margin-bottom: 28px;
      animation: splashFadeIn 0.8s cubic-bezier(0.22,1,0.36,1) both;
    }
    .splash-hero svg {
      width: 100%; height: 100%;
      display: block;
      filter: drop-shadow(0 2px 10px rgba(96,165,250,0.18))
              drop-shadow(0 8px 32px rgba(0,0,0,0.45));
    }
    .splash-hero .ember {
      transform-origin: 50% 50%;
      animation: emberPulse 3.2s ease-in-out infinite;
    }
    @keyframes emberPulse {
      0%,100% { opacity: 0.88; transform: scale(1); }
      50%     { opacity: 1;    transform: scale(1.025); }
    }
    @keyframes splashFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Marca (oculta — el vídeo intro ya muestra la identidad) */
    .splash-brand { display: none !important; }
    .splash-brand-disabled {
      text-align: center;
      position: relative;
      z-index: 2;
      animation: splashFadeIn 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both;
    }
    .splash-title {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: #f1f5f9;
      padding-left: 0.32em; /* compensa el tracking */
    }
    .splash-divider {
      width: 28px; height: 1px; margin: 14px auto 0;
      background: rgba(255,255,255,0.22);
    }
    .splash-tagline {
      color: rgba(148,163,184,0.55);
      font-size: 10px; font-weight: 500;
      letter-spacing: 0.4em; text-transform: uppercase;
      margin-top: 12px;
      padding-left: 0.4em;
    }

    /* Loading overlay sobre el vídeo */
    .splash-loading-overlay {
      position: absolute;
      left: 50%; right: auto;
      bottom: calc(28px + env(safe-area-inset-bottom, 0px));
      z-index: 3;
      width: min(390px,calc(100vw - 36px));
      padding: 16px 18px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      border: 1px solid rgba(148,163,184,.15);
      border-radius: 20px;
      background: rgba(15,23,42,.74);
      box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
      animation: splashPanelIn .4s cubic-bezier(0.22,1,0.36,1) .08s both;
    }
    @keyframes splashPanelIn {
      from { opacity:0; transform:translate(-50%,8px); }
      to { opacity:1; transform:translate(-50%,0); }
    }
    .splash-progress-meta {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #94a3b8;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
    }
    .splash-sub {
      color: #f1f5f9;
      font-size: 11px; font-weight: 650;
      text-align: center;
      min-height: 16px;
      transition: opacity 0.35s ease;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    }
    .splash-progress-wrap {
      width: 100%;
    }
    .splash-bar {
      width: 100%; height: 4px;
      background: rgba(255,255,255,0.12);
      border-radius: 99px;
      overflow: hidden;
      box-shadow: 0 1px 8px rgba(0,0,0,0.4);
    }
    .splash-fill {
      height: 100%; border-radius: 99px; width: 6%;
      background: linear-gradient(90deg, #f59e0b 0%, #fb923c 100%);
      box-shadow: 0 0 14px rgba(245,158,11,.38);
      transition: width .32s cubic-bezier(0.4,0,0.2,1);
    }
    .splash-hint {
      color: #64748b;
      font-size: 9px;
      font-weight: 600;
      letter-spacing: .03em;
      text-align: center;
    }

    @media (max-height: 650px) {
      .splash-kicker { margin-bottom: 10px; }
      .splash-mark { width:68px; height:74px; border-radius:21px 21px 28px 28px; font-size:22px; }
      .splash-wordmark { margin-top:16px; font-size:clamp(30px,7vw,42px); }
      .splash-tagline-live { margin-top:9px; }
      .splash-loading-overlay { bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
    }

    html.bf-low-effects #appSplash {
      background: linear-gradient(145deg,#111827 0%,#0b1730 56%,#111c32 100%);
    }
    html.bf-low-effects #appSplash::after { display:none; }
    html.bf-low-effects .splash-video-wrap::before { opacity:.55; }

    @media (prefers-reduced-motion: reduce) {
      .splash-hero .ember { animation: none; }
      .splash-hero, .splash-brand, .splash-sub, .splash-progress-wrap, .splash-brand-live, .splash-loading-overlay { animation: none; }
      .splash-loading-overlay { transform:translateX(-50%); }
    }

/* ═══════════════════════════════════════════════════════════════
   ARRANQUE UNIFICADO H39E · FOTO FULL-BLEED + BARLOW + ALTA VISIBILIDAD
   Dirección visual guiada por refero-design: fotografía dominante,
   jerarquía operativa y un único acento de seguridad no naranja.
   ═══════════════════════════════════════════════════════════════ */
#appSplash.bf-boot {
  --bf-boot-bg: #111513;
  --bf-boot-surface: rgba(14, 18, 16, .92);
  --bf-boot-text: #f7f8f3;
  --bf-boot-muted: #d3d8cc;
  --bf-boot-accent: #60a5fa;
  --bf-boot-accent-soft: #93c5fd;
  --bf-boot-wordmark-accent: #93c5fd;
  position: fixed;
  inset: 0;
  z-index: 99999;
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  height: 100dvh;
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  font-synthesis: none;
  color: var(--bf-boot-text);
  scrollbar-color: rgba(167, 177, 197, 0.34) var(--bf-boot-bg);
  scrollbar-width: thin;
  background: var(--bf-boot-bg);
  opacity: 1;
  transition: opacity 200ms ease-out;
  overscroll-behavior: contain;
}
#appSplash.bf-boot::-webkit-scrollbar { width: 6px; }
#appSplash.bf-boot::-webkit-scrollbar-track { background: var(--bf-boot-bg); }
#appSplash.bf-boot::-webkit-scrollbar-thumb {
  background: rgba(167, 177, 197, 0.34);
  border-radius: 999px;
}
#appSplash.bf-boot[hidden] { display: none !important; }
#appSplash.bf-boot::before,
#appSplash.bf-boot::after { content: none; }
#appSplash.bf-boot.bf-boot--out { opacity: 0; pointer-events: none; }

.bf-boot__backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  background-color: var(--bf-boot-bg);
  background-image:
    linear-gradient(180deg, rgba(10,14,12,.38) 0%, rgba(10,14,12,.48) 48%, rgba(10,14,12,.78) 100%),
    url('../images/boot-silueta.webp');
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, cover;
}

.bf-boot__layout {
  box-sizing: border-box;
  width: min(100%, 500px);
  min-width: 0;
  min-height: calc(100dvh - max(36px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px)));
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.8vh, 30px);
}

.bf-boot__status-card p,
.bf-boot__status-card h1 { margin: 0; }

.bf-boot__brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bf-boot__wordmark {
  max-width: 100%;
  color: var(--bf-boot-text);
  font-size: clamp(38px, 10vw, 48px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}
.bf-boot__wordmark span { color: var(--bf-boot-wordmark-accent); }

.bf-boot__status-card {
  box-sizing: border-box;
  width: min(100%, 440px);
  min-width: 0;
  padding: clamp(17px, 5vw, 22px);
  border: 1px solid rgba(248, 250, 252, .13);
  border-radius: 18px;
  background: var(--bf-boot-surface);
  box-shadow: 0 18px 42px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.035);
}
.bf-boot__status-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-boot-accent-soft);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .07em;
}
.bf-boot__status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--bf-boot-accent);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .14);
}
.bf-boot__announcements {
  min-width: 0;
  margin-top: 12px;
}
.bf-boot__announcements--changed {
  animation: bfBootMessageIn 180ms ease-out both;
}
.bf-boot__announcements h1 {
  color: var(--bf-boot-text);
  font-size: clamp(17px, 4.8vw, 19px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.bf-boot__announcements p {
  margin-top: 6px;
  color: var(--bf-boot-muted);
  font-size: clamp(12px, 3.5vw, 13px);
  line-height: 1.5;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.bf-boot__progress {
  position: relative;
  height: 3px;
  margin-top: 17px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(167, 177, 197, .14);
}
.bf-boot__progress-runner {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--bf-boot-accent-soft) 42%, var(--bf-boot-accent));
  transform: translateX(-110%);
  animation: bfBootProgress 1.65s cubic-bezier(.45,0,.35,1) infinite;
}
.bf-boot__phases {
  margin: 15px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  color: rgba(167, 177, 197, .62);
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
}
.bf-boot__phases li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}
.bf-boot__phases li + li { border-left: 1px solid rgba(167,177,197,.12); }
.bf-boot__phases li > span { font-size: 12px; line-height: 1; }
.bf-boot__phases li[data-state="done"] { color: #8ee6bd; }
.bf-boot__phases li[data-state="current"] { color: var(--bf-boot-accent-soft); }
.bf-boot__phases b { min-width: 0; font: inherit; overflow: hidden; text-overflow: ellipsis; }
.bf-boot__delay {
  margin-top: 13px !important;
  color: #c7cfde;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.bf-boot__retry {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid rgba(147, 197, 253, .5);
  border-radius: 12px;
  color: #111827;
  background: var(--bf-boot-accent-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease, opacity 140ms ease;
}
.bf-boot__retry:hover { background: #bfdbfe; }
.bf-boot__retry:active { transform: translateY(1px); }
.bf-boot__retry:focus-visible { outline: 3px solid rgba(255,255,255,.92); outline-offset: 3px; }
.bf-boot__retry:disabled { cursor: wait; opacity: .68; }
.bf-boot--error .bf-boot__status-dot { background: #fb7185; box-shadow: 0 0 0 4px rgba(251,113,133,.12); }
.bf-boot--error .bf-boot__status-meta { color: #fda4af; }
.bf-boot--success .bf-boot__status-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.12); }

@keyframes bfBootProgress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(290%); }
}
@keyframes bfBootMessageIn {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

html.bf-low-effects .bf-boot__backdrop {
  background-image:
    linear-gradient(180deg, rgba(10,14,12,.42) 0%, rgba(10,14,12,.54) 48%, rgba(10,14,12,.82) 100%),
    url('../images/boot-silueta.webp');
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 100% 100%, cover;
}
html.bf-low-effects .bf-boot__status-card { background: #111513; }
html.bf-first-access-active #toastContainer { opacity: 0 !important; pointer-events: none !important; }

@media (max-width: 430px) {
  #appSplash.bf-boot { padding-inline: max(14px, env(safe-area-inset-left, 0px)); }
  .bf-boot__backdrop,
  html.bf-low-effects .bf-boot__backdrop { background-position: center, 27% center; }
  .bf-boot__layout { gap: clamp(14px, 3vh, 22px); }
  .bf-boot__status-card { border-radius: 18px; }
}

@media (min-width: 720px) {
  .bf-boot__backdrop,
  html.bf-low-effects .bf-boot__backdrop {
    background-position: center, center;
    background-size: 100% 100%, cover;
  }
}

@media (max-height: 610px) {
  .bf-boot__layout { gap: 10px; justify-content: flex-start; }
  .bf-boot__wordmark { font-size: clamp(27px, 8vw, 34px); }
  .bf-boot__status-card { padding: 15px 17px; }
  .bf-boot__announcements { margin-top: 9px; }
  .bf-boot__progress { margin-top: 12px; }
  .bf-boot__phases { margin-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #appSplash.bf-boot { scroll-behavior: auto; transition-duration: 1ms; }
  .bf-boot__announcements--changed { animation: none; }
  .bf-boot__progress-runner {
    width: 100%;
    opacity: .62;
    background: linear-gradient(90deg, rgba(96,165,250,.26), var(--bf-boot-accent-soft));
    transform: none;
    animation: none;
  }
  .bf-boot__retry { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   H39F · «Prepara tu plaza»: silueta a un lado (PC) o arriba (móvil),
   titular grande que sube línea a línea y la foto que se descubre con
   clip-path. Solo CSS, sin librerías; todo termina antes de 1 s y los
   hitos siguen siendo los reales.
   ═══════════════════════════════════════════════════════════════ */
.bf-boot__backdrop,
html.bf-low-effects .bf-boot__backdrop {
  inset: 0 0 auto 0;
  height: 50vh;
  height: 50svh;
  background-image:
    linear-gradient(0deg, var(--bf-boot-bg) 0%, rgba(17,21,19,0) 45%),
    url('../images/boot-silueta.webp');
  background-position: center, center 28%;
  background-size: 100% 100%, cover;
}
.bf-boot__backdrop {
  clip-path: inset(100% 0 0 0);
  animation: bfBootReveal .75s cubic-bezier(.77,0,.18,1) .05s forwards;
}
.bf-boot__layout {
  width: min(100%, 520px);
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(14px, 2.6vh, 24px);
  padding-top: 34vh;
  padding-top: 34svh;
}
.bf-boot__brand { align-items: flex-start; text-align: left; }
.bf-boot__eyebrow {
  color: var(--bf-boot-accent-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: 0;
  animation: bfBootFade .35s ease .3s forwards;
}
.bf-boot__headline {
  margin: 10px 0 14px;
  font-size: clamp(52px, 16vw, 84px);
  line-height: .86;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-shadow: 0 2px 22px rgba(0,0,0,.45);
}
.bf-boot__line { display: block; overflow: hidden; }
.bf-boot__line > span {
  display: block;
  transform: translateY(105%);
  animation: bfBootLineUp .55s cubic-bezier(.22,1,.36,1) forwards;
}
.bf-boot__line:nth-child(1) > span { animation-delay: .2s; }
.bf-boot__line:nth-child(2) > span { animation-delay: .28s; }
.bf-boot__line:nth-child(3) > span { animation-delay: .36s; color: var(--bf-boot-accent); }
.bf-boot__line i { font-style: normal; color: var(--bf-boot-accent-soft); }
.bf-boot__brand .bf-boot__wordmark {
  font-size: 22px;
  letter-spacing: .01em;
  opacity: 0;
  animation: bfBootFade .35s ease .5s forwards;
}
.bf-boot__status-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.bf-low-effects .bf-boot__status-card { background: transparent; }
.bf-boot__phases li { justify-content: flex-start; }
.bf-boot__phases li + li { border-left: 0; }

@keyframes bfBootReveal { to { clip-path: inset(0 0 0 0); } }
@keyframes bfBootLineUp { to { transform: translateY(0); } }
@keyframes bfBootFade { to { opacity: 1; } }

/* PC y tablet horizontal: foto a la izquierda, texto a la derecha. */
@media (min-width: 761px) {
  .bf-boot__backdrop,
  html.bf-low-effects .bf-boot__backdrop {
    inset: 0 auto 0 0;
    width: 50vw;
    height: auto;
    background-image:
      linear-gradient(90deg, rgba(17,21,19,0) 55%, var(--bf-boot-bg) 100%),
      url('../images/boot-silueta.webp');
    background-position: center, center 35%;
  }
  .bf-boot__layout {
    width: min(42vw, 560px);
    margin: auto 0 auto 54vw;
    justify-content: center;
    padding-top: 0;
  }
  .bf-boot__headline { font-size: clamp(64px, 8.2vw, 136px); }
}

/* Solo en la disposición apilada: en PC bajo la foto va al lado y no hay que reservarle alto. */
@media (max-width: 760px) and (max-height: 610px) {
  .bf-boot__layout { padding-top: 26vh; }
  .bf-boot__headline { font-size: clamp(40px, 11vh, 64px); margin: 6px 0 8px; }
}

/* Sin animaciones si el alumno lo pide. Con «pocos efectos» se mantienen:
   solo mueven clip-path, transform y opacity, que no cuestan en móviles modestos. */
@media (prefers-reduced-motion: reduce) {
  .bf-boot__backdrop,
  .bf-boot__line > span,
  .bf-boot__eyebrow,
  .bf-boot__brand .bf-boot__wordmark { animation: none; clip-path: none; transform: none; opacity: 1; }
}
/* El modo de pocos efectos pinta el arranque antiguo en azul: aquí va liso, como la foto. */
html.bf-low-effects #appSplash.bf-boot { background: var(--bf-boot-bg); }

/* === VARIABLES === */
    :root {
      --font-ui: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-print: Georgia, 'Times New Roman', serif;
    }

    body {
      font-family: var(--font-ui);
      background-color: #f8fafc;
      color: #0f172a;
      overflow: hidden; /* Mantiene la app tipo nativa */
      -webkit-tap-highlight-color: transparent;
    }

    /* === SCROLLBARS === */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE TABLET (768-1279px) — mejoras específicas
       Breakpoint xl de Tailwind = 1280px. En tablet queremos:
       - Sidebar overlay (no fija)
       - Padding reducido
       - Touch targets ≥44px (Apple HIG)
       - Botones con scale activo para feedback táctil
    ═══════════════════════════════════════════════════════════════ */

    /* Touch targets más grandes en dispositivos táctiles */
    @media (pointer: coarse) {
      button, [role="button"], label, input[type="radio"] + div,
      input[type="checkbox"] + div, .cursor-pointer {
        min-height: 44px;
      }
      /* Opciones de test con más padding táctil */
      #testCard [onclick] {
        min-height: 52px;
      }
      /* Feedback visual al pulsar */
      button:active, .cursor-pointer:active {
        transform: scale(0.98);
        transition: transform 0.1s;
      }
    }

    /* Tablet portrait/landscape (768-1279px) */
    @media (min-width: 768px) and (max-width: 1279px) {
      /* Tarjeta de test con menos padding para maximizar área útil */
      #testCard {
        padding: 1.5rem !important;
      }
      /* Opciones de respuesta más compactas en tablet */
      #testCard > div.space-y-3 > div {
        padding: 0.875rem 1rem !important;
      }
      /* Texto de pregunta más ajustado */
      #testCard h2 {
        font-size: 1.35rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.25rem !important;
      }
      /* Scroll container con padding reducido */
      #scrollContainer {
        padding: 1rem !important;
      }
      /* Barra superior header más compacta */
      header.h-20 {
        height: 4rem !important;
      }
    }

    /* ── TABLET HORIZONTAL (≥1024px): sidebar fijo como escritorio ──
       Antes, las tablets en horizontal usaban un menú deslizante aunque
       sobraba espacio. Ahora muestran el sidebar siempre visible.
       No afecta a escritorio (≥1280px ya lo tenía) ni a tablet vertical. */
    @media (min-width: 1024px) and (max-width: 1279px) {
      #mainSidebar {
        transform: translateX(0) !important;
        box-shadow: none !important;
      }
      #appMain { margin-left: 280px !important; }
      #headerMenuBtn { display: none !important; }
      #mobileMenuOverlay { display: none !important; }
    }

    /* ── Scroll táctil suave y sin "rebote pillado" en tablet/móvil ── */
    #scrollContainer, .overflow-y-auto, .overflow-x-auto {
      -webkit-overflow-scrolling: touch;
    }
    #scrollContainer {
      overscroll-behavior: contain;
    }

    /* Mejora específica: botón Siguiente inline en tablet con sombra para destacarlo */
    #btnNextQInline {
      position: relative;
      z-index: 2;
      box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.35), 0 4px 10px -4px rgba(99, 102, 241, 0.25);
    }
    #btnNextQInline:active {
      transform: scale(0.98);
      box-shadow: 0 4px 10px -3px rgba(99, 102, 241, 0.3);
    }
    /* Variante verde para botón Finalizar */
    #btnNextQInline.bg-emerald-600,
    #btnNextQInline[class*="bg-emerald"] {
      box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.35), 0 4px 10px -4px rgba(16, 185, 129, 0.25);
    }

    /* Evitar que el contenido se esconda tras bottom nav móvil */
    @media (max-width: 767px) {
      main {
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
    }

    /* === ANIMACIONES === */
    @keyframes slideUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .animate-in { animation: slideUp 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
    .fade-in { animation: fadeIn 0.3s ease-out forwards; }

    /* === ESTILOS DRAG & DROP === */
    .drag-over {
      border: 2px dashed #3b82f6 !important; /* Indigo 500 */
      background-color: #eff6ff !important; /* Indigo 50 */
      transform: scale(1.02);
      z-index: 10;
    }
    
    .sortable-ghost {
      opacity: 0.4;
      background: #f1f5f9;
      border: 2px dashed #cbd5e1;
    }
    
    [draggable="true"] {
        cursor: grab;
        user-select: none;
        -webkit-user-drag: element;
    }
    [draggable="true"] * { pointer-events: none; }
    [draggable="true"] button,
    [draggable="true"] input,
    [draggable="true"] label,
    [draggable="true"] .clickable,
    [draggable="true"] div[onclick],
    [draggable="true"] span[onclick] {
        pointer-events: auto;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }
    #testCard [onclick],
    #testCard .focus-opt-text {
        pointer-events: auto;
        user-select: none;
        -webkit-user-select: none;
    }
    
    [draggable="true"]:active {
        cursor: grabbing;
    }

    /* === GRADIENTES === */
    /* Visual 5: portadas en la familia azul de la marca, distintas entre sí. */
    .grad-0 { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
    .grad-1 { background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%); }
    .grad-2 { background: linear-gradient(135deg, #172554 0%, #2563eb 100%); }
    .grad-3 { background: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%); }
    .grad-4 { background: linear-gradient(135deg, #0f172a 0%, #475569 100%); }
    .grad-5 { background: linear-gradient(135deg, #075985 0%, #38bdf8 100%); }

    /* === IMPRESIÓN (CORREGIDO PARA EVITAR HOJAS EN BLANCO) === */
    @media print {
      /* Ocultar todo lo que NO sea de impresión explícitamente */
      body > *:not(#printArea) {
        display: none !important;
      }

      /* Configurar el cuerpo para impresión */
      body, html {
        background: white !important;
        height: auto !important;
        width: 100% !important;
        overflow: visible !important;
        font-family: var(--font-print) !important;
        color: black !important;
        margin: 0 !important;
        padding: 0 !important;
      }

      /* Mostrar el área de impresión y forzar su visualización */
      #printArea {
        display: block !important; /* CRUCIAL: Sobrescribe el 'hidden' de Tailwind */
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        visibility: visible !important;
        opacity: 1 !important;
      }

      /* Asegurar que los hijos del área de impresión sean visibles */
      #printArea * {
        visibility: visible !important;
        opacity: 1 !important;
      }

      /* Configuración de página */
      @page {
        margin: 1.5cm;
        size: A4;
      }

      .avoid-break {
        break-inside: avoid;
        page-break-inside: avoid;
      }
    }

    .book-cover {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Markdown Editor Styles */
    /* Proteger elementos del editor de edición de la regla global draggable */
    #modalEditQuestionContent .eq-radio-circle,
    #modalEditQuestionContent .edit-opt-val,
    #modalEditQuestionContent .eq-del-opt,
    #modalEditQuestionContent input,
    #modalEditQuestionContent button,
    #modalEditQuestionContent [contenteditable] {
      pointer-events: auto !important;
      cursor: pointer;
    }
    #modalEditQuestionContent .eq-drag-handle {
      pointer-events: auto !important;
      cursor: grab;
    }

    /* ══ Editor rico de explicación ══ */
    .eq-tool-btn {
      display:inline-flex;align-items:center;justify-content:center;
      padding:5px 8px;border-radius:8px;border:none;cursor:pointer;
      background:transparent;color:#475569;transition:background .15s;
      min-width:28px;min-height:28px;
    }
    .eq-tool-btn:hover { background:#e2e8f0; color:#0f172a; }
    .eq-color-btn {
      width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.08);cursor:pointer;
      transition:transform .15s;flex-shrink:0;
    }
    .eq-color-btn:hover { transform:scale(1.35); }
    #editQExplEditor:empty:before {
      content:attr(data-placeholder);
      color:#cbd5e1;font-style:italic;pointer-events:none;
    }
    #editQExplEditor { caret-color:#3b82f6; }
    #editQExplEditor mark { border-radius:3px; padding:0 2px; }
    #editQExplEditor b, #editQExplEditor strong { font-weight:800; color:#0f172a; }
    #editQExplEditor i, #editQExplEditor em { font-style:italic; }
    #editQExplEditor u { text-decoration-thickness:2px; }
    #editQExplEditor ul { list-style:disc; padding-left:1.5em; }
    .eq-opt-row { transition:background .12s; }

    .editor-toolbar button {
        padding: 4px 8px;
        border-radius: 6px;
        font-weight: bold;
        color: #475569;
        transition: all 0.2s;
    }
    .editor-toolbar button:hover { background-color: #f1f5f9; color: #0f172a; }
    
    /* Error catcher UI */
    #globalError { display:none; position:fixed; inset:0; z-index:9999; background:white; padding:20px; color:red; font-family:monospace; overflow:auto; }
  
    /* === TEST: MODO ENFOQUE === */
    body.focus-mode #mainSidebar { display: none !important; }
    body.focus-mode header.no-print { display: none !important; }
    body.focus-mode main { margin-left: 0 !important; }
    body.focus-mode #scrollContainer { padding: 16px !important; }
    body.focus-mode #scrollContainer > .max-w-7xl { max-width: 100% !important; margin: 0 !important; padding-bottom: 24px !important; }
    body.focus-mode #viewTestRunner { padding-bottom: 24px !important; }
    body.focus-mode #testCard { border-radius: 28px !important; padding: 48px !important; min-height: calc(100vh - 64px) !important; min-height: calc(100dvh - 64px) !important; }
    body.focus-mode #testProgressText { font-size: 14px !important; font-weight: 900 !important; letter-spacing: .08em !important; }
    body.focus-mode #testCard .prose { max-width: 100% !important; }

    /* === MODO ENFOQUE: LECTURA (RESPONSIVE + AJUSTES) === */
    :root{
      --focus-font-scale: 1;
      --focus-line-height: 1.35;
    }
    body.focus-mode #testCard h2{
      /* Aplica escala también al enunciado (no solo a los marcadores A/B/C/D) */
      font-size: calc(clamp(1.35rem, 3.2vw, 3.6rem) * var(--focus-font-scale)) !important;
      font-weight: 900 !important;
      line-height: var(--focus-line-height) !important;
    }
    body.focus-mode #testCard .focus-opt-text{
      /* Aplica escala también al texto de las respuestas */
      font-size: calc(clamp(1.05rem, 2.0vw, 2.1rem) * var(--focus-font-scale)) !important;
      font-weight: 700 !important;
      line-height: var(--focus-line-height) !important;
    }
    /* Mantén la escala general para textos pequeños, pero sin pisar el enunciado ni las respuestas */
    body.focus-mode #testCard *:not(h2):not(.focus-opt-text):not(.answer-feedback):not(.answer-feedback *){
      font-size: calc(1em * var(--focus-font-scale)) !important;
      line-height: var(--focus-line-height) !important;
    }

    /* === PANEL JUSTIFICACIÓN: tamaño FIJO, nunca se escala === */
    body.focus-mode #testCard .answer-feedback,
    body.focus-mode #testCard .answer-feedback * {
      font-size: revert !important;
      line-height: 1.6 !important;
    }
    /* Tamaños específicos dentro de la justificación — escalan con el control Aa */
    body.focus-mode #testCard .answer-feedback .feedback-title {
      font-size: calc(1.15rem * var(--focus-font-scale, 1)) !important;
      font-weight: 900 !important;
    }
    body.focus-mode #testCard .answer-feedback .feedback-correct-text {
      font-size: calc(1rem * var(--focus-font-scale, 1)) !important;
      font-weight: 600 !important;
    }
    body.focus-mode #testCard .answer-feedback .feedback-label {
      font-size: calc(0.8rem * var(--focus-font-scale, 1)) !important;
      font-weight: 800 !important;
      letter-spacing: 0.08em;
    }
    body.focus-mode #testCard .answer-feedback .feedback-body {
      font-size: calc(1.05rem * var(--focus-font-scale, 1)) !important;
      font-weight: 500 !important;
      line-height: 1.7 !important;
    }
    body.focus-mode.focus-contrast #testCard{
      background: #0b1220 !important;
      color: #ffffff !important;
      border-color: rgba(255,255,255,.12) !important;
    }
    body.focus-mode.focus-contrast #testCard .border-slate-200{ border-color: rgba(255,255,255,.18) !important; }
    body.focus-mode.focus-contrast #testCard .text-slate-900{ color: #fff !important; }
    body.focus-mode.focus-contrast #testCard .text-slate-600{ color: rgba(255,255,255,.8) !important; }
    body.focus-mode.focus-contrast #testCard .bg-slate-50{ background: rgba(255,255,255,.06) !important; }
    

    /* === TEST: PANEL DE PREGUNTAS (ACIERTO/FALLO) === */
    #testGridPanel {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
    }
    .qcell {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 12px;
      border: 1px solid rgba(148,163,184,.55); /* slate-400 */
      color: #0f172a; /* slate-900 */
      user-select: none;
      cursor: pointer;
      transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
    }
    .qcell:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
    .qcell.qcell-neutral { background: #ffffff; }
    .qcell.qcell-correct { background: #dcfce7; border-color: rgba(16,185,129,.55); } /* emerald */
    .qcell.qcell-wrong { background: #ffe4e6; border-color: rgba(244,63,94,.55); } /* rose */
    .qcell.qcell-current { box-shadow: 0 0 0 3px rgba(99,102,241,.18); border-color: rgba(99,102,241,.6); }
    /* Riesgo adaptativo — Plan del Día */
    .qcell.qcell-urgent  { background: #fee2e2; border-color: rgba(239,68,68,.55);  color: #991b1b; }
    .qcell.qcell-relearn { background: #ffe4e6; border-color: rgba(244,63,94,.55);  color: #9f1239; }
    .qcell.qcell-new     { background: #e0e7ff; border-color: rgba(99,102,241,.45); color: #3730a3; }

    /* =============================================
       MEJORAS RESPONSIVE MÓVIL
       (Desktop-first: sólo aplican en pantallas pequeñas)
       ============================================= */

    /* --- Barra de navegación inferior para móvil --- */
    #mobileBottomNav {
      display: none;
    }

    @media (max-width: 767px) {

      /* Body: permitir scroll en móvil */
      body {
        overflow: hidden;
      }

      /* Header más compacto */
      header.no-print {
        height: 56px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      header.no-print h1#crumbTitle {
        font-size: 1rem !important;
      }
      header.no-print p#crumbContext {
        display: none;
      }

      /* Scroll container: ajustar padding para barra inferior */
      #scrollContainer {
        padding: 16px !important;
        padding-bottom: 80px !important; /* espacio para bottom nav */
      }

      /* Barra inferior de navegación rápida */
      #mobileBottomNav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 45;
        background: rgba(255,255,255,0.97);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid rgba(148,163,184,0.2);
        padding: 8px 4px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        gap: 0;
        box-shadow: 0 -4px 24px rgba(15,23,42,0.08);
      }
      .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 4px;
        border-radius: 12px;
        transition: all 0.15s;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        background: transparent;
        border: none;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
      }
      .mob-nav-btn.active {
        color: #2563eb;
        background: #eef2ff;
      }
      .mob-nav-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 2;
      }
      .mob-nav-btn span {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60px;
      }

      /* Sidebar overlay mejorado */
      #mainSidebar {
        width: 88vw !important;
        max-width: 320px;
      }

      /* Cards de vista más compactos */
      #viewBook .bg-white.rounded-3xl,
      #viewTopic .bg-white.rounded-\[2rem\] {
        padding: 20px !important;
        border-radius: 20px !important;
      }

      /* Book header card en móvil */
      #bookHeaderCard {
        border-radius: 20px !important;
        padding: 16px !important;
      }
      #bookHeaderCard h1 {
        font-size: 1.4rem !important;
      }
      #bookEmoji {
        width: 64px !important;
        height: 64px !important;
        font-size: 2.2rem !important;
        border-radius: 16px !important;
      }

      /* Botones de acción en vista libro */
      #viewBook .flex.gap-3.mb-2 button {
        padding: 10px 16px !important;
        font-size: 13px !important;
      }

      /* Buscador de biblioteca */
      #viewLibrary .bg-white.p-2 {
        padding: 8px 12px !important;
      }

      /* Botones Crear/Importar en biblioteca */
      #viewLibrary .flex.justify-end.gap-2 {
        flex-wrap: wrap;
      }
      #viewLibrary .flex.justify-end.gap-2 button {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        font-size: 12px !important;
        padding: 10px 12px !important;
      }

      /* Test runner: tarjeta de pregunta más compacta */
      #testCard {
        padding: 16px !important;
        border-radius: 20px !important;
      }

      /* Pregunta: texto más compacto en móvil para que quepa en pantalla */
      #testCard h2 {
        font-size: 1.05rem !important;
        margin-bottom: 12px !important;
        line-height: 1.35 !important;
      }

      /* Opciones: padding y gap reducidos para que quepan las 4 */
      #testCard .space-y-3 {
        gap: 7px !important;
      }
      #testCard .space-y-3 > div {
        padding: 10px 12px !important;
        gap: 10px !important;
        border-radius: 12px !important;
      }
      #testCard .focus-opt-text {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
      }

      /* Badge dominio: más pequeño */
      #testCard .mb-4 {
        margin-bottom: 8px !important;
      }

      /* Navegación test: botones ocupan todo el ancho */
      #testNavBar {
        gap: 8px;
      }
      #testNavBar button {
        flex: 1;
        justify-content: center;
        padding: 12px 8px !important;
        font-size: 14px !important;
      }

      /* Panel de herramientas lectura: posición adaptada para móvil */
      #focusToolsPanel {
        bottom: 80px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: 100% !important;
        border-radius: 20px !important;
      }

      /* Barra de progreso test */
      #viewTestRunner .sticky.top-0 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
      }

      /* Grid de celdas del test */
      .qcell {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 11px;
      }

      /* Modal: más espacio en móvil */
      #modalOverlay > div {
        margin: 12px !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 24px !important;
      }

      /* Focus mode sin sidebar */
      body.focus-mode main {
        margin-left: 0 !important;
      }
      body.focus-mode #testCard {
        padding: 20px !important;
        border-radius: 20px !important;
      }

      /* Stats y progress: texto más pequeño */
      #viewStats h2, #viewProgress h2 {
        font-size: 1.3rem !important;
      }

      /* Search global */
      #viewSearch .bg-white.rounded-\[2rem\] {
        padding: 20px !important;
        border-radius: 20px !important;
      }
      #globalSearchInput {
        font-size: 1rem !important;
        padding: 12px 12px 12px 44px !important;
      }

      /* Toasts: centrar y ancho completo en móvil */
      #toastContainer {
        left: 12px !important;
        right: 12px !important;
      }

      /* navBack en móvil: visibilidad controlada por JS (se muestra si hay a dónde volver) */
      #navBack {
        padding: 0.4rem;
      }

      /* Ajustes para acciones del header en móvil */
      #headerActions {
        gap: 6px !important;
      }
      #headerActions button {
        padding: 6px 10px !important;
        font-size: 12px !important;
      }

      /* Selección múltiple en vista libro */
      #viewBook .flex.flex-col.sm\:flex-row {
        padding: 12px !important;
      }
      #viewBook .flex.gap-2 button {
        padding: 8px 14px !important;
        font-size: 12px !important;
      }

      /* hint text oculto en móvil */
      .text-xs.text-slate-400.font-medium.px-2 {
        font-size: 10px !important;
      }
    }

    /* Safe area para iPhone con notch */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
      @media (max-width: 767px) {
        #mobileBottomNav {
          padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }
        #scrollContainer {
          padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        }
      }
    }

    /* ═══════════════════════════════════════════════════════════
       TABLET (768px – 1279px): layout test runner optimizado
       Sin tocar desktop (≥1280px) ni móvil (≤767px)
       ═══════════════════════════════════════════════════════════ */
    @media (min-width: 768px) and (max-width: 1279.98px) {

      /* Reducir padding lateral del contenedor para aprovechar más ancho */
      #scrollContainer {
        padding: 16px 20px !important;
      }

      /* Test runner: layout de dos zonas — pregunta arriba, navegación sticky abajo */
      #viewTestRunner {
        padding-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 64px); /* fallback */
        min-height: calc(100dvh - 64px); /* iOS Safari: altura dinámica real */
      }

      /* Header de progreso: más compacto */
      #viewTestRunner .sticky.top-0 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
      }

      /* Tarjeta pregunta: tamaño justo, sin padding excesivo */
      #testCard {
        padding: 20px 24px !important;
        border-radius: 20px !important;
        margin-bottom: 8px !important;
        flex: 1;
      }

      /* Pregunta: fuente legible pero no enorme */
      #testCard h2 {
        font-size: 1.1rem !important;
        margin-bottom: 14px !important;
        line-height: 1.4 !important;
      }

      /* Opciones: espacio justo */
      #testCard .space-y-3 > div {
        padding: 11px 14px !important;
        border-radius: 14px !important;
      }
      #testCard .focus-opt-text {
        font-size: 0.88rem !important;
      }

      /* ── Navegación STICKY en la parte inferior del viewport ── */
      #testNavBar {
        position: sticky;
        bottom: 0;
        z-index: 30;
        background: rgba(248, 250, 252, 0.97);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 10px 4px 12px !important;
        margin-top: 0 !important;
        border-top: 1px solid rgba(148, 163, 184, 0.15);
        gap: 10px;
      }

      /* Botones navegación: más grandes y accesibles en tablet */
      #testNavBar button {
        padding: 13px 20px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
      }

      #btnNextQ {
        min-width: 160px;
      }

      /* Panel de preguntas: más compacto en tablet */
      #testGridPanel {
        margin-top: 4px !important;
        margin-bottom: 60px !important; /* espacio para la barra sticky */
        padding: 12px !important;
        border-radius: 16px !important;
      }

      .qcell {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
        border-radius: 9px !important;
      }
    }

/* ─── Respetar reduced motion ─── */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* ─── Fondo sutil con aura animada ─── */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(99,102,241,.08), transparent 55%),
      radial-gradient(900px 500px at -10% 110%, rgba(251,191,36,.07), transparent 55%),
      radial-gradient(700px 400px at 50% 120%, rgba(139,92,246,.05), transparent 60%);
    animation: auraShift 22s ease-in-out infinite alternate;
  }
  @keyframes auraShift {
    0%   { transform: translate3d(0,0,0) scale(1); opacity:.9; }
    50%  { transform: translate3d(-2%, 1%, 0) scale(1.04); opacity:1; }
    100% { transform: translate3d(2%,-1%, 0) scale(1.02); opacity:.85; }
  }

  /* ─── Tipografía más suave ─── */
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

  /* ─── Splash: ya definido en el bloque principal del <head> ─── */

  /* ─── Tarjetas: eleva al hover, anima entrada ─── */
  #viewLibrary .bg-white,
  #viewBook  > .bg-white,
  #viewTopic > .bg-white,
  #viewStats .bg-white,
  #viewProgress .bg-white,
  #viewDashboard .bg-white {
    transition: transform .35s cubic-bezier(.2,.8,.2,1),
                box-shadow .35s cubic-bezier(.2,.8,.2,1),
                border-color .25s ease;
    will-change: transform;
  }
  @media (hover: hover) and (pointer: fine) {
    #libraryList > div:hover,
    #bookTopicList > div:hover,
    #questionList > div:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 40px -18px rgba(15,23,42,.18), 0 6px 16px -10px rgba(15,23,42,.08);
      border-color: rgba(99,102,241,.28) !important;
    }
  }

  /* ─── Botones: micro-rebote y brillo al hover ─── */
  button {
    transition:
      transform .18s cubic-bezier(.2,.8,.2,1),
      box-shadow .25s ease,
      background-color .2s ease,
      color .2s ease,
      filter .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    button:not([disabled]):hover { filter: brightness(1.04); }
  }
  button:not([disabled]):active { transform: translateY(1px) scale(.985); }

  /* Shimmer sobre botones primarios (indigo/slate-900) */
  button[class*="bg-indigo-"],
  button[class*="bg-slate-900"],
  button[class*="from-indigo-"],
  button[class*="from-amber-"] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  button[class*="bg-indigo-"]::after,
  button[class*="bg-slate-900"]::after,
  button[class*="from-indigo-"]::after,
  button[class*="from-amber-"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .9s ease;
    pointer-events: none;
    z-index: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    button[class*="bg-indigo-"]:hover::after,
    button[class*="bg-slate-900"]:hover::after,
    button[class*="from-indigo-"]:hover::after,
    button[class*="from-amber-"]:hover::after {
      transform: translateX(120%);
    }
  }

  /* ─── Sidebar: item activo con acento animado ─── */
  #mainSidebar button.bg-slate-900 {
    position: relative;
    box-shadow: 0 10px 24px -12px rgba(15,23,42,.45);
  }
  #mainSidebar button.bg-slate-900::before {
    content: "";
    position: absolute;
    left: -8px; top: 18%; bottom: 18%;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #93c5fd, #2563eb);
    box-shadow: 0 0 10px rgba(96,165,250,.6);
    animation: sidePulse 2.6s ease-in-out infinite;
  }
  @keyframes sidePulse {
    0%, 100% { opacity:.8; transform: scaleY(1); }
    50%      { opacity:1;  transform: scaleY(1.15); }
  }

  /* ─── Iconos Lucide: animación de entrada sutil ─── */
  [data-lucide] { transition: transform .25s cubic-bezier(.2,.8,.2,1); }

  /* ─── Inputs: focus ring refinado ─── */
  input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 4px rgba(99,102,241,.12);
    transition: box-shadow .2s ease, background-color .2s ease;
  }

  /* ─── Toasts: más suaves ─── */
  #toastContainer > * {
    animation: toastIn .35s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes toastIn {
    0%   { transform: translateY(-14px) scale(.96); opacity: 0; }
    100% { transform: translateY(0) scale(1);       opacity: 1; }
  }

  /* Entrada de vistas: ver «H73 · MOVIMIENTO FUNCIONAL» al final. */

  /* ─── Cabecera del libro: brillo sutil animado ─── */
  #bookHeaderCard::after {
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(600px 180px at 20% 0%, rgba(251,191,36,.18), transparent 60%);
    mix-blend-mode: screen;
    pointer-events:none;
    animation: bookGlow 9s ease-in-out infinite alternate;
    z-index: 1;
  }
  @keyframes bookGlow {
    0%   { opacity: .7; transform: translateX(-6%); }
    100% { opacity: 1;  transform: translateX(6%); }
  }

  /* ─── Test card: acento superior degradado ─── */
  #testCard {
    position: relative;
    overflow: hidden;
  }
  #testCard::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #3b82f6, #ec4899, #f59e0b, #3b82f6);
    background-size: 200% 100%;
    animation: topBar 6s linear infinite;
    opacity: .9;
    z-index: 2;
  }
  @keyframes topBar {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
  }

  /* ─── Opciones de test: interacción más táctil ─── */
  #testCard .space-y-3 > div[onclick] {
    transition:
      transform .2s cubic-bezier(.2,.8,.2,1),
      box-shadow .25s ease,
      background-color .2s ease,
      border-color .2s ease;
  }
  @media (hover: hover) and (pointer: fine) {
    #testCard .space-y-3 > div[onclick]:hover {
      transform: translateX(4px);
      border-color: rgba(99,102,241,.45) !important;
      box-shadow: 0 10px 24px -14px rgba(99,102,241,.4);
    }
  }

  /* ─── Celdas del panel de preguntas ─── */
  .qcell { transition: transform .15s ease, box-shadow .2s ease, background-color .2s, border-color .2s; }
  .qcell.qcell-correct { animation: cellPop .35s cubic-bezier(.2,.8,.2,1) both; }
  .qcell.qcell-wrong   { animation: cellShake .4s ease both; }
  @keyframes cellPop {
    0%   { transform: scale(.7); opacity: .6; }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes cellShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-3px); }
    75%     { transform: translateX(3px); }
  }

  /* ─── Barras de progreso animadas ─── */
  [class*="bg-indigo"][class*="rounded-full"][style*="width"],
  [class*="bg-emerald"][class*="rounded-full"][style*="width"],
  [class*="bg-amber"][class*="rounded-full"][style*="width"] {
    transition: width .3s cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
  }

  /* ─── Logo del sidebar: glow respirando ─── */
  #mainSidebar img[alt*="Casco"] {
    animation: helmetBreath 5.5s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes helmetBreath {
    0%,100% { filter: drop-shadow(0 0 12px rgba(250,200,50,.5)) contrast(1.05) saturate(1.1); transform: translateY(0); }
    50%     { filter: drop-shadow(0 0 22px rgba(250,200,50,.75)) contrast(1.08) saturate(1.15); transform: translateY(-2px); }
  }

  /* ─── Ripple universal ─── */
  .pp-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: .18;
    pointer-events: none;
    animation: ppRipple .55s cubic-bezier(.2,.8,.2,1) forwards;
    z-index: 1;
  }
  @keyframes ppRipple {
    to { transform: scale(2.6); opacity: 0; }
  }

  /* ─── Navegación móvil: indicador animado ─── */
  .mob-nav-btn.active {
    position: relative;
  }
  .mob-nav-btn.active::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg,#3b82f6,#3b82f6);
    animation: navPop .22s cubic-bezier(.2,.8,.2,1) both;
  }
  /* Solo transform/opacity: no recalcula el diseño en cada fotograma. */
  @keyframes navPop {
    0%   { transform: translateX(-50%) scaleX(0); opacity: 0; }
    100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
  }

  /* ─── Scrollbar elegante ─── */
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8) !important;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #94a3b8, #64748b) !important;
  }

  /* ─── Badge shine (insignias IA / dailyPlanBadge) ─── */
  #dailyPlanBadge:not(.hidden),
  [class*="bg-orange-500"][class*="rounded-full"],
  [class*="bg-indigo-500"][class*="rounded-full"][class*="text-white"] {
    animation: badgePulse 2.2s ease-in-out infinite;
  }
  @keyframes badgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.35); }
    50%     { box-shadow: 0 0 0 6px rgba(99,102,241,0); }
  }

  /* ─── Header: aparece con gloss al scrollear ─── */
  header.no-print {
    background-image: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
  }

  /* ─── Vista vacía: icono flotante ─── */
  #libraryEmpty .w-20, #topicEmpty .w-16, #globalSearchEmpty .w-20 {
    animation: floatY 3.8s ease-in-out infinite;
  }
  @keyframes floatY {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
  }

  /* ─── Modales: entrada con backdrop blur crescente ─── */
  [id^="modal"][id$="Content"]:not(.hidden),
  #modalContent:not(.hidden) {
    animation: modalIn .2s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes modalIn {
    0%   { opacity: 0; transform: translateY(10px) scale(.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ─── Pestañas activas: subrayado deslizante ─── */
  #bookTabTemas.bg-white::after,
  #bookTabTest.bg-white::after {
    content:"";
    display:block;
    height: 2px;
    margin-top: 4px;
    background: linear-gradient(90deg,#3b82f6,#3b82f6);
    border-radius: 2px;
    animation: tabIn .35s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes tabIn {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }

  /* ─── Logo sidebar · animaciones ─── */
  #sidebarLogo { isolation: isolate; }
  #sidebarLogo::before {
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(130deg, transparent 30%, rgba(251,191,36,.08) 50%, transparent 70%);
    opacity:0; transition: opacity .4s ease;
    pointer-events:none;
  }
  #sidebarLogo:hover::before { opacity:1; }

  /* Casco hover */
  #sidebarLogo:hover .sl-helmet { box-shadow: inset 0 0 0 1px rgba(251,191,36,.6), 0 12px 32px -8px rgba(251,191,36,.65) !important; }

  /* Anillo pulsante */
  @keyframes slRingPulse {
    0%   { box-shadow: 0 0 0 0 rgba(251,191,36,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
  }
  .sl-ring { animation: slRingPulse 2.6s ease-out infinite; }

  /* Puntito pulsante versión */
  @keyframes slPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(1.6); }
  }

  /* Chispas flotantes */
  .sl-spark {
    position:absolute;
    width:3px; height:3px; border-radius:50%;
    background: #93c5fd;
    box-shadow: 0 0 6px #93c5fd, 0 0 12px rgba(96,165,250,.5);
    animation: slSparkFloat 4s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes slSparkFloat {
    0%, 100% { transform: translate(0,0) scale(.6); opacity: 0; }
    20%      { opacity: .9; }
    50%      { transform: translate(6px,-8px) scale(1); opacity: 1; }
    80%      { opacity: .4; }
  }

  /* Tooltip */
  .sl-tip.show { opacity: 1 !important; transform: translateY(0) !important; }

  /* ═══════════════════════════════════════════════════════════
   ▸ MODAL · FONDO INTERACTIVO (aurora + spotlight + grid)
   ═══════════════════════════════════════════════════════════ */
  .modal-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
    animation: modalBlobFloat 18s ease-in-out infinite;
  }
  .modal-aurora-blob-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #3b82f6, transparent 70%);
    left: -15%; top: -20%;
    animation-delay: 0s;
  }
  .modal-aurora-blob-2 {
    width: 460px; height: 460px;
    background: radial-gradient(circle, #3b82f6, transparent 70%);
    right: -10%; top: 30%;
    animation-delay: -6s;
  }
  .modal-aurora-blob-3 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, #ec4899, transparent 70%);
    left: 30%; bottom: -15%;
    animation-delay: -12s;
    opacity: 0.35;
  }
  @keyframes modalBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
  }
  /* Spotlight que sigue el cursor */
  .modal-spotlight {
    position: absolute;
    width: 500px; height: 500px;
    left: var(--mx, 50%); top: var(--my, 50%);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, rgba(251,191,36,0.08) 30%, transparent 60%);
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity .3s;
    opacity: var(--mo, 0);
  }
  /* Grid sutil de fondo */
  .modal-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), black 0%, transparent 60%);
    opacity: 0.6;
  }
  #modalOverlay:not(.hidden) #modalAurora { opacity: 1; }

  /* ═══════════════════════════════════════════════════════════
   ▸ EDITAR PREGUNTA · refinamiento premium
   ═══════════════════════════════════════════════════════════ */
  /* Header con degradado sutil */
  #modalEditQuestionContent > .sticky {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border-bottom: 1px solid #eef0f7 !important;
  }
  #modalEditQuestionContent .eq-header-icon {
    background: linear-gradient(135deg, #eef2ff, #faf5ff);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.25), 0 4px 12px -4px rgba(99,102,241,.35);
    position: relative;
  }
  #modalEditQuestionContent .eq-header-icon::after {
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 40%, rgba(99,102,241,.15) 50%, transparent 60%);
    animation: eqHeaderShine 3s ease-in-out infinite;
  }
  @keyframes eqHeaderShine {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    50%      { transform: translateX(100%); opacity: 1; }
  }
  /* Etiquetas de sección */
  #modalEditQuestionContent label.eq-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800;
    color: #64748b;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  #modalEditQuestionContent label.eq-label::before {
    content:""; width: 3px; height: 12px;
    border-radius: 2px; background: currentColor; opacity: .35;
  }
  /* Textarea enunciado con degradado focus */
  #editQText {
    background: #fafbff !important;
    border-color: #e2e8f0 !important;
    transition: all .25s !important;
    box-shadow: 0 1px 0 rgba(15,23,42,.02);
  }
  #editQText:focus {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,.08), 0 8px 24px -12px rgba(139,92,246,.3) !important;
  }
  /* Input imagen */
  #editQImg {
    background: #fafbff !important;
    transition: all .25s !important;
  }
  #editQImg:focus {
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.08) !important;
    border-color: #3b82f6 !important;
  }
  /* Aviso opciones: más cálido */
  #modalEditQuestionContent .eq-hint-opts {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fcd34d;
    color: #78350f;
  }
  /* Opciones: fila más refinada */
  #editOptionsContainer > div {
    transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, border-color .18s;
  }
  #editOptionsContainer > div:hover {
    transform: translateX(2px);
    box-shadow: 0 8px 20px -12px rgba(15,23,42,.18);
  }
  #editOptionsContainer > div.eq-opt-correct {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 0 1px #34d399, 0 10px 20px -12px rgba(16,185,129,.4);
  }
  .eq-radio-circle {
    transition: all .2s cubic-bezier(.2,.8,.2,1);
  }
  .eq-opt-correct .eq-radio-circle {
    transform: scale(1.08);
    box-shadow: 0 0 0 3px rgba(16,185,129,.25), 0 4px 10px -2px rgba(16,185,129,.4);
  }
  /* Tabs Editar / Vista previa */
  #eqTabEdit, #eqTabPreview { transition: all .2s; }
  /* Toolbar: más refinada */
  #eqToolbar {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
    border-color: #e2e8f0 !important;
  }
  .eq-tool-btn {
    transition: all .15s !important;
    position: relative;
  }
  .eq-tool-btn:hover {
    background: #3b82f6 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -4px rgba(99,102,241,.5);
  }
  .eq-tool-btn:active { transform: translateY(0); }
  .eq-color-btn {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.1);
  }
  .eq-color-btn:hover {
    box-shadow: 0 4px 10px -2px rgba(0,0,0,.25), 0 0 0 2px rgba(255,255,255,.9);
  }
  /* Editor rich */
  #editQExplEditor:focus {
    border-color: #3b82f6 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.04), 0 0 0 4px rgba(139,92,246,.08);
  }
  /* Botones finales */
  #eqSaveBtn {
    position: relative; overflow: hidden;
  }
  #eqSaveBtn::before {
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
  }
  #eqSaveBtn:hover::before { transform: translateX(100%); }
  #eqSaveBtn.saving {
    animation: eqSaveBtnSaving 1s ease-in-out infinite;
  }
  @keyframes eqSaveBtnSaving {
    0%, 100% { box-shadow: 0 8px 25px -6px rgba(99,102,241,0.5); }
    50%      { box-shadow: 0 8px 35px -2px rgba(99,102,241,0.7); }
  }
  /* Dot cambios sin guardar animado */
  #eqUnsavedDot {
    animation: slPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(251,191,36,.8);
  }
  /* Contador caracteres */
  #eqCharCount {
    font-variant-numeric: tabular-nums;
    transition: color .2s;
  }
  #eqCharCount.eq-count-warn { color: #f59e0b !important; font-weight: 700; }
  #eqCharCount.eq-count-high { color: #ef4444 !important; font-weight: 800; }

  /* ═══════════════════════════════════════════════════════════
   ▸ FONDO INTERACTIVO GLOBAL (#appBg)
   ═══════════════════════════════════════════════════════════ */
  #appBg { --mx: 50%; --my: 40%; --mo: 0; }

  /* Capa base: gradiente estático sutil */
  .app-bg-gradient {
    position: absolute; inset: 0;
    background:
      radial-gradient(1200px 700px at 20% -10%, rgba(96,165,250,0.05), transparent 60%),
      radial-gradient(1000px 600px at 110% 20%, rgba(37,99,235,0.04), transparent 55%),
      radial-gradient(1400px 800px at 50% 120%, rgba(147,197,253,0.05), transparent 60%);
  }
  /* Blobs: siluetas llama / casco con blur */
  .app-bg-blob {
    position: absolute;
    filter: blur(70px);
    opacity: 0.55;
    will-change: transform;
  }
  .app-bg-blob-1 {
    width: 520px; height: 520px;
    left: -8%; top: -12%;
    animation: appBlob1 26s ease-in-out infinite;
  }
  .app-bg-blob-2 {
    width: 480px; height: 480px;
    right: -6%; top: 35%;
    animation: appBlob2 30s ease-in-out infinite;
    opacity: 0.45;
  }
  .app-bg-blob-3 {
    width: 500px; height: 500px;
    left: 35%; bottom: -18%;
    border-radius: 50%;
    filter: blur(110px);
    background: radial-gradient(circle, rgba(251,191,36,0.3) 0%, transparent 70%);
    animation: appBlob3 34s ease-in-out infinite;
    opacity: 0.35;
  }
  @keyframes appBlob1 {
    0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
    50%      { transform: translate(50px, 30px) scale(1.08) rotate(-3deg); }
  }
  @keyframes appBlob2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-40px, 50px) scale(0.94); }
  }
  @keyframes appBlob3 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50%      { transform: translate(-60px, -20px) scale(1.06); }
  }

  /* Humo ascendente — 3 columnas sutiles */
  .app-bg-smoke span {
    position: absolute;
    bottom: -100px;
    width: 200px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(ellipse at bottom, rgba(148,163,184,0.18) 0%, transparent 70%);
    filter: blur(30px);
    animation: appSmokeRise 14s linear infinite;
  }
  .app-bg-smoke span:nth-child(1) { left: 15%; animation-delay: 0s; }
  .app-bg-smoke span:nth-child(2) { left: 55%; animation-delay: -5s; opacity: 0.7; }
  .app-bg-smoke span:nth-child(3) { left: 82%; animation-delay: -9s; opacity: 0.5; }
  @keyframes appSmokeRise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    15%  { opacity: 0.6; }
    100% { transform: translateY(-110vh) scale(1.6); opacity: 0; }
  }

  /* Ondas de calor — líneas curvas que simulan el calor del fuego */
  .app-bg-hex {
    position: absolute; inset: 0;
    background-image:
      radial-gradient(ellipse 120px 40px at 20% 85%, rgba(251,146,60,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 140px 45px at 50% 90%, rgba(239,68,68,0.06) 0%, transparent 70%),
      radial-gradient(ellipse 100px 35px at 78% 87%, rgba(251,191,36,0.06) 0%, transparent 70%),
      radial-gradient(ellipse 80px 30px at 35% 70%, rgba(251,146,60,0.04) 0%, transparent 70%),
      radial-gradient(ellipse 110px 38px at 65% 75%, rgba(239,68,68,0.04) 0%, transparent 70%);
    opacity: calc(var(--mo) * 0.9 + 0.15);
    transition: opacity .4s;
    animation: heatWave 8s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes heatWave {
    0%   { background-position: 0% 0%; filter: blur(0px); }
    50%  { background-position: 2% -1%; filter: blur(0.5px); }
    100% { background-position: -1% 1%; filter: blur(0px); }
  }

  /* Chispas ámbar flotando hacia arriba */
  .app-bg-sparks {
    position: absolute; inset: 0;
    transform: translate3d(calc((var(--mxp,50) - 50) * -0.2px), calc((var(--myp,50) - 50) * -0.2px), 0);
    transition: transform .4s ease-out;
  }
  .app-bg-sparks span {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #93c5fd 0%, rgba(96,165,250,.6) 50%, transparent 70%);
    box-shadow: 0 0 8px rgba(147,197,253,0.7), 0 0 16px rgba(96,165,250,0.35);
    animation: appSparkFloat 9s ease-in-out infinite;
  }
  .app-bg-sparks span:nth-child(1){ left:12%; top:80%; animation-delay:0s; }
  .app-bg-sparks span:nth-child(2){ left:85%; top:75%; animation-delay:-1s; }
  .app-bg-sparks span:nth-child(3){ left:28%; top:65%; animation-delay:-2s; width:5px;height:5px; }
  .app-bg-sparks span:nth-child(4){ left:72%; top:88%; animation-delay:-3s; }
  .app-bg-sparks span:nth-child(5){ left:45%; top:90%; animation-delay:-4s; width:3px;height:3px;opacity:.7; }
  .app-bg-sparks span:nth-child(6){ left:92%; top:55%; animation-delay:-5s; }
  .app-bg-sparks span:nth-child(7){ left:8%; top:50%; animation-delay:-6s; }
  .app-bg-sparks span:nth-child(8){ left:60%; top:68%; animation-delay:-1.5s;width:5px;height:5px; }
  .app-bg-sparks span:nth-child(9){ left:35%; top:85%; animation-delay:-3.5s; }
  .app-bg-sparks span:nth-child(10){ left:78%; top:35%; animation-delay:-2.5s;width:3px;height:3px;opacity:.6; }
  .app-bg-sparks span:nth-child(11){ left:20%; top:40%; animation-delay:-7s; }
  .app-bg-sparks span:nth-child(12){ left:65%; top:25%; animation-delay:-4.5s;width:3px;height:3px; }
  @keyframes appSparkFloat {
    0%   { transform: translateY(0) scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    60%  { transform: translateY(-180px) scale(1.1); opacity: 0.8; }
    100% { transform: translateY(-300px) scale(0.3); opacity: 0; }
  }

  /* Spotlight cálido (color fuego) */
  .app-bg-spotlight {
    position: absolute;
    width: 420px; height: 420px;
    left: var(--mx); top: var(--my);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(251,146,60,0.1) 0%, rgba(251,191,36,0.05) 40%, transparent 65%);
    pointer-events: none;
    opacity: var(--mo);
    transition: opacity .4s;
  }

  @media (prefers-reduced-motion: reduce) {
    .app-bg-blob, .app-bg-sparks span, .app-bg-smoke span { animation: none; }
    .app-bg-sparks { transform: none; }
  }

  /* ═══════════════════════════════════════════════════════════
   ▸ SIDEBAR · headers de sección refinados
   ═══════════════════════════════════════════════════════════ */
  #mainSidebar > .flex-1 > div.px-2 {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
    color: #94a3b8 !important;
  }
  #mainSidebar > .flex-1 > div.px-2::before {
    content: "";
    width: 14px; height: 2px;
    background: linear-gradient(90deg, #3b82f6, transparent);
    border-radius: 2px;
    flex-shrink: 0;
  }
  #mainSidebar > .flex-1 > div.px-2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(148,163,184,.2), transparent);
  }
  /* ═══ NUEVO SISTEMA DE NAV SIDEBAR ═══ */

  /* Etiqueta de sección */
  .nav-section-label {
    padding: 6px 8px 4px;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
  }
  .nav-section-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(148,163,184,.25), transparent);
  }

  /* Botón nav base */
  .nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease;
    text-align: left;
    /* pseudo hover bg */
  }
  .nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .nav-btn:hover::before { opacity: 1; }
  .nav-btn:active { transform: scale(0.97); }

  /* Hover colors por data-color */
  .nav-btn[data-color="slate"]::before  { background: #f1f5f9; }
  .nav-btn[data-color="orange"]::before { background: linear-gradient(135deg,rgba(249,115,22,.08),rgba(239,68,68,.06)); }
  .nav-btn[data-color="teal"]::before   { background: linear-gradient(135deg,rgba(20,184,166,.08),rgba(8,145,178,.06)); }
  .nav-btn[data-color="amber"]::before  { background: linear-gradient(135deg,rgba(245,158,11,.09),rgba(217,119,6,.06)); }
  .nav-btn[data-color="violet"]::before { background: linear-gradient(135deg,rgba(139,92,246,.09),rgba(99,102,241,.06)); }
  .nav-btn[data-color="purple"]::before { background: linear-gradient(135deg,rgba(168,85,247,.09),rgba(124,58,237,.06)); }
  .nav-btn[data-color="sky"]::before    { background: linear-gradient(135deg,rgba(14,165,233,.08),rgba(2,132,199,.06)); }
  .nav-btn[data-color="rose"]::before   { background: linear-gradient(135deg,rgba(244,63,94,.08),rgba(225,29,72,.06)); }
  .nav-btn[data-color="red"]::before    { background: linear-gradient(135deg,rgba(239,68,68,.09),rgba(220,38,38,.06)); }
  .nav-btn[data-color="indigo"]::before { background: linear-gradient(135deg,rgba(99,102,241,.09),rgba(139,92,246,.06)); }

  /* Icono contenedor */
  .nav-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease;
  }
  .nav-btn:hover .nav-icon {
    transform: scale(1.12) translateY(-1px);
  }
  .nav-btn:active .nav-icon { transform: scale(0.95); }

  /* Texto label */
  .nav-label {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-btn:hover .nav-label { color: #0f172a; }

  /* Flecha › */
  .nav-arrow {
    font-size: 14px;
    color: #cbd5e1;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s, transform 0.15s, color 0.15s;
    flex-shrink: 0;
  }
  .nav-btn:hover .nav-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  /* Badge (número o texto) */
  .nav-badge {
    font-size: 9px;
    font-weight: 900;
    color: white;
    padding: 2px 7px;
    border-radius: 99px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }

  /* Chip (NUEVO, IA, etc.) */
  .nav-chip {
    font-size: 9px;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 99px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Estado activo (nav actual) */
  .nav-btn.nav-active {
    background: linear-gradient(135deg,rgba(99,102,241,.1),rgba(139,92,246,.07)) !important;
  }
  .nav-btn.nav-active .nav-label { color: #1d4ed8; font-weight: 700; }
  .nav-btn.nav-active::after {
    content: "";
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px; border-radius: 3px;
    background: linear-gradient(180deg,#3b82f6,#3b82f6);
    box-shadow: 0 0 8px rgba(99,102,241,.5);
  }
/* Scrollbar del sidebar más refinada */
  #mainSidebar .flex-1.overflow-y-auto::-webkit-scrollbar { width: 4px; }
  #mainSidebar .flex-1.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
  #mainSidebar .flex-1.overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #cbd5e1, #94a3b8);
    border-radius: 2px;
  }
  #mainSidebar .flex-1.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3b82f6, #3b82f6);
  }

  @media (prefers-reduced-motion: reduce) {
    .sl-ring, .sl-spark, #sidebarLogo * { animation: none !important; transition: none !important; }
  }
  /* ═══════════════════════════════════════════════════════════
     ██  10 MEJORAS BOMBEROFLASH  ██
     ═══════════════════════════════════════════════════════════ */

  /* ── 1. TARJETA DE TEST: opciones más premium ── */
  #testCard .space-y-3 > div[onclick] {
    border-left: 3px solid transparent;
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
  }
  @media(hover:hover){
    #testCard .space-y-3 > div[onclick]:hover {
      border-left-color: #3b82f6 !important;
      background: linear-gradient(135deg,rgba(99,102,241,.04),rgba(139,92,246,.02)) !important;
    }
  }
  /* Opción correcta seleccionada: brillo verde */
  #testCard .space-y-3 > div.bg-emerald-50 {
    border-left-color: #10b981 !important;
    box-shadow: 0 0 0 1px rgba(16,185,129,.3), 0 4px 16px -6px rgba(16,185,129,.3);
  }
  /* Opción incorrecta: borde rojo */
  #testCard .space-y-3 > div.bg-rose-50 {
    border-left-color: #f43f5e !important;
    box-shadow: 0 0 0 1px rgba(244,63,94,.25), 0 4px 16px -6px rgba(244,63,94,.2);
  }

  /* ── 2. CARDS PREGUNTAS EN TEMA: más ricas ── */
  #questionList details {
    transition: box-shadow .2s, transform .15s;
  }
  #questionList details:hover {
    box-shadow: 0 4px 20px -8px rgba(99,102,241,.18), 0 1px 4px rgba(0,0,0,.06);
    transform: translateY(-1px);
  }
  #questionList details[open] {
    box-shadow: 0 8px 28px -10px rgba(99,102,241,.22);
  }
  #questionList details summary::-webkit-details-marker { display: none; }
  #questionList details summary::marker { display: none; }
  /* Número de pregunta: badge coloreado */
  #questionList details summary > span:first-child {
    background: linear-gradient(135deg,#3b82f6,#3b82f6) !important;
    color: white !important;
    font-weight: 900;
    box-shadow: 0 3px 8px -2px rgba(99,102,241,.4);
  }

  /* ── 3. POMODORO: ring animado ── */
  #pomodoroPanel {
    background: linear-gradient(135deg,#0f172a,#1e293b) !important;
    border-color: rgba(255,255,255,.08) !important;
    position: relative;
    overflow: hidden;
  }
  #pomodoroPanel::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(239,68,68,.18), transparent 60%);
    pointer-events: none;
  }
  #pomodoroModeLabel { color: rgba(255,255,255,.5) !important; }
  #pomodoroTime {
    color: #fff !important;
    font-size: 2.5rem !important;
    text-shadow: 0 0 30px rgba(239,68,68,.4);
  }
  #pomodoroStartPause {
    background: linear-gradient(135deg,#ef4444,#dc2626) !important;
    box-shadow: 0 4px 14px -4px rgba(239,68,68,.6) !important;
    border: none;
  }
  #pomodoroReset {
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.7) !important;
  }
  #pomodoroToggleMode {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 11px !important;
  }
  .pomodoro-ring-wrap {
    display: flex; justify-content: center; margin-bottom: 8px;
  }
  .pomodoro-ring {
    --pct: 100;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(
      #ef4444 calc(var(--pct) * 1%),
      rgba(255,255,255,.08) calc(var(--pct) * 1%)
    );
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15), 0 0 20px rgba(239,68,68,.2);
    transition: --pct .9s linear;
  }
  .pomodoro-ring::after {
    content: "";
    position: absolute; inset: 8px;
    border-radius: 50%;
    background: #0f172a;
  }

  /* ── 4. FUSIONAR TEMAS: separadores y cards mejor ── */
  #viewDedup .bg-white { border-radius: 20px !important; }
  #viewDedup h2 { font-size: 1.6rem !important; font-weight: 900 !important; }

  /* ── 5. FEEDBACK RESPUESTA: animaciones ── */
  @keyframes correctPop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.03); }
    60%  { transform: scale(.99); }
    100% { transform: scale(1); }
  }
  @keyframes wrongShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-5px); }
    40%     { transform: translateX(5px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(3px); }
  }
  #testCard .space-y-3 > div.bg-emerald-50 { animation: correctPop .3s cubic-bezier(.2,.8,.2,1); }
  #testCard .space-y-3 > div.bg-rose-50   { animation: wrongShake .32s ease; }

  /* ── 6. GRID NAVEGACIÓN TEST ── */
  .qcell {
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    transition: transform .12s, box-shadow .15s, background .15s !important;
  }
  .qcell:hover { transform: translateY(-2px) scale(1.08) !important; }
  .qcell.qcell-correct {
    background: linear-gradient(135deg,#dcfce7,#bbf7d0) !important;
    box-shadow: 0 3px 8px -2px rgba(16,185,129,.35) !important;
  }
  .qcell.qcell-wrong {
    background: linear-gradient(135deg,#ffe4e6,#fecdd3) !important;
    box-shadow: 0 3px 8px -2px rgba(244,63,94,.3) !important;
  }

  /* ── 7. CARDS DE LIBROS EN BIBLIOTECA ── */
  #libraryList .bg-white {
    transition: transform .2s, box-shadow .25s;
  }
  #libraryList .bg-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -10px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06) !important;
  }

  /* ── 8. FOOTER SIDEBAR: stats más elegantes ── */
  #sideStreakWidget {
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px -6px rgba(249,115,22,.4);
  }
  /* Status conexión */
  #mainSidebar .border-t.border-slate-100 > .px-6 {
    background: #fafbff;
    border-radius: 0 0 0 0;
    padding: 10px 20px !important;
  }

  /* ── 9. PANEL RESULTADO TEST ── */
  /* Visual 2: la nota va en blanco sobre la cabecera; antes un degradado azul
     recortado al texto la dejaba azul sobre fondo rojo. */

  /* ── 10. IMPRESIÓN PREMIUM ── */
  @media print {
    #printArea {
      font-family: Georgia, 'Times New Roman', serif !important;
    }
    #printArea h1 {
      font-size: 22pt !important;
      font-weight: 900 !important;
      letter-spacing: -0.5px;
      color: #0f172a !important;
      border-bottom: 2.5pt solid #0f172a;
      padding-bottom: 8pt;
      margin-bottom: 16pt !important;
    }
    #printArea h2 {
      font-size: 11pt !important;
      font-weight: 700 !important;
      color: #1e293b !important;
      margin: 12pt 0 4pt !important;
    }
    /* Número de pregunta */
    #printArea .print-q-num {
      display: inline-block;
      width: 18pt; height: 18pt;
      border-radius: 50%;
      background: #0f172a;
      color: white;
      text-align: center;
      line-height: 18pt;
      font-size: 8pt;
      font-weight: 900;
      margin-right: 6pt;
      flex-shrink: 0;
    }
    /* Opciones en cuadrícula */
    #printArea .print-opts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3pt 12pt;
      margin: 4pt 0 6pt 24pt;
    }
    #printArea .print-opt {
      font-size: 9pt !important;
      display: flex;
      align-items: flex-start;
      gap: 4pt;
    }
    #printArea .print-opt-letter {
      font-weight: 800;
      min-width: 12pt;
      color: #475569;
    }
    /* Hoja de respuestas */
    #printArea .print-answer-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4pt;
    }
    #printArea .print-answer-item {
      border: 1pt solid #cbd5e1;
      border-radius: 4pt;
      padding: 3pt 5pt;
      font-size: 8pt;
      display: flex;
      align-items: center;
      gap: 4pt;
    }
    #printArea .print-answer-item span:first-child {
      font-weight: 800;
      color: #475569;
      min-width: 14pt;
    }
    /* Separador de sección */
    #printArea hr { border-top: 1.5pt solid #e2e8f0; margin: 12pt 0; }
    /* Pie de página */
    #printArea .print-footer {
      position: fixed;
      bottom: 1cm;
      left: 1.5cm; right: 1.5cm;
      font-size: 7pt;
      color: #94a3b8;
      display: flex;
      justify-content: space-between;
      border-top: 0.5pt solid #e2e8f0;
      padding-top: 4pt;
    }
  }

/* ═══════════════════════════════════════════════════════
   STATS v2 — Centro de análisis de rendimiento
   ═══════════════════════════════════════════════════════ */
.sd-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;font-size:11px;font-weight:700;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0;cursor:pointer;transition:all .2s;white-space:nowrap;-webkit-user-select:none;user-select:none;}
.sd-chip:hover,.sd-chip.active{background:#0f172a;color:#fff;border-color:#0f172a;}
.sd-chips-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.sd-chips-bar::-webkit-scrollbar{display:none;}
.sd-streak-card{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border-radius:24px;padding:22px 22px 18px;position:relative;overflow:hidden;}
.sd-streak-card::after{content:'';position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.18),transparent 70%);}
.sd-streak-num{font-size:68px;font-weight:900;line-height:1;background:linear-gradient(135deg,#f97316,#fb923c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-variant-numeric:tabular-nums;letter-spacing:-2px;}
.sd-streak-quality{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.sd-streak-quality.high{background:rgba(16,185,129,.15);color:#10b981;}
.sd-streak-quality.medium{background:rgba(245,158,11,.15);color:#f59e0b;}
.sd-streak-quality.low{background:rgba(244,63,94,.15);color:#f43f5e;}
.sd-mini-bars{display:flex;align-items:flex-end;gap:3px;}
.sd-mini-bar{width:8px;border-radius:3px 3px 0 0;}
.sd-cal-wrap{overflow:hidden;}
.sd-cal-header{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px;}
.sd-cal-dname{text-align:center;font-size:9px;font-weight:700;color:#94a3b8;text-transform:uppercase;padding:2px 0;}
.sd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.sd-cal-cell{aspect-ratio:1;border-radius:5px;cursor:pointer;transition:transform .12s,box-shadow .12s;border:1px solid transparent;}
.sd-cal-cell:not(.empty):not(.blank):hover{transform:scale(1.18);z-index:5;}
.sd-cal-cell.empty,.sd-cal-cell.blank{cursor:default;background:transparent;}
.sd-cal-cell.today{box-shadow:0 0 0 2px #f97316!important;}
.sd-topic-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;}
.sd-topic-scroll::-webkit-scrollbar{display:none;}
.sd-topic-card{flex-shrink:0;width:130px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px;cursor:default;transition:border-color .15s,box-shadow .15s;}
.sd-topic-card:hover{border-color:#cbd5e1;box-shadow:0 4px 14px rgba(0,0,0,.07);}
.sd-back-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid #e2e8f0;}
.sd-back-btn{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;padding:6px 12px;border-radius:10px;background:#fff;border:1px solid #e2e8f0;transition:all .15s;-webkit-user-select:none;user-select:none;}
.sd-back-btn:hover{background:#0f172a;color:#fff;border-color:#0f172a;}
.sd-day-nav-btn{width:30px;height:30px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;font-size:14px;transition:all .15s;flex-shrink:0;-webkit-user-select:none;user-select:none;}
.sd-day-nav-btn:hover:not([disabled]){background:#0f172a;color:#fff;border-color:#0f172a;}
.sd-day-nav-btn[disabled]{opacity:.3;cursor:default;pointer-events:none;}
.sd-metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.sd-metric-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:12px 8px;text-align:center;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s;}
.sd-metric-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);}
.sd-metric-top{position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}
.sd-metric-num{font-size:26px;font-weight:900;line-height:1;color:#0f172a;font-variant-numeric:tabular-nums;letter-spacing:-0.5px;}
.sd-metric-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;margin-top:3px;}
.sd-metric-ctx{font-size:9px;color:#94a3b8;margin-top:4px;line-height:1.4;min-height:12px;}
.sd-metric-ctx.pos{color:#10b981;}
.sd-metric-ctx.neg{color:#f43f5e;}
@keyframes sdCountPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.sd-count-anim{animation:sdCountPop .45s cubic-bezier(.34,1.56,.64,1) both;}
.sd-verdict{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;border-left-width:4px;}
.sd-verdict.good{border-left-color:#10b981;}
.sd-verdict.medium{border-left-color:#f59e0b;}
.sd-verdict.bad{border-left-color:#e11d48;}
.sd-verdict-label{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;}
.sd-verdict-text{font-size:13px;font-weight:500;color:#334155;line-height:1.65;}
.sd-timeline{position:relative;padding-left:30px;}
.sd-timeline::before{content:'';position:absolute;left:9px;top:10px;bottom:10px;width:2px;background:linear-gradient(to bottom,#f97316,rgba(249,115,22,.08));border-radius:2px;}
.sd-tl-item{position:relative;margin-bottom:12px;}
.sd-tl-dot{position:absolute;left:-24px;top:14px;width:12px;height:12px;border-radius:50%;border:2.5px solid #fff;z-index:2;}
.sd-tl-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s;opacity:0;transform:translateX(-10px);}
.sd-tl-card.visible{opacity:1;transform:translateX(0);}
.sd-tl-card:hover{border-color:#cbd5e1;box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateX(3px);}
.sd-tl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sd-tl-time{font-size:11px;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums;}
.sd-tl-score{font-size:22px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;}
.sd-tl-type{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.03em;}
.sd-tl-barwrap{height:4px;background:#f1f5f9;border-radius:99px;overflow:hidden;margin-top:10px;}
.sd-tl-barfill{height:100%;border-radius:99px;width:0;transition:width 1s cubic-bezier(.4,0,.2,1);}
.sd-tl-meta{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap;}
.sd-tl-meta span{font-size:11px;color:#64748b;}
.sd-tl-meta strong{font-weight:700;color:#334155;}
.sd-tl-topics{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;}
.sd-tl-topic{font-size:9px;font-weight:700;padding:2px 8px;border-radius:99px;color:#fff;}
.sd-tl-expand{display:none;margin-top:12px;padding-top:12px;border-top:1px solid #f1f5f9;}
.sd-tl-expand.open{display:block;}
.sd-best-badge{position:absolute;top:-6px;right:12px;background:#f97316;color:#fff;font-size:9px;font-weight:800;padding:2px 9px;border-radius:99px;letter-spacing:.08em;text-transform:uppercase;}
.sd-chart-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:16px;overflow:hidden;}
.sd-chart-title{font-size:10px;font-weight:800;color:#94a3b8;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.sd-topics-split{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center;}
.sd-topic-barwrap{height:4px;background:#f1f5f9;border-radius:99px;overflow:hidden;margin-top:4px;}
.sd-topic-barfill{height:100%;border-radius:99px;width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1);}
.sd-topic-tag{font-size:9px;font-weight:700;padding:1px 7px;border-radius:99px;}
.sd-insight{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px;display:flex;align-items:flex-start;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease;}
.sd-insight.visible{opacity:1;transform:translateY(0);}
.sd-insight-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.sd-insight-cat{font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:3px;}
.sd-insight-text{font-size:13px;font-weight:500;color:#334155;line-height:1.55;}
#sdCalTip{position:fixed;z-index:9999;background:#0f172a;color:#f1f5f9;font-size:11px;font-weight:600;padding:8px 12px;border-radius:10px;pointer-events:none;white-space:nowrap;display:none;transform:translate(-50%,-120%);box-shadow:0 8px 24px rgba(0,0,0,.38);}
.sd-rank-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:12px 14px;cursor:pointer;transition:all .15s;}
.sd-rank-item:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(0,0,0,.06);}
.sd-rank-pos{font-size:22px;font-weight:900;width:30px;text-align:center;flex-shrink:0;color:#0f172a;}

/* ═══ HOTFIX: una vista oculta nunca puede heredar el flex de tablet ═══ */
@media (min-width: 768px) and (max-width: 1279.98px) {
  #viewTestRunner.hidden {
    display: none !important;
  }
}

/* ═══ HOTFIX: menú de cuenta del header ═══ */
.bf-account-wrap {
  position: relative;
  flex-shrink: 0;
}
.bf-account-trigger {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 5px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bf-account-trigger:hover,
.bf-account-trigger[aria-expanded="true"] {
  background: #f8fafc;
  border-color: #bfdbfe;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .12);
}
.bf-account-trigger:focus-visible,
.bf-account-action:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .32);
  outline-offset: 2px;
}
.bf-account-avatar {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.bf-account-email {
  display: none;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
}
.bf-account-chevron {
  display: none;
  width: 15px;
  height: 15px;
  color: #94a3b8;
  transition: transform .16s ease;
}
.bf-account-trigger[aria-expanded="true"] .bf-account-chevron {
  transform: rotate(180deg);
}
.bf-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 80;
  width: min(320px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  color: #0f172a;
  box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .36);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.bf-account-menu[hidden] {
  display: none !important;
}
.bf-account-kicker {
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .16em;
  color: #64748b;
}
.bf-account-details {
  display: grid;
  gap: 12px;
  margin-top: 15px;
  padding: 14px;
  border-radius: 15px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
}
.bf-account-field-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.bf-account-field-value {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 750;
  color: #334155;
}
.bf-account-password {
  letter-spacing: .12em;
}
.bf-account-role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 850;
}
.bf-account-role.is-admin {
  background: #fff7ed;
  color: #c2410c;
}
.bf-account-actions {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.bf-account-action {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  transition: background-color .16s ease, color .16s ease;
}
.bf-account-action:hover {
  background: #eff6ff;
  color: #1d4ed8;
}
.bf-account-action.is-danger {
  color: #be123c;
  background: #fff1f2;
}
.bf-account-action.is-danger:hover {
  color: #9f1239;
  background: #ffe4e6;
}
@media (min-width: 1280px) {
  .bf-account-trigger {
    justify-content: flex-start;
    padding-right: 10px;
  }
  .bf-account-email,
  .bf-account-chevron {
    display: inline-block;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN V3 — BomberoFlash
   Identidad operativa: carbón + blanco + azul de marca (marca única, 27-09).
   Aislado bajo #authGate.bf-login-v3 para no alterar la app.
   ═══════════════════════════════════════════════════════════════ */
#authGate.bf-login-v3 {
  padding: 0 !important;
  background: #10161c !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: auto;
  align-items: stretch !important;
  justify-content: stretch !important;
  font-family: var(--font-ui);
}
#authGate.bf-login-v3 .bf-login-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(430px, .85fr);
  background: #f8fafc;
}
#authGate.bf-login-v3 .bf-login-visual {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(11,17,22,.12) 0%, rgba(11,17,22,.30) 55%, rgba(11,17,22,.72) 100%),
    url('../images/login-firefighters.webp');
  background-size: cover;
  background-position: 52% center;
}
#authGate.bf-login-v3 .bf-login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10,15,20,.12), transparent 42%, rgba(10,15,20,.10));
}
#authGate.bf-login-v3 .bf-login-brand {
  position: absolute;
  z-index: 2;
  top: clamp(28px, 5vw, 64px);
  left: clamp(28px, 5vw, 70px);
  display: flex;
  align-items: stretch;
  gap: 16px;
  color: #fff;
}
#authGate.bf-login-v3 .bf-login-brand-rule {
  width: 4px;
  min-height: 58px;
  background: #2563eb;
}
#authGate.bf-login-v3 .bf-login-wordmark {
  font-family: var(--font-ui);
  font-size: clamp(29px, 3.6vw, 52px);
  line-height: .92;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,0,.28);
}
#authGate.bf-login-v3 .bf-login-brand-subtitle {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .20em;
  color: rgba(255,255,255,.78);
}
#authGate.bf-login-v3 .bf-login-photo-caption {
  position: absolute;
  z-index: 2;
  left: clamp(28px, 5vw, 70px);
  bottom: clamp(28px, 4vw, 54px);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.78);
}
#authGate.bf-login-v3 .bf-login-panel {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 6vw, 92px) clamp(32px, 5vw, 76px);
  background: #f8fafc;
  color: #111820;
  border-left: 1px solid rgba(17,24,32,.12);
}
#authGate.bf-login-v3 .bf-login-form-wrap {
  width: min(100%, 440px);
}
#authGate.bf-login-v3 .bf-login-section-mark {
  width: 42px;
  height: 4px;
  background: #2563eb;
  margin-bottom: 22px;
}
#authGate.bf-login-v3 .bf-login-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .15em;
  color: #1d4ed8;
  text-transform: uppercase;
}
#authGate.bf-login-v3 .bf-login-title {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #111820;
}
#authGate.bf-login-v3 .bf-login-lede {
  margin: 16px 0 0;
  max-width: 34rem;
  font-size: 15px;
  line-height: 1.55;
  color: #65707a;
}
#authGate.bf-login-v3 .bf-login-error {
  margin-top: 22px;
  padding: 11px 13px;
  border-left: 3px solid #8f2f2a;
  background: rgba(143,47,42,.07);
  color: #7b2824;
  font-size: 13px;
  font-weight: 600;
}
#authGate.bf-login-v3 .bf-login-form {
  margin-top: 32px;
  display: grid;
  gap: 20px;
}
#authGate.bf-login-v3 .bf-login-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #38434d;
}
#authGate.bf-login-v3 .bf-login-field input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid #c8cbc7;
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  color: #111820;
  outline: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#authGate.bf-login-v3 .bf-login-field input::placeholder { color: #9aa1a5; }
#authGate.bf-login-v3 .bf-login-field input:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
#authGate.bf-login-v3 .bf-login-password-wrap { position: relative; }
#authGate.bf-login-v3 .bf-login-password-wrap input { padding-right: 48px; }
#authGate.bf-login-v3 .bf-login-password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #65707a;
  cursor: pointer;
}
#authGate.bf-login-v3 .bf-login-password-toggle:hover,
#authGate.bf-login-v3 .bf-login-password-toggle:focus-visible {
  color: #111820;
  background: rgba(17,24,32,.06);
  outline: none;
}
#authGate.bf-login-v3 .bf-login-password-toggle svg { width: 18px; height: 18px; }
#authGate.bf-login-v3 .bf-login-submit {
  position: relative;
  width: 100%;
  min-height: 54px;
  margin-top: 4px;
  padding: 0 18px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 10px 22px -14px rgba(29,78,216,.8);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .025em;
  transition: background .16s ease, transform .16s ease;
}
#authGate.bf-login-v3 .bf-login-submit:hover { background: #1d4ed8; }
#authGate.bf-login-v3 .bf-login-submit:active { transform: translateY(1px); }
#authGate.bf-login-v3 .bf-login-submit:focus-visible {
  outline: 3px solid rgba(37,99,235,.38);
  outline-offset: 3px;
}
#authGate.bf-login-v3 .bf-login-submit:disabled {
  cursor: wait;
  opacity: .72;
}
#authGate.bf-login-v3 .bf-login-submit svg { width: 19px; height: 19px; }
#authGate.bf-login-v3 .bf-login-access-copy {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid #d3d3cc;
  color: #68717a;
  font-size: 12.5px;
  line-height: 1.62;
}

@media (max-width: 860px) {
  #authGate.bf-login-v3 .bf-login-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 34vh) auto;
  }
  #authGate.bf-login-v3 .bf-login-visual {
    min-height: 220px;
    background-position: center 36%;
  }
  #authGate.bf-login-v3 .bf-login-brand {
    top: 28px;
    left: 26px;
    gap: 12px;
  }
  #authGate.bf-login-v3 .bf-login-brand-rule { min-height: 48px; }
  #authGate.bf-login-v3 .bf-login-wordmark { font-size: clamp(30px, 8vw, 44px); }
  #authGate.bf-login-v3 .bf-login-brand-subtitle { font-size: 10px; }
  #authGate.bf-login-v3 .bf-login-photo-caption { left: 26px; bottom: 20px; font-size: 10px; }
  #authGate.bf-login-v3 .bf-login-panel {
    min-height: auto;
    justify-content: flex-start;
    padding: 36px 26px max(42px, env(safe-area-inset-bottom));
    border-left: 0;
    border-top: 1px solid rgba(17,24,32,.12);
  }
  #authGate.bf-login-v3 .bf-login-title { font-size: 42px; }
}

/* Aviso de instalación visible dentro de la app (#38): el contenido reserva su
   alto para que no tape los últimos botones. */
body.bf-install-banner-visible #scrollContainer {
  padding-bottom: calc(80px + env(safe-area-inset-bottom) + var(--bf-install-banner-h, 0px)) !important;
}

/* La regla táctil general da 44 px a toda etiqueta; en el acceso son rótulos
   de campo y ese alto dejaba «Entrar» fuera de pantalla en iPhone. */
#authGate.bf-login-v3 .bf-login-field label { min-height: 0; }

@media (max-width: 480px) {
  #authGate.bf-login-v3 .bf-login-shell { grid-template-rows: 190px auto; }
  #authGate.bf-login-v3 .bf-login-visual { min-height: 190px; }
  #authGate.bf-login-v3 .bf-login-brand { top: 22px; left: 20px; }
  #authGate.bf-login-v3 .bf-login-photo-caption { display: none; }
  #authGate.bf-login-v3 .bf-login-panel { padding: 30px 20px max(34px, env(safe-area-inset-bottom)); }
  #authGate.bf-login-v3 .bf-login-title { font-size: 38px; }
  #authGate.bf-login-v3 .bf-login-lede { margin-top: 12px; }
  #authGate.bf-login-v3 .bf-login-form { margin-top: 26px; gap: 18px; }
}

/* Móviles bajos: el formulario completo cabe sin desplazarse. Primero se
   recorta la foto (iPhone 13/14 en Safari, ~660 px útiles) y, por debajo de
   650 px (iPhone SE, Android de 640 px), se compacta también el texto. */
@media (max-width: 480px) and (max-height: 700px) {
  #authGate.bf-login-v3 .bf-login-shell { grid-template-rows: 160px auto; }
  #authGate.bf-login-v3 .bf-login-visual { min-height: 160px; }
}
@media (max-width: 480px) and (max-height: 650px) {
  #authGate.bf-login-v3 .bf-login-shell { grid-template-rows: 120px auto; }
  #authGate.bf-login-v3 .bf-login-visual { min-height: 120px; background-position: center 30%; }
  #authGate.bf-login-v3 .bf-login-brand { top: 16px; }
  #authGate.bf-login-v3 .bf-login-brand-rule { min-height: 40px; }
  #authGate.bf-login-v3 .bf-login-panel { padding-top: 22px; }
  #authGate.bf-login-v3 .bf-login-section-mark { margin-bottom: 14px; }
  #authGate.bf-login-v3 .bf-login-title { font-size: 32px; }
  #authGate.bf-login-v3 .bf-login-form { margin-top: 18px; gap: 14px; }
}

/* V3.7.4 — permisos por rol: ocultar herramientas administrativas por defecto. */
body.bf-role-user [data-admin-only] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   V3.10.15 H2 · PERFORMANCE LITE (macOS / tablet / reduced-motion)
   Evita composición GPU continua por blur + transform + backdrop-filter.
   Solo afecta decoración; no toca lógica, tests, FSRS ni navegación.
   ═══════════════════════════════════════════════════════════════ */
html.bf-low-effects body::before {
  animation: none !important;
  transform: none !important;
  opacity: .55 !important;
}
html.bf-low-effects #appBg { --mo: 0 !important; }
html.bf-low-effects .app-bg-blob,
html.bf-low-effects .app-bg-smoke,
html.bf-low-effects .app-bg-sparks,
html.bf-low-effects .app-bg-hex,
html.bf-low-effects .app-bg-spotlight,
html.bf-low-effects .modal-aurora-blob,
html.bf-low-effects .modal-spotlight,
html.bf-low-effects .modal-grid {
  display: none !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
}
html.bf-low-effects #mainSidebar button.bg-slate-900::before,
html.bf-low-effects #bookHeaderCard::after,
html.bf-low-effects #testCard::before,
html.bf-low-effects #mainSidebar img[alt*="Casco"],
html.bf-low-effects .sl-ring,
html.bf-low-effects .sl-spark,
html.bf-low-effects #dailyPlanBadge:not(.hidden),
html.bf-low-effects [class*="bg-orange-500"][class*="rounded-full"],
html.bf-low-effects [class*="bg-indigo-500"][class*="rounded-full"][class*="text-white"],
html.bf-low-effects #libraryEmpty .w-20,
html.bf-low-effects #topicEmpty .w-16,
html.bf-low-effects #globalSearchEmpty .w-20,
html.bf-low-effects #modalEditQuestionContent .eq-header-icon::after {
  animation: none !important;
}
html.bf-low-effects #testGridPanel,
html.bf-low-effects #mobileBottomNav,
html.bf-low-effects #testNavBar,
html.bf-low-effects .bf-stats-toolbar,
html.bf-low-effects .bf-account-menu,
html.bf-low-effects [class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* H73: las entradas de vistas, ventanas e indicador de la barra inferior son
   cortas y solo usan opacity/transform, así que también se ven en modo ligero. */
html.bf-low-effects .pp-ripple {
  animation: none !important;
}
html.bf-low-effects #viewLibrary .bg-white,
html.bf-low-effects #viewBook > .bg-white,
html.bf-low-effects #viewTopic > .bg-white,
html.bf-low-effects #viewStats .bg-white,
html.bf-low-effects #viewProgress .bg-white,
html.bf-low-effects #viewDashboard .bg-white {
  will-change: auto !important;
}
/* H73: 120 ms bastan para notar la pulsación sin coste apreciable. */
html.bf-low-effects button,
html.bf-low-effects [data-lucide] {
  transition-duration: 120ms !important;
}
/* ═══════════════════════════════════════════════════════════════
   V3.10.2 · IDLE DECORATION PAUSE
   Pausa solo animación decorativa tras unos segundos sin interacción.
   No afecta spinners, temporizadores, feedback del test ni transiciones funcionales.
   ═══════════════════════════════════════════════════════════════ */
html.bf-idle-effects-paused body::before,
html.bf-idle-effects-paused .app-bg-blob,
html.bf-idle-effects-paused .app-bg-sparks span,
html.bf-idle-effects-paused .app-bg-smoke span,
html.bf-idle-effects-paused .app-bg-hex,
html.bf-idle-effects-paused .app-bg-spotlight,
html.bf-idle-effects-paused .modal-aurora-blob,
html.bf-idle-effects-paused .modal-spotlight,
html.bf-idle-effects-paused .modal-grid,
html.bf-idle-effects-paused #mainSidebar button.bg-slate-900::before,
html.bf-idle-effects-paused #bookHeaderCard::after,
html.bf-idle-effects-paused #testCard::before,
html.bf-idle-effects-paused .sl-ring,
html.bf-idle-effects-paused .sl-spark {
  animation-play-state: paused !important;
  will-change: auto !important;
}

/* V3.10.2 · omitir layout/paint de tarjetas largas fuera de pantalla (Chromium/Safari modernos). */
#viewProgress > .space-y-6 > .space-y-3 > section,
#viewRecall section {
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

/* ═══════════════════════════════════════════════════════════════
   V3.10.3 · ESTABILIDAD VISUAL / CLS
   Mientras splash/login están activos la app ya puede calcular su layout,
   pero no participa visualmente. Se revela cuando los datos están listos.
   ═══════════════════════════════════════════════════════════════ */
html { scrollbar-gutter: stable; }
html.bf-ui-not-ready #mainSidebar,
html.bf-ui-not-ready #appMain {
  visibility: hidden !important;
}
#viewLibrary [data-bookid] .text-\[10px\] {
  min-height: 15px;
  line-height: 15px;
}

/* ═══════════════════════════════════════════════════════════════
   V3.10.11 — Centro de Rendimiento
   ═══════════════════════════════════════════════════════════════ */
.bf-stats-shell{display:flex;flex-direction:column;gap:16px;max-width:1180px;margin:0 auto;padding-bottom:36px}
.bf-stats-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:4px 2px 2px}
.bf-stats-header h1{font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.035em;font-weight:900;color:#0f172a;margin:4px 0 7px}
.bf-stats-header p{font-size:13px;color:#64748b;font-weight:550;max-width:650px}
.bf-stats-eyebrow{font-size:10px;font-weight:900;letter-spacing:.16em;color:#f97316;text-transform:uppercase}
.bf-stats-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.bf-stats-source{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:12px;border:1px solid;font-size:10px;font-weight:800;white-space:nowrap}
.bf-stats-source span{width:7px;height:7px;border-radius:50%;display:block}
.bf-stats-source.ok{background:#ecfdf5;border-color:#d1fae5;color:#047857}.bf-stats-source.ok span{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12)}
.bf-stats-source.warn{background:#fffbeb;border-color:#fde68a;color:#b45309}.bf-stats-source.warn span{background:#f59e0b}
.bf-stats-refresh,.bf-stats-mini-btn,.bf-stats-back{border:1px solid #e2e8f0;background:#fff;color:#334155;border-radius:12px;font-size:11px;font-weight:850;padding:8px 11px;transition:.16s ease;cursor:pointer}
.bf-stats-refresh:hover,.bf-stats-mini-btn:hover,.bf-stats-back:hover{border-color:#cbd5e1;background:#f8fafc;transform:translateY(-1px)}
.bf-stats-mini-btn.danger{color:#e11d48;background:#fff1f2;border-color:#fecdd3}
.bf-stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bf-stats-range{display:inline-flex;background:#eef2f7;padding:3px;border-radius:13px;gap:2px}
.bf-stats-range button{border:0;background:transparent;color:#64748b;font-size:11px;font-weight:850;padding:7px 12px;border-radius:10px;cursor:pointer;transition:.15s}
.bf-stats-range button.active{background:#fff;color:#0f172a;box-shadow:0 1px 4px rgba(15,23,42,.10)}
.bf-stats-updated{font-size:10px;color:#94a3b8;font-weight:700}
.bf-stats-today{background:linear-gradient(135deg,#0f172a 0%,#172554 100%);border:1px solid rgba(96,165,250,.24);border-radius:22px;padding:18px;color:#fff;box-shadow:0 12px 30px -24px rgba(15,23,42,.75)}
.bf-stats-today-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.bf-stats-today-kicker{display:block;color:#93c5fd;font-size:9px;font-weight:950;letter-spacing:.15em}.bf-stats-today h2{margin:3px 0 3px;font-size:19px;font-weight:950;line-height:1.2;text-transform:capitalize;letter-spacing:-.025em}.bf-stats-today-head p{color:#bfdbfe;font-size:10px;font-weight:650}.bf-stats-today-head>button{border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#fff;color:#1e3a8a;padding:9px 12px;font-size:10px;font-weight:900;cursor:pointer}.bf-stats-today-rate{--today-color:#10b981;display:flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:76px;flex:0 0 76px;border-radius:50%;background:rgba(255,255,255,.08);border:5px solid var(--today-color);box-shadow:inset 0 0 0 3px rgba(15,23,42,.5)}.bf-stats-today-rate b{font-size:20px;font-weight:950;line-height:1}.bf-stats-today-rate small{margin-top:4px;color:#cbd5e1;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.bf-stats-today-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:15px}.bf-stats-today-grid>div{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;min-width:0;padding:10px 11px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.055)}.bf-stats-today-grid span{grid-row:1/3;color:#93c5fd;font-size:15px;font-weight:950}.bf-stats-today-grid b{font-size:18px;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-stats-today-grid small{margin-top:3px;color:#94a3b8;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.bf-stats-today-grid .good span,.bf-stats-today-grid .good b{color:#34d399}.bf-stats-today-grid .bad span,.bf-stats-today-grid .bad b{color:#fb7185}.bf-stats-today-foot{display:flex;justify-content:space-between;gap:12px;margin-top:11px;color:#94a3b8;font-size:9px;font-weight:650}.bf-stats-today.is-empty{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-color:#dbeafe;color:#0f172a;box-shadow:none}.bf-stats-today.is-empty .bf-stats-today-kicker{color:#2563eb}.bf-stats-today.is-empty p{color:#64748b}
.bf-stats-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.bf-stats-kpi-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.bf-stats-kpi{--tone:#64748b;--soft:#f8fafc;background:#fff;border:1px solid #e5eaf0;border-radius:18px;padding:15px 16px;min-height:132px;box-shadow:0 1px 2px rgba(15,23,42,.02);position:relative;overflow:hidden}
.bf-stats-kpi::after{content:"";position:absolute;right:-28px;top:-34px;width:90px;height:90px;border-radius:50%;background:var(--soft);opacity:.9}
.bf-stats-kpi.tone-blue{--tone:#2563eb;--soft:#eff6ff}.bf-stats-kpi.tone-emerald{--tone:#059669;--soft:#ecfdf5}.bf-stats-kpi.tone-amber{--tone:#d97706;--soft:#fffbeb}.bf-stats-kpi.tone-orange{--tone:#ea580c;--soft:#fff7ed}.bf-stats-kpi.tone-violet{--tone:#7c3aed;--soft:#f5f3ff}.bf-stats-kpi.tone-rose{--tone:#e11d48;--soft:#fff1f2}.bf-stats-kpi.tone-slate{--tone:#475569;--soft:#f8fafc}
.bf-stats-kpi-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}.bf-stats-kpi-icon{font-size:16px}.bf-stats-kpi-value{font-size:31px;font-weight:950;line-height:1;color:var(--tone);letter-spacing:-.04em;margin-top:13px;position:relative;z-index:1;font-variant-numeric:tabular-nums}.bf-stats-kpi-label{font-size:11px;font-weight:900;color:#1e293b;margin-top:8px;position:relative;z-index:1}.bf-stats-kpi-sub{font-size:10px;font-weight:650;color:#94a3b8;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.bf-stats-delta{font-size:9px;font-weight:900;padding:3px 6px;border-radius:99px}.bf-stats-delta.up{background:#ecfdf5;color:#059669}.bf-stats-delta.down{background:#fff1f2;color:#e11d48}.bf-stats-delta.flat{background:#f1f5f9;color:#64748b}
.bf-stats-panel,.bf-stats-action-panel{background:#fff;border:1px solid #e5eaf0;border-radius:22px;padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.025)}
.bf-stats-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.bf-stats-panel-title>div{display:flex;flex-direction:column;gap:2px}.bf-stats-panel-title span{font-size:14px;font-weight:900;color:#0f172a}.bf-stats-panel-title small{font-size:10px;color:#94a3b8;font-weight:650}.bf-stats-legend{font-size:9px;color:#94a3b8;font-weight:700;display:flex;align-items:center;gap:5px}.bf-stats-legend i{display:inline-block;width:13px;height:4px;border-radius:99px}.bf-stats-legend i.bar{background:#dbeafe}.bf-stats-legend i.line{height:2px;background:#f97316;margin-left:7px}
.bf-stats-advice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bf-stats-advice{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;background:#f8fafc;border:1px solid #edf1f5;border-radius:16px;padding:12px}.bf-stats-advice-icon{width:42px;height:42px;border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #e8edf2}.bf-stats-advice strong{display:block;font-size:12px;color:#0f172a;font-weight:900}.bf-stats-advice p{font-size:10px;color:#64748b;font-weight:600;line-height:1.45;margin-top:2px}.bf-stats-advice button{border:0;background:#0f172a;color:#fff;border-radius:10px;padding:8px 10px;font-size:9px;font-weight:900;white-space:nowrap;cursor:pointer}
.bf-stats-main-chart{width:100%;height:auto;min-height:210px;display:block;overflow:visible}.bf-stats-gridline{stroke:#eef2f6;stroke-width:1}.bf-stats-axis{fill:#94a3b8;font-size:9px;font-weight:650}.bf-stats-bar{fill:#dbeafe}.bf-stats-line{fill:none;stroke:#f97316;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.bf-stats-dot{fill:#fff;stroke:#f97316;stroke-width:2}
.bf-stats-compare{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #f1f5f9;margin-top:6px;padding-top:12px}.bf-stats-compare>div{padding:3px 12px;border-right:1px solid #f1f5f9;min-width:0}.bf-stats-compare>div:first-child{padding-left:0}.bf-stats-compare>div:last-child{border-right:0}.bf-stats-compare small{display:block;font-size:9px;font-weight:750;color:#94a3b8;margin-bottom:4px}.bf-stats-compare strong{display:block;font-size:13px;font-weight:900;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-stats-compare .up,.bf-stats-topic-score .up{color:#059669}.bf-stats-compare .down,.bf-stats-topic-score .down{color:#e11d48}.bf-stats-compare .flat,.bf-stats-topic-score .flat{color:#64748b}
.bf-stats-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bf-stats-grid-2.bottom{align-items:start}
.bf-stats-memory-big{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bf-stats-memory-big>div{background:#f8fafc;border:1px solid #eef2f6;border-radius:14px;padding:11px}.bf-stats-memory-big b{display:block;font-size:22px;font-weight:950;color:#0f172a;line-height:1}.bf-stats-memory-big span{display:block;font-size:9px;color:#94a3b8;font-weight:750;margin-top:5px}.bf-stats-statebar{display:flex;height:8px;background:#f1f5f9;border-radius:99px;overflow:hidden;margin:13px 0}.bf-stats-statebar span{height:100%}.bf-stats-forecast{background:#fafbfc;border-radius:14px;padding:11px 12px}.bf-stats-forecast-title{font-size:9px;font-weight:850;color:#94a3b8;text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px}.bf-stats-forecast-bars{height:98px;display:flex;align-items:flex-end;gap:7px}.bf-stats-forecast-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}.bf-stats-forecast-col>b{font-size:8px;color:#7c3aed;min-height:10px}.bf-stats-forecast-col>span{width:70%;max-width:28px;background:linear-gradient(to top,#8b5cf6,#c4b5fd);border-radius:6px 6px 2px 2px;min-height:5px}.bf-stats-forecast-col>small{font-size:8px;color:#94a3b8;font-weight:750}
.bf-stats-topic-row{display:grid;grid-template-columns:minmax(130px,1.5fr) minmax(80px,1fr) 64px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f3f5f7}.bf-stats-topic-row:last-child{border-bottom:0}.bf-stats-topic-name{font-size:11px;font-weight:850;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-stats-topic-meta{font-size:9px;color:#94a3b8;font-weight:650;margin-top:2px}.bf-stats-topic-bar{height:6px;background:#f1f5f9;border-radius:99px;overflow:hidden}.bf-stats-topic-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#fb923c,#f97316)}.bf-stats-topic-score{text-align:right;font-size:11px;font-weight:950}.bf-stats-topic-score small{font-size:11px;margin-left:2px}
.bf-stats-heat-head,.bf-stats-heat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.bf-stats-heat-head{margin-bottom:4px}.bf-stats-heat-head span{text-align:center;font-size:8px;color:#94a3b8;font-weight:800}.bf-stats-heat{aspect-ratio:1;border:0;border-radius:5px;cursor:pointer;background:#f1f5f9;transition:transform .12s,box-shadow .12s;opacity:calc(.25 + var(--i,0) * .75)}.bf-stats-heat:hover{transform:scale(1.09);box-shadow:0 2px 7px rgba(15,23,42,.13);z-index:2}.bf-stats-heat.none,.bf-stats-heat.blank{background:#f1f5f9;opacity:1;cursor:default}.bf-stats-heat.good{background:#10b981}.bf-stats-heat.mid{background:#f59e0b}.bf-stats-heat.bad{background:#f43f5e}.bf-stats-heat.blank{visibility:hidden}.bf-stats-heat-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:9px;color:#94a3b8;font-weight:700}.bf-stats-heat-legend span{display:flex;align-items:center;gap:5px}.bf-stats-heat-legend i{width:9px;height:9px;border-radius:3px;background:#f1f5f9}.bf-stats-heat-legend i.good{background:#10b981}.bf-stats-heat-legend i.mid{background:#f59e0b}.bf-stats-heat-legend i.bad{background:#f43f5e}
.bf-stats-session-list{display:flex;flex-direction:column}.bf-stats-session{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid #f3f5f7}.bf-stats-session:last-child{border-bottom:0}.bf-stats-session-score{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:950;color:var(--score-color);background:conic-gradient(var(--score-color) calc(var(--score)*1%),#eef2f6 0);position:relative}.bf-stats-session-score::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:50%}.bf-stats-session-score{isolation:isolate}.bf-stats-session-score::after{z-index:-1}.bf-stats-session-body{min-width:0;flex:1}.bf-stats-session-title{font-size:11px;font-weight:850;color:#334155}.bf-stats-session-meta{font-size:9px;color:#94a3b8;font-weight:650;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bf-stats-empty-mini{font-size:11px;color:#94a3b8;font-weight:650;padding:18px 6px;text-align:center;background:#f8fafc;border-radius:13px}
.bf-stats-foot{text-align:center;color:#94a3b8;font-size:9px;font-weight:650;padding:3px 8px}.bf-stats-foot span{display:block;margin-top:2px;color:#cbd5e1}
.bf-stats-loading{min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#64748b}.bf-stats-loading strong{font-size:13px;color:#334155}.bf-stats-loading span{font-size:10px;color:#94a3b8}.bf-stats-loader{width:34px;height:34px;border:3px solid #e2e8f0;border-top-color:#f97316;border-radius:50%;animation:bfStatsSpin .8s linear infinite;margin-bottom:4px}@keyframes bfStatsSpin{to{transform:rotate(360deg)}}
.bf-stats-day-head{display:flex;align-items:center;gap:14px;padding:2px 0}.bf-stats-day-head h1{font-size:24px;font-weight:950;color:#0f172a;text-transform:capitalize;letter-spacing:-.025em}
@media(max-width:980px){.bf-stats-today-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bf-stats-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bf-stats-kpi-grid .bf-stats-kpi:nth-child(4),.bf-stats-kpi-grid .bf-stats-kpi:nth-child(5){grid-column:auto}.bf-stats-grid-2{grid-template-columns:1fr}.bf-stats-advice-list{grid-template-columns:1fr}.bf-stats-compare{grid-template-columns:repeat(2,1fr);row-gap:10px}.bf-stats-compare>div:nth-child(2){border-right:0}}
@media(max-width:640px){.bf-stats-shell{gap:12px}.bf-stats-header{align-items:flex-start;flex-direction:column}.bf-stats-header-actions{justify-content:flex-start;width:100%}.bf-stats-header h1{font-size:25px}.bf-stats-source{max-width:calc(100vw - 110px);overflow:hidden;text-overflow:ellipsis}.bf-stats-refresh span{display:none}.bf-stats-toolbar{position:sticky;top:0;z-index:12;background:rgba(248,250,252,.94);backdrop-filter:blur(10px);padding:7px 0}.bf-stats-range{width:100%}.bf-stats-range button{flex:1}.bf-stats-updated{display:none}.bf-stats-today{padding:14px;border-radius:18px}.bf-stats-today-head{align-items:flex-start}.bf-stats-today-head p{line-height:1.45}.bf-stats-today-rate{width:64px;height:64px;flex-basis:64px;border-width:4px}.bf-stats-today-rate b{font-size:17px}.bf-stats-today-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.bf-stats-today-grid>div{padding:9px}.bf-stats-today-grid>div:last-child:nth-child(odd){grid-column:1/-1}.bf-stats-today-foot{flex-direction:column;gap:3px}.bf-stats-today.is-empty .bf-stats-today-head{flex-direction:column}.bf-stats-kpi-grid,.bf-stats-kpi-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.bf-stats-kpi{min-height:116px;padding:13px}.bf-stats-kpi-value{font-size:27px}.bf-stats-kpi-grid .bf-stats-kpi:last-child:nth-child(odd){grid-column:1/-1}.bf-stats-advice{grid-template-columns:38px 1fr}.bf-stats-advice button{grid-column:2;justify-self:start}.bf-stats-advice-icon{width:38px;height:38px}.bf-stats-panel,.bf-stats-action-panel{padding:14px;border-radius:18px}.bf-stats-main-chart{min-height:170px}.bf-stats-compare{grid-template-columns:1fr 1fr}.bf-stats-compare>div{padding:4px 8px}.bf-stats-memory-big{gap:5px}.bf-stats-memory-big>div{padding:9px}.bf-stats-memory-big b{font-size:18px}.bf-stats-topic-row{grid-template-columns:minmax(115px,1.3fr) 70px 48px;gap:7px}.bf-stats-topic-meta{display:none}.bf-stats-session-score{width:42px;height:42px}.bf-stats-heat-head,.bf-stats-heat-grid{gap:3px}.bf-stats-day-head{align-items:flex-start;flex-direction:column}}

/* V3.10.12 — Estadísticas: menos ruido, más decisión */
.bf-stats-simple-review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bf-stats-simple-review>div{background:#f8fafc;border:1px solid #eef2f6;border-radius:15px;padding:14px 12px}
.bf-stats-simple-review b{display:block;font-size:26px;line-height:1;font-weight:950;color:#0f172a;font-variant-numeric:tabular-nums}
.bf-stats-simple-review span{display:block;margin-top:6px;font-size:10px;font-weight:750;color:#94a3b8}
.bf-stats-simple-note{margin-top:12px;padding:11px 12px;border-radius:13px;background:#fafafa;color:#64748b;font-size:10px;font-weight:650;line-height:1.45}
.bf-stats-focus-grid{align-items:start}
@media(max-width:640px){
  .bf-stats-simple-review{gap:6px}
  .bf-stats-simple-review>div{padding:11px 9px}
  .bf-stats-simple-review b{font-size:21px}
  .bf-stats-kpi-grid.four .bf-stats-kpi{min-height:112px}
}

/* V3.10.13 — contraseña autoservicio + ranking diario simple */
.bf-login-forgot{display:block;margin:9px 0 0 auto;border:0;background:transparent;padding:0;color:#475569;font-size:12px;font-weight:800;cursor:pointer}
.bf-login-forgot:hover{color:#0f172a;text-decoration:underline}.bf-login-forgot:disabled{opacity:.5;cursor:wait}
.bf-leader-card{background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:18px;box-shadow:0 6px 24px rgba(15,23,42,.05)}
.bf-leader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.bf-leader-head span{display:block;color:#f97316;font-size:10px;font-weight:900;letter-spacing:.12em}.bf-leader-head h2{margin:2px 0 0;color:#0f172a;font-size:18px;font-weight:900;letter-spacing:-.02em}.bf-leader-participants{flex:0 0 auto;border-radius:999px;background:#f8fafc;padding:6px 9px;color:#64748b;font-size:10px;font-weight:800}.bf-leader-note{margin-top:6px;color:#94a3b8;font-size:11px;font-weight:600}.bf-leader-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}.bf-leader-row{display:grid;grid-template-columns:38px minmax(0,1fr) 68px 66px;align-items:center;gap:8px;padding:9px 10px;border-radius:13px;background:#f8fafc;border:1px solid transparent}.bf-leader-row.is-me{background:#fff7ed;border-color:#fed7aa}.bf-leader-rank{text-align:center;font-weight:900;color:#475569}.bf-leader-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;font-size:13px;font-weight:850}.bf-leader-name span{margin-left:6px;border-radius:999px;background:#ffedd5;padding:2px 5px;color:#c2410c;font-size:9px;font-weight:900}.bf-leader-q,.bf-leader-acc{text-align:right;line-height:1.05}.bf-leader-q strong,.bf-leader-acc strong{display:block;color:#0f172a;font-size:14px;font-weight:900}.bf-leader-q small,.bf-leader-acc small{color:#94a3b8;font-size:9px;font-weight:800}.bf-leader-empty,.bf-leader-loading{padding:16px 4px;text-align:center;color:#94a3b8;font-size:12px;font-weight:700}.bf-leader-you-out{margin-top:10px;padding-top:10px;border-top:1px dashed #e2e8f0}.bf-leader-you-out>span{display:block;margin-bottom:5px;color:#94a3b8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:560px){.bf-leader-card{padding:14px;border-radius:18px}.bf-leader-head h2{font-size:16px}.bf-leader-row{grid-template-columns:32px minmax(0,1fr) 58px 56px;padding:8px 7px;gap:5px}.bf-leader-name{font-size:12px}.bf-leader-q strong,.bf-leader-acc strong{font-size:13px}.bf-leader-note{font-size:10px}}

/* Ranking mensual: misma jerarquía y paleta que el ranking diario. */
.bf-leader-periods{display:inline-flex;gap:3px;padding:4px;margin-bottom:16px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}
.bf-leader-periods button{min-height:36px;padding:7px 15px;border:0;border-radius:9px;background:transparent;color:#475569;font-size:12px;font-weight:850;cursor:pointer}
.bf-leader-periods button.is-active{background:#fff;color:#9a3412;box-shadow:0 1px 5px rgba(15,23,42,.12)}
.bf-leader-periods button:focus-visible,.bf-leader-days summary:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.bf-leader-days{margin-top:14px;border-top:1px solid #e2e8f0;padding-top:11px}
.bf-leader-days summary{width:max-content;max-width:100%;padding:5px 2px;color:#9a3412;font-size:12px;font-weight:850;cursor:pointer}
.bf-leader-days ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:6px}
.bf-leader-days li{display:flex;justify-content:space-between;gap:8px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;padding:7px 9px;color:#475569;font-size:11px}
.bf-leader-days li strong{color:#0f172a;font-weight:900}


/* V3.10.14 — admin UI contrast hotfix.
   No depende de utilidades Tailwind opcionales: contraste estable en desktop, tablet y móvil. */
.bf-admin-quickbar,
.bf-admin-tools-panel {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #dbe4ef !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
}
.bf-admin-tools-panel {
  background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
}
.bf-admin-kicker { color: #2563eb !important; }
.bf-admin-title,
.bf-admin-number { color: #0f172a !important; }
.bf-admin-muted { color: #64748b !important; }
.bf-admin-divider { background: #dbe4ef !important; }
.bf-admin-secondary-btn {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #dbe4ef !important;
  box-shadow: none !important;
}
.bf-admin-secondary-btn:hover {
  background: #eef6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

.bf-client-sync-guide {
  margin-top: .65rem;
  padding: .65rem .75rem;
  border: 1px solid #a7f3d0;
  border-radius: .75rem;
  background: #ecfdf5;
  color: #065f46;
  font-size: .68rem;
  line-height: 1.45;
}

.bf-sync-busy {
  cursor: wait !important;
  opacity: .78;
}

.bf-sync-busy::before {
  content: '';
  width: .85rem;
  height: .85rem;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: bf-sync-spin .75s linear infinite;
}

@keyframes bf-sync-spin { to { transform: rotate(360deg); } }
#exportQuestionsCard #exportAllBtn {
  white-space: normal;
  line-height: 1.2;
}
@media (max-width: 639px) {
  .bf-admin-quickbar, .bf-admin-tools-panel {
    padding: 14px !important;
  }
  .bf-admin-tools-panel .flex.flex-wrap.gap-2 > button {
    flex: 1 1 calc(50% - .5rem);
    min-width: 132px;
  }
  .bf-admin-quickbar .bf-admin-secondary-btn {
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   EDITOR DE EXPLICACIONES H13
   Barra agrupada, contraste estable y superficie de escritura separada.
   ═══════════════════════════════════════════════════════════════ */
#modalEditQuestionContent .eq-editor-tabs {
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 1px 1px rgba(15,23,42,.03);
}
#modalEditQuestionContent .eq-editor-tabs [role="tab"] {
  min-height: 32px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
#modalEditQuestionContent #eqToolbar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px !important;
  background: linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%) !important;
  border-color: #dbe3ee !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: hidden;
}
/* El selector por ID gana a .hidden; forzamos ocultación real en vista previa. */
#modalEditQuestionContent #eqToolbar.hidden { display: none !important; }
#modalEditQuestionContent .eq-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
#modalEditQuestionContent .eq-toolbar-row-secondary {
  padding-top: 7px;
  border-top: 1px solid #e2e8f0;
}
#modalEditQuestionContent .eq-tool-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 36px;
  padding: 3px 5px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
#modalEditQuestionContent .eq-tool-group-label {
  margin: 0 4px 0 2px;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
#modalEditQuestionContent .eq-tool-btn {
  min-width: 31px;
  min-height: 30px;
  padding: 5px 7px !important;
  border-radius: 8px;
  color: #334155;
}
#modalEditQuestionContent .eq-tool-labeled {
  gap: 4px;
  padding-inline: 8px !important;
}
#modalEditQuestionContent .eq-color-btn {
  width: 21px;
  height: 21px;
}
#modalEditQuestionContent .eq-tool-history {
  margin-left: auto;
}
#modalEditQuestionContent .eq-tool-clear { color: #64748b; }
#modalEditQuestionContent .eq-tool-remove-callout {
  min-width: 55px;
  color: #be123c;
  white-space: nowrap;
}
#modalEditQuestionContent .eq-tool-remove-callout:not(:disabled):hover {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  box-shadow: inset 0 0 0 1px #fecdd3;
}
#modalEditQuestionContent .eq-tool-btn:disabled,
#modalEditQuestionContent .eq-tool-btn:disabled:hover {
  cursor: not-allowed;
  opacity: .38;
  background: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  transform: none !important;
}
#modalEditQuestionContent .eq-editor-shell {
  position: relative;
  overflow: hidden;
  border: 2px solid #dbe3ee;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #fff;
  box-shadow: 0 8px 22px -18px rgba(15,23,42,.35);
}
#modalEditQuestionContent #editQExplEditor {
  min-height: 260px !important;
  max-height: 500px;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 18px 18px 12px !important;
  color: #1e293b;
  font-size: 15px !important;
  line-height: 1.65 !important;
  box-shadow: none !important;
}
#modalEditQuestionContent #editQExplEditor:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.16) !important;
}
#modalEditQuestionContent .eq-editor-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 13px 8px;
  border-top: 1px solid #eef2f7;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 700;
}
#modalEditQuestionContent .eq-editor-footer kbd {
  padding: 1px 4px;
  border: 1px solid #dbe3ee;
  border-radius: 4px;
  background: #f8fafc;
  color: #64748b;
  font-size: 9px;
}
#modalEditQuestionContent #eqPreviewPanel {
  border-color: #dbe3ee !important;
  background: #fff !important;
  box-shadow: 0 8px 22px -18px rgba(15,23,42,.35);
}
#modalEditQuestionContent #eqSaveBtn {
  background: linear-gradient(135deg,#2563eb,#1d4ed8) !important;
  color: #fff !important;
  border: 0 !important;
}
#modalEditQuestionContent #eqSaveBtn.is-saving { background: linear-gradient(135deg,#64748b,#475569) !important; }
#modalEditQuestionContent #eqSaveBtn.is-saved { background: linear-gradient(135deg,#10b981,#059669) !important; }
#modalEditQuestionContent #eqSaveBtn.is-error { background: linear-gradient(135deg,#e11d48,#be123c) !important; }
#modalEditQuestionContent #eqSaveBtn:disabled { opacity: .82; cursor: wait; }
#modalEditQuestionContent #eqSaveBtn > * { position: relative; z-index: 1; }

@media (max-width: 640px) {
  #modalEditQuestionContent > .sticky { padding: 14px 16px !important; }
  #modalEditQuestionContent > .p-6 { padding: 16px !important; }
  #modalEditQuestionContent .eq-toolbar-row { gap: 5px; }
  #modalEditQuestionContent .eq-tool-group { flex: 1 1 auto; }
  #modalEditQuestionContent .eq-tool-history { margin-left: 0; }
  #modalEditQuestionContent .eq-tool-group-label { font-size: 7px; }
  #modalEditQuestionContent .eq-editor-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
  #modalEditQuestionContent #editQExplEditor { min-height: 220px !important; padding: 14px !important; }
}

.bf-library-more-button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .45);
  outline-offset: 3px;
}

.bf-library-load-anchor {
  scroll-margin-block: 110px;
  outline: 3px solid rgba(37, 99, 235, .52);
  outline-offset: 4px;
  animation: bf-library-load-confirm 480ms cubic-bezier(0, 0, .2, 1);
}

@keyframes bf-library-load-confirm {
  from { box-shadow: 0 0 0 10px rgba(37, 99, 235, .18); }
  to { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-library-load-anchor { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   IPHONE H12 (<= 430px)
   Más densidad en Biblioteca y test sin alterar iPad/escritorio.
   También evita el auto-zoom de Safari y cualquier ancho > viewport.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body,
  #appMain,
  #scrollContainer {
    width: 100%;
    min-width: 0 !important;
    max-width: 100vw;
    overflow-x: hidden !important;
  }
  #appMain > header,
  #appMain > header > div,
  #headerActions,
  #scrollContainer > .max-w-7xl,
  #viewLibrary,
  #libraryList,
  #viewTestRunner,
  #viewTestRunner > *,
  #testCard,
  #testNavBar,
  #testGridPanel {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Safari amplía la página al enfocar controles con texto menor de 16 px. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  #scrollContainer {
    padding: 10px 10px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #viewLibrary {
    gap: 12px !important;
  }
  #libraryList {
    gap: 12px !important;
  }
  #libraryList .bf-book-grid {
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  #libraryList .bf-book-card {
    width: 100%;
    min-width: 0;
    padding: 12px !important;
    border-radius: 18px !important;
    transform: none !important;
  }
  #libraryList .bf-book-cover {
    height: 78px !important;
    margin-bottom: 9px !important;
    border-radius: 13px !important;
  }
  #libraryList .bf-book-admin-actions {
    top: 18px !important;
    right: 18px !important;
    gap: 4px !important;
    max-width: calc(100% - 36px);
  }
  #libraryList .bf-book-admin-actions > button,
  #libraryList .bf-book-admin-actions > label {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 8px !important;
  }
  #libraryList .bf-book-title {
    margin-bottom: 0 !important;
    font-size: .96rem !important;
    line-height: 1.25 !important;
  }
  #libraryList .bf-book-progress {
    margin-top: 7px !important;
    margin-bottom: 7px !important;
  }
  #libraryList .bf-book-progress .mb-1\.5 {
    margin-bottom: 4px !important;
  }
  #libraryList .bf-book-footer {
    margin-top: 4px !important;
  }
  #libraryList .bf-book-test-button {
    min-height: 36px !important;
    padding: 7px 12px !important;
  }

  #libraryList .bf-folder-header {
    gap: 7px !important;
    padding: 7px 2px !important;
    flex-wrap: wrap;
  }
  #libraryList .bf-folder-header > span:nth-of-type(1) {
    max-width: calc(100% - 46px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem !important;
  }
  #libraryList .bf-folder-header > span:nth-of-type(2) {
    order: 4;
    width: 100%;
    padding-left: 39px;
    margin-top: -6px;
    font-size: .66rem !important;
  }
  #libraryList .bf-folder-header > [data-admin-only] {
    gap: 4px !important;
  }
  #libraryList .bf-folder-header > [data-admin-only] button {
    width: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 7px !important;
  }

  /* Test: una sola anchura, controles compactos y navegación siempre visible. */
  #viewTestRunner {
    padding-bottom: 0 !important;
  }
  #viewTestRunner .sticky.top-0 {
    padding-top: 4px !important;
    padding-bottom: 7px !important;
  }
  #viewTestRunner .sticky.top-0 > .flex {
    gap: 5px !important;
    margin-bottom: 6px !important;
  }
  #viewTestRunner .sticky.top-0 .bf-no-scrollbar {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-start;
    overscroll-behavior-x: contain;
  }
  #viewTestRunner .sticky.top-0 .bf-no-scrollbar > button {
    flex: 0 0 36px;
    width: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
  }
  #testCard,
  body.focus-mode #testCard {
    min-height: 0 !important;
    margin-bottom: 8px !important;
    padding: 13px !important;
    border-radius: 17px !important;
  }
  #testCard h2,
  body.focus-mode #testCard h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
    margin-bottom: 12px !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  #testCard img,
  #testCard video,
  #testCard pre,
  #testCard table {
    max-width: 100% !important;
  }
  #testCard .space-y-3 > div {
    min-width: 0;
    min-height: 46px;
    gap: 8px !important;
    padding: 9px 10px !important;
    border-radius: 12px !important;
  }
  #testCard .focus-opt-text,
  body.focus-mode #testCard .focus-opt-text {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: .82rem !important;
    line-height: 1.38 !important;
  }
  #testCard .answer-feedback {
    margin-top: 12px !important;
  }
  #testNavBar {
    position: sticky;
    bottom: calc(59px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    gap: 7px;
    padding: 7px 0 !important;
    background: rgba(248,250,252,.96);
    border-top: 1px solid rgba(148,163,184,.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  #testNavBar button {
    flex: 1 1 0;
    min-width: 0 !important;
    min-height: 44px !important;
    gap: 5px !important;
    padding: 10px 9px !important;
    font-size: .8rem !important;
  }
  #testNavBar button svg {
    width: 17px !important;
    height: 17px !important;
  }
  #testGridPanel {
    margin-top: 10px !important;
    padding: 10px !important;
  }
  #testGridPanel > .flex {
    align-items: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap;
  }
}
/* H29 · fallback breve; la primera y las dos siguientes se precargan. */
.bf-secure-question-loading{min-height:13rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;text-align:center;color:#475569}
.bf-secure-question-loading span{font-size:.8rem;color:#94a3b8}
.bf-secure-question-spinner{width:1.6rem;height:1.6rem;border:3px solid #dbeafe;border-top-color:#2563eb;border-radius:999px;animation:bf-secure-spin .6s linear infinite}
.bf-secure-question-retry{margin-top:.35rem;padding:.7rem 1.1rem;border:0;border-radius:.85rem;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}
.bf-topic-secure-loading{padding:1.25rem;text-align:center;font-size:.82rem;font-weight:700;color:#64748b}

/* H37 · Explicaciones nítidas y coherentes entre editor, test, biblioteca y buscador. */
.bf-explanation-card {
  position: relative;
  padding: 1.125rem 1.25rem 1.25rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dbe5f1;
  border-left: 4px solid #2563eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -24px rgba(15,23,42,.28);
  color: #1e293b;
  opacity: 1;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
  text-shadow: none;
}

.bf-explanation-heading {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .85rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid #dbe5f1;
}

.bf-explanation-title {
  color: #1d4ed8;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bf-explanation-prose {
  color: #1e293b;
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: -.006em;
  opacity: 1;
  filter: none;
  transform: none;
  text-shadow: none;
  overflow-wrap: anywhere;
}

.bf-explanation-prose > .bf-expl,
#eqPreviewPanel > .bf-expl {
  width: 100%;
  max-width: 82ch;
  margin: 0;
  color: inherit;
  line-height: inherit !important;
}

.bf-explanation-prose .bf-expl > div:not([class]),
#editQExplEditor > div:not([class]) {
  margin: .22rem 0;
}

/* H53 · MICRAS: dos capas de explicación y preparación protegida. */
.eq-explanation-layers {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55rem;
}
.eq-layer-button {
  min-height:3.25rem;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.65rem .8rem;
  text-align:left;
  border:2px solid #e2e8f0;
  border-radius:1rem;
  background:#fff;
  color:#64748b;
  transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.eq-layer-button:hover { border-color:#93c5fd; }
.eq-layer-button > span:first-child { font-size:1.05rem; }
.eq-layer-button strong,.eq-layer-button small { display:block; }
.eq-layer-button strong { font-size:.76rem;font-weight:900;line-height:1.15; }
.eq-layer-button small { margin-top:.15rem;font-size:.64rem;font-weight:650;line-height:1.2;color:#94a3b8; }
.eq-layer-button.is-public-active { border-color:#3b82f6;background:#eff6ff;color:#1d4ed8;box-shadow:0 0 0 3px rgba(59,130,246,.09); }
.eq-layer-button.is-private-active { border-color:#f59e0b;background:#fffbeb;color:#92400e;box-shadow:0 0 0 3px rgba(245,158,11,.09); }
.eq-layer-notice { padding:.6rem .75rem;border-radius:.8rem;font-size:.69rem;font-weight:750;line-height:1.4;border:1px solid; }
.eq-layer-notice-public { color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe; }
.eq-layer-notice-private { color:#92400e;background:#fffbeb;border-color:#fde68a; }

.bf-private-explanation-card { margin-top:1rem;border:2px solid #fde68a;border-radius:1rem;background:#fffbeb;overflow:hidden; }
.bf-private-explanation-card .bf-private-explanation-heading { display:flex;align-items:center;gap:.55rem;padding:.75rem 1rem;background:#fef3c7;color:#92400e;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em; }
.bf-private-explanation-card .bf-explanation-prose { padding:1rem;color:#78350f; }

.bf-micras-overlay { position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(15,23,42,.66);backdrop-filter:blur(6px); }
.bf-micras-dialog { width:min(46rem,100%);max-height:calc(100vh - 2rem);overflow:auto;border:1px solid #dbeafe;border-radius:1.6rem;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.28); }
.bf-micras-head { position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.4rem 1.5rem 1.1rem;border-bottom:1px solid #e2e8f0;background:rgba(255,255,255,.97); }
.bf-micras-kicker { color:#2563eb;font-size:.65rem;font-weight:950;letter-spacing:.16em; }
.bf-micras-head h2 { margin:.3rem 0 0;color:#0f172a;font-size:1.35rem;font-weight:950;line-height:1.18; }
.bf-micras-head p { margin:.35rem 0 0;color:#64748b;font-size:.8rem;font-weight:650; }
.bf-micras-close { width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:.8rem;background:#f1f5f9;color:#64748b;font-size:1.55rem;line-height:1; }
.bf-micras-close:hover { background:#e2e8f0;color:#0f172a; }
.bf-micras-body { padding:1.25rem 1.5rem; }
.bf-micras-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem; }
.bf-micras-metrics div { padding:.85rem;border:1px solid #dbe3ee;border-radius:1rem;background:#f8fafc; }
.bf-micras-metrics strong,.bf-micras-metrics span { display:block; }
.bf-micras-metrics strong { color:#0f172a;font-size:1.45rem;font-weight:950; }
.bf-micras-metrics span { margin-top:.2rem;color:#64748b;font-size:.65rem;font-weight:800; }
.bf-micras-plan { margin-top:1rem;padding:1rem 1.1rem;border:1px solid #bfdbfe;border-radius:1rem;background:#eff6ff; }
.bf-micras-plan h3 { color:#1e3a8a;font-size:.83rem;font-weight:950; }
.bf-micras-plan ol { margin:.65rem 0 0 1.15rem;list-style:decimal;color:#334155;font-size:.75rem;line-height:1.6; }
.bf-micras-plan li+li { margin-top:.25rem; }
.bf-micras-notice { margin-top:.75rem;padding:.75rem .9rem;border:1px solid #fde68a;border-radius:.85rem;background:#fffbeb;color:#92400e;font-size:.72rem;font-weight:750; }
.bf-micras-confirm { display:flex;align-items:flex-start;gap:.75rem;margin-top:1rem;padding:1rem;border:2px solid #cbd5e1;border-radius:1rem;cursor:pointer; }
.bf-micras-confirm:has(input:checked) { border-color:#2563eb;background:#eff6ff; }
.bf-micras-confirm input { width:1.2rem;height:1.2rem;margin-top:.05rem;accent-color:#2563eb; }
.bf-micras-confirm strong,.bf-micras-confirm small { display:block; }
.bf-micras-confirm strong { color:#0f172a;font-size:.78rem;font-weight:900; }
.bf-micras-confirm small { margin-top:.25rem;color:#64748b;font-size:.69rem;font-weight:650;line-height:1.45; }
.bf-micras-status { margin-top:.85rem;padding:.8rem .9rem;border-radius:.85rem;background:#f1f5f9;color:#475569;font-size:.72rem;font-weight:700;line-height:1.45; }
.bf-micras-status-success { border:1px solid #a7f3d0;background:#ecfdf5;color:#047857; }
.bf-micras-status-error { border:1px solid #fecaca;background:#fff1f2;color:#be123c; }
.bf-micras-actions { display:flex;justify-content:flex-end;gap:.65rem;padding:1rem 1.5rem 1.35rem;border-top:1px solid #e2e8f0; }
.bf-micras-button { min-height:2.8rem;padding:.7rem 1rem;border-radius:.85rem;background:#f1f5f9;color:#475569;font-size:.78rem;font-weight:900; }
.bf-micras-button:disabled { opacity:.55;cursor:wait; }
.bf-micras-primary { background:#2563eb;color:#fff;box-shadow:0 10px 22px -12px rgba(37,99,235,.8); }
.bf-micras-primary:hover:not(:disabled) { background:#1d4ed8; }
@media (max-width:640px) {
  .eq-explanation-layers,.bf-micras-metrics { grid-template-columns:1fr 1fr; }
  .bf-micras-overlay { padding:.45rem;align-items:flex-end; }
  .bf-micras-dialog { max-height:94vh;border-radius:1.35rem 1.35rem 0 0; }
  .bf-micras-head,.bf-micras-body,.bf-micras-actions { padding-left:1rem;padding-right:1rem; }
  .bf-micras-actions { flex-direction:column-reverse; }
  .bf-micras-button { width:100%; }
}

#editQExplEditor .bf-rich-spacer,
.bf-expl .bf-rich-spacer {
  height: .45rem;
  min-height: .45rem;
  line-height: 0;
}

.bf-explanation-prose strong,
.bf-explanation-prose b,
#editQExplEditor strong,
#editQExplEditor b {
  color: #0f172a;
  font-weight: 750;
}

#modalEditQuestionContent #editQExplEditor,
#modalEditQuestionContent #eqPreviewPanel {
  background: #fff !important;
  color: #1e293b !important;
  font-size: 1rem !important;
  font-weight: 450 !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

@media (max-width: 640px) {
  .bf-explanation-card {
    padding: 1rem;
    border-radius: 14px;
  }
  .bf-explanation-prose,
  #modalEditQuestionContent #editQExplEditor,
  #modalEditQuestionContent #eqPreviewPanel {
    font-size: 1rem !important;
    line-height: 1.62 !important;
  }
  .bf-explanation-prose > .bf-expl,
  #eqPreviewPanel > .bf-expl { max-width: none; }
}
.bf-answer-checking{pointer-events:none}
.bf-answer-checking .space-y-3 > div[onclick]{opacity:.72}
.bf-answer-checking .bf-answer-option-pending{
  opacity:1!important;border-color:#2563eb!important;background:#eff6ff!important;
}
.bf-answer-pending{
  display:flex;align-items:center;gap:.65rem;margin-top:1rem;padding:.75rem 1rem;
  border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;
  color:#1e40af;font-size:.875rem;font-weight:700;
}
.bf-answer-pending__spinner{
  width:1rem;height:1rem;flex:none;border:2px solid #bfdbfe;
  border-top-color:#2563eb;border-radius:50%;animation:bf-secure-spin .7s linear infinite;
}
.bf-answer-retry{margin-top:14px;padding:14px 16px;border:1px solid #fbbf24;border-radius:14px;background:#fffbeb;color:#78350f}
.bf-answer-retry strong{display:block;font-size:14px;font-weight:800}
.bf-answer-retry p{margin-top:4px;font-size:13px;line-height:1.45}
.bf-answer-retry button{min-height:44px;margin-top:10px;padding:9px 15px;border-radius:10px;background:#92400e;color:#fff;font-size:13px;font-weight:800}
.bf-answer-retry button:hover{background:#78350f}
.bf-answer-retry button:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
#testCard .bf-test-answer-option[role="button"]:hover{border-color:#60a5fa;background-color:#eff6ff}
#testCard .bf-test-answer-option:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
@keyframes bf-secure-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bf-secure-question-spinner,.bf-answer-pending__spinner{animation:none}}

.bf-connection-notice{display:flex;align-items:center;gap:13px;padding:12px 24px;border-bottom:1px solid #fcd34d;background:#fffbeb;color:#78350f}
.bf-connection-notice.hidden{display:none}
.bf-connection-notice[data-state="connecting"]{border-color:#bfdbfe;background:#eff6ff;color:#1e40af}
.bf-connection-notice[data-state="error"]{border-color:#fecaca;background:#fff1f2;color:#9f1239}
.bf-connection-notice__symbol{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:currentColor;color:inherit;font-size:0}
.bf-connection-notice__symbol::after{content:"!";color:#fff;font-size:16px;font-weight:900}
.bf-connection-notice[data-state="connecting"] .bf-connection-notice__symbol::after{content:"…"}
.bf-connection-notice__copy{flex:1;min-width:0}
.bf-connection-notice__copy strong{display:block;font-size:13px;font-weight:800}
.bf-connection-notice__copy p{margin-top:2px;font-size:12px;line-height:1.4}
.bf-connection-notice button{flex:none;min-height:40px;padding:8px 12px;border:1px solid currentColor;border-radius:10px;font-size:12px;font-weight:800}
.bf-connection-notice button:hover{background:rgba(255,255,255,.65)}
.bf-connection-notice button:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.bf-connection-notice button:disabled{opacity:.6;cursor:wait}
@media(max-width:640px){.bf-connection-notice{align-items:flex-start;flex-wrap:wrap;gap:8px;padding:10px 14px}.bf-connection-notice__copy{flex-basis:calc(100% - 38px)}.bf-connection-notice button{margin-left:36px}}

/* H69 · Valoración opcional de memoria FSRS (Otra vez · Difícil · Bien · Fácil) */
.bf-fsrs-rate{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:10px}
.bf-fsrs-rate__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.bf-fsrs-rate__title{font-size:13px;font-weight:800;color:#334155}
.bf-fsrs-rate__hint{font-size:12px;font-weight:600;color:#64748b;line-height:1.35}
.bf-fsrs-rate__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bf-fsrs-rate__btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:8px 4px;border-radius:14px;border:2px solid var(--bf-rate-border);background:var(--bf-rate-bg);color:var(--bf-rate-fg);font-family:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,box-shadow .12s ease,transform .08s ease}
.bf-fsrs-rate__btn:hover:not(:disabled){background:var(--bf-rate-hover)}
.bf-fsrs-rate__btn:active:not(:disabled){transform:scale(.97)}
.bf-fsrs-rate__btn:focus-visible{outline:3px solid #6366f1;outline-offset:2px}
.bf-fsrs-rate__btn:disabled{cursor:not-allowed;opacity:.42;filter:saturate(.35)}
.bf-fsrs-rate__btn.is-applied{box-shadow:0 0 0 3px var(--bf-rate-ring);opacity:1;filter:none}
.bf-fsrs-rate__label{font-size:14px;font-weight:800;line-height:1.1;text-align:center}
.bf-fsrs-rate__ivl{font-size:12px;font-weight:700;opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.bf-fsrs-rate__key{position:absolute;top:4px;right:6px;font:700 10px/1 inherit;opacity:.45;border:0;background:none;padding:0}
.bf-fsrs-rate__btn--g1{--bf-rate-bg:#fff1f2;--bf-rate-hover:#ffe4e6;--bf-rate-border:#fecdd3;--bf-rate-fg:#be123c;--bf-rate-ring:#fb7185}
.bf-fsrs-rate__btn--g2{--bf-rate-bg:#fffbeb;--bf-rate-hover:#fef3c7;--bf-rate-border:#fde68a;--bf-rate-fg:#b45309;--bf-rate-ring:#f59e0b}
.bf-fsrs-rate__btn--g3{--bf-rate-bg:#ecfdf5;--bf-rate-hover:#d1fae5;--bf-rate-border:#a7f3d0;--bf-rate-fg:#047857;--bf-rate-ring:#10b981}
.bf-fsrs-rate__btn--g4{--bf-rate-bg:#f0f9ff;--bf-rate-hover:#e0f2fe;--bf-rate-border:#bae6fd;--bf-rate-fg:#0369a1;--bf-rate-ring:#0ea5e9}
@media (hover:none),(max-width:640px){.bf-fsrs-rate__key{display:none}}
@media (max-width:359px){.bf-fsrs-rate__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.bf-fsrs-rate__btn{transition:none}.bf-fsrs-rate__btn:active:not(:disabled){transform:none}}

/* Biblioteca del alumno: muestra el alcance real y deja respirar las portadas. */
.bf-library-overview{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:30px 34px;border:1px solid #233f72;border-radius:24px;
  background:radial-gradient(circle at 92% 8%,rgba(96,165,250,.2),transparent 36%),linear-gradient(130deg,#101a30,#172b52 72%,#1d4ed8);
  box-shadow:0 18px 40px -30px rgba(15,23,42,.9);color:#f8fafc;
}
.bf-library-overview.hidden{display:none}
.bf-library-overview__copy{min-width:0;max-width:58ch}
.bf-library-overview__eyebrow{
  display:block;margin-bottom:9px;color:#93c5fd;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.bf-library-overview h2{font-size:clamp(23px,2.4vw,33px);line-height:1.15;font-weight:850;letter-spacing:-.03em;text-wrap:balance}
.bf-library-overview p{margin-top:8px;color:#cbd5e1;font-size:14px;line-height:1.5;text-wrap:pretty}
.bf-library-overview__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.bf-library-overview__actions button{min-height:44px;padding:10px 15px;border-radius:12px;font-size:13px;font-weight:800;transition:background .16s ease,transform .16s ease}
.bf-library-overview__actions button:hover{transform:translateY(-2px)}
.bf-library-overview__actions button:focus-visible{outline:3px solid #bfdbfe;outline-offset:3px}
.bf-library-overview__primary{background:#fff;color:#173262}
.bf-library-overview__primary:hover{background:#dbeafe}
.bf-library-overview__secondary{border:1px solid rgba(191,219,254,.55);background:rgba(255,255,255,.08);color:#fff}
.bf-library-overview__secondary:hover{background:rgba(255,255,255,.18)}
.bf-library-overview__stats{display:grid;grid-template-columns:repeat(3,minmax(76px,1fr));gap:7px;flex:none}
.bf-library-overview__stats>div{min-width:88px;padding:14px 13px;border:1px solid rgba(191,219,254,.2);border-radius:15px;background:rgba(255,255,255,.09)}
.bf-library-overview__stats dt{margin-top:4px;color:#cbd5e1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bf-library-overview__stats dd{font-size:24px;line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums}

.bf-side-account{margin:0 0 17px;padding:13px;border:1px solid #d9e4f3;border-radius:16px;background:#f8fbff;color:#17243d}
.bf-side-account.hidden{display:none}
.bf-side-account__identity{display:flex;align-items:center;gap:10px;min-width:0}
.bf-side-account__avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#dbeafe;color:#1d4ed8}
.bf-side-account__avatar svg{width:21px;height:21px}
.bf-side-account__person{display:flex;flex-direction:column;min-width:0}
.bf-side-account__person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.3}
.bf-side-account__person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#64748b;font-size:10px}
.bf-side-account__details{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px;margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}
.bf-side-account__details>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.bf-side-account__details span{color:#64748b;font-size:10px;font-weight:700}
.bf-side-account__details strong{overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.3;font-weight:800}
.bf-side-account__note{margin-top:10px;color:#64748b;font-size:10px;line-height:1.35}
.bf-side-account__action{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;margin-top:12px;padding:8px 10px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1d4ed8;text-align:left;font-size:11px;font-weight:800}
.bf-side-account__action:hover{background:#dbeafe}
.bf-side-account__action:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.bf-side-account__action.is-active{border-color:#93c5fd;background:#dbeafe;color:#173f9c}
.bf-side-account[data-cached="true"] #sideAccountAccess{color:#92400e}

.bf-side-account{padding:10px;margin-bottom:12px}
.bf-side-account__action{margin-top:9px;min-height:36px}
.bf-profile{max-width:1080px;margin:0 auto;padding:clamp(16px,3vw,34px)}
.bf-profile__hero{padding:clamp(24px,4vw,42px);border:1px solid #c7d9f4;border-radius:28px;background:linear-gradient(135deg,#f7fbff 0%,#eaf2ff 100%);box-shadow:0 16px 35px -32px #1d4ed8}
.bf-profile__eyebrow{color:#245ce5;font-size:.7rem;font-weight:900;letter-spacing:.13em}
.bf-profile__hero h1{margin:.35rem 0;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;line-height:1.1;color:#10213d}
.bf-profile__hero p{color:#51627c;font-size:.9rem}
.bf-profile__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}
.bf-profile__card{min-width:0;padding:22px;border:1px solid #dce5f2;border-radius:22px;background:#fff;box-shadow:0 13px 30px -30px #0f172a}
.bf-profile__card h2{font-size:1.05rem;font-weight:850;color:#17243d}
.bf-profile__identity{display:grid;grid-template-columns:48px minmax(0,1fr);align-content:start;gap:12px}
.bf-profile__identity>div:nth-child(2){min-width:0}
.bf-profile__identity h2,.bf-profile__identity p{overflow-wrap:anywhere}
.bf-profile__identity p,.bf-profile__activity p,.bf-profile__plan p{margin-top:4px;color:#64748b;font-size:.77rem;line-height:1.5}
.bf-profile__avatar,.bf-profile__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#e7f0ff;color:#245ce5}
.bf-profile__avatar{background:var(--bf-brand-hero,linear-gradient(135deg,#1e3a8a,#2563eb));color:#fff;font-size:1.05rem;font-weight:850;letter-spacing:.02em}
.bf-profile__alias{display:inline-flex;align-items:center;min-height:27px;margin-top:9px;padding:3px 11px;border-radius:999px;background:var(--bf-brand-soft,#eff6ff);color:var(--bf-brand-text,#1d4ed8);font-size:.75rem;font-weight:800}
.bf-profile__identity-forms{grid-column:1/-1;display:grid;gap:14px;min-width:0;margin-top:6px}
.bf-profile__identity-forms form{display:grid;gap:7px;min-width:0}
.bf-profile__identity-forms label{color:#334155;font-size:.875rem;font-weight:800}
.bf-profile__field-action{display:flex;gap:8px;min-width:0}
.bf-profile__field-action input{flex:1;min-width:0;min-height:44px;padding:9px 12px;border:1px solid #94a3b8;border-radius:14px;background:#fff;color:#0f172a;font:600 .875rem Manrope,system-ui,sans-serif}
.bf-profile__field-action button{min-height:44px;padding:9px 14px;border:0;border-radius:14px;background:#2563eb;color:#fff;font:800 .875rem Manrope,system-ui,sans-serif;white-space:nowrap}
.bf-profile__field-action button:hover{background:#1d4ed8}
.bf-profile__field-action button:disabled{opacity:.65;cursor:wait}
.bf-profile__field-action input:focus-visible,.bf-profile__field-action button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.bf-profile__feedback{margin:0!important;color:#64748b!important;font-size:.75rem!important;line-height:1.5}
.bf-profile__feedback.is-error{color:#be123c!important}
.bf-profile__identity dl{grid-column:1/-1;margin-top:10px}
.bf-profile dl>div{display:flex;justify-content:space-between;gap:15px;padding:11px 0;border-top:1px solid #edf1f7}
.bf-profile dt{color:#64748b;font-size:.77rem;font-weight:650}
.bf-profile dd{margin:0;color:#17243d;font-size:.8rem;font-weight:850;text-align:right}
.bf-profile__activity strong{display:block;margin:10px 0 0;color:#123d83;font-size:clamp(2rem,4vw,3rem);font-weight:900;line-height:1}
.bf-profile__activity h2{margin-top:12px}
.bf-profile__card h3{margin-top:18px;color:#17243d;font-size:.875rem;font-weight:850}
.bf-profile__activity-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.bf-profile__activity-metrics span{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid #dce5f2;border-radius:13px;color:#51627c;font-size:.75rem}
.bf-profile__activity-metrics b{color:#17243d;font-size:1rem}
.bf-profile__activity-calendar{display:grid;grid-template-rows:repeat(7,10px);grid-auto-columns:10px;grid-auto-flow:column;gap:3px;max-width:100%;overflow-x:auto;padding:9px 0 5px}
.bf-profile__activity-day{width:10px;height:10px;border-radius:3px;background:#e6edf7}
.bf-profile__activity-day.is-active{background:#2563eb}
.bf-profile__quick-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.bf-profile__quick-links button{min-height:44px;padding:9px 12px;border:1px solid #bfdbfe;border-radius:12px;background:#eff6ff;color:#1d4ed8;font-size:.8rem;font-weight:800}
.bf-profile__quick-links button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.bf-profile__devices{display:grid;gap:7px;margin:10px 0 0;padding:0;list-style:none}
.bf-profile__devices li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 11px;border:1px solid #dce5f2;border-radius:12px;color:#334155;font-size:.78rem;overflow-wrap:anywhere}
.bf-profile__devices small{display:block;margin-top:4px;color:#64748b;font-size:.75rem}
.bf-profile__devices b{flex:none;color:#1d4ed8;font-size:.7rem}
.bf-profile__plan p{margin-top:12px}
.bf-profile__preferences p{margin-top:5px;color:#64748b;font-size:.78rem;line-height:1.5}
.bf-profile__preferences form{display:grid;gap:9px;margin-top:15px}
.bf-profile__preferences label{color:#334155;font-size:.8rem;font-weight:800}
.bf-profile__preferences select{min-height:44px;padding:9px 12px;border:1px solid #94a3b8;border-radius:12px;background:#fff;color:#17243d;font:700 .85rem Manrope,system-ui,sans-serif}
.bf-profile__preferences form>button{min-height:44px;margin-top:4px;padding:9px 13px;border:0;border-radius:12px;background:#2563eb;color:#fff;font:800 .85rem Manrope,system-ui,sans-serif}
.bf-profile__preferences form>button:disabled{opacity:.6;cursor:wait}
.bf-profile__preferences :is(select,button,input):focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.bf-profile__check{display:flex;align-items:center;gap:10px;min-height:44px}
.bf-profile__check input{width:20px;height:20px;accent-color:#2563eb}
.bf-profile__check span{font-size:.83rem}
.bf-profile__settings{display:flex;flex-direction:column;gap:9px}
.bf-profile__settings h2{margin-bottom:5px}
.bf-profile__settings button{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:12px;border:1px solid #dce5f2;border-radius:13px;background:#f8fbff;color:#1e3a66;text-align:left;font-size:.85rem;font-weight:800}
.bf-profile__settings button span:nth-child(2){flex:1}
.bf-profile__settings button:hover{border-color:#9dc2ff;background:#eff6ff}
.bf-profile__settings button:focus-visible{outline:3px solid #245ce5;outline-offset:2px}
@media(max-width:700px){.bf-profile__grid{grid-template-columns:1fr}.bf-profile__card{padding:18px}}
@media(max-width:480px){.bf-profile__field-action{flex-direction:column}.bf-profile__field-action button{width:100%}}
html[data-bf-font-size="large"]{font-size:17px}
html[data-bf-font-size="extra"]{font-size:18px}
html.bf-reduce-motion *,html.bf-reduce-motion *::before,html.bf-reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}

#libraryList .bf-folder-header--student{gap:10px;padding:16px 14px;border-radius:18px}
#libraryList .bf-folder-header--student:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
#libraryList .bf-folder-header--featured{flex-wrap:wrap;margin-bottom:16px;background:#eff6ff;border:1px solid #bfdbfe}
#libraryList .bf-folder-header--featured>span:nth-of-type(1){font-size:20px;line-height:1.2;letter-spacing:-.015em}
#libraryList .bf-folder-header--featured>span:nth-of-type(2){color:#334155;font-size:12px}
#libraryList .bf-folder-description{flex-basis:100%;margin:0 0 0 44px;color:#475569;font-size:13px;line-height:1.4}

#libraryList .bf-book-grid--student{gap:18px}
#libraryList .bf-book-card--student{min-width:0;min-height:304px;padding:17px;border-color:#dbe4ee;border-radius:20px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
#libraryList .bf-book-card--student:hover{box-shadow:0 12px 28px rgba(15,23,42,.1)}
#libraryList .bf-book-card--student .bf-book-cover{height:160px;margin-bottom:15px;border-radius:14px}
#libraryList .bf-book-card--student .bf-book-title{min-height:2.5em;margin-bottom:8px;font-size:18px;line-height:1.25;text-wrap:balance;overflow-wrap:anywhere}
#libraryList .bf-book-card--student .bf-book-progress{margin-top:4px;margin-bottom:14px}
#libraryList .bf-book-card--student .bf-book-progress span{font-size:11px;color:#475569}
#libraryList .bf-book-card--student .bf-book-test-button{min-height:44px;padding:9px 13px;font-size:12px;white-space:nowrap}
#libraryList .bf-book-card--student .bf-book-test-button:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}

@media (max-width:760px){
  .bf-library-overview{align-items:stretch;flex-direction:column;gap:17px;padding:20px}
  .bf-library-overview__stats{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .bf-library-overview__stats>div{min-width:0;padding:11px 8px}
  .bf-library-overview__stats dd{font-size:21px}
}
@media (max-width:430px){
  #viewLibrary{gap:16px!important}
  .bf-library-overview{border-radius:18px;padding:18px}
  .bf-library-overview p{font-size:13px}
  .bf-library-overview__actions{margin-top:15px}
  .bf-library-overview__actions button{flex:1}
  #libraryList .bf-folder-header--student{padding:12px 8px!important}
  #libraryList .bf-folder-header--featured>span:nth-of-type(1){font-size:17px!important}
  #libraryList .bf-folder-description{order:5;margin-left:38px;font-size:12px}
  #libraryList .bf-book-card--student{padding:16px!important;border-radius:18px!important;min-height:0}
  #libraryList .bf-book-card--student .bf-book-cover{height:128px!important;margin-bottom:12px!important}
  #libraryList .bf-book-card--student .bf-book-title{font-size:17px!important;min-height:0}
  #libraryList .bf-book-card--student .bf-book-test-button{min-height:44px!important}
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL 2 · CABECERA DEL INFORME
   Color de marca para cualquier nota; verde solo para «Excelente».
   ═══════════════════════════════════════════════════════════════ */
.bf-report-hero { background: var(--bf-brand-hero, linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%)); color: #fff; }
.bf-report-hero--excelente { background: linear-gradient(135deg, #065f46 0%, #059669 100%); }
.bf-report-hero--repasar { background: linear-gradient(135deg, #1e293b 0%, #1e3a8a 100%); }
.bf-report-hero__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: #fff;
}
.bf-report-hero__icon svg { width: 28px; height: 28px; }
#reportScoreValue { color: #fff; -webkit-text-fill-color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   VISUAL 1 · AVISOS EN MÓVIL
   Abajo, justo encima de la barra inferior (y del aviso de instalar si se
   ve), para no tapar el título ni la pregunta. El más reciente, más abajo.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #toastContainer {
    top: auto !important;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.bf-install-banner-visible #toastContainer {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + var(--bf-install-banner-h, 0px)) !important;
  }
  #toastContainer > * {
    width: 100%;
    max-width: 480px;
    animation-name: toastInUp;
  }
  @keyframes toastInUp {
    0%   { transform: translateY(14px) scale(.96); opacity: 0; }
    100% { transform: translateY(0) scale(1);      opacity: 1; }
  }
}


/* ═══════════════════════════════════════════════════════════════
   H73 · MOVIMIENTO FUNCIONAL
   Entradas cortas y baratas (solo opacity/transform), iguales en modo
   ligero y completo. «Reducir movimiento» las deja a 0 con la regla global.
   ═══════════════════════════════════════════════════════════════ */
/* Vistas: la animación arranca sola al dejar de estar ocultas (display:none
   → visible), sin esperar a JavaScript. Solo opacidad: no crea bloque
   contenedor para los elementos fijos de la vista. */
#viewLibrary:not(.hidden),
#viewBook:not(.hidden),
#viewTopic:not(.hidden),
#viewDashboard:not(.hidden),
#viewStats:not(.hidden),
#viewProgress:not(.hidden),
#viewDedup:not(.hidden),
#viewDaily:not(.hidden),
#viewTimed:not(.hidden),
#viewSearch:not(.hidden),
#viewTestRunner:not(.hidden),
#viewExams:not(.hidden),
#viewRanking:not(.hidden),
#viewArena:not(.hidden),
#viewAgenda:not(.hidden),
#viewTestSetup:not(.hidden),
#viewInterleave:not(.hidden),
#viewRecall:not(.hidden) {
  animation: bfViewIn 180ms ease-out both;
}
@keyframes bfViewIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Siguiente pregunta: la tarjeta entra con un leve desplazamiento. */
#testCard.bf-q-enter {
  animation: bfQuestionIn 180ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bfQuestionIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MARCA ÚNICA (decisión del propietario, 27-09-2026)
   Un solo color de marca, ni naranja ni rojo: el azul que ya usa la app.
   Verde y rojo quedan solo para acierto/fallo y avisos de riesgo.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bf-brand: #2563eb;
  --bf-brand-strong: #1d4ed8;
  --bf-brand-deep: #1e3a8a;
  --bf-brand-light: #93c5fd;
  --bf-brand-soft: #eff6ff;
  --bf-brand-hero: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}
.bf-brand-hero { background: var(--bf-brand-hero) !important; }
.bf-brand-cta {
  background: linear-gradient(135deg, var(--bf-brand) 0%, var(--bf-brand-strong) 100%) !important;
  box-shadow: 0 12px 35px -8px rgba(37, 99, 235, .5) !important;
}
/* Utilidades azules que usan las secciones pasadas a la marca única y que el
   CSS precompilado no traía (lo comprueba scripts/audit-utility-classes.mjs). */
.text-blue-50{--tw-text-opacity:1;color:rgb(239 246 255/var(--tw-text-opacity,1))}
.text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity,1))}
.text-blue-200{--tw-text-opacity:1;color:rgb(191 219 254/var(--tw-text-opacity,1))}
.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}
.border-blue-300{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}
.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}
.border-t-blue-500{--tw-border-opacity:1;border-top-color:rgb(59 130 246/var(--tw-border-opacity,1))}
.from-blue-400{--tw-gradient-from:#60a5fa var(--tw-gradient-from-position);--tw-gradient-to:rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-blue-600{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}
.hover\:bg-blue-50\/50:hover{background-color:rgb(239 246 255/.5)}
.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}
.hover\:border-blue-300:hover{--tw-border-opacity:1;border-color:rgb(147 197 253/var(--tw-border-opacity,1))}
.hover\:border-blue-400:hover{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}
.focus\:ring-blue-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(96 165 250/var(--tw-ring-opacity,1))}
/* ═══════════════════════════════════════════════════════════════
   VISUAL 4 · ESCRITORIO
   Test en dos columnas desde 1280 px: pregunta a la izquierda (líneas
   más cortas, mejor lectura) y panel de preguntas fijo a la derecha,
   siempre a la vista. El modo concentración mantiene una sola columna.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  body:not(.focus-mode) #viewTestRunner:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    column-gap: 24px;
    align-items: start;
  }
  body:not(.focus-mode) #viewTestRunner > .sticky.top-0 { grid-column: 1 / -1; }
  body:not(.focus-mode) #viewTestRunner > #testCard,
  body:not(.focus-mode) #viewTestRunner > #testNavBar { grid-column: 1; }
  body:not(.focus-mode) #viewTestRunner > #testGridPanel {
    grid-column: 2;
    grid-row: 2 / span 2;
    position: sticky;
    top: 92px;
    margin-top: 0;
    max-height: calc(100vh - 132px);
    max-height: calc(100dvh - 132px);
    overflow-y: auto;
  }
}
/* Monitores muy anchos: algo más de ancho útil (1280 → 1440 px). */
@media (min-width: 1800px) {
  #scrollContainer > .max-w-7xl { max-width: 1440px; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUAL 5 · PORTADAS
   Sin imagen, la portada muestra las iniciales del libro sobre su tono azul.
   ═══════════════════════════════════════════════════════════════ */
.bf-book-cover__mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .92);
  font-size: 44px; font-weight: 900; letter-spacing: -.04em;
  text-shadow: 0 2px 12px rgba(15, 23, 42, .25);
  pointer-events: none; user-select: none;
}
/* Si la imagen llega después (portada guardada aparte), las iniciales no se superponen. */
.bf-book-cover:has(> img) .bf-book-cover__mark { display: none; }
.bf-book-thumb__mark {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #fff; font-size: 18px; font-weight: 900; letter-spacing: -.03em;
}
/* ═══════════════════════════════════════════════════════════════
   VISUAL 6 · ICONOS EN VEZ DE EMOJIS
   ═══════════════════════════════════════════════════════════════ */
.bf-stats-ic { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; }
.bf-stats-kpi-icon .bf-stats-ic, .bf-stats-advice-icon .bf-stats-ic { width: 20px; height: 20px; }
.bf-stats-kpi-icon, .bf-stats-advice-icon { color: #2563eb; }
.bf-stats-kpi.tone-orange .bf-stats-kpi-icon { color: #ea580c; }
.bf-leader-medal {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  font-size: 13px; font-weight: 900; color: #fff;
}
.bf-leader-medal.is-1 { background: linear-gradient(135deg, #ca8a04, #facc15); }
.bf-leader-medal.is-2 { background: linear-gradient(135deg, #64748b, #cbd5e1); }
.bf-leader-medal.is-3 { background: linear-gradient(135deg, #92400e, #d97706); }
.bf-recall-step-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin: 0 auto 6px;
  border-radius: 12px; background: #eff6ff; color: #2563eb;
}
.bf-recall-step-icon svg { width: 22px; height: 22px; }
/* ═══════════════════════════════════════════════════════════════
   VISUAL 7 · PANTALLAS VACÍAS
   Qué pasa y qué hacer, con un botón de marca.
   ═══════════════════════════════════════════════════════════════ */
.bf-empty-state {
  display: grid; justify-items: center; gap: 8px;
  padding: 36px 20px; text-align: center;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 24px;
}
.bf-empty-state__icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px;
  border-radius: 18px; background: #eff6ff; color: #2563eb;
}
.bf-empty-state__icon svg { width: 28px; height: 28px; }
.bf-empty-state__title { margin: 0; font-size: 18px; font-weight: 900; color: #0f172a; }
.bf-empty-state__text { max-width: 420px; margin: 0; font-size: 14px; line-height: 1.5; color: #64748b; }
.bf-empty-state__action {
  margin-top: 8px; min-height: 44px; padding: 10px 18px;
  border: 0; border-radius: 14px; background: #2563eb; color: #fff;
  font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 22px -14px rgba(29, 78, 216, .8);
}
.bf-empty-state__action:hover { background: #1d4ed8; }
.bf-empty-state__action:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   VISUAL 8 · MODO OSCURO (FASE 1: PANTALLA DEL TEST)
   Solo mientras el test está en pantalla. Acierto y fallo mantienen
   verde y rojo, adaptados al fondo oscuro.
   ═══════════════════════════════════════════════════════════════ */
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) { color-scheme: dark; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #appMain, html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #scrollContainer { background: #0b1220 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #appBg { display: none !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) header.no-print { background: #0f172a !important; border-color: #1e293b !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #crumbTitle { color: #e2e8f0 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #crumbContext { color: #64748b !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) header.no-print #headerMenuBtn { color: #cbd5e1 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #mobileBottomNav { background: rgba(15, 23, 42, .97) !important; border-color: #1e293b !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #mobileBottomNav .mob-nav-btn { color: #94a3b8 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #mobileBottomNav .mob-nav-btn.active { background: #1e293b !important; color: #93c5fd !important; }

html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .sticky.top-0 { background: rgba(11, 18, 32, .95) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner #testActionBar { background: #111a2e !important; border-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner #testCard, html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-white, html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner #testGridPanel, html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate, html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-card {
  background: #111a2e !important; border-color: #24324d !important; box-shadow: none !important;
}
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.bg-slate-50, .bg-slate-100) { background: #16213a !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-slate-200 { background: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.text-slate-900, .text-slate-800, .text-slate-700), html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose { color: #e5edf8 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.text-slate-600, .text-slate-500) { color: #a8b4c7 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.text-slate-400, .text-slate-300) { color: #7c8aa3 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.border-slate-200, .border-slate-100) { border-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner [class*="hover:bg-slate-50"]:hover { background: #1a2742 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .border-slate-300 { border-color: #3b4b68 !important; }

html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-emerald-50 { background: rgba(16, 185, 129, .14) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-rose-50 { background: rgba(244, 63, 94, .14) !important; }
/* Ámbar = aviso y rojo = error/fallo: cada uno conserva su color en oscuro. */
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-amber-50 { background: rgba(245, 158, 11, .12) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bg-red-50 { background: rgba(239, 68, 68, .14) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.text-emerald-900, .text-emerald-700, .text-emerald-600) { color: #6ee7b7 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.text-rose-900, .text-rose-800, .text-rose-700, .text-rose-600, .text-red-700, .text-red-600) { color: #fda4af !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .text-amber-600 { color: #fcd34d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.border-emerald-200) { border-color: rgba(16, 185, 129, .4) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner :is(.border-rose-200, .border-red-200, .border-red-100) { border-color: rgba(244, 63, 94, .4) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate button { background: #16213a !important; }

html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .qcell.qcell-neutral { background: #16213a !important; border-color: #24324d !important; color: #cbd5e1 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner #testThemeBtn[aria-pressed="true"] { color: #93c5fd !important; }
/* Texto heredado (las opciones no llevan clase de color) y barras propias */
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner { color: #e5edf8; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner #testNavBar { background: #0b1220 !important; border-color: #1e293b !important; box-shadow: none !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) header.no-print button:not([class*="bg-blue"]):not([class*="bg-indigo"]) {
  background: #16213a !important; border-color: #24324d !important; color: #cbd5e1 !important;
}
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) header.no-print .bg-white { background: #16213a !important; border-color: #24324d !important; }

/* Panel FSRS y explicación: texto con color propio que heredaba el tema claro. */
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__title { color: #e5edf8 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__hint { color: #a8b4c7 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__btn--g1 { --bf-rate-fg: #fda4af; --bf-rate-border: rgba(244, 63, 94, .45); --bf-rate-hover: #22203a; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__btn--g2 { --bf-rate-fg: #fcd34d; --bf-rate-border: rgba(245, 158, 11, .45); --bf-rate-hover: #22263a; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__btn--g3 { --bf-rate-fg: #6ee7b7; --bf-rate-border: rgba(16, 185, 129, .45); --bf-rate-hover: #16283a; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__btn--g4 { --bf-rate-fg: #7dd3fc; --bf-rate-border: rgba(14, 165, 233, .45); --bf-rate-hover: #16263f; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-fsrs-rate__btn { color: var(--bf-rate-fg) !important; border-color: var(--bf-rate-border) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-title { color: #93c5fd !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose :is(strong, b) { color: #f8fafc !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-rich-math, code.bf-code) { color: inherit !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl code.bf-code { background: #16213a !important; border-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl .bf-rich-arrow { color: #a8b4c7 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl hr { border-top-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-h, .bf-section) { background: rgba(37, 99, 235, .16) !important; border-color: rgba(96, 165, 250, .35) !important; border-left-color: #3b82f6 !important; color: #bfdbfe !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-h-ok, .bf-section-solution, .bf-section-memory, .bf-callout-ok) { background: rgba(16, 185, 129, .14) !important; border-color: rgba(16, 185, 129, .4) !important; border-left-color: #10b981 !important; color: #6ee7b7 !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-h-warn, .bf-section-exam, .bf-callout-warn) { background: rgba(245, 158, 11, .12) !important; border-color: rgba(245, 158, 11, .4) !important; border-left-color: #f59e0b !important; color: #fcd34d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-h-danger, .bf-section-review, .bf-section-traps, .bf-callout-danger) { background: rgba(244, 63, 94, .14) !important; border-color: rgba(244, 63, 94, .4) !important; border-left-color: #f43f5e !important; color: #fda4af !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-section-theory, .bf-section-outline, .bf-section-comparison, .bf-section-sources) { background: rgba(14, 165, 233, .14) !important; border-color: rgba(14, 165, 233, .4) !important; border-left-color: #0ea5e9 !important; color: #7dd3fc !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-section-solution + p, .bf-section-memory + p) { background: rgba(16, 185, 129, .1) !important; border-color: rgba(16, 185, 129, .3) !important; color: inherit !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-section-review + ul > li, .bf-section-traps + ul > li) { background: rgba(244, 63, 94, .08) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl .bf-section-exam + ul > li { background: rgba(245, 158, 11, .08) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl .bf-section-exam + ul strong { color: #fcd34d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl .bf-section-traps + ul strong { color: #fda4af !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-expl :is(.bf-option-review li, .bf-study-steps) { background: #16213a !important; border-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose :is(.bf-rich-table-wrap, .bf-table-wrap, table) { background: #0f1a2e !important; border-color: #24324d !important; box-shadow: none !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose :is(th, td) { border-color: #24324d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose tbody tr:nth-child(even) { background: #16213a !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-explanation-prose tbody td:first-child { background: rgba(37, 99, 235, .14) !important; color: #bfdbfe !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-private-explanation-card { background: rgba(245, 158, 11, .08) !important; border-color: rgba(245, 158, 11, .4) !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-private-explanation-card .bf-private-explanation-heading { background: rgba(245, 158, 11, .16) !important; color: #fcd34d !important; }
html.bf-dark-test body:has(#viewTestRunner:not(.hidden)) #viewTestRunner .bf-private-explanation-card .bf-explanation-prose { color: #fde68a !important; }

/* Confirmaciones del alumno: misma superficie y jerarquía que los modales de la app. */
#modalContent.bf-confirm-shell { max-width: 30rem; }
.bf-confirm { padding: clamp(1.5rem, 4vw, 2rem); color: #0f172a; }
.bf-confirm__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .85rem; background: #eff6ff; color: #1d4ed8; font-size: 1.25rem; font-weight: 900; }
.bf-confirm__title { margin: 1rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; font-weight: 800; }
.bf-confirm__message { margin: 0; color: #475569; font-size: .925rem; line-height: 1.55; }
.bf-confirm__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.bf-confirm__button { min-height: 44px; padding: .65rem 1rem; border-radius: .8rem; border: 1px solid transparent; font-size: .875rem; font-weight: 800; cursor: pointer; }
.bf-confirm__button--cancel { background: white; border-color: #cbd5e1; color: #334155; }
.bf-confirm__button--cancel:hover { background: #f8fafc; }
.bf-confirm__button--accept { background: #2563eb; color: white; }
.bf-confirm__button--accept:hover { background: #1d4ed8; }
.bf-confirm__button--danger { background: #e11d48; }
.bf-confirm__button--danger:hover { background: #be123c; }
.bf-confirm__button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
@media (max-width: 480px) {
  .bf-confirm__actions { flex-direction: column-reverse; }
  .bf-confirm__button { width: 100%; }
}

/* Entrada al libro: trabajo visible antes del primer panel, sin animación decorativa. */
.bf-book-loading {
  display: flex; align-items: center; gap: 14px; min-height: 92px;
  padding: 20px; border: 1px solid #bfdbfe; border-radius: 18px;
  background: #eff6ff; color: #1e3a8a;
}
.bf-book-loading strong { display: block; font-size: 14px; font-weight: 800; }
.bf-book-loading p { margin: 3px 0 0; font-size: 12px; color: #475569; }
.bf-book-loading__spinner {
  width: 24px; height: 24px; flex: none; border: 3px solid #bfdbfe;
  border-top-color: #2563eb; border-radius: 50%;
  animation: bf-book-progress-spin .7s ease-in-out infinite;
}
.bf-book-loading__preview { display: grid; gap: 8px; margin-top: 12px; }
.bf-book-loading__preview span { display: block; height: 44px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.bf-book-progress-status {
  margin: 0 0 8px; padding: 8px 11px; border: 1px solid #bfdbfe;
  border-radius: 10px; background: #eff6ff; color: #1d4ed8;
  font-size: 11px; font-weight: 700;
}
.bf-book-progress-status--ready { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.bf-book-progress-status--error, .bf-book-loading--error { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.bf-book-loading--error button { margin-left: 8px; text-decoration: underline; font-weight: 800; }
.bf-book-progress-retry { margin-left: 6px; color: inherit; font-weight: 800; text-decoration: underline; }
.bf-book-progress-retry:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.bf-book-topic-progress__pending { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; color: #64748b; font-size: 10px; font-weight: 700; }
.bf-book-topic-progress__track { flex: 1; max-width: 80px; height: 6px; border-radius: 99px; background: #dbeafe; }
@keyframes bf-book-progress-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bf-book-loading__spinner { animation: none; } }