/* Kjimi · estilos (misma estructura que Kjimi, colores de Kjimi) */
@font-face{font-family:"Poppins";font-weight:500;src:url(../fonts/poppins-latin-500-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins";font-weight:600;src:url(../fonts/poppins-latin-600-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Poppins";font-weight:700;src:url(../fonts/poppins-latin-700-normal.woff2) format("woff2");font-display:swap}

:root{
  --morado:#7A1E3C; --morado-dark:#5C142C; --morado-soft:#F6E8EC;
  --rosa:#D4A017; --rosa-dark:#A87C10; --rosa-soft:#FBF2D9;
  --marino:#1B3A5C; --marino-dark:#10263D;
  --oro:#D4A017; --oro-soft:#FBF2D9;
  --blanco:#FFFFFF; --fondo:#F7F2E9; --borde:#E9DFD0;
  --tinta:#2B2420; --gris:#7C7268;
  --verde:#1F8A5B; --verde-soft:#E3F5EC; --rojo:#C2413B; --rojo-soft:#FBE7E6;
  --paper:#FFFDF6; --paper-line:#E3EAF5; --pen:#2F5DA8; --marker:#FFE58A;
  --monarch:#E8761E;
  --radius:18px;
  --font-display:"Poppins","Avenir Next","Segoe UI Semibold",Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs:16px;
}
/* «Texto grande»: agranda TODA la app (títulos, botones, menús), no solo los párrafos */
/* 1.7.1 · letra 10 % más grande en toda la app («Texto grande» en Ajustes: 25 %) */
/* 2.0.1 · YA NO se usa «zoom» en #shell: en iPhone (Safari) el zoom movía la barra de abajo hacia arriba (franja vacía),
   la hacía más gruesa y apretaba la de arriba. Ahora las barras miden lo mismo que en Soar.
   «Texto grande» agranda solo el contenido (#app y la consulta), nunca las barras fijas. */
html.big #app,html.big .cs-in,html.big .ask-bg>*,html.big .pdf-tip-bg>*{zoom:1.15}
html.big body.game-on #app .bottom-action,html.big body.game-on #app .game-actions,html.big body.act-on #app .bottom-action,html.big body.act-on #app .game-actions{zoom:.87}
@media print{#app,.cs-in{zoom:1!important}}
html.big .toast{font-size:17px}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--tinta);font:400 var(--fs)/1.5 var(--font-body);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
button{font:inherit;color:inherit;cursor:pointer}
svg{display:block}
h1,h2,h3{font-family:var(--font-display)}
h2{font-size:1.15em;margin:1em 0 .4em}
h3{font-size:1em;margin:.7em 0 .3em}
p{margin:.4em 0}
.muted{color:var(--gris)} .small{font-size:.86em}
#shell{max-width:560px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* ---------- barra superior ---------- */
.topbar{background:var(--morado);color:var(--on-p);padding:calc(14px + env(safe-area-inset-top)) 18px 14px;position:sticky;top:0;z-index:20;box-shadow:0 2px 10px rgba(0,0,0,.14)}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--mark-bg);border:2px solid var(--oro);display:flex;align-items:center;justify-content:center;font:700 15px var(--font-display);color:var(--mark-ink);flex-shrink:0}
.brand-text h1{font:700 19px var(--font-display);margin:0;letter-spacing:.02em}
.brand-text p{margin:0;font-size:11px;opacity:.85;letter-spacing:.08em;text-transform:uppercase}
.streak-pill{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.18);border:1px solid rgba(212,160,23,.45);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;color:var(--pill-ink)}
.dots-row{height:14px;background:var(--morado) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpolygon points='6,1 11,7 6,13 1,7' fill='%23D4A017'/%3E%3Cpolygon points='18,1 23,7 18,13 13,7' fill='%235C142C'/%3E%3C/svg%3E") 0 50%/24px 14px repeat-x} /* Kjimi · la greca de rombos (bordado) */
body.home .dots-row{display:none}

main{padding:18px 16px 8px}
main:focus{outline:none}

/* ---------- títulos y tarjetas ---------- */
.section-title{font:700 16px var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin:24px 2px 10px}
.section-title:first-child{margin-top:2px}
.card{background:#fff;border-radius:var(--radius);box-shadow:0 1px 3px rgba(46,31,69,.07),0 6px 18px rgba(46,31,69,.05);padding:16px;margin:12px 0}
.empty{text-align:center;padding:30px 12px;color:var(--gris)}
.empty .ee{font-size:34px;margin-bottom:8px}

.hero-card{background:linear-gradient(155deg,var(--morado) 0%,var(--morado-dark) 100%);color:var(--on-p);border-radius:22px;padding:20px;position:relative;overflow:hidden}
.hero-card::after{content:"";position:absolute;right:-34px;top:-34px;width:150px;height:150px;border-radius:50%;background:rgba(229,143,176,.22)}
.hero-eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.85;font-weight:700}
.hero-title{font:700 24px/1.25 var(--font-display);margin:6px 0 8px;position:relative}
.hero-sub{font-size:15px;opacity:.92;line-height:1.5;margin:0 0 14px;position:relative}
.hero-stats{display:flex;gap:16px;justify-content:space-between;position:relative}
.hero-stat{background:none;border:0;padding:0;color:inherit;text-align:left}
.hero-stat b{display:block;font:700 20px var(--font-display)}
.hero-stat span{font-size:10.5px;opacity:.82;text-transform:uppercase;letter-spacing:.05em}

.review-banner{display:flex;align-items:center;gap:12px;background:var(--oro);color:var(--tinta);border-radius:16px;padding:12px 14px;margin-top:14px;border:0;width:100%;text-align:left}
.review-banner b{display:block;font-size:14px}
.review-banner span{font-size:12px;opacity:.85}

.wotd-card{background:#fff;border:1.5px solid var(--oro);border-radius:18px;padding:16px 18px;margin:16px 0;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.wotd-card::before{content:"HOY";position:absolute;top:10px;right:-26px;background:var(--oro);color:var(--tinta);font-size:10px;font-weight:800;padding:3px 30px;transform:rotate(35deg);letter-spacing:.05em}
.wotd-emoji{font-size:40px;line-height:1}
.wotd-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:700;margin-bottom:2px}
.wotd-en{font:700 22px var(--font-display);color:var(--ink)}
.wotd-es{font-size:13.5px;color:var(--gris)}

.level-card{background:linear-gradient(155deg,var(--marino) 0%,var(--marino-dark) 100%);color:#fff;border-radius:20px;padding:18px 20px;margin-bottom:6px}
.level-top{display:flex;justify-content:space-between;align-items:flex-start}
.level-num{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;font-weight:700}
.level-title{font:700 21px var(--font-display);margin-top:2px}
.level-track{height:9px;background:rgba(255,255,255,.16);border-radius:999px;margin:14px 0 8px;overflow:hidden}
.level-fill{height:100%;background:var(--oro);border-radius:999px;transition:width .5s}
.level-xp{font-size:12.5px;opacity:.85}
.link-btn{background:none;border:0;color:var(--oro);font-size:12px;font-weight:700;margin-top:8px;padding:0;text-decoration:underline}
.points-panel{margin-top:10px;background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.7}

/* insignias (paradas de la ruta) */
.badges-preview{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.badges-preview::-webkit-scrollbar{display:none}
.badge-mini{flex:0 0 auto;width:74px;text-align:center;border:0;background:none;padding:0}
.badge-mini .bc{width:66px;height:66px;margin:0 auto;border-radius:50%;background:#fff;border:2.5px solid var(--oro);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 2px 8px rgba(46,31,69,.08)}
.badge-mini.locked .bc{background:#F2EFF6;border:2px dashed #D3CADF;font-size:22px;filter:grayscale(1);opacity:.75}
.badge-mini.next .bc{border:2.5px solid var(--rosa);box-shadow:0 0 0 4px var(--rosa-soft)}
.badge-mini small{display:block;font-size:10.5px;line-height:1.2;margin-top:5px;color:var(--tinta);font-weight:600}
.badge-mini.locked small{color:var(--gris)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.badge-card{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:14px 10px;text-align:center}
.badge-card .bi{font-size:34px;line-height:1.2}
.badge-card b{display:block;font:600 14px var(--font-display);margin-top:4px}
.badge-card span{font-size:11.5px;color:var(--gris);line-height:1.35;display:block;margin-top:2px}
.badge-card.locked{background:#F7F4FA}
.badge-card.locked .bi{filter:grayscale(1);opacity:.55}
.badge-card .lvl{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ink);background:var(--morado-soft);border-radius:999px;padding:2px 8px;margin-bottom:4px}

/* mariposa */
.bfly-card{background:#fff;border-radius:20px;padding:16px 12px 18px;text-align:center;box-shadow:0 1px 3px rgba(46,31,69,.07),0 6px 18px rgba(46,31,69,.05)}
.bfly-card svg{width:100%;height:auto;max-width:420px;margin:0 auto}
.bfly-pct{font:700 20px var(--font-display);color:var(--ink);margin-top:6px}
.bfly-sub{font-size:13.5px;color:var(--gris);margin:4px 8px 0;line-height:1.45}
.cell{transition:fill .6s}
.cell.fresh{animation:paint 1.4s ease-out}
@keyframes paint{0%{fill:#fff}40%{fill:#FFD08A}100%{fill:var(--monarch)}}
@media (prefers-reduced-motion:reduce){.cell.fresh{animation:none}}

/* lecciones */
.unit-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.unit-card{background:#fff;border-radius:16px;padding:14px;border:1px solid var(--borde);text-align:left;position:relative;overflow:hidden;transition:transform .12s}
.unit-card:active{transform:scale(.97)}
.unit-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:10px}
.unit-name{font:600 16px/1.25 var(--font-display);margin:0 0 3px}
.unit-meta{font-size:12.5px;color:var(--gris)}
.unit-meta em{font-style:normal;color:var(--rosa-dark);font-weight:700}
.progress-track{height:6px;background:#EFE6D8;border-radius:999px;margin-top:10px;overflow:hidden}
.progress-fill{height:100%;background:var(--oro);border-radius:999px;transition:width .4s}

/* secciones de colores */
.entry{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;color:#fff;border-radius:18px;padding:18px;margin-bottom:10px}
.entry .fe-icon{font-size:30px;flex-shrink:0}
.entry .fe-title{font:700 17px var(--font-display)}
.entry .fe-sub{font-size:12.5px;opacity:.88;margin-top:2px}
.entry.morado{background:linear-gradient(155deg,var(--morado),var(--morado-dark));color:var(--on-p)}
.entry.marino{background:linear-gradient(155deg,var(--marino),var(--marino-dark))}
.entry.rosa{background:linear-gradient(155deg,var(--rosa),var(--rosa-dark))}
.entry.oro{background:linear-gradient(155deg,#E2B53A,#B8890F);color:var(--tinta)}
.entry.noche{background:linear-gradient(155deg,#3A2B55,#21173A)}
.entry.lock{opacity:.75}

/* botones */
.btn{border:0;border-radius:14px;font:700 15px var(--font-body);padding:13px 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--morado);color:var(--on-p);min-height:48px}
.btn:active{filter:brightness(.93)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--morado-soft);color:var(--ink)}
.btn.line{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
.btn.oro{background:var(--oro);color:var(--tinta)}
.btn.rosa{background:var(--rosa);color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}
.back-btn{background:#fff;border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:9px 18px 9px 12px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14.5px;margin-bottom:16px}
.back-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.row{display:flex;gap:10px;align-items:center}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.stack>*+*{margin-top:10px}

/* detalle de lección */
.unit-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.unit-header .unit-icon{width:60px;height:60px;font-size:30px;margin:0}
.unit-header h2{font-size:20px;margin:0 0 2px}
.unit-header p{margin:0;font-size:13px;color:var(--gris)}
.intro-text{font-size:14.5px;line-height:1.55;color:#4A3F36;margin:12px 0 4px;background:var(--morado-soft);padding:12px 14px;border-radius:12px;border-left:3px solid var(--oro)}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.mode-btn{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:14px 10px;text-align:center}
.mode-btn.wide{grid-column:1/-1}
.mode-btn .mi{font-size:26px;display:block;margin-bottom:4px}
.mode-btn b{display:block;font:600 15px var(--font-display)}
.mode-btn span{font-size:12px;color:var(--gris)}
.mode-btn.done{border-color:var(--verde);background:var(--verde-soft)}

/* juegos */
.game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13px;color:var(--gris)}
.game-score{font:700 15px var(--font-display);color:var(--ink)}
.flashcard{background:#fff;border-radius:22px;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px 20px;box-shadow:0 1px 3px rgba(46,31,69,.08),0 10px 24px rgba(46,31,69,.08);text-align:center;border:1px solid var(--borde);position:relative;width:100%}
.flashcard.side-en{background:var(--morado-soft);border-color:#DDD0EE}
.flashcard.side-es{background:var(--rosa-soft);border-color:#F3CFDD}
.flash-tag{position:absolute;top:14px;left:16px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700}
.flash-emoji{font-size:54px;line-height:1.1;margin-bottom:6px}
.flash-word{font:700 clamp(28px,8vw,38px)/1.2 var(--font-display);color:var(--ink);word-break:break-word}
.flash-hint{position:absolute;bottom:12px;font-size:11px;color:var(--gris)}
.mc-question{text-align:center;padding:18px 10px 16px}
.mc-question .lbl{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700}
.mc-question .qword{font:700 32px var(--font-display);color:var(--ink);margin-top:6px}
.mc-question .emo{font-size:46px;line-height:1.2}
.listen-play{width:96px;height:96px;border-radius:50%;background:var(--morado);color:var(--on-p);border:0;font-size:34px;display:flex;align-items:center;justify-content:center;margin:6px auto 12px;box-shadow:0 8px 20px rgba(107,63,160,.3)}
.memo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.memo-card{aspect-ratio:1;background:var(--morado);border-radius:12px;border:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;text-align:center;padding:6px;color:var(--on-p);line-height:1.25}
.memo-card .me{font-size:22px;display:block}
.memo-card.flipped{background:var(--oro-soft);color:var(--tinta);border:1.5px solid var(--oro)}
.memo-card.matched{background:var(--verde-soft);color:var(--verde);border:1.5px solid var(--verde);opacity:.8}
.lot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lot-cell{aspect-ratio:1;background:#fff;border:1.5px solid var(--borde);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;box-shadow:0 1px 3px rgba(46,31,69,.06)}
.lot-cell .le{font-size:32px;line-height:1.1}
.lot-cell b{font:700 13.5px var(--font-display);color:var(--ink);margin-top:4px;word-break:break-word}
.lot-cell.marked{background:var(--morado);border-color:var(--morado)}
.lot-cell.marked b{color:var(--on-p)}
.lot-cell.marked .le{opacity:.35}
.called{font-size:12px;color:var(--gris);margin-top:14px;line-height:1.6}
.called span{display:inline-block;background:var(--morado-soft);color:var(--ink);border-radius:999px;padding:1px 8px;margin:2px 2px 0 0;font-weight:600}
.src-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}

/* ejercicios de gramática */
.progress{height:6px;background:var(--morado-soft);border-radius:3px;overflow:hidden;margin:2px 0 14px}
.progress b{display:block;height:100%;background:var(--morado);transition:width .35s}
.step-kicker{font:700 11.5px var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--rosa-dark);margin-bottom:4px}
.prompt-es{font-size:1.02em;color:var(--gris);margin:2px 0 8px}
.sentence{font:600 1.28em/1.4 var(--font-display);margin:6px 0 14px}
.blank{display:inline-block;min-width:3.2em;border-bottom:3px solid var(--ink);text-align:center;color:var(--ink);padding:0 4px}
.blank.ok{border-color:var(--verde);color:var(--verde)}
.blank.bad{border-color:var(--rojo);color:var(--rojo)}
.options{display:grid;gap:10px}
.options.cols{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
.opt{border:1.5px solid var(--borde);background:#fff;border-radius:14px;padding:13px 14px;font-weight:600;font-size:1.03em;text-align:center;min-height:52px}
.opt:active{background:var(--morado-soft)}
.opt.ok{border-color:var(--verde);background:var(--verde-soft);color:var(--verde)}
.opt.bad{border-color:var(--rojo);background:var(--rojo-soft);color:var(--rojo)}
.opt[disabled]{pointer-events:none}
.feedback{border-radius:14px;padding:12px 14px;margin-top:14px;font-size:.95em}
.feedback.ok{background:var(--verde-soft);color:#14583B}
.feedback.bad{background:var(--rojo-soft);color:#7E2420}
.feedback b{display:block;margin-bottom:2px}
.answer-input{width:100%;font:600 1.12em var(--font-display);padding:13px 14px;border:1.5px solid var(--borde);border-radius:14px;background:#fff;color:var(--tinta);text-align:center}
.answer-input:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 3px var(--morado-soft)}
.tiles{display:flex;flex-wrap:wrap;gap:8px;min-height:56px;padding:8px;border-radius:14px}
.tiles.target{border:1.5px dashed #DCCDB8;background:#fff;margin-bottom:12px}
.tile{border:1.5px solid var(--borde);background:#fff;border-radius:10px;padding:9px 13px;font-weight:700;box-shadow:0 2px 0 var(--borde)}
.tiles.target .tile{background:var(--morado);color:var(--on-p);border-color:var(--morado);box-shadow:none}
.tile.used{visibility:hidden}
.bottom-action{margin-top:18px}

.notebook{background:var(--paper);border:1px solid #EFE7D4;border-radius:12px;padding:18px 16px 18px 26px;position:relative;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--paper-line) 31px 32px);box-shadow:0 1px 3px rgba(46,31,69,.07)}
.notebook::before{content:"";position:absolute;left:14px;top:0;bottom:0;border-left:2px solid #F3B9B9}
.notebook h3{margin-top:0;font:700 1.3em/1.25 var(--font-display);color:var(--ink)}
.hand{font-weight:600;font-size:1em;color:var(--pen);line-height:1.45}
.mark{background:linear-gradient(transparent 55%,var(--marker) 55%);padding:0 2px}
.rule-table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0;font-size:.97em;background:#fff;border-radius:12px;overflow:hidden;border:1.5px solid var(--marino)}
.rule-table th{background:var(--marino);color:#fff;font:600 .84em var(--font-display);padding:8px;text-align:left}
.rule-table td{padding:9px 8px;border-top:1px solid var(--borde);vertical-align:top}
.rule-table td:first-child{font-weight:700;font-family:var(--font-display);color:var(--ink)}
.golden{border:2px solid var(--oro);background:var(--oro-soft);border-radius:12px;padding:10px 12px;margin:12px 0}
.golden b{color:#8A6508}
.example{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--borde)}
.example:last-child{border:0}
.example .en{font-weight:600}
.example .es{font-size:.88em;color:var(--gris)}
.hl{color:#D7263D;font-weight:700}
.say{border:0;background:var(--morado-soft);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.say svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.say.slow{width:auto;padding:0 10px;font:700 .75em var(--font-display);color:var(--ink)}
.say.playing{background:var(--morado)}
.say.playing svg{stroke:var(--on-p)}
.mistake{padding:10px 0;border-bottom:1px solid var(--borde)}
.mistake:last-child{border:0}
.mistake .bad-s{color:var(--rojo);text-decoration:line-through;text-decoration-thickness:2px}
.mistake .good-s{color:var(--verde);font-weight:700}
.mistake .why{font-size:.88em;color:var(--gris)}
.chat{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:85%;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid var(--borde);cursor:pointer}
.bubble.right{align-self:flex-end;background:var(--rosa-soft);border-color:transparent}
.bubble .who{font:600 .72em var(--font-display);color:var(--rosa-dark)}
.bubble .tr{display:none;font-size:.85em;color:var(--gris);margin-top:3px}
.bubble.show .tr{display:block}
.result{text-align:center;padding:10px 0}
.result .big{font:700 3em var(--font-display);color:var(--ink)}
.stamp{display:inline-block;border:3px solid var(--oro);color:#A87C0C;border-radius:12px;padding:6px 14px;font:700 1em var(--font-display);transform:rotate(-6deg);margin:10px 0}

/* diccionario */
.search{width:100%;padding:12px 14px;border:1.5px solid var(--borde);border-radius:14px;font-size:15px;background:#fff;color:var(--tinta)}
.search:focus{outline:none;border-color:var(--morado)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.chip{flex-shrink:0;border:1.5px solid var(--borde);background:#fff;border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--morado);border-color:var(--morado);color:var(--on-p)}
.word{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--borde)}
.word .emoji{font-size:1.6em;width:36px;text-align:center}
.word .en{font-weight:700;color:var(--ink);font-size:17px}
.word .es{font-size:.88em;color:var(--gris)}
.word .ok-dot{font-size:11px;color:var(--verde);font-weight:700}

/* listas y ajustes */
.menu-item{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:14px;margin:8px 0}
.menu-item .ic{width:40px;height:40px;border-radius:11px;background:var(--morado-soft);display:grid;place-items:center;font-size:1.2em;flex:none}
.menu-item .s{font-size:.82em;color:var(--gris)}
.menu-item.done{border-color:var(--verde)}
.menu-item.soon{opacity:.6}
.setting{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--borde)}
.switch{appearance:none;-webkit-appearance:none;width:48px;height:28px;border-radius:14px;background:#D9D2E3;position:relative;flex:none;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.switch:checked{background:var(--ink)}
.switch:checked::after{left:23px}
select,input[type=text]{font:inherit;padding:9px 11px;border:1.5px solid var(--borde);border-radius:10px;background:#fff;color:inherit}

/* abecedario */
.abc-detail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.abc-btns{flex-basis:100%}
.abc-btns .btn{flex:1}
.abc-big{font:700 3.2em/1 var(--font-display);color:var(--ink);min-width:2.1em;text-align:center}
.abc-sound{font:600 1.4em var(--font-display)}
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;margin:4px 0 12px}
.abc-grid button{border:1.5px solid var(--borde);background:#fff;border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:2px}
.abc-grid button b{font:700 1.4em var(--font-display)}
.abc-grid button span{font-size:.75em;color:var(--gris)}
.abc-grid button.on{border-color:var(--morado);background:var(--morado-soft)}
.spell-out{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.spell-out span{display:flex;flex-direction:column;align-items:center;background:var(--morado-soft);border-radius:10px;padding:6px 8px;font-size:.75em;color:var(--gris)}
.spell-out span b{font:700 1.5em var(--font-display);color:var(--ink)}

/* bienvenida */
.welcome{text-align:center;padding-top:20px}
.welcome .logo-big{width:110px;height:110px;margin:0 auto 10px;color:var(--ink)}
.welcome h1{font-size:2.6em;color:var(--ink);margin:0}
.welcome .tag{font:500 1.1em var(--font-display)}
body.welcome-on .topbar,body.welcome-on .dots-row,body.welcome-on .bottomnav{display:none}

/* barra inferior */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--borde);display:flex;max-width:560px;margin:0 auto;padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:#B3A9C1;background:none;border:0}
.nav-item.active{color:var(--ink)}
.nav-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-item span{font-size:10.5px;font-weight:700}
body.in-lesson .bottomnav{display:none}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--tinta);color:#fff;padding:11px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%)}
@media print{.topbar,.bottomnav,.dots-row,.no-print{display:none!important}body{background:#fff}}

/* panel "Ya vas acertando" */
.solved-panel{margin-top:22px}
.solved-panel .sp-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--gris);font-weight:700;margin-bottom:8px}
.solved-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--borde);border-left:4px solid var(--verde);border-radius:0 12px 12px 0;padding:12px 14px;margin-bottom:8px}
.solved-row .sw-en{font:700 20px var(--font-display);color:var(--ink)}
.solved-row .sw-es{color:var(--gris);font-size:16px}
.solved-row .sw-check{color:var(--verde);font-size:20px;font-weight:700}

/* examen de práctica */
.entry.examen{background:linear-gradient(155deg,var(--rosa-dark),var(--marino))}
.opt.sel{border-color:var(--ink);background:var(--morado-soft);color:var(--ink)}
.exam-head{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--font-display);color:var(--ink);margin-bottom:6px}
.exam-head .eh-part{background:var(--morado-soft);border-radius:999px;padding:3px 10px;font-size:11.5px}
.exam-part{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--borde)}
.exam-part:last-child{border:0}
.exam-part .ep-ic{font-size:24px;width:32px;text-align:center}
.reading-text{white-space:pre-wrap;background:var(--paper);border:1px solid #EFE7D4;border-radius:12px;padding:14px;margin:8px 0 14px;font-size:16px;line-height:1.55}
.reading-text .rt-title{font:700 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--rosa-dark);margin-bottom:6px}
.exam-bars{display:flex;flex-direction:column;gap:8px}
.eb-row{display:grid;grid-template-columns:1fr 90px 44px;align-items:center;gap:8px;font-size:13px}
.eb-row.total{font-weight:700;border-top:1px solid var(--borde);padding-top:8px}
.eb-track{height:8px;background:#EFE6D8;border-radius:999px;overflow:hidden}
.eb-fill{height:100%;background:var(--rosa);border-radius:999px}
.eb-fill.ok{background:var(--verde)}
.eb-val{text-align:right}

/* ---------- v0.6 · ruta en orden ---------- */
.next-card{background:linear-gradient(155deg,var(--marino) 0%,var(--marino-dark) 100%);color:#fff;border-radius:20px;padding:16px 18px;margin-top:14px;border:2px solid var(--oro)}
.nc-eyebrow{font:700 11px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--oro)}
.nc-unit{font-size:12.5px;opacity:.85;margin:2px 0 10px}
.nc-row{display:flex;align-items:center;gap:12px}
.nc-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:26px;flex:none}
.nc-kind{font-size:11.5px;font-weight:700;color:var(--rosa);text-transform:uppercase;letter-spacing:.05em}
.nc-title{font:700 18px/1.25 var(--font-display)}
.nc-sub{font-size:13.5px;opacity:.9;margin:6px 0 12px}
.nc-track{height:7px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden;margin-top:12px}
.nc-fill{height:100%;background:var(--oro);border-radius:999px}
.btn.nc-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.35)}

.tm-unit{display:flex;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:14px;margin:10px 0;align-items:flex-start}
.tm-unit.locked{opacity:.6}
.tm-unit.passed{border-color:var(--oro);background:linear-gradient(0deg,#fff,var(--oro-soft))}
.tm-badge{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--oro);display:grid;place-items:center;font-size:26px;flex:none;background:#fff}
.tm-top{display:flex;justify-content:space-between;gap:8px;font:600 12px var(--font-display);color:var(--ink);text-transform:uppercase;letter-spacing:.04em}
.tm-title{font:700 17px var(--font-display);margin:2px 0}
.tm-goal{font-size:13px;color:#4A3F36;line-height:1.4}
.tm-meta{font-size:12px;color:var(--gris);margin-top:6px}
.tm-chip{flex:none;align-self:flex-start;font-size:10.5px;border-radius:999px;padding:2px 8px;white-space:nowrap;text-transform:none;letter-spacing:0}
.tm-chip.ok{background:var(--verde-soft);color:var(--verde)}
.tm-chip.now{background:var(--rosa-soft);color:var(--rosa-dark)}
.tm-chip.free{background:var(--morado-soft);color:var(--ink)}
.tm-chip.lock{background:#EEE;color:var(--gris)}

.goal-card{background:var(--paper);border:1px solid #EFE7D4;border-left:4px solid var(--oro);border-radius:12px;padding:10px 14px;margin:8px 0 14px}
.psteps{position:relative}
.pstep{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:12px;margin:8px 0}
.pstep .ps-num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--font-display);background:var(--morado-soft);color:var(--ink);flex:none}
.pstep .ps-ic{font-size:24px;width:30px;text-align:center;flex:none}
.pstep .ps-kind{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--rosa-dark)}
.pstep .ps-title{font:600 15.5px/1.25 var(--font-display)}
.pstep .ps-sub{font-size:12px;color:var(--gris);margin-top:2px}
.pstep.done{border-color:var(--verde)}
.pstep.done .ps-num{background:var(--verde);color:#fff}
.pstep.now{border:2px solid var(--rosa);box-shadow:0 0 0 4px var(--rosa-soft)}
.pstep.now .ps-num{background:var(--rosa);color:#fff}
.pstep.lock{opacity:.55}
.pstep.lock .ps-num{background:#EEE}
.pstep.exam{background:var(--oro-soft);border-color:var(--oro)}
.pstep.exam.now{border:2px solid var(--oro);box-shadow:0 0 0 4px #FBEBC0}
.can-list{margin:6px 0 10px;padding-left:22px;font-size:1em;font-weight:600;color:var(--tinta);line-height:1.55}
.can-list li::marker{content:"✓  ";color:var(--verde)}

/* estilo cuaderno (como las hojas de clase) */
.notebook .mark{background:linear-gradient(transparent 45%,var(--marker) 45%);padding:0 2px;font-weight:700}
.notebook.espeak .nb-kicker{font:700 11.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--rosa-dark)}
.notebook.espeak .nb-title{font:700 1.3em/1.25 var(--font-display);color:var(--ink);margin:2px 0 8px}
.notebook .rule-table{background:#fff;border:2px solid var(--marino);border-radius:12px}
.notebook .rule-table th{background:var(--marino);color:#fff;font:600 .9em var(--font-display)}
.notebook .rule-table td{font-size:1em;line-height:1.4;color:var(--tinta);border-top:1px solid var(--borde);vertical-align:middle}
.notebook .rule-table td:first-child{font-family:var(--font-body);font-weight:600;color:var(--tinta)}
.notebook .rule-table td+td{border-left:1px solid var(--borde)}
.notebook .rule-table .say{width:30px;height:30px;vertical-align:middle;margin-left:6px;display:inline-flex}
.notebook .hl,.key{color:#D7263D;background:none;font-weight:700;padding:0}
.hly{background:linear-gradient(transparent 35%,var(--marker) 35%);padding:0 2px}
.notebook .golden{font-size:.97em}

.reading-sheet{background:var(--paper);border:1px solid #EFE7D4;border-radius:12px;padding:16px 16px 10px 26px;position:relative;background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--paper-line) 31px 32px);margin-bottom:12px}
.reading-sheet::before{content:"";position:absolute;left:14px;top:0;bottom:0;border-left:2px solid #F3B9B9}
.rs-title{font:700 1.5em/1.2 var(--font-display);color:var(--tinta);text-align:center;margin:4px 0 14px}
.rs-title span{font-size:.6em;color:var(--gris)}
.rs-line{margin:0 0 10px;font-size:17px;line-height:1.55;cursor:pointer}
.rs-es{font-size:.95em;color:var(--pen);line-height:1.45}
.small-sheet{padding:10px 12px 4px 22px;margin-bottom:12px}
.small-sheet .rs-title{font-size:1.4em}
.small-sheet .rs-line{font-size:15px;margin-bottom:4px}
.kw-row{display:flex;flex-wrap:wrap;gap:8px}
.goal-text{font-weight:600;color:var(--marino);line-height:1.45}
/* lectura en párrafo (como hoja de lectura) */
.reading-sheet{background:#fff;background-image:none;border:1px solid var(--borde);padding:18px 18px 14px}
.reading-sheet::before{display:none}
.rs-sub{text-align:center;color:#D7263D;font:700 1.05em var(--font-display);margin:-10px 0 14px}
.rs-para{font-size:18px;line-height:1.75;margin:0;text-align:left}
.rs-sent{cursor:pointer;border-radius:4px}
.rs-sent.on{outline:2px solid var(--morado-soft);background:var(--morado-soft)}
.rs-tr{margin-top:12px;background:var(--morado-soft);border-radius:12px;padding:10px 12px;font-size:.95em}
.rs-tr b{display:block;color:var(--ink)}
.rs-trbtn{color:var(--ink);margin-top:12px}
.rs-es{margin-top:8px;background:var(--paper);border-radius:10px;padding:10px 12px}
.small-sheet .rs-para{font-size:15px;line-height:1.6}
.small-sheet .rs-title{font-size:1.1em;margin:0 0 6px}

/* ---------- v0.8 · cursos Inglés I–V ---------- */
.course{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:11px 12px;margin-bottom:9px}
.course.cur{border:2px solid var(--rosa);box-shadow:0 0 0 3px var(--rosa-soft)}
.course .cnum{width:50px;height:50px;border-radius:13px;color:#fff;font:700 17px var(--font-display);display:grid;place-items:center;flex:none}
.course .ct{font:700 16px var(--font-display)}.course .cs{font-size:12px;color:var(--gris);line-height:1.3;margin-bottom:5px}
.course .cside{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.course .clv{font:700 11px var(--font-display);border-radius:99px;padding:2px 8px;background:var(--morado-soft);color:var(--ink)}
.course .copen{font-size:10.5px;font-weight:700;color:var(--verde);white-space:nowrap}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:10px 2px;text-align:center;font-size:11.5px;font-weight:600;color:var(--tinta)}
.mini i{font-style:normal;font-size:24px;display:block;margin-bottom:2px}
.chead{color:#fff;margin:-18px -16px 0;padding:14px 16px 16px}
.cback{background:none;border:0;color:#fff;opacity:.9;font-size:13px;padding:0;margin-bottom:6px}
.chead .cti{font:700 20px/1.2 var(--font-display)}
.chead .cen{font-style:italic;font-size:13px;color:#FFE58A;margin-top:2px}
.chead .cmeta{font-size:12px;opacity:.92;margin-top:6px}
.tabs{display:flex;background:#fff;border-bottom:1px solid var(--borde);margin:0 -16px;position:sticky;top:0;z-index:4}
.tabs button{flex:1;background:none;border:0;padding:11px 0;font-size:13px;font-weight:700;color:var(--gris);border-bottom:3px solid transparent}
.tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
.cbody{padding-top:12px}
.tm-es{font-size:12.5px;font-style:italic;color:var(--gris);margin-top:-1px}
.tm-chip.lk{background:#EEE;color:#999}
.phase{display:inline-block;font:700 11px var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:#fff;border-radius:8px;padding:4px 10px;margin:12px 0 4px}
.phase.ph1{background:var(--rosa-dark)}.phase.ph2{background:var(--morado);color:var(--on-p)}.phase.ph3{background:var(--marino)}
.pstep .sk{font-size:12px;letter-spacing:1px;flex:none}
.pstep.opt{border:2px dashed var(--oro)}
.pstep.cls{background:#FFFBEF;border-color:var(--oro)}
.pstep.opt .ps-num,.pstep.cls .ps-num{background:var(--oro);color:#fff}
.pstep.cls.done .ps-num{background:var(--verde)}
.book{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:13px;margin-bottom:10px}
.book .bh{display:flex;gap:12px;align-items:center}
.book .cv{width:52px;height:66px;border-radius:6px;display:grid;place-items:center;font-size:26px;flex:none;box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.book .cv.al{background:var(--morado);color:var(--on-p)}.book .cv.ma{background:var(--marino)}
.book .bt{font:700 16px var(--font-display)}.book .bs{font-size:12px;color:var(--gris)}
.book ul{margin:8px 0 10px;padding-left:20px;font-size:13px;color:#4A3F36}
.banner{background:var(--oro-soft);border:1px solid var(--oro);border-radius:12px;padding:9px 11px;font-size:13px}
.cert-row{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:9px 11px;margin-bottom:6px;font-size:13.5px}
.kick{font:700 11px var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--rosa-dark)}
.en2{font-size:13px;font-style:italic;color:var(--gris)}
.can-row{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--borde);padding:9px 0}
.can-btns{display:flex;gap:6px;flex:none}.can-btns .opt{min-height:38px;padding:6px 10px;font-size:13px}
.ch-steps{margin:10px 0 6px;padding-left:22px;line-height:1.5}
.rs-gl{border-top:1px dashed #D8C9A6;margin-top:10px;padding-top:6px;font-size:13px;color:#4A3F36}
body.manual-on #shell{max-width:920px}
@media print{body.manual-on .topbar,body.manual-on .bottomnav,body.manual-on .dots-row{display:none!important}}
@media print{body.manual-on #shell{padding-bottom:0;min-height:0}}
.tm-meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.btn{text-decoration:none}
.btn.wa{background:#1FA855;color:#fff}

/* Inicio: tarjeta de la monarca y la ruta */
.monarch-card{display:block;width:100%;text-align:left;margin:14px 0 4px;padding:14px;border-radius:20px;border:1px solid var(--oro);
  background:linear-gradient(150deg,#fff 0%,var(--oro-soft) 100%);color:inherit;font:inherit;cursor:pointer;box-shadow:0 4px 14px rgba(27,42,74,.08)}
.mc-top{display:flex;align-items:center;gap:12px}
.mc-fly{width:84px;height:84px;flex:none}
.mc-fly svg{width:100%;height:100%;display:block}
.mc-eye{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--rosa-dark)}
.mc-pct{font:700 21px var(--font-display);color:var(--ink);margin:2px 0}
.mc-next{font-size:13.5px;color:#4a4a66;line-height:1.3}
.mc-go{font-size:26px;color:#1B3A5C;opacity:.5}
.mc-rl{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#6b6b85;margin:12px 2px 6px}
.mc-route{display:flex;gap:3px;align-items:center}
.mc-dot{flex:1;aspect-ratio:1;max-width:22px;border-radius:50%;background:#e4dff0;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;overflow:hidden}
.mc-dot.on{background:#FFE9A8;box-shadow:inset 0 0 0 1.5px var(--oro)}
.mc-dot.next{background:#fff;box-shadow:0 0 0 2px var(--rosa-dark);animation:mcPulse 1.6s ease-in-out infinite}
@keyframes mcPulse{50%{box-shadow:0 0 0 4px rgba(201,102,143,.3)}}

/* ---------- v1.0 · un color por app (Inglés I–V) ---------- */
:root{--p:#7A1E3C;--p-dark:#5C142C;--p-soft:#F6E8EC;--on-p:#fff;--ink:#7A1E3C;--mark-bg:#5C142C;--mark-ink:#D4A017;--pill-ink:#D4A017}
html[data-course="sin-tema-2"]{--morado:#D4A017;--morado-dark:#EFA6C2;--morado-soft:#FBF2D9;--on-p:#1B3A5C;--ink:#A3416B;--mark-bg:#1B3A5C;--mark-ink:#F7C9DA;--pill-ink:#1B3A5C}
html[data-course="sin-tema-3"]{--morado:#1B3A5C;--morado-dark:#10263D;--morado-soft:#E6EAF2;--on-p:#fff;--ink:#1B3A5C;--mark-bg:#10263D;--mark-ink:#D4A017;--pill-ink:#D4A017}
html[data-course="sin-tema-4"]{--morado:#D4A017;--morado-dark:#E6B83F;--morado-soft:#FBF2D9;--on-p:#1B3A5C;--ink:#8A6508;--mark-bg:#1B3A5C;--mark-ink:#F3D27A;--pill-ink:#1B3A5C}
html[data-course="sin-tema-5"]{--morado:#7A1F3D;--morado-dark:#5A1430;--morado-soft:#F6E6EC;--on-p:#fff;--ink:#7A1F3D;--mark-bg:#5A1430;--mark-ink:#D4A017;--pill-ink:#D4A017}
html[data-course="sin-tema-2"] .streak-pill,html[data-course="sin-tema-4"] .streak-pill{background:rgba(255,255,255,.35);border-color:rgba(27,42,74,.25)}
html[data-course="sin-tema-2"] .hero-card::after,html[data-course="sin-tema-4"] .hero-card::after{background:rgba(255,255,255,.25)}
html[data-course="sin-tema-3"] .next-card,html[data-course="sin-tema-3"] .level-card{background:linear-gradient(155deg,#3A2B55 0%,#21173A 100%)}
.chead{background:linear-gradient(155deg,var(--morado),var(--morado-dark));color:var(--on-p)}
.cback{color:inherit}
.chead .cen{color:var(--cen,#FFE58A)}
html[data-course="sin-tema-2"],html[data-course="sin-tema-4"]{--cen:#1B3A5C}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.grid3 .mini{padding:12px 4px;font-size:12.5px}
.tm-unit.rec{border:2px solid var(--rosa);box-shadow:0 0 0 4px var(--rosa-soft)}
.tm-unit.locked{opacity:.78;background:#FAF8FC}
.tm-chip.lk{background:#EEE;color:#6b6478}
.badge-card.wide{display:block;width:100%;margin-top:10px}
/* ruta de 4 paradas */
.mc-route.four{display:flex;align-items:flex-start;gap:0;margin-top:2px}
.mc-stop{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:58px}
.mc-stop small{font-size:10.5px;font-weight:700;color:#6b6b85;text-align:center;line-height:1.15}
.mc-stop.on small{color:var(--tinta)}
.mc-stop.next small{color:var(--rosa-dark)}
.mc-route.four .mc-dot{width:30px;height:30px;max-width:none;flex:none;font-size:16px}
.mc-line{flex:1;height:3px;background:#e4dff0;margin-top:14px;border-radius:2px}
.mc-line.on{background:var(--oro)}
/* acceso */
.acc-banner{display:block;width:100%;text-align:left;border-radius:18px;padding:14px;margin-top:14px;border:1.5px solid var(--borde);background:#fff;color:var(--tinta);font:inherit}
.acc-banner .ab-top{display:flex;align-items:center;gap:12px}
.acc-banner .ab-ic{font-size:28px;flex:none}
.acc-banner b{display:block;font:700 15px var(--font-display)}
.acc-banner span{font-size:12.5px;color:#4A3F36}
.acc-banner.sample{border-color:var(--oro);background:linear-gradient(150deg,#fff,var(--oro-soft))}
.acc-banner.teacher{border-color:var(--verde);background:linear-gradient(150deg,#fff,var(--verde-soft))}
.acc-banner.expired{border-color:var(--rojo);background:var(--rojo-soft)}
.acc-card{text-align:center}
.acc-lock{font-size:40px}
.acc-list{text-align:left;margin:10px 0;padding-left:4px;list-style:none;font-size:14px;line-height:1.6}
.acc-list li::before{content:"✓ ";color:var(--verde);font-weight:800}
.acc-price{margin-top:6px}.acc-price b{font:700 26px var(--font-display);color:var(--ink)}.acc-price span{color:var(--gris);font-size:14px}
.acc-price.big b{font-size:34px}
.acc-field{display:block;margin:0 0 12px}
.acc-field span{display:block;font-weight:700;font-size:14px;margin-bottom:4px}
.acc-field input{width:100%;padding:12px}
.acc-field small{display:block;color:var(--gris);font-size:12px;margin-top:3px}
.acc-check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;margin:4px 0 10px}
.acc-check input{width:20px;height:20px;flex:none;margin-top:1px}
.acc-err{color:var(--rojo);font-weight:700;font-size:13.5px;min-height:1px;margin:4px 0 8px}
.acc-pay{background:#009EE3;color:#fff}
.acc-pending{border:2px solid var(--oro)}
.acc-spin{font-size:46px;animation:accFly 1.2s ease-in-out infinite}
@keyframes accFly{50%{transform:translateY(-8px) scale(1.06)}}
.acc-ok .stamp{font-size:1.05em}
.update-bar{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));z-index:80;background:var(--marino);color:#fff;border:2px solid var(--oro);border-radius:999px;padding:10px 16px;font:700 13px var(--font-body);box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:92vw}
/* constancia */
.card.cert{text-align:center;padding:24px 18px;border:3px solid var(--morado);background:#FFFDF6}
.cert-top{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink)}
.cert-logo{width:44px}
.cert-top b{display:block;font:700 18px var(--font-display);letter-spacing:.12em;text-align:left}
.cert-top span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.card.cert h2{font:700 1.7em Georgia,serif;margin:14px 0 4px;color:var(--marino)}
.cert-k{color:var(--gris);margin:0}
.cert-name{font:700 1.7em var(--font-display);color:var(--ink);margin:8px 0;border-bottom:2px solid var(--oro);display:inline-block;padding:0 12px 4px}
.cert-fly{width:190px;margin:8px auto}
.cert-fly svg{width:100%;height:auto}
.cert-grid{display:flex;justify-content:center;gap:12px;margin:8px 0}
.cert-grid div{flex:1;max-width:220px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:8px}
.cert-grid span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.cert-grid b{font:700 15px var(--font-display);color:var(--marino)}
@media print{.card.cert{box-shadow:none;break-inside:avoid}}
/* ---------- v1.1 · una sola app ---------- */
.brand-link{cursor:pointer}
.mis-cursos{background:none;border:0;color:var(--ink);font:700 14px var(--font-display);padding:0 2px;margin:-4px 0 10px}
.acc-change{border:1.5px dashed var(--oro);background:#FFFBEF}
/* pantalla de entrada (Mis cursos) */
body.entrada .bottomnav{display:none}
body.entrada #shell{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
body.entrada .dots-row{display:none}
html[data-course="0"] .topbar{background:linear-gradient(135deg,#9A2E52 0%,#7A1E3C 55%,#5C142C 100%)}
.entrada-hero{background:linear-gradient(155deg,#9A2E52 0%,#5C142C 100%);color:#fff}
.coll{border:1px solid var(--oro);border-radius:18px;padding:12px 10px 8px;margin-top:14px;background:linear-gradient(150deg,#fff,var(--oro-soft))}
.coll-k{font:700 12px var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--rosa-dark);padding:0 4px}
.coll-flies{display:flex;justify-content:space-between;margin-top:6px}
.coll-fl{flex:1;background:none;border:0;padding:2px;text-align:center;min-width:0}
.coll-s{width:100%;max-width:70px;margin:0 auto;aspect-ratio:320/230}.coll-s svg{width:100%;height:100%}
.coll-fl small{display:block;font:700 11px var(--font-display);margin-top:2px}
.coll-fl.off .coll-s{filter:grayscale(1);opacity:.35}
.cc{display:flex;gap:12px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:11px 12px;margin-top:10px;color:inherit;font:inherit}
.cc-n{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font:700 17px var(--font-display);flex:none}
.cc-b{flex:1;min-width:0}.cc-t{font:700 16px var(--font-display);line-height:1.15}.cc-d{font-size:12px;color:#6b6478;line-height:1.3;margin-top:2px}
.cc-trk{height:6px;background:#EFE6D8;border-radius:9px;margin-top:6px;overflow:hidden}.cc-trk i{display:block;height:100%;background:var(--oro);border-radius:9px}
.cc-chip{flex:none;border-radius:99px;padding:3px 9px;font:700 11px var(--font-display);white-space:nowrap}
.cc-chip.ok{background:var(--verde-soft);color:var(--verde)}.cc-chip.now{background:var(--rosa-soft);color:#A3416B}.cc-chip.lk{background:#EEE;color:#6b6478}.cc-chip.ma{background:#E6EAF2;color:#1B3A5C}
.cc.act{border:2px solid var(--rosa-dark);box-shadow:0 0 0 3px var(--rosa-soft)}
.cc.teach{border:2px solid var(--verde);box-shadow:0 0 0 3px var(--verde-soft)}
.cc.lock{background:#FAF8FC}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.grid2 .btn{padding:12px 8px;font-size:14px}
.pick{display:flex;gap:12px;align-items:center;width:100%;border:2px solid #E3DCEC;border-radius:14px;padding:10px 12px;margin-top:8px;background:#fff;color:inherit;font:inherit}
.pick b{font:700 15px var(--font-display)}
.pick .cc-n{width:40px;height:40px;font-size:14px;border-radius:11px}
.pick .radio{width:22px;height:22px;border-radius:50%;border:2px solid #A0948A;flex:none}
.pick.sel{border-color:var(--marino);box-shadow:0 0 0 3px #E6EAF2}.pick.sel .radio{border:7px solid var(--marino)}
.acc-conf{border-radius:14px;padding:12px;margin:12px 0;background:#F6F3FA;font-size:14px;color:#4A3F36}
.acc-conf.on{background:var(--oro-soft);border:2px solid var(--oro);color:var(--tinta)}
.acc-conf b{display:block;font:700 16px var(--font-display);margin-bottom:4px}
.w-courses{display:flex;justify-content:center;gap:8px;margin-top:12px}
.w-courses span{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font:700 14px var(--font-display)}
body.entrada a{color:var(--ink)}
/* instalar antes de activar */
.inst-steps{margin:6px 0 4px;padding-left:22px;display:grid;gap:6px}
.inst-steps li{line-height:1.45}
.inst-code{display:flex;flex-direction:column;align-items:center;gap:2px;margin:12px 0 2px;padding:10px;border:2px dashed var(--borde);border-radius:12px}
.inst-code b{font:700 20px var(--font-display);letter-spacing:.06em;color:var(--ink)}
/* sellos de tinta y camino guiado */
.ink{display:inline-flex;align-items:center;gap:6px;border:2.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:3px 12px 3px 4px;font:700 13px var(--font-display);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-7deg);box-shadow:inset 0 0 0 2px var(--fondo,#fff),inset 0 0 0 3.5px var(--ink);opacity:.92;background:transparent}
.ink .ink-ck{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}
.ink.big{font-size:18px;padding:6px 18px 6px 6px;margin:6px auto 2px;border-width:3px}
.ink.big .ink-ck{width:34px;height:34px;font-size:20px}
.step-head{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:10px 14px 12px;margin:0 0 12px}
.sh-top{display:flex;align-items:center;gap:8px;justify-content:space-between}
.sh-top b{font:700 15px var(--font-display);color:var(--ink)}
.sh-unit{background:none;border:0;color:var(--gris);font:600 13px var(--font-body,inherit);padding:4px 0}
.sh-done{font:600 12px var(--font-display);color:var(--gris)}
.sh-dots{display:flex;gap:4px;margin:8px 0}
.sh-dots span{flex:1;height:7px;border-radius:9px;background:var(--morado-soft)}
.sh-dots span.d{background:var(--ink)}
.sh-dots span.c{outline:2px solid var(--oro);outline-offset:1px}
.sh-dots.big span{height:10px}
.sh-goal{font-size:14px;line-height:1.45;background:var(--morado-soft);border-radius:10px;padding:8px 10px}
.sh-sealed{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px;color:var(--gris)}
.sh-sealed .ink{flex:none}
.done-block .card.result{padding-top:18px}
.done-block .btn+.btn{margin-top:10px}
.unit-prog{margin:10px 0 4px}
.pstep .ps-num.ink-mini{background:transparent;color:var(--ink);border:2.5px solid var(--ink);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--ink);transform:rotate(-10deg);font-size:16px}
.pstep.done{border-color:var(--ink)}
.ps-seal{font-size:11.5px;font-weight:700;color:var(--ink);margin-top:3px;letter-spacing:.02em}
.vpath{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:12px;margin:8px 0}
.vpath .vp-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--font-display);background:var(--morado-soft);color:var(--ink);flex:none}
.vpath .vp-ic{font-size:24px;flex:none}
.vpath .vp-go{font:700 13px var(--font-display);color:var(--ink);white-space:nowrap}
.vpath.now{border:2px solid var(--rosa);box-shadow:0 0 0 4px var(--rosa-soft)}
.vpath.done{border-color:var(--ink)}
.vpath.done .vp-n{background:transparent;border:2.5px solid var(--ink);transform:rotate(-10deg)}
.vpath .vp-stamp{font:700 18px var(--font-display);color:var(--ink)}
.vbar .progress-track{margin-top:8px}
/* examen oficial y boleta */
.exam-mode .em-t{font:700 17px var(--font-display);margin-bottom:4px}
.exam-mode.oficial{border:2px solid var(--ink)}
.em-tries{display:flex;gap:6px;margin-top:8px}
.em-tries span{flex:1;text-align:center;border:1.5px dashed var(--borde);border-radius:10px;padding:6px 0;font:700 13px var(--font-display);color:var(--gris)}
.em-tries span.ok{border:2px solid var(--verde);color:var(--verde)}
.em-tries span.no{border:2px solid var(--rojo,#C2413B);color:var(--rojo,#C2413B)}
.em-tries span.inc{border-style:solid;color:var(--gris)}
.code4{width:100%;text-align:center;font:700 28px var(--font-display);letter-spacing:.4em;padding:10px;border:2px solid var(--borde);border-radius:12px;margin-top:6px}
.of-band{background:var(--ink);color:#fff;border-radius:10px;padding:6px 10px;font:600 13px var(--font-display);margin:6px 0 8px;text-align:center}
.boleta-wrap{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(46,31,69,.12)}
.boleta-wrap svg{display:block;width:100%;height:auto}
.reopen{border-top:1px dashed var(--borde);padding-top:10px}
/* examen oficial: marcas y recordatorio */
.ps-exams{display:flex;gap:10px;flex-wrap:wrap}
.ps-exams .ok{color:var(--verde);font-weight:700}
.ps-exams .pend{color:var(--ink);font-weight:700}
.of-prompt{border:2px dashed var(--ink)}
.of-remind{margin:10px 0}
.of-r-main{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:12px}
.of-r-main span{display:block;font-size:12.5px;color:var(--gris)}
.of-r-hide{background:none;border:0;color:var(--gris);font-size:12px;margin:4px 2px 0;padding:4px 0;text-decoration:underline}
.cr-v{display:flex;align-items:center;gap:8px}
.cr-of{font-weight:700;color:var(--ink)}
/* accesibilidad: botones de regreso del tamaño del dedo (44 px) y textos con mejor contraste */
.sh-unit,.mis-cursos,.cback{min-height:44px;min-width:44px;display:inline-flex;align-items:center;padding:0 10px 0 2px}
.mis-cursos{margin:-8px 0 4px}
.cback{margin-bottom:0}
.nav-item{color:#6E6580}
.nav-item span{font-size:11px}
.pstep.lock{opacity:.85}
.pstep.lock .ps-title,.pstep.lock .ps-kind,.pstep.lock .ps-sub{color:#5F5670}
.nc-unit{opacity:1;color:#E7E2F0}
.nc-kind{color:#F7B9CF}
.of-r-hide{min-height:44px}
/* frases largas del reto y tablas de reglas: que se acomoden en pantallas angostas y con texto grande */
.kw-row .chip{white-space:normal;text-align:left;max-width:100%;flex-shrink:1}
.rule-table{table-layout:fixed}
.rule-table th,.rule-table td{overflow-wrap:anywhere;word-break:normal}

/* 1.3.2 · nunca un callejón sin salida */
.sh-next{margin-top:10px}
.miss-card{border:2px solid var(--oro);background:var(--oro-soft);text-align:center}
.miss-card > b{display:block;font-family:var(--font-display);font-size:17px;color:var(--tinta)}
.miss-words{margin:6px 0 12px;font-size:18px;font-weight:700;color:var(--morado-dark);overflow-wrap:anywhere}
.miss-dot{font-size:12px;font-weight:700;color:#8A5A00;background:var(--oro-soft);border:1px solid var(--oro);border-radius:999px;padding:2px 8px;margin-right:6px;white-space:nowrap}

/* 1.4.0 · un solo botón grande que dice qué sigue */
.nc-go{margin-top:14px;font-size:18px;min-height:54px}
.nc-link{display:block;width:100%;margin-top:8px;background:none;border:0;color:inherit;opacity:.85;font:600 14px var(--font-body);text-decoration:underline;text-underline-offset:3px;padding:8px;cursor:pointer;min-height:44px}
.unit-full{text-align:center;border:2px solid var(--oro);background:linear-gradient(#FFFDF4,#FFF8E2)}
.unit-full .ink{margin:4px auto 0}
.uf-of{background:var(--morado-soft);border-radius:12px;padding:8px 12px;margin:0 0 12px;color:var(--tinta)}
.voice-guide{margin-top:10px;background:var(--morado-soft);border-radius:14px;padding:10px 12px}
.voice-guide summary{font-weight:700;color:var(--morado-dark);cursor:pointer;min-height:32px}
.vg-tabs{display:flex;gap:6px;margin-bottom:6px}
.vg-tabs button{flex:1;min-height:40px;border-radius:10px;border:2px solid var(--morado);background:#fff;color:var(--morado-dark);font-weight:700}
.vg-tabs button.on{background:var(--morado);color:#fff}
.vg-steps{margin:6px 0 0;padding-left:22px;font-size:14.5px;line-height:1.45}
.vg-steps li{margin:6px 0}

/* 1.5.0 · hoja «Para tu cuaderno» (se ve como una hoja de libreta) */
@font-face{font-family:SoarHand;src:url(../fonts/patrick-hand-latin-400-normal.woff2) format("woff2");font-display:swap}
.nb-how{background:var(--oro-soft);border:2px solid var(--oro);border-radius:14px;padding:10px 14px;margin:6px 0 10px;font-size:14.5px}
.nb-how ol{margin:6px 0 0;padding-left:20px}.nb-how li{margin:3px 0}
.nb-sheet{--L:30px;position:relative;background:#FFFEF8;border-radius:6px;box-shadow:0 4px 18px rgba(46,31,69,.14);padding:6px 14px 18px 30px;
  background-image:linear-gradient(to bottom,transparent calc(var(--L) - 1px),#C9D9EE calc(var(--L) - 1px),#C9D9EE var(--L));background-size:100% var(--L);background-position:0 4px;
  font-family:SoarHand,"Patrick Hand","Comic Sans MS",cursive;font-size:19px;line-height:var(--L);color:#1F3F8F;overflow-wrap:anywhere}
.nb-sheet:before{content:"";position:absolute;left:20px;top:0;bottom:0;border-left:2px solid #EBA9A9}
.nb-sheet p,.nb-sheet h2,.nb-sheet h3{margin:0}
.nb-top{display:flex;justify-content:space-between;gap:8px;color:#5c5c5c;font-size:16px;flex-wrap:wrap}
.nb-title{color:#C0392B;font-size:25px;line-height:calc(var(--L)*1.5);padding-top:2px}.nb-title small{color:#666;font-size:16px;font-weight:400}
.nb-h{color:#C0392B;font-size:21px;margin-top:var(--L)!important;font-family:inherit;font-weight:700;line-height:var(--L)}
.nb-sheet h2,.nb-sheet h3{font-family:inherit;letter-spacing:0}
.nb-n{display:inline-grid;place-items:center;width:22px;height:22px;border:2px solid #C0392B;border-radius:50%;font-size:13px;line-height:1;margin-right:6px;vertical-align:2px}
.nb-sheet mark{background:linear-gradient(transparent 35%,#FFE66D 35%,#FFE66D 90%,transparent 90%);color:inherit;padding:0 2px}
.nb-r{color:#C0392B;font-weight:700}.nb-m{color:#5B2D8E}
.nb-sheet s{color:#888;text-decoration-color:#C0392B}
.nb-voc{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));column-gap:12px}
.nb-voc span,.nb-voc div{color:#444}.nb-voc b{color:#1F3F8F}
.nb-tw{overflow-x:auto;max-width:100%}
.nb-t{border-collapse:collapse;margin:0}
.nb-t{font-size:16px;width:100%}
.nb-t td,.nb-t th{border:2px solid #1F3F8F;padding:2px 6px;height:var(--L);text-align:left;font-weight:400;line-height:1.25;vertical-align:middle}
.nb-t th{color:#C0392B}
.nb-no{color:#888;text-decoration:line-through;text-decoration-color:#C0392B}.nb-no:before{content:"✗ ";color:#C0392B;text-decoration:none;display:inline-block}
.nb-ok:before{content:"✓ ";color:#1E7D4F;font-weight:700}
.nb-sheet small{color:#666;font-size:15px}
.nb-blank{display:inline-block;min-width:64px;border-bottom:2px solid #1F3F8F;height:18px;vertical-align:baseline}
.nb-blank.long{min-width:140px}
.nb-arrow{color:#C0392B}
.nb-ans{color:#1E7D4F;font-weight:700;padding-left:18px;background:#E3F5EC80}
.nb-box{border:2.5px dashed #5B2D8E;border-radius:10px;padding:0 10px;margin-top:var(--L);color:#5B2D8E}
.uf-nb{display:block;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;font-size:14px;min-height:44px}

/* 1.5.1 · hoja completa del cuaderno (el diseño aprobado: como una hoja de libreta) */
@font-face{font-family:SoarKalam;src:url(../fonts/kalam-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:SoarKalam;font-weight:700;src:url(../fonts/kalam-latin-700-normal.woff2) format("woff2");font-display:swap}
.nbp-fit{position:relative;overflow:hidden;margin:4px 0 6px}
.nbp{--L:34px;--azul:#1f3f8f;--rojo:#c0392b;--verde:#1e7d4f;--mora:#5b2d8e;--mk:#ffe66d;
  width:1000px;transform-origin:0 0;position:relative;background:#fffef8;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.16);
  background-image:linear-gradient(to bottom,transparent calc(var(--L) - 1px),#b9cde8 calc(var(--L) - 1px),#b9cde8 var(--L));background-size:100% var(--L);background-position:0 12px;
  padding:12px 44px 46px 112px;color:var(--azul);font-family:SoarKalam,"Kalam",cursive;font-size:23px;line-height:var(--L);text-align:left}
.nbp:before{content:"";position:absolute;left:92px;top:0;bottom:0;border-left:2px solid #e8a3a3}
.nbp-holes{position:absolute;left:26px;top:80px;bottom:80px;display:flex;flex-direction:column;justify-content:space-between}
.nbp-holes i{width:22px;height:22px;border-radius:50%;background:#d9d4cc;box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.nbp p,.nbp h2,.nbp h3,.nbp table{margin:0;font-family:inherit;letter-spacing:0}
.nbp-top{display:flex;justify-content:space-between;color:#555;font-size:21px}
.nbp-title{font-size:34px;color:var(--rojo);font-weight:700;line-height:calc(var(--L)*2)}
.nbp-title small{font-size:22px;color:#555;font-weight:400}
.nbp-h{font-size:26px;color:var(--rojo);font-weight:700;margin-top:var(--L)!important;line-height:var(--L)}
.nbp-h small{font-size:19px;color:#666;font-weight:400}
.nbp-n{display:inline-block;width:30px;height:30px;line-height:27px;border:2px solid var(--rojo);border-radius:50%;text-align:center;font-size:18px;margin-right:8px;transform:translateY(-2px)}
.nbp mark{background:linear-gradient(transparent 38%,var(--mk) 38%,var(--mk) 88%,transparent 88%);color:inherit;padding:0 3px}
.nbp .nb-r{color:var(--rojo);font-weight:700}.nbp-m{color:var(--mora);font-weight:700}
.nbp s{color:#777;text-decoration-color:var(--rojo)}
.nbp-voc{display:grid;grid-template-columns:1fr 1fr;column-gap:36px}
.nbp-voc b{color:var(--azul)}.nbp-voc span{color:#444}
.nbp-t{border-collapse:collapse}
.nbp-t td,.nbp-t th{border:2px solid var(--azul);padding:0 14px;height:var(--L);text-align:left;font-weight:400;line-height:calc(var(--L) - 4px)}
.nbp-t th{color:var(--rojo);font-weight:700}
.nbp-no{color:#777;text-decoration:line-through;text-decoration-color:var(--rojo);margin-right:26px}.nbp-no:before{content:"✗ ";color:var(--rojo);font-weight:700;display:inline-block;margin-right:4px}
.nbp-ok{margin-right:26px}.nbp-ok:before{content:"✓ ";color:var(--verde);font-weight:700}
.nbp-arrow{color:var(--rojo);margin:0 8px}
.nbp small{font-size:19px;color:#666}
.nbp-blank{display:inline-block;border-bottom:2px solid var(--azul);min-width:80px;height:24px;vertical-align:baseline}
.nbp-blank.long{min-width:330px}
.nbp-ans{color:var(--verde);font-weight:700;padding-left:22px;background:rgba(227,245,236,.7)}
.nbp-note{color:var(--verde);font-size:19px}
.nbp-box{border:2.5px dashed var(--mora);border-radius:10px;padding:0 16px;margin-top:var(--L);color:var(--mora)}
.nbp-box small{color:#666}
@media print{
  body.apuntes-on header,body.apuntes-on .dots-row,body.apuntes-on .bottomnav,body.apuntes-on .no-print,body.apuntes-on .toast{display:none!important}
  body.apuntes-on{background:#fff}
  body.apuntes-on #app{padding:0!important;max-width:none!important}
  .nbp-print{break-after:page;page-break-after:always}
  .nbp-print .nbp-fit{height:auto!important;overflow:visible}
  .nbp-print .nbp{transform:none!important;box-shadow:none;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.nbp .nb-blank{min-width:110px;height:24px;border-bottom-width:2px}
/* 1.5.1 · Practicar y unidad */
.section-title.small-t{font-size:12px;margin:16px 2px 6px;opacity:.85}
.practice-link{margin-top:18px}
.u-temario{margin-top:8px;font-size:13.5px}
.u-temario summary{cursor:pointer;font-weight:700;color:var(--morado-dark);min-height:32px}
.u-temario p{margin:6px 0 0;color:var(--gris)}
.cr-btn{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;min-height:44px}
.book .cv.cu{background:linear-gradient(155deg,#FFE66D,#F2C14E)}
@media print{
  .nbp{--L:32px} /* 2.13 · un poco más junto al imprimir: la hoja de la unidad cabe en 3 o 4 páginas, sin una página casi vacía al final */
  .nbp p,.nbp tr,.nbp h3,.nbp-box,.nbp-voc{break-inside:avoid;page-break-inside:avoid}
  .nbp h3{break-after:avoid;page-break-after:avoid}
  .nbp-holes{display:none}
}
@media print{
  body.apuntes-on #shell,body.apuntes-on main#app{width:1000px!important;max-width:none!important;margin:0!important;padding:0!important;box-shadow:none!important;border:0!important;overflow:visible!important}
  body.apuntes-on .nbp-print,body.apuntes-on .nbp-fit{width:1000px!important;margin:0!important;padding:0!important;overflow:visible!important;height:auto!important}
  body.apuntes-on .nbp{margin:0!important;border-radius:0}
}

/* 1.5.2 · como la hoja de muestra: marcatextos amarillo, «Corrige el error» tachado y huecos cortos */
.nbp .mk,.nb-sheet .mk{background:linear-gradient(transparent 38%,#FFE66D 38%,#FFE66D 88%,transparent 88%)!important;color:inherit;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.nbp .nb-blank{min-width:76px}
.nbp .nbp-no.tight{margin-right:0}
.nb-sheet .mk{padding:0 1px;-webkit-box-decoration-break:slice;box-decoration-break:slice}
/* 1.5.5 · modo repaso y avisos */
.sh-wrap>.back-btn{margin-bottom:10px}
.repaso-band{background:#EAF4FF;border:1.5px dashed #5B8DEF;color:#1F3F8A;border-radius:12px;padding:8px 12px;font-weight:700;font-size:14px;margin:0 0 10px;text-align:center}
.of-warn{background:#FFF1E6;border:2px solid #E8590C;color:#7A2E00;border-radius:14px;padding:12px 14px;font-weight:700;font-size:14.5px;margin:0 0 12px}
.best-note{background:#EAF7EE;border-radius:10px;padding:8px 10px;color:#1D5B33;margin:0 0 10px}
.gate p{line-height:1.45}

/* 1.5.7 · avisos morados con letra blanca; se cierran al tocarlos */
.toast{background:#5C142C;color:#fff;border:1.5px solid rgba(255,255,255,.25);font-weight:700;font-size:15px;line-height:1.35;border-radius:16px;padding:12px 18px;box-shadow:0 6px 20px rgba(0,0,0,.22);width:max-content;max-width:min(92vw,440px)}
.toast.on{pointer-events:auto;cursor:pointer}
.back-bottom{display:flex;margin:22px auto 8px;width:max-content;max-width:100%}
/* 1.5.7 · «Notas de mi maestro(a)» al final de cada hoja */
.nb-tbox,.nbp-tbox{border-color:#c0392b;color:#c0392b;padding-bottom:14px}
.nb-tbox small,.nbp-tbox small{color:#555}
.nb-wline,.nbp-wline{border-bottom:1.5px dotted #c0392b;margin:0 4px!important}
/* 1.5.8 · el logo de Kjimi (morado con el círculo) en lugar de la letra */
.brand-mark{background:linear-gradient(145deg,#9A2E52,#5C142C)!important;border:2px solid rgba(255,255,255,.55)!important;color:#fff!important}
.brand-mark svg{width:30px;height:30px;display:block}
/* 1.5.9 · «‹ Atrás» con contorno rosa y letra azul marino (no se confunde con el morado de la app) */
.back-btn{border:2px solid var(--rosa,#D4A017)!important;color:var(--marino,#1B3A5C)!important;background:#fff!important}
.back-btn svg{stroke:var(--rosa-dark,#A87C10)}
/* candado de «Revisar mis respuestas»: las lecciones de gramática que faltan */
.nb-lock{margin-top:8px;border:1.5px dashed var(--borde,#ddd)}
.nb-lk-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #eee}
.nb-lk-row.ok b{color:var(--verde,#1e7d4f)}
.nb-lk-ic{font-size:20px}
.btn.small{padding:8px 12px;font-size:13.5px;min-height:40px;width:auto}
/* tarjeta de iPhone antes de abrir el PDF */
.pdf-tip-bg{position:fixed;inset:0;background:rgba(20,10,35,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.pdf-tip{max-width:420px;width:100%;margin:0}
.pdf-tip ul{margin:10px 0 14px;padding-left:20px;line-height:1.5}
.pdf-tip-chk{display:flex;align-items:center;gap:8px;justify-content:center;margin:10px 0 0;font-size:14px}
.pdf-tip-chk input{width:20px;height:20px}
/* 1.6.0 · Une las parejas */
.match-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:2px 2px 10px;font-size:13px;color:var(--gris)}
.match-clock{color:var(--ink);font-size:15px;white-space:nowrap}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.match-col{display:flex;flex-direction:column;gap:8px}
.mbtn{min-height:54px;border-radius:14px;border:2px solid var(--borde,#ddd);background:#fff;font:700 15px var(--font-display);color:var(--marino,#1B3A5C);padding:8px 10px;line-height:1.25;transition:transform .15s,background .15s,opacity .25s}
.mbtn.en{border-color:#C9B6E4}.mbtn.es{border-color:#F3C3D6;font-weight:600}
.mbtn.sel{background:#EDE4F8;border-color:var(--p,#7A1E3C);transform:scale(1.03)}
.mbtn.ok{background:#D8F5E1;border-color:#2E9E5B;color:#1D5B33;opacity:.4}
.mbtn.bad{background:#FDE2E2;border-color:#D64545;animation:mshake .35s}
@keyframes mshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
/* Frases del día a día */
.frase-head{display:flex;align-items:center;gap:12px;margin:0 2px 10px}
.frase-ic{font-size:38px}
.frase-exp p{line-height:1.5}
.frase-tip{background:#FFF7DB;border:1.5px solid #E9C46A;border-radius:14px;padding:10px 12px;margin:10px 0;line-height:1.45}
.frase-row.done .s{color:var(--verde,#1e7d4f)}
/* Trucos de pronunciación */
.trick{padding:12px 12px 6px}
.trick-flag{display:inline-block;font:800 20px var(--font-display);color:#1A1A1A;padding:6px 18px 6px 12px;border-radius:4px;clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.trick-row{display:grid;grid-template-columns:minmax(64px,1fr) auto minmax(60px,1fr) auto minmax(70px,1.2fr) auto;align-items:center;gap:6px;width:100%;background:none;border:0;border-top:1px solid #eee;padding:9px 2px;text-align:left;font-size:14px}
.tr-es{color:var(--gris)}
.tr-arrow{color:var(--gris);font-weight:700}
.tr-en{font:700 17px var(--font-display);color:var(--ink);letter-spacing:.02em}
.tr-en u{text-decoration:none;color:#D64545;border-bottom:2.5px solid #D64545}
.tr-snd{font:700 17px Kalam,var(--font-display),cursive;color:#1f3f8f}
.tr-play{font-size:16px}
.trick-link{margin-bottom:12px}
/* 1.6.1 · confirmar antes de borrar */
.danger-btn{color:var(--rojo,#C0392B)!important;border-color:var(--rojo,#C0392B)!important}
.danger-confirm{border:2.5px solid #C0392B;background:#FDECEC;border-radius:14px;padding:12px 14px;width:100%}
.danger-confirm p{margin:0;color:#7A1A12}
.danger-blink{font:800 16px var(--font-display);color:#B3261E!important}
@media (prefers-reduced-motion:no-preference){.danger-blink{animation:dblink 1.1s ease-in-out infinite}}
@keyframes dblink{50%{opacity:.35}}
.btn.danger-yes{background:#C0392B!important;color:#fff!important;border-color:#C0392B!important}
.btn.danger-yes:disabled{opacity:.45}
/* 1.6.1 · constancia de muestra en Mi avance */
.cert-sample{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.cert-stamp{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-24deg);font:800 32px var(--font-display),sans-serif;color:rgba(214,69,69,.5);border:3px solid rgba(214,69,69,.5);padding:2px 12px;border-radius:10px;letter-spacing:.1em;pointer-events:none;z-index:2;white-space:nowrap}
/* 1.6.2 · la materia, siempre visible */
.brand-text h1.course-ttl{font-size:23px;letter-spacing:.01em}
.course-title{font:800 34px var(--font-display);line-height:1.05;margin:2px 0 6px}
.course-chip{display:inline-block;background:var(--morado);color:var(--on-p,#fff);font:800 12px var(--font-display);letter-spacing:.08em;padding:4px 10px;border-radius:999px;margin:0 0 8px}
.cert-sign{margin:18px auto 6px;max-width:280px;display:flex;flex-direction:column;align-items:center;gap:2px}
.cert-sign-line{width:100%;border-top:2px solid #2B2420;margin-bottom:4px}
.cert-sign b{font:700 15px var(--font-display);color:var(--marino,#1B3A5C)}
.cert-sign span{font-size:12px;color:var(--gris)}
.cert-grid.one{grid-template-columns:1fr}
/* sello «TERMINADA» en las unidades al 100 % */
.tm-unit{position:relative;overflow:hidden}
.tm-stamp{position:absolute;right:10px;bottom:8px;transform:rotate(-10deg);font:800 15px var(--font-display);letter-spacing:.12em;color:#1E7D4F;border:2.5px solid #1E7D4F;border-radius:8px;padding:2px 8px;background:rgba(234,247,238,.88);pointer-events:none}
/* ventana «¿quieres repasarla?» */
.ask-bg{position:fixed;inset:0;background:rgba(20,10,35,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.ask-box{max-width:420px;width:100%;margin:0;text-align:center}
/* exámenes oficiales pendientes */
.of-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #eee}
.of-row:first-of-type{border-top:0}
.of-row .of-u{flex:1;min-width:0}
.of-row .btn{width:auto;padding:9px 14px}
/* 1.6.3 · unidad aprobada a la que le faltan pasos */
.tm-chip.ok.miss{background:#FFF1D6;color:#8A5A00}
.tm-miss{font-size:13px;color:#8A5A00;margin-top:2px}
.tm-miss b{font-weight:700}
/* 1.6.4 · modo PRÁCTICA */
body.practice-on{background:#E6F4F1}
.prac-badge{display:none;margin-left:auto;margin-right:8px;flex-shrink:0;background:#0F6E56;color:#fff;border:2px solid #fff;border-radius:999px;padding:4px 10px;font:800 12px var(--font-display);letter-spacing:.06em;box-shadow:0 2px 8px rgba(0,0,0,.2)}
body.practice-on .prac-badge{display:block}
body.apuntes-on .prac-badge,body.manual-on .prac-badge{display:none}
@media (prefers-reduced-motion:no-preference){.prac-badge.blink3{animation:pblink .55s ease-in-out 6 alternate}}
@keyframes pblink{from{opacity:1}to{opacity:.15}}
@media print{.prac-badge{display:none!important}}
.topbar .brand{flex:1;min-width:0}.topbar .brand-text{min-width:0}
.topbar .brand-text h1{white-space:nowrap}
.topbar .brand-text p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){.brand-text h1.course-ttl{font-size:20px}.prac-badge{font-size:10.5px;padding:3px 7px;margin-right:4px;letter-spacing:.03em}.topbar{padding-left:14px;padding-right:14px}}
/* 1.6.5 · exámenes oficiales */
.of-st-ready{color:#1E7D4F;font-weight:700}.of-st-ok{color:var(--gris)}.of-st-lock{color:#8A5A00}
.btn.of-list-btn{background:#1B3A5C;color:#fff}
/* 1.6.6 · constancia horizontal */
.cert-wrap{margin:0 0 10px}
.cert-svg{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(46,31,69,.18);background:#FFFDF6}
.cert-svg>svg,.cert-big-in>svg{width:100%;height:auto;display:block}
.cert-svg .cert-stamp{font-size:30px;top:46%}
.cert-big{position:fixed;inset:0;z-index:300;background:rgba(12,6,24,.94);display:flex;align-items:center;justify-content:center;flex-direction:column}
.cert-big-in{position:relative;width:min(96vw,calc(96vh * 1.294))}
@media (orientation:portrait){.cert-big-in{width:min(92vh,calc(94vw * 1.294));transform:rotate(90deg)}}
.cert-big-in .cert-stamp{font-size:64px;border-width:6px}
.cert-big-x{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#fff;font:700 14px var(--font-display);opacity:.85}
@page certpage{size:letter landscape;margin:0.35in}
@media print{body.cert-on .cert-wrap{page:certpage}body.cert-on .cert-svg{box-shadow:none;border-radius:0}body.cert-on #app>*:not(.cert-wrap){display:none!important}}
.ev-card{padding:12px 14px 6px}.ev-t{display:block;font:700 15px var(--font-display);margin-bottom:2px}
.ev-sum{display:flex;flex-wrap:wrap;gap:6px 16px;background:#fff;border-radius:12px;padding:10px 12px;margin:0 0 10px;font-size:14px}
.tap-hint{font-size:12.5px;color:var(--gris);margin:4px 2px 0}
.rule-table td,.rule-table th{cursor:pointer}
.rule-table td.said,.rule-table th.said{background:#EAF4FF!important;transition:background .2s}
/* 1.6.7 · al contestar «¿Cómo se dice en inglés?» aparece la palabra con su 🔊 */
.reveal-en{display:flex;justify-content:center;margin:10px auto 0;animation:revealIn .3s ease}
@keyframes revealIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* 1.6.7 · boleta de muestra en Evaluación */
.ev-bol{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ev-bol>.btn{flex:none}
@media (max-width:420px){.ev-bol>.btn{width:100%}}
.bol-big{position:fixed;inset:0;z-index:300;background:rgba(12,6,24,.94);display:flex;align-items:center;justify-content:center}
.bol-big-in{position:relative;width:min(92vw,calc(84vh*.8));border-radius:12px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.bol-big-in svg{display:block;width:100%;height:auto}
.bol-big-in .cert-stamp{top:45%}

/* ===================== 1.7.0 · 📖 Consulta (diccionario, tiempos y modales, verbos) ===================== */
.cs-top-btn{margin-left:auto;margin-right:8px;flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.16);font-size:18px;line-height:1;display:grid;place-items:center;padding:0;cursor:pointer}
html[data-course="sin-tema-2"] .cs-top-btn,html[data-course="sin-tema-4"] .cs-top-btn{background:rgba(255,255,255,.45);border-color:rgba(27,42,74,.3)}
body.practice-on .cs-top-btn{margin-left:0}
body.exam-on .cs-top-btn,body.welcome-on .cs-top-btn,body.manual-on .cs-top-btn,body.apuntes-on .cs-top-btn{display:none}
@media (max-width:400px){.cs-top-btn{width:34px;height:34px;font-size:16px;margin-right:6px}}
@media print{.cs-top-btn,.cs-ov{display:none!important}}

.cs-ov{position:fixed;inset:0;z-index:250;background:var(--fondo);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cs-ov.cs-prac{background:#E6F4F1}
.cs-top{position:sticky;top:0;z-index:2;background:var(--morado);color:#fff;padding:calc(10px + env(safe-area-inset-top)) 14px 0;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.cs-head{display:flex;align-items:center;gap:8px;max-width:560px;margin:0 auto}
.cs-title{font:800 19px var(--font-display);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-ov .cs-badge{margin:0}
.cs-ov.cs-prac .cs-badge{display:block!important}
.cs-ov:not(.cs-prac) .cs-badge{display:none!important}
.cs-x{flex:none;background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.5);border-radius:999px;padding:6px 12px;font:700 13px var(--font-display);cursor:pointer}
.cs-tabs{display:flex;gap:4px;max-width:560px;margin:10px auto 0;overflow-x:auto;scrollbar-width:none}
.cs-tabs::-webkit-scrollbar{display:none}
.cs-tab{flex:1 0 auto;background:transparent;color:rgba(255,255,255,.82);border:0;border-bottom:3px solid transparent;padding:8px 8px 9px;font:700 13.5px var(--font-display);white-space:nowrap;cursor:pointer}
.cs-tab.on{color:#fff;border-bottom-color:var(--oro)}
.cs-in{max-width:560px;margin:0 auto;padding:12px 16px calc(96px + env(safe-area-inset-bottom))}
.cs-crumb{font-size:12.5px;color:var(--gris);margin:0 2px 8px;line-height:1.6}
.cs-crumb:empty{display:none}
.cs-cl{background:none;border:0;padding:0;color:var(--morado);font:600 12.5px inherit;font-family:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cs-crumb b{color:var(--tinta)}
.cs-back{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:4px;background:var(--morado);color:#fff;border:2px solid #fff;border-radius:999px;padding:7px 14px 7px 9px;font:700 13.5px var(--font-display);box-shadow:0 4px 14px rgba(46,31,69,.35);cursor:pointer}
.cs-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cs-note{background:#D4EFE6;border:1.5px solid #0F6E56;color:#0B4F3E;border-radius:12px;padding:8px 12px;font-size:13px;margin:0 0 10px}
.cs-en{display:inline;background:none;border:0;padding:0;text-align:left;font:700 15.5px var(--font-display);color:var(--ink);cursor:pointer;text-decoration:underline dotted #B9A6D6;text-underline-offset:4px}
.cs-en:active{background:#FFF3C4}
.cs-ex{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--borde)}
.cs-ex:last-child{border-bottom:0}
.cs-ex .es{color:var(--gris);font-size:13.5px;margin-top:2px}
.cs-mk{flex:none;width:24px;text-align:center;font-size:17px;line-height:1.4}
.cs-irr-hit{border:2px solid var(--oro);background:var(--oro-soft);display:flex;flex-direction:column;gap:8px}
.cs-forms .cs-en{font-size:18px}
/* línea del tiempo */
.tl{padding:12px 10px}
.tl-arrow{display:flex;justify-content:space-between;align-items:center;position:relative;margin:0 4px 10px;font:800 11px var(--font-display);letter-spacing:.08em;color:var(--gris)}
.tl-arrow:before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;border-radius:3px;background:linear-gradient(90deg,#2F6FD0,#1F8A5B 50%,#D9731A);z-index:0}
.tl-arrow:after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%);border:7px solid transparent;border-left-color:#D9731A}
.tl-arrow span{position:relative;z-index:1;background:#fff;padding:0 6px}
.tl-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.tl-col,.tl-mod{background:var(--s);border:1.5px solid var(--c);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:5px}
.tl-h{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.2}
.tl-h b{font:800 13px var(--font-display);color:var(--c)}
.tl-h span{font-size:10.5px;color:var(--gris)}
.tl-chip{background:#fff;border:1.5px solid var(--c);color:var(--ink);border-radius:9px;padding:6px 4px;font:700 12px var(--font-display);line-height:1.15;cursor:pointer;overflow-wrap:anywhere}
.tl-chip:active{background:var(--s)}
.tl-bridge{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;width:100%;margin:8px 0;background:linear-gradient(90deg,#E6EFFC,#E3F5EC);border:1.5px solid #1F8A5B;border-radius:12px;padding:8px;font-size:12px;cursor:pointer}
.tl-bridge b{font:800 13px var(--font-display);color:var(--ink)}
.tl-bridge span:last-child{color:var(--gris)}
.tl-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
/* grupos y fichas */
.cs-grp .ic{background:var(--s);border:1.5px solid var(--c)}
.cs-ghead,.cs-fhead{background:var(--s);border-left:6px solid var(--c);border-radius:12px;padding:10px 14px;margin:0 0 10px}
.cs-ghead{display:flex;align-items:center;gap:12px}
.cs-gic{font-size:28px}
.cs-ghead h2,.cs-fhead h2{margin:0;font-size:21px}
.cs-fhead .small{color:var(--c);font-weight:700}
.cs-num{color:#fff;font:800 16px var(--font-display)}
.cs-card-row .s{margin-bottom:4px}
.cs-tag{display:inline-block;margin-top:4px;font:700 11.5px var(--font-display);border-radius:999px;padding:3px 9px;border:0}
.cs-tag.seen{background:#E3F5EC;color:#11603F}
.cs-tag.mine{background:var(--oro-soft);color:#7A5A00;cursor:pointer}
.cs-tag.later{background:#EFE6D8;color:#5E5470}
.cs-sec{padding:12px 14px;margin:8px 0}
.cs-sec p{margin:2px 0 0}
.cs-k{font:800 12px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.cs-como{margin:2px 0 0;padding-left:20px}
.cs-como li{margin:3px 0}
.cs-err{border:1.5px solid #F2C4C1}
.cs-bad{color:var(--rojo);font-weight:600}
.cs-good{margin-top:4px}
.cs-opt{padding:12px 14px}
.cs-res{border:2px solid var(--c);background:var(--s)}
/* verbos */
.cs-vleg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font:700 11px var(--font-display);color:var(--gris);text-transform:uppercase;letter-spacing:.05em;margin:0 6px 6px;text-align:center}
.cs-v{border-bottom:1px solid var(--borde)}
.cs-v:last-child{border-bottom:0}
.cs-vrow{display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;background:none;border:0;padding:10px 4px;text-align:left;cursor:pointer;gap:2px 8px}
.cs-vf{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font:600 15px var(--font-display);color:var(--ink);text-align:center}
.cs-vf b{color:var(--morado)}
.cs-ves{grid-column:1;font-size:12.5px;color:var(--gris);text-align:center}
.cs-chev{grid-row:1 / span 2;grid-column:2;color:var(--gris);transition:transform .2s}
.cs-vrow.open .cs-chev{transform:rotate(180deg)}
.cs-vrow.open{background:var(--morado-soft);border-radius:10px}
.cs-vdet{padding:0 6px 8px}
.cs-vdet .kick{font-size:11px}
/* barra de arriba con 📖 + 🎮 PRÁCTICA + 🔥 en celulares angostos */
.topbar .brand-text h1{overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){.topbar-row{gap:6px}.topbar .brand{gap:8px}.topbar .brand-mark{width:34px;height:34px}.topbar .brand-mark svg{width:22px;height:22px}
  .cs-top-btn{width:30px;height:30px;font-size:15px;margin-right:4px}.streak-pill{padding:4px 8px;font-size:13px}
  body.practice-on .brand-text h1.course-ttl{font-size:18px}body.practice-on #brandSub{display:none}}
/* Consulta con el color de cada curso (texto oscuro en Inglés II y IV) */
.cs-top{color:var(--on-p)}
.cs-tab{color:inherit;opacity:.78}.cs-tab.on{color:inherit;opacity:1}
.cs-x{color:inherit;border-color:currentColor;background:rgba(255,255,255,.16)}
@media (max-width:400px){.cs-tab{font-size:12.5px;padding:8px 5px 9px}.cs-title{font-size:17px}.cs-x{padding:5px 9px;font-size:12px}}
/* 1.7.1 · Gramática (tiempos + piezas), trucos y verbos con encabezado fijo */
.cs-block{margin:4px 0 16px}
.cs-bt{font:800 16px var(--font-display);color:var(--ink);margin:6px 2px 6px}
.cs-ggrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cs-gbtn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:1.5px solid var(--c);border-left:6px solid var(--c);border-radius:12px;padding:10px 12px;cursor:pointer;min-width:0}
.cs-gbtn b{font:800 14.5px var(--font-display);color:var(--ink)}
.cs-gbtn .s{font-size:12px;color:var(--gris);line-height:1.25}
.cs-gbic{font-size:20px}
.cs-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.cs-tbl th{background:var(--c);color:#fff;font:700 12px var(--font-display);text-align:left;padding:6px 8px}
.cs-tbl th:first-child{border-radius:8px 0 0 0}.cs-tbl th:last-child{border-radius:0 8px 0 0}
.cs-tbl td{padding:7px 8px;border-bottom:1px solid var(--borde);vertical-align:top;overflow-wrap:anywhere}
.cs-tbl tr:nth-child(even) td{background:var(--s)}
.cs-tbl .cs-en{font-size:14px}
.cs-truco{padding:12px 14px;margin:8px 0}
.cs-tt{display:flex;align-items:center;gap:8px;font:800 15.5px var(--font-display)}
.cs-tn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--oro);color:#fff;display:grid;place-items:center;font-size:12.5px}
.cs-tex{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:5px 0;border-top:1px dashed var(--borde)}
.cs-tarrow{color:var(--gris)}
.cs-vhead{position:sticky;top:96px;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 6px;padding:8px 34px 8px 14px;background:var(--fondo);border-radius:0 0 10px 10px;box-shadow:0 3px 6px rgba(46,31,69,.08)}
.cs-ov.cs-prac .cs-vhead{background:#E6F4F1}
.cs-vhead span{text-align:center;font:800 12.5px var(--font-display);border-radius:999px;padding:5px 2px;color:#fff}
.vh-pre{background:#1F8A5B}.vh-pas{background:#2F6FD0}.vh-par{background:#7A1E3C}
.cs-vf b{color:#1F8A5B}.cs-vf span:nth-child(2){color:#2F6FD0}.cs-vf span:nth-child(3){color:#7A1E3C}
.cs-vmini{grid-column:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:11.5px;color:#9A90A8;text-align:center;font-style:italic}
.cs-chev{grid-row:1 / span 3}
/* pestañas: 4 iguales, ícono arriba y nombre abajo (caben en cualquier celular) */
.cs-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;overflow:visible}
.cs-tab{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px 8px;font:700 12.5px var(--font-display);min-width:0}
.cs-tab>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs-tic{font-size:17px;line-height:1.1}
@media (max-width:400px){.cs-tab{font-size:11.5px;padding:5px 1px 7px}}
/* tablas de las piezas: la palabra en inglés no se parte */
.cs-tbl td{overflow-wrap:break-word}
.cs-tbl td:first-child{white-space:nowrap;width:1%}
@media (max-width:400px){.cs-tbl{font-size:12.5px}.cs-tbl td,.cs-tbl th{padding:6px 5px}.cs-tbl .cs-en{font-size:13px}}
.cs-vhead{padding:8px 42px 8px 14px}
.cs-vhead span{white-space:nowrap;font-size:12px;padding:5px 0}
@media (max-width:400px){.cs-vhead span{font-size:11px}}
/* trucos de pronunciación: con la letra más grande, en celulares angostos se acomodan sin salirse */
.trick-row>*{min-width:0;overflow-wrap:anywhere}
@media (max-width:400px){.trick-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.2fr) auto;gap:4px;font-size:13px}}
.cs-vhead{z-index:5}.cs-ov.cs-prac .cs-vhead{background:#E6F4F1!important}
/* 1.7.2 · «‹ Regresar · …» flotante en pantallas largas (aparece al bajar) */
.back-float{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(76px + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:4px;max-width:min(72vw,360px);
  background:var(--morado);color:var(--on-p);border:2px solid #fff;border-radius:999px;padding:6px 13px 6px 8px;font:700 13px var(--font-display);box-shadow:0 4px 14px rgba(46,31,69,.35);cursor:pointer;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s}
.back-float.on{opacity:1;transform:none;pointer-events:auto}
.back-float span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.back-float svg{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
body.in-lesson .back-float{bottom:calc(14px + env(safe-area-inset-bottom))}
body.consulta-on .back-float{display:none}
@media print{.back-float{display:none!important}}
.cs-back{max-width:min(78vw,360px)}
.cs-back-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* 1.8.0 · globito del 📖 y recorrido de 3 pasos */
.cs-tip{position:fixed;z-index:60;pointer-events:none;max-width:240px;background:#1B3A5C;color:#fff;font:600 13.5px var(--font-display);line-height:1.3;padding:9px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:tipIn .25s ease;cursor:pointer}
.cs-tip:before{content:"";position:absolute;top:-7px;right:var(--ax,16px);border:7px solid transparent;border-top:0;border-bottom-color:#1B3A5C}
@keyframes tipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tour-bg{position:fixed;inset:0;z-index:400}
.tour-ring{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(20,10,35,.68);border:3px solid var(--oro);transition:all .25s;pointer-events:none}
.tour-card{position:fixed;left:16px;right:16px;max-width:420px;margin:0 auto;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.tour-card h3{margin:2px 0 4px;font:800 19px var(--font-display);color:var(--ink)}
.tour-card p{margin:0 0 12px;color:var(--tinta)}
.tour-card .btn{padding:10px 16px}
body.tour-on .back-float{display:none}
/* 1.8.0 · tarjeta del libro en Inicio */
.book-card{padding:14px}
.bkc-top{display:flex;gap:12px;align-items:center}
.bkc-cv{flex:none;width:52px;height:64px;border-radius:6px 10px 10px 6px;background:linear-gradient(135deg,var(--morado),var(--morado-dark));display:grid;place-items:center;font-size:26px;box-shadow:inset 6px 0 0 rgba(0,0,0,.18),0 3px 8px rgba(46,31,69,.2)}
.bkc-t{font:800 17px var(--font-display);display:block;margin:1px 0 2px}
.bkc-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
.bkc-btns .btn{padding:10px 4px;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bkc-btns{grid-template-columns:1fr 1fr}
.bkc-btns .btn.wa{grid-column:1 / -1}

/* ===================== 1.8.1 · contraste y tamaños (revisión de accesibilidad WCAG AA) ===================== */
:root{--rosa-dark:#A3416B;--gris:#665C74}
.btn.wa{background:#0F7A3A}
html[data-course="sin-tema-2"]{--ink:#8E3159}
html[data-course="sin-tema-4"]{--ink:#6E5004}
html[data-course="sin-tema-2"] .voice-guide summary,html[data-course="sin-tema-2"] .u-temario summary,html[data-course="sin-tema-4"] .voice-guide summary,html[data-course="sin-tema-4"] .u-temario summary{color:var(--ink)}
/* 📖 más fácil de tocar (≈44 px con la letra al 110 %) */
.cs-top-btn{width:40px;height:40px;font-size:19px}
@media (max-width:400px){.cs-top-btn{width:38px;height:38px;font-size:17px}}
/* 🎤 Grábate y compárate */
.rec-btn{border:0;background:#FDE8E8;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;font-size:18px;margin-right:6px;cursor:pointer}
.rec-box .rec-txt{font:800 22px var(--font-display);color:var(--ink);margin:6px 0 10px;overflow-wrap:anywhere}
.rec-big{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;border:0;margin:14px auto 8px;background:#C2413B;color:#fff;font-size:34px;box-shadow:0 6px 18px rgba(194,65,59,.35);cursor:pointer}
.rec-big.on{animation:recPulse 1.1s ease-in-out infinite;font-size:30px}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(194,65,59,.45)}50%{box-shadow:0 0 0 14px rgba(194,65,59,0)}}
.rec-st{font-size:14px;color:var(--tinta);min-height:40px}
.rec-row{justify-content:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.rec-row .btn:disabled{opacity:.45}
/* 🙈 Escucha sin ver el texto */
.rs-wrap{position:relative}
.reading-sheet.rs-hide{filter:blur(7px);pointer-events:none;user-select:none}
.rs-cover{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:30px}
.rs-cover-in{background:#fff;border:2px solid var(--morado);border-radius:16px;padding:16px;text-align:center;max-width:300px;box-shadow:0 8px 24px rgba(46,31,69,.18);display:flex;flex-direction:column}
/* celulares angostos en práctica: el título del curso, 🎮 PRÁCTICA y 📖 caben (la racha 🔥 se ve en Inicio) */
@media (max-width:400px){body.practice-on .streak-pill{display:none}body.practice-on .cs-top-btn{margin-right:0}}
/* 1.9.0 · 📁 Mi carpeta */
.cp-alert{background:var(--oro-soft);border:2px solid var(--oro);border-radius:12px;padding:10px 12px;font-weight:700;font-size:14px;margin:0 0 10px}
.cp-top{padding:14px}
.cp-doc{display:flex;gap:12px;align-items:center}
.cp-doc b{font:800 17px var(--font-display)}
.cp-link{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--borde);margin-top:10px;padding:10px 2px 0;font:700 14px var(--font-display);color:var(--ink);cursor:pointer}
.cp-unit{background:#fff;border:1px solid var(--borde);border-radius:14px;margin:8px 0;overflow:hidden}
.cp-unit.open{border-color:var(--morado);box-shadow:0 4px 14px rgba(46,31,69,.10)}
.cp-unit.ready:not(.open){border-color:var(--oro)}
.cp-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;padding:12px 14px;cursor:pointer}
.cp-head.open{background:var(--morado-soft)}
.cp-badge{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--oro-soft);border:2px solid var(--oro);font-size:18px}
.cp-ut{font:800 15px var(--font-display);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-chev{flex:none;color:var(--gris);transition:transform .2s}
.cp-head.open .cp-chev{transform:rotate(180deg)}
.cp-body{padding:4px 12px 10px}
.cp-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--borde)}
.cp-row:first-child{border-top:0}
.cp-row.cp-ready{background:#FFFBEF;border-radius:10px;padding:10px 8px}
.cp-ic{flex:none;font-size:20px;width:26px;text-align:center}
.cp-t{font-weight:700;font-size:14.5px;line-height:1.25}
.cp-s{font-size:12.5px;color:var(--gris);margin-top:1px}
.cp-btns{display:flex;gap:6px;flex:none}
.btn.sm{padding:8px 12px;font-size:13px;flex:none;border-radius:11px}
.hero-mini{padding:16px 18px}
.hero-mini .hero-title{margin:2px 0 2px}
.av-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.av-stats div{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:10px 6px;text-align:center}
.av-stats b{display:block;font:800 20px var(--font-display);color:var(--ink)}
.av-stats span{font-size:11.5px;color:var(--gris);font-weight:700}
.av-link{margin-top:16px}
.nav-item{position:relative}
.nav-item.dot:after{content:"";position:absolute;top:4px;right:calc(50% - 18px);width:10px;height:10px;border-radius:50%;background:#C2413B;border:2px solid #fff}
/* 1.9.1 · apuntes: mismas opciones que «Para tu cuaderno» */
.ap-uhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:16px 2px 6px}
.ap-uhead b{font:700 16px var(--font-display);color:var(--ink)}
.ap-big .nbp-print{display:none}
.ap-bigsheet{margin-bottom:12px}
@media print{.ap-big .nbp-print{display:block!important}}
/* 1.10.0 · 📘 Gramática: Por tema / Por curso, «Piénsalo así» y 10 frases del día a día */
.cs-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F1EDF7;border-radius:14px;padding:4px;margin:0 0 10px}
.cs-segb{border:0;background:none;border-radius:11px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--ink)}
.cs-segb b{font:800 14.5px var(--font-display)}
.cs-segb span{font-size:11.5px;color:var(--gris)}
.cs-segb.on{background:#fff;box-shadow:0 1px 4px rgba(40,20,70,.15)}
.cs-segb.on b{color:var(--morado,#7A1E3C)}
.cs-grow{border-left:5px solid var(--c)}
.cs-tblock{background:#F7F2E9;border-radius:14px;padding:6px 8px 8px;margin:8px 0 10px}
.cs-cchips{margin:0 0 6px}
.cs-cunit{padding:10px 12px;margin:8px 0}
.cs-cuh{display:flex;flex-direction:column;gap:1px;margin:0 2px 6px}
.cs-cuh b{font:800 15px var(--font-display);color:var(--ink)}
.cs-lrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--s);border:0;border-left:4px solid var(--c);border-radius:10px;padding:9px 10px;margin:6px 0 0;cursor:pointer;color:var(--ink)}
.cs-lic{font-size:20px;flex:none}
.cs-lt{font-weight:700;font-size:14.5px}
.cs-lrow .s{font-size:12px;color:var(--gris)}
.cs-idea{background:#FFFBEF;border:1.5px solid #F2D27A}
.cs-dia{border:1.5px solid #CDEBD8}
.cs-tw{overflow-x:auto}
.cs-tbl.wrap1 td:first-child{white-space:normal;width:auto}
.cs-tchips,.cs-cchips{display:grid;gap:6px;overflow:visible;flex-wrap:nowrap}
.cs-tchips{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-cchips{grid-template-columns:repeat(5,minmax(0,1fr))}
.cs-tchips .chip,.cs-cchips .chip{margin:0;white-space:normal;text-align:center;justify-content:center;padding:7px 4px;font-size:12.5px;line-height:1.2;min-width:0}
#csPron{scroll-margin-top:150px}
.cs-cchips .chip{font:800 15px var(--font-display)}
.tl-h b,.cs-fhead>.small{color:color-mix(in srgb,var(--c) 72%,#000)}
.tr-en u{color:#B03030}
/* 1.10.1 · 🔒 paso cerrado: qué falta */
.lock-page{text-align:center;padding:18px 16px}
.lock-page h2{margin:4px 0 0;font-size:20px}
.lp-ic{font-size:40px;line-height:1}
.lp-list{text-align:left;display:flex;flex-direction:column;gap:6px}
.lp-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#F6F3FA;border:1.5px solid transparent;border-radius:12px;padding:9px 12px;color:var(--ink);font:inherit}
.lp-row.on{background:var(--oro-soft);border-color:var(--oro);cursor:pointer}
.lp-box{flex:none;width:22px;text-align:center}
.lp-now{flex:none;font:800 11.5px var(--font-display);color:#7A5A00;background:#fff;border-radius:999px;padding:3px 8px}
/* 1.10.1 · encabezado de cada paso: dónde estoy */
.course-chip{font-size:14.5px;padding:6px 14px}
.sh-title{display:flex;align-items:center;gap:12px;margin:2px 2px 12px}
.sh-ic{flex:none;width:48px;height:48px;border-radius:14px;background:var(--morado-soft);display:grid;place-items:center;font-size:26px}
.sh-k{font:800 12.5px var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--morado)}
.sh-t{font:800 23px/1.15 var(--font-display);margin:2px 0 1px;color:var(--ink)}
.sh-u{font-size:13px;color:var(--gris)}
.sh-wrap>.course-chip{display:block;width:fit-content}
.where-bar{margin:0 0 10px}
.where-bar .course-chip{display:block;width:fit-content;margin-bottom:4px}
.wb-path{font-size:14px;color:var(--gris)}
.wb-path b{color:var(--ink);font-family:var(--font-display)}
.wb-t{font:800 17px var(--font-display);color:var(--ink);margin-top:1px}
/* 1.11.0 · 🎮 Juegos: «¿Qué quieres practicar?», frases y sin desplazarse */
.gsel{padding:12px 14px;margin:0 0 10px}
.gs-h{font:800 17px var(--font-display);color:var(--ink);margin-bottom:6px}
.gs-k{font:800 11.5px var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:8px 2px 5px}
.gs-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.gs-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.gs-t{border:1.5px solid var(--borde);background:#fff;border-radius:12px;padding:8px 6px;font:700 13px var(--font-display);color:var(--ink);cursor:pointer;min-height:44px;line-height:1.2}
.gs-units .gs-t>span{display:flex;flex-direction:column;align-items:center;gap:1px}
.gs-units .gs-t b{font-size:18px;line-height:1}
.gs-t.on{background:var(--morado-soft);border-color:var(--morado);color:var(--morado);box-shadow:inset 0 0 0 1px var(--morado)}
.gs-t.on::before{content:"✓ ";font-weight:800}
.gs-units .gs-t.on::before{content:none}
.gsel-sum{margin-top:10px;font-size:13.5px;color:var(--gris);background:#F7F2E9;border-radius:10px;padding:7px 10px}
.gsel-sum b{color:var(--ink)}
/* durante el juego: sin los 5 botones de abajo; el botón principal fijo al alcance del pulgar */
body.game-on .bottomnav{display:none}
body.game-on #app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.game-actions{display:flex;gap:10px;margin-top:12px}
body.game-on .bottom-action,body.game-on .game-actions{position:fixed;left:16px;right:16px;max-width:528px;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom));z-index:31}
body.game-on .bottom-action{box-shadow:0 6px 18px rgba(40,20,70,.22)}
body.game-on .game-actions{padding:8px;background:rgba(255,255,255,.94);border:1px solid var(--borde);border-radius:18px;box-shadow:0 6px 18px rgba(40,20,70,.16)}
body.game-on .game-actions .btn{margin:0}
/* más compacto para que todo quepa sin bajar */
body.game-on .game-top{margin-bottom:8px}
body.game-on .flashcard{min-height:190px;padding:22px 16px}
body.game-on .flash-emoji{font-size:44px}
.flashcard.is-phrase{min-height:190px}
.flash-phrase{font:700 clamp(21px,5.8vw,26px)/1.3 var(--font-display);color:var(--ink);text-align:center}
.flash-ex{margin-top:10px;font-size:14px;color:var(--gris);text-align:center;line-height:1.35}
body.game-on .mc-question{padding:14px 10px 12px;margin-bottom:10px}
body.game-on .mc-question .qword{font-size:28px}
.mc-question.is-phrase .qword{font-size:21px;line-height:1.3}
.mc-question .qword.es{color:var(--tinta);font-size:26px}
.mc-question.is-phrase .qword.es{font-size:20px}
body.game-on .options{gap:8px}
body.game-on .opt{min-height:48px;padding:10px 12px}
.options.two{grid-template-columns:1fr 1fr}
body.game-on .listen-card{text-align:center;padding:12px}
body.game-on .listen-play{width:78px;height:78px;font-size:30px;margin:6px auto 8px}
.listen-slow{margin:0 auto;display:flex}
.listen-was{text-align:center;margin:10px 0 0}
body.game-on .memo-grid{grid-template-columns:repeat(4,1fr);gap:6px}
body.game-on .memo-card{font-size:12px}
.result.half{text-align:center}
body.game-on .back-float{bottom:calc(92px + env(safe-area-inset-bottom))}
.word .wx{display:block;margin-top:2px;font-size:13px;color:var(--gris);background:none;border:0;padding:0;text-align:left;cursor:pointer}
body.game-on .bottom-action{width:auto}
/* compactar más: listen en una fila, opciones largas más chicas */
body.game-on .back-btn{margin-bottom:8px;padding:7px 16px 7px 10px}
body.game-on .listen-card{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;margin-bottom:10px}
body.game-on .listen-play{flex:none;width:64px;height:64px;font-size:26px;margin:0}
.lc-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lc-r .listen-slow{margin:0;padding:6px 12px}
.listen-was{font-size:14px;color:var(--gris)}
.listen-was b{color:var(--ink)}
.options.long .opt{font-size:14.5px;padding:8px 10px;min-height:44px;line-height:1.3;text-align:left}
.mc-was{display:flex;align-items:center;justify-content:center;gap:8px;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;color:var(--ink)!important}
.mc-was .say,.mc-was button{flex:none}
body.game-on .match-bar{margin-bottom:6px}
body.game-on .mbtn{min-height:48px;font-size:14px;padding:6px 8px}
body.game-on #app .card{margin-bottom:10px}
body.game-on .opt{scroll-margin-bottom:96px;scroll-margin-top:12px}
.nc-skip{display:block;width:100%;margin-top:10px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,214,102,.7);color:#FFE6A3;border-radius:12px;padding:9px 12px;font:700 14px var(--font-display);text-align:left;cursor:pointer}
.nc-of{margin:6px 0 12px;background:rgba(255,214,102,.14);border:1.5px solid rgba(255,214,102,.6);border-radius:12px;padding:8px 10px;color:#FFE6A3}
.cert-of{border:2px solid var(--oro);background:var(--oro-soft);margin-bottom:12px}
/* ===== 2.0 · «Siempre sé dónde estoy» ===== */
/* A · color por sección */
body{--sec:#7A1E3C;--sec-soft:#F6E8EC}
body[data-sec="practicar"]{--sec:#1F8A5B;--sec-soft:#E3F5EC}
body[data-sec="carpeta"]{--sec:#2F6FD0;--sec-soft:#E6EFFC}
body[data-sec="progress"]{--sec:#C2610F;--sec-soft:#FDEEDF}
body[data-sec="settings"]{--sec:#5E5470;--sec-soft:#EFE6D8}
/* B · barra «Estás aquí» */
.where2{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--borde);border-left:6px solid var(--sec);border-radius:14px;padding:4px 10px 4px 4px;margin:0 0 12px;min-height:48px}
.where2 .back-btn.wb2-back{flex:none;width:40px;height:40px;min-width:40px;padding:0!important;margin:0!important;justify-content:center;border-radius:12px!important;border:0!important;background:var(--sec-soft)!important;color:var(--sec)!important}
.where2 .back-btn.wb2-back svg{stroke:var(--sec)!important;width:22px;height:22px}
.where2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wb2-path{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:13.5px;line-height:1.2}
.wb2-path::-webkit-scrollbar{display:none}
.wb2-c{background:none;border:0;padding:6px 2px;color:var(--gris);font:600 13.5px var(--font-body,inherit);cursor:pointer;white-space:nowrap}
.wb2-path>.wb2-c:first-child{color:var(--sec);font-weight:800}
.wb2-c.cur{color:var(--ink);font-weight:800;padding:6px 2px}
.wb2-sep{color:#B9AFC6;flex:none}
/* en una actividad la barra se queda pegada arriba (y no hay botón flotante) */
body.act-on .where2{position:sticky;top:var(--tb,64px);z-index:15;box-shadow:0 4px 10px rgba(40,20,70,.08)}
/* 1 · modo actividad: sin los 5 botones de abajo; el botón principal fijo */
body.act-on .bottomnav{display:none}
body.act-on #app{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
body.act-on .bottom-action,body.act-on .game-actions{position:fixed;left:16px;right:16px;max-width:528px;margin:0 auto;bottom:calc(12px + env(safe-area-inset-bottom));z-index:31;width:auto}
body.act-on .bottom-action{box-shadow:0 6px 18px rgba(40,20,70,.22)}
body.act-on .game-actions{padding:8px;background:rgba(255,255,255,.94);border:1px solid var(--borde);border-radius:18px;box-shadow:0 6px 18px rgba(40,20,70,.16)}
body.act-on .back-float{bottom:calc(14px + env(safe-area-inset-bottom))} /* 2.3 · también en pantallas de actividad */
body.act-on .opt{scroll-margin-bottom:96px}
/* D · color por tipo de paso */
.stk-notebook{--stc:#8A6420;--sts:#F6EEDC}
.stk-warmup{--stc:#7A1E3C;--sts:#F6E8EC}
.stk-vocab{--stc:#1F7A50;--sts:#E3F5EC}
.stk-gram{--stc:#2A62BC;--sts:#E6EFFC}
.stk-rule{--stc:#9A6410;--sts:#FBF2D9}
.stk-story{--stc:#C2580F;--sts:#FDEEDF}
.stk-reading{--stc:#0E7490;--sts:#E0F2F6}
.stk-exam{--stc:#B83A34;--sts:#FBE7E6}
.stk-cando{--stc:#7A3E9D;--sts:#F3E8F9}
.stk-challenge{--stc:#A3416B;--sts:#FBE8F0}
.sh-title[class*="stk-"] .sh-ic{background:var(--sts);box-shadow:inset 0 0 0 2px var(--stc)}
.sh-title[class*="stk-"] .sh-k{color:var(--stc)}
.pstep[class*="stk-"]{border-left:6px solid var(--stc)}
.pstep[class*="stk-"] .ps-ic{background:var(--sts);border-radius:10px}
.pstep.open .ps-num{background:var(--sts,#EEE);color:var(--stc,#333)}
/* C · mapa de la unidad */
.umap{display:flex;gap:5px;margin:8px 0;overflow-x:auto;scrollbar-width:none;padding:3px 2px}
.umap::-webkit-scrollbar{display:none}
.um-s{position:relative;flex:1 0 34px;min-width:34px;height:38px;border-radius:11px;border:2px solid var(--sts);background:var(--sts);display:grid;place-items:center;cursor:pointer;padding:0}
.um-s .um-i{font-size:18px;line-height:1;filter:saturate(.9)}
.um-s.opt{border-style:dashed;border-color:var(--stc);background:#fff}
.um-s.done{background:#fff;border-color:var(--stc)}
.um-s .um-ok{position:absolute;right:-4px;top:-6px;background:var(--stc);color:#fff;border-radius:999px;font:800 10px/1 var(--font-display);padding:3px 4px}
.um-s.cur{border-color:var(--stc);background:var(--stc);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--stc);transform:translateY(-1px)}
.um-s.cur .um-i{filter:none}
.where-bar .umap{margin-top:0}
.where-bar .wb-path b{color:var(--stc,var(--ink))}
/* E · lección de gramática en un solo camino */
.lpath{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:6px 0 10px}
.lp-step{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:2px solid #CFDDF5;border-left:6px solid #2A62BC;border-radius:16px;padding:14px;cursor:pointer;color:var(--ink)}
.lp-step b{display:block;font:800 18px var(--font-display)}
.lp-step span{font-size:13px;color:var(--gris)}
.lp-step .lp-n{flex:none;font:800 26px var(--font-display);color:#2A62BC}
.lp-step .lp-st{flex:none;font:800 13px var(--font-display);color:#2A62BC;background:#E6EFFC;border-radius:999px;padding:5px 10px}
.lp-step.seen{border-color:#BFE3CF;border-left-color:var(--verde,#1F8A5B)}
.lp-step.seen .lp-st{color:#11603F;background:#E3F5EC}
.lp-arrow{text-align:center;color:#9FB6E0;font:800 18px/1 var(--font-display)}
.lp-more{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
/* recomendación antes del examen y tip de los apuntes */
.rec-page{text-align:center;padding:16px}
.rec-page h2{margin:4px 0 0;font-size:20px}
.rec-page .lp-row.on{background:var(--sts,#F6F3FA);border-color:var(--stc,#ccc)}
.nb-tip{background:#FFFBEF;border:1.5px solid #F2D27A;padding:10px 12px}
.umap{gap:4px}
.um-s{flex:1 1 0;min-width:0;height:36px;border-radius:10px}
.um-s .um-i{font-size:16px}
html:has(body.act-on){scroll-padding-top:calc(var(--tb,64px) + 66px);scroll-padding-bottom:100px}
.mtool .where2{flex:1 1 100%;min-width:0;margin-bottom:4px}
.where2{min-width:0;max-width:100%}
.can-row{flex-wrap:wrap}.can-row>div:first-child{min-width:0;flex:1 1 180px}
/* ===== 2.0.1 · juegos más grandes, sin salirse =====
   Memorama: 3 columnas x 4 filas que llenan la pantalla (sin aspect-ratio: en iPhone empujaba la 4.ª columna fuera). */
.memo-grid,body.game-on .memo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.memo-card,body.game-on .memo-card{box-sizing:border-box;aspect-ratio:auto;min-width:0;width:100%;height:96px;height:clamp(64px,calc((100vh * .909 - 226px)/4),132px);height:clamp(64px,calc((100dvh * .909 - 226px)/4),132px);
  font-size:15px;overflow-wrap:anywhere;word-break:normal;hyphens:auto;padding:6px 5px;border-radius:14px}
.memo-card .me{font-size:28px;margin-bottom:2px}
html.big .memo-card,html.big body.game-on .memo-card{height:clamp(56px,calc((80vh - 232px)/4),112px);height:clamp(56px,calc((80dvh - 232px)/4),112px);font-size:14px}
html.big .memo-card .me{font-size:24px}
.memo-card:not(.flipped):not(.matched){font-size:22px}
.match-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mbtn{min-width:0;overflow-wrap:anywhere}
/* pantallas altas (casi todos los celulares de hoy): botones más grandes */
@media (min-height:720px){
  body.game-on .opt{min-height:60px;font-size:1.08em;padding:12px 12px}
  body.game-on .options.long .opt{min-height:52px;font-size:15.5px}
  body.game-on .mbtn{min-height:62px;font-size:16px;padding:8px 10px}
  body.game-on .flashcard{min-height:240px}
  body.game-on .listen-play{width:76px;height:76px;font-size:30px}
  body.game-on .tile{padding:11px 15px;font-size:1.1em;min-height:46px}
  body.game-on .answer-input{padding:15px 14px;font-size:1.2em}
  body.game-on .abc-grid button{padding:12px 4px}
}
@media (min-height:800px){
  body.game-on .opt{min-height:68px}
  body.game-on .mbtn{min-height:72px;font-size:17px}
  body.game-on .flashcard{min-height:280px}
}
html.big body.game-on .opt{min-height:52px}
html.big body.game-on .mbtn{min-height:52px;font-size:15px}
html.big body.game-on .flashcard{min-height:200px}
/* 2.0.1 · lo ya completado se pinta de verde pastel muy tenue (además de la palomita) */
:root{--hecho:#EEF8F1;--hecho-b:#A9D8B8;--hecho-t:#1F7A45}
.pstep.done,.pstep.cls.done,.vpath.done{background:var(--hecho)!important;border-color:var(--hecho-b)!important}
.pstep.done .ps-num.ink-mini,.vpath.done .vp-n{color:var(--hecho-t);border-color:var(--hecho-t);box-shadow:inset 0 0 0 2px var(--hecho),inset 0 0 0 3.5px var(--hecho-t)}
.pstep.done .ps-seal{color:var(--hecho-t)}
.pstep.done .ps-ic{background:#fff}
.um-s.done{background:var(--hecho)!important;border-color:var(--hecho-t)!important}
.um-s.done .um-ok{background:var(--hecho-t)}
.tm-unit.alldone,.tm-unit.full{background:var(--hecho);border-color:var(--hecho-b)}
.tm-unit.alldone.rec{border-color:var(--rosa)}
.pstep.done[class*="stk-"]{border-left-color:var(--stc)!important}
.cs-cont{border-color:#C9B6E4;background:#F7F2FC}.cs-extra{border-style:dashed!important}
.memo-card.flipped.long,.memo-card.matched.long{font-size:12.5px;line-height:1.15}
.memo-card.long .me{font-size:20px}
.cs-vwhy{padding:10px 12px;margin:0 0 10px}.cs-vwhy summary{font-weight:700;cursor:pointer;color:var(--ink)}.cs-vwhy p{margin:8px 0 2px}
body.bf-on #app{padding-bottom:64px}
html.big .memo-card.long .me{display:none}html.big .memo-card.flipped.long,html.big .memo-card.matched.long{font-size:12px}
@media (max-height:640px){.memo-card .me{font-size:19px;margin:0}.memo-card.flipped,.memo-card.matched{font-size:13px;line-height:1.15}.memo-card.long .me{display:none}}
/* 2.1 · mariposa con dos avances */
.bf-bars{display:grid;gap:10px;margin:10px 4px 6px;text-align:left}
.bf-bt{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--tinta);margin-bottom:4px}
.bf-bt b{font:700 15px var(--font-display);white-space:nowrap}
.bf-track{height:12px;border-radius:999px;background:#F3ECE3;overflow:hidden}
.bf-fill{height:100%;border-radius:999px;min-width:0;transition:width .6s}
.bf-bar.light .bf-fill{background:#F9CF9C}
.bf-bar.full .bf-fill{background:var(--monarch)}
.bf-bar.full .bf-bt b{color:#B4560E}
.mc-pct2{display:flex;flex-wrap:wrap;gap:4px 12px;margin:3px 0;font-size:13px;color:var(--gris)}
.mc-pct2 b{font:700 19px var(--font-display);color:var(--ink)}
.mc-pct2 .p-l b{color:#C98A3E}.mc-pct2 .p-f b{color:#B4560E}
/* 2.1 · 🧑‍🏫 Hoy no puedo ir a clase */
.sm-link{font-weight:700;color:var(--ink)}
.sm-form{display:grid;gap:6px}
.sm-l{font-weight:700;font-size:14px;margin-top:6px;color:var(--tinta)}
.sm-in{width:100%;box-sizing:border-box;font:600 16px var(--font-body,inherit);padding:11px 12px;border:1.5px solid var(--borde);border-radius:12px;background:#fff;color:var(--tinta)}
.sm-seg{display:flex;gap:6px;flex-wrap:wrap}
.sm-seg button{flex:1 1 0;min-width:76px;min-height:44px;border-radius:12px;border:1.5px solid var(--borde);background:#fff;font:700 15px var(--font-display);color:var(--tinta)}
.sm-seg button.on{background:var(--sec,var(--morado));border-color:var(--sec,var(--morado));color:#fff}
.sm-more summary{cursor:pointer;font-weight:600;color:var(--ink);margin-top:8px}
.sm-plan .sm-h{font:700 17px var(--font-display);color:var(--ink)}
.sm-plan .sm-h span{font-weight:600;color:var(--gris);font-size:14px}
.sm-list{margin:4px 0 8px;padding-left:22px;display:grid;gap:8px}
.sm-list li b{display:block;font-size:14.5px;color:var(--tinta)}
.sm-list li span{font-size:14px;color:#4a4458;line-height:1.4}
.sm-ev{background:var(--hecho,#EEF8F1);border-radius:10px;padding:8px 10px;font-size:14px;color:#1F5B38}
.sm-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.sm-btns .btn.wa{grid-column:1/-1;text-align:center;text-decoration:none}
.sm-msg pre{white-space:pre-wrap;font:14px/1.45 var(--font-body,inherit);margin:8px 0 0;color:var(--tinta)}
.sm-msg summary{cursor:pointer;font-weight:600;color:var(--ink)}
.sm-print{display:none}
@media print{
  body.sm-printing>*:not(.sm-print){display:none!important}
  body.sm-printing .sm-print{display:block!important;font:13pt/1.5 Georgia,serif;color:#000;padding:10mm}
  .sm-print h1{font:700 18pt Arial,sans-serif;margin:0 0 4pt}.sm-print .s{color:#555;font-size:11pt}
  .sm-print ol{padding-left:18pt}.sm-print li{margin:6pt 0}
}
.av-send{margin-top:12px;text-align:center;text-decoration:none;display:block}
/* 2.1 · tarjeta de conversación A/B */
.cv-card{border:2px solid #E9D8F5;background:#FCFAFF}
.cv-t{font:700 17px var(--font-display);color:var(--ink)}
.cv-role{flex:0 0 auto}.cv-role button{min-width:86px}
.cv-lines{display:grid;gap:6px}
.cv-l{display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:8px 8px 8px 6px;border:1.5px solid transparent}
.cv-l.me{background:#F6E8EC;border-color:#C9B6E4}
.cv-l.other{background:#fff;border-color:var(--borde);opacity:.85}
.cv-w{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--font-display);background:#E6E0EE;color:var(--tinta)}
.cv-l.me .cv-w{background:var(--morado);color:#fff}
.cv-en{font-weight:600;color:var(--tinta);overflow-wrap:anywhere}
.cv-es{font-size:13.5px;color:var(--gris);margin-top:2px}
.cv-say{flex:none;border:0;background:transparent;font-size:18px;padding:2px 4px;cursor:pointer}
.bk-nag{border:2px solid #9FC3E8;background:#F2F8FE}.bk-t{font:700 16px var(--font-display);color:#1F4E86}
.ch-card{background:#FFFBEF}
.tema-set{flex-wrap:wrap;gap:8px}.tema-set .tema-seg{flex:1 1 100%}.tema-seg button{min-width:0;font-size:14px}
.cert-svg{background:#fff;box-shadow:0 2px 10px rgba(46,31,69,.12);border:1px solid #E9DFD0}
.sm-seg button.on{background:var(--sec,var(--morado))!important;border-color:var(--sec,var(--morado))!important;color:#fff!important}
/* ===== 2.2 · pantalla inicial con abanico ===== */
.fan-hi{padding:2px 2px 0}
.fan-hi-t{font:700 24px var(--font-display);color:var(--tinta)}
.fan-hi-s{font-size:14px;color:var(--gris);margin-top:1px}
.wotd-card.wotd-strip{padding:8px 12px;margin:10px 0 0;border-radius:14px;border-width:1px;border-left:5px solid var(--oro);gap:10px}
.wotd-strip::before{display:none}
.wotd-strip .wotd-emoji{font-size:28px}
.wotd-strip .wotd-label{font-size:10px}
.wotd-strip .wotd-en{font-size:18px;display:inline}
.wotd-strip .wotd-es{display:inline;margin-left:6px;font-size:13.5px}
.wotd-strip .wotd-es::before{content:"· "}
.fan-box{margin-top:6px}
.fan-w{position:relative;max-width:400px;margin:0 auto;touch-action:pan-y}
.fan-svg{display:block;width:100%;height:auto;overflow:visible}
.fan-p{cursor:pointer;opacity:.55;transition:opacity .2s}
.fan-p path{filter:drop-shadow(0 3px 4px rgba(0,0,0,.16))}
.fan-p.on{opacity:1}
.fan-p.on path{stroke:#fff;stroke-width:3}
.fan-p:focus{outline:none}.fan-p:focus-visible path{stroke:var(--tinta);stroke-width:3}
.fan-r{font:700 21px var(--font-display)}.fan-p.on .fan-r{font-size:25px}
.fan-s{font:600 12px var(--font-display);opacity:.9}
.fan-fly{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:37%;pointer-events:none}
.fan-fly svg{width:100%;height:auto;display:block}
.fan-info{text-align:center;margin-top:6px}
.fan-info h2{margin:0;font:700 23px var(--font-display);color:var(--cc)}
.fan-l{font-size:13px;color:var(--gris);margin-top:1px}
.fan-pc{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;font-size:13px;color:var(--gris);margin-top:4px}
.fan-pc b{font:700 16px var(--font-display)}
.fan-pc .l b{color:#C98A3E}.fan-pc .f b{color:#B4560E}.fan-pc .u b{color:var(--cc)}
.fan-go{margin-top:12px}
.fan-link{display:block;margin:8px auto 0;background:none;border:0;font:600 14px var(--font-display);color:var(--cc);text-decoration:underline;padding:6px 10px;min-height:40px}
.fan-st{color:var(--cc)}
.fan-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fan-u{position:relative;display:flex;align-items:center;gap:9px;min-height:68px;border-radius:16px;border:0;padding:10px;background:var(--uc);color:#fff;text-align:left;font:inherit}
.fu-e{flex:none;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:22px}
.fu-t{flex:1;min-width:0;padding-right:4px}
.fu-t b{display:block;font:700 13.5px/1.15 var(--font-display)}
.fu-t span{display:block;font-size:12px;line-height:1.25;opacity:.93;overflow-wrap:anywhere}
.fu-tag{position:absolute;top:5px;right:7px;font:700 10.5px var(--font-display);background:rgba(255,255,255,.92);color:#2B2420;border-radius:99px;padding:1px 7px}
.fan-u.done{background:var(--hecho,#EEF8F1);color:#1F5B38;box-shadow:inset 0 0 0 1.5px var(--hecho-b,#A9D8B8)}
.fan-u.done .fu-e{background:#fff}.fan-u.done .fu-tag{background:#1F7A45;color:#fff}
.fan-u.now{box-shadow:0 0 0 3px var(--fondo),0 0 0 5px var(--rosa)}
.fan-u.lock{filter:grayscale(.55);opacity:.72}
html.dark .fan-u.done{color:#9FE0B8}
html.dark .fan-u.done .fu-e{background:#1C1824}
html.dark .fan-p.on path{stroke:#121017}
.fan-box[data-c="1"]{--cc:#7A1E3C}.fan-box[data-c="2"]{--cc:#A3416B}.fan-box[data-c="3"]{--cc:#1B3A5C}.fan-box[data-c="4"]{--cc:#8A6508}.fan-box[data-c="5"]{--cc:#7A1F3D}
html.dark .fan-box[data-c="1"]{--cc:#C9B3EC}html.dark .fan-box[data-c="2"]{--cc:#F2A9C6}html.dark .fan-box[data-c="3"]{--cc:#A9BDE6}html.dark .fan-box[data-c="4"]{--cc:#E9C766}html.dark .fan-box[data-c="5"]{--cc:#E79AB5}
html.dark .fu-tag{color:#2B2420}html.dark .fan-u.done .fu-tag{color:#fff}html.dark .btn.oro{color:#2B2420}html.dark .coll-fl small{filter:brightness(1.9) saturate(.8)}
/* ===== 2.3 · 🗺️ el viaje de la monarca ===== */
.fan-fly{pointer-events:auto;background:none;border:0;padding:0;cursor:pointer}
.vj-card{background:#fff;border:1px solid var(--borde);border-radius:18px;overflow:hidden}
.vj-map{position:relative;touch-action:pan-y pinch-zoom}
.vj-svg{display:block;width:100%;height:auto}
.vj-sea{fill:#DCEBF5}
.vj-land{fill:#F3EEE4;stroke:#C9BFAF;stroke-width:.7}.vj-land.us{fill:#F7F2E8}
.vj-st{fill:none;stroke:#E2D9C9;stroke-width:.45}
.vj-lake{fill:#DCEBF5;stroke:#B9D0E2;stroke-width:.5}
.vj-lbl{font:700 10px var(--font-display);fill:#B7A98F;letter-spacing:2.5px}
.vj-rest{fill:none;stroke:#B9AFC6;stroke-width:2.2;stroke-dasharray:1 5;stroke-linecap:round}
.vj-light{fill:none;stroke:#F9CF9C;stroke-width:5;stroke-linecap:round}
.vj-done{fill:none;stroke:#E8761E;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.vj-stop{cursor:pointer}
.vj-stop circle{fill:#fff;stroke:#B9AFC6;stroke-width:1.5}
.vj-stop.mine circle{stroke:var(--vc);stroke-width:2.5}
.vj-stop.got circle{fill:#E8761E;stroke:var(--vc)}
.vj-stop:focus{outline:none}.vj-stop:focus-visible circle{stroke:var(--tinta);stroke-width:3}
.vj-name{font:700 9.5px var(--font-display);fill:var(--vc);stroke:#fff;stroke-width:3px;paint-order:stroke}
.vj-tip{position:absolute;z-index:3;background:#1B3A5C;color:#fff;border-radius:12px;padding:8px 10px;font-size:12.5px;line-height:1.35;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.vj-tip b{display:block;font:700 13px var(--font-display);color:#FFD66B;margin-bottom:2px}
.vj-tip .en{font-weight:600}.vj-tip .es{opacity:.85;margin-top:2px}.vj-tip .vj-st2{margin-top:4px;font-size:11.5px;color:#BFE7CC}
.vj-leg{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--gris);padding:8px 12px 10px;border-top:1px solid var(--borde)}
.vj-leg i{display:inline-block;width:18px;height:4px;border-radius:2px;vertical-align:middle;margin-right:4px}
.vj-leg .l1{background:#E8761E}.vj-leg .l2{background:#F9CF9C}.vj-leg .l3{background:repeating-linear-gradient(90deg,#B9AFC6 0 2px,transparent 2px 6px)}
.vj-now{margin-top:10px;background:#fff;border:1px solid var(--borde);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center}
.vj-now .e{font-size:30px;flex:none}.vj-now b{font:700 15.5px var(--font-display);display:block}.vj-now span{font-size:13px;color:var(--gris)}
.vj-home{display:flex;gap:12px;align-items:center;width:100%;margin-top:14px;background:#fff;border:1px solid #F0E2B6;border-radius:16px;padding:10px 12px;font:inherit;color:inherit}
.vj-mini{width:118px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--borde)}
.vj-k{font:700 11.5px var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:#B88A0E}
.vj-home b{display:block;font:700 16px var(--font-display);margin:2px 0}.vj-home span{font-size:12.5px;color:var(--gris)}
html.dark .vj-sea,html.dark .vj-lake{fill:#16222E}html.dark .vj-land{fill:#2A2632;stroke:#4A4456}html.dark .vj-land.us{fill:#2E2A37}
html.dark .vj-st{stroke:#3B3546}html.dark .vj-lbl{fill:#6E6680}html.dark .vj-stop circle{fill:#1C1824}
html.dark .vj-name{stroke:#1C1824}html.dark .vj-stop.got circle{fill:#E8761E}
/* 2.3 · formulario «Hoy no puedo ir a clase» */
.sm-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sm-t{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1.5px solid var(--borde);background:#fff;border-radius:14px;padding:9px 8px;min-height:96px;font:inherit;color:var(--tinta)}
.sm-t .e{font-size:22px}.sm-t b{font:700 13px/1.2 var(--font-display)}.sm-t span:last-child{font-size:11.5px;color:var(--gris);line-height:1.25}
.sm-t.on{border:2px solid var(--sec,#2F6FD0);background:var(--sec-soft,#E6EFFC)}.sm-t.on b{color:var(--sec,#2F6FD0)}
.sm-hint{font-size:12.5px;color:var(--gris);margin:-2px 0 6px}
.sm-units{display:flex;flex-wrap:wrap;gap:6px}
.sm-u{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--borde);background:#fff;font:700 15px var(--font-display);color:var(--tinta)}
.sm-u.on{background:var(--morado);border-color:var(--morado);color:var(--on-p)}
.sm-pdfrow{align-items:center;gap:8px;margin-top:6px}.sm-pdfrow .small{min-width:46px;font-weight:700}
.sm-em{border:2px solid #9FC3E8;background:#F2F8FE}.sm-em b{font:700 15px var(--font-display);color:#1F4E86}
@media print{body.sm-printing .sm-print h2{font:700 14pt Arial,sans-serif;margin:14pt 0 4pt;page-break-before:auto}}
@media (max-width:360px){.sm-types{grid-template-columns:1fr}.sm-t{min-height:0;flex-direction:row;align-items:center;gap:8px}.sm-t span:last-child{display:none}}
/* 2.3 · en actividades el flotante es compacto y lo que se toca nunca queda debajo de él */
html:has(body.bf-on){scroll-padding-bottom:150px}
body.bf-on .opt,body.bf-on .mbtn,body.bf-on .memo-card,body.bf-on .tile{scroll-margin-bottom:150px}
body.act-on .back-float{max-width:150px}
/* ---------- 2.4 · bienvenida: ¿alumno o maestro? ---------- */
.welcome .wl-q{font:700 1.35em var(--font-display);color:var(--tinta);margin:18px 0 4px}
.welcome .wl-sub{color:var(--gris);font-size:14.5px;margin:0 8px 14px;line-height:1.4}
.wl-big{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;border:2px solid var(--borde);border-radius:18px;padding:16px;margin:0 0 12px;cursor:pointer;color:var(--tinta);font:inherit}
.wl-big.a{border-color:#C9B3E6}.wl-big.m{border-color:#9FC3E8}
.wl-big:active{transform:scale(.99)}
.wl-big .e{font-size:40px;line-height:1;flex:none}
.wl-big .t{flex:1;min-width:0}.wl-big .t b{display:block;font:700 18px var(--font-display)}.wl-big .t span{display:block;font-size:13.5px;color:var(--gris);line-height:1.35;margin-top:2px}
.wl-big .chev{font:700 24px var(--font-display);color:var(--gris)}
/* ---------- 2.4 · compra: maestro (opcional) ---------- */
.acc-sub{font:700 15px var(--font-display);margin:0 0 8px}
.prof-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prof-pick .pp{border:1.5px solid var(--borde);background:#fff;border-radius:14px;padding:12px 8px;font:700 13.5px var(--font-display);color:var(--tinta);cursor:pointer;min-height:56px;line-height:1.25}
.prof-pick .pp.on{border:2px solid #7A1E3C;background:#F6E8EC;color:#5C142C}
.prof-code{margin-top:10px}.prof-code .code-in{flex:1;min-width:0}
.code-in{width:100%;padding:12px;font:700 18px var(--font-display);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.prof-msg{font-size:13.5px;margin-top:8px;min-height:1px}.prof-msg:empty{display:none}
.prof-msg.ok{background:#E3F5EC;border:1.5px solid #A9D8B8;border-radius:12px;padding:9px 12px;color:#1F5B38}
.prof-msg.bad{color:var(--rojo);font-weight:700}
.info-box{background:#F2F8FE;border:1.5px solid #9FC3E8;border-radius:12px;padding:10px 12px;font-size:13px;color:#1F4E86;line-height:1.45;margin-bottom:12px}
/* ---------- 2.4 · maestro: registro y código ---------- */
.t-chips{display:flex;flex-wrap:wrap;gap:6px}
.t-chip{border:1.5px solid var(--borde);background:#fff;border-radius:99px;padding:9px 13px;font:700 13.5px var(--font-display);color:var(--tinta);cursor:pointer;min-height:44px}
.t-chip.on{background:var(--cc);border-color:var(--cc);color:var(--ct)}
.t-terms .acc-check:last-child{margin-bottom:0}
.t-code{text-align:left}
.t-code-k{font:700 14px var(--font-display)}
.t-code-v{font:700 32px var(--font-display);letter-spacing:.12em;text-align:center;color:#7A1E3C;background:#F4EEFB;border:2px dashed #C9B3E6;border-radius:16px;padding:12px;margin:8px 0}
.t-code-v.sm{font-size:26px}
.ab-code{display:flex;justify-content:space-between;align-items:center;gap:8px;background:rgba(255,255,255,.7);border-radius:12px;padding:8px 12px;margin-top:8px;font-size:13px}
.ab-code b{font:700 18px var(--font-display);letter-spacing:.08em}
/* ---------- 2.4 · 🔥 racha y 🎯 meta del día ---------- */
.rc-card{background:linear-gradient(135deg,#FFF4E5,#FFE7CC);border:1.5px solid #F5C58A;border-radius:18px;padding:12px 14px;margin:12px 0}
.rc-top{display:flex;align-items:center;gap:10px}
.rc-fire{font-size:34px;line-height:1}
.rc-top b{display:block;font:700 19px var(--font-display);color:#B4530E}.rc-top span{display:block;font-size:12.5px;color:#8A5A2B;line-height:1.3}
.rc-share{flex:none;border:1.5px solid #E8A55E;background:#fff;color:#8A4A10;border-radius:50%;width:44px;height:44px;padding:0;font-size:19px;cursor:pointer;display:grid;place-items:center}
.rc-week{display:flex;gap:6px;margin:10px 0 8px}
.rc-d{flex:1;text-align:center;font:700 11.5px var(--font-display);color:#8A5A2B}
.rc-d span{display:block}
.rc-d i{display:grid;place-items:center;height:30px;border-radius:10px;background:#fff;border:1.5px solid #F5C58A;font-style:normal;font-size:14px;margin-top:3px;color:#B4530E}
.rc-d.y i{background:#E8761E;border-color:#E8761E;color:#fff}
.rc-d.t i{border:2px dashed #E8761E}
.rc-d.z i{background:#F6EFE6;border-color:#E8DCCB}
.rc-d.x i{background:#FBF6F0;border-color:#EADBC8}
.rc-goal{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:8px 10px}
.rc-gl{font-size:13px;flex:none}
.rc-bar{flex:1;height:10px;border-radius:99px;background:#F1E6D8;overflow:hidden;min-width:40px}.rc-bar i{display:block;height:100%;background:#E8761E;border-radius:99px;transition:width .4s}
.rc-gn{flex:none;text-align:right;font-size:12px;line-height:1.2}.rc-gn b{display:block;font:700 15px var(--font-display);color:#B4530E}.rc-gn small{color:#8A5A2B}
.rc-goal.ok .rc-bar i{background:#1F8A5B}.rc-goal.ok .rc-gn b{color:#1F8A5B}
@media (max-width:360px){.rc-gl{display:none}}
html.dark .rc-card{background:linear-gradient(135deg,#3A2A1C,#2E2216);border-color:#6B4A28}
html.dark .rc-top b,html.dark .rc-gn b{color:#F2A35C}html.dark .rc-top span,html.dark .rc-d,html.dark .rc-gn small{color:#D9B48F}
html.dark .rc-d i,html.dark .rc-goal,html.dark .rc-share{background:#1E1A26;border-color:#6B4A28;color:#F2A35C}
html.dark .rc-d.y i{background:#E8761E;color:#fff}html.dark .rc-d.z i,html.dark .rc-d.x i{background:#26212E}
html.dark .rc-bar{background:#3A3040}
/* ---------- 2.5 · resultado con QR, calificar, examen en papel, cartel y logro ---------- */
.of-who .acc-field input{width:100%}
.res-qr{text-align:center}
.res-qr .rq-k{font:700 15px var(--font-display);margin-bottom:8px}
.res-qr .rq-img{width:min(260px,72vw);margin:0 auto;background:#fff;padding:6px;border-radius:12px}
.res-qr .rq-img svg{display:block;width:100%;height:auto}
.res-qr .rq-s{font-size:13px;color:var(--gris);margin-top:8px}
.cq-cam{position:relative;margin:10px 0 0;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:1/1;max-height:60vh}
.cq-video{width:100%;height:100%;object-fit:cover;display:block}
.cq-frame{position:absolute;inset:18%;border:4px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.25)}
.cq-msg{margin-top:10px;font-size:14px;padding:10px 12px;border-radius:12px;background:#F4EEFB}
.cq-msg.ok{background:#E3F5EC;color:#1F5B38;font-weight:700}.cq-msg.bad{background:#FBE7E6;color:#9B2C26;font-weight:700}
.cq-groups{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cq-table-w{overflow-x:auto;background:#fff;border:1px solid var(--borde);border-radius:14px}
.cq-table{width:100%;border-collapse:collapse;font-size:13px}
.cq-table th{text-align:left;font-size:11px;color:var(--gris);font-weight:700;padding:8px 6px;border-bottom:1px solid var(--borde);white-space:nowrap}
.cq-table td{padding:8px 6px;border-bottom:1px solid var(--borde);vertical-align:top}
.cq-table tr.no td b{color:var(--rojo)}
.cq-warn{font-size:11px;color:#9B2C26}
.cq-x{border:0;background:none;color:var(--gris);font-size:15px;cursor:pointer;min-width:32px;min-height:32px}
.pp-doc{background:#fff;color:#1B1B1B;border:1px solid var(--borde);border-radius:12px;padding:18px;font:14px/1.45 Arial,Helvetica,sans-serif}
.pp-head b{display:block;font-size:16px}.pp-head span{font-size:12px;color:#555}
.pp-name{margin:12px 0 4px;font-size:13px}.pp-name span{display:inline-block;min-width:200px;border-bottom:1px solid #333;margin-right:10px}.pp-name span.s{min-width:60px}
.pp-sec{font-size:14px;margin:16px 0 6px;border-bottom:2px solid #7A1E3C;padding-bottom:2px}
.pp-q{margin:10px 0;break-inside:avoid}
.pp-opts{display:flex;flex-wrap:wrap;gap:4px 18px;margin:4px 0 0 18px}
.pp-words{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0 18px}.pp-words span{border:1px solid #999;border-radius:6px;padding:2px 8px}
.pp-line{border-bottom:1px solid #333;height:26px;margin:0 0 0 18px}
.pp-read{background:#F7F2E9;border-radius:8px;padding:8px 10px;margin:6px 0;break-inside:avoid}.pp-read p{margin:4px 0 0}
.pp-score{margin-top:16px;font-weight:700;text-align:right}
.pp-key{margin-top:24px;border-top:2px dashed #999;padding-top:10px;font-size:12px;break-before:page}
.cartel{background:#fff;color:#1B1B1B;border:1px solid var(--borde);border-radius:16px;padding:22px;text-align:center;font-family:Arial,Helvetica,sans-serif}
.ct-top{display:flex;align-items:center;justify-content:center;gap:12px}.ct-logo{width:56px;height:56px;color:#7A1E3C}
.ct-top b{display:block;font:700 30px var(--font-display);color:#7A1E3C;text-align:left}.ct-top span{font-size:14px;color:#555}
.ct-h{font:700 26px var(--font-display);margin:14px 0 10px}
.ct-qr{width:min(320px,80vw);margin:0 auto}.ct-qr svg{width:100%;height:auto;display:block}
.ct-link{font:700 15px monospace;margin:6px 0 14px;word-break:break-all}
.ct-steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:left;font-size:14px}.ct-steps ol{margin:4px 0 0;padding-left:20px}
.ct-foot{margin-top:14px;font-size:13px;color:#333;background:#F4EEFB;border-radius:10px;padding:8px}
@media (max-width:420px){.ct-steps{grid-template-columns:1fr}}
.logro-wrap>svg{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.logro-prev{display:flex;gap:12px;align-items:center}.logro-mini{width:110px;flex:none}.logro-mini>svg{width:100%;height:auto;display:block;border-radius:10px}
@media print{.where2,#backFloat,.toast{display:none!important}.pp-doc,.cartel{border:0;padding:0}}
html.dark .pp-doc,html.dark .cartel,html.dark .pp-doc *,html.dark .cartel *{background-color:#fff!important;color:#1B1B1B!important;border-color:#bbb!important}html.dark .res-qr .rq-img{background:#fff!important}

/* ---------- 2.6 · 🧰 Kit del maestro y 🌟 fundadores ---------- */
.kit-fd{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--oro-soft);border:2px solid var(--oro);border-radius:14px;padding:12px 14px;margin:10px 0}
.kit-fd b{font:700 16px var(--font-display);color:var(--tinta)}
.kit-fd span{font-size:14px;color:var(--tinta)}
.kit-card{border:2px solid var(--borde)}
.kit-card.on{border-color:var(--verde)}
.kit-card>b{display:block;font:700 16px var(--font-display)}
.kit-badge{display:inline-block;background:var(--oro);color:#2B2420;font:700 13px var(--font-display);border-radius:99px;padding:3px 12px;margin-bottom:8px}
.kit-warn{background:var(--rojo-soft);color:var(--rojo);border-radius:10px;padding:8px 10px;font-weight:700;font-size:14px;margin:8px 0 0}
.kit-colega{border-top:1px dashed var(--borde);margin-top:12px;padding-top:10px}
.kit-wall .acc-list{text-align:left}
html.dark .kit-fd{background:#2B2410;border-color:#8A6A10}html.dark .kit-fd b,html.dark .kit-fd span{color:#F3E7C6}
html.dark .kit-warn{background:#3A1C1A;color:#F3A6A0}

/* ---------- 2.7 · 🔢 números ---------- */
.num-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.num-tabs::-webkit-scrollbar{display:none}
.num-tabs button{flex:none;border:1.5px solid var(--borde);background:#fff;border-radius:99px;padding:8px 14px;font:600 14px var(--font-display);color:var(--tinta);min-height:40px}
.num-tabs button.on{border-color:var(--morado);background:var(--morado-soft);color:var(--tinta)}
.num-grid button span{font-size:.7em}
.num-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--borde)}
.num-row:last-child{border-bottom:0}
.num-fig{flex:none;min-width:64px;max-width:42%;font:700 18px var(--font-display);color:var(--tinta)}
.num-en{font-weight:700;overflow-wrap:anywhere}
.num-en.big{font:700 1.3em var(--font-display)}
.num-traps{display:flex;flex-direction:column;gap:8px}
.num-traps .chip{flex:1}

/* 2.7 · pantallas bajitas (celulares chicos o con las barras del navegador abiertas): los juegos se compactan para que nada quede debajo de los botones */
@media (max-height:700px){
  body.game-on #app .card{padding:12px 14px;margin-bottom:10px}
  body.game-on .options{gap:6px}
  body.game-on .opt{min-height:44px;padding:8px 10px}
  body.game-on .tile{padding:7px 11px;min-height:40px}
  body.game-on .step-kicker{margin-bottom:4px}
  html.big body.game-on .tile{font-size:15px;padding:6px 9px;min-height:38px}
  html.big body.game-on .tiles{gap:6px;padding:6px;min-height:46px}
}

/* ---------- 2.8 · 🎬 presentación especial (unos 3 s) y marca de la escuela ---------- */
.splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 38%,color-mix(in srgb,var(--sp) 70%,#fff) 0%,var(--sp) 50%,color-mix(in srgb,var(--sp) 62%,#000) 100%);background-color:var(--sp);
  transition:opacity .48s ease,transform .48s ease;cursor:pointer;padding:24px;text-align:center}
.splash.out{opacity:0;transform:scale(1.04);pointer-events:none}
.sp-glow{position:absolute;left:50%;top:42%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--sp2) 55%,transparent) 0%,transparent 62%);opacity:0;animation:spGlow 2.6s .25s ease-in-out both}
.sp-in{position:relative;display:flex;flex-direction:column;align-items:center}
.sp-stage{position:relative;width:216px;height:216px;display:flex;align-items:center;justify-content:center}
.sp-logo{position:relative;width:176px;height:176px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:#7A1E3C;overflow:hidden;
  box-shadow:0 0 0 8px rgba(255,255,255,.16),0 20px 44px rgba(0,0,0,.3);animation:spPop .8s .25s cubic-bezier(.2,.9,.3,1.25) both}
.sp-logo svg{width:112px;height:112px}
.sp-logo.img{width:208px;height:208px;border-radius:40px;background:#fff}
.sp-logo.img img{width:92%;height:92%;object-fit:contain}
.sp-shine{position:absolute;top:-30%;left:-60%;width:45%;height:160%;transform:rotate(22deg) translateX(-160%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:spShine 1s .95s ease-in-out both}
.sp-sparks{position:absolute;inset:0;pointer-events:none}
.sp-sparks i{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 4px var(--sp2)) drop-shadow(0 0 8px var(--sp2));opacity:0;animation:spSpark 1.6s ease-out both}
.sp-sparks i:nth-child(3n){background:var(--sp2)}
.sp-name .sp-w{display:inline-block;white-space:nowrap;opacity:1;animation:none}
.sp-name{font:700 34px/1.15 var(--font-display);margin-top:22px;max-width:600px;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.sp-name span{display:inline-block;opacity:0;animation:spLetter .45s cubic-bezier(.2,.8,.3,1.2) both}
.sp-sub{font:500 17px/1.35 var(--font-display);opacity:0;margin-top:8px;animation:spUp .6s 2.25s both}
@keyframes spPop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes spUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:.9}}
@keyframes spGlow{0%{opacity:0;transform:scale(.7)}35%{opacity:1;transform:scale(1)}65%{opacity:.7;transform:scale(.92)}100%{opacity:1;transform:scale(1.04)}}
@keyframes spShine{from{transform:rotate(22deg) translateX(-160%)}to{transform:rotate(22deg) translateX(520%)}}
@keyframes spSpark{0%{opacity:0;transform:scale(.2) rotate(0) translateY(6px)}30%{opacity:1;transform:scale(1.6) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(90deg) translateY(-30px)}}
@keyframes spLetter{from{opacity:0;transform:translateY(16px) scale(.8);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.splash.still *{animation:none!important;opacity:1}
.splash.still .sp-sparks,.splash.still .sp-shine{display:none}
@media (max-width:360px){.sp-name{font-size:28px}.sp-logo.img{width:180px;height:180px}}
/* 2.9 · escuela: la barra de arriba (logo y nombre) se queda con el color de la escuela en TODAS las pantallas;
   el resto conserva el color de cada curso. La letra se elige sola (blanca u oscura) según el color. */
html[data-escuela] .topbar{background:var(--esc)!important;color:var(--esc-on,#fff)!important;--on-p:var(--esc-on,#fff);--pill-ink:var(--esc-on,#fff)}
html[data-escuela] .topbar .streak-pill{background:var(--esc-pill,rgba(0,0,0,.18))!important;border-color:var(--esc-line,rgba(255,255,255,.4))!important;color:var(--esc-on,#fff)!important}
html[data-escuela] .topbar .cs-top-btn{background:var(--esc-pill,rgba(255,255,255,.16))!important;border-color:var(--esc-line,rgba(255,255,255,.55))!important}
/* dentro de un curso: una franja delgada con el color del curso, pegada abajo de la barra */
html[data-escuela]:not([data-course="0"]) .topbar{box-shadow:inset 0 -5px 0 var(--morado),inset 0 -7px 0 var(--esc-line,rgba(255,255,255,.55)),0 2px 10px rgba(0,0,0,.14)!important;padding-bottom:19px}
html.dark[data-escuela] .topbar{background:var(--esc-d,var(--esc))!important}
.brand-mark.esc{background:#fff!important;padding:2px;box-sizing:border-box;overflow:hidden;width:50px!important;height:50px!important;border-radius:14px!important;border:0!important}
.brand-mark.esc img{width:100%;height:100%;object-fit:contain}
html[data-escuela] .brand-text h1{font-size:21px}
.demo-sw{display:flex;flex-wrap:wrap;gap:8px}
.demo-sw button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:var(--c)}
.demo-sw button.on{border-color:var(--tinta);box-shadow:0 0 0 2px #fff inset}
.demo-logo{width:96px;height:96px;border-radius:50%;background:#fff;border:2px dashed var(--borde);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--gris);font-size:13px;text-align:center}
.demo-logo img{width:80%;height:80%;object-fit:contain}
.welcome .logo-big.esc{width:168px;height:168px;border-radius:36px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(40,20,70,.14)}
.welcome .logo-big.esc img{width:94%;height:94%;object-fit:contain}
html.dark .sp-logo,html.dark .brand-mark.esc,html.dark .welcome .logo-big.esc,html.dark .demo-logo{background:#fff!important}
.ct-logo.esc{background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ct-logo.esc img{width:82%;height:82%;object-fit:contain}

/* ---------- 2.8 · 🌎 Inglés para la vida y 🛂 pasaporte ---------- */
.vd-home{display:block;width:100%;text-align:left;margin:14px 0 4px;padding:16px;border-radius:20px;border:0;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#1D4E89 0%,#2A62BC 55%,#1F7A50 100%);box-shadow:0 8px 22px rgba(29,78,137,.28)}
.vd-home-t{display:flex;flex-direction:column;gap:2px}.vd-home-t b{font:700 19px var(--font-display)}.vd-home-t span{font-size:14px;opacity:.92}
.vd-home-ics{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.vd-home-ics span{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:21px}
.vd-home-ics span.on{background:#fff;box-shadow:0 0 0 2px #F2C14E}
.vd-home-b{display:flex;justify-content:space-between;align-items:center;font-size:14px}.vd-home-b b{font:700 15px var(--font-display)}
.vd-prac{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:14px;border-radius:18px;border:0;color:#fff;cursor:pointer;background:linear-gradient(135deg,#1D4E89,#1F7A50)}
.vd-prac b{display:block;font:700 16px var(--font-display)}.vd-prac span{font-size:13px;opacity:.92}.vd-prac .vd-ic{background:rgba(255,255,255,.2)}
.vd-ic{flex:none;width:46px;height:46px;border-radius:14px;background:var(--morado-soft);display:flex;align-items:center;justify-content:center;font-size:24px}
.vd-ic.big{width:58px;height:58px;font-size:30px}
.vd-pass-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px;margin:0 0 12px;border-radius:18px;border:2px solid #C9A227;background:#FFF8E6;color:var(--tinta);cursor:pointer}
.vd-pass-card b{display:block;font:700 16px var(--font-display)}.vd-pass-card span{font-size:13px;color:var(--gris)}
.vd-pass-ic{font-size:30px}
.vd-sit{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin:0 0 10px;border-radius:18px;border:1.5px solid var(--borde);background:#fff;color:var(--tinta);cursor:pointer}
.vd-sit b{display:block;font:700 16px var(--font-display)}
.vd-en{display:block;font-size:13px;color:var(--morado);font-weight:700}
.vd-in{display:block;font-size:13px;color:var(--gris);line-height:1.3;margin-top:2px}
.vd-sit.lock{opacity:.8}.vd-sit.done{border-color:#A9D8B8;background:#F4FBF6}
.vd-chip{flex:none;font:700 12px var(--font-display);border-radius:99px;padding:4px 10px;background:var(--morado-soft);color:var(--tinta)}
.vd-chip.free{background:#E3F5EC;color:#1F6B45}.vd-chip.ok{background:#1F7A45;color:#fff}.vd-chip.lk{background:#F1EEF5}
.vd-soon{display:flex;flex-wrap:wrap;gap:8px}.vd-soon span{border:1.5px dashed var(--borde);border-radius:99px;padding:6px 12px;font-size:14px;color:var(--gris)}
.vd-head{display:flex;align-items:center;gap:12px;margin:0 0 12px}.vd-head h2{font:700 21px var(--font-display)}
.vd-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.vd-word{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:16px;border:1.5px solid var(--borde);background:#fff;color:var(--tinta);cursor:pointer;text-align:center}
.vd-word b{font:700 16px var(--font-display);overflow-wrap:anywhere}.vd-word span{font-size:13px;color:var(--gris)}.vd-em{font-size:28px}
.vd-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--borde)}
.card > .vd-row:last-child{border-bottom:0}
.vd-row b{overflow-wrap:anywhere}
.vd-lvl{flex:none;font:700 12px var(--font-display);min-width:28px;text-align:center;border-radius:8px;padding:3px 6px;background:var(--morado-soft);color:var(--tinta)}
.vd-say{flex:none;min-width:44px;min-height:44px}
.vd-dicen .vd-row{border-bottom:0;padding:6px 0}
.vd-ans{background:#F4FBF6;border-radius:12px;padding:8px 10px!important}
.vd-who{flex:none;font-size:22px}
.vd-role{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.vd-role button{border:1.5px solid var(--borde);background:#fff;border-radius:99px;padding:8px 14px;font:600 14px var(--font-display);min-height:40px;color:var(--tinta)}
.vd-role button.on{border-color:var(--morado);background:var(--morado-soft)}
.vd-chat{display:flex;flex-direction:column;gap:8px}
.vd-msg{max-width:88%;align-self:flex-start;background:#fff;border:1.5px solid var(--borde);border-radius:16px 16px 16px 4px;padding:8px 10px}
.vd-msg.me{align-self:flex-end;background:var(--morado-soft);border-color:var(--morado);border-radius:16px 16px 4px 16px}
.vd-msg small{display:block;font:700 12px var(--font-display);color:var(--gris);margin-bottom:2px}
.vd-cult{display:flex;gap:12px;align-items:flex-start}
.vd-passport{background:linear-gradient(160deg,#0F3B5F,#1D4E89);color:#fff;border-radius:22px;padding:18px;box-shadow:0 10px 26px rgba(15,59,95,.3)}
.vd-pp-top{display:flex;align-items:center;gap:12px;font-size:30px}.vd-pp-top b{display:block;font:700 15px var(--font-display);letter-spacing:.08em}.vd-pp-top span{display:block;font-size:13px;opacity:.85}
.vd-pp-name{margin:14px 0 4px;padding:10px 12px;background:rgba(255,255,255,.12);border-radius:12px}.vd-pp-name small{display:block;font-size:12px;opacity:.8}.vd-pp-name b{font:700 18px var(--font-display)}
.vd-pp-count{font:700 14px var(--font-display);color:#F2C14E;margin:8px 0 10px}
.vd-stamps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vd-stamp-btn{border:0;background:none;padding:0;cursor:pointer}
.vd-stamp{aspect-ratio:1/1;border-radius:50%;border:2.5px dashed rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:rgba(255,255,255,.7);text-align:center;padding:6px}
.vd-stamp b{font:700 10px/1.1 var(--font-display);letter-spacing:.04em}.vd-stamp small{font-size:10px;line-height:1.1}.vd-st-ic{font-size:24px;filter:grayscale(1);opacity:.6}
.vd-stamp.on{border:3px double #F2C14E;color:#FFE7A3;background:rgba(242,193,78,.12);transform:rotate(-8deg)}
.vd-stamp.on .vd-st-ic{filter:none;opacity:1}
.vd-stamp.soon{opacity:.5}
.vd-stamp.big{width:150px;margin:8px auto;color:#8A6508;border-color:#C9A227;background:#FFF8E6}
.vd-stamp.big.on{color:#7A5200}
@media (max-width:360px){.vd-stamps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 2.9 · 🎒 Mochila, 🧰 Kit del maestro, 📝 Mis exámenes, ⚙️ Ajustes en grupos, 🏅 insignias ---------- */
.cp-view{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;background:var(--oro-soft);border:1.5px dashed var(--oro);border-radius:14px;padding:10px 12px;margin:0 0 12px;font:700 14px var(--font-display)}
.mx-card{padding:0;overflow:hidden}
.mx-card>summary{list-style:none;cursor:pointer;padding:14px 16px;font:700 15px var(--font-display);display:flex;align-items:center;justify-content:space-between}
.mx-card>summary::-webkit-details-marker{display:none}
.mx-card>summary::after,.aj-g>summary::after,.kit-units>summary::after{content:"▾";font-size:14px;color:var(--gris);transition:transform .2s;flex:none;margin-left:8px}
.mx-card[open]>summary::after,.aj-g[open]>summary::after,.kit-units[open]>summary::after{transform:rotate(180deg)}
.mx-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--borde)}
.mx-row b{display:block;font:700 14.5px var(--font-display)}
.mx-row span:not(.mx-ic){display:block;font-size:12.5px;color:var(--gris);line-height:1.35}
.mx-ic{font-size:24px;flex:none;width:32px;text-align:center}
.mx-set{padding:12px 16px!important;border-top:1px solid var(--borde);border-bottom:0!important;background:var(--morado-soft)}
.kit-head .kit-ic{font-size:34px;flex:none}
.kit-head b{font:700 16px var(--font-display)}
.kit-head .ab-code{background:var(--verde-soft)}
.kit-mochila{margin-top:12px;font-size:16px}
.kit-tag{display:inline-block;margin-left:6px;vertical-align:1px;font:700 10.5px var(--font-display);letter-spacing:.03em;color:#6B4E05;background:var(--oro-soft);border:1px solid var(--oro);border-radius:999px;padding:1px 7px}
.kit-units{padding:0}
.kit-units>summary{list-style:none;cursor:pointer;padding:14px;font:700 14.5px var(--font-display);display:flex;align-items:center;justify-content:space-between}
.kit-units>summary::-webkit-details-marker{display:none}
.kit-units>p{padding:0 14px}
.kit-u{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--borde)}
.kit-u b{display:block;font:700 13.5px var(--font-display)}
.kit-u span:not(.kit-un){display:block;font-size:12px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kit-un{font-size:20px;flex:none}
.kit-u .btn.sm{padding:7px 9px;font-size:12.5px;min-height:38px}
.kit-book{cursor:default;flex-wrap:wrap}
.kit-book>div:nth-child(2){flex:1 1 calc(100% - 60px)!important}
.kit-book .cp-btns{flex:1 1 100%;padding-left:54px;flex-wrap:wrap}
.kit-book .cp-btns .btn{flex:1 1 auto}
.acc-banner.slim{padding:10px 14px;border-style:dashed}
.acc-banner.slim .ab-ic{font-size:22px}
/* ⚙️ Ajustes: 5 grupos */
.aj-g{background:#fff;border:1px solid var(--borde);border-radius:16px;margin:10px 0;overflow:hidden}
.aj-g>summary{list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:48px}
.aj-g>summary::-webkit-details-marker{display:none}
.aj-g>summary::after{margin-left:auto;order:3}
.aj-t{font:700 16px var(--font-display);order:1}
.aj-s{order:4;flex-basis:100%;font-size:12.5px;color:var(--gris)}
.aj-g[open]>summary{border-bottom:1px solid var(--borde);background:var(--morado-soft)}
.aj-b{padding:6px 16px 14px}
.aj-b>.card{margin:10px 0}
.aj-sub{font:700 13px var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);margin:16px 2px 6px}
.aj-sub.danger-sub{color:var(--rojo)}
.vista-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 2px}
.vista-row>span{font:700 14px var(--font-display)}
.vista-seg{flex:1;min-width:220px}
.vista-seg button{min-height:42px;font-size:14px}
/* 🏅 insignias: una fila que se desliza */
.ins-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ins{flex:0 0 96px;scroll-snap-align:start;background:#fff;border:1.5px solid var(--borde);border-radius:16px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:var(--tinta)}
.ins-e{font-size:30px;line-height:1.1;filter:grayscale(1);opacity:.45}
.ins b{font:700 12.5px var(--font-display);line-height:1.2}
.ins-v{font-size:11.5px;color:var(--gris);font-weight:700}
.ins.on{border-color:var(--oro);background:linear-gradient(160deg,#fff,var(--oro-soft))}
.ins.on .ins-e{filter:none;opacity:1}
.ins.on .ins-v{color:#0F6E56}
.av-coll .coll-fl.cur small{text-decoration:underline;text-underline-offset:3px}

/* ---------- 2.10 · 🔵 lo que ya practicaste hoy (hasta cerrar la app): azul pastel y «✓ Usado» ---------- */
[data-usado]{position:relative}
.menu-item.usado,.mode-btn.usado,.vd-sit.usado,.unit-card.usado{background:#E4F1FB!important;border-color:#8FBFE6!important}
.menu-item.usado .ic{background:#CFE5F7!important}
.vd-prac.usado,.entry.usado,.btn.usado{box-shadow:0 0 0 3px #8FBFE6}
.usado-chip{position:absolute;top:6px;right:8px;font:800 10.5px var(--font-display);letter-spacing:.02em;color:#1D5F95;background:#fff;border:1.5px solid #8FBFE6;border-radius:999px;padding:1px 7px;line-height:1.5;pointer-events:none}
.mode-btn .usado-chip{top:4px;right:4px}
html.dark .menu-item.usado,html.dark .mode-btn.usado,html.dark .vd-sit.usado{background:#1B2B3B!important;border-color:#4C7FA8!important}
html.dark .menu-item.usado .ic{background:#24394E!important}
html.dark .usado-chip{background:#13202C;color:#A9D0F0;border-color:#4C7FA8}
.kit-g{margin-top:20px}
.kit-how b{font:700 14.5px var(--font-display)}
.kit-how ol{margin:6px 0 0;padding-left:20px;font-size:13.5px;line-height:1.45}
.cp-notes{flex-wrap:wrap}

/* ---------- 2.11 · 📊 Evaluación del maestro ---------- */
.kit-big{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;border-radius:18px;padding:16px;margin:4px 0 10px;color:#fff;background:linear-gradient(140deg,#1F7A50,#0F5132);box-shadow:0 4px 14px rgba(15,81,50,.25);font:inherit;cursor:pointer}
.kit-big .kb-ic{font-size:30px;flex:none}
.kit-big .kb-t{flex:1;min-width:0}
.kit-big .kb-t b{display:block;font:700 17px var(--font-display)}
.kit-big .kb-t span{display:block;font-size:13px;opacity:.92;margin-top:2px}
.kit-big>b{font-size:22px}
.kit-units.open{padding:12px 0 4px}
.kit-units.open>b{display:block;padding:0 14px;font:700 14.5px var(--font-display)}
.ev-lead p{line-height:1.5}
.ev-table td,.ev-table th{font-size:12.5px;vertical-align:top}
.ev-table .ev-si{color:#0F6E56;font-weight:800}
.ev-ol{margin:4px 0 0;padding-left:20px;line-height:1.5;font-size:14px}
.ev-ol li{margin:4px 0}
.ev-keycard{text-align:center}
.ev-key{font:800 54px/1.1 var(--font-display);letter-spacing:.08em;color:var(--tinta);margin:6px 0}
.ev-proj{position:fixed;inset:0;z-index:200;background:#10263D;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.ev-proj small{display:block;font-size:18px;opacity:.85}
.ev-proj b{display:block;font:800 min(28vw,180px)/1.05 var(--font-display);letter-spacing:.06em;margin:10px 0}
.ev-proj p{font-size:20px;max-width:720px;margin:0 auto 18px;line-height:1.4}
.ev-proj span{font-size:14px;opacity:.7}
.ev-range{width:100%;margin:14px 0 8px;accent-color:#1F7A50}
.ev-split{display:flex;border-radius:12px;overflow:hidden;font:700 13px var(--font-display);color:#fff}
.ev-split>div{padding:10px 8px;text-align:center;white-space:nowrap;overflow:hidden;min-width:0}
.ev-ex{background:#1F7A50}.ev-pr{background:#A3416B}
.ev-unit .small{line-height:1.35}
.ev-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-left:34px}
.ev-btns .btn{flex:1 1 auto}
.ev-total{font:700 15px var(--font-display);text-align:right;margin:0 4px 6px}
.ev-crit input[type=text]{flex:1;min-width:0;font-weight:700}
.ev-crit textarea{width:100%;box-sizing:border-box;font:inherit;font-size:13.5px;border:1.5px solid var(--borde);border-radius:10px;padding:6px 8px;resize:vertical}
.ev-lv{display:block;margin-top:8px}
.ev-lv>span{display:block;font-size:12px;font-weight:700;color:var(--gris);margin-bottom:2px}
.ev-stu{padding:0}
.ev-stu>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:8px;padding:12px 14px;font-weight:700}
.ev-stu>summary::-webkit-details-marker{display:none}
.ev-stu.ok>summary{background:var(--verde-soft)}
.ev-score{font:800 15px var(--font-display)}
.ev-row{padding:8px 14px;border-top:1px solid var(--borde)}
.ev-lvs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.ev-lvs button{min-height:40px;border-radius:10px;border:1.5px solid var(--borde);background:#fff;font:700 12.5px var(--font-display);color:var(--tinta);padding:4px}
.ev-lvs button.on{background:#1F7A50;border-color:#1F7A50;color:#fff}
.ev-print{display:none}
@media print{body.ev-printing #shell{display:none!important}body.ev-printing .ev-print{display:block;font-family:Arial,sans-serif;color:#000}
  .ev-print table{border-collapse:collapse;width:100%;font-size:11pt}.ev-print th,.ev-print td{border:1px solid #999;padding:6px;vertical-align:top}.ev-print th{background:#eee}}
.ev-item{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:10px 12px;margin:8px 0}
.ev-item.si{border-color:#1F7A50;background:var(--verde-soft)}
.ev-it-h{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.ev-tag{font:700 11px var(--font-display);border-radius:999px;padding:2px 8px;background:var(--morado-soft);color:var(--ink)}
.ev-item.si .ev-tag{background:#1F7A50;color:#fff}
/* 2.11 · contadores y «¿Qué repaso hoy?» */
.usado-chip.cero{color:var(--gris);border-color:var(--borde)}
.menu-item.usado-full,.vd-prac.usado-full{border-color:#3E8ED0!important}
.usado-full .usado-chip{background:#3E8ED0;color:#fff;border-color:#3E8ED0}
.rq-card{border:1.5px solid #8FBFE6;background:linear-gradient(160deg,#fff,#E4F1FB);padding:12px}
.rq-t{font:700 15px var(--font-display);margin:0 2px 6px}
.rq-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:10px 12px;margin-top:6px;font:inherit;color:var(--tinta)}
.rq-ic{font-size:22px;flex:none}
.rq-tx{flex:1;min-width:0}.rq-tx b{display:block;font:700 14px var(--font-display)}.rq-tx span{display:block;font-size:12.5px;color:var(--gris)}
html.dark .rq-card{background:#16222E;border-color:#4C7FA8}
.cm-eval{border:1.5px solid var(--oro);background:linear-gradient(160deg,#fff,var(--oro-soft))}
.cm-t{font:700 15px var(--font-display);margin-bottom:6px}
.cm-l{display:flex;gap:10px;font-size:13.5px;line-height:1.45;margin:6px 0}
.cm-l>span:first-child{flex:none;font-size:18px}
.ay-it{padding:8px 0;border-bottom:1px solid var(--borde)}.ay-it:last-child{border-bottom:0}
.ay-it b{font:700 14.5px var(--font-display)}.ay-it p{margin:4px 0 0;line-height:1.45}
.ins-m{font-size:10.5px;color:var(--gris);font-weight:600;line-height:1.2}
.ins{flex-basis:104px}
/* 2.11 · 📒 apuntes completos */
.nb-voc2{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.nb-voc2>div{padding:3px 0;border-bottom:1px dashed #d8d2e4}
.nb-ex{display:block;color:#666;font-style:italic;font-size:.9em}
.nb-sum,.nbp-sum{margin:0;padding-left:22px}
.nb-sum li{margin:3px 0}
.nbp-voc2>div{break-inside:avoid;page-break-inside:avoid}
.nbp .nbp-voc2{break-inside:auto!important;page-break-inside:auto!important}
.nbp-ex{color:#555;font-style:italic;padding-left:18px;line-height:var(--L)}
.nbp-sum li{line-height:var(--L)}
.nbp-ph td{line-height:calc(var(--L) - 4px)}
.nbp-how{color:#444}

/* 2.11.3 · Mis cursos: «Mi cuenta y ayuda» separado de los cursos */
.acct-sep{display:flex;align-items:center;gap:10px;margin:26px 2px 10px;color:var(--gris);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.acct-sep::before,.acct-sep::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.acct-card{background:rgba(120,120,140,.08);border:1px dashed rgba(120,120,140,.35);border-radius:16px;padding:12px}
.acct-card .btn.sm{padding:10px 8px;font-size:13.5px;width:100%}

/* 2.12 · 🧭 Kit del maestro como ruta: «¿Qué hago con mi unidad?» */
.kit-intro{border:2px solid var(--oro);background:var(--oro-soft)}
.kit-intro .ki-t{font:700 17px var(--font-display);display:block;margin-bottom:4px}
.ki-ol{margin:6px 0 0;padding-left:22px}.ki-ol li{margin:5px 0;line-height:1.4}
.kit-route{border:2px solid var(--morado);padding:16px}
.kr-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kr-k{font:700 17px var(--font-display);color:var(--morado)}
.kr-help{background:none;border:0;color:var(--morado);font-weight:700;font-size:13.5px;text-decoration:underline;padding:8px 2px;min-height:40px;cursor:pointer}
.kr-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--gris);margin-bottom:4px}
.kr-sel{width:100%;padding:12px;border-radius:12px;border:2px solid var(--borde);background:var(--blanco);color:var(--tinta);font:600 15px inherit;min-height:48px}
.kr-prog{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:12px 0}
.kr-prog i{height:8px;border-radius:99px;background:var(--borde)}.kr-prog i.on{background:var(--verde)}
.kit-next{margin:2px 0 14px;font-size:16px;text-align:left;justify-content:flex-start}
.kr-fin{background:var(--verde-soft);border-radius:12px;padding:12px;margin:2px 0 14px}
.kr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kr-step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--borde);border-radius:14px;padding:12px;background:var(--blanco)}
.kr-step.now{border:2px solid var(--oro);box-shadow:0 4px 14px rgba(212,165,42,.18)}
.kr-step.done{background:var(--verde-soft);border-color:transparent}
.kr-n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--font-display);background:var(--morado-soft);color:var(--morado)}
.kr-step.now .kr-n{background:var(--oro);color:#2B2420}.kr-step.done .kr-n{background:var(--verde);color:#fff}
.kr-b{flex:1;min-width:0}
.kr-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.kr-h b{font:700 15.5px var(--font-display)}
.kr-tag{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--oro);color:#2B2420;border-radius:99px;padding:2px 9px}
.kr-tag.ok{background:var(--verde);color:#fff}
.kr-how{margin:4px 0 2px;font-size:13.5px;line-height:1.4}
.kr-st{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--gris)}.kr-step.done .kr-st{color:var(--verde)}
.kr-btns{display:flex;flex-wrap:wrap;gap:8px}.kr-btns .btn.sm{min-height:42px}
.kit-more{padding:0;margin-top:16px;background:var(--blanco);border:1px solid var(--borde);border-radius:16px}
.kit-more>summary{list-style:none;cursor:pointer;padding:16px;display:flex;flex-direction:column;gap:2px;position:relative}
.kit-more>summary::-webkit-details-marker{display:none}
.kit-more>summary b{font:700 16px var(--font-display)}.kit-more>summary span{font-size:12.5px;color:var(--gris)}
.kit-more>summary::after{content:"▾";position:absolute;right:16px;top:18px;color:var(--gris);font-size:16px;transition:transform .2s}
.kit-more[open]>summary::after{transform:rotate(180deg)}
.kit-more-b{padding:0 12px 12px}

/* 2.13 · © al pie de los apuntes */
.nb-copy{margin:8px 0 0;text-align:center;font-size:11px;color:#7C7268}
.kr-zero{margin-bottom:10px}
.kr-zero.mini{padding:10px 12px}.kr-zero.mini .kr-how{font-size:12.5px}
/* 2.13 · Mis cursos: 🧰 Mi Kit (maestro) y 🎒 Mi mochila (alumno) a un toque */
.mk-card{border:2px solid var(--morado)}
.mk-t{font:700 17px var(--font-display)}
.mk-btns{display:flex;flex-wrap:wrap;gap:8px}.mk-btns .btn{flex:1 1 30%;min-height:46px}
.fan-moch{margin-top:8px}

/* ---------- 2.14 · ★ Bonus · Arma la Frase ---------- */
.ar-entry{display:flex;align-items:center;gap:12px;width:100%;background:linear-gradient(155deg,#1B3A5C,#10263D);color:#fff;border:0;border-radius:18px;padding:14px 16px;margin:10px 0;text-align:left;box-shadow:0 6px 16px rgba(27,42,74,.22)}
.ar-entry b{display:block;font:700 17px var(--font-display)}
.ar-entry span{display:block;font-size:13px;color:#D6DDEB;line-height:1.35}
.ar-entry .ar-pill{display:inline-block;margin-bottom:2px}
.ar-star{font-style:normal;width:46px;height:46px;border-radius:14px;background:#F2C14E;color:rgb(46,31,69);display:grid;place-items:center;font:800 24px var(--font-display);flex:none}
.ar-pill{background:#F2C14E;color:rgb(46,31,69)!important;font:800 11px var(--font-display)!important;letter-spacing:.14em;padding:3px 9px;border-radius:99px}
.ar-head{background:linear-gradient(155deg,#1B3A5C,#10263D);color:#fff;border-radius:20px;padding:18px;margin:0 0 6px}
.ar-head h2{margin:8px 0 4px;font-size:1.5em}
.ar-head p{color:#EFE3D2;font-size:14px;line-height:1.45}
.ar-prog{display:flex;justify-content:space-between;font-size:13px;margin-top:8px}
.ar-pbar{height:8px;border-radius:99px;background:rgba(255,255,255,.18);margin-top:6px;overflow:hidden}
.ar-pbar i{display:block;height:100%;background:#F2C14E;border-radius:99px}
.ar-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--borde);border-radius:14px;padding:12px 14px;margin:0 0 8px;min-height:58px}
.ar-row.ok{background:#E8F0FB;border-color:#C9DBF3}
.ar-row.nx{border:2px solid #F2C14E}
.ar-num{width:34px;height:34px;border-radius:10px;background:var(--morado-soft);color:var(--morado);display:grid;place-items:center;font-weight:800;flex:none}
.ar-row.ok .ar-num{background:#1E7A55;color:#fff}
.ar-row.nx .ar-num{background:#F2C14E;color:rgb(46,31,69)}
.ar-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.ar-rt b{font-size:15px}.ar-rt span{font-size:12.5px;color:var(--gris)}
.ar-st{font-size:12px;font-weight:800;color:var(--gris)}
.ar-row.ok .ar-st{color:#1E7A55}.ar-row.nx .ar-st{color:#8A6508}
.ar-top{background:linear-gradient(155deg,#1B3A5C,#10263D);color:#fff;border-radius:18px;padding:14px 16px;margin:0 0 10px}
.ar-top h2{margin:2px 0 8px;font-size:1.3em}
.ar-kick{font:800 11px var(--font-display);letter-spacing:.12em;color:#F2C14E}
.ar-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.ar-bar i{height:6px;border-radius:99px;background:rgba(255,255,255,.25)}
.ar-bar i.on{background:#F2C14E}
.ar-sub{font-size:12px;color:#D6DDEB;margin-top:6px}
.ar-k{font:700 12px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--morado);margin-bottom:6px;display:block}
.ar-card{margin:10px 0}
.ar-es{font:700 20px var(--font-display);line-height:1.3;margin:2px 0 8px}
.ar-es2{font-size:14px;color:#D6DDEB;margin-bottom:6px}
.ar-blk{display:inline-flex;align-items:center;border-radius:10px;padding:8px 12px;font-weight:800;font-size:15px;line-height:1.2;color:#fff}
.ar-p{background:#7A1E3C}.ar-b{background:#2F6FD0}.ar-g{background:#1E7A55}.ar-y{background:#F2C14E;color:rgb(46,31,69)}
.ar-blk.ar-big{font-size:20px;padding:12px 16px}
.ar-blk.ar-sm{font-size:12.5px;padding:5px 9px}
.ar-blk.ar-free{background:transparent;color:inherit;border:2px dashed #A0948A}
.ar-enrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ar-row-b{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ar-plus{font-weight:800;color:var(--gris)}
.ar-form .ar-row-b .ar-blk{font-size:13px;padding:6px 10px}
.ar-seen{display:flex;flex-direction:column;gap:6px;margin:4px 0 6px}
.ar-pair{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:6px 6px 6px 12px;font-size:14px}
.ar-pair .ar-blk{font-size:13px;padding:6px 10px}
.ar-seenu{display:inline-block;background:#E6F3EC;color:#155A3E;font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px;margin-bottom:10px}
.ar-think{display:block;width:100%;min-height:52px;border-radius:12px;border:2px dashed #1E7A55;background:#F1F8F4;color:#155A3E;font-weight:700}
.ar-dark{background:linear-gradient(155deg,#1B3A5C,#10263D);color:#fff;border-radius:16px;padding:16px;margin:10px 0}
.ar-sent{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.ar-sent.join .ar-blk{animation:arJoin .5s ease both}
.ar-sent.join .ar-blk:nth-child(2){animation-delay:.12s}.ar-sent.join .ar-blk:nth-child(3){animation-delay:.24s}.ar-sent.join .ar-blk:nth-child(4){animation-delay:.36s}
@keyframes arJoin{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.ar-btns{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.ar-dark .btn.ghost{background:rgba(255,255,255,.14);color:#fff}
.ar-how{display:block;width:100%;margin-top:10px;min-height:42px;border-radius:10px;border:1px dashed rgba(255,255,255,.4);background:transparent;color:#D6DDEB;font-size:13px;font-weight:600}
.ar-pron{margin-top:8px;background:rgba(255,255,255,.1);border-radius:10px;padding:10px 12px;font-size:15px}
.ar-pron .muted{color:#B9C3D8}
.ar-bus{background:#fff;border:1px solid var(--borde);border-radius:16px;padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:6px}
.ar-bu{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border-radius:10px;transition:background .2s}
.ar-bu .ar-blk{font-size:13.5px;padding:6px 10px}
.ar-bu.on{background:var(--morado-soft);outline:2px solid var(--morado)}
.ar-why{font-size:14.5px;line-height:1.5}
.ar-ojo{background:#FFF6F5;border:1px solid #F3D5D2;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin:10px 0}
.ar-ojo s{color:#B03A2E}
.ar-tip{background:var(--morado-soft);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;margin:0 0 10px}
.ar-under{display:flex;flex-wrap:wrap;gap:8px;font:700 18px var(--font-display)}
.ar-under span{border-bottom:4px solid;padding:0 2px}
.ar-up{border-color:#7A1E3C!important}.ar-ub{border-color:#2F6FD0!important}.ar-ug{border-color:#1E7A55!important}.ar-uy{border-color:#F2C14E!important}
.ar-target{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:62px;background:#fff;border:2px dashed #DCCDB8;border-radius:16px;padding:10px;margin:0 0 8px}
.ar-slot{display:inline-flex;align-items:center;min-width:70px;height:40px;border-radius:10px;border:2px dashed;padding:0 10px;font-size:12px;font-weight:700}
.ar-sp{border-color:#7A1E3C;background:#F4EFFA;color:#7A1E3C}.ar-sb{border-color:#2F6FD0;background:#EEF4FD;color:#2F6FD0}.ar-sg{border-color:#1E7A55;background:#F1F8F4;color:#1E7A55}.ar-sy{border-color:#D4A017;background:#FDF8EA;color:#8A6508}
.ar-target .ar-blk{cursor:pointer}
.ar-peek{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ar-pool{display:flex;flex-wrap:wrap;gap:8px}
.ar-chip{min-height:46px;padding:0 14px;border-radius:12px;border:2px solid;background:#fff;font-weight:700;font-size:15px}
.ar-cp{border-color:#7A1E3C;color:#7A1E3C}.ar-cb{border-color:#2F6FD0;color:#2F6FD0}.ar-cg{border-color:#1E7A55;color:#1E7A55}.ar-cy{border-color:#D4A017;color:#7A5A00}
.ar-chip.on{background:#F3EBDF;box-shadow:inset 0 0 0 2px currentColor}
.ar-chip.right{background:#1F8A5B;border-color:#1F8A5B;color:#fff}
.ar-chip.wrong{background:#FBE7E6;border-color:#C2413B;color:#9E2E29;text-decoration:line-through}
.ar-chip:disabled{opacity:1}
.ar-chip.shake{animation:arShake .35s}
@keyframes arShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.ar-grp{margin:10px 0}
.ar-gl{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 2px 6px}
.ar-tp{color:#7A1E3C}.ar-tb{color:#2F6FD0}.ar-tg{color:#1E7A55}.ar-ty{color:#8A6508}
.ar-msg{border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;margin:8px 0;background:var(--morado-soft)}
.ar-msg:empty{display:none}
.ar-msg.ok{background:#E6F3EC;color:#155A3E}
.ar-msg.bad{background:#FBE7E6;color:#9E2E29}
.ar-peekbar{display:flex;justify-content:center;background:transparent!important;box-shadow:none!important}
.ar-peekbar .btn{background:#fff;min-width:60%}
.ar-okcard{background:#E6F3EC;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;margin:10px 0;color:#155A3E}
.ar-okcard .btn{align-self:flex-start}
.ar-done{text-align:center;background:linear-gradient(155deg,#1B3A5C,#10263D);color:#fff;border-radius:20px;padding:22px 18px}
.ar-done h2{margin:8px 0 4px}
.ar-done p{color:#D6DDEB}
.ar-bigstar{width:72px;height:72px;margin:0 auto;border-radius:20px;background:#F2C14E;color:rgb(46,31,69);display:grid;place-items:center;font:800 36px var(--font-display);animation:arJoin .5s ease both}
.ar-mine{background:#fff;color:#2B2420;border-radius:12px;padding:12px;font:700 17px var(--font-display);margin:8px 0}
.btn.ar-gold{background:#F2C14E;color:rgb(46,31,69)}

/* ---------- 2.15 · ✓ maestro verificado ---------- */
.vf-card{text-align:center;background:#E3F5EC;border:2px solid #1F8A5B}
.vf-card h2{margin:6px 0 4px;color:#155A3E}
.vf-ic{width:58px;height:58px;margin:0 auto;border-radius:50%;background:#1F8A5B;color:#fff;display:grid;place-items:center;font:800 30px var(--font-display)}
.vf-ok{display:flex;flex-direction:column;gap:2px;background:#E3F5EC;color:#155A3E}
.vf-trial{background:#FBF2D9;border:1.5px solid #E7C76A}
.vf-trial.over{background:#FBE7E6;border-color:#E9B3AF}
.vf-dots{display:flex;gap:8px;margin:2px 0 6px}
.vf-dots span{width:38px;height:38px;border-radius:50%;border:2px dashed #C9A13B;display:grid;place-items:center;font-weight:800;color:#8A6508;background:#fff}
.vf-dots span.on{background:#1F8A5B;border:2px solid #1F8A5B;color:#fff}
.kit-vf{background:#FBF2D9;border-radius:10px;padding:8px 10px}

/* ---------- Kjimi · letras del jñatrjo ---------- */
.kj-letras{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.kj-l{min-width:38px;height:38px;border-radius:10px;border:1.5px solid var(--borde);background:#fff;font:700 17px var(--font-body);color:var(--morado)}

/* ---------- Kjimi · 🦌 Cultura mazahua ---------- */
.cul-flag .flag-svg{width:100%;height:auto;border-radius:10px;display:block}
.cul-text h3{color:var(--morado);margin:14px 0 4px}.cul-text h3:first-child{margin-top:0}
.cul-text p{line-height:1.55}
.cul-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.cul-stats div{background:#fff;border-radius:14px;padding:10px;text-align:center;box-shadow:0 1px 3px rgba(43,36,32,.08)}
.cul-stats b{display:block;font:700 16px var(--font-display);color:var(--morado)}.cul-stats span{font-size:12px;color:var(--gris)}
/* Kjimi 2.0 · 🎙️ modo curador */
.cur-head .cur-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.cur-stats div{background:var(--fondo);border-radius:12px;padding:8px 4px}.cur-stats b{display:block;font:700 20px var(--font-display);color:var(--morado)}.cur-stats span{font-size:11.5px;color:var(--gris)}
.cur-tabs{display:flex;gap:6px;margin:12px 0 10px;flex-wrap:wrap}.cur-tabs button{border:1.5px solid var(--borde);background:var(--blanco);border-radius:999px;padding:8px 12px;font:700 13px var(--font-body);color:var(--tinta);cursor:pointer}.cur-tabs button.on{background:var(--morado);border-color:var(--morado);color:#fff}
.cur-units{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.cur-u{border:1.5px solid var(--borde);background:var(--blanco);border-radius:12px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;color:var(--tinta);font:600 12px var(--font-body)}.cur-u.on{border-color:var(--morado);box-shadow:0 0 0 2px var(--morado) inset}.cur-u b{font-size:18px}.cur-u small{color:var(--gris)}
.cur-row{background:var(--blanco);border:1px solid var(--borde);border-radius:14px;padding:10px 12px;margin:8px 0}
.cur-w{display:flex;align-items:center;gap:10px}.cur-e{font-size:22px;width:28px;text-align:center}.cur-w b{font:700 17px var(--font-display);color:var(--morado)}
.cur-st{font:700 11px var(--font-body);border-radius:999px;padding:3px 8px;white-space:nowrap}.cur-st.app{background:#E3F2E8;color:#1E7D4F}.cur-st.loc{background:#FBF2D9;color:#8A6508}.cur-st.no{background:#F3EDE4;color:#7C7268}
.cur-tag{margin-left:6px;font:700 10.5px var(--font-body);background:#FBF2D9;color:#8A6508;border-radius:999px;padding:2px 6px}
.cur-btns{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.cur-btns .btn{padding:7px 12px}
.cur-rec.rec-on{background:#C0392B!important;color:#fff!important;animation:curpulse 1s infinite}
@keyframes curpulse{50%{opacity:.75}}
.nov-card summary{cursor:pointer}


/* ==================================================================================================
   Kjimi 2.0.1 · DISEÑO PARA CELULAR (iPhone 16 y similares) — barras como las de Soar
   ================================================================================================== */
/* ---------- barra de arriba: logo · título · 📖 · 🔥 (nada más) ---------- */
.topbar{padding:calc(8px + env(safe-area-inset-top)) 16px 10px!important}
.topbar-row{gap:10px!important;min-height:44px}
.topbar .brand{gap:10px!important}
.topbar .brand-mark{width:40px!important;height:40px!important;border-radius:12px!important;background:#FBF6EC!important;border:2px solid #D4A017!important;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.topbar .brand-mark svg{width:24px!important;height:24px!important}
.brand-text h1,.brand-text h1.course-ttl{font-size:20px!important;line-height:1.15;letter-spacing:.005em}
.brand-text p{font-size:10.5px!important;letter-spacing:.07em;margin-top:1px!important}
#culturaBtn{display:none!important} /* por si quedó de una versión anterior */
.cs-top-btn{width:40px!important;height:40px!important;font-size:19px!important;margin:0!important;margin-left:auto!important}
.streak-pill{flex:none;padding:7px 12px!important;font-size:14px!important;min-height:40px}
.topbar .streak-pill{margin-left:0}
.topbar-row>.cs-top-btn+.streak-pill{margin-left:0}
.topbar .brand+.streak-pill{margin-left:auto}
/* 🎮 PRÁCTICA: una etiqueta colgando debajo de la barra, ya no empuja al título */
.topbar .prac-badge{position:absolute;left:66px;bottom:8px;margin:0!important;z-index:3;font-size:9.5px!important;line-height:1.3;padding:1px 8px!important;letter-spacing:.07em;border-width:1.5px!important;box-shadow:none!important}
body.practice-on .topbar #brandSub{visibility:hidden}
body.practice-on .topbar .streak-pill{display:flex!important}
@media (max-width:400px){
  .topbar{padding-left:14px!important;padding-right:14px!important}
  .brand-text h1,.brand-text h1.course-ttl{font-size:19px!important}
  body.practice-on .brand-text h1.course-ttl{font-size:19px!important}
  body.practice-on #brandSub{display:block!important}
  .topbar .prac-badge{left:64px}
  .cs-top-btn{width:38px!important;height:38px!important;font-size:18px!important}
  .streak-pill{padding:6px 10px!important;min-height:38px}
}

/* ---------- barra de abajo: delgada, letras en una sola línea, pegada al borde ---------- */
.bottomnav{padding:5px 4px calc(2px + env(safe-area-inset-bottom))!important;border-top:1px solid rgba(60,30,40,.10)!important;box-shadow:0 -1px 8px rgba(0,0,0,.05)!important}
.nav-item{gap:2px!important;padding:5px 0 4px!important;min-width:0;min-height:48px;justify-content:center}
.nav-item svg{width:24px!important;height:24px!important}
.nav-item span{font-size:10.5px!important;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:0}
#shell{padding-bottom:calc(74px + env(safe-area-inset-bottom))!important}
body.entrada #shell{padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}

/* 2.0.2 · las pestañas principales SÍ llevan «‹ Atrás» cuando llegaste desde otra pantalla (te regresa a esa) */

/* ---------- camino «Estás aquí»: más delgado y sin cortar letras a la mitad ---------- */
.where2{min-height:44px!important;border-left-width:4px!important;padding:3px 10px 3px 3px!important;border-radius:12px!important}
.where2 .back-btn.wb2-back{width:38px!important;height:38px!important;min-width:38px!important}
.where2 .wb2-path{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px);mask-image:linear-gradient(90deg,transparent 0,#000 18px)}

/* ---------- botón flotante «‹ Regresar»: ahora es un círculo chico que no tapa el contenido ---------- */
.back-float,.cs-back{width:46px;height:46px;padding:0!important;justify-content:center;border-radius:50%!important;gap:0!important;max-width:none!important;box-shadow:0 4px 14px rgba(46,31,69,.30)!important}
.back-float span,.cs-back .cs-back-t{display:none!important}
.back-float svg,.cs-back svg{width:20px!important;height:20px!important;stroke-width:2.8!important}
#shell .back-float{bottom:calc(70px + env(safe-area-inset-bottom))}
body.in-lesson #shell .back-float,body.act-on #shell .back-float{bottom:calc(14px + env(safe-area-inset-bottom))}
.cs-ov.cs-root .cs-back{display:none!important}

/* ---------- avisos (toast): encima de la barra de abajo; en pantallas sin barra, arriba ---------- */
.toast{bottom:calc(80px + env(safe-area-inset-bottom))!important;font-size:14px!important;padding:10px 16px!important;max-width:min(88vw,420px)!important}
body.welcome-on .toast,body.entrada .toast{bottom:auto!important;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-20px)}
body.welcome-on .toast.on,body.entrada .toast.on{transform:translateX(-50%)}
body.game-on .toast,body.act-on .toast{bottom:calc(150px + env(safe-area-inset-bottom))!important}

/* ---------- diccionario: botón 🦌 Cultura junto a «Cerrar» ---------- */
.cs-cult{margin-left:auto}
.cs-head .cs-title{flex:1}
@media (max-width:400px){.cs-head .cs-x{padding:6px 9px;font-size:12px}}

/* ---------- pantallas sin barra (bienvenida): el logo ya no choca con la isla del iPhone ---------- */
body.welcome-on main{padding-top:calc(14px + env(safe-area-inset-top))}
/* ---------- avisos de cuenta: el texto chico con su propio interlineado (antes quedaba muy separado) ---------- */
.acc-banner .ab-top>div>span{display:block;line-height:1.4;margin-top:2px}
/* ---------- casillas de clave de 4 números: el texto «Opcional» cabe completo ---------- */
.code4::placeholder{letter-spacing:normal;font-size:15px;font-weight:600;opacity:.6}
/* el logo de arriba siempre en crema, también en modo oscuro (si no, la mitad guinda del rombo no se ve) */
html.dark .topbar .brand-mark:not(.esc){background:#FBF6EC!important;border-color:#D4A017!important}
/* aviso «Hay una versión nueva»: más ancho y legible */
.update-bar{width:min(92vw,420px);font-size:14px!important;line-height:1.35;padding:12px 18px!important;text-align:center}

/* ---------- 📒 Apuntes de Kjimi (2.0.2): una hoja de libreta por lección ---------- */
.kja-pages{display:flex;flex-direction:column;gap:16px;margin-top:12px}
.kja-page{background:#FFFDF8;border:1px solid #E6DCCB;border-left:5px solid #C2413B;border-radius:12px;padding:18px 16px 14px;box-shadow:0 2px 10px rgba(60,30,20,.06);color:#2B2420;font-size:15px;line-height:1.45}
.kja-head{border-bottom:2px solid #7A1E3C;padding-bottom:8px;margin-bottom:10px}
.kja-k{font:700 11px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:#7A1E3C}
.kja-head h2{margin:2px 0 2px;font-size:22px;color:#1B3A5C}
.kja-stop{font-size:13px;color:#5E534A}
.kja-page h3{font:800 15px var(--font-display);color:#7A1E3C;margin:14px 0 6px}
.kja-t{width:100%;border-collapse:collapse;font-size:14.5px}
.kja-t th{font:700 11px var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:#7A6D60;text-align:left;padding:4px 6px;border-bottom:1.5px solid #D9CDB8}
.kja-t td{padding:6px;border-bottom:1px dashed #E3D8C5;vertical-align:top}
.kja-t td b{color:#7A1E3C;font-size:15.5px}
.kja-e{width:30px;font-size:20px;text-align:center}
.kja-copy{width:30%}
.kja-t td.kja-copy{border-bottom:1px solid #BFB09A}
.kja-ex{font-size:12.5px;color:#5E534A;font-style:italic;margin-top:2px}
.kja-box{background:#F6EFE3;border-radius:10px;padding:2px 12px 10px;margin-top:12px}
.kja-letras{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.kja-letras span{min-width:34px;height:34px;display:grid;place-items:center;background:#fff;border:1.5px solid #D4A017;border-radius:8px;font:700 18px var(--font-display);color:#7A1E3C}
.kja-box p{margin:4px 0 0;font-size:13.5px}
.kja-ins{font-weight:700;font-size:13.5px;margin:8px 0 4px}
.kja-rel{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.kja-rel ol{margin:0;padding-left:22px}
.kja-rel li{padding:3px 0}
.kja-esc{display:grid;gap:8px}
.kja-esc>div{display:flex;align-items:flex-end;gap:10px}
.kja-esc span:first-child{flex:none;max-width:55%}
.kja-line{flex:1;border-bottom:1.5px solid #8C7E6C;height:20px}
.kja-can{margin:0;padding-left:0;list-style:none}
.kja-can li{padding:3px 0 3px 26px;position:relative}
.kja-can li:before{content:"";position:absolute;left:2px;top:6px;width:14px;height:14px;border:1.5px solid #7A1E3C;border-radius:3px}
.kja-nota h3{margin-top:10px}
.kja-ans{border:1.5px dashed #3F7D52;border-radius:10px;padding:2px 12px 8px;margin-top:12px;font-size:13.5px}
.kja-ans h3{color:#3F7D52}
.kja-foot{margin-top:12px;font-size:11px;color:#9A8E80;text-align:right}
.kja-tools{margin-top:4px}
@media (max-width:400px){.kja-copy{width:22%}.kja-page{padding:16px 12px 12px}}
@media print{
  body.kjap-on{background:#fff!important}
  body.kjap-on .topbar,body.kjap-on .dots-row,body.kjap-on .bottomnav,body.kjap-on .no-print,body.kjap-on .toast,body.kjap-on #backFloat,body.kjap-on .update-bar,body.kjap-on .where2{display:none!important}
  body.kjap-on #shell{max-width:none!important;padding:0!important}
  body.kjap-on main#app{padding:0!important}
  body.kjap-on .kja-pages{gap:0;margin:0}
  body.kjap-on .kja-page{box-shadow:none;border-radius:0;border:0;border-left:4px solid #C2413B;break-after:page;page-break-after:always;font-size:12.5pt}
  body.kjap-on .kja-page:last-child{break-after:auto;page-break-after:auto}
}

/* ---------- 2.0.2 · la pantalla ya no se puede arrastrar de lado ni rebotar ---------- */
html{overflow-x:hidden;overscroll-behavior:none}
body{overflow-x:clip;overscroll-behavior:none}
/* ---------- 2.0.2 · la flor cabe completa dentro del arco (Mis cursos) ---------- */
.fan-fly{width:24%!important;bottom:2%!important}
/* ---------- 2.0.2 · si arriba está el aviso de versión nueva, el otro aviso sale debajo ---------- */
body:has(.update-bar) .toast{top:calc(78px + env(safe-area-inset-top))!important;bottom:auto!important}
/* ---------- 2.0.2 · frase de ejemplo en el modo curador ---------- */
.cur-ex{color:#3F7D52;font-style:italic;margin-top:2px}
@media print{body.kjap-on .kja-page section{break-inside:avoid;page-break-inside:avoid}}