/* Página de cada ficha: teoría + ejercicios. Misma línea que el test de nivel. */
:root{
  --fg:#1b2030; --muted:#5d6478; --rule:#dde1ea; --bg:#f6f7fa; --hov:#e9ecf3;
  --navy:#1A2B6D; --mint:#00A880; --mint-d:#00785c; --mint-t:#dcf3ec; --red:#c62828; --red-t:#fde6e3; --amb:#a35f00; --amb-t:#fdf0d9;
  --l1:#1c3a9c; --l2:#c62828; --l3:#0b736d;
  --fd:"Bricolage Grotesque","Segoe UI",sans-serif; --fb:"Atkinson Hyperlegible","Segoe UI",sans-serif;
  --bar:46px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--fb);font-size:17px;line-height:1.45}
html{scroll-padding-top:calc(var(--bar) + 12px)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
a{color:var(--navy)}
[hidden]{display:none!important}

/* barra fija de lado a lado */
.bar{position:fixed;top:0;left:0;right:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar .in{height:var(--bar);display:flex;align-items:center;gap:4px;padding:0 10px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.bar .in::-webkit-scrollbar{display:none}
.ib{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;color:var(--navy);text-decoration:none}
.ib:hover{background:var(--hov)}
.sb{flex:none;height:32px;padding:0 12px;border-radius:99px;font-weight:700;font-size:15px;color:var(--navy)}
.sb:hover{background:var(--hov)}
.sb.on{background:var(--mint);color:#fff}
.sb.done::after{content:" ✓";font-weight:400}
.sp{flex:1 0 8px}
.sc{flex:none;font-family:var(--fd);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--mint-d);padding:0 6px}
.nm{flex:none;font-family:var(--fd);font-weight:800;font-size:15px;color:var(--navy);padding-left:6px}
.nm span{color:var(--mint)}
.prog{height:3px}
.prog i{display:block;height:100%;width:0;background:var(--mint);transition:width .25s}

main{max-width:920px;margin:0 auto;padding:calc(var(--bar) + 26px) 16px 56px}
.sec{max-width:780px;margin:0 auto}
.sec.teo-w{max-width:none}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}
h1,h2,h3{font-family:var(--fd);margin:0;line-height:1.15;letter-spacing:-.01em}
.sec > h2{font-size:28px;font-weight:800;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sec > h2 small{font-family:var(--fb);font-size:15px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sec > .lead{color:var(--muted);margin:6px 0 0}
p{margin:0}

/* grupos e ítems */
.grp{margin-top:30px}
.grp > h3{font-family:var(--fb);font-weight:700;font-size:17px;padding-bottom:6px;border-bottom:1.5px solid var(--fg)}
.its{list-style:none;margin:0;padding:0;counter-reset:it}
.it{display:grid;grid-template-columns:34px 1fr;gap:2px 6px;padding:12px 0;border-bottom:1px solid var(--rule)}
.it > .no{font-family:var(--fd);font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.it > .bd{min-width:0;display:flex;flex-direction:column;gap:8px}
.q{font-size:20px;font-style:italic;line-height:1.5}
.q .es{font-style:normal;color:var(--muted);font-size:17px}
.q u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.gap{display:inline-block;min-width:2.6em;border-bottom:2px solid var(--fg);text-align:center;font-style:normal;font-weight:700;padding:0 .2em;line-height:1.2}
.gap.ok{color:var(--mint-d);border-color:var(--mint)} .gap.ko{color:var(--red);border-color:var(--red)}

/* botones de opción */
.ch{display:flex;flex-wrap:wrap;gap:8px}
.op{min-height:38px;padding:4px 16px;border-radius:99px;border:1.6px solid var(--navy);color:var(--navy);font-weight:700;font-size:17px}
.op:hover:not(:disabled){background:var(--hov)}
.op:disabled{cursor:default}
.op.ok{background:var(--mint);border-color:var(--mint);color:#fff}
.op.ko{background:var(--red);border-color:var(--red);color:#fff}
.op.dim{opacity:.4}

/* casillas de texto */
.inp{font:inherit;font-style:normal;font-weight:700;font-size:19px;color:var(--fg);background:transparent;border:0;border-bottom:2px solid var(--fg);border-radius:0;padding:1px 4px;margin:0 2px;text-align:center;min-width:3em;max-width:100%}
.inp:focus{outline:none;border-color:var(--navy);background:#fff}
.inp.lg{display:block;width:100%;text-align:left;font-style:italic;font-weight:400;padding:6px 4px}
.inp.ok{color:var(--mint-d);border-color:var(--mint);background:transparent}
.inp.ko{color:var(--red);border-color:var(--red);background:transparent;text-decoration:line-through;text-decoration-thickness:1.5px}
.inp.casi{color:var(--amb);border-color:var(--amb);background:transparent}
.inp:disabled{-webkit-text-fill-color:currentColor;opacity:1}
.fb{font-weight:700;font-size:16px}
.fb.ok{color:var(--mint-d)} .fb.ko{color:var(--red)} .fb.casi{color:var(--amb)}
.fb .sol{font-style:italic;font-weight:700;color:var(--fg)}
.chk{align-self:flex-start;height:34px;padding:0 14px;border-radius:99px;font-weight:700;font-size:15px;color:var(--navy);border:1.6px solid var(--navy)}
.chk:hover{background:var(--hov)}

/* ordenar */
.ans{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0;border-bottom:2px solid var(--fg)}
.ans .ph{color:var(--muted);font-size:15px}
.ans.ok{border-color:var(--mint)} .ans.ko{border-color:var(--red)}
.ans .end{font-size:20px;font-weight:700}
.tk{min-height:36px;padding:2px 12px;border-radius:8px;background:#fff;border:1.4px solid #c4c9d6;font-size:18px;font-style:italic}
.tk:hover:not(:disabled){border-color:var(--navy)}
.tk:disabled{cursor:default}
.ans .tk{background:var(--hov);border-color:transparent}
.ans.ok .tk{background:var(--mint-t);color:var(--mint-d)}
.ans.ko .tk{background:var(--red-t);color:var(--red)}
.pool{display:flex;flex-wrap:wrap;gap:6px;min-height:38px}

/* emparejar */
.mt{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:14px}
.mt .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.mb{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:44px;padding:6px 14px;border-radius:10px;background:#fff;border:1.4px solid #c4c9d6;font-size:18px}
.mb .lt{flex:none;font-family:var(--fd);font-weight:800;font-size:14px;color:var(--muted);min-width:1.2em}
.mb:hover:not(:disabled){border-color:var(--navy)}
.mb.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.mb.sel .lt{color:#cfd6f0}
.mb.ok{background:var(--mint-t);border-color:var(--mint);color:var(--mint-d)}
.mb.ko{background:var(--amb-t);border-color:var(--amb);color:var(--amb)}
.mb.bad{animation:bad .45s}
.mb:disabled{cursor:default}
@keyframes bad{0%,100%{transform:none}25%{transform:translateX(-5px);background:var(--red-t);border-color:var(--red)}75%{transform:translateX(5px);background:var(--red-t);border-color:var(--red)}}
.mt-n{color:var(--muted);font-size:14px;margin-top:8px}

/* pie de cada sección */
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:28px}
.b2{height:42px;padding:0 20px;border-radius:99px;font-weight:700;border:1.6px solid var(--navy);color:var(--navy);text-decoration:none;display:inline-flex;align-items:center}
.b2:hover{background:var(--hov)}
.b2.fill{background:var(--navy);color:#fff}
.b2.fill:hover{filter:brightness(1.15);background:var(--navy)}
.lnk{color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:16px;padding:6px 2px}
.res{margin-top:22px;font-size:18px;font-weight:700;color:var(--mint-d)}
.nav2{max-width:780px;margin:56px auto 0;padding-top:16px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
.nav2 a{text-decoration:none;color:var(--navy);font-weight:700}
.nav2 a small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.nav2 .r{text-align:right;margin-left:auto}
.hint{color:var(--muted);font-size:14px;margin-top:10px}

@media (max-width:600px){
  html,body{font-size:16px}
  .q{font-size:18px}
  .sec > h2{font-size:24px}
  .it{grid-template-columns:26px 1fr}
  .mt{gap:8px 10px}
  .mb{font-size:16px;padding:6px 10px}
  .nm{display:none}
}

/* bloques con tipos mezclados: cada ejercicio lleva su instrucción */
.its{margin-top:22px}
.ins{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.ins i{font-style:italic}
.it-m{grid-template-columns:46px 1fr}
.it-m .no{font-size:13px;white-space:nowrap;padding-top:3px}
.it-m .mt{margin-top:2px}

/* «Seguir o nuevo» al volver a una ficha empezada */
.vuelta{max-width:780px;margin:0 auto 26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.vuelta .vt{flex:1 1 260px;font-weight:700}
.sb.pdf{text-decoration:none;display:inline-flex;align-items:center;border:1.6px solid var(--navy)}
.foot a.b2{text-decoration:none}