/* theme/new-ui.css - Tema Bento-Neobrutalista (.theme-new-ui)
   Extraido del bloque 2 original de index.html (sub-paso 2b, mayo 2026)
   Cascada: se carga al final para que sus reglas sobreescriban legacy. */

/* ═══════════════════════════════════════════════════════
   TALLER DE SINTAXIS — Tema Bento-Neobrutalista + Compactación
   Activo mediante class="theme-new-ui" en <body>
   No se toca ninguna lógica JS ni estructura HTML.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Variables ── */
.theme-new-ui{
  /* Surfaces — re-routed to the cooler, navy-friendly UI palette */
  --parch-bg:   var(--ui-bg);
  --parch-bg2:  #ECE9DF;
  --paper:      var(--ui-surface);   /* main card surface = pure white */
  --paper2:     var(--ui-surface-2);
  --paper3:     #EFEDE5;
  /* Text */
  --parch-ink:  var(--ui-ink);
  --ink:        var(--ui-ink);
  --ink2:       var(--ui-ink-2);
  --muted:      var(--ui-muted);
  /* Borders */
  --parch-border: var(--ui-border-strong);
  --border:       var(--ui-border);
  /* Shadows — softer, navy-tinted, less brown weight */
  --sh-nb:        var(--ui-sh-2);
  --sh-nb-hover:  var(--ui-sh-3);
  --sh-nb-active: var(--ui-sh-1);
  --sh:           var(--ui-sh-2);
  --sh-card:      var(--ui-sh-1);
  --parch-shadow: var(--ui-sh-2);
  --parch-shadow-lg: var(--ui-sh-3);
  /* Brand & status — keep legacy keys but point at new system colours
     so any rule referencing --blue gets a slightly cooler navy-ish tone
     without breaking anything. */
  --blue:    #2563EB;  /* kept: still distinct from teal, useful for blue-specific accents */
  --blue-lt: #EFF6FF;
  --blue-dk: #1D4ED8;
  --green:    var(--ui-ok);
  --green-lt: var(--ui-ok-tint);
  --red:      var(--ui-err);
  --red-lt:   var(--ui-err-tint);
  --amber:    var(--ui-warn);
  --amber-lt: var(--ui-warn-tint);
  --purple:#7C3AED;--purple-lt:#F5F3FF;
  /* Radii — pull from UI system */
  --r:    var(--ui-r-lg);
  --r-lg: var(--ui-r-xl);
  /* Funciones sintácticas (semantic colours — DO NOT change, students
     have learned to recognise them) */
  --syn-np-bg:#EFF6FF;  --syn-np-b:#60A5FA;  --syn-np-t:#1E3A8A;  --syn-np-s:#3B82F6;
  --syn-suj-bg:#ECFDF5; --syn-suj-b:#34D399; --syn-suj-t:#064E3B; --syn-suj-s:#059669;
  --syn-cd-bg:#FFF4ED;  --syn-cd-b:#FB923C;  --syn-cd-t:#7C2D12;  --syn-cd-s:#EA580C;
  --syn-ci-bg:#F5F0FF;  --syn-ci-b:#A78BFA;  --syn-ci-t:#4C1D95;  --syn-ci-s:#7C3AED;
  --syn-cc-bg:#F0FDFA;  --syn-cc-b:#5EEAD4;  --syn-cc-t:#134E4A;  --syn-cc-s:#0D9488;
  --syn-atr-bg:#FDF2F8; --syn-atr-b:#F0ABFC; --syn-atr-t:#701A75; --syn-atr-s:#C026D3;
  --syn-cpvo-bg:#CFFAFE;--syn-cpvo-b:#67E8F9;--syn-cpvo-t:#155E75;--syn-cpvo-s:#06B6D4;
  --syn-cag-bg:#FEF2F2; --syn-cag-b:#FCA5A5; --syn-cag-t:#7F1D1D; --syn-cag-s:#DC2626;
  --syn-creg-bg:#F0FDF4;--syn-creg-b:#86EFAC;--syn-creg-t:#14532D;--syn-creg-s:#16A34A;
  --syn-voc-bg:#FFF7ED; --syn-voc-b:#FED7AA; --syn-voc-t:#7C2D12; --syn-voc-s:#EA580C;
  --syn-mod-bg:#F9FAFB; --syn-mod-b:#9CA3AF; --syn-mod-t:#374151; --syn-mod-s:#6B7280;
}

/* ── 2. Tipografía base ── */
.theme-new-ui,
.theme-new-ui button,
.theme-new-ui input{font-family:'DM Sans','Nunito',sans-serif;}
.theme-new-ui html,.theme-new-ui body{background:var(--parch-bg);}
.theme-new-ui .inst-title,.theme-new-ui .login-hero h1,
.theme-new-ui .mod-card-title,.theme-new-ui .go-title{
  font-family:'Fraunces','Lora',serif;letter-spacing:-.025em;}
.theme-new-ui .inst-sub,.theme-new-ui .mod-card-desc,.theme-new-ui .pool-section-sub{font-weight:500;font-size:1.02rem;}

/* ── 3. Card & btn base ── */
.theme-new-ui .card{border:1.5px solid var(--border);box-shadow:var(--sh-nb);border-radius:var(--r);}
.theme-new-ui .btn{font-weight:700;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .15s;}
.theme-new-ui .btn:hover{transform:translateY(-2px);filter:brightness(1.04);}
.theme-new-ui .btn:active{transform:translateY(1px);filter:brightness(.97);}
.theme-new-ui .btn-primary{box-shadow:0 3px 0 var(--blue-dk);}
.theme-new-ui .btn-primary:hover{box-shadow:0 5px 0 var(--blue-dk);}
.theme-new-ui .btn-success{box-shadow:0 3px 0 #047857;}
.theme-new-ui .btn-success:hover{box-shadow:0 5px 0 #047857;}

/* ── 4. Home bento ── */
.theme-new-ui .mod-card{
  border-width:2px;border-radius:var(--r);box-shadow:var(--sh-nb);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  position:relative;overflow:hidden;}
.theme-new-ui .mod-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:14px 14px 0 0;}
.theme-new-ui .mod-card:hover{transform:translateY(-5px);box-shadow:var(--sh-nb-hover);}
.theme-new-ui .mod-card:active{transform:translateY(2px);box-shadow:var(--sh-nb-active);}
.theme-new-ui .mod-card-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1);display:inline-block;}
.theme-new-ui .mod-card:hover .mod-card-icon{transform:scale(1.16) rotate(-6deg);}
.theme-new-ui .mod-card-title{font-family:'Fraunces',serif;font-size:1.08rem;font-weight:700;}
.theme-new-ui .mod-card-badge{font-weight:800;animation:nu-badge-pulse 2.5s ease-in-out infinite;}
@keyframes nu-badge-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
.theme-new-ui .mc-sint::before{background:var(--blue);}
.theme-new-ui .mc-sint{border-color:#93C5FD;}.theme-new-ui .mc-sint:hover{border-color:var(--blue);}
.theme-new-ui .mc-maestro::before{background:var(--green);}
.theme-new-ui .mc-maestro{border-color:#6EE7B7;}.theme-new-ui .mc-maestro:hover{border-color:var(--green);}
.theme-new-ui .mc-sint4::before{background:var(--purple);}
.theme-new-ui .mc-sint4{border-color:#C4B5FD;}.theme-new-ui .mc-sint4:hover{border-color:var(--purple);}
.theme-new-ui .mc-fabrica::before{background:var(--fab-oliva);}
.theme-new-ui .mc-fabrica{border-color:var(--fab-border);}.theme-new-ui .mc-fabrica:hover{border-color:var(--fab-oliva);}
.theme-new-ui .mc-laboratorio::before{background:var(--lab-verde);}
.theme-new-ui .mc-laboratorio{border-color:var(--lab-border);}.theme-new-ui .mc-laboratorio:hover{border-color:var(--lab-verde);}
.theme-new-ui .mc-arcade{background:#1E0D00;border-color:#7A4500;--sh-nb:0 3px 0 #FF8C00,0 6px 20px rgba(255,120,0,.25);box-shadow:var(--sh-nb);}
.theme-new-ui .mc-arcade::before{background:linear-gradient(90deg,#FF8C00,#FFD600);}
.theme-new-ui .mc-arcade:hover{border-color:#FF8C00;background:#2D1500;box-shadow:0 6px 0 #FF8C00,0 12px 32px rgba(255,120,0,.38);}
.theme-new-ui .mc-arcade .mod-card-title{color:#FFE0A0;font-family:'Fraunces',serif;}
.theme-new-ui .mc-arcade .mod-card-desc{color:rgba(255,210,130,.5);}
.theme-new-ui .mc-arcade .mod-card-icon{filter:drop-shadow(0 0 6px rgba(255,140,0,.5));}
.theme-new-ui .mc-arcade:hover .mod-card-icon{filter:drop-shadow(0 0 12px rgba(255,140,0,.8));}

/* ── 5. Topbar & progress ── */
.theme-new-ui .topbar{background:rgba(244,245,248,.96);border-bottom:1.5px solid var(--parch-border);backdrop-filter:blur(14px) saturate(1.1);}
.theme-new-ui .prog-fill{background:linear-gradient(90deg,var(--blue),var(--purple));transition:width .9s cubic-bezier(.4,0,.2,1);}
.theme-new-ui .ppill{font-weight:700;}
.theme-new-ui .pp-active{box-shadow:0 2px 8px rgba(37,99,235,.45);animation:nu-ph-pop .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes nu-ph-pop{from{transform:scale(.82);opacity:.4;}to{transform:scale(1);opacity:1;}}
.theme-new-ui .pp-done{font-weight:700;background:rgba(5,150,105,.1);border-color:rgba(5,150,105,.3);color:#065F46;}

/* ── 6. Inst-card ── */
.theme-new-ui .inst-card{border:1.5px solid var(--parch-border);border-left:5px solid var(--blue);box-shadow:var(--sh-nb);border-radius:var(--r);}
.theme-new-ui .inst-title{font-family:'Fraunces',serif;}
.theme-new-ui .inst-sub{font-size:1rem;font-weight:500;line-height:1.55;}

/* ── 7. Tip highlight ── */
.theme-new-ui .inst-tip{
  display:block;margin-top:11px;padding:10px 14px;border-radius:11px;
  font-size:.8rem;font-weight:700;color:#064E3B;line-height:1.6;
  background:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/14px 14px,
             linear-gradient(135deg,#D1FAE5 0%,#A7F3D0 40%,#ECFDF5 100%);
  border:2px solid #34D399;
  box-shadow:0 0 0 3px rgba(52,211,153,.2),0 4px 0 #059669,0 6px 16px rgba(5,150,105,.18);
  transition:box-shadow .2s,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.theme-new-ui .inst-tip:hover{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(52,211,153,.28),0 6px 0 #059669,0 10px 22px rgba(5,150,105,.22);}

/* ── 8. Sent-card & tokens ── */
.theme-new-ui .sent-card{
  background:repeating-linear-gradient(transparent,transparent 27px,rgba(180,160,120,.16) 28px),var(--paper);
  background-size:100% 28px,auto;
  border:1.5px solid var(--parch-border);box-shadow:var(--sh-nb);border-radius:var(--r);}
.theme-new-ui .wu-text{box-shadow:0 2px 0 rgba(184,154,106,.4);transition:background .12s,transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;}
.theme-new-ui .wu:not(.wu-verb):not(.wu-subj):not(.wu-picked):not(.wu-wrong) .wu-text:hover{
  background:rgba(37,99,235,.07);transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(184,154,106,.5),0 5px 12px rgba(100,70,30,.14);cursor:pointer;}
.theme-new-ui .wu.wu-picked .wu-text{box-shadow:0 0 0 2px rgba(37,99,235,.35),0 2px 0 var(--blue-dk);transform:translateY(-1px);}

/* ── 9. Pool ── */
.theme-new-ui .pool-section{border-radius:var(--r);border-width:2px;}
.theme-new-ui .pool-section-arg{background:#ECFEFF;border-color:#A5F3FC;box-shadow:0 3px 0 #06B6D4;}
.theme-new-ui .pool-section-adj{background:#F0FDFA;border-color:#99F6E4;box-shadow:0 3px 0 #0D9488;}
.theme-new-ui .pool-section-mar{background:#F5F3FF;border-color:#DDD6FE;box-shadow:0 3px 0 #7C3AED;}
.theme-new-ui .pool-section-title{font-weight:800;}
.theme-new-ui .tag{border-width:2px;border-radius:10px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;}
.theme-new-ui .tag:hover:not(.tag-pre){transform:translateY(-3px) scale(1.04);}
.theme-new-ui .tag:active:not(.tag-pre){transform:translateY(1px) scale(.98);}
.theme-new-ui .tag.tag-sel{outline:3px solid var(--blue);outline-offset:2px;transform:scale(1.07) translateY(-3px);box-shadow:0 5px 0 var(--blue-dk),0 8px 18px rgba(37,99,235,.3);}
.theme-new-ui .tag-func-main{font-weight:900;font-size:1rem;}

/* ── 10. Funciones sintácticas ── */
.theme-new-ui .tag-f-pv {background:var(--syn-np-bg);border-color:var(--syn-np-b);color:var(--syn-np-t);box-shadow:0 3px 0 var(--syn-np-s);}
.theme-new-ui .tag-f-pn {background:#E0F2FE;border-color:#38BDF8;color:#0C4A6E;box-shadow:0 3px 0 #0284C7;}
.theme-new-ui .tag-f-cd {background:var(--syn-cd-bg);border-color:var(--syn-cd-b);color:var(--syn-cd-t);box-shadow:0 3px 0 var(--syn-cd-s);}
.theme-new-ui .tag-f-ci {background:var(--syn-ci-bg);border-color:var(--syn-ci-b);color:var(--syn-ci-t);box-shadow:0 3px 0 var(--syn-ci-s);}
.theme-new-ui .tag-f-cc {background:var(--syn-cc-bg);border-color:var(--syn-cc-b);color:var(--syn-cc-t);box-shadow:0 3px 0 var(--syn-cc-s);}
.theme-new-ui .tag-f-atr{background:var(--syn-atr-bg);border-color:var(--syn-atr-b);color:var(--syn-atr-t);box-shadow:0 3px 0 var(--syn-atr-s);}
.theme-new-ui .tag-f-cpvo{background:var(--syn-cpvo-bg);border-color:var(--syn-cpvo-b);color:var(--syn-cpvo-t);box-shadow:0 3px 0 var(--syn-cpvo-s);}
.theme-new-ui .tag-f-cag{background:var(--syn-cag-bg);border-color:var(--syn-cag-b);color:var(--syn-cag-t);box-shadow:0 3px 0 var(--syn-cag-s);}
.theme-new-ui .tag-f-creg{background:var(--syn-creg-bg);border-color:var(--syn-creg-b);color:var(--syn-creg-t);box-shadow:0 3px 0 var(--syn-creg-s);}
.theme-new-ui .tag-f-imp,.theme-new-ui .tag-f-pasref{background:var(--syn-creg-bg);border-color:var(--syn-creg-b);color:var(--syn-creg-t);box-shadow:0 3px 0 var(--syn-creg-s);}
.theme-new-ui .tag-f-modor,.theme-new-ui .tag-f-modor2{background:var(--syn-mod-bg);border-color:var(--syn-mod-b);color:var(--syn-mod-t);box-shadow:0 3px 0 var(--syn-mod-s);}
.theme-new-ui .tag-f-voc,.theme-new-ui .tag-f-voc2{background:var(--syn-voc-bg);border-color:var(--syn-voc-b);color:var(--syn-voc-t);box-shadow:0 3px 0 var(--syn-voc-s);}
.theme-new-ui [class*="tag-f-"]:hover:not(.tag-pre){transform:translateY(-3px) scale(1.04);filter:brightness(1.04);}
.theme-new-ui [class*="tag-f-"]:active:not(.tag-pre){transform:translateY(1px);}

/* ── 11. Arcade ── */
.theme-new-ui .arcade-topbar{background:linear-gradient(135deg,#1E0578 0%,#3730A3 50%,#0E7490 100%);border-bottom:2px solid rgba(255,255,255,.1);box-shadow:0 3px 16px rgba(0,0,0,.3);}
.theme-new-ui .arcade-title{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:900;text-shadow:0 0 12px rgba(255,200,50,.4);}
.theme-new-ui .timer-bar-fill{background:linear-gradient(90deg,#06B6D4,#3B82F6,#8B5CF6);box-shadow:0 0 8px rgba(99,102,241,.5);}
.theme-new-ui .timer-bar-fill.danger{background:linear-gradient(90deg,#EF4444,#F97316);box-shadow:0 0 10px rgba(239,68,68,.6);animation:nu-danger-pulse .6s ease-in-out infinite;}
@keyframes nu-danger-pulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.3);}}
.theme-new-ui .streak-badge{background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(249,115,22,.2));border-color:rgba(249,115,22,.6);box-shadow:0 0 8px rgba(239,68,68,.3);}
.theme-new-ui .streak-fire{animation:nu-fire .8s ease-in-out infinite alternate;}
@keyframes nu-fire{from{transform:scale(1) rotate(-5deg);}to{transform:scale(1.2) rotate(5deg);}}
.theme-new-ui .timer-score{color:#FCD34D;text-shadow:0 0 8px rgba(252,211,77,.4);}
.theme-new-ui #screen-gameover{background:radial-gradient(ellipse at 50% 30%,#2D1400 0%,#1A0800 60%,#0D0400 100%);}
.theme-new-ui #screen-arcade{background:#120700;}
.theme-new-ui .go-card{background:rgba(255,120,0,.06);border:1.5px solid rgba(255,150,50,.25);border-radius:22px;box-shadow:0 0 60px rgba(255,100,0,.15);}
.theme-new-ui .go-title{font-family:'Fraunces',serif;font-weight:900;color:#FFE0A0;text-shadow:0 0 20px rgba(255,160,50,.4);}
.theme-new-ui .go-score{color:#FFB700;text-shadow:0 0 24px rgba(255,183,0,.5);}
.theme-new-ui .go-score-lbl{color:rgba(255,180,80,.55);}

/* ── 12. Morfología & Sintagmas ── */
.theme-new-ui .maestro-prog-fill{background:linear-gradient(90deg,#059669,#34D399);box-shadow:0 0 6px rgba(5,150,105,.4);}
.theme-new-ui .sint-topbar{background:linear-gradient(135deg,#6D28D9,#7C3AED);box-shadow:0 3px 14px rgba(109,40,217,.35);}
.theme-new-ui .sint-card{border:1.5px solid var(--border);box-shadow:var(--sh-nb);}
.theme-new-ui .sint-card.sint-done{border-color:rgba(5,150,105,.4);box-shadow:0 3px 0 #047857,0 5px 14px rgba(5,150,105,.12);}

/* ── 13. Microinteracciones ── */
@keyframes nu-pop-correct{0%{transform:scale(.88);}55%{transform:scale(1.12);}100%{transform:scale(1) translateY(-2px);}}
.theme-new-ui .wu.wu-verb,.theme-new-ui .wu.wu-subj{animation:nu-pop-correct .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes nu-shake{0%,100%{transform:translateX(0);}18%{transform:translateX(-7px) rotate(-1deg);}38%{transform:translateX(7px) rotate(1deg);}58%{transform:translateX(-5px);}78%{transform:translateX(5px);}}
.theme-new-ui .wu.wu-wrong .wu-text,.theme-new-ui .morph-word.mw-wrong{animation:nu-shake .42s ease;}

/* ══════════════════════════════════════════════════════
   COMPACTACIÓN — reduce spacings para evitar scroll
   ══════════════════════════════════════════════════════ */

/* Topbar más estrecho */
.theme-new-ui .topbar{padding:0;}
.theme-new-ui .tb-inner{padding:6px 16px;}
.theme-new-ui .ppill{padding:2px 8px;font-size:.63rem;}
.theme-new-ui .phase-pills{margin-top:5px;gap:4px;}

/* Tarjeta de instrucción */
.theme-new-ui .inst-card{padding:11px 15px 10px;margin-bottom:10px;}
.theme-new-ui .inst-badge{margin-bottom:4px;font-size:.6rem;}
.theme-new-ui .inst-title{font-size:1.18rem;margin-bottom:4px;}
.theme-new-ui .inst-sub{font-size:.95rem;line-height:1.5;margin-bottom:0;}
.theme-new-ui .inst-tip{margin-top:8px;padding:8px 12px;font-size:.76rem;}

/* Sent-card */
.theme-new-ui .sent-card{padding:13px 15px;margin-bottom:9px;min-height:auto;}
.theme-new-ui .wu-text{font-size:1.35rem;padding:3px 9px;} /* C2: tamaño mayor en sint */

/* Pool */
.theme-new-ui .pool-triple{gap:8px;}
.theme-new-ui .pool-section{padding:9px 10px;}
.theme-new-ui .pool-section-hdr{margin-bottom:6px;}
.theme-new-ui .pool-section-title{font-size:.78rem;}
.theme-new-ui .pool-section-sub{font-size:.6rem;}
.theme-new-ui .tag{padding:5px 9px;min-width:50px;}
.theme-new-ui .tag-func-main{font-size:.88rem;}
.theme-new-ui .tag-func-tipo{font-size:.58rem;}

/* Bloques de función (drop zones) */
.theme-new-ui .fp-block{padding:9px 11px;}
.theme-new-ui .fp-word{font-size:.88rem;margin-bottom:5px;}

/* Morfología: instrucciones y botones visibles sin scroll */
.theme-new-ui .morph-topbar{padding:6px 16px;}
.theme-new-ui .ch-header{padding:10px 15px 8px;}
.theme-new-ui .ch-title{font-size:1.05rem;}
.theme-new-ui .ch-desc{font-size:.77rem;line-height:1.4;}
.theme-new-ui .ch-timer-bar{margin-bottom:7px;}
.theme-new-ui .morph-word{padding:4px 9px;font-size:.9rem;}

/* Resultado de fase */
.theme-new-ui #res-phase-card{padding:12px 15px;}

/* Márgenes generales en la pantalla de juego */
.theme-new-ui #screen-game .card{margin-bottom:10px;}

/* Responsive */
@media(max-width:640px){
  .theme-new-ui .inst-title{font-size:1rem;}
  .theme-new-ui .pool-triple{grid-template-columns:1fr;}
  .theme-new-ui .tag:hover:not(.tag-pre){transform:none;}
}

/* ══ SISTEMA DE PISTAS — C6 ══════════════════════════════════
   Estética neobrutalista lúdica con animaciones
   ═════════════════════════════════════════════════════════════ */
/* .btn-pista — estética alineada con las cards de instrucción de CP
   (.cp-instr-grande): gradiente navy-blanco, borde azul claro,
   borde izquierdo grueso navy (la firma visual), tipografía Fraunces.
   Paso 2.1, mayo 2026. Antes: neobrut amarillo/borde negro grueso. */
.btn-pista{
  width:100%;padding:13px 18px;border-radius:12px;font-weight:700;
  background:linear-gradient(135deg, #EFF4FB 0%, #FAFAFA 100%);
  border:1.5px solid #93C5FD;
  border-left:5px solid var(--cp-marca);
  color:var(--cp-marca);
  box-shadow:0 4px 14px rgba(15,35,66,.10);
  cursor:pointer;font-size:.94rem;
  font-family:'Fraunces','Lora','DM Sans',serif;
  letter-spacing:-.01em;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-pista:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(15,35,66,.16);
  background:linear-gradient(135deg, #DBEAFE 0%, #EFF4FB 100%);
}
.btn-pista:not(:disabled):active{
  transform:translateY(1px);box-shadow:0 2px 8px rgba(15,35,66,.10);
}
.btn-pista:disabled{
  opacity:.55;cursor:not-allowed;box-shadow:none;
  border-color:#E2DFD5;border-left-color:#94A3B8;
  background:#FAFAFC;color:#94A3B8;
}
.btn-pista-timer{
  font-size:.74rem;font-weight:700;
  background:var(--cp-marca);color:#DBEAFE;padding:2px 8px;border-radius:6px;
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;
}
/* ── Pista de Sint (C.1, mayo 2026) ───────────────────────────────────
   Rediseño coherente con la pista flotante de CP (.pf-card):
   misma paleta teal/navy, mismo chip "PISTA", elimina el amarillo
   ochroso y el borde neobrutalista negro 2010. Mantiene posición
   inline dentro del modal de feedback de Sint (la flotación solo
   tiene sentido cuando el contenido empuja al alumno fuera de vista,
   como en CP). Aquí estamos en un modal centrado, basta con elegancia. */
.fb-pista-box{
  margin-top: 14px;
  padding: 14px 16px 14px 18px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--cp-marca);
  text-align: left;
  font-family: 'DM Sans','Nunito',sans-serif;
  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: pista-drop-in .38s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.fb-pista-box b, .fb-pista-box strong{ color:#115E59; font-weight:800; }
.fb-pista-box em, .fb-pista-box i{ color:#475569; font-style:italic; }
.fb-pista-box::before{
  content: '💡 PISTA';
  position: absolute;
  top: -10px;
  left: 14px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: #CCFBF1;
  color: #115E59;
  border: 1px solid #5EEAD4;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(15, 118, 110, .12);
}
@keyframes pista-drop-in{
  from{ transform: translateY(-10px) scale(.94); opacity: 0; }
  to  { transform: none; opacity: 1; }
}
/* Feedback modal — estética premium tintada navy, sin neobrut
   (paso 2.2a, mayo 2026). Antes: borde negro 2.5px + sombra plana dura. */
.theme-new-ui .modal{
  border:1px solid var(--ui-border);
  box-shadow:
    0 2px 8px rgba(15,35,66,.06),
    0 18px 48px rgba(15,35,66,.22);
  border-radius:18px;
}
.theme-new-ui .fb-inner{padding:28px 26px;}
.theme-new-ui .fb-title.is-err{
  font-family:'Fraunces',serif;font-size:1.5rem;
  color:#991B1B;text-shadow:1px 1px 0 rgba(153,27,27,.2);
}
.theme-new-ui .fb-consejo{
  border:1.5px solid #BAE6FD;
  box-shadow:0 2px 8px rgba(8,145,178,.10);
  border-radius:11px;font-weight:500;
}
/* Teacher panel hint section */
.tp-hint-btn{
  padding:7px 14px;border-radius:10px;border:2px solid var(--border);
  background:var(--paper);font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.82rem;cursor:pointer;transition:all .15s;
}
.tp-hint-btn.active{background:var(--ui-navy);color:#fff;border-color:var(--ui-navy);
  box-shadow:0 2px 8px rgba(15,35,66,.20);}
.tp-hint-btn:not(.active):hover{border-color:#999;transform:translateY(-1px);}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 2 — SCREEN-GAME REDESIGN
   Premium educational SaaS · Navy + teal · Strong hierarchy · Focus mode
   Scoped to #screen-game so it never leaks to other screens.
   No JS or markup changes; pure CSS overrides via specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Screen frame ── */
body.theme-new-ui #screen-game{
  background: var(--ui-bg);
}

/* ── Topbar: estilo cp-topbar (navy compacto), paso 2.4 mayo 2026 ── */
body.theme-new-ui #screen-game .topbar{
  background: var(--ui-navy);
  border-bottom: 1px solid #0A1A33;
  box-shadow: 0 2px 0 rgba(0,0,0,.10);
  padding: 0;
}
body.theme-new-ui #screen-game .tb-inner{
  max-width: 980px;
  padding: 8px 20px 7px;
}
body.theme-new-ui #screen-game .tb-row1{
  gap: 12px; align-items: center;
}
body.theme-new-ui #screen-game .tb-name{
  font-family: var(--ui-font-ui);
  font-weight: 700; font-size: .82rem; color: #fff;
  max-width: 130px;
  letter-spacing: -.005em;
}
body.theme-new-ui #screen-game .tb-counter{
  font-family: var(--ui-font-mono);
  font-weight: 600; font-size: .76rem;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.12);
  padding: 3px 10px; border-radius: var(--ui-r-pill);
  letter-spacing: .02em;
}
body.theme-new-ui #screen-game .tb-timer{
  display: none;
  font-family: var(--ui-font-mono);
  font-size: .82rem; font-weight: 700;
  padding: 3px 10px; border-radius: var(--ui-r-pill);
  background: rgba(252,211,77,.20); color: #FDE68A;
}
body.theme-new-ui #screen-game .tb-timer.danger{
  background: rgba(254,164,170,.22); color: #FECACA;
}
body.theme-new-ui #screen-game .tb-badge{
  font-family: var(--ui-font-ui); font-weight: 700;
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--ui-r-pill);
  background: rgba(94,234,212,.20); color: #CCFBF1;
  border: 1px solid rgba(94,234,212,.35);
}
body.theme-new-ui #screen-game .tb-badge.tb-mode-exam{
  background: rgba(253,164,175,.20); color: #FECDD3;
  border-color: rgba(253,164,175,.40);
}

/* Slim progress bar sobre fondo navy */
body.theme-new-ui #screen-game .prog-bar{
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,.14);
  border-radius: var(--ui-r-pill);
  overflow: hidden;
  border: none;
  box-shadow: none;
}
body.theme-new-ui #screen-game .prog-fill{
  background: linear-gradient(90deg, #5EEAD4, #67E8F9);
  border-radius: var(--ui-r-pill);
  box-shadow: 0 0 10px rgba(94,234,212,.42);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}

/* Exit button — translúcido sobre navy */
body.theme-new-ui #screen-game #tb-exit-btn{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .76rem;
  padding: 5px 11px;
  border-radius: var(--ui-r-pill);
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-game #tb-exit-btn:hover{
  background: rgba(253,164,175,.18);
  border-color: rgba(253,164,175,.50);
  color: #FECDD3;
  transform: none;
}

/* ── Phase pills → segmented tabs ── */
body.theme-new-ui #screen-game .phase-pills{
  display: flex;
  gap: 3px;
  margin-top: 7px;
  padding: 3px;
  background: rgba(255,255,255,.10);
  border-radius: var(--ui-r);
  width: fit-content;
}
body.theme-new-ui #screen-game .ppill{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .76rem;
  padding: 5px 12px;
  border-radius: calc(var(--ui-r) - 4px);
  letter-spacing: -.005em;
  transition: all var(--ui-dur) var(--ui-ease);
  text-transform: none;
}
body.theme-new-ui #screen-game .ppill.pp-active{
  background: #fff;
  color: var(--ui-navy);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  animation: none;
}
body.theme-new-ui #screen-game .ppill.pp-done{
  background: transparent;
  color: #5EEAD4;
  font-weight: 600;
  border: none;
}
/* La marca ✓ de la fase hecha la pone el JS (renderPhasePills); aquí no, que salía doble */

/* ── Sentence dots → step indicator ── */
body.theme-new-ui #screen-game .sent-dots{
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 26px; padding: 4px 0;
}
body.theme-new-ui #screen-game .s-dot{
  width: 24px; height: 4px; border-radius: var(--ui-r-pill);
  background: var(--ui-navy-tint);
  border: none;
  cursor: pointer;
  transition: all var(--ui-dur) var(--ui-ease);
  font-size: 0; /* hide any text inside */
  padding: 0;
}
body.theme-new-ui #screen-game .s-dot.s-dot-current{
  background: var(--ui-teal);
  width: 38px;
  box-shadow: 0 0 10px rgba(15,118,110,.4);
}
body.theme-new-ui #screen-game .s-dot.s-dot-done{
  background: var(--ui-teal-dk);
}
body.theme-new-ui #screen-game .s-dot.s-dot-error{
  background: var(--ui-err);
}
body.theme-new-ui #screen-game .s-dot:hover:not(.s-dot-current){
  background: var(--ui-navy-soft);
  transform: scaleY(1.4);
}

/* ── Game wrap — generous spacing, focus on exercise ── */
body.theme-new-ui #screen-game .game-wrap{
  max-width: 880px;
  padding: 28px 22px 80px;
}

/* ── Instruction card — strong hierarchy ── */
body.theme-new-ui #screen-game .inst-card{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-teal);
  border-radius: var(--ui-r-lg);
  padding: 24px 28px 22px;
  margin-bottom: 24px;
  box-shadow: var(--ui-sh-1);
  position: relative;
  overflow: hidden;
}
/* Remove the giant decorative number outline */
body.theme-new-ui #screen-game .inst-card::after{
  display: none;
}
body.theme-new-ui #screen-game .inst-card::before{
  content: "";
  position: absolute; top: 0; right: 0;
  width: 120px; height: 100%;
  background: radial-gradient(circle at 100% 0%, var(--ui-teal-tint) 0%, transparent 60%);
  pointer-events: none;
}
body.theme-new-ui #screen-game .inst-title{
  font-family: var(--ui-font-display);
  font-size: 1.55rem; font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.018em;
  line-height: 1.15;
  margin-bottom: 6px;
}
body.theme-new-ui #screen-game .inst-sub{
  font-family: var(--ui-font-body);
  font-size: 1rem; font-weight: 400;
  color: var(--ui-muted);
  line-height: 1.5;
  letter-spacing: .005em;
}

/* Hint pill — clean inline tip with icon */
body.theme-new-ui #screen-game .inst-tip{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--ui-r);
  background: var(--ui-teal-tint);
  border: 1px solid rgba(15,118,110,.18);
  color: var(--ui-teal-dk);
  font-family: var(--ui-font-body);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: none;
  position: relative;
  max-width: 100%;
}
body.theme-new-ui #screen-game .inst-tip::before{
  content: "";
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  background-color: var(--ui-teal);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2z'/><line x1='10' y1='22' x2='14' y2='22'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a7 7 0 0 0-4 12.74V17a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.26A7 7 0 0 0 12 2z'/><line x1='10' y1='22' x2='14' y2='22'/></svg>") center / contain no-repeat;
}
body.theme-new-ui #screen-game .inst-tip:hover{
  transform: none;
  box-shadow: none;
  background: var(--ui-teal-tint);
}
/* Hide any leftover emoji in the tip text content (HTML may include 💡) */
body.theme-new-ui #screen-game .inst-tip{
  /* We can't strip HTML emojis purely with CSS, but the rules above
     visually integrate them by softening size. Authors can also use
     plain text without the emoji. */
}

/* ── Sentence card — calcada de .cp-interact-card de compuestas
   (paso 2.5, mayo 2026): fondo blanco, tipografía DM Sans sans-serif,
   sin líneas de cuaderno (folio-sheet anulado más abajo). ── */
body.theme-new-ui #screen-game .sent-card{
  background: var(--ui-surface);
  background-image: none;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-sh-2);
  padding: 24px 22px;
  margin-bottom: 18px;
  min-height: 110px;
  position: relative;
}
/* Anular completamente el aspecto cuaderno escolar (folio-sheet) */
body.theme-new-ui #screen-game .sent-card.folio-sheet{
  background: var(--ui-surface);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-sh-2);
  padding: 24px 22px;
  overflow: visible;
}
body.theme-new-ui #screen-game .sent-card.folio-sheet::before,
body.theme-new-ui #screen-game .sent-card.folio-sheet::after{
  content: none;
  display: none;
}

/* Words: tipografía DM Sans idéntica a .cp-interact-text */
body.theme-new-ui #screen-game .wu-text{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--ui-ink);
  padding: 4px 10px;
  border-radius: var(--ui-r-sm);
  border-bottom: 2px solid transparent;
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
  cursor: default;
  letter-spacing: -.005em;
}
body.theme-new-ui #screen-game .wu:not(.wu-verb):not(.wu-subj):not(.wu-picked):not(.wu-wrong) .wu-text{
  cursor: pointer;
}
body.theme-new-ui #screen-game .wu:not(.wu-verb):not(.wu-subj):not(.wu-picked):not(.wu-wrong) .wu-text:hover{
  background: var(--ui-cyan-tint);
  border-bottom-color: var(--ui-cyan);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(8,145,178,.18);
  color: var(--ui-navy);
}
body.theme-new-ui #screen-game .wu.wu-picked .wu-text{
  background: var(--ui-teal);
  color: #FFFFFF;
  border-bottom-color: var(--ui-teal-dk);
  box-shadow: 0 0 0 3px var(--ui-teal-tint), 0 4px 12px rgba(15,118,110,.32);
  transform: translateY(-1px) scale(1.04);
  font-weight: 600;
}
body.theme-new-ui #screen-game .wu.wu-wrong .wu-text{
  background: var(--ui-err-tint);
  color: var(--ui-err);
  border-bottom-color: var(--ui-err);
}

/* ── Practice filters bar — tone down ── */
body.theme-new-ui #screen-game #practice-filters-bar{
  background: rgba(255,255,255,.85);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: none;
}
body.theme-new-ui #screen-game .pf-toggle-attention{
  background: var(--ui-navy-tint) !important;
  border: 1px solid var(--ui-border-strong) !important;
  color: var(--ui-ink) !important;
  font-family: var(--ui-font-ui);
  font-weight: 600 !important;
  box-shadow: none !important;
  border-radius: var(--ui-r-pill) !important;
}
body.theme-new-ui #screen-game .pf-toggle-attention:hover{
  background: var(--ui-surface) !important;
  border-color: var(--ui-teal) !important;
  color: var(--ui-teal-dk) !important;
  box-shadow: none !important;
  transform: none;
}

/* ── Floating tools (sound + glosario) — discrete ── */
body.theme-new-ui .sound-btn,
body.theme-new-ui #screen-game ~ .sound-btn,
body.theme-new-ui .glos-fab{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-ink);
  box-shadow: var(--ui-sh-2);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  border-radius: var(--ui-r-pill);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .sound-btn:hover,
body.theme-new-ui .glos-fab:hover{
  border-color: var(--ui-teal);
  color: var(--ui-teal-dk);
  transform: translateY(-2px);
  box-shadow: var(--ui-sh-3);
}

/* ── Skip button — subtle, navy/cyan en lugar del amarillo cuaderno legacy ── */
body.theme-new-ui #screen-game #game-skip-wrap .btn{
  background: transparent;
  border: 1px solid rgba(15,35,66,.18);
  color: var(--ui-muted);
  font-family: var(--ui-font-ui);
  font-weight: 500;
  border-radius: var(--ui-r-pill);
  padding: 8px 22px;
  font-size: .82rem;
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-game #game-skip-wrap .btn:hover{
  border-color: var(--ui-cyan);
  color: var(--ui-cyan);
  background: var(--ui-cyan-tint);
  transform: none;
}

/* ── Oración sticky bajo la topbar (mayo 2026, revisada) ──
   Mantiene la oración siempre visible al hacer scroll. La variable
   --sint-topbar-h la actualiza Sint vía JS al renderizar cada fase
   (mide SOLO la topbar — no sumar filters-bar, que no es sticky).
   Cuando se engancha al topbar, las esquinas y el borde superior
   desaparecen para que visualmente forme una sola pieza con él.

   2026-05-28: STICKY DESACTIVADO a petición del usuario para evaluar
   la experiencia sin franja pegajosa. Para reactivarlo, descomentar
   las dos líneas marcadas más abajo. */
body.theme-new-ui #screen-game .ctx-strip.ctx-sticky{
  /* position: sticky; */                          /* sticky off — 2026-05-28 */
  /* top: var(--sint-topbar-h, 96px); */           /* sticky off — 2026-05-28 */
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--ui-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 14px 18px;
  margin: 0 auto 14px;
  max-width: 100%;
  box-shadow: 0 4px 14px rgba(15,35,66,.08), 0 1px 3px rgba(15,35,66,.05);
}
/* Centramos el contenido textual con ancho máximo razonable */
body.theme-new-ui #screen-game .ctx-strip.ctx-sticky .ctx-scroll,
body.theme-new-ui #screen-game .ctx-strip.ctx-sticky .ctx-label{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* ── B1: anotaciones del análisis dentro de la sticky ─────────────
   Cuando se resuelve un bloque en fase 3, lo coloreamos por función
   (no por sintagma) y mostramos la función DEBAJO. Etiquetas pequeñas
   pero claramente visibles. */
body.theme-new-ui #screen-game .ctx-block{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 6px;
  padding: 2px 4px 0;
  flex-shrink: 0;
  border-radius: 6px;
}
body.theme-new-ui #screen-game .ctx-block-resolved{
  /* Subrayado coloreado por la función — usa la border-color de tag-f-* */
  border-bottom: 3px solid currentColor;
  padding-bottom: 1px;
  background: rgba(0,0,0,0); /* placeholder, función pinta abajo */
}
body.theme-new-ui #screen-game .ctx-blk-badge-below{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 2px;
}
body.theme-new-ui #screen-game .ctx-block-pending .ctx-blk-badge-below{
  background: rgba(15,35,66,.05);
  color: rgba(15,35,66,.4);
  border: 1px dashed rgba(15,35,66,.18);
}
/* Cuando el bloque tiene una clase tag-f-* heredamos su color */
body.theme-new-ui #screen-game .ctx-block-resolved .ctx-blk-badge-below{
  background: rgba(255,255,255,.7);
}
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-cd     { color:#C2410C; border-bottom-color:#FB923C; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-ci     { color:#7E22CE; border-bottom-color:#C084FC; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-creg   { color:#065F46; border-bottom-color:#34D399; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-atr    { color:#BE185D; border-bottom-color:#F472B6; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-cpvo   { color:#9A3412; border-bottom-color:#FDBA74; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-cc     { color:#1E40AF; border-bottom-color:#93C5FD; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-cag    { color:#7F1D1D; border-bottom-color:#FCA5A5; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-pn     { color:#0F172A; border-bottom-color:#94A3B8; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-pv     { color:#166534; border-bottom-color:#86EFAC; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-modor2 { color:#374151; border-bottom-color:#9CA3AF; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-voc2   { color:#5B21B6; border-bottom-color:#A78BFA; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-imp    { color:#374151; border-bottom-color:#6B7280; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-f-pasref { color:#374151; border-bottom-color:#6B7280; }
body.theme-new-ui #screen-game .ctx-block-resolved.tag-sn       { color:#1E40AF; border-bottom-color:#60A5FA; } /* Sujeto */
body.theme-new-ui #screen-game .ctx-block-resolved.tag-sv       { color:#166534; border-bottom-color:#4ADE80; } /* NP */

/* Predicado implícito en fases 1-2: las palabras que no son sujeto se
   subrayan tenuemente para sugerir la zona del predicado. */
body.theme-new-ui #screen-game .ctx-pred .ctx-wt{
  border-bottom: 2px solid rgba(22,101,52,.25);
  padding-bottom: 1px;
}

/* ── Mobile adjustments ── */
@media (max-width: 540px){
  body.theme-new-ui #screen-game .ctx-strip.ctx-sticky{
    top: var(--sint-topbar-h, 84px);
    padding: 10px 12px;
  }
  body.theme-new-ui #screen-game .tb-inner{ padding: 10px 14px 8px; }
  body.theme-new-ui #screen-game .tb-row1{ gap: 8px; }
  body.theme-new-ui #screen-game .tb-name{ max-width: 80px; font-size: .76rem; }
  body.theme-new-ui #screen-game .tb-counter{ font-size: .72rem; padding: 3px 8px; }
  body.theme-new-ui #screen-game #tb-exit-btn{ padding: 5px 10px; font-size: .72rem; }
  body.theme-new-ui #screen-game .phase-pills{ margin-top: 10px; padding: 3px; gap: 2px; }
  body.theme-new-ui #screen-game .ppill{ padding: 5px 10px; font-size: .72rem; }
  body.theme-new-ui #screen-game .game-wrap{ padding: 20px 14px 70px; }
  body.theme-new-ui #screen-game .inst-card{ padding: 18px 18px 16px; }
  body.theme-new-ui #screen-game .inst-title{ font-size: 1.3rem; }
  body.theme-new-ui #screen-game .inst-sub{ font-size: .92rem; }
  body.theme-new-ui #screen-game .sent-card{ padding: 24px 18px; }
  body.theme-new-ui #screen-game .wu-text{ font-size: 1.18rem; padding: 3px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 3 + 4 — RESULTS, LOGIN, SUCCESS, MODALS, TAGS
   Premium educational SaaS · Navy + teal · Refined function colours
   Scoped via `body.theme-new-ui` so it never bleeds into the arcade theme.
   No JS or markup changes; pure CSS overrides via specificity.
   ════════════════════════════════════════════════════════════════════════ */

/* ═══ TAGS (function chips) — refined palette ═══════════════════════════ */
/* Goals: lower saturation, consistent radius/shadow, modern selected state.
   Each function keeps its colour identity (CD orange, CI purple, CC teal…),
   only the surface treatment changes. */
body.theme-new-ui .tag{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: var(--ui-r-sm);
  border: 1px solid;
  border-width: 1px 1px 1px 1px;
  font-family: var(--ui-font-ui);
  cursor: pointer;
  user-select: none;
  min-width: 62px;
  text-align: center;
  background: var(--ui-surface);
  box-shadow: 0 1px 2px rgba(15,35,66,.05);
  transition: transform var(--ui-dur) var(--ui-ease),
              box-shadow var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur-fast) ease;
}
body.theme-new-ui .tag:hover:not(.tag-pre){
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15,35,66,.10);
}
body.theme-new-ui .tag:active:not(.tag-pre){
  transform: translateY(0) scale(.98);
  box-shadow: 0 1px 2px rgba(15,35,66,.05);
}
body.theme-new-ui .tag.tag-sel{
  outline: none;
  border-width: 2px;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 0 3px rgba(15,118,110,.18), 0 6px 14px rgba(15,118,110,.22);
}
body.theme-new-ui .tag.tag-pre{
  opacity: .65;
  cursor: default;
  pointer-events: none;
  background: var(--ui-surface-2);
}
body.theme-new-ui .tag-func-main{
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.005em;
  white-space: nowrap;
}
body.theme-new-ui .tag-func-tipo{
  font-size: .58rem;
  font-weight: 600;
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
body.theme-new-ui .tag-pre-badge{
  font-size: .54rem;
  background: rgba(21,128,61,.14);
  color: var(--ui-ok);
  padding: 1px 6px;
  border-radius: var(--ui-r-pill);
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Per-function tag colour (refined: lower-saturation surface, vivid border,
   accessible text). Each pair: bg / border / text / shadow-accent. */
body.theme-new-ui .tag-f-pv   { background:#EEF2FF; border-color:#93B5FF; color:#1E3A8A; box-shadow: 0 1px 2px rgba(30,58,138,.08); }
body.theme-new-ui .tag-f-pv:hover  { box-shadow: 0 4px 10px rgba(30,58,138,.18); }
body.theme-new-ui .tag-f-pn   { background:#E6F5FB; border-color:#7DCDED; color:#0C4A6E; box-shadow: 0 1px 2px rgba(2,132,199,.08); }
body.theme-new-ui .tag-f-pn:hover  { box-shadow: 0 4px 10px rgba(2,132,199,.18); }
body.theme-new-ui .tag-f-cd   { background:#FFF1E6; border-color:#FBB97D; color:#7C2D12; }
body.theme-new-ui .tag-f-cd:hover { box-shadow: 0 4px 10px rgba(234,88,12,.18); }
body.theme-new-ui .tag-f-ci   { background:#F2EBFF; border-color:#B49AF0; color:#4C1D95; }
body.theme-new-ui .tag-f-ci:hover { box-shadow: 0 4px 10px rgba(124,58,237,.18); }
body.theme-new-ui .tag-f-cc   { background:#E5F4F1; border-color:#5BC9B6; color:#134E4A; }
body.theme-new-ui .tag-f-cc:hover { box-shadow: 0 4px 10px rgba(13,148,136,.18); }
body.theme-new-ui .tag-f-atr  { background:#FBEEF6; border-color:#E4A4D8; color:#701A75; }
body.theme-new-ui .tag-f-atr:hover { box-shadow: 0 4px 10px rgba(192,38,211,.18); }
body.theme-new-ui .tag-f-cpvo { background:#FEF6E1; border-color:#F6C758; color:#78350F; }
body.theme-new-ui .tag-f-cpvo:hover { box-shadow: 0 4px 10px rgba(217,119,6,.18); }
body.theme-new-ui .tag-f-cag  { background:#FCEDED; border-color:#F49E9E; color:#7F1D1D; }
body.theme-new-ui .tag-f-cag:hover { box-shadow: 0 4px 10px rgba(220,38,38,.18); }
body.theme-new-ui .tag-f-creg { background:#E8F6EC; border-color:#7FD89C; color:#14532D; }
body.theme-new-ui .tag-f-creg:hover { box-shadow: 0 4px 10px rgba(22,163,74,.18); }
body.theme-new-ui .tag-f-voc  { background:#FFF1E2; border-color:#FBC68C; color:#7C2D12; }
body.theme-new-ui .tag-f-voc:hover { box-shadow: 0 4px 10px rgba(234,88,12,.18); }
body.theme-new-ui .tag-f-mod  { background:#F4F5F7; border-color:#B0B6C0; color:#374151; }
body.theme-new-ui .tag-f-mod:hover { box-shadow: 0 4px 10px rgba(107,114,128,.18); }

/* Sintagma tags (SN, SP, S.Adj, etc.) */
/* Tipos de sintagma — paleta de alto contraste cromático (C.2, mayo 2026)
   El criterio NO es solo WCAG AA (todos los pares ya pasaban) sino la
   DISTINCIÓN VISUAL entre categorías: que el alumno reconozca de un
   vistazo SN ≠ SP ≠ SV. Bordes más saturados, mismo texto, más chroma.
   Fuera el amarillo de SAdv (preferencia del usuario): pasa a naranja
   terroso, más cercano al adverbio "circumstancial".
   Hue scaffold: SN 220° · SP 270° · SAdj 330° · SAdv 25° · SV 145°. */
body.theme-new-ui .tag-sn   { background:#DBEAFE; border-color:#60A5FA; color:#1E3A8A; font-weight:700; }
body.theme-new-ui .tag-sp   { background:#EDE9FE; border-color:#A78BFA; color:#4C1D95; font-weight:700; }
body.theme-new-ui .tag-sadj { background:#FCE7F3; border-color:#F472B6; color:#9D174D; font-weight:700; }
body.theme-new-ui .tag-sadv { background:#FFEDD5; border-color:#FB923C; color:#9A3412; font-weight:700; }
body.theme-new-ui .tag-sv   { background:#D1FAE5; border-color:#34D399; color:#065F46; font-weight:700; }
body.theme-new-ui .tag-n    { background:#EEF4FF; border-color:#A4C0F4; color:#1D4ED8; }
body.theme-new-ui .tag-mod-tag { background:#F8F1FE; border-color:#DEC4F4; color:#6B21A8; }
body.theme-new-ui .tag-cn   { background:#EAF6EE; border-color:#9DDCAE; color:#166534; }

/* Drop slots (huecos a rellenar) — soft and inviting */
body.theme-new-ui .ds, body.theme-new-ui .drop-slot{
  border: 1.5px dashed var(--ui-border-strong);
  background: var(--ui-surface-2);
  border-radius: var(--ui-r-sm);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .ds.ds-over, body.theme-new-ui .drop-slot.over{
  border-color: var(--ui-teal);
  border-style: solid;
  background: var(--ui-teal-tint);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
body.theme-new-ui .ds.ds-err-flash{
  animation: dsErrFlashUI .55s ease;
}
@keyframes dsErrFlashUI{
  0%{background:var(--ui-err-tint);border-color:var(--ui-err)}
  100%{background:var(--ui-surface-2);border-color:var(--ui-border-strong)}
}

/* Pool sections — scaffolding zones */
body.theme-new-ui .pool-section{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-top: 3px solid;
  border-radius: var(--ui-r);
  box-shadow: var(--ui-sh-1);
  padding: 14px 16px;
}
body.theme-new-ui .pool-section-arg{ border-top-color: #06B6D4; }
body.theme-new-ui .pool-section-adj{ border-top-color: var(--ui-teal); }
body.theme-new-ui .pool-section-mar{ border-top-color: #7C3AED; }
body.theme-new-ui .pool-section-title{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ui-ink);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
body.theme-new-ui .pool-section-sub{
  font-family: var(--ui-font-body);
  font-weight: 400;
  font-size: .86rem;
  color: var(--ui-muted);
  line-height: 1.45;
}

/* ═══ GLOSARIO modal — clean SaaS surface ════════════════════════════════ */
body.theme-new-ui .glos-bg{
  background: rgba(15,35,66,.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
body.theme-new-ui .glos-modal{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-xl);
  box-shadow: 0 30px 60px rgba(15,35,66,.32), 0 4px 14px rgba(15,35,66,.12);
  overflow: hidden;
}
body.theme-new-ui .glos-hdr{
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  padding: 22px 28px 16px;
}
body.theme-new-ui .glos-hdr h2{
  font-family: var(--ui-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.018em;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.theme-new-ui .glos-close{
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ui-navy-tint);
  border: 1px solid transparent;
  border-radius: var(--ui-r-pill);
  color: var(--ui-ink);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .glos-close:hover{
  background: var(--ui-err-tint);
  color: var(--ui-err);
  border-color: var(--ui-err);
}
body.theme-new-ui .glos-search{ margin-top: 14px; }
body.theme-new-ui .glos-search input{
  width: 100%;
  padding: 12px 18px 12px 46px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-r);
  background: var(--ui-surface);
  font-family: var(--ui-font-ui);
  font-size: .94rem;
  color: var(--ui-ink);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .glos-search input:focus{
  outline: none;
  border-color: var(--ui-teal);
  box-shadow: var(--ui-sh-focus);
}
body.theme-new-ui .glos-search::before{
  content: "";
  position: absolute;
  left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background-color: var(--ui-muted);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center / contain no-repeat;
  pointer-events: none;
  font-size: 0;
}
body.theme-new-ui .glos-body{ padding: 20px 28px 24px; background: var(--ui-bg); }
body.theme-new-ui .glos-section{ margin-bottom: 24px; }
body.theme-new-ui .glos-section-title{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--ui-r-pill);
  display: inline-block;
  margin-bottom: 12px;
  border: 1px solid transparent;
}
body.theme-new-ui .glos-section.cat-sint .glos-section-title{ background: var(--ui-err-tint); color: #9F1239; border-color: rgba(190,18,60,.20); }
body.theme-new-ui .glos-section.cat-cc   .glos-section-title{ background: #FEF6E1; color: #92400E; border-color: rgba(217,119,6,.22); }
body.theme-new-ui .glos-section.cat-marc .glos-section-title{ background: #F2EBFF; color: #5B21B6; border-color: rgba(124,58,237,.22); }
body.theme-new-ui .glos-section.cat-sntg .glos-section-title{ background: var(--ui-info-tint); color: var(--ui-info); border-color: rgba(30,64,175,.22); }
body.theme-new-ui .glos-section.cat-int  .glos-section-title{ background: var(--ui-ok-tint); color: var(--ui-ok); border-color: rgba(21,128,61,.22); }
body.theme-new-ui .glos-section.cat-sub  .glos-section-title{ background: var(--ui-cyan-tint); color: var(--ui-cyan); border-color: rgba(8,145,178,.22); }
body.theme-new-ui .glos-item{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  padding: 13px 16px;
  margin-bottom: 8px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
  transition: all var(--ui-dur) var(--ui-ease);
  align-items: start;
}
body.theme-new-ui .glos-item:hover{
  border-color: var(--ui-teal);
  box-shadow: 0 4px 14px rgba(15,118,110,.12);
  transform: translateY(-1px);
}
body.theme-new-ui .glos-abbr{
  font-family: var(--ui-font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ui-ink);
  background: var(--ui-navy-tint);
  padding: 6px 12px;
  border-radius: var(--ui-r-sm);
  border: none;
  white-space: nowrap;
  min-width: 60px;
  text-align: center;
  letter-spacing: -.005em;
}
body.theme-new-ui .glos-full{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ui-ink);
  margin-bottom: 4px;
  letter-spacing: -.005em;
}
body.theme-new-ui .glos-expl{
  font-family: var(--ui-font-body);
  font-size: .88rem;
  color: var(--ui-muted);
  line-height: 1.55;
}
body.theme-new-ui .glos-example{
  display: inline-block;
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--ui-bg);
  border-left: 3px solid var(--ui-teal);
  border-radius: 0 var(--ui-r-sm) var(--ui-r-sm) 0;
  font-family: var(--ui-font-body);
  font-style: italic;
  font-size: .84rem;
  color: var(--ui-ink-2);
}
body.theme-new-ui .glos-highlight{
  background: var(--ui-warn-tint);
  color: var(--ui-warn);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}

/* Floating glosario FAB — already styled in phase 2 but reinforce */
body.theme-new-ui .glos-fab{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-ink);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .82rem;
  border-radius: var(--ui-r-pill);
  padding: 10px 16px;
  box-shadow: var(--ui-sh-2);
}

/* ═══ SUCCESS / COMPLETED SENTENCE screen ══════════════════════════════ */
body.theme-new-ui .succ-bg{
  background: rgba(15,35,66,.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
body.theme-new-ui .succ-card{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-xl);
  box-shadow: 0 30px 60px rgba(15,35,66,.30), 0 4px 14px rgba(15,35,66,.10);
  padding: 36px 36px 28px;
  max-width: 540px;
  width: 100%;
  text-align: center;
  position: relative;
  overflow: visible;
}
body.theme-new-ui .succ-check{
  width: 64px;
  height: 64px;
  margin: -56px auto 16px;
  background: linear-gradient(135deg, var(--ui-teal) 0%, var(--ui-cyan) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(15,118,110,.42), 0 0 0 6px rgba(15,118,110,.12);
  animation: succCheckIn .55s var(--ui-ease-bounce);
}
body.theme-new-ui .succ-check svg{ width: 32px; height: 32px; }
@keyframes succCheckIn{
  from{ transform: scale(0) rotate(-90deg); opacity:0; }
  60%{ transform: scale(1.15) rotate(0); opacity:1; }
  to{ transform: scale(1) rotate(0); opacity:1; }
}
body.theme-new-ui .succ-title{
  font-family: var(--ui-font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
body.theme-new-ui .succ-oracion{
  font-family: var(--ui-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ui-ink-2);
  font-style: italic;
  line-height: 1.55;
  padding: 18px 22px;
  margin-bottom: 18px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-teal);
  border-radius: var(--ui-r);
  position: relative;
}
body.theme-new-ui .succ-oracion::before,
body.theme-new-ui .succ-oracion::after{ display: none; } /* drop the legacy quote glyphs */
body.theme-new-ui .succ-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin-bottom: 16px;
  background: var(--ui-teal-tint);
  border: 1px solid rgba(15,118,110,.22);
  border-radius: var(--ui-r-pill);
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ui-teal-dk);
  letter-spacing: .01em;
}
body.theme-new-ui .succ-funcs{
  margin-top: 4px;
  margin-bottom: 16px;
  padding: 14px 18px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r);
}
body.theme-new-ui .succ-funcs-label{
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .76rem;
  color: var(--ui-muted);
  letter-spacing: .04em;
  margin-bottom: 10px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
body.theme-new-ui .succ-funcs-list{
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
/* "Next sentence" CTA — primary teal */
body.theme-new-ui .succ-card #succ-btn,
body.theme-new-ui .succ-card .btn-success{
  background: var(--ui-teal) !important;
  color: #FFFFFF !important;
  border: none;
  border-radius: var(--ui-r);
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .96rem;
  padding: 14px 28px;
  margin-top: 10px;
  box-shadow: 0 6px 16px rgba(15,118,110,.28) !important;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .succ-card #succ-btn:hover,
body.theme-new-ui .succ-card .btn-success:hover{
  background: var(--ui-teal-dk) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,118,110,.36) !important;
  filter: none;
}

/* ═══ RESULTS screen ═══════════════════════════════════════════════════ */
body.theme-new-ui #screen-results{
  background: var(--ui-bg);
  padding: 36px 18px;
}
body.theme-new-ui #screen-results .res-inner{
  max-width: 600px;
}
body.theme-new-ui #screen-results .res-hdr{
  text-align: center;
  margin-bottom: 24px;
}
body.theme-new-ui #screen-results .res-hdr h1{
  font-family: var(--ui-font-display);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
body.theme-new-ui #screen-results .res-hdr p{
  font-family: var(--ui-font-body);
  color: var(--ui-muted);
  font-size: .9rem;
  margin-top: 6px;
  line-height: 1.5;
}
body.theme-new-ui #screen-results .card{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-lg);
  box-shadow: var(--ui-sh-2);
  padding: 24px;
  margin-bottom: 14px;
}
body.theme-new-ui #screen-results .gauge-score{
  font-family: var(--ui-font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.02em;
  line-height: 1;
}
body.theme-new-ui #screen-results .gauge-lbl{
  font-family: var(--ui-font-ui);
  font-weight: 600;
  color: var(--ui-muted);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* "Nueva sesión" / primary CTA on results */
body.theme-new-ui #screen-results .btn-primary{
  background: var(--ui-teal);
  color: #FFFFFF;
  border-radius: var(--ui-r);
  padding: 14px 28px;
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .96rem;
  box-shadow: 0 6px 16px rgba(15,118,110,.28);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-results .btn-primary:hover{
  background: var(--ui-teal-dk);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,118,110,.36);
  filter: none;
}

/* ═══ LOGIN screen ═════════════════════════════════════════════════════
   Versión normal (académica). El login del arcade (.login-arcade)
   conserva su synthwave y vive más abajo. Todo lo de aquí se excluye
   con :not(.login-arcade) para no pisarlo. */
body.theme-new-ui #screen-login:not(.login-arcade){
  background: var(--portada-bg);
  padding: 36px 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Decoración: dos círculos veladísimos en los flancos, igual que portada */
body.theme-new-ui #screen-login:not(.login-arcade)::before{
  content:'';
  position:absolute; inset:0;
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(220px 220px at -3% 42%, rgba(15,118,110,0.06), transparent 70%),
    radial-gradient(280px 280px at 103% 62%, rgba(16,42,67,0.05), transparent 70%);
}
/* Decoración: rejilla de puntos en esquinas opuestas */
body.theme-new-ui #screen-login:not(.login-arcade)::after{
  content:'';
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle, var(--portada-decor) 1px, transparent 1.5px) 24px 24px / 14px 14px no-repeat,
    radial-gradient(circle, var(--portada-decor) 1px, transparent 1.5px) calc(100% - 24px) calc(100% - 24px) / 14px 14px no-repeat;
  background-repeat:repeat, repeat;
  background-size:14px 14px, 14px 14px;
  background-position:24px 24px, calc(100% - 24px) calc(100% - 24px);
  -webkit-mask:
    linear-gradient(#000,#000) 24px 24px / 84px 84px no-repeat,
    linear-gradient(#000,#000) calc(100% - 108px) calc(100% - 108px) / 84px 84px no-repeat;
          mask:
    linear-gradient(#000,#000) 24px 24px / 84px 84px no-repeat,
    linear-gradient(#000,#000) calc(100% - 108px) calc(100% - 108px) / 84px 84px no-repeat;
}
/* Banner "Hola, [nombre]" — solo visible si hay perfil guardado en
   localStorage. El alumno puede limpiar con el boton de la derecha. */
body.theme-new-ui #screen-login:not(.login-arcade) .login-greeting{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: rgba(15,118,110,0.07);
  border: 1px solid rgba(15,118,110,0.18);
  border-radius: 12px;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .86rem;
  color: var(--portada-navy);
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-greeting .lg-text strong{
  color: var(--portada-teal);
  font-weight: 700;
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-greeting .lg-reset{
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--portada-muted);
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-greeting .lg-reset:hover{
  color: var(--portada-navy);
  background: rgba(15,42,67,0.06);
}

/* Aviso de cambio de cuaderno: el enlace acaba de mover este dispositivo
   al cuaderno de otro profesor. Ambar de "atencion", no rojo de error: no
   ha pasado nada malo, pero el alumno tiene que enterarse y poder salir. */
body.theme-new-ui #screen-login .login-cambio{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: rgba(180,120,20,0.09);
  border: 1px solid rgba(180,120,20,0.28);
  border-radius: 12px;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .86rem;
  color: var(--portada-navy);
}
body.theme-new-ui #screen-login .login-cambio .lcam-text strong{
  color: #92400E;
  font-weight: 700;
}
body.theme-new-ui #screen-login .login-cambio .lcam-sub{
  display: block;
  font-size: .78rem;
  color: var(--portada-muted);
  margin-top: 3px;
}
body.theme-new-ui #screen-login .login-cambio .lcam-btn{
  align-self: stretch;
  min-height: 44px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(180,120,20,0.35);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: #92400E;
  padding: 8px 12px;
  transition: background .2s, border-color .2s;
}
body.theme-new-ui #screen-login .login-cambio .lcam-btn:hover{
  background: #fff;
  border-color: rgba(180,120,20,0.55);
}

/* Distintivo del cuaderno de destino — solo visible cuando el dispositivo
   apunta al cuaderno de otro profesor (ver core/cuadernos.js). Sin scope
   :not(.login-arcade): en el login de Arcade tambien se envian datos, asi
   que el alumno tiene el mismo derecho a saber a donde van. */
body.theme-new-ui #screen-login .login-cuaderno{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 16px;
  background: rgba(157,75,94,0.07);
  border: 1px solid rgba(157,75,94,0.20);
  border-radius: 12px;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .86rem;
  color: var(--portada-navy);
}
body.theme-new-ui #screen-login .login-cuaderno .lc-icon{
  font-size: 1.05rem;
  line-height: 1.35;
}
body.theme-new-ui #screen-login .login-cuaderno .lc-text strong{
  color: var(--portada-vino);
  font-weight: 700;
}
body.theme-new-ui #screen-login .login-cuaderno .lc-sub{
  display: block;
  font-size: .76rem;
  color: var(--portada-muted);
  margin-top: 2px;
}

/* Puerta sin cuaderno (oct-2026): ocupa el sitio del formulario cuando
   el dispositivo no sabe a que profesor mandar los datos. Mismo vino que
   el distintivo, porque responde a la misma pregunta: ¿adonde van mis
   notas? */
body.theme-new-ui #screen-login .login-sin-cuaderno{
  padding: 20px 20px 16px;
  background: var(--portada-card, #fff);
  border: 1px solid rgba(157,75,94,0.22);
  border-radius: 16px;
  font-family: 'DM Sans','Nunito',sans-serif;
  color: var(--portada-navy);
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-titulo{
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--portada-vino);
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-texto{
  margin: 0 0 14px;
  font-size: .88rem;
  line-height: 1.45;
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-fila{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-fila .input{
  flex: 1 1 140px;
  min-width: 0;
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-libre{
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--portada-muted);
}
body.theme-new-ui #screen-login .login-sin-cuaderno .lsc-libre a{
  color: inherit;
  text-decoration: underline;
}

body.theme-new-ui #screen-login:not(.login-arcade) .login-hero{
  text-align: center;
  margin-bottom: 22px;
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-hero h1{
  font-family: 'Fraunces','Lora',serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--portada-navy);
  letter-spacing: -.02em;
  line-height: 1.05;
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-hero p{
  font-family: 'Lora',serif;
  color: var(--portada-muted);
  font-size: .94rem;
  margin-top: 8px;
}
body.theme-new-ui #screen-login:not(.login-arcade) .login-card{
  background: var(--portada-card);
  border: 1px solid var(--portada-border);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15,42,67,0.05),
    0 8px 28px rgba(15,42,67,0.09);
  padding: 28px 30px;
}
/* Labels del formulario */
body.theme-new-ui #screen-login:not(.login-arcade) label,
body.theme-new-ui #screen-login:not(.login-arcade) .form-label{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--portada-navy);
  letter-spacing: -.005em;
}
body.theme-new-ui #screen-login:not(.login-arcade) .input{
  background: #FFFFFF;
  border: 1px solid var(--portada-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .94rem;
  color: var(--portada-navy);
  transition: border-color .2s, box-shadow .2s;
}
body.theme-new-ui #screen-login:not(.login-arcade) .input:focus{
  outline: none;
  border-color: var(--portada-teal);
  box-shadow: 0 0 0 3px rgba(15,118,110,.18);
  background: #FFFFFF;
}
body.theme-new-ui #screen-login:not(.login-arcade) .input::placeholder{
  color: #94A3B8;
}
/* Mode/depth selection cards (sel-card style) */
body.theme-new-ui #screen-login:not(.login-arcade) .sel-card,
body.theme-new-ui #screen-login:not(.login-arcade) [class*="sel-"][role="button"]{
  background: #FFFFFF;
  border: 1px solid var(--portada-border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(15,42,67,0.04);
}
body.theme-new-ui #screen-login:not(.login-arcade) .sel-card:hover{
  border-color: var(--portada-teal);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15,42,67,0.09);
}
body.theme-new-ui #screen-login:not(.login-arcade) .sel-card.is-selected,
body.theme-new-ui #screen-login:not(.login-arcade) .sel-card.sel-active,
body.theme-new-ui #screen-login:not(.login-arcade) [class*="sel-"][aria-pressed="true"],
body.theme-new-ui #screen-login:not(.login-arcade) [class*="sel-"][aria-checked="true"]{
  border: 2px solid var(--portada-teal);
  background: rgba(15,118,110,0.06);
}
body.theme-new-ui #screen-login:not(.login-arcade) .sel-title{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-weight: 700;
  color: var(--portada-navy);
  font-size: .92rem;
}
body.theme-new-ui #screen-login:not(.login-arcade) .sel-desc{
  font-family: 'Lora',serif;
  color: var(--portada-muted);
  font-size: .82rem;
  margin-top: 2px;
  line-height: 1.45;
}
/* Separador armonizado con la paleta cálida */
body.theme-new-ui #screen-login:not(.login-arcade) hr.divider{
  border:none;
  border-top:1px solid var(--portada-border);
  margin:18px 0;
}
/* Botón primario: pill petróleo relleno, igual carácter que la portada.
   Usamos navy en lugar de teal para coherencia visual con los CTA
   "EMPEZAR" de las tarjetas. */
body.theme-new-ui #screen-login:not(.login-arcade) .btn-primary{
  background: var(--portada-navy) !important;
  color: #FFFFFF !important;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  box-shadow: 0 6px 16px rgba(15,42,67,.18) !important;
  transition: background .2s, transform .2s, box-shadow .2s;
}
body.theme-new-ui #screen-login:not(.login-arcade) .btn-primary:hover{
  background: #1E3A5F !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,42,67,.26) !important;
  filter: none;
}
/* Link "← Volver" */
body.theme-new-ui #screen-login:not(.login-arcade) a[onclick*="goPortada"],
body.theme-new-ui #screen-login:not(.login-arcade) button[onclick*="goPortada"],
body.theme-new-ui #screen-login:not(.login-arcade) button[onclick*="showPortada"]{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-weight: 600;
  font-size: .85rem;
  color: var(--portada-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color .2s;
}
body.theme-new-ui #screen-login:not(.login-arcade) a[onclick*="goPortada"]:hover,
body.theme-new-ui #screen-login:not(.login-arcade) button[onclick*="goPortada"]:hover,
body.theme-new-ui #screen-login:not(.login-arcade) button[onclick*="showPortada"]:hover{
  color: var(--portada-navy);
}

/* ═══ GENERIC MODALS (teacher pw, mission selector, exit confirm…) ════ */
body.theme-new-ui .overlay .ov-bg{
  background: rgba(15,35,66,.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
body.theme-new-ui .overlay .modal{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-xl);
  box-shadow: 0 30px 60px rgba(15,35,66,.32), 0 4px 14px rgba(15,35,66,.10);
  overflow: hidden;
}
body.theme-new-ui .overlay .modal-hdr{
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border);
  padding: 20px 24px;
}
body.theme-new-ui .overlay .modal-hdr h2{
  font-family: var(--ui-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.018em;
  margin: 0;
}
body.theme-new-ui .overlay .modal-body{
  padding: 22px 24px 24px;
  background: var(--ui-surface);
}
body.theme-new-ui .overlay .modal .input{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-r);
  padding: 12px 16px;
  font-family: var(--ui-font-ui);
  font-size: .94rem;
}
body.theme-new-ui .overlay .modal .input:focus{
  outline: none;
  border-color: var(--ui-teal);
  box-shadow: var(--ui-sh-focus);
}
body.theme-new-ui .overlay .modal .btn-primary{
  background: var(--ui-teal) !important;
  color: #FFFFFF !important;
  border-radius: var(--ui-r);
  padding: 12px 22px;
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .92rem;
  box-shadow: 0 4px 12px rgba(15,118,110,.24) !important;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .overlay .modal .btn-primary:hover{
  background: var(--ui-teal-dk) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15,118,110,.32) !important;
  filter: none;
}
body.theme-new-ui .overlay .modal .btn-ghost{
  background: transparent;
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-muted);
  border-radius: var(--ui-r);
  padding: 11px 22px;
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .92rem;
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .overlay .modal .btn-ghost:hover{
  border-color: var(--ui-ink);
  color: var(--ui-ink);
  background: var(--ui-navy-tint);
  transform: none;
}

/* Micro-lesson overlay — same SaaS modal language */
body.theme-new-ui #ml-overlay .modal{
  max-width: 540px;
}
body.theme-new-ui #ml-overlay .modal > div{
  padding: 22px 24px 24px !important;
}
body.theme-new-ui #ml-overlay h2#ml-title{
  font-family: var(--ui-font-display);
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.018em;
}
body.theme-new-ui #ml-overlay #ml-tag{
  color: #7C3AED !important;
  font-family: var(--ui-font-ui);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .68rem;
}
body.theme-new-ui #ml-overlay #ml-body{
  font-family: var(--ui-font-body);
  font-size: .92rem;
  color: var(--ui-ink-2);
  line-height: 1.65;
}

/* Mobile adjustments for phase 3+4 */
@media (max-width: 540px){
  body.theme-new-ui .succ-card{ padding: 30px 22px 22px; max-width: calc(100vw - 36px); }
  body.theme-new-ui .succ-check{ width: 56px; height: 56px; margin-top: -50px; }
  body.theme-new-ui .succ-check svg{ width: 28px; height: 28px; }
  body.theme-new-ui .succ-title{ font-size: 1.4rem; }
  body.theme-new-ui .succ-oracion{ font-size: .94rem; padding: 14px 16px; }
  body.theme-new-ui .glos-modal{ border-radius: var(--ui-r-lg); }
  body.theme-new-ui .glos-hdr{ padding: 18px 20px 14px; }
  body.theme-new-ui .glos-hdr h2{ font-size: 1.18rem; }
  body.theme-new-ui .glos-body{ padding: 16px 20px; }
  body.theme-new-ui .glos-close{ top: 14px; right: 14px; }
  body.theme-new-ui #screen-login .login-card{ padding: 22px 20px; }
  body.theme-new-ui #screen-login .login-hero h1{ font-size: 1.9rem; }
  body.theme-new-ui #screen-results .res-hdr h1{ font-size: 1.55rem; }
  body.theme-new-ui .tag{ padding: 7px 12px; min-width: 56px; }
  body.theme-new-ui .tag-func-main{ font-size: .85rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 5 — ACADEMIC MODULE SCREENS (morph, sintagmas, maestro)
   Pure CSS, scoped to each #screen-*. No JS, no markup. Designed to be
   safe to remove without affecting any other behaviour.

   Each module keeps its identity colour:
   • Morfología clásica → teal/cyan (academic)
   • Sintagmas          → magenta/purple (existing, kept)
   • Maestro            → teal-green (lush academic)
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Common: a soft cream backdrop on every academic screen ──────────── */
body.theme-new-ui #screen-morph,
body.theme-new-ui #screen-sintagmas,
body.theme-new-ui #screen-maestro{
  background: var(--ui-bg);
}

/* ═══ MORFOLOGÍA (modo clásico) ═══════════════════════════════════════ */
body.theme-new-ui #screen-morph .morph-topbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 1px 0 rgba(15,35,66,.04);
  padding: 12px 22px 11px;
  gap: 12px;
}
body.theme-new-ui #screen-morph .morph-title{
  font-family: var(--ui-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ui-ink);
  letter-spacing: -.012em;
}
body.theme-new-ui #screen-morph .morph-level-badge{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-teal-tint);
  color: var(--ui-teal-dk);
  border: 1px solid rgba(15,118,110,.20);
}
/* Different tint per level — keep semantic identity */
body.theme-new-ui #screen-morph .morph-level-badge.ml-2{
  background: var(--ui-cyan-tint); color: var(--ui-cyan); border-color: rgba(8,145,178,.22);
}
body.theme-new-ui #screen-morph .morph-level-badge.ml-3{
  background: var(--ui-magenta-tint); color: var(--ui-magenta); border-color: rgba(190,24,93,.22);
}
body.theme-new-ui #screen-morph #morph-progress-lbl{
  font-family: var(--ui-font-mono);
  font-weight: 600;
  font-size: .76rem;
  color: var(--ui-muted);
  background: var(--ui-navy-tint);
  padding: 4px 10px;
  border-radius: var(--ui-r-pill);
}
body.theme-new-ui #screen-morph .morph-topbar > button{
  background: transparent;
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-muted);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .78rem;
  padding: 6px 11px;
  border-radius: var(--ui-r-pill);
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-morph .morph-topbar > button:hover{
  background: var(--ui-err-tint);
  border-color: var(--ui-err);
  color: var(--ui-err);
  transform: none;
}

/* Sentence wrap surface */
body.theme-new-ui #screen-morph .morph-wrap{
  max-width: 880px;
  padding: 28px 22px 80px;
}

/* Hint bottom sheet — clean SaaS surface */
body.theme-new-ui #screen-morph .morph-hint{
  background: var(--ui-surface);
  border-top: 1px solid var(--ui-border);
  border-radius: var(--ui-r-xl) var(--ui-r-xl) 0 0;
  box-shadow: 0 -10px 32px rgba(15,35,66,.18), 0 -1px 0 var(--ui-border);
  padding: 22px 26px 32px;
}
body.theme-new-ui #screen-morph .morph-hint-lbl{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ui-teal-dk);
  margin-bottom: 8px;
}
body.theme-new-ui #screen-morph .morph-hint-text{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ui-ink-2);
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-teal);
  border-radius: var(--ui-r);
  padding: 14px 16px;
  margin-bottom: 16px;
}
body.theme-new-ui #screen-morph .morph-hint p{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ui-ink);
  margin-bottom: 12px;
}
body.theme-new-ui #screen-morph .cat-grid{
  gap: 6px;
  margin-bottom: 14px;
}
body.theme-new-ui #screen-morph .cat-btn{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-ink);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .85rem;
  padding: 9px 16px;
  border-radius: var(--ui-r-pill);
  box-shadow: 0 1px 2px rgba(15,35,66,.05);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-morph .cat-btn:hover{
  border-color: var(--ui-ink);
  transform: translateY(-1px);
  box-shadow: var(--ui-sh-1);
}
body.theme-new-ui #screen-morph .cat-btn.cb-sel{
  background: var(--ui-ink);
  border-color: var(--ui-ink);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15,35,66,.22);
  transform: translateY(-1px);
}
body.theme-new-ui #screen-morph .morph-hint .btn{
  background: transparent;
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-muted);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .82rem;
  padding: 8px 16px;
  border-radius: var(--ui-r-pill);
  box-shadow: none;
}
body.theme-new-ui #screen-morph .morph-hint .btn:hover{
  border-color: var(--ui-ink);
  color: var(--ui-ink);
  background: var(--ui-navy-tint);
  transform: none;
}

/* ═══ SINTAGMAS — keep purple identity but refine the chrome ══════════ */
body.theme-new-ui #screen-sintagmas .sint-topbar{
  background: linear-gradient(135deg, #6D28D9 0%, #7C3AED 100%);
  color: #FFFFFF;
  padding: 12px 22px 11px;
  border-bottom: none;
  box-shadow: 0 4px 14px rgba(124,58,237,.20);
}
body.theme-new-ui #screen-sintagmas .sint-topbar > span:first-of-type{
  font-size: 1.15rem;
}
body.theme-new-ui #screen-sintagmas .sint-topbar > span:nth-of-type(2){
  font-family: var(--ui-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.012em;
}
body.theme-new-ui #screen-sintagmas #sint-counter{
  font-family: var(--ui-font-mono);
  font-weight: 600;
  font-size: .76rem;
  background: rgba(255,255,255,.16);
  padding: 4px 10px;
  border-radius: var(--ui-r-pill);
  opacity: 1;
}
body.theme-new-ui #screen-sintagmas .sint-topbar > button{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #FFFFFF;
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .78rem;
  padding: 6px 11px;
  border-radius: var(--ui-r-pill);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-sintagmas .sint-topbar > button:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
  transform: none;
}
body.theme-new-ui #screen-sintagmas .sint-wrap{
  max-width: 880px;
  padding: 28px 22px 80px;
}

/* ═══ MAESTRO (Análisis Morfológico nuevo) ════════════════════════════ */
body.theme-new-ui #screen-maestro .maestro-topbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 1px 0 rgba(15,35,66,.04);
  padding: 12px 22px 10px;
  gap: 14px;
}
body.theme-new-ui #screen-maestro .maestro-topbar > button{
  background: transparent;
  border: 1px solid var(--ui-border-strong);
  color: var(--ui-muted);
  font-family: var(--ui-font-ui);
  font-weight: 600;
  font-size: .78rem;
  padding: 6px 11px;
  border-radius: var(--ui-r-pill);
  box-shadow: none;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-maestro .maestro-topbar > button:hover{
  background: var(--ui-err-tint);
  border-color: var(--ui-err);
  color: var(--ui-err);
  transform: none;
}
body.theme-new-ui #screen-maestro .maestro-prog-bar{
  background: var(--ui-navy-tint);
  border-radius: var(--ui-r-pill);
  height: 6px;
}
body.theme-new-ui #screen-maestro .maestro-prog-fill{
  background: linear-gradient(90deg, var(--ui-teal), var(--ui-cyan));
  border-radius: var(--ui-r-pill);
  box-shadow: 0 0 12px rgba(15,118,110,.28);
  transition: width .6s var(--ui-ease);
}
body.theme-new-ui #screen-maestro .maestro-counter{
  font-family: var(--ui-font-mono);
  font-weight: 600;
  font-size: .76rem;
  color: var(--ui-muted);
  background: var(--ui-navy-tint);
  padding: 4px 10px;
  border-radius: var(--ui-r-pill);
  white-space: nowrap;
}
body.theme-new-ui #screen-maestro .maestro-score-badge{
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .02em;
  padding: 4px 11px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-teal-tint);
  color: var(--ui-teal-dk);
  border: 1px solid rgba(15,118,110,.20);
}
/* Hit / miss / trap states for tokens — refine subtly without changing semantics */
body.theme-new-ui #screen-maestro .mm-token.mm-pending{
  border-radius: var(--ui-r-sm);
  padding: 2px 6px;
  transition: all var(--ui-dur) var(--ui-ease);
  cursor: pointer;
}
body.theme-new-ui #screen-maestro .mm-token.mm-pending:hover{
  background: var(--ui-cyan-tint);
  color: var(--ui-navy);
}
/* Cada signo, en un bloque con su palabra (agruparPuntuacion_ en
   maestro/index.js): sin hueco entre ellos y sin empezar línea. La palabra
   pendiente o activa pierde el relleno por el lado del signo (con un margen
   negativo, su fondo taparía el signo). */
body.theme-new-ui #screen-maestro .mm-grupo{ white-space: nowrap; }
body.theme-new-ui #screen-maestro .mm-punt{ pointer-events: none; }
body.theme-new-ui #screen-maestro .mm-token:has(+ .mm-punt-cierra){ padding-right: 1px !important; }
body.theme-new-ui #screen-maestro .mm-punt-abre + .mm-token{ padding-left: 1px !important; }
/* El aviso de acierto (showCorrectFlash, sint/index.js) va abajo: arriba
   tapaba el título del texto */
body:has(#screen-maestro.active) #correct-flash{ top: auto !important; bottom: 28px; }
/* En el móvil, el botón de Progreso tapaba el panel de análisis (como en el
   selector, sigue en la portada) */
@media (max-width: 600px){
  body:has(#screen-maestro.active) #dash-fab{ display: none !important; }
}
/* Skip-text link — discrete */
body.theme-new-ui #screen-maestro #mm-skip-text{
  font-family: var(--ui-font-ui);
  font-weight: 500;
  color: var(--ui-muted);
  background: transparent;
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-r-pill);
  padding: 6px 18px;
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-maestro #mm-skip-text:hover{
  border-style: solid;
  border-color: var(--ui-warn);
  color: var(--ui-warn);
  background: var(--ui-warn-tint);
}

/* ─── Análisis de textos (propuesta de oct-2026, pasos 2 y 3) ────────────
   Paso 2, maqueta: una columna en el móvil; desde 900 px, el texto a la
   izquierda y el panel a la derecha, quieto al bajar. Paso 3, la piel de la
   portada: crema, tarjetas blancas, marino, Fraunces, Lora y DM Sans.
   Todo solo cuando hay texto corrido (#mm-text-flow) o una forma verbal
   (.fv-oracion, «Análisis del verbo», que reutiliza esta maqueta); los resultados
   usan los mismos contenedores y botones (.casc-btn,
   .maestro-confirm-btn) y se quedan como estaban. */
body.theme-new-ui #screen-maestro{
  --mm-navy: var(--portada-navy, #102A43);
  --mm-navy2: #1E3A5F;
  --mm-line: #E6E0D2;
  --mm-line2: #EFEAE0;
  --mm-tint: #EAEEF5;
  --mm-muted: #5C6B7E;
  --mm-muted2: #8A96A6;
  --mm-sh: 0 1px 2px rgba(15,42,67,.05), 0 8px 22px rgba(15,42,67,.07);
}
body.theme-new-ui #screen-maestro .mm-layout{
  max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; width: 100%;
}
body.theme-new-ui #screen-maestro .mm-skip-row{ text-align: center; margin-top: 14px; }
body.theme-new-ui #screen-maestro .mm-paper{ margin-bottom: 0; padding: 28px 40px 24px; }
@media (max-width: 600px){
  body.theme-new-ui #screen-maestro .mm-paper{ padding: 22px 20px 18px; }
}

/* Fondo y barra superior */
body.theme-new-ui #screen-maestro:has(#mm-text-flow, .fv-oracion){ background: var(--portada-bg, #F5F1E8); }
body.theme-new-ui #screen-maestro:has(#mm-text-flow, .fv-oracion) .maestro-topbar{
  background: rgba(255,255,255,.92); border-bottom-color: var(--mm-line);
}
body.theme-new-ui #screen-maestro:has(#mm-text-flow, .fv-oracion) .maestro-prog-fill{ background: var(--mm-navy); }

/* El texto: papel liso, sin rayas ni margen rojo */
body.theme-new-ui #screen-maestro .mm-texto-titulo{
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 8px; font-family: 'Nunito', sans-serif;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-texto-titulo{
  font-family: var(--ui-font-display); font-size: 1.12rem; font-weight: 600;
  text-transform: none; letter-spacing: -.01em; line-height: 1.3;
  color: var(--mm-navy); margin: 2px 4px 10px;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-paper{
  background: #fff; border: 1px solid var(--mm-line); border-radius: 14px;
  box-shadow: var(--mm-sh); max-width: none;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-paper::before,
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-paper::after{ display: none; }
body.theme-new-ui #screen-maestro .mm-flujo{
  font-family: 'Lora', serif; font-size: 1.15rem; line-height: 2.1; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .mm-flujo .mm-token{ border-radius: 5px; }
body.theme-new-ui #screen-maestro .mm-flujo .mm-token.mm-pending{ padding: 2px 3px; }
body.theme-new-ui #screen-maestro .mm-flujo .mm-token.mm-pending:hover{ background: var(--mm-tint); color: var(--mm-navy); }
body.theme-new-ui #screen-maestro .mm-flujo .mm-token.mm-active{
  background: var(--mm-navy); color: #fff; padding: 2px 5px; cursor: default; font-weight: 600;
}
body.theme-new-ui #screen-maestro .mm-flujo .mm-token.mm-done{
  color: var(--c); border-bottom: 2px solid var(--c); border-radius: 0; cursor: default;
}
body.theme-new-ui #screen-maestro .mm-pie-texto{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mm-line2);
  font-family: var(--ui-font-ui); font-size: .78rem; color: var(--mm-muted);
}
body.theme-new-ui #screen-maestro .mm-pie-texto b{ color: var(--mm-navy); }

@media (min-width: 900px){
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion){
    max-width: 1180px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    grid-template-areas: "texto panel" "saltar panel";
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #mm-paper-wrap{ grid-area: texto; min-width: 0; }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-skip-row{ grid-area: saltar; }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #mm-cascade-wrap{
    grid-area: panel;
    position: sticky; top: 72px;
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-paper{ padding: 24px 30px 16px; }
  /* Sin palabra elegida, el hueco del panel dice qué hacer */
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #mm-cascade-wrap:empty::before{
    content: "Elige una palabra del texto y analízala aquí, sin perderla de vista.";
    display: block; padding: 34px 24px; text-align: center;
    border: 1.5px dashed #D9D1BF; border-radius: 14px;
    color: var(--mm-muted); font-size: .85rem; line-height: 1.5;
  }
  /* El panel cabe en la pantalla; si no, baja por dentro y «Confirmar»
     queda pegado abajo */
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel{
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  /* El botón de Progreso caería encima de «Confirmar» */
  body:has(#screen-maestro.active :is(#mm-text-flow, .fv-oracion)) #dash-fab{ display: none !important; }
}

/* El panel */
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel{
  margin-top: 0; padding: 16px 16px 0;
  background: #fff; border: 1px solid var(--mm-line); border-radius: 14px;
  box-shadow: var(--mm-sh); font-family: var(--ui-font-ui); color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel.casc-fb{ padding-bottom: 18px; }
@media (max-width: 899px){
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel{ margin-top: 16px; }
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-step{ margin-bottom: 12px; }
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-label{
  font-family: var(--ui-font-ui); font-weight: 700; color: var(--mm-muted); margin-bottom: 7px;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-label span{ background: var(--mm-navy); }
/* Opciones: pastillas blancas; la elegida, en marino */
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .casc-btn{
  min-height: 36px; padding: 6px 12px; border: 1px solid var(--mm-line); background: #fff;
  font-family: var(--ui-font-ui); font-size: .78rem; font-weight: 600; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .casc-btn:hover{
  border-color: var(--mm-navy2); background: #fff; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .casc-btn.cs-sel{
  background: var(--mm-navy); border-color: var(--mm-navy); color: #fff;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #casc-cat-opts{ gap: 6px !important; }
/* Pie con «Confirmar», pegado abajo del panel */
body.theme-new-ui #screen-maestro .casc-pie{
  position: sticky; bottom: 0; z-index: 2;
  margin: 12px -16px 0; padding: 12px 16px 16px;
  background: #fff; border-top: 1px solid var(--mm-line2);
}
body.theme-new-ui #screen-maestro .casc-pie .maestro-confirm-btn{ margin-top: 0; }
/* «Siguiente palabra →» bajo la corrección: sobre su mismo fondo de color */
body.theme-new-ui #screen-maestro .casc-pie.casc-pie-sig{
  position: static; margin: 12px 0 0; padding: 0; background: none; border-top: 0;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .maestro-confirm-btn{
  border-radius: 99px; padding: 11px; background: var(--mm-navy); box-shadow: none;
  font-family: var(--ui-font-ui); font-weight: 700;
}
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .maestro-confirm-btn:hover{ background: var(--mm-navy2); }
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .maestro-confirm-btn:disabled{
  background: var(--mm-line); color: var(--mm-muted2); transform: none;
}

/* Cabecera única del panel: la palabra y su contexto */
body.theme-new-ui #screen-maestro .casc-cab{
  margin: 0 -16px 12px; padding: 0 16px 12px;
  border-bottom: 1px solid var(--mm-line2);
  scroll-margin-top: 80px; /* en el móvil, selectToken la sube bajo la barra */
}
body.theme-new-ui #screen-maestro .casc-cab small{
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mm-muted2);
}
body.theme-new-ui #screen-maestro .casc-cab-pal{
  font-family: var(--ui-font-display); font-size: 1.5rem; font-weight: 600;
  line-height: 1.15; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .casc-cab-ctx{
  font-family: 'Lora', serif; font-size: .8rem; color: var(--mm-muted); margin-top: 2px;
}
body.theme-new-ui #screen-maestro .casc-cab-ctx b{ color: var(--mm-navy); }
body.theme-new-ui #screen-maestro .casc-pista{
  font-size: .76rem; color: var(--mm-muted); margin-bottom: 10px; font-style: italic;
  padding: 7px 10px; background: #FBF8F1; border: 1px solid var(--mm-line2); border-radius: 9px;
}
/* Paso 1: las familias en dos columnas, con su color solo en el filete */
body.theme-new-ui #screen-maestro .casc-fams{
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
body.theme-new-ui #screen-maestro .casc-fams[hidden]{ display: none; }
body.theme-new-ui #screen-maestro .casc-group-row{
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--mm-line); border-left: 4px solid var(--c);
  border-radius: 9px; background: #fff; cursor: pointer;
  font-family: var(--ui-font-ui); transition: background var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #screen-maestro .casc-group-row:hover{ background: #FBFAF7; }
body.theme-new-ui #screen-maestro .casc-group-row.is-ancha{ grid-column: 1 / -1; }
body.theme-new-ui #screen-maestro .casc-fam-nombre{
  font-weight: 700; font-size: .8rem; line-height: 1.2; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .casc-fam-cats{
  font-size: .7rem; line-height: 1.25; color: var(--mm-muted);
}
/* Familia ya elegida: una sola línea */
body.theme-new-ui #screen-maestro .casc-fam-resumen{
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--mm-line); border-left: 4px solid var(--c);
  border-radius: 9px; padding: 4px 10px; background: #FBFAF7;
  font-size: .8rem; font-weight: 700; color: var(--mm-navy);
}
body.theme-new-ui #screen-maestro .casc-fam-resumen[hidden]{ display: none; }
body.theme-new-ui #screen-maestro .casc-fam-resumen button{
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 600;
  color: var(--mm-muted); text-decoration: underline; min-height: 32px;
}
/* Paso 3: una fila por rasgo, la etiqueta a la izquierda */
body.theme-new-ui #screen-maestro .casc-rasgos{ border-top: 1px solid var(--mm-line2); padding-top: 10px; }
body.theme-new-ui #screen-maestro .casc-fila{
  display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center;
  gap: 8px; padding: 3px 0;
}
body.theme-new-ui #screen-maestro .casc-fila > b{
  font-size: .7rem; font-weight: 700; line-height: 1.2; color: var(--mm-muted);
  hyphens: auto;
}
body.theme-new-ui #screen-maestro .casc-fila.is-larga{ grid-template-columns: minmax(0,1fr); gap: 5px; }
body.theme-new-ui #screen-maestro .casc-seg{ display: flex; flex-wrap: wrap; gap: 4px; }
body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .casc-seg .casc-btn{
  min-height: 30px; padding: 3px 8px; font-size: .72rem;
}
@media (max-width: 600px){
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .casc-seg .casc-btn{ min-height: 38px; padding: 5px 9px; }
}
/* Corrección de cada palabra (showTokenFeedback) */
body.theme-new-ui #screen-maestro #mm-cascade-wrap .casc-fb.is-ok{ border-color: #A7F3D0; background: #F0FDF4; }
body.theme-new-ui #screen-maestro #mm-cascade-wrap .casc-fb.is-medio{ border-color: #FCD34D; background: #FFFBEB; }
body.theme-new-ui #screen-maestro #mm-cascade-wrap .casc-fb.is-mal{ border-color: #FCA5A5; background: #FEF2F2; }
body.theme-new-ui #screen-maestro .casc-fb-cab{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
body.theme-new-ui #screen-maestro .casc-fb-icono{ font-size: 1.6rem; }
body.theme-new-ui #screen-maestro .casc-fb-cat{ font-weight: 800; font-size: .95rem; }
body.theme-new-ui #screen-maestro .casc-fb.is-ok .casc-fb-cat{ color: #059669; }
body.theme-new-ui #screen-maestro .casc-fb.is-medio .casc-fb-cat{ color: #D97706; }
body.theme-new-ui #screen-maestro .casc-fb.is-mal .casc-fb-cat{ color: #DC2626; }
body.theme-new-ui #screen-maestro .casc-fb-puntos{ font-size: .75rem; color: var(--muted); }
body.theme-new-ui #screen-maestro .casc-fb-fila{
  display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 8px;
  font-size: .8rem; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.05);
}
body.theme-new-ui #screen-maestro .casc-fb-fila > b{ font-size: .74rem; color: var(--mm-muted); font-weight: 700; }
body.theme-new-ui #screen-maestro .casc-fb-fila .is-ok{ color: #059669; font-weight: 600; }
body.theme-new-ui #screen-maestro .casc-fb-fila .is-mal{ color: #DC2626; font-weight: 600; }
body.theme-new-ui #screen-maestro .casc-fb-fila em{ font-style: normal; font-weight: 400; color: var(--mm-muted); }
body.theme-new-ui #screen-maestro .casc-fb-pau{
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.12);
  font-size: .78rem; color: var(--ink2);
}

/* Paso 4: en el móvil (hasta 760 px) el panel es una hoja fija abajo, con
   la cabecera y «Confirmar» siempre a la vista y el resto desplazándose por
   dentro. Sin palabra elegida, la hoja es una línea. selectToken sube el
   texto para que la palabra quede por encima de la hoja. */
@media (max-width: 760px){
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion){
    padding: 12px 12px calc(58vh + 24px);
    padding-bottom: calc(58dvh + 24px);
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion):not(:has(.cascade-panel)){
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-paper{ padding: 16px 16px 12px; }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .mm-flujo{ font-size: 1.08rem; line-height: 2; }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #mm-cascade-wrap{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel{
    margin: 0; max-height: 58vh; max-height: 58dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0; border-bottom: 0;
    box-shadow: 0 -6px 24px rgba(15,42,67,.14);
    animation: none;
  }
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) .cascade-panel.casc-fb{
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  /* Cabecera fija arriba de la hoja, en una línea y sin el contexto */
  body.theme-new-ui #screen-maestro .casc-cab{
    position: sticky; top: -16px; z-index: 3; background: #fff;
    display: flex; align-items: baseline; gap: 10px;
    margin-top: -16px; padding-top: 12px; padding-bottom: 8px;
  }
  body.theme-new-ui #screen-maestro .casc-cab-pal{ font-size: 1.25rem; }
  body.theme-new-ui #screen-maestro .casc-cab-ctx{ display: none; }
  body.theme-new-ui #screen-maestro .casc-pie{ padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* Sin palabra elegida: una línea */
  body.theme-new-ui #screen-maestro .mm-layout:has(#mm-text-flow, .fv-oracion) #mm-cascade-wrap:empty::before{
    content: "Pulsa una palabra del texto para analizarla";
    display: block; text-align: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    background: #fff; border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 24px rgba(15,42,67,.10);
    color: var(--mm-muted); font-size: .85rem;
  }
  /* Ni «Progreso» ni el aviso de acierto encima de la hoja */
  body:has(#screen-maestro.active :is(#mm-text-flow, .fv-oracion)) #dash-fab{ display: none !important; }
  body:has(#screen-maestro.active :is(#mm-text-flow, .fv-oracion)) #correct-flash{ top: 64px !important; bottom: auto; }
}

/* Análisis del verbo (nov-2026): comparte la maqueta de arriba (:has(.fv-oracion)).
   La forma verbal va en marino, como la palabra activa del texto; el paso de
   señalar las partes de la perífrasis toma la piel del panel. */
body.theme-new-ui #screen-maestro .mm-flujo .fv-forma{
  background: var(--mm-navy); color: #fff; padding: 2px 6px; border-radius: 5px;
  border-bottom: 0; font-weight: 600;
}
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-parte{
  background: #FBFAF7; border: 1px solid var(--mm-line); border-radius: 10px; padding: 8px;
}
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-parte-palabra{
  font-family: 'Lora', serif; color: var(--mm-navy);
}
/* Una fila por palabra: la palabra a la izquierda y sus tres etiquetas a la derecha */
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-partes{ flex-direction: column; gap: 6px; }
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-parte{
  flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
}
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-parte-opts{ flex-wrap: nowrap; gap: 4px; }
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-parte-opts .casc-btn{
  min-height: 30px; padding: 3px 8px; font-size: .72rem;
}
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-aviso{
  margin-top: 6px; padding: 6px 10px; font-size: .76rem; font-family: var(--ui-font-ui);
}
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-correccion{ font-family: var(--ui-font-ui); }
body.theme-new-ui #screen-maestro .mm-layout:has(.fv-oracion) .fv-fila{ font-size: .8rem; padding: 4px 0; }

/* ─── Floating "Elegir oración" button — projector mode ───────────────
   Used in screen-game when teacher is in projector mode. The original
   neón-yellow look clashes with the SaaS chrome; soften to navy-tint. */
body.theme-new-ui .proj-float-btn{
  background: var(--ui-surface);
  color: var(--ui-ink);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-r-pill);
  padding: 10px 22px;
  font-family: var(--ui-font-ui);
  font-weight: 700;
  font-size: .84rem;
  box-shadow: var(--ui-sh-2);
  transition: all var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .proj-float-btn:hover{
  border-color: var(--ui-teal);
  color: var(--ui-teal-dk);
  transform: translateY(-2px);
  box-shadow: var(--ui-sh-3);
}

/* Mobile adjustments for academic screens */
@media (max-width: 540px){
  body.theme-new-ui #screen-morph .morph-topbar{ padding: 10px 14px 9px; gap: 8px; }
  body.theme-new-ui #screen-morph .morph-title{ font-size: .92rem; }
  body.theme-new-ui #screen-morph .morph-wrap{ padding: 22px 14px 70px; }
  body.theme-new-ui #screen-morph .morph-hint{ padding: 18px 18px 28px; }
  body.theme-new-ui #screen-morph .morph-hint-text{ font-size: .92rem; padding: 12px 14px; }
  body.theme-new-ui #screen-sintagmas .sint-topbar{ padding: 10px 14px 9px; gap: 8px; }
  body.theme-new-ui #screen-sintagmas .sint-topbar > span:nth-of-type(2){ font-size: .92rem; }
  body.theme-new-ui #screen-sintagmas .sint-wrap{ padding: 22px 14px 70px; }
  body.theme-new-ui #screen-maestro .maestro-topbar{ padding: 10px 12px 9px; gap: 8px; }
  body.theme-new-ui #screen-maestro .maestro-counter{ font-size: .68rem; padding: 3px 7px; }
  body.theme-new-ui #screen-maestro .maestro-score-badge{ font-size: .68rem; padding: 3px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
   GLOSARIO v2 — refinements per the latest brief.
   • Softer backdrop (less blue dim, slight blur)
   • Smooth fade + scale entrance
   • Tighter modal width (better line length for reading)
   • More breathing room between items
   • Stronger close-button hover signal
   These rules sit AFTER the previous glosario block on purpose: cascade
   wins at equal specificity, so they cleanly override.
   ════════════════════════════════════════════════════════════════════════ */
body.theme-new-ui .glos-bg{
  /* Softer, less saturated dim — readers should still sense the background */
  background: rgba(15,23,42,.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-new-ui .glos-bg.open{
  /* Override the legacy .glos-bg.open animation with our own fade-in.
     The modal child gets its own scale-in below. */
  animation: glosBgFadeIn .28s var(--ui-ease) both;
}
@keyframes glosBgFadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.theme-new-ui .glos-modal{
  /* Tighter max-width for shorter lines (~60ch is ideal for prose) */
  max-width: 560px;
  width: 100%;
  /* Lighter, softer shadow — modern SaaS, not heavy */
  box-shadow: 0 18px 48px rgba(15,35,66,.20), 0 2px 8px rgba(15,35,66,.06);
  /* Smooth fade + slight scale entrance */
  animation: glosModalIn .32s var(--ui-ease) both;
  transform-origin: center center;
}
@keyframes glosModalIn{
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
/* Tighter header padding; the title remains dominant */
body.theme-new-ui .glos-hdr{
  padding: 24px 28px 14px;
}
body.theme-new-ui .glos-hdr h2{
  font-size: 1.32rem;
  letter-spacing: -.02em;
  line-height: 1.2;
}
/* Close button: stronger hover affordance */
body.theme-new-ui .glos-close{
  background: transparent;
  color: var(--ui-muted);
  border: 1px solid var(--ui-border);
  width: 34px; height: 34px;
  font-size: .98rem;
  transition: background var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease),
              transform var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui .glos-close:hover{
  background: var(--ui-ink);
  color: #FFFFFF;
  border-color: var(--ui-ink);
  transform: rotate(90deg);
}
body.theme-new-ui .glos-close:active{
  transform: rotate(90deg) scale(.94);
}
/* More airy body */
body.theme-new-ui .glos-body{
  padding: 22px 28px 28px;
}
body.theme-new-ui .glos-section{
  margin-bottom: 22px;
}
body.theme-new-ui .glos-section:last-child{
  margin-bottom: 0;
}
/* Items: tighter padding, more line-height in definition */
body.theme-new-ui .glos-item{
  padding: 14px 16px;
  gap: 14px;
  margin-bottom: 6px;
}
body.theme-new-ui .glos-full{
  font-size: .95rem;
  line-height: 1.3;
}
body.theme-new-ui .glos-expl{
  font-size: .9rem;
  line-height: 1.7;
  max-width: 64ch;
}
body.theme-new-ui .glos-example{
  margin-top: 10px;
  padding: 7px 14px;
  font-size: .86rem;
  line-height: 1.55;
  max-width: 64ch;
}
/* Mobile: full-width sheet feel */
@media (max-width: 540px){
  body.theme-new-ui .glos-bg{ padding: 32px 12px; }
  body.theme-new-ui .glos-modal{ max-width: 100%; }
  body.theme-new-ui .glos-hdr{ padding: 18px 20px 12px; }
  body.theme-new-ui .glos-hdr h2{ font-size: 1.15rem; }
  body.theme-new-ui .glos-body{ padding: 18px 20px 22px; }
}

/* ════════════════════════════════════════════════════════════════════════
   PHASE 5 PEDAGOGICAL — RESULTS CLEANUP + TARJETAS DIDÁCTICAS
   • Practice / mission: hide score, gauge, breakdown, sentence list.
   • Show encouraging hero block instead.
   • Re-style "Funciones para repasar" and "Tendencia general" cards.
   • Refine the micro-lesson modal in the SaaS language.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Visibility rules in student-friendly mode ─────────────────────── */
/* Hide the gauge card (which is the first .card child of .res-inner that
   isn't res-phase-card or res-detail-card). :first-of-type doesn't work
   here because it matches by tag, not by class. */
body.theme-new-ui #screen-results.is-student-friendly .res-inner > .card:not(#res-phase-card):not(#res-detail-card),
body.theme-new-ui #screen-results.is-student-friendly #res-grade,
body.theme-new-ui #screen-results.is-student-friendly #res-errs,
body.theme-new-ui #screen-results.is-student-friendly #score-compare,
body.theme-new-ui #screen-results.is-student-friendly #res-phase-card,
body.theme-new-ui #screen-results.is-student-friendly #res-detail,
body.theme-new-ui #screen-results.is-student-friendly .res-detail-label{
  display: none !important;
}
/* Hide the "🏆 Resultado" headline; the encourage block carries the
   meaning instead. Keep res-sub (subtitle) visible. */
body.theme-new-ui #screen-results.is-student-friendly .res-hdr h1{
  display: none;
}
body.theme-new-ui #screen-results.is-student-friendly .res-hdr p{
  text-align: center;
  font-size: .82rem;
  color: var(--ui-muted);
  font-family: var(--ui-font-body);
  margin: 0 0 14px;
}
body.theme-new-ui #screen-results.is-student-friendly .res-hdr{
  margin-bottom: 4px;
}
/* The breakdown wrapper card collapses to padding-less when only advice
   and trend remain inside. */
body.theme-new-ui #screen-results.is-student-friendly #res-detail-card{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  margin-bottom: 6px;
}

/* ─── Encouraging hero block (visible only in student-friendly mode) ── */
body.theme-new-ui #screen-results .res-encourage{ display: none; }
body.theme-new-ui #screen-results.is-student-friendly .res-encourage{
  display: block;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--ui-teal);
  border-radius: var(--ui-r-lg);
  padding: 24px 26px;
  margin-bottom: 14px;
  text-align: center;
  box-shadow: var(--ui-sh-1);
}
body.theme-new-ui #screen-results.is-student-friendly .res-encourage .re-icon{
  font-size: 2.2rem;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
body.theme-new-ui #screen-results.is-student-friendly .res-encourage .re-msg{
  font-family: var(--ui-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ui-ink);
  letter-spacing: -.018em;
  line-height: 1.2;
  margin-bottom: 6px;
}
body.theme-new-ui #screen-results.is-student-friendly .res-encourage .re-stats{
  font-family: var(--ui-font-body);
  font-size: .94rem;
  color: var(--ui-muted);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0 auto;
}

/* ─── Advice card "Funciones para repasar" — SaaS look ──────────────── */
/* Match regardless of wrapper depth: in exam mode the cards are nested in
   a paper-coloured container, in student mode they're direct children. */
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"],
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"]{
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-warn) !important;
  border-radius: var(--ui-r-lg) !important;
  padding: 18px 22px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: var(--ui-sh-1);
  font-family: var(--ui-font-body);
  font-size: .94rem !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"] strong,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"] strong{
  font-family: var(--ui-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: -.012em;
  color: var(--ui-ink) !important;
  font-weight: 700 !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"] ol,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"] ol{
  color: var(--ui-ink-2) !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"] li,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"] li{
  margin-bottom: 10px !important;
  line-height: 1.55;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"] li > strong,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"] li > strong{
  color: var(--ui-warn) !important;
  font-family: var(--ui-font-ui) !important;
  font-size: .92rem !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"] li > br + span,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"] li > br + span{
  color: var(--ui-muted) !important;
  font-size: .86rem !important;
  font-family: var(--ui-font-body) !important;
  font-weight: 400;
  line-height: 1.55;
}

/* ─── Tendencia general card — SaaS look ────────────────────────────── */
body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"],
body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"]{
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-info) !important;
  border-radius: var(--ui-r-lg) !important;
  padding: 18px 22px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: var(--ui-sh-1);
  font-family: var(--ui-font-body);
  font-size: .94rem !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"] strong,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"] strong{
  font-family: var(--ui-font-display) !important;
  font-size: 1rem !important;
  letter-spacing: -.012em;
  color: var(--ui-ink) !important;
  font-weight: 700 !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"] p,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"] p{
  color: var(--ui-muted) !important;
  font-size: .88rem !important;
  font-family: var(--ui-font-body) !important;
  line-height: 1.55;
  margin: 0 0 10px !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"] ul,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"] ul{
  color: var(--ui-ink-2) !important;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"] li > strong,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"] li > strong{
  color: var(--ui-info) !important;
  font-family: var(--ui-font-ui) !important;
  font-size: .92rem !important;
}

/* "patrón recurrente" badge — refine */
body.theme-new-ui #screen-results #res-func-breakdown span[style*="FEE2E2"]{
  background: var(--ui-err-tint) !important;
  color: var(--ui-err) !important;
  border: 1px solid rgba(190,18,60,.22);
  font-family: var(--ui-font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 2px 9px !important;
}

/* "Ningún error en esta sesión" green card — refine */
body.theme-new-ui #screen-results #res-func-breakdown div[style*="DCFCE7"],
body.theme-new-ui #screen-results #res-func-breakdown div[style*="86EFAC"]{
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-ok) !important;
  border-radius: var(--ui-r-lg) !important;
  padding: 18px 22px !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  box-shadow: var(--ui-sh-1);
  font-family: var(--ui-font-body);
  color: var(--ui-ink-2) !important;
  font-size: .94rem !important;
  line-height: 1.55;
}
body.theme-new-ui #screen-results #res-func-breakdown div[style*="DCFCE7"] strong,
body.theme-new-ui #screen-results #res-func-breakdown div[style*="86EFAC"] strong{
  font-family: var(--ui-font-display) !important;
  font-size: 1rem !important;
  color: var(--ui-ok) !important;
  font-weight: 700 !important;
  letter-spacing: -.012em;
}

/* ─── Micro-lesson "tarjetas didácticas" — SaaS refinement ──────────── */
body.theme-new-ui #ml-overlay .modal{
  border-radius: var(--ui-r-xl);
  box-shadow: 0 18px 48px rgba(15,35,66,.20), 0 2px 8px rgba(15,35,66,.06);
  overflow: hidden;
  animation: glosModalIn .32s var(--ui-ease) both;
}
body.theme-new-ui #ml-overlay .modal > div{
  padding: 28px 28px 26px !important;
}
body.theme-new-ui #ml-overlay #ml-tag{
  font-family: var(--ui-font-ui) !important;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7C3AED !important;
  margin-bottom: 6px;
  padding: 4px 11px;
  border-radius: var(--ui-r-pill);
  background: #F5F3FF;
  border: 1px solid rgba(124,58,237,.18);
  display: inline-block;
}
body.theme-new-ui #ml-overlay h2#ml-title{
  font-family: var(--ui-font-display) !important;
  font-weight: 700 !important;
  font-size: 1.45rem !important;
  color: var(--ui-ink) !important;
  letter-spacing: -.02em;
  line-height: 1.18;
  margin: 8px 0 0 !important;
}
/* Close button matches glosario behaviour. :not(.btn): el botón «Volver al
   análisis» del final de la lección también llama a closeMicroLeccion() y
   esta regla lo encogía a 34 px (corregido oct-2026). */
body.theme-new-ui #ml-overlay button[onclick*="closeMicroLeccion"]:not(.btn){
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-muted) !important;
  font-size: .98rem !important;
  border-radius: var(--ui-r-pill);
  padding: 0 !important;
  flex-shrink: 0;
  transition: background var(--ui-dur) var(--ui-ease),
              color var(--ui-dur) var(--ui-ease),
              border-color var(--ui-dur) var(--ui-ease),
              transform var(--ui-dur) var(--ui-ease);
}
body.theme-new-ui #ml-overlay button[onclick*="closeMicroLeccion"]:not(.btn):hover{
  background: var(--ui-ink) !important;
  color: #FFFFFF !important;
  border-color: var(--ui-ink) !important;
  transform: rotate(90deg);
}
body.theme-new-ui #ml-overlay #ml-body{
  font-family: var(--ui-font-body) !important;
  font-size: .96rem !important;
  line-height: 1.75 !important;
  color: var(--ui-ink-2) !important;
  margin-top: 18px;
}
body.theme-new-ui #ml-overlay #ml-body p{
  max-width: 60ch;
  margin: 0 0 12px;
}
body.theme-new-ui #ml-overlay #ml-body strong{
  color: var(--ui-ink);
  font-weight: 700;
}
body.theme-new-ui #ml-overlay #ml-body ul,
body.theme-new-ui #ml-overlay #ml-body ol{
  padding-left: 22px;
  margin: 8px 0 14px;
}
body.theme-new-ui #ml-overlay #ml-body li{
  margin-bottom: 8px;
  line-height: 1.65;
}
/* Quiz buttons */
body.theme-new-ui #ml-overlay #ml-quiz button{
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-ink) !important;
  font-family: var(--ui-font-ui) !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  padding: 13px 18px !important;
  margin-bottom: 8px;
  border-radius: var(--ui-r) !important;
  text-align: left !important;
  transition: all var(--ui-dur) var(--ui-ease) !important;
  box-shadow: var(--ui-sh-1);
}
body.theme-new-ui #ml-overlay #ml-quiz button:hover{
  border-color: var(--ui-ink) !important;
  background: var(--ui-navy-tint) !important;
  transform: translateY(-1px);
  box-shadow: var(--ui-sh-2);
}
body.theme-new-ui #ml-overlay #ml-quiz button.btn-primary{
  background: var(--ui-teal) !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  padding: 13px 28px !important;
  font-size: .94rem !important;
  box-shadow: 0 4px 12px rgba(15,118,110,.24) !important;
}
body.theme-new-ui #ml-overlay #ml-quiz button.btn-primary:hover{
  background: var(--ui-teal-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,118,110,.32) !important;
}
/* Progress dots */
body.theme-new-ui #ml-overlay #ml-progress{
  margin-top: 22px !important;
  gap: 8px !important;
}
body.theme-new-ui #ml-overlay #ml-progress > div{
  width: 8px !important;
  height: 8px !important;
  border-radius: var(--ui-r-pill) !important;
  transition: all var(--ui-dur) var(--ui-ease);
}

/* Mobile adjustments */
@media (max-width: 540px){
  body.theme-new-ui #screen-results.is-student-friendly .res-encourage{
    padding: 20px 18px;
  }
  body.theme-new-ui #screen-results.is-student-friendly .res-encourage .re-msg{
    font-size: 1.18rem;
  }
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="FEF3C7"],
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="FDE68A"],
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="EFF6FF"],
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="BFDBFE"],
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="DCFCE7"],
  body.theme-new-ui #screen-results #res-func-breakdown div[style*="86EFAC"]{
    padding: 14px 16px !important;
  }
  body.theme-new-ui #ml-overlay .modal > div{
    padding: 22px 20px 22px !important;
  }
  body.theme-new-ui #ml-overlay h2#ml-title{
    font-size: 1.2rem !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   MÓDULO ORACIÓN COMPUESTA (E2 — modo lectura)
   Estética coherente con el resto: Bento-Neobrutalista con sombras cálidas.
   Color de marca del módulo: violeta #7C3AED (distinto de navy/teal/cyan/magenta).
   ══════════════════════════════════════════════════════════════════════════ */

#screen-compuestas{
  flex-direction:column;min-height:100dvh;
  background:var(--parch-bg);
  padding:0;
}
.cp-topbar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  background:#7C3AED;color:#fff;
  border-bottom:2px solid #5B21B6;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}
.cp-topbar .cp-title{font-weight:900;font-size:.95rem;letter-spacing:-.01em}
.cp-topbar .cp-counter{font-size:.78rem;opacity:.85;margin-left:auto;margin-right:6px}
.cp-topbar .btn,
.cp-topbar .cp-topbar-btn{
  background:rgba(255,255,255,.15);color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:4px 10px;font-weight:700;font-size:.78rem;
  border-radius:8px;cursor:pointer;
  font-family:inherit;
  transition:background .15s, transform .1s;
}
.cp-topbar .btn:hover,
.cp-topbar .cp-topbar-btn:hover{background:rgba(255,255,255,.25)}
.cp-topbar .cp-topbar-btn:active{transform:translateY(1px)}

/* Contenedor general */
.cp-wrap{
  max-width:920px;width:100%;
  margin:0 auto;padding:18px 20px 40px;
}
@media(max-width:600px){
  .cp-wrap{padding:14px 12px 32px}
}

/* ─── Vista filtros (selector inicial) ─── */
.cp-card{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:16px;
  padding:20px 18px;
  box-shadow:0 4px 16px rgba(59,42,26,.10);
  margin-bottom:16px;
}
.cp-card h2{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;
  color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;
}
.cp-card .cp-sub{
  font-size:.84rem;color:var(--muted);margin:0 0 14px;line-height:1.45;
}

/* Filtros: grid de chips por categoría */
.cp-filter-block{margin-bottom:14px}
.cp-filter-label{
  font-weight:700;font-size:.78rem;color:var(--ink2);
  text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:7px;
}
.cp-chip-grid{
  display:flex;flex-wrap:wrap;gap:6px;
}
.cp-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:99px;
  background:var(--paper2);
  border:1.5px solid var(--border);
  color:var(--ink2);
  font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;
  cursor:pointer;
  transition:all .15s;
  user-select:none;
}
.cp-chip:hover{border-color:#7C3AED;background:#F5F3FF}
.cp-chip.active{
  background:#7C3AED;color:#fff;border-color:#5B21B6;
  box-shadow:0 2px 4px rgba(124,58,237,.25);
}

/* Botón primario del módulo */
/* Botones de CP (C.4, mayo 2026)
   Antes: violeta #7C3AED que NO encajaba con la marca CP (navy). Ahora:
   primary navy con gradiente sutil, secondary ghost con outline navy.
   Coherente con --cp-marca y con el botón "Ver micro-lección" de la
   pista flotante (que también es navy). */
.cp-btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--cp-marca),#1E3A5F);color:#fff;
  border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.92rem;
  letter-spacing:.01em;
  box-shadow:0 3px 10px rgba(15,35,66,.28);
  transition:transform .12s, box-shadow .15s, opacity .15s;
}
.cp-btn-primary:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(15,35,66,.34);
}
.cp-btn-primary:active:not(:disabled){transform:translateY(0)}
.cp-btn-primary:disabled{background:#94A3B8;cursor:not-allowed;box-shadow:none;opacity:.7}
.cp-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:10px;
  background:#FFFFFF;color:var(--cp-marca);
  border:1.5px solid #C9D2E3;cursor:pointer;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.85rem;
  transition:transform .12s, border-color .15s, background .15s;
}
.cp-btn-secondary:hover{background:#EEF2F8;border-color:#94A3B8}
.cp-btn-secondary:active{transform:translateY(1px)}

/* Stats del banco */
.cp-stats{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:12px;
}
.cp-stat{
  flex:1;min-width:130px;
  background:#F5F3FF;
  border:1px solid #DDD6FE;
  border-radius:10px;
  padding:10px 14px;
}
.cp-stat-num{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.5rem;
  color:#7C3AED;line-height:1;letter-spacing:-.01em;
}
.cp-stat-lbl{
  font-size:.72rem;color:var(--muted);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-top:4px;
}

/* ─── Vista del ejercicio ─── */
.cp-meta-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:12px;
  font-size:.78rem;
}
.cp-meta-bar .cp-meta-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:99px;
  background:var(--paper2);border:1px solid var(--border);
  color:var(--muted);font-weight:600;
}
.cp-meta-bar .cp-meta-pill.basico{background:#DCFCE7;border-color:#86EFAC;color:#15803D}
.cp-meta-bar .cp-meta-pill.medio{background:#FEF3C7;border-color:#FCD34D;color:#B45309}
.cp-meta-bar .cp-meta-pill.avanzado{background:#FFE4E6;border-color:#FDA4AF;color:#BE123C}

/* Oración: tokens en chips */
.cp-oracion-card{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 4px 16px rgba(59,42,26,.10);
  margin-bottom:14px;
}
.cp-oracion-text{
  font-family:'DM Sans','Nunito',sans-serif;font-size:1.35rem;line-height:1.5;
  color:var(--ink);
  letter-spacing:-.005em;
  font-weight:500;
}
@media(max-width:520px){.cp-oracion-text{font-size:1.1rem}}

.cp-token{
  display:inline-block;
  padding:1px 6px;margin:0 1px;border-radius:6px;
  transition:background .15s;
}
.cp-token.verbo{background:#FEE2E2;color:#991B1B;font-weight:700}
.cp-token.conjuncion{background:#DBEAFE;color:#1E40AF;font-weight:700}
.cp-token.pronombre_relativo{background:#E0E7FF;color:#4338CA;font-weight:700;font-style:italic}
.cp-token.puntuacion{background:transparent;color:var(--muted);font-weight:700}
.cp-token.sustantivo,
.cp-token.adjetivo,
.cp-token.adverbio,
.cp-token.pronombre,
.cp-token.otro{background:transparent}

/* Leyenda de tokens (modo solución) */
.cp-legend{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:14px;
  font-size:.72rem;color:var(--muted);
}
.cp-legend-item{display:inline-flex;align-items:center;gap:4px}
.cp-legend-swatch{width:14px;height:14px;border-radius:4px;display:inline-block}

/* Proposiciones (cajas) */
.cp-props-wrap{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.cp-prop{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-left-width:5px;
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 2px 8px rgba(59,42,26,.06);
}
.cp-prop.principal{border-left-color:var(--cp-marca)}
.cp-prop.subordinada{border-left-color:#7C3AED}
.cp-prop.coordinada{border-left-color:#0F766E}
.cp-prop.yuxtapuesta{border-left-color:#94A3B8}

.cp-prop-header{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:6px;
}
.cp-prop-id{
  font-family:'DM Sans',sans-serif;
  font-weight:800;font-size:.7rem;
  padding:2px 8px;border-radius:99px;
  background:rgba(15,35,66,.08);color:var(--ink2);
  text-transform:uppercase;letter-spacing:.05em;
}
.cp-prop-tipo{
  font-size:.7rem;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
}
.cp-prop.principal .cp-prop-id{background:var(--cp-marca);color:#fff}
.cp-prop.subordinada .cp-prop-id{background:#7C3AED;color:#fff}
.cp-prop.coordinada .cp-prop-id{background:#0F766E;color:#fff}

.cp-prop-text{
  font-family:'DM Sans','Nunito',sans-serif;font-size:1.05rem;line-height:1.45;
  color:var(--ink);
}
.cp-prop-details{
  font-size:.78rem;color:var(--muted);
  margin-top:6px;line-height:1.5;
}
.cp-prop-details b{color:var(--ink2);font-weight:700}

/* Nexos y relaciones */
.cp-list-card{
  background:var(--paper2);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:14px;
}
.cp-list-title{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.82rem;
  color:var(--ink2);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.04em;
}
.cp-list-item{
  font-size:.85rem;color:var(--ink2);line-height:1.55;
  padding:10px 0;
}
.cp-list-item:not(:last-child){border-bottom:1px solid var(--border)}
.cp-list-item:first-child{padding-top:4px}
.cp-list-item:last-child{padding-bottom:4px}
.cp-list-item b{color:var(--ink);font-weight:700}
.cp-list-item .cp-rel-arrow{color:#7C3AED;font-weight:800;margin:0 4px}

/* ─── Modelo PAU (Ver análisis completo) ─────────────────────────── */
.cp-pau{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:14px;
  box-shadow:0 2px 10px rgba(59,42,26,.05);
  font-family:'DM Sans','Nunito',sans-serif;
  color:var(--ink);
  line-height:1.55;
}
.cp-pau-titulo{
  text-align:center;
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink2);
  padding-bottom:12px;
  margin-bottom:14px;
  border-bottom:1.5px solid var(--border);
}
.cp-pau-prop,
.cp-pau-nexo{
  margin-bottom:14px;
}
.cp-pau-prop:last-child,
.cp-pau-nexo:last-child{ margin-bottom:0 }
.cp-pau-prop-label{
  font-size:.95rem;
  color:var(--ink);
  margin-bottom:2px;
}
.cp-pau-prefix{
  display:inline-block;
  min-width:14px;
  color:#7C3AED;
  font-weight:800;
  margin-right:2px;
}
.cp-pau-prop-text{
  font-size:1.02rem;
  margin:2px 0 2px 18px;
  color:var(--ink);
}
.cp-pau-prop-verbo{
  font-size:.86rem;
  color:var(--muted);
  margin-left:18px;
}
.cp-pau-prop-verbo i{ color:var(--ink2);font-style:italic;font-weight:500 }
.cp-pau-nexo-body{
  font-size:.94rem;
  margin-left:18px;
  color:var(--ink2);
}
.cp-pau-nexo-body i{ color:var(--ink2);font-style:italic;font-weight:500 }
.cp-pau-nexo-body b{ color:var(--ink);font-weight:700 }
@media(max-width:520px){
  .cp-pau{ padding:14px 16px }
  .cp-pau-titulo{ font-size:.82rem;letter-spacing:.04em }
  .cp-pau-prop-text{ font-size:.96rem }
}

/* Botones de navegación entre ejercicios */
.cp-navbar{
  display:flex;align-items:center;gap:10px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--border);
}
.cp-navbar .cp-spacer{flex:1}

/* Estado vacío / error */
.cp-empty{
  text-align:center;padding:40px 20px;
  color:var(--muted);
}
.cp-empty-icon{font-size:2.4rem;margin-bottom:8px;opacity:.5}
.cp-empty-msg{font-size:.95rem;line-height:1.5;margin-bottom:14px}
.cp-empty-err{font-size:.78rem;color:var(--red);margin-top:8px;font-family:monospace;word-break:break-all}

/* Loading */
.cp-loading{
  display:flex;align-items:center;justify-content:center;
  gap:12px;padding:40px 20px;color:var(--muted);
}
.cp-loading .spinner{width:32px;height:32px;border-color:var(--paper3);border-top-color:#7C3AED}

/* Ayuda inicial / consejos */
.cp-tip{
  background:#F5F3FF;border:1px solid #DDD6FE;
  border-radius:10px;padding:10px 14px;
  font-size:.82rem;color:#5B21B6;line-height:1.5;
  margin-bottom:14px;
}
.cp-tip b{font-weight:700}

/* Solución toggle */
.cp-solucion-hidden .cp-solucion-content{display:none}
.cp-toggle-sol{margin-top:6px}

/* ══════════════════════════════════════════════════════════════════════════
   MOTOR PEDAGÓGICO INTERACTIVO (E3.1 — fases 0, 1, 2)
   ══════════════════════════════════════════════════════════════════════════ */

/* Barra de progreso superior */
.cp-progress{
  display:flex;align-items:center;gap:8px;
  margin-bottom:18px;
  padding:10px 14px;
  background:#F5F3FF;border:1px solid #DDD6FE;border-radius:10px;
}
.cp-progress-step{
  flex:1;display:flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:600;color:var(--muted);
  padding:6px 10px;border-radius:8px;
  background:rgba(255,255,255,.4);
  border:1px solid transparent;
}
.cp-progress-step.active{
  background:#7C3AED;color:#fff;
  border-color:#5B21B6;
  box-shadow:0 2px 6px rgba(124,58,237,.25);
}
.cp-progress-step.done{
  background:#DCFCE7;color:#15803D;
  border-color:#86EFAC;
}
.cp-progress-step .cp-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.1);font-weight:800;font-size:.7rem;
}
.cp-progress-step.active .cp-step-num{background:rgba(255,255,255,.25)}
.cp-progress-step.done .cp-step-num{background:rgba(21,128,61,.18)}

/* Instrucción de la fase */
.cp-instr{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 4px 12px rgba(59,42,26,.08);
  margin-bottom:14px;
}
.cp-instr-titulo{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;
  color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;
}
.cp-instr-desc{
  font-size:.88rem;color:var(--ink2);line-height:1.55;margin:0;
}

/* Instrucción AMPLIADA, prominente, con icono lateral grande.
   Se invita visualmente a leerla; el alumno no la salta. */
.cp-instr-grande{
  display:flex;align-items:flex-start;gap:14px;
  background:linear-gradient(135deg, #F5F3FF 0%, #FAFAFA 100%);
  border:2px solid #C4B5FD;
  border-left-width:6px;
  border-left-color:#7C3AED;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 4px 14px rgba(124,58,237,.10);
  margin-bottom:16px;
}
.cp-instr-grande .cp-instr-emoji{
  font-size:2rem;line-height:1;
  flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.cp-instr-grande .cp-instr-body{flex:1}
.cp-instr-grande .cp-instr-titulo{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;
  color:#5B21B6;margin:0 0 6px;letter-spacing:-.01em;
}
.cp-instr-grande .cp-instr-desc{
  font-size:.95rem;color:var(--ink);line-height:1.6;margin:0;
}
.cp-instr-grande .cp-instr-desc b{font-weight:700;color:var(--ink)}

/* Variante específica para fase 3 (color cambia según P activa, lo aplicamos inline) */
.cp-instr-fase3{background:linear-gradient(135deg, #EFF4FB 0%, #FAFAFA 100%);border-color:#93C5FD;border-left-color:var(--cp-marca)}
.cp-instr-fase3 .cp-instr-titulo{color:var(--cp-marca)}

/* Banda superior con la oración completa (visible siempre en fase 3 y 4) */
.cp-oracion-recordatorio{
  /* Sticky para que la oración nunca desaparezca de la vista al hacer scroll
     mientras el alumno responde las preguntas de la fase de clasificar/relacionar.
     2026-05-28: STICKY DESACTIVADO. Para reactivar, descomentar las dos
     líneas marcadas abajo. */
  /* position:sticky; */    /* sticky off — 2026-05-28 */
  /* top:8px;          */   /* sticky off — 2026-05-28 */
  z-index:10;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:12px;
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
  /* Sombra sutil que aparece al despegarse del flujo normal */
  box-shadow:0 4px 12px rgba(15,35,66,.08), 0 1px 3px rgba(15,35,66,.05);
}
.cp-oracion-recordatorio::before{
  content:'Oración: ';
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-right:8px;
}

/* Caja con la oración en modo interactivo */
.cp-interact-card{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 4px 16px rgba(59,42,26,.10);
  margin-bottom:14px;
}
.cp-interact-text{
  font-family:'DM Sans','Nunito',sans-serif;font-size:1.35rem;line-height:1.9;
  color:var(--ink);letter-spacing:-.005em;
  font-weight:500;
}
@media(max-width:520px){.cp-interact-text{font-size:1.1rem;line-height:1.85}}

/* Tokens clicables: estados */
.cp-tok{
  display:inline-block;
  padding:3px 7px;margin:0 1px;border-radius:7px;
  cursor:pointer;
  border:2px solid transparent;
  background:transparent;
  transition:all .12s;
  user-select:none;
  font:inherit;color:inherit;
}
.cp-tok:hover:not(.locked):not(.correcto):not(.error):not(.p1):not(.p2):not(.p3):not(.p4){
  background:rgba(0,0,0,.05);
  border-color:rgba(0,0,0,.15);
}
.cp-tok.selected{
  background:#EDE9FE;
  border-color:#7C3AED;
  color:#5B21B6;
  font-weight:600;
}
.cp-tok.correcto{
  background:#DCFCE7;
  border-color:#16A34A;
  color:#15803D;
  font-weight:700;
  cursor:default;
}
.cp-tok.error{
  background:#FEE2E2;
  border-color:#DC2626;
  color:#991B1B;
  font-weight:700;
  cursor:default;
  text-decoration:line-through;
}
.cp-tok.faltante{
  background:#FEF3C7;
  border-color:#D97706;
  color:#B45309;
  font-weight:700;
  cursor:default;
  animation:cpFaltantePulse 1.6s ease-in-out 2;
}
@keyframes cpFaltantePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.5)}
  50%{box-shadow:0 0 0 8px rgba(217,119,6,0)}
}
.cp-tok.locked{cursor:default;opacity:.65}
/* Puntuación: sin caja, sin hover, pegada a la palabra anterior, no rompe línea */
.cp-tok.puntuacion{
  cursor:default;
  border:none;
  background:none;
  padding:0;
  margin:0 1px 0 -3px;  /* margen negativo: tira hacia la palabra previa */
}
.cp-tok.puntuacion:hover{background:none;border:none;box-shadow:none}

/* Panel de feedback debajo de la oración */
.cp-feedback{
  margin:14px 0 0;
  padding:11px 14px;
  border-radius:10px;
  font-size:.88rem;line-height:1.55;
  font-family:'DM Sans',sans-serif;
}
.cp-feedback-ok{
  background:#DCFCE7;border:1px solid #86EFAC;color:#15803D;
}
.cp-feedback-err{
  background:#FEE2E2;border:1px solid #FCA5A5;color:#991B1B;
}
.cp-feedback-info{
  background:#DBEAFE;border:1px solid #93C5FD;color:#1E3A8A;
}
.cp-feedback-warn{
  background:#FEF3C7;border:1px solid #FCD34D;color:#92400E;
}
.cp-feedback b{font-weight:700}

/* Stats locales (aciertos/errores) */
.cp-tally{
  display:flex;gap:10px;align-items:center;
  font-size:.82rem;color:var(--ink2);
  margin-top:10px;padding:8px 14px;
  background:var(--paper2);border:1px solid var(--border);
  border-radius:10px;
}
.cp-tally-item{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.cp-tally-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:50%;
  padding:0 6px;font-weight:800;font-size:.78rem;
}
.cp-tally-num.ok{background:#DCFCE7;color:#15803D}
.cp-tally-num.err{background:#FEE2E2;color:#991B1B}

/* Barra de acciones inferior (Pista, Comprobar, Continuar) */
.cp-actions{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
}
.cp-actions .cp-spacer{flex:1}

/* Pantalla de resumen tras fase 2 */
.cp-summary{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:16px;
  padding:24px 22px;
  box-shadow:0 4px 16px rgba(59,42,26,.10);
  text-align:center;
  margin-bottom:14px;
}
.cp-summary-icon{font-size:2.2rem;margin-bottom:6px}
.cp-summary-title{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;
  color:var(--ink);margin:0 0 8px;
}
.cp-summary-msg{
  font-size:.92rem;color:var(--ink2);line-height:1.55;
  max-width:480px;margin:0 auto 16px;
}
.cp-summary-stats{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:14px;
}
.cp-summary-stat{
  flex:1;min-width:130px;max-width:200px;
  background:#F5F3FF;border:1px solid #DDD6FE;
  border-radius:12px;padding:14px;
}
.cp-summary-stat-num{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.8rem;
  color:#7C3AED;line-height:1;
}
.cp-summary-stat-lbl{
  font-size:.7rem;color:var(--muted);
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  margin-top:5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 3 — Delimitar proposiciones
   Cada proposición (P1, P2, P3...) tiene su propio color visual.
   ══════════════════════════════════════════════════════════════════════════ */

/* Colores semánticos por proposición (no dependen del tipo lingüístico) */
:root{
  --cp-p1: var(--cp-marca);      /* navy */
  --cp-p1-bg: #DBEAFE;
  --cp-p1-border: #3B82F6;
  --cp-p2: #7C3AED;      /* violeta */
  --cp-p2-bg: #EDE9FE;
  --cp-p2-border: #8B5CF6;
  --cp-p3: #0F766E;      /* teal */
  --cp-p3-bg: #CCFBF1;
  --cp-p3-border: #14B8A6;
  --cp-p4: #A16207;      /* ámbar */
  --cp-p4-bg: #FEF3C7;
  --cp-p4-border: #D97706;
}

/* Selector de proposición activa (encima de la oración) */
.cp-prop-selector{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:12px;
  background:var(--paper2);
  border:1.5px solid var(--border);
  border-radius:12px;
}
.cp-prop-selector-label{
  font-size:.8rem;color:var(--ink2);font-weight:700;
  margin-right:4px;
}
.cp-prop-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:10px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.88rem;
  background:#fff;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .12s;
}
.cp-prop-btn[data-p="1"]{color:var(--cp-p1);border-color:var(--cp-p1-border)}
.cp-prop-btn[data-p="2"]{color:var(--cp-p2);border-color:var(--cp-p2-border)}
.cp-prop-btn[data-p="3"]{color:var(--cp-p3);border-color:var(--cp-p3-border)}
.cp-prop-btn[data-p="4"]{color:var(--cp-p4);border-color:var(--cp-p4-border)}
.cp-prop-btn.active[data-p="1"]{background:var(--cp-p1);color:#fff;box-shadow:0 2px 8px rgba(59,130,246,.3)}
.cp-prop-btn.active[data-p="2"]{background:var(--cp-p2);color:#fff;box-shadow:0 2px 8px rgba(139,92,246,.3)}
.cp-prop-btn.active[data-p="3"]{background:var(--cp-p3);color:#fff;box-shadow:0 2px 8px rgba(20,184,166,.3)}
.cp-prop-btn.active[data-p="4"]{background:var(--cp-p4);color:#fff;box-shadow:0 2px 8px rgba(217,119,6,.3)}
.cp-prop-btn:hover:not(.active){background:#F8F8F4}
.cp-prop-btn .cp-prop-btn-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:50%;
  font-size:.68rem;font-weight:800;
  background:rgba(0,0,0,.08);
  padding:0 5px;
}
.cp-prop-btn.active .cp-prop-btn-count{background:rgba(255,255,255,.25)}

/* Token asignado a una proposición */
.cp-tok.p1{background:var(--cp-p1-bg);border-color:var(--cp-p1-border);color:var(--cp-p1);font-weight:600}
.cp-tok.p2{background:var(--cp-p2-bg);border-color:var(--cp-p2-border);color:var(--cp-p2);font-weight:600}
.cp-tok.p3{background:var(--cp-p3-bg);border-color:var(--cp-p3-border);color:var(--cp-p3);font-weight:600}
.cp-tok.p4{background:var(--cp-p4-bg);border-color:var(--cp-p4-border);color:var(--cp-p4);font-weight:600}

/* Verbos confirmados de fase 1 muestran su color de proposición pero con icono ✓ */
.cp-tok.verbo-locked{
  font-weight:700;
}
.cp-tok.verbo-locked::after{
  content:' ✓';
  font-size:.7em;
  opacity:.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   FASE 4 — Clasificar proposiciones
   ══════════════════════════════════════════════════════════════════════════ */

.cp-clasif-prop-card{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-left-width:6px;
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 4px 12px rgba(59,42,26,.08);
  margin-bottom:14px;
}
.cp-clasif-prop-card.p1{border-left-color:var(--cp-p1)}
.cp-clasif-prop-card.p2{border-left-color:var(--cp-p2)}
.cp-clasif-prop-card.p3{border-left-color:var(--cp-p3)}
.cp-clasif-prop-card.p4{border-left-color:var(--cp-p4)}

.cp-clasif-prop-header{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
}
.cp-clasif-prop-id{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;
  font-weight:800;font-size:.78rem;
  padding:4px 10px;border-radius:99px;
  color:#fff;
}
.cp-clasif-prop-id.p1{background:var(--cp-p1)}
.cp-clasif-prop-id.p2{background:var(--cp-p2)}
.cp-clasif-prop-id.p3{background:var(--cp-p3)}
.cp-clasif-prop-id.p4{background:var(--cp-p4)}
.cp-clasif-prop-text{
  font-family:'DM Sans','Nunito',sans-serif;font-size:1.02rem;line-height:1.5;
  color:var(--ink);
  margin-bottom:14px;
  font-weight:500;
  padding:8px 12px;
  background:var(--paper2);
  border-radius:8px;
  border-left:3px solid var(--border);
}

/* Pregunta + opciones */
.cp-clasif-q{margin-bottom:14px}
.cp-clasif-q-label{
  font-size:.82rem;color:var(--ink2);font-weight:700;
  margin-bottom:8px;
  display:block;
}
.cp-clasif-opts{
  display:flex;gap:8px;flex-wrap:wrap;
}
.cp-clasif-opt{
  padding:8px 14px;border-radius:10px;
  background:var(--paper2);
  border:2px solid var(--border);
  color:var(--ink2);
  font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;
  cursor:pointer;
  transition:all .12s;
}
.cp-clasif-opt:hover:not(.locked){background:#F5F3FF;border-color:#A78BFA}
.cp-clasif-opt.selected{
  background:#EDE9FE;border-color:#7C3AED;color:#5B21B6;
}
.cp-clasif-opt.correcto{
  background:#DCFCE7;border-color:#16A34A;color:#15803D;
  cursor:default;
}
.cp-clasif-opt.error{
  background:#FEE2E2;border-color:#DC2626;color:#991B1B;
  cursor:default;
}
.cp-clasif-opt.locked{cursor:default;opacity:.55}

/* Opciones de FAMILIA (sub-paso 2 de la fase 4): formato vertical con explicación */
.cp-clasif-opts-vertical{
  display:flex;flex-direction:column;gap:8px;
}
.cp-clasif-opt-familia{
  text-align:left;
  padding:12px 16px;
  line-height:1.45;
}

/* ── Diagnóstico pedagógico en el resumen ───────────────────────────── */
.cp-diag{
  margin:0 0 16px;
}
.cp-diag-title{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;
  color:var(--ink);margin:0 0 10px;
}
.cp-diag-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;
  border-radius:12px;
  margin-bottom:8px;
  border:1.5px solid;
}
.cp-diag-emoji{font-size:1.5rem;line-height:1;flex-shrink:0}
.cp-diag-body{flex:1}
.cp-diag-h{
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.92rem;
  margin-bottom:3px;
}
.cp-diag-msg{
  font-size:.85rem;line-height:1.55;
}
.cp-diag-msg b{font-weight:700}
.cp-diag-ok{background:#F0FDF4;border-color:#86EFAC;color:#15803D}
.cp-diag-ok .cp-diag-h{color:#14532D}
.cp-diag-aviso{background:#FFFBEB;border-color:#FCD34D;color:#92400E}
.cp-diag-aviso .cp-diag-h{color:#78350F}
.cp-diag-fallo{background:#FEF2F2;border-color:#FCA5A5;color:#991B1B}
.cp-diag-fallo .cp-diag-h{color:#7F1D1D}

/* ═══════════════════════════════════════════════════════════════════ */
/* FASE 5 — Mini-resumen de proposiciones ya clasificadas              */
/* ═══════════════════════════════════════════════════════════════════ */
.cp-prop-mini{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  background:var(--paper2);
  border:1px solid var(--border);
  border-left-width:5px;
  border-radius:8px;
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:.88rem;
  color:var(--ink2);
}
.cp-prop-mini.p1{border-left-color:var(--cp-p1)}
.cp-prop-mini.p2{border-left-color:var(--cp-p2)}
.cp-prop-mini.p3{border-left-color:var(--cp-p3)}
.cp-prop-mini.p4{border-left-color:var(--cp-p4)}

/* ── CP Sticky flotante bajo la topbar ────────────────────────────────
   Misma mecánica que la sticky de Sint: position:sticky pegada al topbar,
   sin borde superior ni esquinas redondeadas arriba para formar una pieza
   visual continua con él. La variable --cp-topbar-h la fija JS al renderizar.

   2026-05-28: STICKY DESACTIVADO a petición del usuario. Para reactivar,
   descomentar las dos líneas marcadas abajo. */
#screen-compuestas #cp-ctx-strip{
  /* position: sticky; */                       /* sticky off — 2026-05-28 */
  /* top: var(--cp-topbar-h, 56px); */          /* sticky off — 2026-05-28 */
  z-index: 20;
  background: var(--paper);
  border: 1px solid var(--ui-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 10px 18px 12px;
  margin: 0 auto 12px;
  max-width: 100%;
  box-shadow: 0 4px 14px rgba(15,35,66,.08), 0 1px 3px rgba(15,35,66,.05);
}
#screen-compuestas #cp-ctx-strip .ctx-label{
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 7px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
#screen-compuestas #cp-ctx-strip .ctx-scroll{
  max-width: 880px;
  margin: 0 auto;
  overflow-x: auto;
}
/* Tokens en la sticky (fases 0-3) */
.cp-ctx-words{ display:flex; flex-wrap:wrap; gap:3px 4px; align-items:baseline; }
.cp-ctx-tok{
  font-family: 'Fraunces',serif;
  font-size: .88rem;
  padding: 2px 5px;
  border-radius: 5px;
  line-height: 1.6;
}
.cp-ctx-punt{ color: var(--muted); padding: 0 1px; }
.cp-ctx-verbo{ background:#DCFCE7; color:#166534; font-weight:700; }
.cp-ctx-nexo { background:#CCFBF1; color:#115E59; font-weight:700; }
.cp-ctx-p1{ background:var(--cp-p1-bg); color:var(--cp-p1); font-weight:600; }
.cp-ctx-p2{ background:var(--cp-p2-bg); color:var(--cp-p2); font-weight:600; }
.cp-ctx-p3{ background:var(--cp-p3-bg); color:var(--cp-p3); font-weight:600; }
.cp-ctx-p4{ background:var(--cp-p4-bg); color:var(--cp-p4); font-weight:600; }
.cp-ctx-badge{
  font-size: .52rem; font-weight:800;
  background:#166534; color:#fff;
  border-radius:3px; padding:0 3px;
  margin-left:2px; vertical-align:super;
}
/* Chips de proposición (fases 4/5/interna/resumen) */
.cp-ctx-props{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cp-ctx-prop-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:8px;
  border-left:3px solid transparent;
  background:#F8FAFC;
  font-size:.82rem;
}
.cp-ctx-prop-chip.p1{ border-left-color:var(--cp-p1); }
.cp-ctx-prop-chip.p2{ border-left-color:var(--cp-p2); }
.cp-ctx-prop-chip.p3{ border-left-color:var(--cp-p3); }
.cp-ctx-prop-chip.p4{ border-left-color:var(--cp-p4); }
.cp-ctx-prop-chip.cp-ctx-prop-activa{ box-shadow:0 0 0 2px var(--cp-marca); }
.cp-ctx-prop-num{ font-weight:800; font-size:.75rem; }
.cp-ctx-prop-chip.p1 .cp-ctx-prop-num{ color:var(--cp-p1); }
.cp-ctx-prop-chip.p2 .cp-ctx-prop-num{ color:var(--cp-p2); }
.cp-ctx-prop-chip.p3 .cp-ctx-prop-num{ color:var(--cp-p3); }
.cp-ctx-prop-chip.p4 .cp-ctx-prop-num{ color:var(--cp-p4); }
.cp-ctx-prop-text{
  color:var(--text); font-family:'Fraunces',serif;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-ctx-clasif-badge{
  font-size:.62rem; font-weight:800;
  padding:2px 6px; border-radius:999px; color:#fff;
}
.cp-ctx-clasif-badge.p1{ background:var(--cp-p1); }
.cp-ctx-clasif-badge.p2{ background:var(--cp-p2); }
.cp-ctx-clasif-badge.p3{ background:var(--cp-p3); }
.cp-ctx-clasif-badge.p4{ background:var(--cp-p4); }

/* Flecha de relación entre chips (B, mayo 2026) */
.cp-ctx-rel{
  font-size: 1.1rem;
  font-weight: 800;
  font-family: 'DM Sans','Nunito',sans-serif;
  padding: 0 2px;
  user-select: none;
}
.cp-ctx-rel-pending{ color: rgba(15,35,66,.25); }
.cp-ctx-rel-sub  { color: #1E3A8A; }  /* subordinación: azul oscuro */
.cp-ctx-rel-coord{ color: #0D9488; }  /* coordinación: teal */
.cp-ctx-rel-yux  { color: #6B7280; }  /* yuxtaposición: gris */
/* Texto del nexo (que, porque, y, ...) al lado del símbolo de relación.
   Aparece SIEMPRE para que el alumno tenga la oración compuesta completa a
   la vista, también cuando el nexo no está dentro de los indices de la O
   subordinada (mayo 2026). */
.cp-ctx-nexus-text{
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  background: #FEF3C7;
  color: #78350F;
  font-size: .78rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .01em;
  vertical-align: middle;
}
@media(max-width:540px){
  #screen-compuestas #cp-ctx-strip{ padding:8px 12px 10px; }
}

/* ── Sticky para fase 'interna' (B, mayo 2026) ────────────────────────
   Estructura inspirada en fichas didácticas:
     [   Sujeto       Predicado                           ]
     [  Los invest.   publicaron   el informe    esta mañana ]
     [  Sujeto léx.   PV·N.verbal  CD            CC Temporal  ]
                                                      O1
   Tres filas en grid, brackets que abarcan, marcador de oración. */
.cp-stk-interna{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Fraunces', serif;
  width: 100%;
  overflow-x: auto;
}
.cp-stk-bracket{
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  font-family: 'Fraunces', serif;
  color: #475569;
  user-select: none;
}
.cp-stk-bracket.p1{ color: var(--cp-p1); }
.cp-stk-bracket.p2{ color: var(--cp-p2); }
.cp-stk-bracket.p3{ color: var(--cp-p3); }
.cp-stk-bracket.p4{ color: var(--cp-p4); }

.cp-stk-grid{
  display: grid;
  row-gap: 8px;
  column-gap: 14px;
  align-items: end;
  justify-items: center;
  padding: 0 4px;
}

/* Fila 1: Sujeto / Predicado (macro)
   3.2a (mayo 2026): rediseño «pill + corchete fino». Antes era texto
   coloreado con subrayado pastel — efecto cuaderno escolar. Ahora son
   pills tipo etiqueta (DM Sans, fondo tint del sistema) con un
   corchete fino debajo que conecta visualmente al grupo de palabras. */
.cp-stk-macro{
  font-family: var(--ui-font-ui);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
  padding: 2px 10px;
  position: relative;
  white-space: nowrap;
  border-radius: 999px;
  justify-self: center;
  width: fit-content;
  margin-bottom: 5px;
}
.cp-stk-macro-suj{
  color: var(--ui-magenta);
  background: var(--ui-magenta-tint);
}
.cp-stk-macro-suj::after{
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: -6px;
  height: 5px;
  border: 1.5px solid rgba(190, 24, 93, .45);
  border-top: none;
  border-radius: 0 0 5px 5px;
}
.cp-stk-macro-pred{
  color: var(--ui-navy);
  background: var(--ui-navy-tint);
}
.cp-stk-macro-pred::after{
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: -6px;
  height: 5px;
  border: 1.5px solid rgba(15, 35, 66, .35);
  border-top: none;
  border-radius: 0 0 5px 5px;
}
/* Estado oculto: mientras el alumno no haya confirmado el análisis, la etiqueta
   macro (Sujeto/Predicado) aparece como un '?' neutro para no dar la solución. */
.cp-stk-macro-oculto{
  color: rgba(15, 35, 66, .45) !important;
  background: rgba(15, 35, 66, .04) !important;
}
.cp-stk-macro-oculto::after{
  border-color: rgba(15, 35, 66, .18) !important;
}

/* Fila 2: las palabras */
.cp-stk-words{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  padding: 2px 4px;
}

/* Fila 3: función específica del bloque (Sujeto léxico, PV, CD…) */
.cp-stk-fnc{
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  padding: 2px 6px 0;
  white-space: nowrap;
  position: relative;
  min-width: 30px;
}
.cp-stk-fnc::before{
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: -2px;
  border-top: 2px solid currentColor;
  border-radius: 4px;
}
.cp-stk-fnc-empty{
  color: rgba(15, 35, 66, .35);
}
.cp-stk-fnc-empty::before{
  border-top: 2px dashed rgba(15, 35, 66, .25);
}
.cp-stk-fnc-placed{ color: #64748B; }
.cp-stk-fnc-ok{ color: var(--ui-ok); }
.cp-stk-fnc-err{ color: var(--ui-err); }

/* Marcador de oración (O1, O2…) al final */
.cp-stk-o-marker{
  font-size: .72rem;
  font-weight: 800;
  padding: 3px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: .04em;
  white-space: nowrap;
  background: rgba(255,255,255,.7);
}
.cp-stk-o-marker.p1{ color: var(--cp-p1); }
.cp-stk-o-marker.p2{ color: var(--cp-p2); }
.cp-stk-o-marker.p3{ color: var(--cp-p3); }
.cp-stk-o-marker.p4{ color: var(--cp-p4); }

@media(max-width:540px){
  .cp-stk-words{ font-size: .92rem; }
  .cp-stk-grid{ column-gap: 8px; }
  .cp-stk-bracket{ font-size: 1.4rem; }
}

/* ── Pista flotante (A.1, mayo 2026) ──────────────────────────────────
   Reemplaza la caja amarilla inline por una tarjeta flotante que
   siempre queda visible. Paleta teal/navy (no amarillo), consistente
   con la imagen general de la app. Reutilizable por CP y Sint. */
#pista-flotante{
  position: fixed;
  right: 22px;
  bottom: 22px;
  left: auto;
  z-index: 9000;
  max-width: 380px;
  width: calc(100% - 44px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
#pista-flotante.pf-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pf-card{
  background: linear-gradient(160deg, #ECFEFF 0%, #F0FDFA 60%, #FFFFFF 100%);
  border: 1.5px solid #5EEAD4;
  border-radius: 16px;
  box-shadow:
    0 14px 38px rgba(15, 118, 110, .22),
    0 4px 12px rgba(15, 35, 66, .08),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.pf-card-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(94, 234, 212, .35);
  background: linear-gradient(90deg, rgba(15,118,110,.08), transparent);
}
.pf-card-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #115E59;
  background: #CCFBF1;
  border: 1px solid #5EEAD4;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
}
.pf-card-icon{ font-size: .9rem; line-height: 1; }
.pf-card-close{
  background: transparent;
  border: none;
  color: #475569;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.pf-card-close:hover{
  background: rgba(15, 35, 66, .08);
  color: var(--cp-marca);
}
.pf-card-body{
  padding: 12px 16px 14px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cp-marca);
  font-family: 'DM Sans','Nunito',sans-serif;
  font-weight: 500;
}
.pf-card-body b, .pf-card-body strong{
  color: #115E59;
  font-weight: 800;
}
.pf-card-body em, .pf-card-body i{
  color: #475569;
  font-style: italic;
}
.pf-card-footer{
  padding: 0 12px 12px;
  display: flex;
  justify-content: flex-end;
}
.pf-card-leccion-btn{
  background: linear-gradient(135deg, var(--cp-marca), #1E3A5F);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(15, 35, 66, .25);
  transition: transform .12s, box-shadow .12s;
}
.pf-card-leccion-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(15, 35, 66, .35);
}
.pf-card-leccion-btn:active{ transform: translateY(0); }

/* Móvil: bottom-sheet a ancho completo */
@media (max-width: 600px){
  #pista-flotante{
    right: 8px;
    left: 8px;
    bottom: 12px;
    max-width: none;
    width: auto;
  }
  .pf-card{ border-radius: 14px; }
  .pf-card-body{ font-size: .88rem; padding: 10px 14px 12px; }
}

/* Botones inline para abrir pista flotante o lección desde el feedback CP */
.cp-btn-pista,
.cp-btn-leccion{
  border: none;
  padding: 7px 13px;
  border-radius: 9px;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 800;
  font-family: 'DM Sans','Nunito',sans-serif;
  transition: transform .12s, box-shadow .12s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cp-btn-pista{
  background: #CCFBF1;
  color: #115E59;
  border: 1.5px solid #5EEAD4;
  box-shadow: 0 2px 0 #14B8A6;
}
.cp-btn-pista:hover{ transform: translateY(-1px); box-shadow: 0 3px 0 #14B8A6, 0 4px 10px rgba(15,118,110,.18); }
.cp-btn-pista:active{ transform: translateY(1px); box-shadow: 0 1px 0 #14B8A6; }
.cp-btn-leccion{
  background: linear-gradient(135deg, var(--cp-marca), #1E3A5F);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,35,66,.25);
}
.cp-btn-leccion:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,35,66,.35); }
.cp-btn-leccion:active{ transform: translateY(0); }

/* ── Análisis interno: Drag-and-Drop (D) mayo 2026 ────────────────────
   Sistema arrastrar-y-soltar al estilo del módulo de Simples.
   Clases con prefijo iidd- para no colisionar con Sint. */
.iidd-wrap{
  max-width: 880px;
  margin: 0 auto;
  padding-bottom: 20px;
}
/* Cabecera de la proposición */
.iidd-header{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.iidd-prop-badge{
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 999px;
}
.iidd-prop-of{ color: var(--muted); font-size: .82rem; }
.iidd-prop-text{
  width: 100%;
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
  padding: 8px 12px;
  background: var(--surface2);
  border-radius: 8px;
  line-height: 1.6;
}
/* Oración completa siempre visible en el análisis interno. Los tokens de la
   proposición que se está analizando se destacan; el resto se atenúa para
   dar contexto sin distraer. */
.iidd-prop-tok{ color: var(--ui-muted-2, #94A3B8); transition: color .15s; }
.iidd-prop-tok-on{
  color: var(--ui-ink, #0F2342);
  font-weight: 600;
  background: rgba(15,35,66,.07);
  padding: 1px 3px;
  border-radius: 4px;
}
.iidd-instr{
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.45;
}
/* Rejilla de bloques */
.iidd-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.iidd-blk{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface2);
  border: 1.5px solid var(--ui-border);
  border-radius: 10px;
  padding: 8px 14px 6px;
  min-width: 90px;
  max-width: 280px;
  flex: 1 1 auto;
}
.iidd-blk-words{
  font-family: 'DM Sans','Nunito',sans-serif;
  font-size: .98rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  word-break: break-word;
}
/* Hueco de drop */
.iidd-slot{
  min-width: 90px;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px dashed var(--ui-border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.iidd-slot-hint{ font-size:.72rem; color:var(--muted); pointer-events:none; }
.iidd-slot.iidd-ds-over{ border-color: var(--cp-marca); background: #EEF2FF; }
.iidd-slot.iidd-slot-ok{ border-style:solid; border-color:var(--ui-ok); background:var(--ui-ok-tint); }
.iidd-slot.iidd-slot-err{ border-style:solid; border-color:var(--ui-err); background:var(--ui-err-tint); }
/* Texto con respuesta correcta tras error */
.iidd-slot-correct{
  font-size: .68rem; color: var(--ui-ok); font-weight: 700; margin-top: 2px; text-align:center;
}
/* Etiquetas (pool y colocadas) */
.iidd-tag{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: .8rem;
  font-weight: 700;
  background: var(--surface2);
  border: 1.5px solid var(--ui-border);
  color: var(--ink);
  cursor: grab;
  user-select: none;
  transition: transform .1s, box-shadow .1s;
  white-space: nowrap;
}
.iidd-tag:hover{ transform:translateY(-2px); box-shadow:0 3px 8px rgba(15,35,66,.12); }
.iidd-tag.iidd-tag-sel{
  outline: 3px solid var(--cp-marca);
  outline-offset: 2px;
  transform: scale(1.06) translateY(-2px);
  box-shadow: 0 4px 12px rgba(15,35,66,.2);
}
.iidd-tag.iidd-tag-placed{ cursor:pointer; }
.iidd-tag.iidd-tag-wrong{ background:var(--ui-err-tint); border-color:var(--ui-err); color:var(--ui-err); }
/* Pool con 5 secciones: 2+3 (A.3, mayo 2026) */
.iidd-pool{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "pred suj  suj"
    "arg  adj  mar";
  gap: 10px;
  margin-bottom: 14px;
}
.iidd-pool-pred{ grid-area: pred; }
.iidd-pool-suj { grid-area: suj;  }
.iidd-pool-arg { grid-area: arg;  }
.iidd-pool-adj { grid-area: adj;  }
.iidd-pool-mar { grid-area: mar;  }
.iidd-pool-sec{
  background: var(--surface2);
  border: 1.5px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 10px 8px;
}
/* Colores de borde-superior por categoría — guía visual.
   3.2b (mayo 2026): Sujeto pasa de rojo crudo #DC2626 (que se confundía
   con el rojo semántico de error) a var(--ui-magenta) para coincidir
   con el pill del sticky y separar «categoría» de «error». */
.iidd-pool-pred{ border-top: 3px solid var(--ui-navy); }
.iidd-pool-suj { border-top: 3px solid var(--ui-magenta); }
.iidd-pool-arg { border-top: 3px solid var(--ui-cyan); }
.iidd-pool-adj { border-top: 3px solid var(--ui-teal); }
.iidd-pool-mar { border-top: 3px solid #7C3AED; }
.iidd-pool-hdr{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}
.iidd-pool-icon{ font-size:1.1rem; line-height:1; }
.iidd-pool-title{ font-size:.78rem; font-weight:800; color:var(--ink); }
.iidd-pool-sub{ font-size:.62rem; color:var(--muted); }
.iidd-tags-wrap{ display:flex; flex-wrap:wrap; gap:5px; }
.iidd-pool-empty{ font-size:.72rem; color:var(--muted); font-style:italic; }
/* Barra de acción */
.iidd-action{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.iidd-hint{ font-size:.78rem; color:var(--muted); }
.iidd-result-badge{
  font-size: .85rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
}
.iidd-res-ok{ background:var(--ui-ok-tint); color:var(--ui-ok); border:1.5px solid var(--ui-ok); }
.iidd-res-partial{ background:var(--ui-warn-tint); color:var(--ui-warn); border:1.5px solid var(--ui-warn); }
@media(max-width:600px){
  .iidd-pool{
    grid-template-columns: 1fr;
    grid-template-areas:
      "pred"
      "suj"
      "arg"
      "adj"
      "mar";
  }
  .iidd-grid{ flex-direction:column; }
  .iidd-blk{ max-width:100%; }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* PATCH FINAL E3.4: TOAST · BOTÓN SKIP · REDISEÑO NAVY (parte A del informe) */
/* ════════════════════════════════════════════════════════════════════════ */

/* ─── Toast flotante animado ─────────────────────────────────────────── */
.cp-toast{
  position:fixed;
  top:24px;
  left:50%;
  z-index:9999;
  display:flex;align-items:center;gap:14px;
  padding:14px 22px 14px 18px;
  background:linear-gradient(135deg, var(--cp-marca) 0%, #1E3A5F 100%);
  color:#fff;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(15,35,66,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  font-family:'DM Sans','Nunito',sans-serif;
  transform:translateX(-50%) translateY(-120%);
  opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s;
  max-width:min(440px, 90vw);
  pointer-events:none;
}
.cp-toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
}
.cp-toast.hide{
  transform:translateX(-50%) translateY(-30%);
  opacity:0;
}
.cp-toast-icon{font-size:1.8rem;line-height:1;flex-shrink:0;animation:cpToastBounce .55s cubic-bezier(.5,1.8,.5,.9)}
.cp-toast-body{flex:1;min-width:0}
.cp-toast-titulo{font-weight:800;font-size:1rem;letter-spacing:-.01em;margin-bottom:2px}
.cp-toast-sub{font-size:.82rem;opacity:.85;line-height:1.4}
.cp-toast-p1{background:linear-gradient(135deg, var(--cp-p1) 0%, #1E3A5F 100%)}
.cp-toast-p2{background:linear-gradient(135deg, #1E3A5F 0%, #3B5E8C 100%)}
.cp-toast-p3{background:linear-gradient(135deg, #0F766E 0%, #14B8A6 100%)}
.cp-toast-p4{background:linear-gradient(135deg, #A16207 0%, #D97706 100%)}
@keyframes cpToastBounce{
  0%{transform:scale(.5) rotate(-15deg);opacity:0}
  50%{transform:scale(1.25) rotate(8deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
@media(max-width:520px){
  .cp-toast{top:14px;padding:12px 18px;max-width:calc(100vw - 28px)}
  .cp-toast-icon{font-size:1.5rem}
  .cp-toast-titulo{font-size:.92rem}
  .cp-toast-sub{font-size:.78rem}
}

/* ─── Botón "Saltar paso" (escape hatch discreto) ────────────────────── */
.cp-btn-skip{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:7px 12px;
  border-radius:8px;
  background:transparent;
  color:#64748B;
  border:1.5px dashed #CBD5E1;
  font-family:'DM Sans',sans-serif;font-weight:600;font-size:.78rem;
  cursor:pointer;
  transition:all .15s;
}
.cp-btn-skip:hover{
  background:#F1F5F9;
  border-color:#94A3B8;
  color:#475569;
  border-style:solid;
}

/* ════════════════════════════════════════════════════════════════════════ */
/* REDISEÑO VISUAL — Paso de violeta a navy/teal                            */
/* Cambios bajo coste y alto impacto. Mantiene la estructura intacta.       */
/* ════════════════════════════════════════════════════════════════════════ */

/* Sobrescribir tokens de color del módulo compuestas */
:root{
  /* Color principal: navy oscuro (en lugar de violeta #7C3AED) */
  --cp-marca: #0F2342;
  --cp-marca-claro: #1E3A5F;
  --cp-marca-pastel: #DBEAFE;
  --cp-marca-bg: #EFF4FB;
  --cp-marca-borde: #93C5FD;
}

/* Topbar del módulo: ahora navy en vez de violeta */
.cp-topbar{
  background:var(--cp-marca);
  border-bottom-color:#0A1A33;
}

/* (Override antiguo del verde bosque #15803D retirado en mayo 2026.
   La paleta de la portada vive ahora en legacy.css con variables --portada-*
   y Compuestas usa --portada-teal, coherente con la imagen de referencia
   premium minimalista. El interior del módulo sigue siendo navy (var(--cp-marca)).) */

/* Chips de filtro activos */
.cp-chip:hover{border-color:var(--cp-marca);background:var(--cp-marca-bg)}
.cp-chip.active{background:var(--cp-marca);color:#fff;border-color:#0A1A33;box-shadow:0 2px 4px rgba(15,35,66,.18)}
.cp-chip.excl{background:#FEE2E2;color:#991B1B;border-color:#FECACA;}
.cp-chip.excl:hover{background:#FECACA;border-color:#DC2626}

/* Botones primarios */
.cp-btn-primary{
  background:var(--cp-marca);
  box-shadow:0 3px 10px rgba(15,35,66,.22);
}
.cp-btn-primary:hover:not(:disabled){background:var(--cp-marca-claro);box-shadow:0 5px 14px rgba(15,35,66,.28)}
.cp-btn-primary:disabled{background:#94A3B8}
.cp-btn-secondary{color:var(--cp-marca);border-color:var(--cp-marca)}
.cp-btn-secondary:hover{background:var(--cp-marca-bg)}

/* Stats del banco (chips violetas → navy) */
.cp-stat{background:var(--cp-marca-bg);border-color:var(--cp-marca-borde)}
.cp-stat-num{color:var(--cp-marca)}

/* Caja "tip" violeta → navy */
.cp-tip{background:var(--cp-marca-bg);border-color:var(--cp-marca-borde);color:var(--cp-marca)}

/* Instrucción AMPLIADA: borde violeta → navy */
.cp-instr-grande{
  background:linear-gradient(135deg, var(--cp-marca-bg) 0%, #FAFAFA 100%);
  border-color:var(--cp-marca-borde);
  border-left-color:var(--cp-marca);
  box-shadow:0 4px 14px rgba(15,35,66,.08);
}
.cp-instr-grande .cp-instr-titulo{color:var(--cp-marca)}

/* Tokens hover: ya neutro (no tocar) */
/* Tokens seleccionados: violeta → navy */
.cp-tok.selected{background:var(--cp-marca-pastel);border-color:var(--cp-marca);color:var(--cp-marca)}

/* Tokens en mensaje "correcto" (verdes) y "error" (rojos): coherentes ya */

/* Tally numérico */
.cp-tally-num.ok{background:#DCFCE7;color:#15803D}
.cp-tally-num.err{background:#FEE2E2;color:#991B1B}

/* Feedback messages */
.cp-feedback-info{background:var(--cp-marca-bg);border-color:var(--cp-marca-borde);color:var(--cp-marca)}

/* Sub-paso 1 de fase 4 (P1 = navy, OK). Sub-paso 2 colores armonizados. */
:root{
  /* Paleta proposicional revisada: P1 y P2 en gama navy-teal coherente */
  --cp-p1: var(--cp-marca);       /* navy oscuro */
  --cp-p1-bg: #DBEAFE;
  --cp-p1-border: #3B82F6;
  --cp-p2: #0F766E;       /* teal */
  --cp-p2-bg: #CCFBF1;
  --cp-p2-border: #14B8A6;
  --cp-p3: #B45309;       /* ámbar */
  --cp-p3-bg: #FEF3C7;
  --cp-p3-border: #F59E0B;
  --cp-p4: #BE185D;       /* fuchsia oscuro */
  --cp-p4-bg: #FCE7F3;
  --cp-p4-border: #EC4899;
}

/* Mantener consistencia en los gradients del toast con la nueva paleta */
.cp-toast-p2{background:linear-gradient(135deg, var(--cp-p2) 0%, #14B8A6 100%)}
.cp-toast-p3{background:linear-gradient(135deg, var(--cp-p3) 0%, #F59E0B 100%)}
.cp-toast-p4{background:linear-gradient(135deg, var(--cp-p4) 0%, #EC4899 100%)}

/* Selector de proposición activa: contrastes ajustados */
.cp-prop-btn[data-p="1"]{color:var(--cp-p1);border-color:var(--cp-p1-border)}
.cp-prop-btn[data-p="2"]{color:var(--cp-p2);border-color:var(--cp-p2-border)}
.cp-prop-btn[data-p="3"]{color:var(--cp-p3);border-color:var(--cp-p3-border)}
.cp-prop-btn[data-p="4"]{color:var(--cp-p4);border-color:var(--cp-p4-border)}

/* ─── Overrides para limpiar el violeta residual ──────────────────────── */

/* Barra de progreso: paso activo en navy */
.cp-progress{
  background:var(--cp-marca-bg);
  border-color:var(--cp-marca-borde);
}
.cp-progress-step.active{
  background:var(--cp-marca);
  color:#fff;
  border-color:#0A1A33;
  box-shadow:0 2px 6px rgba(15,35,66,.25);
}

/* Atributo/opción seleccionada en clasificación: navy en vez de violeta */
.cp-clasif-opt:hover:not(.locked){
  background:var(--cp-marca-bg);
  border-color:var(--cp-marca-borde);
}
.cp-clasif-opt.selected{
  background:var(--cp-marca-pastel);
  border-color:var(--cp-marca);
  color:var(--cp-marca);
}

/* Opción descartada: cuando el alumno acierta una pregunta, las otras opciones
   se desvanecen con animación suave para mantener visible solo la elegida.
   Esto reduce el scroll vertical en la fase de "Clasificar y relacionar". */
.cp-clasif-opt.descartada{
  animation: cpOptionFadeOut .55s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}
@keyframes cpOptionFadeOut{
  0%   { opacity:1; max-height:80px; padding:8px 14px; margin:0; border-width:2px; transform:scale(1) }
  50%  { opacity:.3; transform:scale(.95) }
  100% { opacity:0; max-height:0; padding:0 14px; margin-bottom:-8px; border-width:0; transform:scale(.92) }
}
.cp-clasif-opt-familia.descartada{
  animation: cpOptionFadeOutBig .55s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes cpOptionFadeOutBig{
  0%   { opacity:1; max-height:120px; padding:12px 16px; margin-bottom:8px; border-width:2px }
  50%  { opacity:.3; transform:scale(.95) }
  100% { opacity:0; max-height:0; padding:0 16px; margin-bottom:0; border-width:0 }
}

/* La opción correcta queda destacada después de las animaciones */
.cp-clasif-opt.correcto.unica{
  animation: cpCorrectoGlow .8s ease-out;
}
@keyframes cpCorrectoGlow{
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6) }
  100% { box-shadow: 0 0 0 8px rgba(22,163,74,0) }
}

/* Resumen final: números y stats en navy */
.cp-summary-stat{
  background:var(--cp-marca-bg);
  border-color:var(--cp-marca-borde);
}
.cp-summary-stat-num{color:var(--cp-marca)}

/* Spinner de carga */
.cp-loading .spinner{border-top-color:var(--cp-marca)}

/* Flecha de relación en listas */
.cp-list-item .cp-rel-arrow{color:var(--cp-marca)}

/* Análisis discursivo en el resumen final */
.cp-analisis-discursivo{
  background:var(--paper);
  border:1.5px solid var(--parch-border);
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:16px;
  box-shadow:0 4px 14px rgba(15,35,66,.06);
}
.cp-analisis-titulo{
  font-family:'Fraunces','Georgia',serif;font-weight:700;font-size:1.1rem;
  color:var(--cp-marca);margin:0 0 10px;letter-spacing:-.01em;
}
.cp-analisis-oracion{
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:.98rem;font-weight:600;
  color:var(--ink);
  background:var(--cp-marca-bg);
  border-left:4px solid var(--cp-marca);
  padding:10px 14px;
  border-radius:8px;
  margin:0 0 14px;
  line-height:1.5;
}
.cp-analisis-cuerpo{
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:.92rem;line-height:1.65;
  color:var(--ink2);
}
.cp-analisis-cuerpo p{margin:0 0 10px}
.cp-analisis-cuerpo p:last-child{margin:0}
.cp-analisis-cuerpo b{color:var(--ink);font-weight:700}

/* ── Indicadores de estado de guardado en Sheets ──────────────────── */
.cp-save-state{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  font-family:'DM Sans','Nunito',sans-serif;
  font-size:.82rem;font-weight:600;
  border:1.5px solid;
}
.cp-save-ok{
  background:#DCFCE7;color:#15803D;border-color:#86EFAC;
}
.cp-save-enviando{
  background:#DBEAFE;color:#1E3A8A;border-color:#93C5FD;
  animation:cpPulse 1.4s ease-in-out infinite;
}
@keyframes cpPulse{
  0%,100%{opacity:1}
  50%{opacity:.55}
}
.cp-save-err{
  background:#FEE2E2;color:#991B1B;border-color:#FCA5A5;
  cursor:help;
}

/* Card de subordinada (lista lectura): borde lateral navy en vez de violeta */
.cp-prop.subordinada{border-left-color:var(--cp-marca)}
.cp-prop.subordinada .cp-prop-id{background:var(--cp-marca)}

/* ════════════════════════════════════════════════════════════════════════
   PORTADA · versión LIGHT activa + RETRO-FUTURISTA guardada (2026-05-29)
   ────────────────────────────────────────────────────────────────────────
   La portada usa por defecto la versión LIGHT (clara y aireada). La versión
   retro-futurista oscura se CONSERVA más abajo bajo la clase `.fx-futurista`
   y está INACTIVA: para reactivarla basta con añadir esa clase al elemento
   #screen-portada (desde el HTML o JS). Capa aditiva y reversible; las
   tarjetas siguen siendo blancas → legibilidad garantizada.
   ──────────────────────────────────────────────────────────────────────── */

/* El <svg> que aloja el filtro de grano se renderizaba como caja inline de
   ~150px y empujaba todo el contenido hacia abajo (banda clara visible ahora
   que la portada es oscura). Lo sacamos del flujo sin desactivar el filtro. */
body.theme-new-ui .paper-grain-filter{position:absolute;width:0;height:0;overflow:hidden}

/* ── PORTADA LIGHT (activa) ───────────────────────────────────────────────
   Premium minimalista (mayo 2026): crema cálido + petróleo + esmeralda.
   Sin auroras pastel ni degradados violetas. Decoración muy sutil: dos
   círculos veladísimos en los flancos y dos rejillas de puntos en las
   esquinas, como en la referencia editorial. */
body.theme-new-ui #screen-portada:not(.fx-futurista){
  background:var(--portada-bg);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* Decoración: círculos suaves en los flancos (muy desvanecidos) */
body.theme-new-ui #screen-portada:not(.fx-futurista)::before{
  content:'';
  position:absolute; inset:0;
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(220px 220px at -3% 42%, rgba(15,118,110,0.06), transparent 70%),
    radial-gradient(280px 280px at 103% 62%, rgba(16,42,67,0.05), transparent 70%);
}
/* (Retirada mayo 2026: la rejilla de puntos en las esquinas distraía junto
   al logo. Se conservan solo los círculos veladísimos de los flancos del
   ::before. Si en el futuro se quiere recuperar la textura de puntos, estaba
   aquí como ::after con dos radial-gradient enmascarados en las esquinas.) */
/* Título: color sólido petróleo, sin degradados */
body.theme-new-ui #screen-portada:not(.fx-futurista) .portada-hero h1{
  background:none;
  -webkit-text-fill-color:initial;
  color:var(--portada-navy);
  filter:none;
}
/* Tarjetas: elevación suave navy-tinted */
body.theme-new-ui #screen-portada:not(.fx-futurista) .mod-card{
  box-shadow:
    0 1px 2px rgba(15,42,67,0.05),
    0 8px 22px rgba(15,42,67,0.07);
}
body.theme-new-ui #screen-portada:not(.fx-futurista) .mod-card:hover{
  box-shadow:
    0 1px 2px rgba(15,42,67,0.06),
    0 14px 32px rgba(15,42,67,0.12);
}

/* ── PORTADA RETRO-FUTURISTA (GUARDADA · inactiva) ────────────────────────
   Fondo profundo índigo→violeta sobre el que «flotan» las tarjetas. Para
   reactivar, añade la clase `fx-futurista` a #screen-portada. */
body.theme-new-ui #screen-portada.fx-futurista{
  background:
    radial-gradient(130% 90% at 50% -15%, rgba(124,58,237,.25), transparent 55%),
    linear-gradient(165deg, #0a0f24 0%, #150d33 48%, #241046 100%);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* Capa 1 de ondas de color oscilantes ("gamas que se distribuyen por la pantalla") */
body.theme-new-ui #screen-portada.fx-futurista::before{
  content:'';
  position:absolute; inset:-30%;
  z-index:-2;
  background:
    radial-gradient(38% 50% at 22% 30%, rgba(124,58,237,.55), transparent 70%),
    radial-gradient(40% 55% at 80% 24%, rgba(236,72,153,.42), transparent 72%),
    radial-gradient(46% 60% at 66% 80%, rgba(34,211,238,.40), transparent 70%),
    radial-gradient(42% 56% at 14% 86%, rgba(59,130,246,.38), transparent 72%);
  filter:blur(10px) saturate(1.2);
  animation:portada-aurora 22s ease-in-out infinite alternate;
  will-change:transform;
}
/* Capa 2: otra velocidad y dirección → movimiento orgánico, no mecánico */
body.theme-new-ui #screen-portada.fx-futurista::after{
  content:'';
  position:absolute; inset:-30%;
  z-index:-2;
  background:
    radial-gradient(36% 46% at 70% 36%, rgba(167,139,250,.32), transparent 70%),
    radial-gradient(40% 50% at 30% 68%, rgba(244,114,182,.26), transparent 72%);
  mix-blend-mode:screen;
  animation:portada-aurora2 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes portada-aurora{
  0%  {transform:translate3d(-4%,-3%,0) scale(1.05) rotate(0deg)}
  50% {transform:translate3d(5%,5%,0)   scale(1.18) rotate(6deg)}
  100%{transform:translate3d(-2%,7%,0)  scale(1.08) rotate(-5deg)}
}
@keyframes portada-aurora2{
  0%  {transform:translate3d(4%,2%,0)   scale(1.10)}
  50% {transform:translate3d(-6%,-4%,0) scale(1.00)}
  100%{transform:translate3d(3%,-2%,0)  scale(1.16)}
}

/* Logo: halo de neón */
body.theme-new-ui #screen-portada.fx-futurista .portada-logo{
  background:rgba(255,255,255,.97);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22),
    0 8px 30px rgba(124,58,237,.45),
    0 0 46px rgba(34,211,238,.22);
}

/* Título: degradado luminoso + brillo (legible sobre el fondo oscuro) */
body.theme-new-ui #screen-portada.fx-futurista .portada-hero h1{
  background:linear-gradient(92deg,#ffffff 0%,#c4b5fd 38%,#7dd3fc 72%,#f0abfc 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 2px 20px rgba(124,58,237,.45));
}
body.theme-new-ui #screen-portada.fx-futurista .subtitle-rule{ color:rgba(226,232,240,.85) }
body.theme-new-ui #screen-portada.fx-futurista .subtitle-rule::before,
body.theme-new-ui #screen-portada.fx-futurista .subtitle-rule::after{
  background:rgba(226,232,240,.7); opacity:.55;
}
body.theme-new-ui #screen-portada.fx-futurista .portada-inkmark{ color:#e2e8f0; opacity:.45 }
body.theme-new-ui #screen-portada.fx-futurista .portada-inkmark:hover{ opacity:.8 }

/* Tarjetas: sombra «flotante» sobre el neón + brillo violeta al pasar */
body.theme-new-ui #screen-portada.fx-futurista .mod-card{
  box-shadow:0 2px 8px rgba(0,0,0,.28), 0 18px 42px rgba(10,15,36,.5);
}
body.theme-new-ui #screen-portada.fx-futurista .mod-card:hover{
  box-shadow:0 2px 8px rgba(0,0,0,.28), 0 24px 54px rgba(124,58,237,.5);
}

/* ── Entrada dramática (se reproduce al cargar la portada) ── */
body.theme-new-ui #screen-portada .portada-hero{
  animation:portada-hero-in .9s var(--ui-ease) both;
}
body.theme-new-ui #screen-portada .mod-card{
  animation:portada-rise .7s var(--ui-ease) both;
}
body.theme-new-ui #screen-portada .mod-card:nth-child(1){animation-delay:.10s}
body.theme-new-ui #screen-portada .mod-card:nth-child(2){animation-delay:.18s}
body.theme-new-ui #screen-portada .mod-card:nth-child(3){animation-delay:.26s}
body.theme-new-ui #screen-portada .mod-card:nth-child(4){animation-delay:.34s}
body.theme-new-ui #screen-portada .mod-card:nth-child(5){animation-delay:.42s}
@keyframes portada-hero-in{
  from{opacity:0; transform:translateY(-16px) scale(.97); filter:blur(5px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}
@keyframes portada-rise{
  from{opacity:0; transform:translateY(28px) scale(.96)}
  to  {opacity:1; transform:none}
}

/* Accesibilidad: respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce){
  body.theme-new-ui #screen-portada::before,
  body.theme-new-ui #screen-portada::after,
  body.theme-new-ui #screen-portada .portada-hero,
  body.theme-new-ui #screen-portada .mod-card{ animation:none !important }
}
/* ═══════════════════ FIN PORTADA RETRO-FUTURISTA ═══════════════════ */


/* ════════════════════════════════════════════════════════════════════════
   ARCADE · LOGIN «FURIA AÑOS 90» (synthwave / recreativa) (2026-05-29)
   ────────────────────────────────────────────────────────────────────────
   Solo se activa cuando el alumno entra por ARCADE: goModule('arcade') añade
   la clase `.login-arcade` a #screen-login. El resto de módulos (Sintaxis,
   Sintagmas, Maestro) conservan el login claro de siempre. Reversible:
   borrar este bloque y la línea de classList.toggle en navigation.js.
   ──────────────────────────────────────────────────────────────────────── */
body.theme-new-ui #screen-login.login-arcade{
  background:
    radial-gradient(70% 42% at 50% 64%, rgba(255,47,185,.22), transparent 70%),
    radial-gradient(120% 80% at 50% 6%, rgba(168,85,247,.30), transparent 60%),
    linear-gradient(180deg,#1a0533 0%,#0c0220 55%,#05010f 100%);
  position:relative; overflow:hidden; isolation:isolate;
}
/* Rejilla synthwave en perspectiva, deslizándose hacia el espectador */
body.theme-new-ui #screen-login.login-arcade::before{
  content:''; position:absolute; left:-50%; right:-50%; bottom:-12%; height:72%;
  z-index:-1;
  background-image:
    repeating-linear-gradient(to right, rgba(255,47,185,.55) 0 2px, transparent 2px 80px),
    repeating-linear-gradient(to bottom, rgba(34,211,238,.50) 0 2px, transparent 2px 80px);
  background-size:80px 80px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:50% 100%;
  animation:arcade-grid 6s linear infinite;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 85%);
          mask-image:linear-gradient(to top,#000 8%,transparent 85%);
}
@keyframes arcade-grid{ from{background-position:0 0} to{background-position:0 80px} }
/* Líneas de barrido CRT por encima de todo (sutiles, no estorban la lectura) */
body.theme-new-ui #screen-login.login-arcade::after{
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 4px);
}
/* El contenido por encima de la rejilla y por debajo del barrido */
body.theme-new-ui #screen-login.login-arcade > div{ position:relative; z-index:2; }

/* Panel principal: cristal oscuro con marco de neón pulsante */
body.theme-new-ui #screen-login.login-arcade .login-card{
  background:linear-gradient(165deg, rgba(35,12,64,.92), rgba(15,5,34,.95)) !important;
  border:2px solid rgba(34,211,238,.55) !important;
  border-radius:18px !important;
  animation:arcade-card-glow 2.6s ease-in-out infinite alternate;
}
@keyframes arcade-card-glow{
  from{box-shadow:0 0 0 1px rgba(255,47,185,.30),0 0 22px rgba(34,211,238,.22),0 0 46px rgba(168,85,247,.24),inset 0 0 26px rgba(124,58,237,.10)}
  to  {box-shadow:0 0 0 1px rgba(255,47,185,.50),0 0 34px rgba(34,211,238,.40),0 0 72px rgba(168,85,247,.40),inset 0 0 34px rgba(124,58,237,.16)}
}
/* Etiquetas en clave neón */
body.theme-new-ui #screen-login.login-arcade .field label{
  color:#a5f3fc !important;
  text-transform:uppercase; letter-spacing:.10em; font-weight:800;
  text-shadow:0 0 8px rgba(34,211,238,.5);
}
body.theme-new-ui #screen-login.login-arcade .field label span{ color:#c4b5fd !important; }
/* Campos de texto y selectores: fondo oscuro, texto claro, foco magenta */
body.theme-new-ui #screen-login.login-arcade .input{
  background:rgba(0,0,0,.45) !important;
  color:#fff !important;
  border:1.5px solid rgba(34,211,238,.45) !important;
  border-radius:10px !important;
}
body.theme-new-ui #screen-login.login-arcade .input::placeholder{ color:rgba(226,232,240,.45) !important; }
body.theme-new-ui #screen-login.login-arcade .input:focus{
  border-color:#ff2fb9 !important;
  box-shadow:0 0 0 3px rgba(255,47,185,.25), 0 0 16px rgba(255,47,185,.40) !important;
  outline:none !important;
}
/* Aviso de cambio de cuaderno, en clave neon (mismo motivo que abajo:
   el texto oscuro del tema academico no se lee sobre el morado). */
body.theme-new-ui #screen-login.login-arcade .login-cambio{
  background:rgba(0,0,0,.42) !important;
  border:1px solid rgba(251,191,36,.45) !important;
  color:#e2e8f0 !important;
}
body.theme-new-ui #screen-login.login-arcade .login-cambio .lcam-text strong{
  color:#fbbf24 !important;
}
body.theme-new-ui #screen-login.login-arcade .login-cambio .lcam-sub{
  color:rgba(226,232,240,.62) !important;
}
body.theme-new-ui #screen-login.login-arcade .login-cambio .lcam-btn{
  background:rgba(251,191,36,.12) !important;
  border:1px solid rgba(251,191,36,.45) !important;
  color:#fde68a !important;
}

/* Distintivo del cuaderno, en clave neon: en el login del Arcade el texto
   oscuro del tema academico se volvia ilegible sobre el fondo morado. */
body.theme-new-ui #screen-login.login-arcade .login-cuaderno{
  background:rgba(0,0,0,.38) !important;
  border:1px solid rgba(34,211,238,.40) !important;
  color:#e2e8f0 !important;
}
body.theme-new-ui #screen-login.login-arcade .login-cuaderno .lc-text strong{
  color:#ff2fb9 !important;
  text-shadow:0 0 10px rgba(255,47,185,.45);
}
body.theme-new-ui #screen-login.login-arcade .login-cuaderno .lc-sub{
  color:rgba(226,232,240,.62) !important;
}
/* Puerta sin cuaderno, en clave neon (mismo motivo). */
body.theme-new-ui #screen-login.login-arcade .login-sin-cuaderno{
  background:rgba(0,0,0,.38) !important;
  border:1px solid rgba(34,211,238,.40) !important;
  color:#e2e8f0 !important;
}
body.theme-new-ui #screen-login.login-arcade .login-sin-cuaderno .lsc-titulo{
  color:#ff2fb9 !important;
}
body.theme-new-ui #screen-login.login-arcade .login-sin-cuaderno .lsc-libre{
  color:rgba(226,232,240,.62) !important;
}

/* Separador y botón «volver» */
body.theme-new-ui #screen-login.login-arcade hr.divider{
  border-top:1px solid rgba(34,211,238,.25);
  box-shadow:0 0 10px rgba(34,211,238,.3);
}
body.theme-new-ui #screen-login.login-arcade > div > button{
  color:#a5f3fc !important; text-shadow:0 0 8px rgba(34,211,238,.4);
}
/* Encabezado «🎮 Arcade» como rótulo de recreativa + «INSERT COIN» parpadeante */
body.theme-new-ui #screen-login.login-arcade #login-module-panel::before{
  content:'★ INSERT COIN ★'; display:block; text-align:center;
  color:#fde047; font-weight:900; letter-spacing:.2em; font-size:.7rem;
  text-shadow:0 0 10px rgba(253,224,71,.7); margin-bottom:8px;
  animation:arcade-blink 1.1s steps(1) infinite;
}
@keyframes arcade-blink{ 0%,49%{opacity:1} 50%,100%{opacity:.15} }
body.theme-new-ui #screen-login.login-arcade #login-module-panel > p:first-of-type{
  color:#ff2fb9 !important;
  text-transform:uppercase; letter-spacing:.14em; font-weight:900; font-size:1.05rem;
  text-shadow:0 0 10px rgba(255,47,185,.7), 0 0 26px rgba(255,47,185,.45);
}
/* Texto de ayuda al pie */
body.theme-new-ui #screen-login.login-arcade .login-card > p{ color:rgba(226,232,240,.6) !important; }
/* Tarjetas de modo: realce de neón al pasar (siguen claras y legibles) */
body.theme-new-ui #screen-login.login-arcade .arc-mode-card{
  box-shadow:0 0 0 1px rgba(34,211,238,.10), 0 4px 14px rgba(0,0,0,.4);
}
body.theme-new-ui #screen-login.login-arcade .arc-mode-card:hover{
  box-shadow:0 0 18px rgba(34,211,238,.35), 0 10px 26px rgba(0,0,0,.5);
}
/* Botón «¡Empezar!»: pulsador neón de recreativa */
body.theme-new-ui #screen-login.login-arcade .btn.btn-primary{
  background:linear-gradient(135deg,#ff2fb9,#a855f7,#22d3ee) !important;
  background-size:200% 100% !important;
  color:#fff !important; font-weight:900 !important;
  text-transform:uppercase; letter-spacing:.12em; border:none !important;
  box-shadow:0 0 18px rgba(255,47,185,.5), 0 6px 20px rgba(168,85,247,.4) !important;
  animation:arcade-btn 3s linear infinite;
}
@keyframes arcade-btn{ from{background-position:0% 0} to{background-position:200% 0} }
body.theme-new-ui #screen-login.login-arcade .btn.btn-primary:hover{
  filter:brightness(1.1);
  box-shadow:0 0 28px rgba(255,47,185,.7), 0 8px 26px rgba(168,85,247,.55) !important;
}
/* Accesibilidad: sin movimiento para quien lo pide */
@media (prefers-reduced-motion: reduce){
  body.theme-new-ui #screen-login.login-arcade::before,
  body.theme-new-ui #screen-login.login-arcade .login-card,
  body.theme-new-ui #screen-login.login-arcade #login-module-panel::before,
  body.theme-new-ui #screen-login.login-arcade .btn.btn-primary{ animation:none !important }
}
/* ═══════════════════ FIN ARCADE LOGIN FURIA AÑOS 90 ═══════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   LA FÁBRICA DE PALABRAS — #screen-fabrica (F1, jul-2026)

   Dirección estética: «taller editorial». La pantalla es un banco de
   trabajo de imprenta, no una app de colores planos:
     · Las PALABRAS van en Fraunces — son el material que se manipula.
     · La INTERFAZ va en DM Sans — son las herramientas, deben callarse.
     · Sombra dura (0 3px 0) en vez de blur difuso: cada pieza se apoya
       en la mesa como un tipo de imprenta. Es el mismo lenguaje que ya
       usa .btn-primary del tema (0 3px 0 var(--blue-dk)), no un invento.
     · Cero degradados. El acento es plano (--fab-oliva) y solo aparece
       donde hay una acción o un resultado.

   Todo el color sale de las variables --fab-* de tokens.css. Aquí no
   hay ni un hex de marca escrito a mano, a propósito: cambiar el color
   del módulo es tocar tokens.css y nada más.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Cabecera del reto ── */
body.theme-new-ui #screen-fabrica .fab-titulo{
  font-family:'Fraunces',serif;font-size:1.32rem;font-weight:700;
  line-height:1.32;letter-spacing:-.015em;text-align:center;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-corpus{
  text-align:center;margin-top:10px;font-family:'Fraunces',serif;
  font-size:.9rem;color:var(--fab-oliva);letter-spacing:.04em;
}
body.theme-new-ui #screen-fabrica .fab-count{
  text-align:center;font-size:.8rem;color:var(--ui-muted);margin-bottom:12px;
}

/* ── Botón de acción (Comprobar / Construir / Empezar / Siguiente) ── */
body.theme-new-ui #screen-fabrica .fab-btn{
  display:block;padding:13px 26px;border:none;border-radius:var(--ui-r);
  background:var(--fab-oliva);color:#fff;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.01em;cursor:pointer;
  box-shadow:0 3px 0 var(--fab-oliva-dk);
  transition:transform .18s var(--ui-ease-bounce),box-shadow .18s,filter .15s;
}
body.theme-new-ui #screen-fabrica .fab-btn:hover{
  transform:translateY(-2px);box-shadow:0 5px 0 var(--fab-oliva-dk);filter:brightness(1.05);
}
body.theme-new-ui #screen-fabrica .fab-btn:active{
  transform:translateY(2px);box-shadow:0 1px 0 var(--fab-oliva-dk);
}
body.theme-new-ui #screen-fabrica .fab-btn-block{width:100%;max-width:340px;margin:0 auto}

/* Secundario: deshacer, limpiar. Presencia mínima, nunca compite. */
body.theme-new-ui #screen-fabrica .fab-btn-sm{
  padding:7px 15px;border-radius:var(--ui-r-sm);
  border:1.5px solid var(--ui-border-strong);background:var(--ui-surface);
  font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;
  color:var(--ui-muted);cursor:pointer;transition:border-color .15s,color .15s;
}
body.theme-new-ui #screen-fabrica .fab-btn-sm:hover{
  border-color:var(--fab-oliva);color:var(--fab-oliva);
}

/* ── Opciones grandes (intruso, par mínimo, juicio, prueba, cascada) ──
   Entrada escalonada: un solo momento coreografiado al renderizar el
   ítem, que es lo que da sensación de producto acabado. */
body.theme-new-ui #screen-fabrica .fab-stack{display:flex;flex-direction:column;gap:10px}
body.theme-new-ui #screen-fabrica .fab-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
body.theme-new-ui #screen-fabrica .fab-op{
  padding:15px 20px;border:1.5px solid var(--fab-border);border-radius:var(--ui-r);
  background:var(--ui-surface);
  font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;
  color:var(--ui-ink);cursor:pointer;text-align:center;
  box-shadow:0 2px 0 rgba(92,107,46,.16);
  transition:transform .16s var(--ui-ease-bounce),box-shadow .16s,border-color .16s,background .16s;
  animation:fab-rise .32s var(--ui-ease) both;
}
body.theme-new-ui #screen-fabrica .fab-op:hover{
  transform:translateY(-2px);border-color:var(--fab-oliva);
  background:var(--fab-tint);box-shadow:0 4px 0 rgba(92,107,46,.22);
}
body.theme-new-ui #screen-fabrica .fab-op:nth-child(1){animation-delay:.02s}
body.theme-new-ui #screen-fabrica .fab-op:nth-child(2){animation-delay:.07s}
body.theme-new-ui #screen-fabrica .fab-op:nth-child(3){animation-delay:.12s}
body.theme-new-ui #screen-fabrica .fab-op:nth-child(4){animation-delay:.17s}
@keyframes fab-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Estados tras responder. Nunca solo color: el ✓/✗ lo pone el motor. */
body.theme-new-ui #screen-fabrica .fab-op.is-ok{
  background:var(--ui-ok-tint);border-color:var(--ui-ok);color:#14532D;
  box-shadow:0 2px 0 rgba(21,128,61,.25);
}
body.theme-new-ui #screen-fabrica .fab-op.is-bad{
  background:var(--ui-err-tint);border-color:var(--ui-err);color:#881337;
  box-shadow:0 2px 0 rgba(190,18,60,.22);
}
body.theme-new-ui #screen-fabrica .fab-op.is-dim{opacity:.45;box-shadow:none}
/* Selección previa a comprobar (frontera: hay que marcar DOS lecturas). */
body.theme-new-ui #screen-fabrica .fab-op.is-sel{
  background:var(--fab-tint-2);border-color:var(--fab-oliva);color:var(--fab-oliva-dk);
  box-shadow:0 2px 0 var(--fab-oliva);
}

/* Botón «No hay intrusa» (intruso, schema v1.2 §13): siempre presente,
   separado visualmente del resto para no leerse como una palabra más. */
body.theme-new-ui #screen-fabrica .fab-op-sin{
  margin-top:6px;border-style:dashed;font-family:'DM Sans',sans-serif;
  font-size:.88rem;font-weight:700;color:var(--ui-muted);
}
body.theme-new-ui #screen-fabrica .fab-op-sin:hover{color:var(--fab-oliva-dk)}

/* Contexto del juicio de gramaticalidad (v1.2 §13): frase breve antes de
   la forma en foco, para diagnosticar una operación concreta. */
body.theme-new-ui #screen-fabrica .fab-contexto{
  text-align:center;font-family:'DM Sans',sans-serif;font-style:italic;
  font-size:.88rem;color:var(--ui-muted);margin-bottom:6px;
}

/* La palabra en foco: par mínimo, juicio, frontera y cascada presentan
   una forma y preguntan por ella. Va sola, grande y centrada — es el
   objeto de estudio, no un título de sección. */
body.theme-new-ui #screen-fabrica .fab-foco{
  text-align:center;font-family:'Fraunces',serif;
  font-size:1.5rem;font-weight:600;line-height:1.3;
  color:var(--ui-ink);letter-spacing:.01em;
}

/* ── Fichas de palabra (agrupa, monta, cadena, capas) ── */
body.theme-new-ui #screen-fabrica .fab-chip{
  display:inline-block;margin:3px;padding:8px 14px;
  border:1.5px solid var(--fab-border);border-radius:var(--ui-r-sm);
  background:var(--ui-surface);
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--ui-ink);
  cursor:pointer;transition:transform .14s var(--ui-ease-bounce),border-color .14s,background .14s;
}
body.theme-new-ui #screen-fabrica .fab-chip:hover{transform:translateY(-1px);border-color:var(--fab-oliva)}
body.theme-new-ui #screen-fabrica .fab-chip.is-sel{
  background:var(--fab-tint-2);border-color:var(--fab-oliva);color:var(--fab-oliva-dk);
}
body.theme-new-ui #screen-fabrica .fab-chip.is-ok{
  background:var(--ui-ok-tint);border-color:var(--ui-ok);color:#14532D;cursor:default;
}
body.theme-new-ui #screen-fabrica .fab-chip.is-bad{
  background:var(--ui-err-tint);border-color:var(--ui-err);color:#881337;cursor:default;
}

/* ── Cestas (agrupa) ── */
body.theme-new-ui #screen-fabrica .fab-cesta{
  border:1.5px dashed var(--fab-border);border-radius:var(--ui-r);
  padding:12px 14px;margin-bottom:10px;background:var(--ui-surface);
}
body.theme-new-ui #screen-fabrica .fab-cesta.is-done{border-style:solid}
body.theme-new-ui #screen-fabrica .fab-cesta-nombre{
  font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:700;
  color:var(--fab-oliva-dk);letter-spacing:.02em;margin-bottom:8px;
}
body.theme-new-ui #screen-fabrica .fab-cesta-body{min-height:34px}

/* ── La palabra bajo la lupa (piezas · cortar) ──
   Es el momento central del módulo: la palabra se presenta en grande,
   con aire, y los puntos de corte son marcas tipográficas reales. */
body.theme-new-ui #screen-fabrica .fab-word{
  text-align:center;font-family:'Fraunces',serif;
  font-size:1.75rem;font-weight:600;line-height:2.1;color:var(--ui-ink);
  letter-spacing:.02em;
}
body.theme-new-ui #screen-fabrica .fab-cut{
  display:inline-block;width:16px;cursor:pointer;
  color:var(--ui-muted-2);font-weight:400;
  transition:color .14s,transform .14s var(--ui-ease-bounce);
}
body.theme-new-ui #screen-fabrica .fab-cut:hover{color:var(--fab-oliva-soft);transform:scaleY(1.25)}
body.theme-new-ui #screen-fabrica .fab-cut.is-on{
  color:var(--fab-oliva);font-weight:700;transform:scaleY(1.3);
}

/* ── Etiquetar piezas (estación 3) ── */
body.theme-new-ui #screen-fabrica .fab-piece{text-align:center}
body.theme-new-ui #screen-fabrica .fab-piece-txt{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;
  color:var(--ui-ink);margin-bottom:8px;
  padding-bottom:6px;border-bottom:2px solid var(--fab-border);
}
body.theme-new-ui #screen-fabrica .fab-tag{
  display:block;width:100%;padding:6px 10px;margin-bottom:4px;
  border:1.5px solid var(--ui-border);border-radius:var(--ui-r-sm);
  background:var(--ui-surface);
  font-family:'DM Sans',sans-serif;font-size:.76rem;font-weight:600;
  color:var(--ui-muted);cursor:pointer;transition:all .14s;
}
body.theme-new-ui #screen-fabrica .fab-tag:hover{border-color:var(--fab-oliva-soft);color:var(--fab-oliva-dk)}
body.theme-new-ui #screen-fabrica .fab-tag.is-sel{
  background:var(--fab-tint-2);border-color:var(--fab-oliva);
  color:var(--fab-oliva-dk);font-weight:700;
}

/* ── Cadena / capas: la escalera de fabricación ── */
body.theme-new-ui #screen-fabrica .fab-chain{
  text-align:center;min-height:32px;margin-bottom:12px;
  font-family:'Fraunces',serif;font-size:1.05rem;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-chain .fab-arrow{
  color:var(--fab-oliva);margin:0 6px;font-weight:400;
}
body.theme-new-ui #screen-fabrica .fab-chain-empty{color:var(--ui-muted-2);font-style:italic;font-size:.9rem}

/* ── Selector de nivel ── */
body.theme-new-ui #screen-fabrica .fab-nivel{
  display:block;width:100%;text-align:left;padding:16px 20px;margin-bottom:10px;
  border:1.5px solid var(--fab-border);border-radius:var(--ui-r);
  background:var(--ui-surface);cursor:pointer;
  box-shadow:0 2px 0 rgba(92,107,46,.16);
  transition:transform .18s var(--ui-ease-bounce),box-shadow .18s,border-color .18s;
}
body.theme-new-ui #screen-fabrica .fab-nivel:hover{
  transform:translateY(-2px);border-color:var(--fab-oliva);
  box-shadow:0 4px 0 rgba(92,107,46,.22);
}
body.theme-new-ui #screen-fabrica .fab-nivel-nom{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.06rem;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-nivel-desc{
  font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--ui-muted);margin-top:3px;
}

/* ── Cierre de reto ── */
body.theme-new-ui #screen-fabrica .fab-fin{text-align:center}
body.theme-new-ui #screen-fabrica .fab-fin-icon{font-size:2.4rem;line-height:1}
body.theme-new-ui #screen-fabrica .fab-fin-tit{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;margin:8px 0 4px;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-fin-sub{font-size:.86rem;color:var(--ui-muted);margin-bottom:18px}

/* ── Misión diaria de la Fábrica (F4·3) ── */
body.theme-new-ui #screen-fabrica .fab-mision{
  background:var(--fab-tint);border:1.5px solid var(--fab-border);
  border-radius:var(--ui-r);padding:12px 14px;margin:0 auto 18px;max-width:420px;text-align:left;
}
body.theme-new-ui #screen-fabrica .fab-mision.is-done{
  background:var(--ui-ok-tint);border-color:rgba(21,128,61,.30);
}
body.theme-new-ui #screen-fabrica .fab-mision-top{
  display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;
}
body.theme-new-ui #screen-fabrica .fab-mision-tag,
body.theme-new-ui #screen-fabrica .fab-mision-xp{
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--fab-oliva-dk);
}
body.theme-new-ui #screen-fabrica .fab-mision.is-done .fab-mision-tag,
body.theme-new-ui #screen-fabrica .fab-mision.is-done .fab-mision-xp{color:#14532D}
body.theme-new-ui #screen-fabrica .fab-mision-label{
  font-size:.88rem;font-weight:700;color:var(--ui-ink);line-height:1.35;margin-bottom:8px;
}
body.theme-new-ui #screen-fabrica .fab-mision-bar{
  height:8px;background:rgba(0,0,0,.08);border-radius:99px;overflow:hidden;
}
body.theme-new-ui #screen-fabrica .fab-mision-fill{
  height:100%;background:var(--fab-oliva);border-radius:99px;transition:width .5s ease;
}
body.theme-new-ui #screen-fabrica .fab-mision.is-done .fab-mision-fill{background:#15803D}
body.theme-new-ui #screen-fabrica .fab-mision-count{
  font-size:.72rem;color:var(--ui-muted);margin-top:4px;text-align:right;
}

/* ── Explicación (feedback) ── */
body.theme-new-ui #screen-fabrica .fab-expl.is-ok{
  background:var(--ui-ok-tint);color:#14532D;border:1.5px solid rgba(21,128,61,.30);
}
body.theme-new-ui #screen-fabrica .fab-expl.is-bad{
  background:var(--ui-err-tint);color:#881337;border:1.5px solid rgba(190,18,60,.28);
}

/* ── Mesa de Herramientas (§4.3) ── */
body.theme-new-ui #screen-fabrica .fab-mesa-modal{
  position:fixed;inset:0;z-index:80;background:rgba(30,26,18,.45);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
body.theme-new-ui #screen-fabrica .fab-mesa-panel{
  background:#fff;border-radius:var(--ui-r);max-width:640px;width:100%;
  max-height:82vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.25);
}
body.theme-new-ui #screen-fabrica .fab-mesa-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1.5px solid var(--fab-border);
}
body.theme-new-ui #screen-fabrica .fab-mesa-head h3{
  font-family:'Fraunces',serif;font-size:1.05rem;margin:0;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-mesa-body{padding:16px 20px;overflow-y:auto}
body.theme-new-ui #screen-fabrica .fab-mesa-vacia{font-size:.86rem;color:var(--ui-muted);line-height:1.5;text-align:center;margin:12px 0}
body.theme-new-ui #screen-fabrica .fab-mesa-table{width:100%;border-collapse:collapse;font-size:.82rem}
body.theme-new-ui #screen-fabrica .fab-mesa-table th{
  text-align:left;padding:6px 8px;color:var(--fab-oliva-dk);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.03em;border-bottom:1.5px solid var(--fab-border);
}
body.theme-new-ui #screen-fabrica .fab-mesa-table td{padding:8px;border-bottom:1px solid var(--fab-border);vertical-align:top}
body.theme-new-ui #screen-fabrica .fab-mesa-foot{padding:12px 20px;border-top:1.5px solid var(--fab-border);text-align:right}

/* ── Diario metalingüístico (§4.1) ── */
body.theme-new-ui #screen-fabrica .fab-diario-ta{
  width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid var(--fab-border);
  border-radius:var(--ui-r-sm);font-family:'DM Sans',sans-serif;font-size:.9rem;line-height:1.5;
  resize:vertical;color:var(--ui-ink);
}
body.theme-new-ui #screen-fabrica .fab-diario-ta:focus{outline:none;border-color:var(--fab-oliva)}

/* ── Accesibilidad: sin movimiento para quien lo pide (misma regla que
      ya aplica el login de Arcade más arriba) ── */
@media (prefers-reduced-motion: reduce){
  body.theme-new-ui #screen-fabrica .fab-op{animation:none}
  body.theme-new-ui #screen-fabrica .fab-btn,
  body.theme-new-ui #screen-fabrica .fab-op,
  body.theme-new-ui #screen-fabrica .fab-chip,
  body.theme-new-ui #screen-fabrica .fab-nivel,
  body.theme-new-ui #screen-fabrica .fab-cut{transition:none}
  body.theme-new-ui #screen-fabrica .fab-btn:hover,
  body.theme-new-ui #screen-fabrica .fab-op:hover,
  body.theme-new-ui #screen-fabrica .fab-chip:hover,
  body.theme-new-ui #screen-fabrica .fab-nivel:hover{transform:none}
}
/* ═════════════════ FIN LA FÁBRICA DE PALABRAS ═════════════════ */

/* ═════════════════ EL LABORATORIO DE ORACIONES (F1·sesión 1) ═════════════════
   Subconjunto de las clases .fab-* de arriba, renombradas .lab-* y con la
   paleta --lab-* (ver css/tokens.css). Solo lo que esta sesión necesita:
   selector de nivel, opciones de estación 1, explicación, cierre de reto y
   el placeholder de los tipos que aún no tienen render. Cuando F1·2-4
   implementen manipulacion/juicio/par_minimo/analisis_inverso, lo normal
   será que reutilicen estas mismas clases (ya vienen genéricas) más algunas
   nuevas (fichas/slots), no que se dupliquen otra vez. */

body.theme-new-ui #screen-laboratorio .lab-titulo{
  text-align:center;font-family:'Fraunces',serif;font-weight:700;
  font-size:1.15rem;color:var(--ui-ink);margin-bottom:8px;line-height:1.35;
}
body.theme-new-ui #screen-laboratorio .lab-corpus-list{
  text-align:center;font-family:'Lora',serif;font-style:italic;
  font-size:.92rem;color:var(--ui-muted);line-height:1.5;
}
body.theme-new-ui #screen-laboratorio .lab-frase{
  text-align:center;font-family:'Fraunces',serif;
  font-size:1.25rem;font-weight:600;line-height:1.4;color:var(--ui-ink);
}
body.theme-new-ui #screen-laboratorio .lab-frase-arrow{
  text-align:center;color:var(--lab-verde);font-size:1.1rem;margin:2px 0;
}
/* Pieza señalada dentro de la oración (manipulacion, y en próximas
   sesiones juicio/par_minimo). Nunca solo negrita: el fondo + subrayado
   grueso funcionan aunque el alumno no distinga bien el color. */
body.theme-new-ui #screen-laboratorio .lab-marca{
  background:var(--lab-tint-2);color:var(--lab-verde-dk);
  padding:1px 3px;border-radius:4px;font-weight:700;
  text-decoration:underline;text-decoration-color:var(--lab-verde);
  text-decoration-thickness:2px;text-underline-offset:2px;
}

/* ── Botón de acción ── */
body.theme-new-ui #screen-laboratorio .lab-btn{
  display:block;padding:13px 26px;border:none;border-radius:var(--ui-r);
  background:var(--lab-verde);color:#fff;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.01em;cursor:pointer;
  box-shadow:0 3px 0 var(--lab-verde-dk);
  transition:transform .18s var(--ui-ease-bounce),box-shadow .18s,filter .15s;
}
body.theme-new-ui #screen-laboratorio .lab-btn:hover{
  transform:translateY(-2px);box-shadow:0 5px 0 var(--lab-verde-dk);filter:brightness(1.05);
}
body.theme-new-ui #screen-laboratorio .lab-btn:active{
  transform:translateY(2px);box-shadow:0 1px 0 var(--lab-verde-dk);
}
body.theme-new-ui #screen-laboratorio .lab-btn-block{width:100%;max-width:340px;margin:0 auto}

/* Secundario: saltar el diario. Presencia mínima, nunca compite. */
body.theme-new-ui #screen-laboratorio .lab-btn-sm{
  padding:7px 15px;border-radius:var(--ui-r-sm);
  border:1.5px solid var(--ui-border-strong);background:var(--ui-surface);
  font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;
  color:var(--ui-muted);cursor:pointer;transition:border-color .15s,color .15s;
}
body.theme-new-ui #screen-laboratorio .lab-btn-sm:hover{
  border-color:var(--lab-verde);color:var(--lab-verde-dk);
}

/* ── Opciones (que_cambia, intruso, valencia) ── */
body.theme-new-ui #screen-laboratorio .lab-stack{display:flex;flex-direction:column;gap:10px}
body.theme-new-ui #screen-laboratorio .lab-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
body.theme-new-ui #screen-laboratorio .lab-op{
  padding:15px 20px;border:1.5px solid var(--lab-border);border-radius:var(--ui-r);
  background:var(--ui-surface);
  font-family:'Fraunces',serif;font-size:1.02rem;font-weight:600;
  color:var(--ui-ink);cursor:pointer;text-align:center;
  box-shadow:0 2px 0 rgba(27,122,77,.16);
  transition:transform .16s var(--ui-ease-bounce),box-shadow .16s,border-color .16s,background .16s;
  animation:lab-rise .32s var(--ui-ease) both;
}
body.theme-new-ui #screen-laboratorio .lab-op:hover{
  transform:translateY(-2px);border-color:var(--lab-verde);
  background:var(--lab-tint);box-shadow:0 4px 0 rgba(27,122,77,.22);
}
body.theme-new-ui #screen-laboratorio .lab-op:nth-child(1){animation-delay:.02s}
body.theme-new-ui #screen-laboratorio .lab-op:nth-child(2){animation-delay:.07s}
body.theme-new-ui #screen-laboratorio .lab-op:nth-child(3){animation-delay:.12s}
body.theme-new-ui #screen-laboratorio .lab-op:nth-child(4){animation-delay:.17s}
@keyframes lab-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

body.theme-new-ui #screen-laboratorio .lab-op.is-ok{
  background:var(--ui-ok-tint);border-color:var(--ui-ok);color:#14532D;
  box-shadow:0 2px 0 rgba(21,128,61,.25);
}
body.theme-new-ui #screen-laboratorio .lab-op.is-bad{
  background:var(--ui-err-tint);border-color:var(--ui-err);color:#881337;
  box-shadow:0 2px 0 rgba(190,18,60,.22);
}
body.theme-new-ui #screen-laboratorio .lab-op.is-dim{opacity:.45;box-shadow:none}

/* ── Selector de nivel ── */
body.theme-new-ui #screen-laboratorio .lab-nivel{
  display:block;width:100%;text-align:left;padding:16px 20px;margin-bottom:10px;
  border:1.5px solid var(--lab-border);border-radius:var(--ui-r);
  background:var(--ui-surface);cursor:pointer;
  box-shadow:0 2px 0 rgba(27,122,77,.16);
  transition:transform .18s var(--ui-ease-bounce),box-shadow .18s,border-color .18s;
}
body.theme-new-ui #screen-laboratorio .lab-nivel:hover{
  transform:translateY(-2px);border-color:var(--lab-verde);
  box-shadow:0 4px 0 rgba(27,122,77,.22);
}
body.theme-new-ui #screen-laboratorio .lab-nivel-nom{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.06rem;color:var(--ui-ink);
}
body.theme-new-ui #screen-laboratorio .lab-nivel-desc{
  font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--ui-muted);margin-top:3px;
}

/* ── Cierre de reto ── */
body.theme-new-ui #screen-laboratorio .lab-fin{text-align:center}
body.theme-new-ui #screen-laboratorio .lab-fin-icon{font-size:2.4rem;line-height:1}
body.theme-new-ui #screen-laboratorio .lab-fin-tit{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;margin:8px 0 4px;color:var(--ui-ink);
}
body.theme-new-ui #screen-laboratorio .lab-fin-sub{font-size:.86rem;color:var(--ui-muted);margin-bottom:18px}

/* ── Placeholder "llega en la próxima sesión" ── */
body.theme-new-ui #screen-laboratorio .lab-stub{
  text-align:center;background:var(--lab-tint);border:1.5px dashed var(--lab-border);
  border-radius:var(--ui-r);padding:20px 18px;
}
body.theme-new-ui #screen-laboratorio .lab-stub-icon{font-size:1.8rem;line-height:1;margin-bottom:6px}
body.theme-new-ui #screen-laboratorio .lab-stub-txt{
  font-size:.86rem;color:var(--lab-verde-dk);line-height:1.5;margin-bottom:14px;
}

/* ── Explicación (feedback) ── */
body.theme-new-ui #screen-laboratorio .lab-expl.is-ok{
  background:var(--ui-ok-tint);color:#14532D;border:1.5px solid rgba(21,128,61,.30);
}
body.theme-new-ui #screen-laboratorio .lab-expl.is-bad{
  background:var(--ui-err-tint);color:#881337;border:1.5px solid rgba(190,18,60,.28);
}

/* ── juicio: el asterisco de agramaticalidad y el contraste con la gemela ──
   Regla del plan de producto §2.5: el asterisco lo pinta la UI (nunca el
   dato), y una oración agramatical nunca aparece sola — siempre junto a su
   gemela correcta. */
body.theme-new-ui #screen-laboratorio .lab-asterisco{
  color:var(--ui-err);font-weight:800;margin-right:1px;
}
body.theme-new-ui #screen-laboratorio .lab-contraste{
  margin-top:10px;padding-top:10px;border-top:1px dashed currentColor;opacity:.85;
}
body.theme-new-ui #screen-laboratorio .lab-frase-mini{
  font-family:'Fraunces',serif;font-size:.92rem;font-weight:600;text-align:center;
}

/* ── analisis_inverso: consigna, banco de piezas y huecos ── */
body.theme-new-ui #screen-laboratorio .lab-consigna{
  text-align:center;font-family:'Lora',serif;font-style:italic;
  font-size:.98rem;color:var(--ui-ink);line-height:1.5;margin-bottom:6px;
}
body.theme-new-ui #screen-laboratorio .lab-banco{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
body.theme-new-ui #screen-laboratorio .lab-chip{
  display:inline-block;margin:3px;padding:8px 14px;
  border:1.5px solid var(--lab-border);border-radius:var(--ui-r-sm);
  background:var(--ui-surface);
  font-family:'Fraunces',serif;font-size:.95rem;font-weight:600;color:var(--ui-ink);
  cursor:pointer;transition:transform .14s var(--ui-ease-bounce),border-color .14s,background .14s;
}
body.theme-new-ui #screen-laboratorio .lab-chip:hover{transform:translateY(-1px);border-color:var(--lab-verde)}
body.theme-new-ui #screen-laboratorio .lab-chip.is-sel{
  background:var(--lab-tint-2);border-color:var(--lab-verde);color:var(--lab-verde-dk);
}
body.theme-new-ui #screen-laboratorio .lab-chip.is-ok{
  background:var(--ui-ok-tint);border-color:var(--ui-ok);color:#14532D;cursor:default;
}
body.theme-new-ui #screen-laboratorio .lab-chip.is-bad{
  background:var(--ui-err-tint);border-color:var(--ui-err);color:#881337;cursor:default;
}
body.theme-new-ui #screen-laboratorio .lab-slots{display:flex;flex-direction:column;gap:8px;margin-top:8px}
body.theme-new-ui #screen-laboratorio .lab-slot{
  display:flex;align-items:center;gap:12px;
  border:1.5px dashed var(--lab-border);border-radius:var(--ui-r);
  padding:8px 14px;background:var(--ui-surface);cursor:pointer;
}
body.theme-new-ui #screen-laboratorio .lab-slot.is-done{border-style:solid;cursor:default}
body.theme-new-ui #screen-laboratorio .lab-slot-rol{
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;color:var(--lab-verde-dk);
  min-width:64px;
}
body.theme-new-ui #screen-laboratorio .lab-slot-body{flex:1;min-height:30px;display:flex;align-items:center}
body.theme-new-ui #screen-laboratorio .lab-slot-vacio{font-size:.8rem;color:var(--ui-muted-2);font-style:italic}

/* ── investigacion: la cascada de valores de «se» (F5·sesión 1) ──
   El rastro de peldaños ya recorridos va DEBAJO de la oración y encima de la
   pregunta viva: el alumno tiene que ver la cadena entera, porque el valor
   final no sale del último peldaño sino de todos. Un peldaño fallado se queda
   en el rastro marcado en rojo — con su respuesta BUENA, que es a donde se le
   ha reconducido. */
body.theme-new-ui #screen-laboratorio .lab-casc-trail{
  display:flex;flex-direction:column;gap:4px;margin-top:10px;
  padding-left:10px;border-left:2px solid var(--lab-border);
}
body.theme-new-ui #screen-laboratorio .lab-casc-paso{
  display:flex;align-items:baseline;gap:7px;
  font-size:.8rem;color:var(--ui-muted);line-height:1.35;
}
body.theme-new-ui #screen-laboratorio .lab-casc-marca{
  font-weight:800;color:var(--ui-ok);flex:none;
}
body.theme-new-ui #screen-laboratorio .lab-casc-paso.is-fallado .lab-casc-marca{color:var(--ui-err)}
body.theme-new-ui #screen-laboratorio .lab-casc-paso.is-fallado .lab-casc-txt{opacity:.9}
body.theme-new-ui #screen-laboratorio .lab-casc-num{
  display:block;font-family:'DM Sans',sans-serif;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ui-muted-2);margin-bottom:5px;
}
/* Feedback de un peldaño: inline, dentro de lab-fichas y NO en lab-explicacion
   — esa caja destapa el botón "Siguiente →", que salta al ítem siguiente, y
   aquí todavía quedan peldaños del mismo ítem. */
body.theme-new-ui #screen-laboratorio .lab-casc-micro{
  margin-top:14px;padding:11px 15px;border-radius:var(--ui-r);
  font-size:.86rem;line-height:1.5;
}
body.theme-new-ui #screen-laboratorio .lab-casc-micro.is-ok{
  background:var(--ui-ok-tint);color:#14532D;
}
body.theme-new-ui #screen-laboratorio .lab-casc-micro.is-bad{
  background:var(--ui-err-tint);color:#881337;
}
body.theme-new-ui #screen-laboratorio .lab-casc-reconduce{
  margin-top:7px;font-weight:700;font-size:.82rem;opacity:.85;
}
/* Veredicto final: el valor descubierto, en grande. Es el punto de llegada de
   todo el ítem, así que se lee como un título, no como una opción más. */
body.theme-new-ui #screen-laboratorio .lab-casc-veredicto{
  text-align:center;padding:18px 16px;border-radius:var(--ui-r);
  background:var(--lab-tint-2);border:1.5px solid var(--lab-verde);
}
body.theme-new-ui #screen-laboratorio .lab-casc-valor{
  font-family:'Fraunces',serif;font-size:1.35rem;font-weight:700;
  color:var(--lab-verde-dk);line-height:1.2;
}
body.theme-new-ui #screen-laboratorio .lab-casc-funcion{
  margin-top:8px;font-size:.85rem;color:var(--ui-muted);line-height:1.45;
}
/* El puente con Simples (§5.4 del documento de cascada): con qué etiqueta verá
   el alumno ese mismo «se» en el otro módulo. Va separado por una línea porque
   no es parte del descubrimiento — es la traducción de lo descubierto. */
body.theme-new-ui #screen-laboratorio .lab-casc-puente{
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--lab-border);
  font-size:.82rem;color:var(--ui-muted);line-height:1.45;
}

/* ── Tabla de equivalencias valor↔etiqueta (§5.4, al cerrar el RETO) ──
   Siete filas fijas (VALOR_SE_UI), la(s) conquistada(s) por este alumno
   resaltada(s). Va dentro de .lab-fin, así que hereda su ancho centrado. */
body.theme-new-ui #screen-laboratorio .lab-equiv-tabla{
  margin:16px 0;padding:14px 16px;border-radius:var(--ui-r);
  background:var(--ui-surface);border:1.5px solid var(--lab-border);
  text-align:left;
}
body.theme-new-ui #screen-laboratorio .lab-equiv-titulo{
  font-size:.78rem;color:var(--ui-muted);line-height:1.4;margin-bottom:10px;
  text-align:center;font-style:italic;
}
body.theme-new-ui #screen-laboratorio .lab-equiv-fila{
  display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--ui-r-sm);
  font-size:.84rem;
}
body.theme-new-ui #screen-laboratorio .lab-equiv-valor{flex:1;color:var(--ui-ink)}
body.theme-new-ui #screen-laboratorio .lab-equiv-flecha{color:var(--ui-muted-2);flex:none}
body.theme-new-ui #screen-laboratorio .lab-equiv-etiqueta{
  flex:1;font-family:'DM Sans',sans-serif;font-weight:700;color:var(--lab-verde-dk);
}
body.theme-new-ui #screen-laboratorio .lab-equiv-fila.is-destacada{
  background:var(--lab-tint-2);
}
body.theme-new-ui #screen-laboratorio .lab-equiv-fila.is-destacada .lab-equiv-valor{
  font-weight:800;
}

/* ── Caja de Pruebas del Detective (F2·sesión 3) ── */
body.theme-new-ui #screen-laboratorio .lab-caja-lista{display:flex;flex-direction:column;gap:10px}
body.theme-new-ui #screen-laboratorio .lab-caja-fila{
  border:1.5px solid var(--lab-border);border-radius:var(--ui-r);
  background:var(--ui-surface);padding:12px 16px;
}
body.theme-new-ui #screen-laboratorio .lab-caja-funcion{
  font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;color:var(--lab-verde-dk);
}
body.theme-new-ui #screen-laboratorio .lab-caja-prueba{
  font-size:.82rem;color:var(--ui-muted);margin-top:3px;line-height:1.4;
}
body.theme-new-ui #screen-laboratorio .lab-caja-ejemplo{
  font-family:'Fraunces',serif;font-size:.98rem;font-weight:600;
  color:var(--ui-ink);margin-top:6px;
}
body.theme-new-ui #screen-laboratorio .lab-caja-add{
  margin-top:8px;font-size:.82rem;font-weight:700;
}

/* ── Diario metalingüístico (F2·sesión 3, plan §4.3) ── */
body.theme-new-ui #screen-laboratorio .lab-diario-ta{
  width:100%;box-sizing:border-box;padding:12px 14px;border:1.5px solid var(--lab-border);
  border-radius:var(--ui-r-sm);font-family:'DM Sans',sans-serif;font-size:.9rem;line-height:1.5;
  resize:vertical;color:var(--ui-ink);
}
body.theme-new-ui #screen-laboratorio .lab-diario-ta:focus{outline:none;border-color:var(--lab-verde)}

@media (prefers-reduced-motion: reduce){
  body.theme-new-ui #screen-laboratorio .lab-op{animation:none}
  body.theme-new-ui #screen-laboratorio .lab-btn,
  body.theme-new-ui #screen-laboratorio .lab-op,
  body.theme-new-ui #screen-laboratorio .lab-nivel{transition:none}
  body.theme-new-ui #screen-laboratorio .lab-btn:hover,
  body.theme-new-ui #screen-laboratorio .lab-op:hover,
  body.theme-new-ui #screen-laboratorio .lab-nivel:hover{transform:none}
}
/* ═════════════════ FIN EL LABORATORIO DE ORACIONES ═════════════════ */

/* ═════════ GUÍAS DE TEORÍA EN LA PORTADA (ligera y completa) ═════════
   Tarjeta a lo ancho tras los cuatro módulos de análisis (index.html).
   Mismo criterio que el índice /guias/ y el menú de las guías (oct-2026):
   los mismos grupos, nombres cortos y puntos de color (oración simple, azul
   marino; compuesta, granate; empezar y NGLE, verde; profesores, gris), con
   «Empieza aquí» destacada como en el índice. En pantallas anchas los grupos
   van abiertos en dos columnas; en el móvil, cada grupo es un desplegable,
   como «En esta guía» dentro de las guías. Sin modo oscuro propio, como el
   resto de la app. */
#screen-portada .tarjeta-guias{grid-column:1/-1;position:relative;overflow:hidden;
  background:var(--portada-card,#fff);border:1px solid var(--portada-border,#E6E0D2);border-radius:14px;
  padding:22px 22px 16px;text-align:left;
  box-shadow:0 1px 2px rgba(15,42,67,.04),0 4px 14px rgba(15,42,67,.05)}
#screen-portada .tarjeta-guias::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--portada-navy,#102A43) 0 50%,var(--portada-vino,#9D4B5E) 50% 100%)}
#screen-portada .tarjeta-guias-badge{position:absolute;top:14px;right:14px;font:700 .62rem 'DM Sans',sans-serif;
  padding:3px 9px;border-radius:99px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--portada-teal,#0F766E);color:#fff;box-shadow:0 2px 6px rgba(15,118,110,.25)}
#screen-portada .tarjeta-guias-cab{display:flex;gap:16px;align-items:flex-start;padding-right:64px}
#screen-portada .tarjeta-guias-icon{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:rgba(15,42,67,.05);border-radius:12px;color:var(--portada-navy,#102A43)}
#screen-portada .tarjeta-guias-icon svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
#screen-portada .tarjeta-guias-titulo{font-family:'Fraunces',serif;font-weight:700;font-size:1.18rem;line-height:1.2;
  color:var(--portada-navy,#102A43);margin:0 0 6px}
#screen-portada .tarjeta-guias-desc{font:400 .84rem/1.45 'Lora',serif;color:var(--portada-muted,#5C6B7E);margin:0}
/* Empieza aquí: la puerta de entrada, destacada como en el índice */
#screen-portada .tg-empieza{position:relative;display:flex;flex-direction:column;gap:2px;margin-top:16px;
  min-height:52px;padding:10px 44px 10px 14px;border-radius:12px;text-decoration:none;
  background:#E5F4F1;border:1px solid #CDE9E3;border-left:4px solid var(--portada-teal,#0F766E);
  color:var(--portada-navy,#102A43);transition:border-color .15s}
#screen-portada .tg-empieza::after{content:'↗';position:absolute;right:16px;top:50%;margin-top:-.6em;
  font-weight:700;color:var(--portada-teal,#0F766E);transition:transform .15s}
#screen-portada .tg-empieza:hover{border-color:var(--portada-teal,#0F766E)}
#screen-portada .tg-empieza:hover::after{transform:translate(2px,-2px)}
#screen-portada .tg-empieza:focus-visible{outline:3px solid var(--portada-teal,#0F766E);outline-offset:2px}
#screen-portada .tg-empieza-k{font:700 .66rem 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--portada-teal,#0F766E)}
#screen-portada .tg-empieza-t{font:700 .95rem/1.3 'DM Sans',sans-serif}

/* Grupos: en pantallas anchas, abiertos y en dos columnas (oración simple y
   morfología | compuesta, otros nombres y profesores); el rótulo no se
   pliega. En el HTML van en el orden del móvil: simple, compuesta,
   morfología, otros nombres, profesores */
#screen-portada .tarjeta-guias-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:14px;align-items:start}
#screen-portada .tarjeta-guias-cols .tg-simple{grid-column:1;grid-row:1 / span 2}
#screen-portada .tarjeta-guias-cols .tg-compuesta{grid-column:2;grid-row:1}
#screen-portada .tarjeta-guias-cols .tg-ngle{grid-column:2;grid-row:2}
#screen-portada .tarjeta-guias-cols .tg-morfo{grid-column:1;grid-row:3}
#screen-portada .tarjeta-guias-cols .tg-prof{grid-column:2;grid-row:3}
#screen-portada .tarjeta-guias-grupo > summary{list-style:none;display:flex;align-items:center;gap:8px;margin:0 0 2px;
  cursor:default;pointer-events:none}
#screen-portada .tarjeta-guias-grupo > summary::-webkit-details-marker{display:none}
#screen-portada .tg-nombre{display:flex;align-items:center;gap:8px;
  font:700 .7rem 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--portada-muted,#5C6B7E)}
#screen-portada .tg-nombre::before{content:'';width:8px;height:8px;border-radius:50%;flex:none;background:var(--tg-color)}
#screen-portada .tg-cuantas{display:none}
#screen-portada .tg-simple{--tg-color:var(--portada-navy,#102A43)}
#screen-portada .tg-compuesta{--tg-color:var(--portada-vino,#9D4B5E)}
#screen-portada .tg-ngle{--tg-color:var(--portada-teal,#0F766E)}
#screen-portada .tg-morfo{--tg-color:var(--portada-teal,#0F766E)}
#screen-portada .tg-prof{--tg-color:var(--portada-muted,#5C6B7E)}
#screen-portada .tarjeta-guias-grupo ul{list-style:none;margin:0;padding:0}
#screen-portada .tarjeta-guias-grupo li{border-bottom:1px solid var(--portada-border,#E6E0D2)}
#screen-portada .tarjeta-guias-grupo li:last-child{border-bottom:none}
#screen-portada .tarjeta-guias-grupo a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:8px 8px 8px 2px;border-radius:8px;text-decoration:none;
  font:600 .9rem/1.3 'DM Sans',sans-serif;color:var(--portada-navy,#102A43);transition:background .15s,color .15s}
#screen-portada .tarjeta-guias-grupo a::after{content:'↗';flex:none;font-weight:700;color:var(--portada-teal,#0F766E);transition:transform .15s}
#screen-portada .tarjeta-guias-grupo a:hover{background:rgba(15,42,67,.04);color:var(--portada-teal,#0F766E)}
#screen-portada .tarjeta-guias-grupo a:hover::after{transform:translate(2px,-2px)}
#screen-portada .tarjeta-guias-grupo a:focus-visible{outline:3px solid var(--portada-teal,#0F766E);outline-offset:1px}

/* Pie: «Ver todas las guías» */
#screen-portada .tarjeta-guias-pie{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--portada-border,#E6E0D2)}
#screen-portada .tarjeta-guias-todas{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border-radius:999px;
  background:var(--portada-navy,#102A43);color:#fff;text-decoration:none;font:700 .72rem 'DM Sans',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;transition:gap .2s}
#screen-portada .tarjeta-guias-todas::after{content:'→';font-size:1rem;line-height:1}
#screen-portada .tarjeta-guias-todas:hover{gap:11px}
#screen-portada .tarjeta-guias-todas:focus-visible{outline:3px solid var(--portada-teal,#0F766E);outline-offset:2px}
#screen-portada .tarjeta-guias-nota{margin:0;font:400 .76rem 'DM Sans',sans-serif;color:var(--portada-muted,#5C6B7E)}

/* Móvil: cada grupo, un desplegable con su número de guías */
@media(max-width:560px){
  #screen-portada .tarjeta-guias{padding:20px 16px 14px}
  #screen-portada .tarjeta-guias-cab{gap:14px;padding-right:0}
  #screen-portada .tarjeta-guias-icon{width:48px;height:48px}
  #screen-portada .tarjeta-guias-cab{align-items:center}
  #screen-portada .tarjeta-guias-titulo{padding-right:64px;margin:0}
  /* El título y «Empieza aquí» ya lo dicen: en el móvil, sin descripción */
  #screen-portada .tarjeta-guias-desc{display:none}
  #screen-portada .tarjeta-guias-cols{grid-template-columns:1fr;gap:8px;margin-top:10px}
  #screen-portada .tarjeta-guias-cols .tarjeta-guias-grupo{grid-column:auto;grid-row:auto}
  #screen-portada details.tarjeta-guias-grupo{background:#FAF7F0;border:1px solid var(--portada-border,#E6E0D2);border-radius:12px}
  #screen-portada details.tarjeta-guias-grupo > summary{pointer-events:auto;cursor:pointer;min-height:48px;margin:0;padding:0 14px}
  #screen-portada details.tarjeta-guias-grupo > summary::after{content:'▾';margin-left:auto;color:var(--portada-muted,#5C6B7E);transition:transform .15s}
  #screen-portada details.tarjeta-guias-grupo[open] > summary::after{transform:rotate(180deg)}
  #screen-portada details.tarjeta-guias-grupo > summary:focus-visible{outline:3px solid var(--portada-teal,#0F766E);outline-offset:2px;border-radius:12px}
  #screen-portada .tg-cuantas{display:inline;flex:none;white-space:nowrap;font:400 .8rem 'DM Sans',sans-serif;color:var(--portada-muted,#5C6B7E)}
  #screen-portada details.tarjeta-guias-grupo > summary .tg-nombre{min-width:0;line-height:1.35}
  #screen-portada details.tarjeta-guias-grupo ul{padding:0 10px 4px}
  #screen-portada .tarjeta-guias-pie{flex-direction:column;align-items:stretch;gap:6px;margin-top:10px;padding-top:0;border-top:none}
  #screen-portada .tarjeta-guias-todas{justify-content:center}
  #screen-portada .tarjeta-guias-nota{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  #screen-portada .tarjeta-guias-grupo a,#screen-portada .tarjeta-guias-grupo a::after,
  #screen-portada .tg-empieza,#screen-portada .tg-empieza::after,
  #screen-portada details.tarjeta-guias-grupo > summary::after{transition:none}
}
/* ═════════════════ FIN GUÍAS DE TEORÍA EN LA PORTADA ═════════════════ */

/* ═════════ PUERTA HACIA «PARA PROFESORES» (solo versión ligera) ═════════
   Las clases las crea js/core/profesores.js únicamente con LIGHT; en la
   completa estas reglas no casan con nada. Sin modo oscuro propio: la app
   no lo tiene (ver Propuesta_Ligera_Comercial.md §5). */
.cinta-prof{display:flex;justify-content:center;margin:12px 0 4px}
.cinta-prof a{display:inline-flex;align-items:center;gap:8px;font:700 .84rem 'DM Sans',sans-serif;
  color:#0F766E;background:#E5F4F1;border:1px solid #BFE3DC;border-radius:999px;
  padding:7px 14px;text-decoration:none;text-align:center;line-height:1.3}
.cinta-prof a:hover{background:#D3EDE8}
/* Aviso de la última novedad (js/core/novedades.js, en /app/ y /aula/): una
   cinta azul marino suave antes del encabezado de la portada. En móvil el texto pasa a
   dos líneas (con … si aún no cabe) y «Ver novedades →» se queda en «Ver →». */
.cinta-novedad{display:flex;align-items:center;gap:4px;margin:0 0 14px;padding:2px 4px 2px 6px;
  background:#EAF0F7;border:1px solid #C9D6E6;border-radius:12px;color:#102A43}
.cinta-novedad-a{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:8px 4px;
  font:500 .84rem 'DM Sans',sans-serif;color:inherit;text-decoration:none;line-height:1.3}
.cinta-novedad-a:hover .cinta-novedad-ver{text-decoration:underline}
.cinta-novedad-tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cinta-novedad-tx b{font-weight:700}
.cinta-novedad-ver{flex:none;font-weight:700;white-space:nowrap}
.cinta-novedad-x{flex:none;width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  color:inherit;font:700 .95rem 'DM Sans',sans-serif;cursor:pointer}
.cinta-novedad-x:hover{background:rgba(16,42,67,.10)}
@media(max-width:480px){
  .cinta-novedad-mas{display:none}
  .cinta-novedad-tx{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
}
.tarjeta-prof{grid-column:1/-1;background:#fff;border:1px solid var(--portada-border,#E6E0D2);
  border-left:5px solid #0F766E;border-radius:14px;padding:20px 20px 18px;
  box-shadow:0 1px 2px rgba(15,42,67,.05),0 8px 22px rgba(15,42,67,.07)}
.tarjeta-prof-k{font:700 .7rem 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#0F766E;margin-bottom:6px}
.tarjeta-prof h3{font-family:'Fraunces',serif;font-size:1.35rem;line-height:1.2;margin:0 0 10px;color:var(--portada-navy,#102A43)}
.tarjeta-prof ul{list-style:none;display:grid;gap:6px;margin:0 0 14px;padding:0}
.tarjeta-prof li{font-family:'Lora',serif;font-size:.88rem;color:#334E68;display:flex;gap:8px;line-height:1.45}
.tarjeta-prof li::before{content:'✓';color:#0F766E;font-weight:700;font-family:'DM Sans',sans-serif}
.tarjeta-prof-acc{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tarjeta-prof-btn{display:inline-flex;align-items:center;background:#0F766E;color:#fff;border-radius:999px;
  font:700 .85rem 'DM Sans',sans-serif;padding:10px 16px;text-decoration:none}
.tarjeta-prof-btn:hover{background:#0B5F58}
.tarjeta-prof-acc small{color:var(--portada-muted,#5C6B7E);font-size:.78rem}
.portada-footer .pie-prof{color:#0F766E;font-weight:700;font-family:'DM Sans',sans-serif;text-decoration:underline}
.aviso-prof{display:flex;align-items:center;gap:10px;background:#E5F4F1;border:1px solid #BFE3DC;
  border-radius:12px;padding:10px 12px;margin:0 0 12px;width:100%;box-sizing:border-box}
.aviso-prof-ic{font-size:1.2rem}
.aviso-prof-txt{flex:1;margin:0;font:700 .86rem 'DM Sans',sans-serif;color:#0B4F4A;line-height:1.35;text-align:left}
.aviso-prof-btn{font:700 .8rem 'DM Sans',sans-serif;background:#0F766E;color:#fff;border:none;
  border-radius:999px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.aviso-prof-btn:hover{background:#0B5F58}
/* El rótulo «Versión completa» es más ancho que «Beta» y pisaba el título:
   en estas dos tarjetas va abajo a la derecha, frente al botón. */
.theme-new-ui #screen-portada .mod-card-rotulada .mod-card-badge{top:auto;bottom:18px;right:16px}
/* Aviso de Fábrica/Laboratorio en la ligera (#proximamente-overlay). */
.prox-aviso{margin:14px 0 0;padding:12px 14px;background:#E5F4F1;border:1.5px solid #BFE3DC;
  border-radius:10px;font-size:.92rem;font-weight:700;line-height:1.5;color:#0B4F4A}
/* ═════════ FIN PUERTA «PARA PROFESORES» ═════════ */

/* ═════════ AVISO DE LOS FILTROS DE FUNCIONES (oct-2026) ═════════
   Burbuja con flecha que señala #pf-toggle-btn al empezar la práctica.
   Lógica y calendario de repetición: js/feedback/coach-filtros.js.
   Va fija al <body> (no dentro de #practice-filters-bar) porque el
   backdrop-filter de la barra crea un contexto de apilamiento y la
   burbuja quedaría debajo de la oración. El halo usa outline y no
   box-shadow: el tema ya anula box-shadow del botón con !important. */
.coach-filtros{
  position:fixed; z-index:9000; box-sizing:border-box;
  padding:16px 16px 14px; border-radius:var(--ui-r);
  background:var(--ui-navy); color:#fff;
  box-shadow:var(--ui-sh-3);
  font-family:var(--ui-font-ui);
  animation:coachFiltrosEntra .2s ease-out;
}
.coach-filtros::before{
  content:''; position:absolute; top:-7px; left:var(--coach-flecha,50%);
  width:14px; height:14px; margin-left:-7px;
  background:var(--ui-navy); transform:rotate(45deg); border-radius:2px;
}
.coach-filtros-titulo{ margin:0 28px 6px 0; font-size:.95rem; font-weight:700; line-height:1.3; }
.coach-filtros-cuerpo{ margin:0 0 14px; font-size:.85rem; line-height:1.45; color:rgba(255,255,255,.82); }
.coach-filtros-acciones{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 8px; }
.coach-filtros button{ font-family:inherit; cursor:pointer; }
.coach-filtros-pri{
  padding:8px 14px; border:none; border-radius:var(--ui-r-pill);
  background:var(--ui-teal); color:#fff; font-size:.85rem; font-weight:700;
}
.coach-filtros-pri:hover{ background:var(--ui-teal-dk); }
.coach-filtros-sec{
  padding:8px 10px; border:none; background:transparent;
  color:rgba(255,255,255,.85); font-size:.85rem; font-weight:600;
}
.coach-filtros-nunca{
  margin-right:auto; padding:8px 0; border:none; background:transparent;
  color:rgba(255,255,255,.6); font-size:.75rem; text-decoration:underline;
}
.coach-filtros-x{
  position:absolute; top:2px; right:2px; width:44px; height:44px;
  border:none; background:transparent; color:rgba(255,255,255,.7); font-size:1rem;
}
.coach-filtros button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
#pf-toggle-btn.pf-coach-halo{
  outline:3px solid var(--ui-teal); outline-offset:3px;
  animation:coachFiltrosHalo 1.6s ease-in-out infinite;
}
@keyframes coachFiltrosEntra{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@keyframes coachFiltrosHalo{ 50%{ outline-color:rgba(15,118,110,.35); } }
@media (prefers-reduced-motion: reduce){
  .coach-filtros, #pf-toggle-btn.pf-coach-halo{ animation:none; }
}
/* ═════════ FIN AVISO DE LOS FILTROS ═════════ */

/* ── Análisis sintáctico: arreglos sueltos (31-oct) ── */
/* El signo de puntuación va pegado a su palabra (el relleno de .wu-text lo separaba) */
body.theme-new-ui #screen-game .wu-group{ gap: 0; }
body.theme-new-ui #screen-game .wu-group .wu.is-punct .wu-text{ padding-left: 0; padding-right: 2px; box-shadow: none; }
body.theme-new-ui #screen-game .wu-group .wu.is-punct:first-child .wu-text{ padding-left: 8px; padding-right: 0; }
body.theme-new-ui #screen-game .wu-group .wu:has(+ .wu.is-punct:not(:first-child)) .wu-text{ padding-right: 1px; }
/* El aviso de acierto abajo: arriba tapaba el título de la instrucción */
body:has(#screen-game.active) #correct-flash{ top: auto !important; bottom: 28px; }
/* En el móvil, «Progreso» tapaba «Saltar esta oración» y las etiquetas (sigue en la portada) */
@media (max-width: 600px){
  body:has(#screen-game.active) #dash-fab{ display: none !important; }
}

/* ── Análisis sintáctico, paso 2 (31-oct): una sola barra e instrucciones en una línea ── */
/* Las fases y los filtros viven ya en la fila de la topbar (montarBarraUnica_, sint/index.js) */
body.theme-new-ui #screen-game .tb-inner{ max-width: 1160px; position: static; }
body.theme-new-ui #screen-game .tb-row1{ flex-wrap: nowrap; }
body.theme-new-ui #screen-game .tb-row1 .phase-pills{ margin-top: 0; flex: none; }
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar{
  background: none !important; border: 0 !important; padding: 0 !important;
  backdrop-filter: none !important; flex: none;
}
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar > div{
  max-width: none !important; margin: 0 !important; flex-wrap: nowrap !important; gap: 8px !important;
}
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar > div > div:last-child{ margin-left: 0 !important; }
body.theme-new-ui #screen-game .tb-row1 #pf-toggle-btn{ padding: 5px 12px !important; font-size: .76rem !important; }
/* El panel de filtros, como desplegable bajo la barra (antes crecía la página) */
body.theme-new-ui #screen-game .tb-row1 #pf-panel{
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  margin: 0 !important; padding: 14px 20px 16px !important;
  background: #fff; border: 0 !important; border-bottom: 1px solid var(--ui-border) !important;
  box-shadow: 0 12px 24px rgba(15,42,67,.14);
  max-height: 70vh; overflow-y: auto;
}
/* Las flechas de anterior/siguiente, pequeñas sobre el fondo oscuro */
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar .btn-sm[title^="Anterior"],
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar .btn-sm[title^="Saltar"]{
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important; border-radius: var(--ui-r-pill) !important; box-shadow: none !important;
}
/* Los puntos de oraciones repetían el contador «3/209» */
body.theme-new-ui #screen-game .sent-dots{ display: none; }
@media (max-width: 760px){
  body.theme-new-ui #screen-game .tb-row1{ flex-wrap: wrap; row-gap: 8px; }
  body.theme-new-ui #screen-game .tb-row1 .prog-bar{ order: 5; flex-basis: 100%; }
  body.theme-new-ui #screen-game .tb-row1 .phase-pills{ order: 6; flex-basis: 100%; width: auto; }
  body.theme-new-ui #screen-game .tb-row1 .phase-pills .ppill{ flex: 1; text-align: center; padding: 5px 4px; }
  body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar{ order: 4; }
  body.theme-new-ui #screen-game .tb-row1 #tb-exit-btn{ order: 4; }
  body.theme-new-ui #screen-game .tb-row1 .tb-name,
  body.theme-new-ui #screen-game .tb-row1 .tb-badge.badge-practice{ display: none; }
  body.theme-new-ui #screen-game .tb-row1 .tb-counter{ margin-right: auto; }
  body.theme-new-ui #screen-game #pf-count{ display: none; }
  body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar .btn-sm[title^="Anterior"]{ display: none; }
}
/* Instrucciones: el título y una línea; la pista, detrás de «Ver pista» */
body.theme-new-ui #screen-game .inst-card{ padding: 14px 20px 12px; margin-bottom: 16px; }
body.theme-new-ui #screen-game .inst-card::before{ display: none; }
body.theme-new-ui #screen-game .inst-badge{ display: none; }
body.theme-new-ui #screen-game .inst-title{ font-size: 1.25rem; margin-bottom: 3px; }
body.theme-new-ui #screen-game .inst-sub{ font-size: .9rem; line-height: 1.45; }
body.theme-new-ui #screen-game .inst-more{
  border: 0; background: none; padding: 0; margin-left: 4px; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 700; color: var(--ui-teal-dk); text-decoration: underline;
}
body.theme-new-ui #screen-game .inst-card:not(.inst-open) .inst-tip{ display: none; }
body.theme-new-ui #screen-game .inst-tip{ margin-top: 10px; padding: 8px 12px; font-size: .84rem; }
@media (max-width: 540px){
  body.theme-new-ui #screen-game .inst-card{ padding: 12px 14px 10px; }
  body.theme-new-ui #screen-game .inst-title{ font-size: 1.1rem; }
}

/* ── Análisis sintáctico, paso 3 (31-oct): la piel de la portada (como Morfología) ──
   Crema, tarjetas blancas, marino para lo elegido y las acciones, Fraunces en los
   títulos, Lora en la oración. Los colores de Argumentos/Adjuntos/Marcas quedan en el
   filete de cada grupo; las etiquetas, en blanco. */
body.theme-new-ui #screen-game{
  --g-navy: var(--portada-navy, #102A43); --g-navy2: #1E3A5F; --g-line: #E6E0D2; --g-line2: #EFEAE0;
  --g-tint: #EAEEF5; --g-muted: #5C6B7E; --g-sh: 0 1px 2px rgba(15,42,67,.05), 0 8px 22px rgba(15,42,67,.07);
  background: var(--portada-bg, #F5F1E8);
}
/* Barra: blanca, con texto marino */
body.theme-new-ui #screen-game .topbar{ background: rgba(255,255,255,.94); border-bottom: 1px solid var(--g-line); box-shadow: none; backdrop-filter: blur(6px); }
body.theme-new-ui #screen-game .tb-name{ color: var(--g-navy); }
body.theme-new-ui #screen-game .tb-counter{ color: var(--g-navy2); background: var(--g-tint); }
body.theme-new-ui #screen-game .prog-bar{ background: var(--g-line2); }
body.theme-new-ui #screen-game .prog-fill{ background: var(--g-navy); box-shadow: none; }
body.theme-new-ui #screen-game .tb-badge{ background: #E5F4F1; color: #0F766E; border-color: transparent; }
body.theme-new-ui #screen-game .tb-badge.badge-exam{ background: #FDECEC; color: #B91C1C; }
body.theme-new-ui #screen-game .tb-timer{ background: #FEF3C7; color: #92400E; }
body.theme-new-ui #screen-game #tb-exit-btn{ background: #fff; border: 1px solid var(--g-line); color: var(--g-muted); }
body.theme-new-ui #screen-game #tb-exit-btn:hover{ background: #FDECEC; border-color: #F5C2C2; color: #B91C1C; }
body.theme-new-ui #screen-game .phase-pills{ background: var(--g-tint); }
body.theme-new-ui #screen-game .ppill{ color: var(--g-muted); }
body.theme-new-ui #screen-game .ppill.pp-active{ background: var(--g-navy); color: #fff; box-shadow: none; }
body.theme-new-ui #screen-game .ppill.pp-done{ color: #15803D; }
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar .btn-sm[title^="Anterior"],
body.theme-new-ui #screen-game .tb-row1 #practice-filters-bar .btn-sm[title^="Saltar"]{ background: #fff !important; border: 1px solid var(--g-line) !important; color: var(--g-muted) !important; }
body.theme-new-ui #screen-game .pf-toggle-attention{ background: #fff !important; border: 1px solid var(--g-line) !important; color: var(--g-navy) !important; }
body.theme-new-ui #screen-game .pf-toggle-attention:hover{ border-color: var(--g-navy2) !important; color: var(--g-navy) !important; }
/* Instrucciones y oración: tarjetas blancas, filete marino */
body.theme-new-ui #screen-game .inst-card{ background: #fff; border: 1px solid var(--g-line); border-left: 4px solid var(--g-navy); border-radius: 14px; box-shadow: var(--g-sh); }
body.theme-new-ui #screen-game .inst-title{ color: var(--g-navy); }
body.theme-new-ui #screen-game .inst-sub{ color: var(--g-muted); }
body.theme-new-ui #screen-game .inst-more{ color: var(--g-navy2); }
body.theme-new-ui #screen-game .inst-tip{ background: #F2F6FA; border: 1px solid var(--g-line); color: var(--g-navy); }
body.theme-new-ui #screen-game .inst-tip::before{ background-color: var(--g-navy2); }
body.theme-new-ui #screen-game .sent-card,
body.theme-new-ui #screen-game .sent-card.folio-sheet{ background: #fff; border: 1px solid var(--g-line); border-radius: 14px; box-shadow: var(--g-sh); }
body.theme-new-ui #screen-game .wu-text{ font-family: 'Lora', Georgia, serif; font-weight: 500; font-size: 1.4rem; color: var(--g-navy); }
body.theme-new-ui #screen-game .wu:not(.wu-verb):not(.wu-subj):not(.wu-picked):not(.wu-wrong) .wu-text:hover{ background: var(--g-tint); border-bottom-color: var(--g-navy2); }
body.theme-new-ui #screen-game .wu.wu-picked .wu-text{ background: var(--g-navy); color: #fff; box-shadow: none; }
/* Botones de acción: marino, sin el relieve de abajo */
body.theme-new-ui #screen-game .btn-primary{ background: var(--g-navy); border-color: var(--g-navy); color: #fff; box-shadow: none; border-radius: 99px; }
body.theme-new-ui #screen-game .btn-primary:hover:not(:disabled){ background: var(--g-navy2); box-shadow: none; transform: none; }
body.theme-new-ui #screen-game .btn-primary:disabled{ background: #C9D3E0; border-color: #C9D3E0; color: #fff; }
body.theme-new-ui #screen-game .pronoun-btn{ border: 1px solid var(--g-line); border-radius: 99px; font-family: var(--ui-font-ui); font-style: normal; font-weight: 600; color: var(--g-navy); }
body.theme-new-ui #screen-game .pronoun-btn:hover{ border-color: var(--g-navy2); background: #fff; }
body.theme-new-ui #screen-game .pronoun-btn.pron-sel{ background: var(--g-navy); border-color: var(--g-navy); color: #fff; transform: none; }
body.theme-new-ui #screen-game .pvpn-card{ background: #fff; border: 1px solid var(--g-line); border-radius: 12px; box-shadow: none; }
body.theme-new-ui #screen-game .pvpn-card:hover{ border-color: var(--g-navy2); background: #fff; transform: none; box-shadow: var(--g-sh); }
/* Etiquetas: blancas; el color queda en el filete del grupo */
body.theme-new-ui #screen-game .pool-section{ border: 1px solid var(--g-line); border-top: 1px solid var(--g-line); border-left: 4px solid var(--c, var(--g-navy)); border-radius: 12px; box-shadow: none; }
body.theme-new-ui #screen-game .pool-section-arg{ --c: #2563EB; }
body.theme-new-ui #screen-game .pool-section-adj{ --c: #059669; }
body.theme-new-ui #screen-game .pool-section-mar{ --c: #7C3AED; }
body.theme-new-ui #screen-game .pool-section-title{ color: var(--g-navy); }
body.theme-new-ui #screen-game .tags-wrap .tag{ background: #fff !important; border-color: var(--g-line) !important; color: var(--g-navy) !important; box-shadow: none; }
body.theme-new-ui #screen-game .tags-wrap .tag:hover{ border-color: var(--g-navy2) !important; transform: none; box-shadow: none; }
body.theme-new-ui #screen-game .tags-wrap .tag.tag-sel{ background: var(--g-navy) !important; border-color: var(--g-navy) !important; color: #fff !important; transform: none; box-shadow: none; }
body.theme-new-ui #screen-game .tags-wrap .tag.tag-sel *{ color: #fff !important; }

/* ── Análisis sintáctico, pasos 4 y 5 (31-oct): Funciones con panel ──
   renderPhase3 pinta .p3-dos > [.p3-izq (instrucciones + oración), .p3-panel
   (1 tipo de predicado, 2 etiquetas)]. La oración va una vez, con un hueco bajo cada
   bloque (como en el papel). Desde 900 px, el panel va fijo a la derecha (paso 4);
   por debajo, es una hoja fija abajo, con las etiquetas en pestañas (paso 5). */
#screen-game .p3-bloqueado{ opacity: .35; pointer-events: none; transition: opacity .3s; }
#screen-game .p3-vacio{ font-size: .78rem; color: var(--muted); font-style: italic; }
.cc-sub-cancel{ width: 100%; margin-top: 8px; font-size: .75rem; }
#screen-game .pvpn-cambiar{ margin-left: auto; border: 0; background: none; padding: 0 0 0 10px; font: inherit; font-size: .74rem; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }
/* «Saltar» va al pie de la oración; el de abajo de la página, fuera. «Progreso», también
   fuera (tapaba el panel; sigue en la portada) */
body.theme-new-ui #screen-game .game-wrap:has(.p3-dos) #game-skip-wrap{ display: none !important; }
body:has(#screen-game.active .p3-dos) #dash-fab{ display: none !important; }

/* Instrucciones y oración, una sola tarjeta */
#screen-game .p3-izq{ min-width: 0; }
#screen-game .p3-izq .inst-card{ margin-bottom: 0; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: none; }
#screen-game .p3-oracion{ background: #fff; border: 1px solid var(--g-line, #E6E0D2); border-top: 0; border-left: 4px solid var(--g-navy, #102A43); border-radius: 0 0 14px 14px; box-shadow: var(--g-sh); padding: 10px 26px 14px; }

/* La oración con sus huecos: bloques en línea, como texto */
#screen-game .p3-dos .blk-grid{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 12px; margin: 0; }
#screen-game .p3-dos .blk-grid > *{ order: var(--p3-o, 0); }
#screen-game .p3-dos .blk-card{ background: none; border: 0; box-shadow: none; padding: 0; min-width: 64px; max-width: 100%; display: flex; flex-direction: column; border-radius: 0; }
#screen-game .p3-dos .blk-words{ font-family: 'Lora', Georgia, serif; font-size: 1.35rem; line-height: 1.3; color: var(--g-navy, #102A43); white-space: normal; overflow: visible; text-overflow: clip; padding: 0 4px 6px; margin: 0; border-bottom: 2px solid var(--g-navy, #102A43); text-align: center; }
#screen-game .p3-dos .dslot{ margin-top: 6px; min-height: 36px; border-radius: 8px; border: 1.5px dashed var(--g-line, #E6E0D2); background: none; padding: 3px 6px; }
#screen-game .p3-dos .dslot-hint{ font-size: 0; font-style: normal; }
#screen-game .p3-dos .dslot-hint::after{ content: "?"; font-size: .85rem; color: #94A3B8; }
#screen-game .p3-dos .p3-armado .dslot:not(.ds-ok):not(.ds-pre),
#screen-game .p3-dos .dslot.ds-over,
#screen-game .p3-dos .dslot.ds-cc-pend{ border-color: var(--g-navy2, #1E3A5F); background: var(--g-tint, #EAEEF5); transform: none; }
#screen-game .p3-dos .dslot.ds-cc-pend{ border-style: solid; }
#screen-game .p3-dos .dslot .tag{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 4px; min-width: 0; transform: none !important; }
#screen-game .p3-dos .blk-pre .blk-words, #screen-game .p3-dos .blk-tacito .blk-words{ border-bottom-color: #94A3B8; color: var(--g-muted, #5C6B7E); }
#screen-game .p3-dos .dslot.ds-pre{ border: 0; background: var(--g-line2, #EFEAE0); }
#screen-game .p3-dos .ds-pre .tag, #screen-game .p3-dos .ds-pre .tag *{ color: var(--g-muted, #5C6B7E) !important; opacity: 1; }
#screen-game .p3-dos .ds-pre .tag-pre-badge{ display: none; }
#screen-game .p3-dos .blk-done .blk-words{ border-bottom-color: #15803D; }
#screen-game .p3-dos .dslot.ds-ok{ border: 0; background: #E8F5EC; }
#screen-game .p3-dos .ds-ok .tag, #screen-game .p3-dos .ds-ok .tag *{ color: #15803D !important; }
#screen-game .p3-dos .tag-func-tipo{ font-size: .6rem; }
#screen-game .p3-suelta{ font-family: 'Lora', Georgia, serif; font-size: 1.35rem; line-height: 1.3; color: var(--g-navy, #102A43); align-self: flex-start; }
#screen-game .p3-suelta.p3-punt{ margin-left: -10px; }
#screen-game .p3-pie{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--g-line2, #EFEAE0); font-size: .8rem; color: var(--g-muted, #5C6B7E); }
#screen-game .p3-pie b{ color: var(--g-navy, #102A43); }
#screen-game .p3-saltar{ margin-left: auto; border: 1px solid var(--g-line, #E6E0D2); background: #fff; border-radius: 99px; padding: 5px 13px; font: inherit; font-size: .76rem; color: var(--g-muted, #5C6B7E); cursor: pointer; }
#screen-game .p3-saltar:hover{ border-color: var(--g-navy2, #1E3A5F); color: var(--g-navy, #102A43); }
#screen-game .p3-saltar.p3-saltar-exam{ color: #B45309; }

/* El panel por dentro (igual en la columna y en la hoja) */
#screen-game .p3-panel{ background: #fff; border: 1px solid var(--g-line, #E6E0D2); box-shadow: var(--g-sh); padding: 12px 16px 14px; }
#screen-game .p3-panel-cab{ font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 600; color: var(--g-navy, #102A43); padding-bottom: 9px; margin-bottom: 10px; border-bottom: 1px solid var(--g-line2, #EFEAE0); }
#screen-game .p3-paso + .p3-paso{ margin-top: 12px; }
#screen-game .p3-paso-et{ display: flex; align-items: center; gap: 7px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted, #5C6B7E); margin-bottom: 7px; }
#screen-game .p3-paso-et span{ width: 18px; height: 18px; border-radius: 50%; background: var(--g-navy, #102A43); color: #fff; font-size: .65rem; display: grid; place-items: center; letter-spacing: 0; }
#screen-game .p3-panel .pvpn-grid{ grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; }
#screen-game .p3-panel .pvpn-card{ align-items: flex-start; text-align: left; gap: 3px; padding: 9px 10px; border-radius: 10px; }
#screen-game .p3-panel .pvpn-icon{ display: none; }
#screen-game .p3-panel .pvpn-title{ font-size: .84rem; line-height: 1.2; color: var(--g-navy, #102A43); }
#screen-game .p3-panel .pvpn-desc{ font-size: .7rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#screen-game .p3-panel .pvpn-step2-title{ margin-bottom: 6px; }
#screen-game .p3-panel .pvpn-done-badge{ display: flex; width: 100%; margin: 0; padding: 7px 10px; border-radius: 9px; font-size: .8rem; background: #FBFAF7; border: 1px solid var(--g-line, #E6E0D2); color: var(--g-navy, #102A43); }
#screen-game .p3-panel .pool-triple{ grid-template-columns: 1fr; gap: 8px; }
#screen-game .p3-panel .pool-section{ padding: 7px 10px 9px; }
#screen-game .p3-panel .pool-section-hdr{ margin-bottom: 5px; }
#screen-game .p3-panel .pool-section-icon{ display: none; }
#screen-game .p3-panel .pool-section-title{ font-size: .8rem; }
#screen-game .p3-panel .pool-section-sub{ font-size: .68rem; line-height: 1.3; }
#screen-game .p3-panel .tags-wrap{ gap: 5px; min-height: 0; }
#screen-game .p3-panel .tag{ padding: 4px 10px; min-width: 0; }
#screen-game .p3-panel .tag-func-main{ font-size: .8rem; }
#screen-game .p3-panel .tag-func-tipo{ font-size: .56rem; }
#screen-game .p3-tabs{ display: none; }

/* El tipo de CC, en el panel: rejilla de 3×3 bajo los Adjuntos */
#screen-game .cc-submenu.cc-submenu-panel{ position: static; min-width: 0; max-width: none; max-height: none; margin-top: 8px; padding: 8px 0 0; border: 0; border-top: 1px dashed var(--g-line, #E6E0D2); border-radius: 0; box-shadow: none; animation: none; background: none; }
#screen-game .cc-submenu-panel .cc-submenu-title{ text-transform: none; letter-spacing: 0; font-size: .74rem; font-weight: 700; margin-bottom: 6px; }
#screen-game .cc-submenu-panel .cc-submenu-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
#screen-game .cc-submenu-panel .cc-sub-btn{ padding: 6px 4px; border-radius: 8px; border: 1px solid var(--g-line, #E6E0D2); background: #fff; font-family: inherit; font-size: .74rem; font-weight: 600; text-align: center; color: var(--g-navy, #102A43); }
#screen-game .cc-submenu-panel .cc-sub-btn:hover{ border-color: var(--g-navy2, #1E3A5F); background: var(--g-tint, #EAEEF5); color: var(--g-navy, #102A43); }
#screen-game .cc-submenu-panel .cc-sub-cancel{ margin-top: 6px; }

/* Desde 900 px: dos columnas, con el panel fijo a la derecha */
@media (min-width: 900px){
  body.theme-new-ui #screen-game .game-wrap:has(.p3-dos){ max-width: 1180px; padding-top: 18px; }
  #screen-game .p3-dos{ display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 22px; align-items: start; }
  #screen-game .p3-panel{ position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; border-radius: 14px; }
}
@media (min-width: 900px) and (max-width: 1099.98px){
  #screen-game .p3-dos{ grid-template-columns: minmax(0,1fr) 340px; gap: 18px; }
  #screen-game .p3-oracion{ padding: 10px 20px 14px; }
}

/* Por debajo de 900 px: la oración arriba y el panel, una hoja fija abajo (la mitad de
   la pantalla como mucho), con las etiquetas en pestañas. Entre 760 y 900 px tampoco
   caben bien las dos columnas (la oración quedaría en unos 400 px), así que va la hoja. */
@media (max-width: 899.98px){
  body.theme-new-ui #screen-game .game-wrap:has(.p3-dos){ padding-top: 10px; padding-bottom: calc(50vh + 16px); padding-bottom: calc(50dvh + 16px); }
  #screen-game .p3-oracion{ padding: 8px 14px 12px; }
  #screen-game .p3-dos .blk-grid{ gap: 12px 8px; }
  #screen-game .p3-dos .blk-card{ min-width: 48px; }
  #screen-game .p3-dos .blk-words, #screen-game .p3-suelta{ font-size: 1.12rem; padding-bottom: 4px; }
  #screen-game .p3-suelta.p3-punt{ margin-left: -7px; }
  #screen-game .p3-dos .dslot{ min-height: 32px; margin-top: 4px; }
  #screen-game .p3-pie{ margin-top: 14px; padding-top: 8px; }

  /* La entrada animada de #game-phase (.au) deja un transform que haría de la hoja
     un fijo relativo a él y no a la pantalla: aquí se anima solo la oración */
  #screen-game #game-phase:has(.p3-dos){ animation: none; transform: none; }
  #screen-game #game-phase:has(.p3-dos) .p3-izq{ animation: slideUp .4s cubic-bezier(.16,1,.3,1) both; }
  #screen-game .p3-panel{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    max-height: 50vh; max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0; border-bottom: 0;
    box-shadow: 0 -6px 24px rgba(15,42,67,.14);
    padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #screen-game .p3-panel-cab{ display: none; }
  #screen-game .p3-paso + .p3-paso{ margin-top: 10px; }
  /* Con el tipo de predicado ya elegido, sobran los rótulos: queda la línea plegada */
  #screen-game .p3-paso-pvpn:has(.pvpn-done-badge) .p3-paso-et,
  #screen-game .p3-paso-tags .p3-paso-et{ display: none; }

  /* Pestañas: Argumentos · Adjuntos · Marcas (y el glosario, que abajo taparía la hoja) */
  #screen-game .p3-tabs{ display: flex; gap: 4px; margin-bottom: 8px; position: sticky; top: -10px; z-index: 2; background: #fff; padding-top: 2px; }
  #screen-game .p3-tab{ flex: 1; min-width: 0; border: 1px solid var(--g-line, #E6E0D2); border-top: 3px solid var(--c); background: #fff; border-radius: 8px; padding: 6px 4px; font: inherit; font-size: .74rem; font-weight: 700; color: var(--g-muted, #5C6B7E); cursor: pointer; white-space: nowrap; }
  #screen-game .p3-tab span{ font-weight: 600; opacity: .7; }
  #screen-game .p3-tab[aria-selected="true"]{ color: var(--g-navy, #102A43); background: #FBFAF7; }
  #screen-game .p3-tab-arg{ --c: #2563EB; }
  #screen-game .p3-tab-adj{ --c: #059669; }
  #screen-game .p3-tab-mar{ --c: #7C3AED; }
  #screen-game .p3-tab-glos{ flex: none; width: 38px; border: 1px solid var(--g-line, #E6E0D2); background: #fff; border-radius: 8px; font-size: .9rem; cursor: pointer; }
  #screen-game .p3-panel .pool-section{ display: none; border-left-width: 1px; }
  #screen-game [data-tab="arg"] .pool-section-arg,
  #screen-game [data-tab="adj"] .pool-section-adj,
  #screen-game [data-tab="mar"] .pool-section-mar{ display: block; }
  #screen-game .p3-panel .pool-section-title{ display: none; }

  /* Lo que flotaba abajo, fuera de la hoja: el glosario va en las pestañas; el aviso de
     acierto y «¿Te ayudo?», arriba */
  body:has(#screen-game.active .p3-dos) #glos-fab,
  body:has(#screen-game.active .p3-dos) .sound-btn{ display: none !important; }
  body:has(#screen-game.active .p3-dos) #correct-flash{ top: 64px !important; bottom: auto; }
  body:has(#screen-game.active .p3-dos) #pista-flotante{ top: 64px; bottom: auto; }
}
@media (max-width: 600px){
  /* En el teléfono la barra ocupa dos filas (unos 114 px) */
  body:has(#screen-game.active .p3-dos) #correct-flash{ top: 122px !important; }
  body:has(#screen-game.active .p3-dos) #pista-flotante{ top: 122px; }
}
@media (min-width: 600px) and (max-width: 899.98px){
  #screen-game .p3-panel{ left: 50%; right: auto; width: min(100%, 720px); transform: translateX(-50%); }
}

/* «¿Te ayudo?» en Funciones: una línea dentro del panel, en lugar de una ventana encima */
#screen-game .p3-ayuda{ display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: #F2F7F4; border: 1px solid #D5E8DC; color: #1F4D36; font-size: .8rem; line-height: 1.4; }
#screen-game .p3-ayuda[hidden]{ display: none; }
#screen-game .p3-ayuda-txt{ flex: 1; font-family: 'Lora', Georgia, serif; }
#screen-game .p3-ayuda-x{ border: 0; background: none; padding: 0 2px; font-size: .8rem; color: #5C6B7E; cursor: pointer; }