/* ==========================================================================
   Estudia.tech — Tema "Hoja de respuestas" para app.php y admin (2026-11-05)
   Va junto con js/et-theme.js (paleta oscura de Tailwind). Todo está bajo
   html.et-dark para ganar especificidad a Tailwind CDN y a los <style> de
   cada página sin tocar su marcado ni su JavaScript.
   ========================================================================== */

html.et-dark {
  color-scheme: dark;
  --void: #03060c;
  --ink: #060c17;
  --panel: #08111f;
  --panel-2: #0c1729;
  --line: rgba(150, 178, 226, .13);
  --line-2: rgba(150, 178, 226, .26);
  --paper: #edf1f7;
  --dim: #b4bfd2;
  --mute: #8592aa;
  --signal: #ffc531;
  --signal-rgb: 255, 197, 49;
  --signal-hi: #ffd76a;
  --on-signal: #120d00;
  --ok: #3ee0a1;
  --bad: #ff6e5e;
  --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.45, .45, 1);

  /* Variables que usan los estilos en línea de app/admin (gana a :root) */
  --brand-50: #0e1b30; --brand-100: #132544; --brand-200: #1c3459; --brand-300: #2b4a7a;
  --brand-400: #3a63a4; --brand-500: #ffc531; --brand-600: #ffc531; --brand-700: #0c1a30;
  --brand-800: #08111f; --brand-900: #050a14;
  --brand-400-rgb: 58, 99, 164; --brand-500-rgb: 255, 197, 49; --brand-600-rgb: 255, 197, 49;
  --brand-700-rgb: 255, 197, 49; --brand-800-rgb: 8, 17, 31; --brand-900-rgb: 5, 10, 20;
  --gold-50: #1b1d18; --gold-100: #2a2a1c; --gold-200: #ffe39a; --gold-300: #ffd76a; --gold-400: #ffc531;
  --gold-500: #f5b820; --gold-600: #e8a812;
  --gold-200-rgb: 255, 227, 154; --gold-300-rgb: 255, 215, 106; --gold-400-rgb: 255, 197, 49; --gold-500-rgb: 245, 184, 32;
}

html.et-dark body {
  background-color: var(--void) !important;
  background-image:
    radial-gradient(1100px 520px at 85% -10%, rgba(var(--signal-rgb), .06), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(58, 99, 164, .10), transparent 60%);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--f-sans) !important;
  -webkit-font-smoothing: antialiased;
}
html.et-dark ::selection { background: var(--signal); color: var(--on-signal); }
html.et-dark :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
html.et-dark * { scrollbar-color: #2c3c58 transparent; }
html.et-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.et-dark ::-webkit-scrollbar-thumb { background: #1b2a42; border-radius: 10px; border: 2px solid var(--void); }
html.et-dark ::-webkit-scrollbar-track { background: transparent; }

/* ---------- superficies ---------- */
html.et-dark .bg-white { background-color: var(--panel); }
html.et-dark .hover\:bg-white:hover { background-color: var(--panel-2); }
html.et-dark .to-white { --tw-gradient-to: var(--panel) var(--tw-gradient-to-position) !important; }
html.et-dark .via-white { --tw-gradient-stops: var(--tw-gradient-from), var(--panel) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html.et-dark .from-white { --tw-gradient-from: var(--panel) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.et-dark .bg-gray-900, html.et-dark .bg-gray-800 { background-color: #01040a !important; color: var(--paper); }
html.et-dark .border-gray-900 { border-color: #01040a; }
html.et-dark .bg-black\/50 { background-color: rgba(1, 3, 8, .72); }
html.et-dark .glass { background: rgba(3, 6, 12, .86) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.et-dark .shadow-sm, html.et-dark .shadow, html.et-dark .shadow-md { box-shadow: none; }
html.et-dark .shadow-lg, html.et-dark .shadow-xl, html.et-dark .shadow-2xl { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7); }

/* esquinas técnicas: menos "burbuja de app genérica", más instrumento */
html.et-dark .rounded-3xl { border-radius: 14px; }
html.et-dark .rounded-2xl { border-radius: 10px; }
html.et-dark .rounded-xl { border-radius: 7px; }
html.et-dark .rounded-lg { border-radius: 5px; }

/* ---------- tipografía ---------- */
html.et-dark h1, html.et-dark h2, html.et-dark h3, html.et-dark .font-black, html.et-dark .font-extrabold { letter-spacing: -.01em; }
html.et-dark .font-black { font-weight: 850; font-stretch: 80%; }
html.et-dark h1.font-black, html.et-dark h2.font-black, html.et-dark .text-2xl.font-black, html.et-dark .text-3xl.font-black, html.et-dark .text-4xl.font-black { text-transform: uppercase; font-stretch: 74%; line-height: .98; }
html.et-dark .uppercase.tracking-wider, html.et-dark .uppercase.tracking-wide, html.et-dark .uppercase.tracking-widest, html.et-dark .font-mono, html.et-dark .tabular-nums { font-family: var(--f-mono); }
html.et-dark .uppercase.tracking-wider, html.et-dark .uppercase.tracking-wide, html.et-dark .uppercase.tracking-widest { letter-spacing: .08em; font-weight: 500; }
html.et-dark .text-navy-800, html.et-dark .text-navy-900 { color: var(--paper); }
html.et-dark h2.text-navy-900 { text-transform: uppercase; font-weight: 850; font-stretch: 76%; line-height: .98; }
html.et-dark .bg-navy-900 { background-color: rgba(3, 6, 12, .9); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.et-dark .gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--mute); }
html.et-dark a { text-underline-offset: 3px; }

/* ---------- marca ---------- */
html.et-dark .et-mark-wrap { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--signal); flex: none; }
html.et-dark .et-mark { width: 26px; height: 26px; }

/* ---------- acciones principales: dorado de señal ---------- */
html.et-dark .btn-primary, html.et-dark .btn-mint, html.et-dark .btn-gold-app,
html.et-dark .modal-btn.primary, html.et-dark .modal-btn.success-btn {
  background: var(--signal) !important; color: var(--on-signal) !important; border: 0;
  box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0);
}
html.et-dark .btn-primary:hover, html.et-dark .btn-mint:hover, html.et-dark .btn-gold-app:not(:disabled):hover,
html.et-dark .modal-btn.primary:hover, html.et-dark .modal-btn.success-btn:hover {
  background: var(--signal-hi) !important; box-shadow: 0 14px 40px -14px rgba(var(--signal-rgb), .6) !important;
}
/* superficies doradas (marca) → texto tinta legible */
html.et-dark :is(.bg-brand-400, .bg-brand-500, .bg-brand-600, .bg-brand-700, .bg-gold-300, .bg-gold-400, .from-brand-500, .from-brand-600, .from-brand-700, .from-brand-800, .from-gold-300, .from-gold-400, .btn-primary, .btn-mint, .btn-gold-app, .nav-btn.active),
html.et-dark :is(.bg-brand-400, .bg-brand-500, .bg-brand-600, .bg-brand-700, .bg-gold-300, .bg-gold-400, .from-brand-500, .from-brand-600, .from-brand-700, .from-brand-800, .from-gold-300, .from-gold-400, .btn-primary, .btn-mint, .btn-gold-app, .nav-btn.active) :is(.text-white, .text-white\/60, .text-white\/65, .text-white\/70, .text-white\/80, .text-brand-100, .text-brand-200, i, svg) {
  color: var(--on-signal) !important;
}
html.et-dark :is(.from-brand-500, .from-brand-600, .from-brand-700, .from-brand-800) .bg-white\/20,
html.et-dark :is(.from-brand-500, .from-brand-600, .from-brand-700, .from-brand-800) .bg-white\/10 { background-color: rgba(18, 13, 0, .12); }
html.et-dark .text-brand-900 { color: var(--on-signal); }

/* ---------- formularios ---------- */
html.et-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.et-dark select, html.et-dark textarea {
  background-color: var(--void); color: var(--paper); border-color: var(--line-2);
}
html.et-dark input::placeholder, html.et-dark textarea::placeholder { color: #66728a; }
html.et-dark input:focus, html.et-dark select:focus, html.et-dark textarea:focus {
  border-color: var(--signal) !important; box-shadow: 0 0 0 3px rgba(var(--signal-rgb), .18) !important; outline: none;
}
html.et-dark input[type="checkbox"], html.et-dark input[type="radio"], html.et-dark input[type="range"] { accent-color: var(--signal); }
html.et-dark option { background: var(--panel); color: var(--paper); }

/* ---------- tablas (admin) ---------- */
html.et-dark table thead th, html.et-dark table th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
html.et-dark table tbody tr:hover { background-color: rgba(255, 255, 255, .02); }
html.et-dark td.font-mono, html.et-dark .font-mono { color: var(--dim); }

/* ---------- modales (app) ---------- */
html.et-dark .modal-overlay { background: rgba(1, 3, 8, .72); }
html.et-dark .modal-box, html.et-dark .et-console {
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2px 14px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 2px 14px no-repeat,
    var(--panel) !important;
  border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  color: var(--paper);
}
html.et-dark .modal-title { color: var(--paper); text-transform: uppercase; font-stretch: 80%; font-weight: 850; letter-spacing: -.005em; }
html.et-dark .modal-msg { color: var(--dim); }
html.et-dark .modal-btn { border-radius: 5px; }
html.et-dark .modal-btn.secondary { background: #111e33; color: var(--paper); border: 1px solid var(--line-2); }
html.et-dark .modal-btn.secondary:hover { background: #1b2a42; }
html.et-dark .modal-icon { border-radius: 50%; }
html.et-dark .modal-icon.success, html.et-dark .modal-icon.info { background: rgba(var(--signal-rgb), .12); color: var(--signal); box-shadow: inset 0 0 0 1.5px rgba(var(--signal-rgb), .5); }
html.et-dark .modal-icon.error { background: rgba(255, 110, 94, .12); color: var(--bad); box-shadow: inset 0 0 0 1.5px rgba(255, 110, 94, .5); }
html.et-dark .modal-icon.warning { background: rgba(245, 158, 11, .12); color: #fbbf24; box-shadow: inset 0 0 0 1.5px rgba(245, 158, 11, .5); }

/* ---------- navegación de la app ---------- */
html.et-dark body > nav.sticky { border-bottom: 1px solid var(--line) !important; }
html.et-dark body > nav.sticky .text-lg.font-bold { font-weight: 800; font-stretch: 112%; color: var(--paper); }
html.et-dark #userAvatar { background: rgba(var(--signal-rgb), .12); border-color: rgba(var(--signal-rgb), .5); color: var(--signal); font-family: var(--f-mono); }
html.et-dark #userMenu { background: var(--panel); border-color: var(--line-2); }

/* ---------- hero del dashboard: hoja de respuestas de fondo ---------- */
html.et-dark #viewDashboard > .rounded-3xl:first-child {
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(var(--signal-rgb), .10), transparent 60%),
    linear-gradient(160deg, #060c17 0%, #08111f 70%, #0c1a30 100%) !important;
  border: 1px solid var(--line);
  isolation: isolate;
}
html.et-dark #viewDashboard > .rounded-3xl:first-child > .absolute.inset-0 {
  opacity: 1 !important;
  background-image: radial-gradient(circle, transparent 5.2px, rgba(170, 190, 225, .16) 5.6px, rgba(170, 190, 225, .16) 6.6px, transparent 7px) !important;
  background-size: 21px 21px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%) !important;
  mask-image: linear-gradient(90deg, transparent 30%, #000 75%) !important;
}
@media (max-width: 640px) {
  html.et-dark #viewDashboard > .rounded-3xl:first-child > .absolute.inset-0 {
    -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 45%) !important;
    mask-image: linear-gradient(200deg, #000 0%, transparent 45%) !important;
  }
}
html.et-dark #viewDashboard > .rounded-3xl:first-child h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .5rem; }
html.et-dark #viewDashboard > .rounded-3xl:first-child h1 #dashName { color: var(--signal); }
html.et-dark #dashFreePill { background: var(--signal) !important; color: var(--on-signal) !important; }

/* ---------- onboarding ---------- */
html.et-dark #onboardingOverlay {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(var(--signal-rgb), .10), transparent 60%),
    var(--void) !important;
}
html.et-dark .ob-card, html.et-dark .ob-area { border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); border-radius: 8px; backdrop-filter: none; }
html.et-dark .ob-card:hover, html.et-dark .ob-area:hover { border-color: rgba(var(--signal-rgb), .7); background: rgba(var(--signal-rgb), .04); }
html.et-dark .ob-card.selected, html.et-dark .ob-area.selected { border-color: var(--signal); background: rgba(var(--signal-rgb), .08); box-shadow: none; }
html.et-dark .ob-card-icon { border-radius: 50%; color: var(--signal); background: transparent; border: 1.5px solid rgba(var(--signal-rgb), .5); }
html.et-dark .ob-check, html.et-dark .ob-area-num { background: var(--signal); color: var(--on-signal); border-radius: 50%; font-family: var(--f-mono); }
html.et-dark .ob-area .ob-area-num { background: transparent; color: var(--signal); box-shadow: inset 0 0 0 1.5px var(--signal); }
html.et-dark .ob-area.selected .ob-area-num { background: var(--signal); color: var(--on-signal); }
html.et-dark .ob-chip, html.et-dark .ob-chip-multi, html.et-dark .ob-scale-btn { background: var(--panel); border: 1px solid var(--line-2); color: var(--dim); border-radius: 6px; }
html.et-dark .ob-chip.selected, html.et-dark .ob-chip-multi.selected, html.et-dark .ob-scale-btn.selected { background: rgba(var(--signal-rgb), .1); border-color: var(--signal); color: var(--paper); box-shadow: none; }

/* ---------- reactivo (vista de examen) ---------- */
html.et-dark #questionCard {
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 16px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2px 16px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) bottom right / 2px 16px no-repeat,
    var(--panel) !important;
  border-color: var(--line) !important; border-radius: 6px !important;
}
html.et-dark #questionBadge { background: transparent !important; color: var(--mute) !important; font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding-left: 0; }
html.et-dark #quizMeta { color: var(--signal) !important; font-family: var(--f-mono); letter-spacing: .08em; }
html.et-dark #quizProgress { color: var(--paper) !important; font-family: var(--f-mono); }
html.et-dark #quizTimer { color: var(--signal) !important; font-family: var(--f-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
html.et-dark #questionText { font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.38; font-weight: 600; font-stretch: 96%; color: var(--paper); }
html.et-dark #quizProgressBar { background: var(--signal) !important; border-radius: 0 !important; }
html.et-dark #quizProgressBar.progress-fill { box-shadow: 0 0 18px rgba(var(--signal-rgb), .45); }
html.et-dark #viewQuiz .h-2\.5 { height: 4px; border-radius: 0; background: #1b2a42; }
html.et-dark .quiz-option {
  border: 1px solid var(--line-2) !important; border-radius: 5px !important; background: rgba(255, 255, 255, .015);
  color: var(--paper); min-height: 58px;
}
html.et-dark .quiz-option:hover:not(.disabled) { border-color: rgba(var(--signal-rgb), .75) !important; background: rgba(var(--signal-rgb), .05); box-shadow: none; transform: translateX(3px); }
html.et-dark .quiz-option > span:first-child {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  background: transparent !important; color: var(--dim) !important;
  border: 1.5px solid var(--line-2); font-family: var(--f-mono); font-size: 12px;
  transition: box-shadow .45s var(--spring), border-color .25s, color .25s, transform .45s var(--spring);
}
html.et-dark .quiz-option:hover:not(.disabled) > span:first-child { border-color: var(--signal); color: var(--signal) !important; }
html.et-dark .quiz-option .text-gray-700 { color: var(--paper); }
html.et-dark .quiz-option.correct { border-color: var(--ok) !important; background: rgba(62, 224, 161, .08) !important; }
html.et-dark .quiz-option.correct > span:first-child { border-color: var(--ok); color: var(--void) !important; box-shadow: inset 0 0 0 15px var(--ok); transform: scale(1.08); }
html.et-dark .quiz-option.wrong { border-color: var(--bad) !important; background: rgba(255, 110, 94, .08) !important; }
html.et-dark .quiz-option.wrong > span:first-child { border-color: var(--bad); color: var(--void) !important; box-shadow: inset 0 0 0 15px var(--bad); }
html.et-dark .quiz-option.disabled { opacity: .42; }
html.et-dark .quiz-option.correct.disabled, html.et-dark .quiz-option.wrong.disabled { opacity: 1; }
html.et-dark #explanationPanel { border-left: 2px solid var(--signal) !important; border-radius: 4px !important; }

/* ---------- resultados ---------- */
html.et-dark #viewResults circle[stroke="#e5e7eb"] { stroke: #1b2a42; }
html.et-dark #resultTitle { text-transform: uppercase; font-stretch: 74%; font-size: clamp(2rem, 6vw, 3.2rem); line-height: .95; }
html.et-dark .review-question:hover { box-shadow: none; border-color: var(--line-2); }

/* ---------- tarjetas y detalles ---------- */
html.et-dark .level-glow { animation: etGlow 4s ease-in-out infinite; }
@keyframes etGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--signal-rgb), 0); } 50% { box-shadow: 0 0 34px -10px rgba(var(--signal-rgb), .28); } }
html.et-dark details > summary { cursor: pointer; }
html.et-dark .loader-dots span { background: var(--signal) !important; }

/* ---------- admin ---------- */
html.et-dark.et-admin body > header { background: rgba(3, 6, 12, .9) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line) !important; }
html.et-dark.et-admin body > header h1 { text-transform: uppercase; font-stretch: 80%; font-weight: 850; font-size: 1.15rem; letter-spacing: 0; }
html.et-dark.et-admin body > nav { background: rgba(3, 6, 12, .9) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line) !important; }
html.et-dark .nav-btn { border-radius: 4px !important; color: var(--mute); }
html.et-dark .nav-btn:hover { color: var(--paper) !important; background: rgba(255, 255, 255, .04) !important; }
html.et-dark .nav-btn.active { background: var(--signal) !important; color: var(--on-signal) !important; box-shadow: none; }
html.et-dark .stat-card {
  position: relative; border-color: var(--line) !important;
  background:
    linear-gradient(var(--signal), var(--signal)) top left / 10px 2px no-repeat,
    linear-gradient(var(--signal), var(--signal)) top left / 2px 10px no-repeat,
    var(--panel) !important;
}
html.et-dark .stat-card .text-2xl, html.et-dark .stat-card .text-3xl { font-family: var(--f-sans); font-stretch: 72%; font-weight: 850; font-variant-numeric: tabular-nums; }
html.et-dark .stat-card > .text-xs:first-child { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
html.et-dark.et-admin main h2, html.et-dark.et-admin main h3.font-bold { letter-spacing: -.005em; }

/* sólidos dorados de índigo/violeta → texto tinta */
html.et-dark :is(.bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-violet-400, .bg-violet-500, .bg-violet-600, .from-indigo-500, .from-violet-500, .from-violet-600),
html.et-dark :is(.bg-indigo-400, .bg-indigo-500, .bg-indigo-600, .bg-violet-400, .bg-violet-500, .bg-violet-600, .from-indigo-500, .from-violet-500, .from-violet-600) :is(.text-white, i) { color: var(--on-signal) !important; }


@media (prefers-reduced-motion: reduce) {
  html.et-dark *, html.et-dark *::before, html.et-dark *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}