/*
  estilos.css
  Estilos visuales del Simulador de Bases de Datos: paleta de colores (modo oscuro por
  defecto y variante clara), tipografía, layout de las tres pantallas (inicio, examen,
  resultados) y de cada tipo de pregunta (opción múltiple, completar, relacionar,
  diagrama, conectar, abierta). No contiene lógica ni datos: solo presentación.

  Estética inspirada en urielortiz.xyz: fondo casi negro con glows morados radiales,
  tarjetas de vidrio (glass) con borde translúcido sutil, acento morado en dos tonos
  (--accent / --accent-2), tipografía Geist / Geist Mono, y botones "píldora" con
  glow morado al pasar el mouse. Todas las clases y selectores se mantienen igual
  que antes: solo cambian los valores, para no tocar la lógica de app.js.
*/

:root{
  color-scheme: dark light;
  /* Paleta oscura (por defecto): casi negro con acento morado, como urielortiz.xyz. */
  --bg:#08080c;
  --surface:#121218;
  --surface-2:#191922;
  --ink:#f4f4f7;
  --ink-muted:#a1a1ae;
  --border:#ffffff17;
  --accent:#a855f7;
  --accent-2:#9333ea;
  --accent-ink:#ffffff;
  --accent-soft:#a855f724;
  --glow-1:#a855f72e;
  --glow-2:#9333ea1f;
  --danger:#f87171;
  --danger-soft:#f8717124;
  --success:#34d399;
  --success-soft:#34d39924;
  --warning:#fbbf24;
  --warning-soft:#fbbf2424;
  --t-cia:#34d399;
  --t-avr:#fb7185;
  --t-ia:#60a5fa;
  --t-hackers:#fbbf24;
  --t-leyes:#818cf8;
  --t-eh:#2dd4bf;
  --t-defensa:#9ca3af;
  --t-escenarios:#e879f9;
  --t-fundamentos:#22d3ee;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 24px 60px -28px rgba(168,85,247,.28);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    /* Variante clara, por si el sistema del usuario prefiere modo claro. */
    --bg:#f7f6fb; --surface:#ffffff; --surface-2:#f0eef7; --ink:#18151f; --ink-muted:#55516a; --border:#17142114;
    --accent:#9333ea; --accent-2:#7e22ce; --accent-ink:#ffffff; --accent-soft:#9333ea1a;
    --glow-1:#a855f71f; --glow-2:#9333ea14;
    --danger:#dc2626; --danger-soft:#dc26261a; --success:#059669; --success-soft:#0596691a;
    --warning:#d97706; --warning-soft:#d977061a;
    --t-cia:#059669; --t-avr:#e11d48; --t-ia:#2563eb; --t-hackers:#d97706; --t-leyes:#4f46e5; --t-eh:#0d9488; --t-defensa:#475569; --t-escenarios:#c026d3; --t-fundamentos:#0891b2;
    --shadow:0 1px 2px rgba(16,20,33,.06), 0 24px 54px -30px rgba(88,40,140,.22);
  }
}
:root[data-theme="light"]{
  --bg:#f7f6fb; --surface:#ffffff; --surface-2:#f0eef7; --ink:#18151f; --ink-muted:#55516a; --border:#17142114;
  --accent:#9333ea; --accent-2:#7e22ce; --accent-ink:#ffffff; --accent-soft:#9333ea1a;
  --glow-1:#a855f71f; --glow-2:#9333ea14;
  --danger:#dc2626; --danger-soft:#dc26261a; --success:#059669; --success-soft:#0596691a;
  --warning:#d97706; --warning-soft:#d977061a;
  --t-cia:#059669; --t-avr:#e11d48; --t-ia:#2563eb; --t-hackers:#d97706; --t-leyes:#4f46e5; --t-eh:#0d9488; --t-defensa:#475569; --t-escenarios:#c026d3; --t-fundamentos:#0891b2;
  --shadow:0 1px 2px rgba(16,20,33,.06), 0 24px 54px -30px rgba(88,40,140,.22);
}
:root[data-theme="dark"]{
  --bg:#08080c; --surface:#121218; --surface-2:#191922; --ink:#f4f4f7; --ink-muted:#a1a1ae; --border:#ffffff17;
  --accent:#a855f7; --accent-2:#9333ea; --accent-ink:#ffffff; --accent-soft:#a855f724;
  --glow-1:#a855f72e; --glow-2:#9333ea1f;
  --danger:#f87171; --danger-soft:#f8717124; --success:#34d399; --success-soft:#34d39924;
  --warning:#fbbf24; --warning-soft:#fbbf2424;
  --t-cia:#34d399; --t-avr:#fb7185; --t-ia:#60a5fa; --t-hackers:#fbbf24; --t-leyes:#818cf8; --t-eh:#2dd4bf; --t-defensa:#9ca3af; --t-escenarios:#e879f9; --t-fundamentos:#22d3ee;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 24px 60px -28px rgba(168,85,247,.28);
}

*{box-sizing:border-box;}
html,body{margin:0;}
html{background:var(--bg); min-height:100%;}
body{
  min-height:100vh;
  /* Dos glows morados radiales sobre el fondo casi negro, igual que el hero de urielortiz.xyz.
     "fixed" + unidades de viewport (en vez de % del alto total de la página) es a propósito:
     esta pantalla de inicio mide ~900px y la de resultados con 72 preguntas puede medir más de
     20 000px, y un % posicionado sobre ese alto tan variable dejaba el glow "cortado" o fuera de
     lugar según la pantalla. Ancladas al viewport, se ven siempre igual sin importar el alto real. */
  background:
    radial-gradient(65vmax 45vmax at 12% -8%, var(--glow-2) 0%, transparent 62%),
    radial-gradient(70vmax 48vmax at 100% -10%, var(--glow-1) 0%, transparent 58%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink); font-family:'Geist', system-ui, -apple-system, sans-serif;
  padding-inline:16px; padding-block:20px 40px; display:flex; flex-direction:column; align-items:center;
}
@media (max-width:640px){
  /* En celular, background-attachment:fixed puede parpadear al hacer scroll con inercia (iOS);
     ahí se pinta una sola vez con el documento (scroll) y el tamaño ya es suficientemente grande. */
  body{background-attachment:scroll;}
}
h1,h2,h3{font-family:'Geist', system-ui, sans-serif; font-weight:800; letter-spacing:-.025em; margin:0;}
.mono{font-family:'Geist Mono', ui-monospace, monospace;}
.eyebrow{font-family:'Geist', system-ui, sans-serif; text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; color:var(--accent); font-weight:700;}
a{color:var(--accent-2);}
button{font-family:inherit; cursor:pointer; transition:transform .16s cubic-bezier(.23,1,.32,1), box-shadow .2s ease-out, border-color .2s ease-out, background-color .2s ease-out, color .2s ease-out;}
button:active{transform:scale(.97);}
button:disabled:active{transform:none;}
button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}

/* Hover solo para punteros finos (mouse/trackpad): evita estados "pegados" al tocar en celular. */
@media (hover:hover) and (pointer:fine){
  .opt-btn:not(.locked):hover, .conn-btn:not(.locked):hover, .sg-btn:not(.locked):hover, .vf-group-choice:not(.locked):hover{border-color:var(--accent-2);}
  .navbtn:not(:disabled):hover, .toolbtn:hover, .finish-btn-top:hover, .palette-toggle:hover, .pnum:hover{
    border-color:var(--accent-2); color:var(--ink);
  }
  .start-btn:hover, .check-btn:not(:disabled):hover, .next-btn:hover, .retry-btn:not(.done):hover{
    background:var(--accent-2); box-shadow:0 0 26px -4px color-mix(in srgb, var(--accent) 65%, transparent); /* glow morado, como los CTA de urielortiz.xyz */
  }
}
.start-btn:active, .check-btn:active, .next-btn:active, .retry-btn:active{box-shadow:var(--shadow);}

/* Entrada suave y consistente para tarjetas, retroalimentación y pantallas nuevas.
   Se desactiva por completo si el usuario prefiere menos movimiento (ver el final del archivo). */
@keyframes rise-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
[hidden]{display:none!important;}

.app{width:100%; max-width:780px; display:flex; flex-direction:column; gap:16px;}
.screen-in{animation:rise-in .22s ease-out;}

/* ---------- START ---------- */
.hero{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:20px; padding:28px 24px 26px; box-shadow:var(--shadow);}
.hero h1{font-size:clamp(28px,6.5vw,40px); text-wrap:balance; margin-top:8px; letter-spacing:-.03em;}
.hero p.lead{color:var(--ink-muted); font-size:15px; line-height:1.55; max-width:56ch; margin-top:10px;}
.fact-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.fact{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:10px 14px; flex:1 1 140px; min-width:120px;}
.fact .num{font-family:'Geist Mono', ui-monospace, monospace; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink);}
.fact .lbl{font-size:12px; color:var(--ink-muted); margin-top:2px;}
.topics{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.topic-chip{font-size:12.5px; padding:6px 11px; border-radius:999px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-muted); display:flex; align-items:center; gap:6px;}
.topic-chip .dot{width:7px; height:7px; border-radius:50%; flex:none;}
.start-btn{margin-top:22px; width:100%; border:none; border-radius:999px; padding:15px 18px; background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:700; font-family:'Geist', system-ui, sans-serif; letter-spacing:-.01em; box-shadow:0 18px 34px -16px color-mix(in srgb, var(--accent) 65%, transparent);}
.start-note{font-size:12.5px; color:var(--ink-muted); margin-top:10px; text-align:center;}
.rules{margin-top:20px; border-top:1px solid var(--border); padding-top:16px;}
.rules h3{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); font-family:'Geist', system-ui, sans-serif; font-weight:700;}
.rules ul{margin:10px 0 0; padding-left:18px; font-size:13.5px; color:var(--ink-muted); line-height:1.7;}

/* ---------- EXAM ---------- */
/* Barra flotante translúcida: el contenido se desliza debajo, como una nav con glass. */
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); border:1px solid var(--border); border-radius:16px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:var(--shadow); flex-wrap:wrap;}
@media (prefers-reduced-transparency: reduce){
  .topbar, .hero, .qcard, .palette-wrap, .score-hero, .retry-cta, .bars{
    background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}
.timer{font-family:'Geist Mono', ui-monospace, monospace; font-weight:600; font-size:17px; font-variant-numeric:tabular-nums; padding:6px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; gap:7px;}
.timer.low{color:var(--danger); background:var(--danger-soft); border-color:transparent;}
.mode-pill{font-family:'Geist', system-ui, sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.06em; padding:7px 11px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-weight:700;}
.progress-txt{font-size:12.5px; color:var(--ink-muted); font-family:'Geist Mono', ui-monospace, monospace;}
.finish-btn-top{border:1px solid var(--border); background:var(--surface-2); color:var(--ink); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600;}

.palette-wrap{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow);}
.palette-toggle{width:100%; display:flex; justify-content:space-between; align-items:center; border:none; background:none; color:var(--ink); font-size:12.5px; font-weight:600; padding:2px 0;}
.palette-toggle .chev{transition:transform .15s;}
.palette-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
.palette-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:6px; margin-top:10px;}
.pnum{aspect-ratio:1; border-radius:9px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-muted); font-family:'Geist Mono', ui-monospace, monospace; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center;}
.pnum.p-correct{background:var(--success-soft); color:var(--success); border-color:var(--success);}
.pnum.p-incorrect{background:var(--danger-soft); color:var(--danger); border-color:var(--danger);}
.pnum.p-partial{background:var(--warning-soft); color:var(--warning); border-color:var(--warning);}
.pnum.current{outline:2px solid var(--accent-2); outline-offset:2px; animation:rb-pulse 2.2s infinite;}
@keyframes rb-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);} 70%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);}}

.qcard{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:18px; padding:22px 20px 20px; box-shadow:var(--shadow); min-height:260px;}
.qcard.rise-in{animation:rise-in .22s ease-out;}
.qmeta{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.qtag{font-family:'Geist', system-ui, sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:4px 9px; border-radius:999px; font-weight:700;}
.qtypepill{font-size:11px; color:var(--ink-muted); font-family:'Geist Mono', ui-monospace, monospace;}
.qprompt{font-size:17px; line-height:1.5; margin-top:14px; text-wrap:balance; font-weight:500;}
.qbody{margin-top:18px; display:flex; flex-direction:column; gap:10px;}

.opt-btn{text-align:left; width:100%; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:13px 14px; font-size:14.5px; color:var(--ink); display:flex; gap:10px; align-items:flex-start;}
.opt-btn .letter{font-family:'Geist Mono', ui-monospace, monospace; font-weight:700; font-size:12px; color:var(--ink-muted); background:var(--surface); border:1px solid var(--border); border-radius:7px; width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.opt-btn.locked{pointer-events:none;}
.opt-btn.correct-answer{border-color:var(--success); background:var(--success-soft);}
.opt-btn.correct-answer .letter{background:var(--success); color:#08080c; border-color:var(--success);}
.opt-btn.wrong-answer{border-color:var(--danger); background:var(--danger-soft);}
.opt-btn.wrong-answer .letter{background:var(--danger); color:#08080c; border-color:var(--danger);}

.fill-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.fill-input{flex:1 1 220px; border:1.5px solid var(--border); border-radius:14px; padding:12px 13px; font-size:15px; background:var(--surface-2); color:var(--ink);}
.fill-input:disabled{opacity:.85;}
.fill-input.correct-answer{border-color:var(--success);}
.fill-input.wrong-answer{border-color:var(--danger);}
.fill-hint{font-size:12px; color:var(--ink-muted);}

/* Bloques de ocho incisos: verdadero/falso y completar con banco de palabras. */
.group-row{border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:12px;}
.group-row.row-correct{border-color:var(--success); background:color-mix(in srgb, var(--success-soft) 72%, var(--surface-2));}
.group-row.row-incorrect{border-color:var(--danger); background:color-mix(in srgb, var(--danger-soft) 72%, var(--surface-2));}
.group-statement{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.45;}
.group-number{width:24px; height:24px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--ink-muted); font-family:'Geist Mono',ui-monospace,monospace; font-size:11px; font-weight:700;}
.vf-group-row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;}
.vf-group-controls{display:flex; gap:7px;}
.vf-group-choice{min-width:92px; border:1px solid var(--border); border-radius:999px; padding:8px 11px; background:var(--surface); color:var(--ink); font-size:12px; font-weight:600;}
.vf-group-choice.selected{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
.vf-group-choice.correct-answer{border-color:var(--success); background:var(--success-soft); color:var(--success);}
.vf-group-choice.wrong-answer{border-color:var(--danger); background:var(--danger-soft); color:var(--danger);}
.vf-group-choice.locked{cursor:default;}
.fill-group-bank{display:flex; flex-wrap:wrap; gap:7px; padding:11px 12px; border:1px dashed var(--accent); border-radius:14px; background:var(--accent-soft);}
.fill-group-bank-title{width:100%; color:var(--ink-muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.fill-group-term{border:1px solid var(--border); border-radius:999px; padding:5px 9px; background:var(--surface); color:var(--ink); font-family:'Geist Mono',ui-monospace,monospace; font-size:12px;}
.fill-group-sentence{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13.5px; line-height:1.5;}
.fill-group-select{min-width:145px; max-width:100%; border:1.5px solid var(--border); border-radius:9px; padding:8px 9px; background:var(--surface); color:var(--ink); font-size:13px;}
.fill-group-select:disabled{opacity:.9;}
.group-item-feedback{grid-column:1/-1; margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12px; line-height:1.45;}
.group-item-feedback.ok{color:var(--success);}
.group-item-feedback.bad{color:var(--danger);}
.review-group-line{padding-block:6px; border-bottom:1px dashed var(--border);}
.review-group-line:last-child{border-bottom:none;}
@media (max-width:620px){
  .vf-group-row{grid-template-columns:1fr;}
  .vf-group-controls{width:100%;}
  .vf-group-choice{flex:1; min-width:0;}
}

.match-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; border:1px solid var(--border); background:var(--surface-2); border-radius:14px; padding:11px 12px;}
@media (max-width:480px){ .match-row{grid-template-columns:1fr;} }
.match-row.row-correct{border-color:var(--success);}
.match-row.row-incorrect{border-color:var(--danger);}
.match-l{font-size:13.5px; line-height:1.4;}
.match-sel, select.diagram-sel{width:100%; border:1.5px solid var(--border); border-radius:9px; padding:9px 10px; font-size:13.5px; background:var(--surface); color:var(--ink);}
.match-sel:disabled, select.diagram-sel:disabled{opacity:.85;}
.row-mark{font-family:'Geist Mono', ui-monospace, monospace; font-weight:700; font-size:12px; margin-top:4px; display:block;}
.row-mark.ok{color:var(--success);} .row-mark.bad{color:var(--danger);}

.open-ta{width:100%; min-height:120px; border:1.5px solid var(--border); border-radius:14px; padding:13px 14px; font-size:14.5px; font-family:inherit; background:var(--surface-2); color:var(--ink); resize:vertical;}
.open-ta:disabled{opacity:.85;}
.model-box{margin-top:12px; font-size:13px; padding:11px 13px; border-radius:13px; background:var(--accent-soft); color:var(--ink); line-height:1.5; border:1px solid transparent; animation:rise-in .16s ease-out;}
.model-box b{color:var(--accent);}
.sg-row{display:flex; gap:10px; margin-top:12px;}
.sg-btn{flex:1; border-radius:999px; padding:12px; font-weight:600; font-size:13.5px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink);}
.sg-btn.chosen-yes{background:var(--success-soft); border-color:var(--success); color:var(--success);}
.sg-btn.chosen-no{background:var(--danger-soft); border-color:var(--danger); color:var(--danger);}
.sg-btn.locked{pointer-events:none;}

.diagram-wrap{display:flex; justify-content:center; padding:6px 0 4px;}
.tri-box{position:relative; width:100%; max-width:300px; aspect-ratio:1/0.92;}
.tri-shape{position:absolute; inset:0; clip-path:polygon(50% 4%, 96% 94%, 4% 94%); background:linear-gradient(160deg, var(--accent-soft), var(--surface-2)); border:1px solid var(--border);}
.tri-dot{position:absolute; width:11px; height:11px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--surface), 0 0 14px -2px var(--accent);}
.tri-sel-wrap{position:absolute; transform:translate(-50%,-50%); width:min(46%,168px); text-align:center;}
.tri-sel-wrap.top{top:4%; left:50%;}
.tri-sel-wrap.bl{top:96%; left:6%; transform:translate(0,-50%);}
.tri-sel-wrap.br{top:96%; left:94%; transform:translate(-100%,-50%);}
@media (max-width:420px){ .tri-sel-wrap{width:auto; min-width:0;} .tri-sel-wrap.bl{left:2%;} .tri-sel-wrap.br{left:98%;} }
select.diagram-sel{font-size:12px; padding:7px 6px;}

.layers{display:flex; flex-direction:column; gap:8px; width:100%; max-width:420px; margin:0 auto;}
.layer{border-radius:13px; padding:10px 12px; border:1px solid var(--border); display:flex; align-items:center; gap:10px;}
.layer .lbl{font-size:11.5px; font-family:'Geist Mono', ui-monospace, monospace; color:var(--ink-muted); flex:none; width:82px;}
.layer:nth-child(1){width:100%; background:color-mix(in srgb, var(--t-defensa) 16%, var(--surface-2));}
.layer:nth-child(2){width:88%; margin-inline:auto; background:color-mix(in srgb, var(--t-defensa) 24%, var(--surface-2));}
.layer:nth-child(3){width:76%; margin-inline:auto; background:color-mix(in srgb, var(--t-defensa) 32%, var(--surface-2));}
.layer:nth-child(4){width:64%; margin-inline:auto; background:color-mix(in srgb, var(--t-defensa) 42%, var(--surface-2));}
.layer.row-correct{outline:2px solid var(--success);}
.layer.row-incorrect{outline:2px solid var(--danger);}

.connect-hint{font-size:12px; color:var(--ink-muted); margin-bottom:4px;}
.connect-wrap{display:flex; gap:8px; align-items:flex-start;}
.connect-col{flex:1; display:flex; flex-direction:column; gap:7px; min-width:0;}
.conn-btn{width:100%; text-align:left; border:1.5px solid var(--border); background:var(--surface-2); border-radius:13px; padding:9px 10px; font-size:12.5px; line-height:1.35; color:var(--ink); font-family:inherit;}
.conn-btn.armed{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent) inset;}
.conn-btn.locked{pointer-events:none;}
.conn-btn.correct-answer{border-color:var(--success); background:var(--success-soft);}
.conn-btn.wrong-answer{border-color:var(--danger); background:var(--danger-soft);}
.conn-mark{display:block; margin-top:4px; font-family:'Geist Mono', ui-monospace, monospace; font-weight:700; font-size:10.5px;}

.check-btn{width:100%; border:none; border-radius:999px; padding:13px; font-weight:600; font-size:14.5px; background:var(--accent); color:var(--accent-ink); margin-top:8px; box-shadow:0 16px 30px -16px color-mix(in srgb, var(--accent) 60%, transparent);}
.check-btn:disabled{opacity:.4; background:var(--surface-2); color:var(--ink-muted); box-shadow:none;}
.next-btn{width:100%; border:none; border-radius:999px; padding:13px; font-weight:700; font-size:14.5px; background:var(--accent); color:var(--accent-ink); margin-top:12px; box-shadow:0 16px 30px -16px color-mix(in srgb, var(--accent) 60%, transparent);}

.feedback-panel{border-radius:14px; padding:12px 14px; margin-top:14px; font-size:13.5px; line-height:1.5; animation:rise-in .16s ease-out;}
.feedback-panel.correct{background:var(--success-soft); color:var(--success);}
.feedback-panel.incorrect{background:var(--danger-soft); color:var(--danger);}
.feedback-panel.partial{background:var(--warning-soft); color:var(--warning);}
.fb-title{font-weight:700; font-family:'Geist', system-ui, sans-serif; text-transform:uppercase; font-size:12px; letter-spacing:.04em;}
.fb-explain{color:var(--ink); margin-top:6px; font-size:13px; line-height:1.5;}

.navrow{display:flex; gap:10px; margin-top:4px; align-items:center;}
.navbtn{border-radius:999px; padding:12px 16px; font-size:13.5px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--ink);}
.navbtn:disabled{opacity:.4;}
.navbtn.ghost{background:none; color:var(--ink-muted);}

/* ---------- RESULTS ---------- */
.retry-banner{background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent); border-radius:14px; padding:12px 14px; font-size:13.5px; font-weight:600;}
.score-hero{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:20px; padding:26px 22px; text-align:center; box-shadow:var(--shadow);}
.score-big{font-family:'Geist Mono', ui-monospace, monospace; font-size:56px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; transition:color .3s ease-out;}
.score-msg{margin-top:8px; font-size:14.5px; color:var(--ink-muted);}
.score-sub{margin-top:14px; font-size:12.5px; color:var(--ink-muted);}

.retry-cta{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:18px; padding:20px; box-shadow:var(--shadow); text-align:center;}
.retry-cta .rc-num{font-family:'Geist Mono', ui-monospace, monospace; font-size:30px; font-weight:700; color:var(--danger);}
.retry-cta.done .rc-num{color:var(--success);}
.retry-cta .rc-lbl{font-size:13px; color:var(--ink-muted); margin-top:2px;}
.retry-btn{margin-top:14px; width:100%; border:none; border-radius:999px; padding:14px; font-weight:700; font-size:15px; background:var(--accent); color:var(--accent-ink); box-shadow:0 18px 32px -16px color-mix(in srgb, var(--accent) 60%, transparent);}
.retry-btn.done{background:var(--success-soft); color:var(--success); box-shadow:none;}

.bars{background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid var(--border); border-radius:18px; padding:18px 18px 8px; box-shadow:var(--shadow);}
.bars h3{font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-muted); margin-bottom:14px; font-family:'Geist', system-ui, sans-serif; font-weight:700;}
.bar-row{margin-bottom:14px;}
.bar-top{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px;}
.bar-top .pct{font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:600;}
.bar-track{height:9px; border-radius:6px; background:var(--surface-2); overflow:hidden;}
.bar-fill{height:100%; border-radius:6px; transition:width .5s ease;}

.review-toolbar{display:flex; gap:10px;}
.toolbtn{flex:1; border-radius:999px; padding:13px; font-size:14px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--ink);}

.review-group{display:flex; flex-direction:column; gap:10px;}
.review-topic-h{display:flex; align-items:center; gap:8px; font-family:'Geist', system-ui, sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); font-weight:700; margin:18px 2px 2px;}
.review-topic-h .dot{width:9px; height:9px; border-radius:50%;}
.rcard{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 16px 15px; box-shadow:var(--shadow);}
.rcard-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.rstatus{flex:none; font-family:'Geist', system-ui, sans-serif; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;}
.rstatus.correct{background:var(--success-soft); color:var(--success);}
.rstatus.incorrect{background:var(--danger-soft); color:var(--danger);}
.rstatus.partial{background:var(--warning-soft); color:var(--warning);}
.rstatus.unanswered{background:var(--surface-2); color:var(--ink-muted);}
.rprompt{font-size:14.5px; line-height:1.5; margin-top:2px;}
.ranswer{margin-top:10px; font-size:13px; padding:9px 11px; border-radius:10px; background:var(--surface-2); line-height:1.6;}
.ranswer b{font-weight:600;}
.rexplain{margin-top:9px; font-size:12.5px; color:var(--ink-muted); line-height:1.5; border-top:1px dashed var(--border); padding-top:9px;}

footer.appfoot{font-size:11.5px; color:var(--ink-muted); text-align:center; margin-top:6px;}

/* ---------- REFERENCIA VISUAL DEL EXAMEN ---------- */
:root,
:root:not([data-theme="dark"]),
:root[data-theme="light"],
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#6b21a8;
  --surface:#173451;
  --surface-2:#1a3a59;
  --ink:#f7f8fc;
  --ink-muted:#9fb1c7;
  --border:#31506d;
  --accent:#9333ea;
  --accent-2:#7e22ce;
  --accent-ink:#142c47;
  --accent-soft:#9333ea24;
  --glow-1:#9333ea;
  --glow-2:#6b21a8;
  --shadow:0 18px 38px rgba(22,8,46,.34), 0 2px 8px rgba(10,17,30,.3);
}
html{background:#6b21a8;}
body{
  background:
    radial-gradient(65vmax 60vmax at 50% 110%, #9333ea 0%, transparent 67%),
    linear-gradient(135deg,#4c1d95 0%,#6b21a8 48%,#7e22ce 100%);
  background-attachment:fixed;
  padding:10px 18px;
  justify-content:flex-start;
}
body:has(#screen-start:not([hidden])){justify-content:center;}
body:has(#screen-start:not([hidden])) .app{
  max-width:760px;
  gap:18px;
  padding:34px 44px 24px;
}
.app{
  max-width:730px;
  gap:14px;
  padding:24px 36px 16px;
  background:#173451;
  border:1px solid #31506d;
  border-radius:7px;
  box-shadow:var(--shadow);
}
.institution-row{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:25px;}
.institution{font-family:'Geist',system-ui,sans-serif; font-weight:800; font-size:14px; line-height:1.02; color:#f6f5f1; letter-spacing:-.015em;}
.header-links{font-size:10.5px; color:#91a5bc; text-align:right; padding-top:4px; letter-spacing:.01em;}
.hero{background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
.eyebrow{color:#92a7c0; font-size:11.5px; letter-spacing:.055em; margin-bottom:7px;}
.hero h1{font-size:27px; line-height:1.1; letter-spacing:-.025em; text-transform:uppercase; margin-top:0; color:#f7f8fc; white-space:nowrap;}
.hero p.lead{max-width:none; color:#f2f5f9; font-size:14px; line-height:1.45; margin:12px 0 0;}
.fact-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px;}
.fact{min-width:0; padding:10px 13px; background:#183754; border:1px solid #31506d; border-radius:5px;}
.fact .num{font-family:'Geist',system-ui,sans-serif; font-size:22px; line-height:1.05; color:#fff;}
.fact .lbl{font-size:12px; color:#9eb0c5; margin-top:3px;}
.topics{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px 12px; margin-top:20px;}
.topic-chip{padding:4px 0; border:0; border-radius:0; background:transparent; color:#f5f7fb; font-size:11.5px; gap:6px; white-space:nowrap;}
.topic-chip .dot{width:7px; height:7px; background:#9333ea!important; box-shadow:0 0 8px #9333ea99;}
.start-btn,.check-btn,.next-btn,.retry-btn{
  border-radius:6px;
  background:linear-gradient(90deg,#7e22ce 0%,#9333ea 52%,#7e22ce 100%);
  color:#fff;
  box-shadow:none;
}
.start-btn{margin-top:22px; padding:13px 18px; font-size:15px;}
.start-note{margin-top:8px; color:#94a8bf; font-size:11px;}
.rules{display:none;}
footer.appfoot{color:#91a6bd; margin-top:0; font-size:11px;}
footer.appfoot a{color:inherit; text-decoration:none;}
footer.appfoot a:hover,footer.appfoot a:focus-visible{color:#fff; text-decoration:underline; text-underline-offset:3px;}

/* El resto del examen conserva la misma caja azul y geometría plana de la referencia. */
.topbar,.palette-wrap,.qcard,.score-hero,.retry-cta,.bars{
  background:#183754;
  border-color:#31506d;
  border-radius:6px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.topbar{top:10px;}
.timer,.finish-btn-top,.pnum,.opt-btn,.group-row,.match-row,.open-ta,.sg-btn,.layer,.conn-btn,.rcard,.ranswer{
  border-radius:5px;
}
.timer,.finish-btn-top,.pnum,.opt-btn,.group-row,.match-row,.open-ta,.sg-btn,.conn-btn,.ranswer{background:#173451;}
.qtag,.mode-pill,.rstatus{border-radius:4px;}
.navbtn,.toolbtn{border-radius:5px; background:#183754;}
.navrow{justify-content:center;}
.opt-btn{align-items:center; min-height:54px; padding-block:12px;}
.opt-btn .letter{margin-top:0; align-self:center;}
.vf-group-row{grid-template-columns:minmax(0,1fr) 200px; min-height:58px;}
.vf-group-controls{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:200px; gap:7px;}
.vf-group-choice{width:100%; min-width:0; min-height:36px; border-radius:5px; display:flex; align-items:center; justify-content:center; text-align:center;}
.vf-group-row .group-statement{align-items:center;}
.feedback-panel,.model-box,.retry-banner{border-radius:5px;}
.bar-track,.bar-fill{border-radius:3px;}

@media (max-width:760px){
  body{padding:10px;}
  .app{padding:26px 22px 18px;}
  body:has(#screen-start:not([hidden])) .app{max-width:730px; padding:28px 24px 20px;}
  .institution-row{margin-bottom:24px;}
  .hero h1{white-space:normal; font-size:clamp(25px,6vw,30px);}
  .topics{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:520px){
  body{padding:0;}
  body:has(#screen-start:not([hidden])){justify-content:flex-start;}
  .app{min-height:100vh; padding:24px 18px 18px; border-radius:0; border-inline:0;}
  body:has(#screen-start:not([hidden])) .app{min-height:100vh; padding:24px 18px 18px; border-radius:0; border-inline:0;}
  .institution-row{gap:12px;}
  .institution{font-size:14px;}
  .header-links{font-size:9px; max-width:145px;}
  .fact-row{grid-template-columns:1fr;}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px;}
  .vf-group-row{grid-template-columns:1fr;}
  .vf-group-controls{width:100%;}
}

@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important;} }