/* ============================================================
   Biff Tannen — entrenamiento de póker.
   Mismo instrumento que el examen ancla: paño verde, papel, Georgia.
   ============================================================ */
:root{
  --paper:#f5f4ef; --panel:#ffffff; --panel-2:#faf9f5;
  --ink:#1b1f1c; --ink-2:#585f59; --ink-3:#8b918a;
  --line:#e0ded6; --line-2:#c9c6bc;
  --felt:#1d6b52; --felt-soft:#eaf3ef; --felt-line:#b9d8cc;
  --rojo:#c62828; --rojo-soft:#fbecec; --rojo-line:#eec4c4;
  --ambar:#a4660f; --ambar-soft:#fbf2e3; --ambar-line:#e6d3ac;
  --carta:#ffffff; --carta-linea:#d5d1c8;
  --carta-roja:#c62828; --carta-negra:#1a1a1a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11150f; --panel:#181d17; --panel-2:#1d2320;
    --ink:#e9ece7; --ink-2:#a2aa9f; --ink-3:#727a70;
    --line:#2b322b; --line-2:#3c453c;
    --felt:#54b48f; --felt-soft:#16291f; --felt-line:#2b5342;
    --rojo:#ef6a6a; --rojo-soft:#2a1717; --rojo-line:#5a2f2f;
    --ambar:#d9a44e; --ambar-soft:#271f12; --ambar-line:#54432a;
    --carta:#f2f0ea; --carta-linea:#4a534a;
  }
}
:root[data-theme="dark"]{
  --paper:#11150f; --panel:#181d17; --panel-2:#1d2320;
  --ink:#e9ece7; --ink-2:#a2aa9f; --ink-3:#727a70;
  --line:#2b322b; --line-2:#3c453c;
  --felt:#54b48f; --felt-soft:#16291f; --felt-line:#2b5342;
  --rojo:#ef6a6a; --rojo-soft:#2a1717; --rojo-line:#5a2f2f;
  --ambar:#d9a44e; --ambar-soft:#271f12; --ambar-line:#54432a;
  --carta:#f2f0ea; --carta-linea:#4a534a;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; margin:0; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:730px; margin:0 auto; padding:38px 22px 90px}
a{color:var(--felt)}

/* ---------- tipografía ---------- */
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--felt); font-weight:700; margin:0 0 10px}
h1{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:clamp(31px,6.4vw,44px); line-height:1.06; letter-spacing:-.02em;
  margin:0 0 14px; font-weight:600; text-wrap:balance}
.sub{color:var(--ink-2); font-size:15.5px; margin:0 0 12px; max-width:62ch}
.sub b{color:var(--ink); font-weight:650}

.meta{display:flex; flex-wrap:wrap; margin:22px 0 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:0}
.meta>div{padding:12px 20px 12px 0; margin-right:20px; border-right:1px solid var(--line)}
.meta>div:last-child{border-right:none; margin-right:0}
dt{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
dd{margin:3px 0 0; font-size:13.5px; font-weight:600}

.reglas{background:var(--felt-soft); border:1px solid var(--felt-line);
  border-radius:10px; padding:20px 24px; margin:30px 0}
.reglas h2{font-family:Georgia,serif; font-size:17px; margin:0 0 12px; font-weight:600; text-wrap:balance}
.reglas ul{margin:0; padding-left:19px}
.reglas li{font-size:14px; color:var(--ink-2); margin-bottom:9px; line-height:1.55}
.reglas li:last-child{margin-bottom:0}
.reglas b{color:var(--ink); font-weight:650}

/* ---------- portada: lista de exámenes ---------- */
.tarjeta-ex{display:block; text-decoration:none; color:inherit; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin-bottom:12px;
  transition:border-color .16s, transform .16s}
.tarjeta-ex:hover{border-color:var(--felt); transform:translateY(-1px)}
.tarjeta-ex-h{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:7px}
.tarjeta-ex-t{font-family:Georgia,serif; font-size:21px; font-weight:600}
.tarjeta-ex-d{font-size:14px; color:var(--ink-2); margin:0}
.estado{font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; white-space:nowrap; border:1px solid}
.estado.nuevo{background:var(--felt-soft); color:var(--felt); border-color:var(--felt-line)}
.estado.curso{background:var(--ambar-soft); color:var(--ambar); border-color:var(--ambar-line)}
.estado.listo{background:var(--panel-2); color:var(--ink-3); border-color:var(--line)}

/* ---------- barra de progreso del examen ---------- */
.barra{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:13px;
  background:var(--paper); padding:13px 0 14px; margin-bottom:6px; border-bottom:1px solid var(--line)}
.track{flex:1; height:4px; background:var(--line); border-radius:3px; overflow:hidden}
.fill{height:100%; width:0; background:var(--felt); transition:width .3s ease}
.cuenta{font-size:12px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums;
  min-width:56px; text-align:right}
.reloj{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px;
  font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:52px;
  text-align:right; padding-left:12px; border-left:1px solid var(--line)}
.reloj.corriendo{color:var(--felt)}
.reloj.pasado{color:var(--rojo)}

/* ---------- un spot ---------- */
.spot{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:25px; margin-top:20px; transition:border-color .18s}
.spot.completo{border-color:var(--felt)}
.spot.incompleto{border-color:var(--ambar-line);
  background:linear-gradient(var(--ambar-soft),var(--ambar-soft)) no-repeat left/3px 100%, var(--panel)}
.spot.buscado{animation:latir 1.1s ease-out 2}
@keyframes latir{0%,100%{box-shadow:0 0 0 0 rgba(164,102,15,0)} 30%{box-shadow:0 0 0 5px var(--ambar-soft)}}
.spot-h{display:flex; align-items:baseline; gap:11px; margin-bottom:16px}
.spot-id{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; font-weight:700;
  color:var(--felt); letter-spacing:.04em}
.spot-t{font-family:Georgia,serif; font-size:19.5px; font-weight:600; letter-spacing:-.01em}

.mesa{display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--panel-2);
  border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:15px}
.rot{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin-right:4px}
.rot.tuyas{margin-left:12px}
.carta{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:38px; height:52px; background:var(--carta); border:1px solid var(--carta-linea);
  border-radius:6px; font-size:18px; font-weight:700; line-height:1;
  box-shadow:0 1px 3px rgba(0,0,0,.16)}
.carta .palo{font-size:15px; margin-top:3px}
.carta.roja{color:var(--carta-roja)}
.carta.negra{color:var(--carta-negra)}
.carta.mia{border:2px solid var(--felt); box-shadow:0 2px 6px rgba(29,107,82,.25)}

.datos{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px}
.dato{font-size:12px; color:var(--ink-2); background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:5px 10px; font-variant-numeric:tabular-nums}
.dato b{color:var(--ink); font-weight:700}
.dato.fuerte{background:var(--felt-soft); border-color:var(--felt-line); color:var(--ink)}

.pregunta{font-size:14.5px; color:var(--ink-2); margin:0 0 20px}
.pregunta b{color:var(--ink); font-weight:650}
.rotulo{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin:0 0 8px}

.acciones-fila{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px}
.acc{font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 15px;
  cursor:pointer; transition:all .14s; min-height:40px}
.acc:hover{border-color:var(--line-2); background:var(--panel-2)}
.acc[aria-pressed="true"]{background:var(--felt); border-color:var(--felt); color:#fff}

.monto-fila{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.monto-caja{display:flex; align-items:center; background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:9px; padding:0 14px; min-width:0}
.monto-caja:focus-within{border-color:var(--felt); box-shadow:0 0 0 3px var(--felt-soft)}
.signo{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:22px; font-weight:700; color:var(--ink-3)}
input.monto{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:24px; font-weight:700;
  width:110px; border:none; background:transparent; color:var(--ink); padding:11px 4px;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield}
input.monto::-webkit-outer-spin-button,input.monto::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
input.monto:focus{outline:none}
.pct{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; font-weight:700;
  color:var(--ink-3); font-variant-numeric:tabular-nums}
.pct b{font-size:17px; color:var(--felt)}

.campo-doble{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.campo-doble label{display:flex; flex-direction:column; gap:6px}
.campo-doble .rotulo{margin:0}
.campo-doble input{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:20px; font-weight:700;
  width:130px; background:var(--panel-2); border:1px solid var(--line-2); border-radius:9px;
  padding:10px 13px; color:var(--ink); font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.campo-doble input::-webkit-outer-spin-button,.campo-doble input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.campo-doble input:focus{outline:none; border-color:var(--felt); box-shadow:0 0 0 3px var(--felt-soft)}

.senales{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px}
.chip{font-family:inherit; font-size:12.5px; color:var(--ink-2); background:var(--panel-2);
  border:1px solid var(--line); border-radius:99px; padding:8px 13px; cursor:pointer;
  transition:all .14s; min-height:38px}
.chip:hover{border-color:var(--line-2)}
.chip[aria-pressed="true"]{background:var(--felt); border-color:var(--felt); color:#fff; font-weight:650}
.chip.sola{font-style:italic}

.conf-fila{display:flex; align-items:center; gap:16px}
input[type=range]{flex:1; accent-color:var(--felt); cursor:pointer; height:26px; min-width:110px}
.conf-num{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:20px; font-weight:700;
  min-width:44px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
.conf-num.sin{color:var(--ink-3)}

/* ---------- cierre ---------- */
.cierre{margin-top:36px; text-align:center}
.faltan,.aviso-plano{background:var(--ambar-soft); border:1px solid var(--ambar-line); color:var(--ink);
  border-radius:9px; padding:13px 17px; font-size:13.5px; margin:0 0 16px; text-align:left}
.falta-chip{font-family:inherit; font-size:13px; font-weight:700; color:var(--ambar);
  background:var(--panel); border:1px solid var(--ambar-line); border-radius:7px;
  padding:6px 11px; margin:6px 6px 0 0; cursor:pointer; min-height:36px}
.falta-chip:hover{background:var(--ambar); color:var(--panel)}
button.primary{font-family:inherit; font-size:15px; font-weight:650; padding:13px 30px;
  border-radius:9px; border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink-3);
  cursor:not-allowed; transition:all .16s; min-height:48px}
button.primary:not(:disabled){background:var(--felt); border-color:var(--felt); color:#fff; cursor:pointer}
button.primary:not(:disabled):hover{filter:brightness(1.08)}
.nota-guardado{font-size:12px; color:var(--ink-3); margin:12px 0 0; min-height:18px}

/* ---------- resultado ---------- */
.resultado{margin-top:44px; padding-top:30px; border-top:2px solid var(--line-2)}
.marcador{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.marcador h2{font-family:Georgia,serif; font-size:27px; margin:0; font-weight:600}
.puntaje{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:38px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1}
.puntaje.paso{color:var(--felt)}
.puntaje.reprobo{color:var(--rojo)}
.puntaje small{font-size:19px; color:var(--ink-3)}
.veredicto{font-size:15px; color:var(--ink-2); margin:0 0 24px; max-width:62ch}
.veredicto b{color:var(--ink); font-weight:650}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:9px; margin-bottom:28px}
.tj{background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:13px 15px}
.tj dt{margin-bottom:5px}
.tj dd{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:21px; font-weight:700;
  margin:0; font-variant-numeric:tabular-nums}
.tj dd.tarde{color:var(--rojo)}
.rev{border:1px solid var(--line); border-radius:11px; margin-top:12px; overflow:hidden}
.rev-h{display:flex; align-items:center; gap:11px; padding:13px 17px; background:var(--panel-2);
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.rev-n{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; font-weight:700; color:var(--ink-3)}
.rev-t{font-family:Georgia,serif; font-size:16px; font-weight:600; flex:1; min-width:120px}
.sello{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; white-space:nowrap; border:1px solid}
.sello.bien{background:var(--felt-soft); color:var(--felt); border-color:var(--felt-line)}
.sello.medio{background:var(--ambar-soft); color:var(--ambar); border-color:var(--ambar-line)}
.sello.mal{background:var(--rojo-soft); color:var(--rojo); border-color:var(--rojo-line)}
.rev-b{padding:15px 17px; background:var(--panel)}
.par{display:flex; gap:10px; font-size:13.5px; margin-bottom:7px; align-items:baseline}
.par-r{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; min-width:82px; flex-shrink:0; padding-top:2px}
.par-v{color:var(--ink); font-variant-numeric:tabular-nums}
.par-v.tuyo{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700}
.par-v .apagado{color:var(--ink-3)}
.dice{font-size:13.5px; color:var(--ink-2); margin:13px 0 0; padding-top:12px;
  border-top:1px solid var(--line); line-height:1.55}
.dice b{color:var(--ink); font-weight:650}
.dice.duro{color:var(--rojo); border-top:none; padding-top:0; margin-top:8px}

/* ---------- diccionario ---------- */
.buscador{position:sticky; top:0; z-index:20; background:var(--paper);
  padding:14px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--line)}
input[type=search]{width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line-2); border-radius:9px; padding:12px 15px;
  -webkit-appearance:none}
input[type=search]:focus{outline:none; border-color:var(--felt); box-shadow:0 0 0 3px var(--felt-soft)}
.filtros{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.grupo{margin-top:34px}
.grupo-h{font-family:Georgia,serif; font-weight:600; color:var(--felt); margin:0 0 4px;
  text-transform:uppercase; font-size:11.5px; letter-spacing:.13em}
.grupo-l{border:none; border-top:1px solid var(--line); margin:0 0 14px}
.t{background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:20px 22px; margin-bottom:11px}
.t-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:9px}
.t-n{font-family:Georgia,serif; font-size:21px; font-weight:600; letter-spacing:-.01em}
.t-alias{font-size:12.5px; color:var(--ink-3); font-style:italic}
.tag{font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; white-space:nowrap;
  background:var(--felt-soft); color:var(--felt); border:1px solid var(--felt-line)}
.t-q{font-size:15px; color:var(--ink-2); margin:0}
.t-q b{color:var(--ink); font-weight:650}
.tuyo{margin-top:14px; padding:13px 15px; border-radius:8px; background:var(--panel-2);
  border:1px solid var(--line); border-left:3px solid var(--ambar)}
.tuyo-r{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ambar);
  font-weight:700; margin:0 0 5px}
.tuyo-p{font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.55}
.tuyo-p b{color:var(--ink); font-weight:650}
.num{font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; font-weight:700}

/* ---------- login ---------- */
.login{max-width:400px; margin:0 auto; padding:70px 22px}
.login .caja{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px}
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.campo input{font-family:inherit; font-size:16px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line-2); border-radius:9px; padding:12px 14px}
.campo input:focus{outline:none; border-color:var(--felt); box-shadow:0 0 0 3px var(--felt-soft)}
.login button{width:100%}
.err{background:var(--rojo-soft); border:1px solid var(--rojo-line); color:var(--rojo);
  border-radius:8px; padding:11px 14px; font-size:13.5px; margin:0 0 16px}

/* ---------- varios ---------- */
.cargando{text-align:center; color:var(--ink-3); font-size:14px; padding:60px 0}
.vacio{font-size:14px; color:var(--ink-3); text-align:center; padding:40px 0 0}
.pie{margin-top:52px; padding-top:22px; border-top:1px solid var(--line)}
.pie p{font-size:13px; color:var(--ink-3); margin:0}
.pie b{color:var(--ink-2); font-weight:650}
:focus-visible{outline:2px solid var(--felt); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media (max-width:520px){
  .wrap{padding:26px 15px 70px}
  .spot,.t{padding:17px}
  .reglas{padding:17px 18px}
  .meta>div{border-right:none; padding-right:0; margin-right:16px}
  input.monto{width:88px; font-size:21px}
  .par{flex-direction:column; gap:2px}
  .par-r{min-width:0}
  .nav-in{padding:0 15px}
}


/* ============================================================
   Celular primero: barra abajo, objetivos grandes, una cosa por
   pantalla. Se abre, se pica, se aprende.
   ============================================================ */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.wrap{padding:26px 18px 34px}

/* ---------- barra de abajo ---------- */
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
  background:var(--panel); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 12px rgba(0,0,0,.05)}
.tabs a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; min-height:60px; text-decoration:none; color:var(--ink-3); font-size:10.5px;
  font-weight:650; letter-spacing:.02em; -webkit-tap-highlight-color:transparent}
.tabs a svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.tabs a.on{color:var(--felt)}
.tabs a.on svg{stroke-width:2.1}

/* ---------- pantalla HOY ---------- */
.hoy-h{margin-bottom:18px}
.hoy-h h1{font-size:clamp(26px,6.6vw,34px); margin:0}
.hoy-h .eyebrow{margin-bottom:7px; letter-spacing:.02em;
  font-size:12.5px; color:var(--ink-3); font-weight:600}

.tiras{display:flex; gap:9px; margin-bottom:20px}
.tira{flex:1; background:var(--panel); border:1px solid var(--line); border-radius:11px;
  padding:12px 14px}
.tira dt{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.tira dd{margin:4px 0 0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:19px;
  font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.tira.viva{border-color:var(--felt-line); background:var(--felt-soft)}
.tira.viva dd{color:var(--felt)}

.regla-hoy{background:var(--felt); border-radius:13px; padding:18px 20px; margin-bottom:20px}
.regla-hoy .rotulo{color:rgba(255,255,255,.62); margin-bottom:6px}
.regla-txt{font-family:Georgia,serif; font-size:19px; line-height:1.35; color:#fff;
  margin:0; font-weight:600; text-wrap:balance}

.cta{display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  background:var(--panel); border:1px solid var(--line-2); border-radius:13px;
  padding:17px 19px; margin-bottom:11px; min-height:70px;
  transition:transform .12s, border-color .16s; -webkit-tap-highlight-color:transparent}
.cta:active{transform:scale(.985)}
.cta span{flex:1; display:flex; flex-direction:column; gap:3px; min-width:0}
.cta b{font-size:16.5px; font-weight:650}
.cta em{font-style:normal; font-size:13px; color:var(--ink-3); line-height:1.4}
.cta svg{width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--ink-3);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.cta:not(.secundario):not(.examen){background:var(--felt); border-color:var(--felt); color:#fff}
.cta:not(.secundario):not(.examen) em{color:rgba(255,255,255,.72)}
.cta:not(.secundario):not(.examen) svg{stroke:rgba(255,255,255,.8)}
.cta.hecho{background:var(--panel); border-color:var(--felt-line); color:var(--ink)}
.cta.hecho em{color:var(--ink-3)}
.cta.hecho svg{stroke:var(--felt)}
.cta.examen{border-color:var(--ambar-line); background:var(--ambar-soft)}
.cta.examen svg{stroke:var(--ambar)}

.leccion{background:var(--panel); border:1px solid var(--line); border-radius:13px;
  padding:19px 21px; margin-top:20px}
.leccion p:not(.rotulo){font-size:14.5px; color:var(--ink-2); margin:0; line-height:1.62}
.pie-nota{font-size:12.5px; color:var(--ink-3); margin-top:22px; text-align:center}

/* ---------- drills ---------- */
.drill{padding-top:16px}
.drill-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.drill-marcador{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px;
  font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums}
.drill-reloj{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:17px; font-weight:700;
  color:var(--felt); font-variant-numeric:tabular-nums}

.drill-caja{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px 22px; text-align:center}
.drill-rot{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; margin:0}
.drill-bote{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:46px; font-weight:700;
  margin:5px 0 18px; font-variant-numeric:tabular-nums; line-height:1}
.drill-pct{font-family:Georgia,serif; font-size:36px; font-weight:600; color:var(--felt);
  margin:4px 0 22px; line-height:1}
.drill-resp{display:inline-flex; align-items:center; gap:2px; background:var(--panel-2);
  border:2px solid var(--line-2); border-radius:12px; padding:4px 16px}
.drill-resp:focus-within{border-color:var(--felt); box-shadow:0 0 0 4px var(--felt-soft)}
.drill-resp span{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:26px;
  font-weight:700; color:var(--ink-3)}
.drill-resp input{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:34px;
  font-weight:700; width:120px; border:none; background:transparent; color:var(--ink);
  padding:8px 2px; text-align:center; font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.drill-resp input::-webkit-outer-spin-button,.drill-resp input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.drill-resp input:focus{outline:none}
.veredicto-drill{font-size:16px; font-weight:700; margin:14px 0 0; min-height:24px}
.veredicto-drill.bien{color:var(--felt)}
.veredicto-drill.mal{color:var(--rojo)}
.drill-caja button.primary{margin-top:18px; width:100%}

.rev-drill{margin-top:18px; border-radius:11px; padding:15px 17px; border:1px solid}
.rev-drill.bien{background:var(--felt-soft); border-color:var(--felt-line)}
.rev-drill.mal{background:var(--rojo-soft); border-color:var(--rojo-line)}
.rev-veredicto{font-size:15px; font-weight:700; margin:0 0 6px}
.rev-drill.bien .rev-veredicto{color:var(--felt)}
.rev-drill.mal .rev-veredicto{color:var(--rojo)}
.rev-esperado{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; font-weight:700;
  margin:0 0 9px; color:var(--ink)}
.rev-porque{font-size:13.5px; color:var(--ink-2); margin:0; line-height:1.55}
.rev-porque b{color:var(--ink); font-weight:650}
.spot .primary{width:100%; margin-top:6px}

.tabla-fallos{display:flex; flex-direction:column; gap:6px}
.tabla-fallos>div{display:flex; gap:10px; justify-content:space-between; align-items:baseline;
  background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:11px 14px;
  font-size:13.5px; font-variant-numeric:tabular-nums}
.tabla-fallos .mal{color:var(--rojo); font-weight:650}
.tabla-fallos .bien{color:var(--felt); font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace}

.historial{display:flex; flex-direction:column; gap:6px}
.historial>div{display:flex; gap:10px; justify-content:space-between; align-items:baseline;
  background:var(--panel); border:1px solid var(--line); border-radius:9px; padding:11px 14px;
  font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.historial b{color:var(--ink)}
.salir-btn{display:block; width:100%; margin-top:34px; font-family:inherit; font-size:14px;
  color:var(--ink-3); background:none; border:1px solid var(--line); border-radius:10px;
  padding:14px; cursor:pointer; min-height:48px}
.salir-btn:hover{color:var(--rojo); border-color:var(--rojo-line)}

.marca-grande{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.marca-grande img{border-radius:12px}
.marca-grande span{font-family:Georgia,serif; font-size:26px; font-weight:600}
.login{max-width:420px; margin:0 auto; padding:52px 20px}
.login .caja{margin-top:22px}

/* En pantalla grande la barra se despega del borde y todo se centra. */
@media (min-width:700px){
  .wrap{padding:44px 22px 40px}
  .tabs{left:50%; right:auto; transform:translateX(-50%); bottom:18px; width:min(560px,92vw);
    border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 26px rgba(0,0,0,.10)}
  body{padding-bottom:104px}
  .cta{padding:19px 22px}
}