/* legacy.css - CSS del bloque 1 original (sin :root)
   Extraido de styles.css (sub-paso 2b, mayo 2026)
   Cascada: se carga DESPUES de tokens.css y ANTES de theme/new-ui.css. */

html,body{min-height:100dvh;background:var(--parch-bg);font-family:'Nunito',sans-serif;color:var(--ink)}
/* Parchment texture overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='parch'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23parch)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;opacity:.55}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.25;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E")}
#app{position:relative;z-index:1;min-height:100dvh}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit;outline:none}
::placeholder{color:#C8C4BC;opacity:1}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--parch-border);border-radius:3px;opacity:.5}

/* ── Screens ── */
.screen{display:none;min-height:100dvh}
.screen.active{display:flex}

/* ── Loading ── */
#screen-loading{align-items:center;justify-content:center;flex-direction:column;gap:24px}
.spinner{width:54px;height:54px;border:3px solid var(--paper3);border-top-color:var(--blue);border-radius:50%;animation:spin .75s linear infinite}
.loading-txt{font-size:1.1rem;font-weight:700;color:var(--muted);animation:pulse 1.6s ease infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes arcCdPulse{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes pfToggleAttention{0%,100%{box-shadow:0 2px 0 #92400E,0 0 0 0 rgba(180,83,9,0)}50%{box-shadow:0 2px 0 #92400E,0 0 0 6px rgba(180,83,9,.18)}}
.pf-toggle-attention{animation:pfToggleAttention 2.4s ease-in-out infinite}
.pf-toggle-attention:hover{animation:none;transform:translateY(-1px);box-shadow:0 3px 0 #92400E !important}
.pf-toggle-attention.pf-opened{animation:none}
@keyframes correctPop{0%{transform:scale(1);background:var(--bg-tag-ok,#DCFCE7)}40%{transform:scale(1.06);background:#86EFAC}100%{transform:scale(1);background:var(--bg-tag-ok,#DCFCE7)}}
.correct-pop{animation:correctPop .42s cubic-bezier(.34,1.56,.64,1)}
/* Snap diferenciado para funciones de mayor peso pedagógico (FUNC_WEIGHT > 1.2):
   Sujeto, CD, CI, Atr., CPvo, C.Rég., C.Ag. El refuerzo visual es proporcional
   a la dificultad — sin sonido ni texto extra, solo la física del rebote. */
@keyframes correctPopHard{0%{transform:scale(1);background:var(--bg-tag-ok,#DCFCE7);box-shadow:none}45%{transform:scale(1.14);background:#4ADE80;box-shadow:0 0 0 5px rgba(74,222,128,.28)}100%{transform:scale(1);background:var(--bg-tag-ok,#DCFCE7);box-shadow:none}}
.correct-pop-hard{animation:correctPopHard .54s cubic-bezier(.34,1.56,.64,1)}
@keyframes correctToastIn{0%{opacity:0;transform:translate(-50%,8px) scale(.85)}55%{opacity:1;transform:translate(-50%,-3px) scale(1.04)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes correctToastOut{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-12px)}}
@keyframes comboIn{0%{transform:translate(-50%,20px) scale(.7);opacity:0}60%{transform:translate(-50%,-4px) scale(1.08);opacity:1}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Core components ── */
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--sh);border:1.5px solid var(--parch-border);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:10px;font-family:'Nunito',sans-serif;font-weight:700;font-size:.92rem;transition:all .15s;cursor:pointer;border:none}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.42;pointer-events:none}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-dk)}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:#bbb;background:var(--paper2)}
.btn-success{background:var(--green);color:#fff}.btn-success:hover{filter:brightness(1.07)}
.btn-lg{padding:15px 34px;font-size:1.05rem;border-radius:14px}
.btn-sm{padding:7px 14px;font-size:.78rem;border-radius:8px}
.input{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:10px;font-family:'Nunito',sans-serif;font-size:.92rem;background:var(--paper);color:var(--ink);transition:border-color .15s}
.input:focus{border-color:var(--blue);background:#fff}
.ferr{color:var(--red);font-size:.75rem;margin-top:5px;display:none}
.ferr.show{display:block}

/* ── Login ── */
#screen-login{align-items:center;justify-content:center;flex-direction:column;padding:24px 16px}
.login-hero{text-align:center;margin-bottom:26px;user-select:none}
.login-hero h1{font-size:2.9rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.login-hero p{color:var(--muted);font-size:.94rem;margin-top:7px}
.login-card{width:100%;max-width:470px;padding:26px 28px;box-shadow:0 8px 32px rgba(59,42,26,.18),0 0 0 2px var(--parch-border)}
.field{margin-bottom:17px}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:7px;color:var(--ink2)}
.sel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sel-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;border-radius:12px;border:2px solid var(--border);background:var(--paper);cursor:pointer;transition:all .15s;text-align:center}
.sel-card:hover{border-color:#C5C0B8;background:var(--paper2)}
.sel-card.sel-active{border-color:var(--blue);background:rgba(37,99,235,.04)}
.sel-icon{font-size:1.35rem}.sel-title{font-weight:800;font-size:.84rem;color:var(--ink)}
.sel-card.sel-active .sel-title{color:var(--blue)}
.sel-desc{font-size:.7rem;color:var(--muted);line-height:1.35}
/* ── Tarjetas de modo Arcade (grandes, atractivas, en columna) ── */
.arc-mode-grid{display:flex;flex-direction:column;gap:12px}
.arc-mode-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:2px solid var(--border);background:var(--paper);cursor:pointer;text-align:left;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.arc-mode-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.13)}
.arc-mode-card .amc-icon{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;border-radius:14px;box-shadow:0 4px 12px rgba(0,0,0,.14)}
.arc-mode-card .amc-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.arc-mode-card .amc-title{font-weight:800;font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.arc-mode-card .amc-desc{font-size:.78rem;color:var(--muted);line-height:1.35}
.arc-mode-card .amc-go{flex:0 0 auto;font-size:1rem;font-weight:900;color:var(--muted);opacity:.4;transition:opacity .14s,transform .14s}
.arc-mode-card:hover .amc-go{opacity:1;transform:translateX(3px)}
.amc-tag{font-size:.6rem;font-weight:900;letter-spacing:.08em;padding:2px 7px;border-radius:999px;background:linear-gradient(135deg,#7C3AED,#EC4899);color:#fff}
.am-survival .amc-icon{background:linear-gradient(135deg,#FB7185,#EF4444)}
.am-timer .amc-icon{background:linear-gradient(135deg,#38BDF8,#2563EB)}
.am-ghost .amc-icon{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.am-radar .amc-icon{background:linear-gradient(135deg,#34D399,#059669)}
.arc-mode-card.amc-active{border-color:var(--blue)}
/* !important: blinda el color por modo frente a reglas del tema new-ui */
.am-survival.amc-active{border-color:#EF4444 !important;background:rgba(239,68,68,.06) !important}
.am-timer.amc-active{border-color:#2563EB !important;background:rgba(37,99,235,.06) !important}
.am-ghost.amc-active{border-color:#7C3AED !important;background:rgba(124,58,237,.07) !important}
.am-radar.amc-active{border-color:#059669 !important;background:rgba(5,150,105,.07) !important}
.arc-mode-card.amc-active .amc-go{opacity:1}
/* ── Radar de Errores (tarjetas claras sobre #screen-arcade oscuro) ── */
.radar-sentence{font-size:1.15rem;font-weight:800;color:var(--ink);text-align:center;line-height:1.4;margin:2px 0 6px}
.radar-hint-line{font-size:.82rem;color:var(--muted);text-align:center;line-height:1.4;margin-bottom:14px}
.radar-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.radar-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:13px;border:2px solid var(--border);background:var(--paper);cursor:pointer;text-align:left;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.radar-row:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.16);border-color:#059669}
.radar-words{flex:1;font-weight:700;font-size:.95rem;color:var(--ink);min-width:0}
.radar-arrow{flex:0 0 auto;color:var(--muted);font-weight:900}
.radar-label{flex:0 0 auto;font-weight:900;font-size:.8rem;color:#059669;background:rgba(5,150,105,.1);padding:4px 11px;border-radius:999px;white-space:nowrap}
.radar-noerr{display:block;width:100%;padding:13px 14px;border-radius:13px;border:2px solid var(--border);background:var(--paper);cursor:pointer;font-weight:800;font-size:.92rem;color:var(--ink);transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.radar-noerr:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.16);border-color:#059669;color:#059669}
.radar-wronglabel{text-align:center;font-size:.86rem;color:var(--muted);margin-bottom:14px}
.radar-wronglabel s{color:#EF4444;font-weight:700}
.input-pin{text-align:center;font-size:1.4rem;letter-spacing:.28em;font-weight:900}
hr.divider{border:none;border-top:1px solid var(--border);margin:17px 0}

/* ── Topbar ── */
.topbar{position:sticky;top:0;z-index:30;background:rgba(244,240,232,.96);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--parch-border);box-shadow:0 2px 10px rgba(59,42,26,.1)}
.tb-inner{max-width:960px;margin:0 auto;padding:10px 18px}
.tb-row1{display:flex;align-items:center;gap:10px}
.tb-name{font-weight:800;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:86px}
.prog-bar{flex:1;height:5px;background:var(--paper3);border-radius:3px;overflow:hidden}
.prog-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .7s ease}
.tb-counter{font-size:.77rem;font-weight:700;color:var(--muted);white-space:nowrap}
.tb-timer{display:none;font-family:monospace;font-size:.84rem;font-weight:800;padding:3px 9px;border-radius:7px;white-space:nowrap}
.tb-badge{padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:700;white-space:nowrap}
.badge-exam{background:var(--amber-lt);color:#78350F}
.badge-practice{background:var(--blue-lt);color:#1D4ED8}
.badge-proj{background:#1E40AF;color:#fff}
.phase-pills{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ppill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:.7rem;font-weight:700;border:1.5px solid transparent;transition:all .25s}
.pp-done{background:rgba(22,163,74,.1);border-color:rgba(22,163,74,.25);color:var(--green)}
.pp-active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pp-pending{background:var(--paper3);border-color:var(--border);color:var(--muted)}
.pp-skip{background:var(--paper3);border-color:var(--border);color:var(--muted);opacity:.3}
.proj-bar{display:none;align-items:center;gap:10px;padding:9px 18px;background:#1E40AF;color:#fff;position:sticky;top:0;z-index:35}
.screen-game.is-proj .proj-bar{display:flex}
.proj-bar-title{font-weight:800;font-size:.9rem}
.proj-bar-mode{font-size:.75rem;opacity:.75;font-weight:600;padding:2px 8px;border:1px solid rgba(255,255,255,.3);border-radius:99px}
/* Projector: sentence wraps fully — no horizontal scroll */
.screen-game.is-proj .sent-wrap{flex-wrap:wrap;width:100%}
.api-warn{padding:7px 20px;font-size:.79rem;font-weight:700;text-align:center;display:none;border-bottom:1px solid}
.api-warn.show{display:block}
.api-warn-mock{background:var(--amber-lt);color:#78350F;border-color:#FDE68A}
.api-warn-err{background:var(--red-lt);color:#991B1B;border-color:#FCA5A5}

/* ── Instruction card ── */
.inst-card{position:relative;overflow:hidden;background:#FEFCF2;border:1.5px solid var(--parch-border);border-left:6px solid var(--blue);border-radius:var(--r);padding:20px 24px 17px;margin-bottom:22px;box-shadow:var(--sh-card)}
.inst-card::after{content:attr(data-num);position:absolute;right:14px;bottom:-6px;font-size:6rem;font-weight:900;line-height:1;color:rgba(37,99,235,.055);pointer-events:none;user-select:none;font-family:'Nunito',sans-serif}
.inst-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:99px;background:var(--blue-lt);color:var(--blue);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;margin-bottom:9px}
.inst-title{font-size:1.7rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;line-height:1.2;margin-bottom:7px}
.inst-sub{font-size:1.05rem;color:var(--ink2);line-height:1.55}
.inst-tip{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:7px 12px;border-radius:9px;background:var(--blue-lt);color:#1D4ED8;font-size:.82rem;font-weight:700}
.screen-game.is-proj .inst-title{font-size:2.2rem}
.screen-game.is-proj .inst-sub{font-size:1.05rem}

/* ── Sentence ── */
.sent-scroll{overflow-x:visible;overflow-y:visible;padding-bottom:8px}
.sent-scroll::-webkit-scrollbar{height:4px}
.sent-scroll::-webkit-scrollbar-thumb{background:var(--paper3);border-radius:2px}
.sent-wrap{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:flex-end;min-width:100%;padding:4px 2px 2px}
.wu{display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .1s}
.wu.is-punct{cursor:default}
/* Agrupa cada signo de puntuación con su palabra adyacente para que NUNCA se
   separen en líneas distintas tras el flex-wrap del .sent-wrap. Equivalente al
   Word Joiner que usa el módulo de compuestas. El gap horizontal interno se
   reduce a 1px para que la puntuación quede visualmente pegada a su palabra. */
.wu-group{display:inline-flex;flex-wrap:nowrap;align-items:flex-end;gap:6px 1px}
.wu-text{font-family:'Lora',serif;font-size:1.3rem;padding:3px 8px;border-radius:7px;transition:background .12s;user-select:none;white-space:nowrap}
.wu-badge{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .2s;white-space:nowrap}
.wu.wu-verb .wu-text{background:var(--green-lt);color:#166534;font-weight:700}
.wu.wu-verb .wu-badge{background:var(--green);color:#fff;opacity:1}
.wu.wu-subj .wu-text{background:var(--blue-lt);color:#1E40AF;font-weight:600}
.wu.wu-subj .wu-badge{background:var(--blue);color:#fff;opacity:1}
.wu.wu-select:not(.is-punct):hover .wu-text{background:rgba(37,99,235,.12)}
.wu.wu-picked .wu-text{background:rgba(37,99,235,.2);color:var(--blue);font-weight:700;box-shadow:0 0 0 2px rgba(37,99,235,.3)}
.wu.wu-wrong .wu-text{background:rgba(220,38,38,.15);color:var(--red);animation:shakew .4s ease}
.wu.wu-bounce .wu-text{animation:bounw .45s ease}
.screen-game.is-proj .wu-text{font-size:1.7rem}
.action-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}

/* ── Sujeto Tácito panel (NEW) ── */
.tacito-panel{background:var(--paper2);border:1.5px dashed var(--border-strong,#C9B89A);border-radius:var(--r);padding:16px 18px;margin-top:12px;animation:slideUp .35s cubic-bezier(.16,1,.3,1)}
.tacito-panel-lbl{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px;display:block}
.pronoun-grid{display:flex;flex-wrap:wrap;gap:8px}
.pronoun-btn{padding:9px 18px;border-radius:10px;border:2px solid var(--border);background:#fff;color:var(--ink2);font-family:'Nunito',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;transition:all .15s;font-style:italic}
.pronoun-btn:hover{border-color:#C5C0B8;background:var(--paper)}
.pronoun-btn.pron-sel{border-color:var(--blue);background:var(--blue);color:#fff;transform:scale(1.04)}
.tacito-confirm{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── Context strip ── */
.ctx-strip{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:12px 17px;margin-bottom:18px;box-shadow:var(--sh)}
.ctx-label{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.ctx-scroll{overflow-x:auto;touch-action:pan-x pan-y;scrollbar-width:thin;padding-bottom:3px}
.ctx-words{display:flex;flex-wrap:nowrap;gap:2px 6px;align-items:flex-end;width:max-content;min-width:100%;font-family:'Lora',serif;font-size:.95rem;line-height:1.8;padding:2px}
.ctx-w{display:inline-flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0}
.ctx-wt{padding:1px 5px;border-radius:5px}
.ctx-wb{font-size:.56rem;font-weight:900;padding:2px 5px;border-radius:4px}
.ctx-verb .ctx-wt{background:var(--green-lt);color:#166534;font-weight:700}
.ctx-verb .ctx-wb{background:var(--green);color:#fff}
.ctx-subj .ctx-wt{background:var(--blue-lt);color:#1E40AF;font-weight:600}
.ctx-subj .ctx-wb{background:var(--blue);color:#fff}
.ctx-tacito-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--blue-lt);border:1px solid #93C5FD;border-radius:8px;font-size:.78rem;font-weight:700;color:#1D4ED8;font-style:italic;margin-right:6px;flex-shrink:0}
.ctx-block{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:2px 4px;flex-shrink:0}
.ctx-blk-words{display:flex;flex-wrap:nowrap;gap:2px;justify-content:center}
.ctx-blk-badge{font-size:.56rem;font-weight:800;padding:2px 7px;border-radius:5px;white-space:nowrap}
.cbg-sn{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE}
.cbg-sp{background:#F5F3FF;color:#5B21B6;border:1px solid #DDD6FE}
.cbg-sadj{background:#FFF1F2;color:#BE185D;border:1px solid #FECDD3}
.cbg-sadv{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A}
.cbg-sv{background:#F0FDF4;color:#166534;border:1px solid #BBF7D0}
.cbg-def{background:var(--paper2);color:var(--muted);border:1px solid var(--border)}

/* ══ TAG HIERARCHY: big FUNC / small tipo ══ */
.tag{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:8px 13px;border-radius:10px;border:2px solid transparent;cursor:pointer;user-select:none;transition:all .13s;-webkit-tap-highlight-color:transparent;min-width:58px;text-align:center}
.tag:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.tag.tag-sel{outline:3px solid var(--blue);outline-offset:2px;transform:scale(1.06) translateY(-2px);box-shadow:0 5px 16px rgba(37,99,235,.25)}
.tag.tag-pre{opacity:.72;cursor:default;pointer-events:none}
.tag-pre-badge{font-size:.56rem;background:rgba(22,163,74,.18);color:#166534;padding:1px 5px;border-radius:4px;margin-top:2px}
.tag-func-main{font-size:1rem;font-weight:900;line-height:1.15;white-space:nowrap}
.tag-func-tipo{font-size:.62rem;font-weight:700;opacity:.62;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}

/* ── Tag colors by TIPO DE SINTAGMA (phase 4) ── */
.tag-sn{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8}
.tag-sp{background:#F5F3FF;border-color:#DDD6FE;color:#5B21B6}
.tag-sadj{background:#FFF1F2;border-color:#FECDD3;color:#BE185D}
.tag-sadv{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.tag-sv{background:#F0FDF4;border-color:#BBF7D0;color:#166534}
.tag-n{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8}
.tag-mod{background:#FAF5FF;border-color:#E9D5FF;color:#6B21A8}
.tag-cn{background:#F0FDF4;border-color:#BBF7D0;color:#166534}
.tag-t{background:#FFF7ED;border-color:#FED7AA;color:#9A3412}
.tag-apos{background:#FDF4FF;border-color:#F0ABFC;color:#86198F}
.tag-prep{background:#FFF1F2;border-color:#FECDD3;color:#BE185D}
.tag-func-lbl{background:#F0F9FF;border-color:#BAE6FD;color:#0369A1}

/* ══ Tag colors by FUNCIÓN PREDICADO (phase 3) ══ */
/* Argumentos — palette cálida */
.tag-f-cd  {background:#FFF4E6;border-color:#FB923C;color:#C2410C}
.tag-f-ci  {background:#F5F0FF;border-color:#C084FC;color:#7E22CE}
.tag-f-creg{background:#ECFDF5;border-color:#34D399;color:#065F46}
.tag-f-atr {background:#FFF0F6;border-color:#F472B6;color:#BE185D}
.tag-f-pv  {background:#EFF6FF;border-color:#60A5FA;color:#1E40AF}
.tag-f-pn  {background:#E0F2FE;border-color:#38BDF8;color:#0C4A6E}
/* Adjuntos — palette fría/neutra */
.tag-f-cc  {background:#F8FAFC;border-color:#94A3B8;color:#334155}
.tag-f-cpvo{background:#FFFBEB;border-color:#FBBF24;color:#78350F}
.tag-f-cag {background:#FEF2F2;border-color:#F87171;color:#991B1B}
.tag-f-modor{background:#F9FAFB;border-color:#9CA3AF;color:#4B5563}
.tag-f-voc {background:#FFF7ED;border-color:#FDBA74;color:#7C2D12}

/* ══ PV / PN SELECTOR (Phase 3, step 0) ══ */
.pvpn-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.pvpn-card{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 14px;border-radius:14px;border:2.5px solid var(--border);background:#fff;cursor:pointer;transition:all .18s;text-align:center;box-shadow:var(--sh)}
.pvpn-card:hover{border-color:#C5C0B8;transform:translateY(-2px)}
.pvpn-card.pvpn-sel{border-color:var(--blue);background:var(--blue-lt)}
.pvpn-icon{font-size:1.8rem;line-height:1}
.pvpn-title{font-weight:900;font-size:1.05rem;color:var(--ink)}
.pvpn-card.pvpn-sel .pvpn-title{color:var(--blue)}
.pvpn-desc{font-size:.76rem;color:var(--muted);line-height:1.45}
.pvpn-done-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:10px;background:var(--green-lt);border:1px solid rgba(22,163,74,.3);color:var(--green);font-weight:700;font-size:.86rem;margin-bottom:14px}
@keyframes pvpnErr{0%,100%{background:var(--red-lt);transform:scale(1)}40%{transform:scale(.97)}}
.pvpn-card.pvpn-err{animation:pvpnErr .5s ease}

/* Paso 0 en dos tiempos (sep-2026): tras marcar PN, un segundo paso corto
   pregunta copulativo/semicopulativo — aparece siempre (también con PN
   "puro") para no delatar que la oración es semicopulativa. */
.pvpn-step2-title{font-weight:800;font-size:.85rem;color:var(--muted);margin-bottom:10px}

/* ══ PHASE 3: THREE-SECTION pool ══ */
.pool-triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:0}
@media(max-width:700px){.pool-triple{grid-template-columns:1fr}}
.pool-section{border-radius:var(--r);padding:13px 14px}
.pool-section-arg{background:#FFF8F0;border:1.5px solid #FBD5A5}
.pool-section-adj{background:#F0F8FF;border:1.5px solid #BAD3F3}
.pool-section-mar{background:#FDF4FF;border:1.5px solid #E9D5FF}
.pool-section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pool-section-icon{font-size:1.35rem;flex-shrink:0}
.pool-section-title{font-weight:900;font-size:.86rem;color:var(--ink);line-height:1.15}
.pool-section-sub{font-size:.68rem;color:var(--muted);line-height:1.4}
.tags-wrap{display:flex;flex-wrap:wrap;gap:7px;min-height:38px}

/* Marcas estructurales y modificadores oracionales */
.tag-f-imp   {background:#F0FDF4;border-color:#6EE7B7;color:#065F46}   /* se impersonal — verde oscuro */
.tag-f-pasref{background:#ECFDF5;border-color:#34D399;color:#064E3B}   /* pasiva refleja — esmeralda */
.tag-f-voc2  {background:#FFF7ED;border-color:#FDBA74;color:#7C2D12}   /* vocativo — naranja cálido */
.tag-f-modor2{background:#F5F3FF;border-color:#C4B5FD;color:#4C1D95}   /* mod. oracional — violeta */
.blk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.blk-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:12px 14px;transition:border-color .2s}
.blk-card.blk-done{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.02)}
.blk-card.blk-pre{border-left:3px solid rgba(22,163,74,.4);background:rgba(22,163,74,.02)}
.blk-card.blk-tacito{border-left:3px solid rgba(37,99,235,.4);background:rgba(37,99,235,.02)}
.blk-words{font-family:'Lora',serif;font-size:.95rem;text-align:center;color:var(--ink);padding-bottom:9px;border-bottom:1px solid var(--border);margin-bottom:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dslot{min-height:54px;border-radius:10px;border:2px dashed var(--paper3);display:flex;align-items:center;justify-content:center;padding:4px 8px;transition:all .15s;background:rgba(0,0,0,.012);cursor:pointer}
.dslot:hover:not(.ds-ok):not(.ds-pre){border-color:#C8C4BC}
.dslot.ds-over{border-color:var(--blue);background:rgba(37,99,235,.05);transform:scale(1.02)}
.dslot.ds-ok{border:2px solid rgba(22,163,74,.4);background:rgba(22,163,74,.05);border-style:solid}
.dslot.ds-pre{border:2px solid rgba(22,163,74,.3);background:rgba(22,163,74,.04);border-style:solid;cursor:default}
@keyframes flashRed{0%,100%{background:rgba(0,0,0,.012)}40%{background:rgba(220,38,38,.1)}}
.ds-err-flash{animation:flashRed .6s ease}
.dslot-hint{font-size:.74rem;color:var(--muted);font-style:italic;pointer-events:none;text-align:center;line-height:1.4}

/* ── Phase 4 ── */
.sint-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;transition:border-color .2s}
.sint-card.sint-done{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.02)}
.sint-title{font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.sint-done-lbl{color:var(--green);margin-left:7px}
.elem-row{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:11px}
.elem-col{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:54px}
.elem-word{font-family:'Lora',serif;font-size:1rem;font-weight:500;color:var(--ink);white-space:nowrap}
.elem-slot{min-width:68px;min-height:50px;border-radius:8px;border:2px dashed var(--paper3);display:flex;align-items:center;justify-content:center;padding:3px 5px;cursor:pointer;transition:all .15s;background:rgba(0,0,0,.012)}
.elem-slot:hover:not(.ds-ok){border-color:#C8C4BC}
.elem-slot.ds-over{border-color:var(--blue);background:rgba(37,99,235,.05);transform:scale(1.04)}
.elem-slot.ds-ok{border:2px solid rgba(22,163,74,.4);background:rgba(22,163,74,.05);border-style:solid}
.elem-slot.ds-err-flash{animation:flashRed .6s ease}
.screen-game.is-proj .elem-word{font-size:1.2rem}

/* ── Modals ── */
.overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.ov-bg{position:absolute;inset:0;background:rgba(0,0,0,.38);backdrop-filter:blur(6px)}
.modal{position:relative;z-index:1;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);width:100%;max-width:450px;animation:popModal .3s cubic-bezier(.16,1,.3,1);overflow:hidden}
.modal-hdr{padding:24px 26px 12px;border-bottom:1px solid var(--border)}
.modal-hdr h2{font-size:1.1rem;font-weight:900}
.modal-body{padding:16px 26px 24px}
.fb-inner{padding:34px 30px;text-align:center}
.fb-icon-wrap{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 13px;animation:popModal .4s cubic-bezier(.16,1,.3,1)}
.fb-icon-wrap.is-err{background:var(--red-lt)}.fb-icon-wrap.is-ok{background:var(--green-lt)}
.fb-icon{font-size:2.1rem;line-height:1}
.fb-title{font-size:1.6rem;font-weight:900;margin-bottom:12px}
.fb-title.is-err{color:var(--red)}.fb-title.is-ok{color:var(--green)}
.fb-consejo{font-family:'Lora',serif;font-size:.96rem;line-height:1.75;color:var(--ink2);background:var(--paper);border:1px solid var(--border);border-radius:11px;padding:13px 16px;margin-bottom:18px;text-align:left}
/* New structured feedback blocks (Consejo / Pista) */
.fb-card{text-align:left;border-radius:14px;padding:14px 16px;margin-bottom:14px;position:relative;line-height:1.55}
.fb-card-label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.fb-card-body{font-size:1.02rem;line-height:1.55;color:var(--ink)}
/* Consejo: tono cyan-cielo suave, "información útil" */
.fb-consejo-card{
  background: linear-gradient(160deg,#EFF8FF 0%, #E0F2FE 100%);
  border: 1.5px solid #BAE6FD;
  box-shadow: 0 4px 10px rgba(8,145,178,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
.fb-consejo-card .fb-card-label{color:#0C4A6E}
/* Pista: tono teal — coincide con la pista flotante de CP (.pf-card) para
   dar coherencia visual a toda la app (C.1, mayo 2026). */
.fb-pista-card{
  background: linear-gradient(160deg,#ECFEFF 0%,#F0FDFA 60%,#FFFFFF 100%);
  border: 1.5px solid #5EEAD4;
  box-shadow: 0 6px 16px rgba(15,118,110,.14), inset 0 1px 0 rgba(255,255,255,.7);
  animation: fbPistaIn .35s cubic-bezier(.16,1,.3,1);
}
.fb-pista-card .fb-card-label{color:#115E59}
@keyframes fbPistaIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.succ-bg{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,rgba(255,251,243,.97) 0%,rgba(254,243,199,.92) 100%);backdrop-filter:blur(14px);display:none;align-items:center;justify-content:center;padding:24px;animation:succFadeIn .35s ease-out}
.succ-bg.open{display:flex}
@keyframes succFadeIn{from{opacity:0}to{opacity:1}}
.succ-card{background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF0 100%);border-radius:24px;box-shadow:0 20px 60px rgba(180,83,9,.15),0 4px 12px rgba(0,0,0,.06);padding:42px 36px 32px;max-width:540px;width:100%;text-align:center;animation:succCardIn .55s cubic-bezier(.16,1,.3,1);border:1.5px solid rgba(180,83,9,.12);position:relative;overflow:hidden}
@keyframes succCardIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.succ-check{width:78px;height:78px;border-radius:50%;background:linear-gradient(135deg,#16A34A 0%,#15803D 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;animation:checkPop .55s cubic-bezier(.16,1,.3,1) .15s both;box-shadow:0 8px 20px rgba(22,163,74,.32),inset 0 -2px 8px rgba(0,0,0,.08)}
.succ-check svg{width:38px;height:38px}
.succ-title{font-family:'Fraunces',serif;font-size:2rem;font-weight:900;color:#1F2937;margin-bottom:10px;line-height:1.1;letter-spacing:-.02em}
.succ-oracion{font-family:'Lora',serif;font-size:.96rem;color:#4B5563;font-style:italic;margin-bottom:20px;padding:14px 18px;background:linear-gradient(135deg,#FEF9C3 0%,#FEF3C7 100%);border-radius:12px;border:1.5px solid #CA8A04;line-height:1.55;position:relative}
.succ-oracion::before{content:"\201C";position:absolute;left:6px;top:-8px;font-size:2.2rem;color:#CA8A04;font-family:Georgia,serif;line-height:1;opacity:.5}
.succ-oracion::after{content:"\201D";position:absolute;right:6px;bottom:-22px;font-size:2.2rem;color:#CA8A04;font-family:Georgia,serif;line-height:1;opacity:.5}
.succ-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:24px;font-weight:800;font-size:.92rem;margin-bottom:14px;border:2px solid;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.se-zero{background:linear-gradient(135deg,#DCFCE7 0%,#BBF7D0 100%);color:#14532D;border-color:#16A34A}
.se-some{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);color:#78350F;border-color:#CA8A04}
.se-many{background:linear-gradient(135deg,#FEE2E2 0%,#FECACA 100%);color:#7F1D1D;border-color:#DC2626}
/* Funciones practicadas — pedagogical chip list */
.succ-funcs{margin:18px 0 6px;padding:14px 16px;background:linear-gradient(135deg,#EFF6FF 0%,#DBEAFE 100%);border-radius:14px;border:1.5px solid #2563EB}
.succ-funcs-label{font-size:.7rem;font-weight:800;color:#1E3A8A;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:6px}
.succ-funcs-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.succ-func-chip{font-size:.82rem;font-weight:700;color:#1E3A8A;background:#fff;border:1.5px solid #2563EB;border-radius:20px;padding:4px 12px;white-space:nowrap}
/* Sprint 1 · Micro-progreso por función: inventario acumulado de sesión.
   Paleta verde para distinguirlo del azul "esta oración". */
.succ-session-progress{background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%);border-color:#059669}
.succ-session-progress .succ-funcs-label{color:#065F46}
.succ-func-chip-count{color:#065F46;border-color:#059669}
.succ-func-chip-count b{color:#047857;font-weight:800}
@keyframes checkPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ── Results ── */
#screen-results{flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.res-inner{width:100%;max-width:510px}
.res-hdr{text-align:center;margin-bottom:19px}
.res-hdr h1{font-size:2.1rem;font-weight:900}
.res-hdr p{color:var(--muted);font-size:.87rem;margin-top:4px}
.gauge-wrap{position:relative;width:118px;height:118px;margin:0 auto 12px}
.gauge-wrap svg{transform:rotate(-90deg)}
.gauge-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge-score{font-size:1.9rem;font-weight:900;line-height:1}
.gauge-lbl{font-size:.67rem;color:var(--muted);font-weight:700}
.res-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid #F5F3F0;font-size:.82rem}
.res-row:last-child{border:none}
.phase-table{width:100%;border-collapse:collapse;margin:4px 0 0}
.phase-table th{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px;text-align:left;border-bottom:2px solid var(--border)}
.phase-table th:not(:first-child){text-align:center}
.phase-table td{padding:9px 10px;border-bottom:1px solid #F5F3F0;vertical-align:middle;font-size:.84rem}
.phase-table tr:last-child td{border-bottom:none;font-weight:800;background:var(--paper)}
.ph-name{display:flex;align-items:center;gap:8px}
.ph-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.ph-bar-wrap{width:72px;height:5px;background:var(--paper3);border-radius:3px;overflow:hidden;display:inline-block}
.ph-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.ph-pts{font-family:monospace;font-size:.8rem;color:var(--muted);text-align:center}
.ph-pts strong{color:var(--ink);font-size:.85rem}
.ph-pct{font-weight:800;font-size:.85rem;text-align:center;min-width:38px}
.score-compare{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.sc-badge{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 16px;border-radius:12px;border:1px solid var(--border);background:var(--paper);min-width:88px}
.sc-badge-lbl{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.sc-badge-val{font-size:1.5rem;font-weight:900;line-height:1}

/* ── Teacher panel ── */
#screen-teacher{flex-direction:column}
.tp-hdr{background:#fff;border-bottom:1px solid var(--border);box-shadow:0 1px 8px rgba(0,0,0,.04)}
.tp-hdr-in{max-width:820px;margin:0 auto;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.tp-hdr h1{font-size:1.35rem;font-weight:900}
.tp-hdr p{font-size:.75rem;color:var(--muted);margin-top:2px}
/* Barra superior del panel (29-oct-2026): fija al desplazarse (no en el
   móvil, donde ocupa tres líneas; ver paso 6 de la propuesta), con el estado
   del cuaderno y del servidor en dos chips y la ayuda en un menú. */
@media(min-width:700px){.tp-hdr{position:sticky;top:0;z-index:40}}
.tp-hdr-tit{display:flex;flex-direction:column;gap:5px;min-width:0}
.tp-hdr-acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tp-chips{display:flex;gap:6px;flex-wrap:wrap}
.tp-chip{font:inherit;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--paper2);color:var(--muted);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-chip.ok{border-color:#86EFAC;background:#F0FDF4;color:#15803D}
.tp-chip.aviso{border-color:#FCD34D;background:#FFFBEB;color:#B45309}
.tp-chip:hover{filter:brightness(.97)}
.tp-ayuda{position:relative}
.tp-ayuda>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer}
.tp-ayuda>summary::-webkit-details-marker{display:none}
.tp-ayuda[open]>summary{border-color:#bbb;background:var(--paper2)}
.tp-ayuda-menu{position:absolute;right:0;top:calc(100% + 6px);width:290px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.14);
  padding:10px;display:flex;flex-direction:column;gap:6px;z-index:41}
.tp-ayuda-menu>a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink);font-weight:700;font-size:.86rem;text-decoration:none}
.tp-ayuda-menu>a:hover{background:var(--paper2)}
.tp-ayuda-nota{font-size:.74rem;color:var(--muted);margin:0 10px;line-height:1.4}
.tp-ayuda-ficha{border-top:1px solid var(--border);padding-top:6px}
.tp-ayuda-ficha>summary{cursor:pointer;padding:6px 10px;font-weight:700;font-size:.84rem;color:var(--ink2)}
.tp-ayuda-ficha pre{background:#1E1B4B;color:#C4B5FD;font-family:monospace;font-size:.72rem;padding:10px;border-radius:8px;line-height:1.6;margin:6px 0;white-space:pre-wrap}
@media(max-width:560px){.tp-ayuda-menu{position:fixed;left:16px;right:16px;top:auto;width:auto}}
.tp-content{max-width:820px;margin:0 auto;width:100%;padding:20px 18px 60px}
/* Cuatro zonas del panel (29-oct-2026): una columna en el móvil y la tableta;
   desde 1100 px, Evaluar a la izquierda y Seguir y Practicar a la derecha,
   con Mi cuaderno debajo a lo ancho. */
.tp-zona{margin-bottom:22px;min-width:0}
.tp-zona-tit{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:4px 2px 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.tp-subzona{font-size:.82rem;font-weight:800;color:var(--ink2);margin:14px 2px 8px}
.tp-zona-tit+.tp-subzona{margin-top:0}
.tp-cuaderno-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;align-items:start}
.tp-cuaderno-grid>.s-box{margin-bottom:0}
/* Plegables con resumen (paso 3, 29-oct-2026): cerrados, la línea dice lo
   que hay elegido; «Cambiar» abre. */
.tp-plegable{border:1px solid var(--border);border-radius:10px;background:var(--paper)}
.tp-plegable>summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 12px;min-height:40px}
.tp-plegable>summary::-webkit-details-marker{display:none}
.tp-plegable>summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:10px}
.tp-pl-res{flex:1;min-width:0;font-size:.82rem;font-weight:700;color:var(--ink2);line-height:1.4}
.tp-pl-res.aviso{color:#B45309}
.tp-pl-cambiar{flex:none;font-size:.76rem;font-weight:700;color:var(--blue)}
.tp-pl-cambiar::after{content:' ▾';display:inline-block;transition:transform .15s}
.tp-plegable[open]>summary .tp-pl-cambiar::after{transform:rotate(180deg)}
.tp-plegable[open]>summary{border-bottom:1px solid var(--border)}
.tp-pl-cuerpo{padding:10px 12px 12px}
.tp-pl-casillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px 12px;margin-bottom:10px}
.tp-pl-grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:10px}
/* Mi cuaderno: la zona entera es el plegable; el título de zona va en el summary. */
.tp-pl-zona{border:none;background:none}
.tp-pl-zona>summary{padding:0 2px;margin-bottom:10px;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:4px 12px}
.tp-pl-zona>summary .tp-zona-tit{margin:4px 0 6px;padding:0;border:none}
.tp-pl-zona>summary .tp-pl-res{font-weight:600;color:var(--muted);flex:1 1 auto}
.tp-pl-zona>summary .tp-pl-res.aviso{color:#B45309;font-weight:700}
@media(prefers-reduced-motion:reduce){.tp-pl-cambiar::after{transition:none}}
/* Tablas de resultados dentro de un plegable: desplazamiento propio, para
   no alargar la página. */
.tp-tabla-scroll{max-height:300px;overflow:auto}
/* Pestañas (paso 4): el color de cada una es el de su módulo (--tab-c). */
.tp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:10px 0 12px;flex-wrap:wrap}
.tp-tab{font:inherit;font-size:.84rem;font-weight:700;color:var(--muted);background:none;border:none;
  border-bottom:3px solid transparent;margin-bottom:-1px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.tp-tab:hover{color:var(--ink)}
.tp-tab[aria-selected=true]{color:var(--tab-c,var(--blue));border-bottom-color:var(--tab-c,var(--blue))}
.tp-tab:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:6px}
/* Crear examen en pestañas (paso 5, 29-oct-2026): los datos comunes van en
   una fila y en el mismo orden en todas (PIN, grupo, evaluación, nombre,
   minutos); debajo, lo propio del módulo; al pie, Activar y Probar PIN. */
.tp-ex-panel>.s-desc{margin-bottom:10px}
.tp-ex-comunes,.tp-ex-fila{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-start;margin-bottom:12px}
.tp-ex-comunes{padding-bottom:12px;border-bottom:1px dashed var(--border)}
.tp-ex-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.tp-ex-campo>label,.tp-ex-etq{font-size:.74rem;font-weight:700;color:var(--muted)}
.tp-ex-campo .input{font-size:.88rem;padding:6px 8px}
.tp-ex-pin-fila{display:flex;gap:4px}
.tp-ex-pin .input{width:88px;text-align:center;font-size:1.1rem;font-weight:900;letter-spacing:.15em}
.tp-ex-grupo{flex:1 1 110px}
.tp-ex-eval{flex:0 1 76px}
.tp-ex-nombre{flex:2 1 180px}
.tp-ex-min,.tp-ex-num{flex:0 0 auto;max-width:150px}
.tp-ex-min .input,.tp-ex-num .input{width:70px;text-align:center}
.tp-ex-nota{font-size:.72rem;color:var(--muted);line-height:1.4}
.tp-ex-sec{font-size:.78rem;font-weight:800;color:var(--ink2);margin:14px 0 6px}
.tp-ex-botones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.tp-ex-check{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:.82rem;font-weight:700;color:var(--ink2);cursor:pointer}
.tp-ex-check input{width:16px;height:16px;flex:none;cursor:pointer}
.tp-ex-pie{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
/* Móvil (paso 6, 29-oct-2026): cada zona se pliega desde su cabecera (al
   entrar, solo Evaluar abierta; plegarZona en teacher/index.js) y las
   pestañas de examen pasan a un desplegable. En pantallas mayores, nada. */
.tp-zona-cab{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;position:relative;
  margin:4px 2px 10px;border-bottom:1px solid var(--border)}
.tp-zona-cab .tp-zona-tit{margin:0;padding:0 0 6px;border:none}
.tp-zona-res,.tp-zona-abrir,.tp-ex-select{display:none}
.tp-ex-select{align-items:center;gap:8px;margin:8px 0 12px;font-size:.78rem;font-weight:700;color:var(--muted)}
.tp-ex-select .input{flex:1;font-size:.9rem;font-weight:700;padding:8px 10px;color:var(--ink)}
@media(max-width:699px){
  .tp-zona-cab{padding:6px 0}
  .tp-zona-cab .tp-zona-tit{padding:0}
  .tp-zona-abrir{display:block;margin-left:auto;font:inherit;font-size:.76rem;font-weight:700;color:var(--blue);
    background:none;border:none;padding:4px 0;cursor:pointer}
  .tp-zona-abrir::after{content:' ▾'}
  .tp-zona-abrir[aria-expanded=true]::after{content:' ▴'}
  .tp-zona-abrir::before{content:'';position:absolute;inset:0}
  .tp-zona-abrir:focus-visible{outline:none}
  .tp-zona-abrir:focus-visible::before{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
  .tp-zona.plegada .tp-zona-res{display:block;flex:1 1 100%;order:3;font-size:.8rem;font-weight:600;color:var(--muted);padding-bottom:2px}
  .tp-zona.plegada .tp-zona-cuerpo{display:none}
  .tp-zona.plegada{margin-bottom:10px}
  .tp-crear-examen .tp-tabs{display:none}
  .tp-ex-select{display:flex}
}
@media(min-width:1100px){
  .tp-hdr-in,.tp-content{max-width:1280px}
  .tp-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
}
.s-box{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:18px 21px;margin-bottom:12px}
.s-title{font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:3px}
.s-desc{font-size:.77rem;color:var(--muted);margin-bottom:12px;line-height:1.55}
.mono{font-family:monospace}
.gas-guide{background:#F8F6FF;border:1.5px solid #DDD6FE;border-radius:var(--r);padding:17px 19px}
.gas-guide h3{font-size:.93rem;font-weight:800;color:var(--purple);margin-bottom:9px}
.gas-guide pre{background:#1E1B4B;color:#C4B5FD;font-family:monospace;font-size:.74rem;padding:12px;border-radius:8px;overflow-x:auto;line-height:1.65;margin:7px 0}
.gas-guide p{font-size:.79rem;color:var(--ink2);margin-bottom:5px;line-height:1.55}
.gas-guide strong{color:var(--purple)}

/* ── Game layout ── */
#screen-game{flex-direction:column}
.game-wrap{max-width:960px;margin:0 auto;width:100%;padding:22px 18px 70px;flex:1}
.sent-dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.sdot{border-radius:50%;display:inline-block;transition:all .3s}
.sd-done{width:9px;height:9px;background:var(--green)}
.sd-cur{width:13px;height:13px;background:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.sd-pend{width:9px;height:9px;background:var(--paper3)}

/* ── Keyframes ── */
/* ── Projector Sentence Selector Drawer ── */
.proj-drawer-bg{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);display:none}
.proj-drawer-bg.open{display:block}
.proj-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);z-index:91;background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.proj-drawer-bg.open .proj-drawer{transform:translateX(0)}
.proj-drawer-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:#1E40AF;color:#fff}
.proj-drawer-hdr h3{font-size:1rem;font-weight:800}
.proj-drawer-hdr p{font-size:.72rem;opacity:.75;margin-top:2px}
.proj-drawer-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:7px}
.proj-sent-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:11px;border:2px solid var(--border);background:var(--paper);cursor:pointer;transition:all .15s;text-align:left}
.proj-sent-row:hover{border-color:#C5C0B8;background:var(--paper2);transform:translateX(-2px)}
.proj-sent-row.psr-current{border-color:var(--blue);background:var(--blue-lt)}
.psr-num{font-family:monospace;font-size:.75rem;font-weight:800;color:var(--muted);min-width:22px;flex-shrink:0}
.psr-current .psr-num{color:var(--blue)}
.psr-text{flex:1;font-family:'Lora',serif;font-size:.83rem;color:var(--ink2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.psr-current .psr-text{color:var(--blue-dk);font-weight:600}
.psr-go{font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:7px;background:var(--blue);color:#fff;flex-shrink:0;white-space:nowrap}
.psr-current .psr-go{background:#1E40AF}

/* ── Sound toggle button ── */
.proj-float-btn{
  display:none;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:45;
  background:#FCD34D;color:#1E1B4B;border:none;border-radius:12px;
  padding:10px 22px;font-family:'Nunito',sans-serif;font-weight:900;font-size:.88rem;
  cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.18);
  display:none;align-items:center;gap:8px;white-space:nowrap;
}
.screen-game.is-proj .proj-float-btn{display:flex}
.sound-btn{position:fixed;bottom:18px;right:18px;z-index:50;width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--border);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;transition:all .15s}
.sound-btn:hover{background:var(--paper2);transform:scale(1.08)}
.sound-btn.muted{opacity:.5}
/* ─── Glosario ─────────────────────────────────────────────── */
.glos-fab{position:fixed;bottom:18px;left:18px;z-index:50;display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:24px;background:linear-gradient(135deg,#FEF9C3 0%,#FDE68A 100%);border:2px solid #B45309;color:#7C2D12;font-weight:800;font-size:.85rem;cursor:pointer;box-shadow:0 3px 0 #92400E,0 4px 12px rgba(0,0,0,.08);transition:transform .15s,box-shadow .15s;font-family:inherit}
.glos-fab:hover{transform:translateY(-1px);box-shadow:0 4px 0 #92400E,0 6px 16px rgba(0,0,0,.12)}
.glos-fab:active{transform:translateY(1px);box-shadow:0 1px 0 #92400E,0 2px 6px rgba(0,0,0,.1)}
/* Glosario flotante (< 480px): en oraciones cortas, "Saltar esta oración"
   cae justo donde termina la tarjeta y se solapa con el ancho de la
   píldora "📖 Glosario" (auditoría pre-publicación, 12-sep-2026). Se
   reduce a icono circular, como el botón de sonido —misma esquina,
   pero ya no invade el hueco horizontal del botón de saltar. */
@media(max-width:480px){
  .glos-fab{padding:0;width:42px;height:42px;border-radius:50%;justify-content:center}
  .glos-fab span+span{display:none}
}
.glos-bg{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto}
.glos-bg.open{display:flex;animation:fadeIn .25s ease-out}
.glos-modal{background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF0 100%);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.3);max-width:760px;width:100%;max-height:calc(100vh - 96px);display:flex;flex-direction:column;animation:popModal .35s cubic-bezier(.16,1,.3,1);border:1.5px solid rgba(180,83,9,.18);overflow:hidden}
.glos-hdr{padding:22px 28px 14px;border-bottom:1.5px solid #F1E9D8;background:linear-gradient(180deg,#FFFBF0 0%,#FEF9C3 100%);position:relative}
.glos-hdr h2{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:900;color:#1F3A5F;letter-spacing:-.02em;margin:0;display:flex;align-items:center;gap:10px}
.glos-close{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.06);border:none;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#1C1C1C;transition:all .15s}
.glos-close:hover{background:rgba(220,38,38,.15);color:#DC2626}
.glos-search{margin-top:14px;position:relative}
.glos-search input{width:100%;padding:11px 16px 11px 42px;border:2px solid #CA8A04;border-radius:12px;background:#fff;font-family:inherit;font-size:.95rem;color:#1C1C1C;outline:none;transition:border-color .15s,box-shadow .15s}
.glos-search input:focus{border-color:#854D0E;box-shadow:0 0 0 4px rgba(202,138,4,.15)}
.glos-search::before{content:"🔍";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}
.glos-body{padding:18px 28px 24px;overflow-y:auto;flex:1}
.glos-section{margin-bottom:22px}
.glos-section-title{font-family:'Arial';font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;padding:6px 12px;border-radius:8px;display:inline-block}
.glos-section.cat-sint .glos-section-title{background:#FEE2E2;color:#7F1D1D;border:1.5px solid #DC2626}
.glos-section.cat-cc   .glos-section-title{background:#FEF3C7;color:#78350F;border:1.5px solid #CA8A04}
.glos-section.cat-marc .glos-section-title{background:#F5F3FF;color:#5B21B6;border:1.5px solid #7C3AED}
.glos-section.cat-sntg .glos-section-title{background:#DBEAFE;color:#1E3A8A;border:1.5px solid #2563EB}
.glos-section.cat-int  .glos-section-title{background:#DCFCE7;color:#14532D;border:1.5px solid #16A34A}
.glos-section.cat-sub  .glos-section-title{background:#E0F2FE;color:#075985;border:1.5px solid #0284C7}
.glos-item{padding:11px 14px;margin-bottom:8px;border-radius:10px;background:#FFFFFF;border:1px solid #E5E7EB;transition:transform .12s,box-shadow .12s;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.glos-item:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.06);border-color:#CA8A04}
.glos-abbr{font-family:'Fraunces',serif;font-weight:900;font-size:1rem;color:#1F3A5F;background:#FEF9C3;padding:5px 11px;border-radius:7px;border:1.5px solid #CA8A04;white-space:nowrap;min-width:54px;text-align:center}
.glos-item-body{flex:1;min-width:0}
.glos-full{font-weight:700;font-size:.93rem;color:#1F2937;margin-bottom:4px;font-family:'Arial'}
.glos-expl{font-size:.86rem;color:#4B5563;line-height:1.5}
.glos-example{display:inline-block;margin-top:6px;padding:3px 9px;background:#F3F4F6;border-left:2px solid #CA8A04;font-style:italic;font-size:.83rem;color:#374151;border-radius:0 6px 6px 0;font-family:'Lora',serif}
.glos-empty{padding:30px 16px;text-align:center;color:#6B7280;font-size:.9rem;font-style:italic}
.glos-highlight{background:#FEF08A;color:#713F12;padding:0 2px;border-radius:3px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Sticky context strip ── */
.ctx-strip.ctx-sticky{position:sticky;top:0;z-index:20;border-radius:0;border-left:none;border-right:none;margin-bottom:0;box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ── Larger sentence card ── */
.sent-card{background:var(--paper);border:1.5px solid var(--parch-border);border-radius:var(--r);box-shadow:0 3px 14px rgba(59,42,26,.12);padding:28px 24px;margin-bottom:17px;min-height:100px;overflow:visible}
.screen-game.is-proj .sent-card{padding:32px 28px;min-height:130px}
.screen-game.is-proj .wu-text{font-size:2rem;line-height:1.45}

/* ── Subject choice panel ── */
.subj-choice-panel{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.subj-choice-btn{flex:1;min-width:160px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 12px;border-radius:12px;border:2px solid var(--border);background:var(--paper);cursor:pointer;transition:all .15s;text-align:center}
.subj-choice-btn:hover{border-color:#C5C0B8;background:var(--paper2);transform:translateY(-2px)}
.subj-choice-btn.scc-tacito{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
.subj-choice-btn.scc-impersonal{border-color:var(--purple);background:var(--purple-lt);color:var(--purple)}
.subj-choice-icon{font-size:1.5rem}
.subj-choice-title{font-weight:800;font-size:.86rem}
.subj-choice-desc{font-size:.68rem;color:var(--muted);line-height:1.35}
.subj-choice-btn.scc-tacito .subj-choice-desc,.subj-choice-btn.scc-impersonal .subj-choice-desc{color:inherit;opacity:.75}


/* ══ Module tabs ══ */
.mod-tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:2px solid var(--border);padding-bottom:0}
.mtab{flex:1;padding:10px 6px;text-align:center;font-weight:800;font-size:.8rem;cursor:pointer;border-radius:8px 8px 0 0;border:none;background:none;color:var(--muted);transition:all .15s;border-bottom:3px solid transparent;margin-bottom:-2px}
.mtab:hover{color:var(--ink);background:var(--paper2)}
.mtab.mt-active{color:var(--blue);border-bottom-color:var(--blue);background:var(--blue-lt)}
.mtab-icon{display:block;font-size:1.2rem;margin-bottom:3px}
.mod-section{display:none}.mod-section.ms-active{display:block}

/* ══ Arcade ══ */
#screen-arcade{flex-direction:column;background:var(--paper);min-height:100dvh}
.arcade-topbar{background:#1E1B4B;color:#fff;padding:12px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:35}
.arcade-title{font-weight:900;font-size:.95rem;letter-spacing:.03em}
.streak-badge{display:flex;align-items:center;gap:5px;background:rgba(255,69,0,.25);border:1px solid rgba(255,69,0,.5);border-radius:99px;padding:4px 12px;font-weight:900;font-size:.9rem;color:#FF9D6E}
.streak-fire{font-size:1.1rem;animation:firePulse 1s ease infinite}
@keyframes firePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* Topbar de Arcade (< 480px): en Contrarreloj, el título + reloj + puntuación
   ya ocupan casi todo el ancho y dejan la barra de tiempo (flex:1) reducida
   a unos pocos píxeles — prácticamente invisible. En vez de comprimirla,
   se le da su propia fila completa. */
@media(max-width:480px){
  .arcade-topbar{flex-wrap:wrap;row-gap:8px;padding:10px 14px}
  .arcade-topbar .timer-bar-wrap{flex-basis:100%;height:10px;order:10}
  .arcade-title{font-size:.85rem}
}

/* ── Lives (hearts) ─────────────────────────── */
.arc-hearts{display:flex;align-items:center;gap:6px;background:rgba(220,38,38,.12);border:1.5px solid rgba(248,113,113,.45);border-radius:99px;padding:4px 12px}
.arc-heart{width:18px;height:18px;display:inline-block;transition:all .35s cubic-bezier(.5,1.5,.5,1);filter:drop-shadow(0 0 4px rgba(239,68,68,.6))}
.arc-heart.lost{animation:heartShatter .55s ease forwards}
.arc-heart.gained{animation:heartGain .8s cubic-bezier(.5,1.6,.5,1) forwards}
@keyframes heartShatter{
  0%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 4px rgba(239,68,68,.6))}
  35%{transform:scale(1.3) rotate(-8deg);filter:drop-shadow(0 0 12px rgba(239,68,68,1))}
  70%{transform:scale(0.7) rotate(15deg);opacity:.5}
  100%{transform:scale(0) rotate(45deg);opacity:0}
}
@keyframes heartGain{
  0%{transform:scale(0) rotate(-180deg);opacity:0;filter:drop-shadow(0 0 0 rgba(239,68,68,0))}
  60%{transform:scale(1.5) rotate(20deg);opacity:1;filter:drop-shadow(0 0 18px rgba(239,68,68,1))}
  100%{transform:scale(1) rotate(0);opacity:1;filter:drop-shadow(0 0 4px rgba(239,68,68,.6))}
}

/* ── Combo multiplier ──────────────────────── */
.arc-combo{position:fixed;top:18%;left:50%;transform:translateX(-50%) scale(0);z-index:210;pointer-events:none;font-family:'Fraunces',serif;font-weight:900;text-align:center;line-height:.95}
.arc-combo.show{animation:comboBurst 1.4s cubic-bezier(.2,1.2,.4,1) forwards}
.arc-combo .combo-mult{font-size:3.4rem;color:#FFD700;text-shadow:0 0 18px #FFD700,0 0 36px #FF8C00,3px 3px 0 #7C2D12;letter-spacing:-.04em}
.arc-combo .combo-label{display:block;font-size:1.1rem;color:#FEF3C7;text-shadow:0 0 8px #DC2626,2px 2px 0 #7C2D12;letter-spacing:.18em;margin-top:2px}
@keyframes comboBurst{
  0%{transform:translateX(-50%) scale(0) rotate(-12deg);opacity:0}
  20%{transform:translateX(-50%) scale(1.25) rotate(4deg);opacity:1}
  35%{transform:translateX(-50%) scale(1) rotate(-2deg)}
  80%{transform:translateX(-50%) scale(1) rotate(0);opacity:1}
  100%{transform:translateX(-50%) scale(.9) rotate(0);opacity:0}
}

/* ── Combo badge (persistent on topbar) ────── */
.arc-combo-badge{display:none;align-items:center;gap:4px;background:linear-gradient(135deg,#FFD700 0%,#FF8C00 100%);color:#7C2D12;border:1.5px solid #FCD34D;border-radius:99px;padding:3px 10px;font-weight:900;font-size:.78rem;letter-spacing:.04em;box-shadow:0 0 10px rgba(255,215,0,.5);text-shadow:0 1px 0 rgba(255,255,255,.4);font-family:'Fraunces',serif}
.arc-combo-badge.active{display:inline-flex;animation:comboBadgePulse .8s ease infinite alternate}
@keyframes comboBadgePulse{
  from{box-shadow:0 0 10px rgba(255,215,0,.5);transform:scale(1)}
  to{box-shadow:0 0 18px rgba(255,215,0,.9);transform:scale(1.05)}
}

/* ── Micropista toast (scaffolding) ────────── */
.arc-hint-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:220;background:linear-gradient(135deg,#1E1B4B 0%,#581C87 100%);color:#FEF3C7;border:2px solid #FBBF24;border-radius:14px;padding:18px 24px;max-width:480px;box-shadow:0 0 30px rgba(251,191,36,.6),0 12px 40px rgba(0,0,0,.6);font-family:'Fraunces',serif;cursor:pointer;user-select:none}
.arc-hint-toast.show{animation:hintToastIn 6s ease forwards}
.arc-hint-toast .ht-label{font-weight:900;font-size:.85rem;color:#FBBF24;letter-spacing:.16em;margin-bottom:6px;text-transform:uppercase}
.arc-hint-toast .ht-text{font-size:1.02rem;line-height:1.45;color:#FEF9C3;font-family:'Lora',serif;font-weight:500}
.arc-hint-toast .ht-dismiss{margin-top:10px;font-size:.72rem;font-weight:700;color:rgba(254,243,199,.55);text-align:right;letter-spacing:.06em;font-family:'DM Sans',sans-serif;animation:hintDismissPulse 1.6s ease-in-out infinite}
@keyframes hintToastIn{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  4%{transform:translate(-50%,-50%) scale(1.05);opacity:1}
  8%{transform:translate(-50%,-50%) scale(1);opacity:1}
  93%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.95);opacity:0}
}
/* Toast de pista (< 480px): centrado en pantalla, tapa la oración que el
   alumno necesita seguir viendo mientras lee la pista. Se ancla abajo en
   su lugar, como una hoja que sube desde el borde inferior. */
@media(max-width:480px){
  .arc-hint-toast{top:auto;left:12px;right:12px;bottom:14px;transform:none;max-width:none;width:auto}
  .arc-hint-toast.show{animation:hintToastInMobile 6s ease forwards}
  @keyframes hintToastInMobile{
    0%{transform:translateY(24px);opacity:0}
    4%{transform:translateY(0);opacity:1}
    8%{transform:translateY(0);opacity:1}
    93%{transform:translateY(0);opacity:1}
    100%{transform:translateY(10px);opacity:0}
  }
}
@keyframes hintDismissPulse{
  0%,100%{opacity:.45}
  50%{opacity:.9}
}

/* ── Frenesí overlay (timer mode) ──────────── */
.arc-frenzy-frame{position:fixed;inset:0;pointer-events:none;z-index:30;border:0 solid transparent;transition:border-width .3s ease;box-sizing:border-box}
.arc-frenzy-frame.active{border:6px solid #DC2626;animation:frenzyPulse 1s ease-in-out infinite alternate}
@keyframes frenzyPulse{
  from{border-color:#DC2626;box-shadow:inset 0 0 30px rgba(220,38,38,.5),0 0 12px rgba(220,38,38,.4)}
  to{border-color:#FBBF24;box-shadow:inset 0 0 60px rgba(251,191,36,.65),0 0 24px rgba(251,191,36,.6)}
}

/* Timer: critical (< 10s) */
.timer-bar-fill.critical{animation:timerCritical .5s ease-in-out infinite alternate !important}
@keyframes timerCritical{
  from{background:#DC2626;box-shadow:0 0 8px rgba(220,38,38,.6)}
  to{background:#FCA5A5;box-shadow:0 0 18px rgba(220,38,38,.9)}
}

.score-float{position:fixed;pointer-events:none;font-weight:900;font-size:1.1rem;z-index:200;animation:scoreFloat .9s ease forwards}
.timer-bar-wrap{flex:1;height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;position:relative}
.timer-bar-fill{height:100%;background:linear-gradient(90deg,#22D3EE,#3B82F6);border-radius:4px;transition:width .5s linear}
.timer-bar-fill.danger{background:linear-gradient(90deg,#EF4444,#DC2626)}
.timer-score{font-family:monospace;font-weight:900;font-size:1rem;color:#C7D2FE;min-width:70px;text-align:right}
.timer-clock{font-family:monospace;font-weight:900;font-size:1.1rem;min-width:50px;text-align:center}
.arcade-wrap{max-width:820px;margin:0 auto;padding:22px 18px 80px;width:100%}
/* Game over screen */
#screen-gameover{flex-direction:column;align-items:center;justify-content:center;background:#0F0A1E;min-height:100dvh;padding:24px}
.go-card{background:#1E1B4B;border:1px solid #3730A3;border-radius:20px;padding:40px 32px;max-width:440px;width:100%;text-align:center;animation:gameover .4s cubic-bezier(.16,1,.3,1)}
.go-skull{font-size:4rem;margin-bottom:16px;display:block;animation:bounw .5s ease}
.go-title{font-size:2.2rem;font-weight:900;color:#fff;margin-bottom:6px}
.go-streak{font-size:1.1rem;color:#93C5FD;margin-bottom:24px}
.go-score{font-size:3rem;font-weight:900;color:#F59E0B;margin-bottom:6px}
.go-score-lbl{font-size:.8rem;color:#6366F1;text-transform:uppercase;letter-spacing:.1em;margin-bottom:24px}
.lb-table{width:100%;border-collapse:collapse;margin:16px 0}
.lb-table th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:#6366F1;padding:6px 10px;text-align:left;border-bottom:1px solid #3730A3}
.lb-table td{padding:8px 10px;border-bottom:1px solid rgba(55,48,163,.4);font-size:.85rem;color:#C7D2FE}
.lb-table tr.lb-you td{color:#F59E0B;font-weight:800}
.lb-rank{color:#6366F1;font-family:monospace;font-weight:700;min-width:28px}
.sf-pos{color:#22C55E}.sf-neg{color:#EF4444}

/* ══ Morphology ══ */
#screen-morph{flex-direction:column;min-height:100dvh}
.morph-topbar{background:#fff;border-bottom:1px solid var(--border);padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30;box-shadow:0 1px 8px rgba(0,0,0,.05)}
.morph-title{font-weight:900;font-size:.95rem}
.morph-level-badge{padding:3px 10px;border-radius:99px;font-size:.7rem;font-weight:800}
.ml-1{background:#DBEAFE;color:#1D4ED8}
.ml-2{background:#EDE9FE;color:#5B21B6}
.ml-3{background:#FEF3C7;color:#78350F}
.morph-wrap{max-width:680px;margin:0 auto;padding:22px 18px 80px;width:100%}
.morph-texto{font-family:'Lora',serif;font-size:1.08rem;line-height:2.2;padding:22px 24px;background:var(--paper);border:1.5px solid var(--parch-border);border-radius:var(--r);box-shadow:0 3px 14px rgba(59,42,26,.1);margin-bottom:18px;position:relative;text-align:left}
.morph-word{cursor:pointer;padding:1px 4px;border-radius:5px;transition:all .15s;position:relative;display:inline}
.morph-word.mw-target{background:#FEF9C3;border-bottom:2px dashed var(--amber)}
.morph-word.mw-target:hover{background:#FDE68A}
.morph-word.mw-correct{background:var(--green-lt);border-bottom:2px solid var(--green);cursor:default}
.morph-word.mw-wrong{background:var(--red-lt);border-bottom:2px solid var(--red);animation:shakew .4s ease;cursor:default}
/* SVG relation overlay */
#morph-svg{position:fixed;inset:0;pointer-events:none;z-index:15;overflow:visible}
.rel-path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawLine .4s ease forwards}
/* Hint bottom sheet */
.morph-hint{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;border-top:2px solid var(--border);border-radius:16px 16px 0 0;padding:20px 22px 32px;box-shadow:0 -8px 32px rgba(0,0,0,.12);transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.morph-hint.mh-open{transform:translateY(0)}
.morph-hint-lbl{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.morph-hint-text{font-family:'Lora',serif;font-size:.96rem;line-height:1.65;color:var(--ink2);margin-bottom:14px}
.cat-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;justify-content:center}
.cat-btn{padding:8px 14px;border-radius:10px;border:2px solid var(--border);background:var(--paper);font-family:'Nunito',sans-serif;font-weight:700;font-size:.84rem;cursor:pointer;transition:all .15s}
.cat-btn:hover{border-color:#bbb;transform:translateY(-1px)}
.cat-btn.cb-sel{border-color:var(--blue);background:var(--blue);color:#fff}

/* ══ Sintagmas ══ */
#screen-sintagmas{flex-direction:column;min-height:100dvh}
.sint-topbar{background:#7C3AED;color:#fff;padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30}
.sint-wrap{max-width:820px;margin:0 auto;padding:22px 18px 80px;width:100%}

/* ══ CC SUBTIPO SUBMENU ══ */
.cc-submenu{position:fixed;z-index:300;background:#fff;border:2px solid var(--parch-border);
  border-radius:14px;box-shadow:0 8px 32px rgba(59,42,26,.2);padding:14px 16px;min-width:240px;max-width:320px;
  max-height:80vh;overflow-y:auto;animation:popModal .2s cubic-bezier(.16,1,.3,1)}
.cc-submenu-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:10px}
.cc-submenu-grid{display:flex;flex-direction:column;gap:6px}
.cc-sub-btn{padding:8px 14px;border-radius:9px;border:1.5px solid var(--border);background:var(--paper);
  font-family:'Nunito',sans-serif;font-size:.84rem;font-weight:700;cursor:pointer;text-align:left;
  color:var(--ink);transition:all .15s}
.cc-sub-btn:hover{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
.cc-sub-btn.ccsub-sel{border-color:var(--blue);background:var(--blue);color:#fff}
/* Subtipo badge on CC tag */
.cc-sub-badge{font-size:.65rem;opacity:.75;display:block;margin-top:1px}
/* Partial score indicator */
.partial-score-badge{font-size:.62rem;padding:1px 5px;border-radius:99px;
  background:var(--amber-lt);color:var(--amber);font-weight:700;margin-left:4px}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}
@keyframes popModal{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
@keyframes shakew{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@keyframes bounw{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.au{animation:slideUp .4s cubic-bezier(.16,1,.3,1) both}
.afo{animation:fadeOut .3s ease forwards;pointer-events:none}

@media(max-width:520px){
  .login-hero h1{font-size:2.1rem}
  .inst-title{font-size:1.3rem}
  .wu-text{font-size:1.1rem}
  .sent-card{padding:16px 14px}
  .pvpn-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════
   PORTADA REDESIGN — SaaS Educational Dashboard
   Navy + teal · clean cards · strong hierarchy · no childish elements
   (Tokens come from the global UI design system; the --portada-* names
    are kept as aliases for stability of this CSS block.)
   ══════════════════════════════════════════════════════════════ */
.theme-new-ui #screen-portada{
  background:var(--portada-bg);
  padding:36px 18px 28px;
}
.theme-new-ui .portada-hero{
  text-align:center;margin-bottom:22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.theme-new-ui .portada-logo{
  width:104px;height:104px;border-radius:50%;
  background:#FFFFFF;
  box-shadow:
    0 0 0 1px rgba(15,42,67,0.07),
    0 8px 26px rgba(15,42,67,0.10);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;
  overflow:hidden; /* recorta el sobrante del logo ampliado al borde circular */
}
/* El logo llena el círculo (sin holgura) y se amplía un poco con scale para
   aprovechar mejor el espacio. El círculo NO cambia de tamaño; el exceso se
   recorta por overflow+border-radius. */
.theme-new-ui .portada-logo img,
.theme-new-ui .portada-logo svg{
  width:104px;height:104px;display:block;
  object-fit:contain;object-position:center;
  transform:scale(1.16);
}
.theme-new-ui .portada-hero h1{
  font-family:'Fraunces',serif;font-size:2.1rem;font-weight:700;
  color:var(--portada-navy);letter-spacing:-.015em;margin:0;line-height:1.05;
}
.theme-new-ui .portada-hero .subtitle-rule{
  display:flex;align-items:center;gap:14px;margin-top:6px;
  color:var(--portada-muted);font-size:.86rem;font-family:'Lora',serif;
  font-style:italic;
}
.theme-new-ui .portada-hero .subtitle-rule::before,
.theme-new-ui .portada-hero .subtitle-rule::after{
  content:'';width:36px;height:1px;background:var(--portada-navy);opacity:.35;
}
.theme-new-ui .portada-hero p.tagline{
  color:var(--portada-muted);font-size:.92rem;font-family:'Lora',serif;
  margin:0;letter-spacing:.01em;
}
.theme-new-ui .portada-inkmark{
  position:absolute;top:18px;right:22px;
  font-size:1.05rem;opacity:.32;cursor:default;user-select:none;
  transition:opacity .2s;
}
.theme-new-ui .portada-inkmark:hover{opacity:.55}

.theme-new-ui #screen-portada .mod-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  width:100%;max-width:760px;margin:0 auto;
}
@media(max-width:560px){
  .theme-new-ui #screen-portada .mod-grid{grid-template-columns:1fr;gap:14px}
  .theme-new-ui .portada-logo{width:88px;height:88px}
  .theme-new-ui .portada-logo img,
  .theme-new-ui .portada-logo svg{width:88px;height:88px;transform:scale(1.16)}
  .theme-new-ui .portada-hero h1{font-size:1.8rem}
}

.theme-new-ui #screen-portada .mod-card{
  background:var(--portada-card);
  border:1px solid var(--portada-border);
  border-radius:14px;
  padding:22px 22px 20px;
  text-align:left;
  cursor:pointer;
  /* Layout grid: icono a la izquierda + título/desc a la derecha, botón abajo */
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "icon  title"
    "icon  desc"
    "cta   cta";
  column-gap:16px;
  row-gap:6px;
  align-items:start;
  font-family:'Lora',serif;
  position:relative;overflow:hidden;
  box-shadow:
    0 1px 2px rgba(15,42,67,0.04),
    0 4px 14px rgba(15,42,67,0.05);
  transition:
    transform .25s cubic-bezier(.16,1,.3,1),
    box-shadow .25s cubic-bezier(.16,1,.3,1),
    border-color .2s;
}
.theme-new-ui #screen-portada .mod-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--portada-navy);
  border-radius:14px 14px 0 0;
  opacity:1;
}
.theme-new-ui #screen-portada .mod-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 2px rgba(15,42,67,0.05),
    0 12px 28px rgba(15,42,67,0.13);
  border-color:var(--portada-navy-soft);
}
.theme-new-ui #screen-portada .mod-card:active{transform:translateY(-1px)}

.theme-new-ui #screen-portada .mod-card-icon{
  grid-area:icon;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:rgba(15,42,67,0.05);
  border-radius:12px;
  color:var(--portada-navy);
  font-size:0;
  transition:background .2s, color .2s;
  filter:none;
}
.theme-new-ui #screen-portada .mod-card-icon svg{
  width:30px;height:30px;display:block;
  stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.theme-new-ui #screen-portada .mod-card:hover .mod-card-icon{
  background:var(--portada-navy);color:#FFFFFF;transform:none;
}

.theme-new-ui #screen-portada .mod-card-title{
  grid-area:title;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.18rem;
  color:var(--portada-navy);letter-spacing:-.005em;line-height:1.2;
  margin:0;
}
.theme-new-ui #screen-portada .mod-card-desc{
  grid-area:desc;
  font-size:.84rem;font-family:'Lora',serif;font-weight:400;
  color:var(--portada-muted);line-height:1.45;margin:0;
}
/* CTA como botón pill oscuro relleno (estilo referencia) */
.theme-new-ui #screen-portada .mod-card-cta{
  grid-area:cta;
  margin-top:14px;
  justify-self:start;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  background:var(--portada-navy);
  color:#FFFFFF;
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;
  transition:background .2s, gap .2s, transform .2s;
}
.theme-new-ui #screen-portada .mod-card:hover .mod-card-cta{
  gap:11px;
}
.theme-new-ui #screen-portada .mod-card-cta::after{
  content:'→';font-size:1rem;line-height:1;font-weight:600;
}

.theme-new-ui #screen-portada .mod-card-badge{
  position:absolute;top:14px;right:14px;
  font-size:.62rem;font-weight:700;
  padding:3px 9px;border-radius:99px;letter-spacing:.06em;
  background:var(--portada-teal);color:#FFFFFF;
  text-transform:uppercase;animation:none;
  box-shadow:0 2px 6px rgba(15,118,110,0.25);
}

/* Per-module accent (la barra superior de 3px + el estado activo del icono).
   Cinco colores CLARAMENTE distintos, uno por módulo académico, dentro de
   la paleta editorial (petróleo, esmeralda, azul acero, granate, oliva). No
   se usa violeta ni neón. Arcade aparte (ámbar, más abajo).
     · Sintáctico → petróleo (navy oscuro)
     · Morfológico → esmeralda (verde-azul)
     · Sintagmas   → azul acero medio
     · Compuesta   → granate suave
     · Fábrica     → oliva editorial (verde-amarillo, no confundible con
                     el esmeralda de Morfológico) */
.theme-new-ui #screen-portada .mc-sint::before{background:var(--portada-navy)}
.theme-new-ui #screen-portada .mc-sint:hover .mod-card-icon{background:var(--portada-navy)}
.theme-new-ui #screen-portada .mc-sint:hover{border-color:var(--portada-navy)}
.theme-new-ui #screen-portada .mc-maestro::before{background:var(--portada-teal)}
.theme-new-ui #screen-portada .mc-maestro:hover .mod-card-icon{background:var(--portada-teal)}
.theme-new-ui #screen-portada .mc-maestro:hover{border-color:var(--portada-teal)}
.theme-new-ui #screen-portada .mc-sint4::before{background:var(--portada-azul)}
.theme-new-ui #screen-portada .mc-sint4:hover .mod-card-icon{background:var(--portada-azul)}
.theme-new-ui #screen-portada .mc-sint4:hover{border-color:var(--portada-azul)}
.theme-new-ui #screen-portada .mc-compuestas::before{background:var(--portada-vino)}
.theme-new-ui #screen-portada .mc-compuestas:hover .mod-card-icon{background:var(--portada-vino)}
.theme-new-ui #screen-portada .mc-compuestas:hover{border-color:var(--portada-vino)}
.theme-new-ui #screen-portada .mc-fabrica::before{background:var(--portada-oliva)}
.theme-new-ui #screen-portada .mc-fabrica:hover .mod-card-icon{background:var(--portada-oliva)}
.theme-new-ui #screen-portada .mc-fabrica:hover{border-color:var(--portada-oliva)}

/* Arcade card: carácter algo más enérgico que las académicas pero dentro
   de la paleta editorial: barra ámbar suave (no neón, no magenta). Resto
   de la tarjeta idéntico al resto para no romper la composición. */
.theme-new-ui #screen-portada .mc-arcade{
  background:var(--portada-card);
  border-color:var(--portada-border);
}
.theme-new-ui #screen-portada .mc-arcade::before{
  background:#B45309; /* ámbar editorial, no saturado */
  height:3px;
}
.theme-new-ui #screen-portada .mc-arcade .mod-card-icon{
  background:rgba(180,83,9,0.10);
  color:#B45309;
}
.theme-new-ui #screen-portada .mc-arcade .mod-card-title{color:var(--portada-navy);font-family:'Fraunces',serif}
.theme-new-ui #screen-portada .mc-arcade .mod-card-desc{color:var(--portada-muted)}
.theme-new-ui #screen-portada .mc-arcade .mod-card-cta{background:var(--portada-navy);color:#FFFFFF}
.theme-new-ui #screen-portada .mc-arcade:hover{border-color:#B45309}
.theme-new-ui #screen-portada .mc-arcade:hover .mod-card-icon{background:#B45309;color:#FFFFFF}

/* Chispa: no tenía regla propia aquí y heredaba la barra petróleo de
   Sintáctico por defecto (mismo bug que corrigió esta sección para
   Fábrica). Reutiliza el ámbar dorado que Chispa ya usa en su topbar y
   su botón (index.html, gradiente #F59E0B→#D97706) — distinto del ámbar
   más terroso de Arcade (#B45309) para que las dos tarjetas no se
   confundan entre sí. */
.theme-new-ui #screen-portada .mc-chispa::before{background:#D97706}
.theme-new-ui #screen-portada .mc-chispa:hover .mod-card-icon{background:#D97706}
.theme-new-ui #screen-portada .mc-chispa:hover{border-color:#D97706}

.theme-new-ui .portada-footer{
  margin-top:30px;text-align:center;font-size:.72rem;
  color:var(--portada-muted);font-family:'Lora',serif;
  letter-spacing:.01em;
  border-top:1px solid rgba(15,35,66,0.08);padding-top:16px;
  max-width:620px;margin-left:auto;margin-right:auto;
}

/* ══════════════════════════════════════════════════════════════
   END portada redesign
   ══════════════════════════════════════════════════════════════ */

/* ══ PORTADA — Module selector ══ */
#screen-portada{align-items:center;justify-content:center;flex-direction:column;
  min-height:100dvh;padding:28px 16px;background:var(--parch-bg)}
.portada-hero{text-align:center;margin-bottom:16px}
.portada-hero h1{font-family:'Lora',serif;font-size:2rem;font-weight:700;
  color:var(--ink);letter-spacing:-.02em;margin-bottom:4px}
.portada-hero p{color:var(--muted);font-size:.9rem;font-family:'Nunito',sans-serif}
.portada-inkmark{font-size:2rem;margin-bottom:4px;opacity:.5;display:block;
  cursor:default;user-select:none}
.mod-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;
  width:100%;max-width:560px;margin:0 auto}
@media(max-width:480px){.mod-grid{grid-template-columns:1fr}}
.mod-card{background:var(--paper);border:2px solid var(--parch-border);
  border-radius:18px;padding:26px 20px;text-align:center;cursor:pointer;
  transition:all .2s cubic-bezier(.16,1,.3,1);
  box-shadow:0 3px 14px rgba(59,42,26,.1);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:'Nunito',sans-serif;position:relative;overflow:hidden}
.mod-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(59,42,26,.18);
  border-color:var(--blue)}
.mod-card:active{transform:translateY(-1px)}
.mod-card-icon{font-size:2.4rem;line-height:1}
.mod-card-title{font-weight:900;font-size:1.05rem;color:var(--ink)}
.mod-card-desc{font-size:.75rem;color:var(--muted);line-height:1.4}
.mod-card-badge{position:absolute;top:10px;right:10px;font-size:.6rem;
  font-weight:800;padding:2px 7px;border-radius:99px;
  background:var(--blue);color:#fff;text-transform:uppercase;letter-spacing:.05em}
.mod-card.mc-sint{border-color:#93C5FD}
.mod-card.mc-sint:hover{border-color:var(--blue);background:#EFF6FF}
.mod-card.mc-maestro{border-color:#A7F3D0}
.mod-card.mc-maestro:hover{border-color:#059669;background:#F0FDF4}
.mod-card.mc-arcade{border-color:#FCA5A5}
.mod-card.mc-arcade:hover{border-color:#DC2626;background:#FEF2F2}
.mod-card.mc-sint4{border-color:#C4B5FD}
.mod-card.mc-sint4:hover{border-color:var(--purple);background:#F5F3FF}
.mod-card.mc-fabrica{border-color:var(--fab-border)}
.mod-card.mc-fabrica:hover{border-color:var(--fab-oliva);background:var(--fab-tint)}
.portada-footer{margin-top:10px;text-align:center;font-size:.68rem;
  color:var(--muted);font-family:'Nunito',sans-serif}


/* ── FOLIO PAPEL RAYADO (estilo cuaderno escolar) ── */
.paper-sheet, .folio-sheet {
  position: relative;
  background: #F0F4F8;
  border-radius: 4px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.08),
    0 6px 20px rgba(0,0,0,.10),
    0 0 0 1px rgba(180,195,210,.4);
  overflow: hidden;
}
/* Líneas horizontales azul claro + margen rojo */
.paper-sheet::before, .folio-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* margen rojo vertical */
    linear-gradient(to right, transparent 54px, rgba(220,80,80,.35) 54px, rgba(220,80,80,.35) 56px, transparent 56px),
    /* líneas horizontales azul pizarra */
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 29px,
      rgba(100,160,200,.35) 29px,
      rgba(100,160,200,.35) 30px
    );
  pointer-events: none;
  z-index: 0;
}
/* Sombra superior tipo encuadernado */
.paper-sheet::after, .folio-sheet::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), transparent);
  pointer-events: none;
  z-index: 1;
}
.paper-sheet > *, .folio-sheet > * {
  position: relative;
  z-index: 2;
}
.paper-sheet {
  padding: 32px 44px 28px 70px;
  margin: 0 auto 20px;
  max-width: 700px; width: 100%;
}
.folio-sheet {
  padding: 24px 32px 24px 70px;
  margin: 0 auto 12px;
  max-width: 100%; width: 100%;
}
/* Remove old conflicting paper CSS */

/* Sintagmas (< 480px): los pasos se van acumulando en #sint-steps y nunca
   se borran (para poder repasar), así que en un sintagma con varios
   niveles (p. ej. un SP con un SN dentro) la página puede crecer mucho.
   En vez de obligar al alumno a bajar buscando el paso activo, el
   contenedor tiene su propio scroll interno; _sintAppendStep() (JS) hace
   scroll automático al fondo cada vez que se añade un paso nuevo. */
@media(max-width:480px){
  /* scroll-behavior:smooth NO se usa a propósito: interfiere con la
     asignación programática de scrollTop en _sintAppendStep() (JS),
     dejándola sin efecto en algunos casos. Salto instantáneo, sin animar. */
  #sint-steps{max-height:56vh;overflow-y:auto;padding-right:2px}
}

/* ══ MODO MAESTRO — Morphology ══ */
#screen-maestro{flex-direction:column;min-height:100dvh;background:var(--parch-bg)}
.maestro-topbar{background:rgba(244,240,232,.96);border-bottom:1.5px solid var(--parch-border);
  padding:10px 18px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:25;
  backdrop-filter:blur(10px)}
.maestro-progress-wrap{flex:1;display:flex;align-items:center;gap:10px}
.maestro-prog-bar{flex:1;height:6px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden}
.maestro-prog-fill{height:100%;background:linear-gradient(90deg,#059669,#34D399);
  border-radius:99px;transition:width .4s cubic-bezier(.16,1,.3,1)}
.maestro-counter{font-size:.78rem;font-weight:800;color:var(--muted);white-space:nowrap}
.maestro-score-badge{font-size:.75rem;font-weight:800;padding:3px 10px;
  background:#F0FDF4;color:#059669;border:1.5px solid #A7F3D0;border-radius:99px}
/* Token word buttons */
.token-grid{display:flex;flex-wrap:wrap;gap:10px 12px;padding:20px 0}
.token-btn{font-family:'Lora',serif;font-size:1.12rem;padding:8px 14px;
  border:2px solid var(--parch-border);border-radius:10px;background:var(--paper);
  cursor:pointer;color:var(--ink);transition:all .18s;position:relative;
  font-weight:500;line-height:1.3}
.token-btn:hover{border-color:var(--blue);background:var(--blue-lt);color:var(--blue);
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,.15)}
.token-btn.tk-done{border-color:#A7F3D0;background:#F0FDF4;color:#065F46;cursor:default}
.token-btn.tk-done:hover{transform:none;box-shadow:none}
.token-btn.tk-active{border-color:var(--blue);background:var(--blue);color:#fff;
  box-shadow:0 4px 16px rgba(37,99,235,.3)}
.token-btn.tk-error{border-color:#FCA5A5;background:#FEF2F2;animation:errShake .4s}
.token-badge{position:absolute;top:-8px;right:-6px;font-size:.55rem;font-weight:900;
  padding:1px 5px;border-radius:99px;background:#059669;color:#fff;
  font-family:'Nunito',sans-serif;line-height:1.4;white-space:nowrap}
.token-punct{font-family:'Lora',serif;font-size:1.12rem;color:var(--muted);
  padding:8px 2px;line-height:1.3}
/* Cascade panel */
.cascade-panel{background:var(--paper);border:2px solid var(--parch-border);
  border-radius:16px;padding:22px 20px;margin-top:16px;
  box-shadow:0 4px 20px rgba(59,42,26,.12);animation:slideUp .25s ease}
.cascade-step{margin-bottom:18px}
.cascade-step:last-child{margin-bottom:0}
.cascade-label{font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:8px;
  display:flex;align-items:center;gap:6px}
.cascade-label span{background:var(--blue);color:#fff;font-size:.62rem;
  width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-weight:900}
.cascade-opts{display:flex;flex-wrap:wrap;gap:7px}
.casc-btn{padding:7px 13px;min-height:44px;border-radius:99px;border:1.5px solid var(--border);
  background:var(--paper);font-family:'Nunito',sans-serif;font-size:.82rem;
  font-weight:700;cursor:pointer;color:var(--ink);transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center}
.casc-btn:hover{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}
.casc-btn.cs-sel{border-color:var(--blue);background:var(--blue);color:#fff}
.casc-btn.cs-correct{border-color:#059669;background:#059669;color:#fff}
.casc-btn.cs-wrong{border-color:#DC2626;background:#FEF2F2;color:#DC2626;
  animation:errShake .35s}
.maestro-confirm-btn{width:100%;padding:12px;margin-top:14px;font-size:.9rem;
  font-weight:800;border-radius:12px;border:none;background:var(--blue);color:#fff;
  cursor:pointer;font-family:'Nunito',sans-serif;transition:all .18s;
  box-shadow:0 4px 14px rgba(37,99,235,.25)}
.maestro-confirm-btn:hover{background:#1D4ED8;transform:translateY(-1px)}
.maestro-confirm-btn:disabled{background:var(--border);color:var(--muted);
  cursor:not-allowed;box-shadow:none;transform:none}
/* Análisis del verbo (js/modules/maestro/formas-verbales.js, oct-2026) */
.fv-consigna{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:8px;font-family:'Nunito',sans-serif}
.fv-oracion{margin-bottom:0;padding:24px 28px 24px 70px;font-family:'Lora',serif;font-size:1.15rem;
  line-height:2;color:var(--ink)}
.fv-forma{background:var(--blue-lt);color:var(--blue);font-weight:700;
  padding:2px 6px;border-radius:6px;border-bottom:2px solid var(--blue)}
.fv-forma-activa{position:sticky;top:0;z-index:10;background:var(--blue);color:#fff;
  padding:8px 16px;border-radius:10px;margin-bottom:14px;font-family:'Lora',serif;
  font-size:1.15rem;font-weight:700;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.fv-aviso{margin-top:8px;padding:8px 12px;border-radius:10px;font-size:.82rem;
  font-weight:700;font-family:'Nunito',sans-serif}
.fv-aviso-ok{background:var(--green-lt);color:#166534}
.fv-aviso-error{background:var(--red-lt);color:var(--red)}
.casc-btn:disabled{cursor:default;opacity:1}
.casc-btn:disabled:not(.cs-correct):not(.cs-wrong){opacity:.55}
.casc-btn:disabled:hover{border-color:var(--border);background:var(--paper);color:var(--ink)}
.casc-btn.cs-correct:disabled:hover{border-color:#059669;background:#059669;color:#fff}
.casc-btn.cs-wrong:disabled:hover{border-color:#DC2626;background:#FEF2F2;color:#DC2626}
.fv-partes{display:flex;flex-wrap:wrap;gap:10px}
.fv-parte{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;
  border:1.5px solid var(--border);border-radius:12px;background:var(--paper2)}
.fv-parte-palabra{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;color:var(--ink)}
.fv-parte-opts{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.fv-parte-opts .casc-btn{font-size:.76rem;padding:6px 10px}
/* Análisis del verbo: corrección de cada ejercicio y final de la ronda */
.fv-correccion{font-family:'Nunito',sans-serif}
.fv-corr-bien{border-color:#A7F3D0;background:#F0FDF4}
.fv-corr-medio{border-color:#FCD34D;background:#FFFBEB}
.fv-corr-mal{border-color:#FCA5A5;background:#FEF2F2}
.fv-corr-cabecera{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fv-corr-icono{font-size:1.6rem}
.fv-corr-titulo{font-weight:800;font-size:.95rem;color:var(--ink)}
.fv-corr-puntos{font-size:.75rem;color:var(--muted)}
.fv-fila{display:flex;gap:8px;align-items:baseline;font-size:.84rem;padding:5px 0;
  border-bottom:1px solid rgba(0,0,0,.06);color:var(--ink)}
.fv-fila-marca{flex:0 0 1.1em;font-weight:900;text-align:center}
.fv-fila-ok .fv-fila-marca{color:#059669}
.fv-fila-error .fv-fila-marca{color:#DC2626}
.fv-fila-error .fv-fila-elegido{color:#DC2626}
.fv-fila-blanco{color:var(--muted)}
.fv-fila-correcto{color:#059669;font-weight:700}
.fv-respuesta{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.15);
  font-size:.84rem;line-height:1.5;color:var(--ink2)}
.fv-nota{margin-top:8px;font-size:.82rem;line-height:1.5;color:var(--ink2)}
.fv-correccion .maestro-confirm-btn{margin-top:14px}
.fv-fin{max-width:560px;margin:0 auto;animation:slideUp .4s ease;font-family:'Nunito',sans-serif}
.fv-fin .card{margin-bottom:16px}
.fv-fin-nota{text-align:center;padding:28px 24px}
.fv-fin-emoji{font-size:2.6rem;margin-bottom:6px}
.fv-fin-nota h2{font-size:1.3rem;font-weight:900;margin-bottom:14px}
.fv-fin-cifra{font-size:4rem;font-weight:900;line-height:1;color:var(--ink)}
.fv-fin-nota.fv-corr-bien .fv-fin-cifra{color:#059669}
.fv-fin-nota.fv-corr-medio .fv-fin-cifra{color:#D97706}
.fv-fin-nota.fv-corr-mal .fv-fin-cifra{color:#DC2626}
.fv-fin-sobre{font-size:.9rem;color:var(--muted);margin:4px 0 14px}
.fv-fin-sin-error{font-size:.9rem;color:var(--ink2)}
.fv-fin-fallados{padding:20px 22px}
.fv-fin-fallados h3{font-size:.88rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.fv-fin-fallados ul{list-style:none;margin:0;padding:0}
.fv-fin-fallados li{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;
  padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.fv-fin-veces{color:#DC2626;font-weight:800;white-space:nowrap}
.fv-fin-fallados p{font-size:.88rem;color:var(--ink2)}
.fv-fin-botones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding-bottom:20px}
/* Envío de la nota del examen del verbo (oct-2026), como #mm-exam-msg */
.fv-envio{padding:10px 14px;border-radius:10px;border:1.5px solid transparent;font-size:.85rem;font-weight:700;text-align:center;margin-bottom:12px}
.fv-envio:empty{display:none}
.fv-envio-espera{background:var(--blue-lt);border-color:#93C5FD;color:#1D4ED8}
.fv-envio-ok{background:var(--green-lt);border-color:#86EFAC;color:#166534}
.fv-envio-error{background:var(--red-lt);border-color:#FCA5A5;color:var(--red)}
@media (max-width:480px){.fv-oracion{padding:18px 16px 18px 66px}.fv-parte{flex:1 1 100%}}
/* Result summary token card */
.token-result-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  border-radius:12px;border:1.5px solid var(--border);background:var(--paper);
  margin-bottom:10px;font-family:'Nunito',sans-serif}
.trc-word{font-family:'Lora',serif;font-size:1.05rem;font-weight:700;
  color:var(--ink);min-width:90px}
.trc-analysis{font-size:.82rem;color:var(--ink2);line-height:1.6}
.trc-correct{border-color:#A7F3D0;background:#F0FDF4}
.trc-wrong{border-color:#FCA5A5;background:#FEF2F2}

/* ── Sintagmas mode v4.6 ── */
.cs-correct { border-color:#059669!important; background:#F0FDF4!important; color:#065F46!important; }
.cs-wrong   { border-color:#DC2626!important; background:#FEF2F2!important; color:#DC2626!important; }
/* Category group rows hover state */
.casc-group-row:hover { box-shadow:0 3px 10px rgba(0,0,0,.1); }
/* Arcade wrap bigger */
.arcade-wrap { padding:16px; max-width:700px; margin:0 auto; width:100%; }
/* Skip button in phase 1 */
.skip-sent-btn { display:block; margin:8px auto 0; }

/* ── MORPH CHALLENGES v4.7 ── */
.challenge-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:620px;margin:0 auto}
@media(max-width:480px){.challenge-grid{grid-template-columns:1fr}}
.challenge-card{background:var(--paper);border:2px solid var(--parch-border);border-radius:16px;
  padding:18px 16px;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;gap:6px;text-align:left;
  box-shadow:0 2px 10px rgba(0,0,0,.07);font-family:'Nunito',sans-serif}
.challenge-card:hover{transform:translateY(-3px);box-shadow:0 6px 22px rgba(0,0,0,.13)}
.challenge-card:active{transform:translateY(-1px)}
.ch-icon{font-size:1.6rem}
.ch-title{font-weight:900;font-size:.92rem;color:var(--ink)}
.ch-desc{font-size:.75rem;color:var(--muted);line-height:1.4}
.ch-meta{display:flex;gap:8px;margin-top:4px}
.ch-badge{font-size:.62rem;font-weight:800;padding:2px 8px;border-radius:99px;
  background:var(--paper2);color:var(--ink2)}
/* Challenge active screen */
.morph-challenge-wrap{max-width:760px;margin:0 auto;padding:16px}
.ch-timer-bar{height:6px;border-radius:99px;overflow:hidden;background:rgba(0,0,0,.1);margin-bottom:12px}
.ch-timer-fill{height:100%;border-radius:99px;transition:width .5s linear;
  background:linear-gradient(90deg,#2563EB,#7C3AED)}
.ch-timer-fill.warning{background:linear-gradient(90deg,#D97706,#DC2626)}
.ch-hud{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:'Nunito',sans-serif}
.ch-score-disp{font-size:1.4rem;font-weight:900;color:var(--blue)}
.ch-streak-disp{font-size:.85rem;font-weight:800;color:#DC2626;min-width:60px}
.ch-time-disp{font-size:.85rem;font-weight:800;color:var(--muted);margin-left:auto}
/* Token states in challenge */
.mm-token.ch-hit {
  background:#059669!important; color:#fff!important;
  border-bottom:2px solid #059669!important;
  text-decoration:line-through; cursor:default;
  animation:tokenPop .25s cubic-bezier(.16,1,.3,1);
}
.mm-token.ch-miss {
  background:#FEF2F2!important; color:#DC2626!important;
  border-bottom:2px solid #DC2626!important;
  animation:errShake .35s;
}
.mm-token.ch-trap {
  background:#FFFBEB!important; color:#92400E!important;
  border-bottom:2px solid #FCD34D!important;
  animation:errShake .35s;
}
@keyframes tokenPop{0%{transform:scale(1.2)}100%{transform:scale(1)}}
/* Challenge results */
.ch-result-banner{text-align:center;padding:28px 24px;border-radius:18px;
  animation:slideUp .4s ease;font-family:'Nunito',sans-serif}
.ch-result-grade{font-size:3.8rem;font-weight:900;line-height:1}
.ch-result-label{font-size:.85rem;color:var(--muted);margin-top:4px}
/* Subfase selector in login */
.subfase-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:400px){.subfase-grid{grid-template-columns:1fr}}
.subfase-card{border:2px solid var(--border);border-radius:12px;padding:12px 14px;
  cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif;background:var(--paper)}
.subfase-card:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(0,0,0,.1)}
.subfase-card.sf-sel{border-color:var(--blue);background:var(--blue-lt)}
.sf-icon{font-weight:900;font-size:1rem;margin-bottom:2px}
.sf-label{font-weight:800;font-size:.82rem;color:var(--ink)}
.sf-desc{font-size:.72rem;color:var(--muted);line-height:1.3}

.mm-token.mm-pending{cursor:pointer;border-radius:3px;padding:2px 4px;transition:all .15s}
.mm-token.mm-pending:hover{background:rgba(37,99,235,.12)}

/* ── Selector compacto (oct-2026) ──
   La pantalla de entrada con una columna por actividad y tarjetas bajas
   (docs/propuesta_morfologia/PROPUESTA_SELECTOR_MORFOLOGIA.md). Pieza común
   para todos los módulos: hoy la usan Morfología y Simples (LOGIN_PANELS.maestro y .sint).
   Cada columna (.selc-grupo) da su color con --c. La opción elegida lleva
   .sel-active, la misma clase que las tarjetas de siempre (.sel-card), así
   que las funciones que las marcan no cambian. Con el tema nuevo
   (new-ui.css), lo elegido va en su verde azulado (--portada-teal). */
/* Login ancho: lo pone goModule() (navigation.js) en los módulos con
   columnas. El contenedor y la tarjeta llevan el ancho en línea (530 px). */
#screen-login.login-ancho > div{max-width:1080px!important}
#screen-login.login-ancho .login-card{max-width:none!important}
/* Dos columnas (Simples): menos ancho */
#screen-login.login-ancho.login-dos > div{max-width:820px!important}
#screen-login.login-ancho hr.divider{margin:0 0 12px}
#screen-login.login-ancho .login-card > .field{margin-bottom:12px}
@media(min-width:720px){
  /* Nombre, correo y grupo en una fila (el grupo, oculto en la gratuita, no ocupa sitio) */
  #screen-login.login-ancho .login-card{display:grid;grid-template-columns:1fr 1fr auto;column-gap:16px}
  #screen-login.login-ancho .login-card > *{grid-column:1/-1}
  #screen-login.login-ancho .login-card > .field{grid-column:auto}
  #screen-login.login-ancho .login-card > .btn-primary{justify-self:end;width:auto!important;padding:12px 34px!important;margin-top:4px!important}
}
.selc-preg{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.selc-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 22px}
@media(min-width:720px){.selc-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.selc-cols:not(.selc-dos){grid-template-columns:repeat(3,minmax(0,1fr))}}
.selc-titulo{display:flex;align-items:center;gap:8px;margin:0;font-weight:800;font-size:.92rem;color:var(--ink)}
.selc-titulo::before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--c,var(--blue))}
.selc-desc{font-size:.75rem;color:var(--muted);line-height:1.35;margin:2px 0 8px}
.selc-lista{display:grid;gap:7px}
.selc-op{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 11px;border:1.5px solid var(--border);border-left:4px solid var(--c,var(--border));border-radius:10px;background:var(--paper);cursor:pointer;transition:background .15s,border-color .15s}
.selc-op:hover{background:var(--paper2)}
.selc-op:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.selc-op.sel-active{border-color:var(--portada-teal,var(--blue));background:rgba(37,99,235,.06)}
.selc-i{flex:none;min-width:22px;text-align:center;font-size:1.1rem}
.selc-tx{flex:1;min-width:0}
.selc-t{display:block;font-weight:800;font-size:.84rem;line-height:1.2;color:var(--ink)}
.selc-op.sel-active .selc-t{color:var(--portada-teal,var(--blue))}
.selc-d{display:block;font-size:.72rem;color:var(--muted);line-height:1.3}
.selc-m{flex:none;font-size:.66rem;font-weight:800;color:var(--muted);white-space:nowrap}
/* Práctica / Examen: interruptor de dos posiciones. En la gratuita no hay
   Examen (goModule lo quita) y no queda nada que elegir: no se enseña. */
.selc-seg{display:inline-flex;margin-top:10px;border:1.5px solid var(--border);border-radius:999px;overflow:hidden}
.selc-seg:has(> :only-child){display:none}
.selc-seg button{padding:6px 14px;font-size:.76rem;font-weight:700;color:var(--muted)}
/* !important: new-ui.css marca todo [class*="sel-"][aria-checked="true"] con un fondo casi transparente */
.selc-seg button.sel-active{background:var(--portada-teal,var(--blue))!important;color:#fff!important;border:0!important}
.selc-nota{font-size:.78rem;color:var(--muted);margin:0 0 4px}
/* Con examen, las demás columnas se apagan (siguen pulsables: salen del examen) */
.selc-cols.selc-examen .selc-grupo:not(:first-child){opacity:.45}
.selc-resumen{text-align:right;font-size:.78rem;color:var(--muted);margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
/* Móvil (paso 3): las opciones, sin la línea de descripción, y un pie fijo
   abajo con lo elegido y «¡Empezar!», que así se ve siempre. El pie son dos
   piezas fijas: la línea de lo elegido (.selc-resumen) hace de fondo y el
   botón va encima. */
@media(max-width:600px){
  #screen-login.login-ancho{padding-bottom:calc(60px + env(safe-area-inset-bottom))!important}
  #screen-login.login-ancho .login-card{padding:18px 16px}
  .selc-d{display:none}
  #screen-login.login-ancho .selc-resumen{position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;padding:8px 16px calc(66px + env(safe-area-inset-bottom));text-align:center;background:var(--paper);border-top:1px solid var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  #screen-login.login-ancho .login-card > .btn-primary{position:fixed;left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:91;width:auto!important;margin:0!important;padding:13px!important}
  /* El botón de Progreso (dashboard.js) taparía las opciones y el pie: aquí
     no sale (está en la portada) */
  body:has(#screen-login.login-ancho.active) #dash-fab{display:none!important}
}