/* =========================================================================
   prueba.css — la prueba gratis del Paso 1 (assets/prueba.js).
   Se carga en index.html y en las 4 páginas de área. Todo va con prefijo
   pr- para no chocar con grado.css (ojo: .c, .hbar y .plan ya existen).
   ========================================================================= */

/* ---------------------------------------------------------------- modal */
.pr-bg{position:fixed;inset:0;z-index:2147483400;background:rgba(10,16,34,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:14px;animation:prFade .25s ease both}
@keyframes prFade{from{opacity:0}to{opacity:1}}
@keyframes prUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pr-m{background:#fff;color:#1f3162;width:min(580px,100%);max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow:auto;
  border-radius:22px;box-shadow:0 34px 90px -24px rgba(0,0,0,.75);border-top:5px solid #7f55ff;font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  text-align:left;animation:prUp .3s cubic-bezier(.2,.7,.3,1) both;-webkit-font-smoothing:antialiased}
.pr-m *{box-sizing:border-box;hyphens:manual;-webkit-hyphens:manual}
.pr-m.ancho{width:min(720px,100%)}
.pr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px 0}
.pr-over{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#39169a}
.pr-x{background:none;border:none;font-size:1.5rem;line-height:1;color:#8aa0ae;cursor:pointer;padding:2px 6px;border-radius:8px;font-family:inherit}
.pr-x:hover{background:#f2f1f8;color:#1f3162}
.pr-b{padding:8px 22px 4px}
.pr-b h2{margin:4px 0 6px;font-size:1.32rem;line-height:1.22;color:#111d39;letter-spacing:-.01em}
.pr-b>p{margin:0 0 12px;font-size:.92rem;line-height:1.55;color:#6130e8}
.pr-b p b{color:#111d39}
.pr-f{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 22px 20px}
.pr-f .izq{display:flex;gap:8px;flex-wrap:wrap}
.pr-btn{font-family:inherit;font-weight:800;font-size:.96rem;border:none;border-radius:12px;padding:13px 22px;cursor:pointer;color:#ffffff;
  background:linear-gradient(135deg,#8b5cff,#6d3cf5);box-shadow:0 10px 22px -12px rgba(109,60,245,.95);transition:transform .15s;text-decoration:none;display:inline-block;text-align:center}
.pr-btn:hover{transform:translateY(-1px)}
.pr-btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.pr-btn.azul{background:linear-gradient(135deg,#6d3cf5,#1f3162);color:#fff;box-shadow:0 10px 22px -12px rgba(109,60,245,.9)}
.pr-sec{font-family:inherit;font-weight:700;font-size:.88rem;border:1.5px solid #d7d4e9;background:#fff;color:#1f3162;border-radius:12px;padding:11px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.pr-sec:hover{border-color:#9573f0}
.pr-link{font-family:inherit;font-size:.84rem;font-weight:700;color:#6b8191;background:none;border:none;text-decoration:underline;cursor:pointer;padding:6px 0}

/* pasos del Paso 1 (bienvenida) */
.pr-ruta{list-style:none;margin:6px 0 4px;padding:0;display:grid;gap:8px}
.pr-ruta li{display:flex;gap:12px;align-items:flex-start;background:#f7f6fb;border:1px solid #e5e3f1;border-radius:14px;padding:11px 14px}
.pr-ruta .ic{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;background:#fff;border:1px solid #e5e3f1}
.pr-ruta b{display:block;font-size:.93rem;color:#111d39}
.pr-ruta span{font-size:.82rem;color:#5b7280;line-height:1.4}
.pr-ruta li.gratis{border-color:#ad94f0;background:#f0eaff}
.pr-nota{font-size:.78rem;color:#7b8f9c;margin:10px 0 0;line-height:1.5}

/* progreso de 4 pasos */
.pr-pasos{display:flex;gap:6px;margin:4px 0 14px}
.pr-pasos>*{flex:1;font-size:.66rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9aabb7;padding-top:7px;border-top:4px solid #e6e4f1;line-height:1.25}
.pr-pasos>.ok{color:#2e7d55;border-color:#5cbf8a}
.pr-pasos>.on{color:#39169a;border-color:#7f55ff}

/* plan listo */
.pr-check{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#5cd08f,#2e9b57);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:6px 0 10px;box-shadow:0 12px 26px -12px rgba(46,155,87,.9)}
.pr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px}
.pr-stats div{background:#f7f6fb;border:1px solid #e5e3f1;border-radius:14px;padding:12px 10px;text-align:center}
.pr-stats b{display:block;font-size:1.35rem;color:#111d39;letter-spacing:-.02em}
.pr-stats small{font-size:.74rem;color:#5b7280;line-height:1.3;display:block}
.pr-uno{background:linear-gradient(135deg,#111d39,#1f3162);color:#fff;border-radius:16px;padding:16px 18px;margin:0 0 6px}
.pr-uno .k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#a78bfa}
.pr-uno h3{margin:4px 0 4px;font-size:1.15rem;color:#fff}
.pr-uno p{margin:0;font-size:.84rem;color:#ddd3ff;line-height:1.5}

/* cuánto sabes de cada concepto */
.pr-conc{display:grid;gap:8px;margin:2px 0 6px}
.pr-cc{border:1.5px solid #e5e3f1;border-radius:14px;padding:11px 13px}
.pr-cc.hecho{border-color:#e2e6ef;background:#fbfafd}
.pr-cc b{display:block;font-size:.92rem;color:#111d39;margin-bottom:7px;line-height:1.35}
.pr-ch{display:flex;gap:6px;flex-wrap:wrap}
.pr-ch button{font-family:inherit;font-size:.8rem;font-weight:700;border:1.5px solid #d7d4e9;background:#fff;color:#1f3162;border-radius:999px;padding:6px 12px;cursor:pointer}
.pr-ch button:hover{border-color:#9573f0}
.pr-ch button.on.n0{background:#fdecea;border-color:#e08a7c;color:#9c2f1f}
.pr-ch button.on.n1{background:#dfd4fd;border-color:#6b3bef;color:#2b1174}
.pr-ch button.on.n2{background:#e3f5ea;border-color:#6cc492;color:#1d6b40}

/* examen real */
.pr-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pr-meta span{font-size:.75rem;font-weight:800;background:#f0eef8;color:#6d3cf5;border-radius:999px;padding:4px 10px}
.pr-meta span.pts{background:#dfd4fd;color:#34148c}
.pr-enun{background:#f7f6fb;border-left:4px solid #6d3cf5;border-radius:0 12px 12px 0;padding:12px 15px;margin:0 0 10px;font-size:.92rem;line-height:1.6;color:#1f3162}
.pr-enun p{margin:0 0 8px}.pr-enun p:last-child{margin:0}
.pr-det{border:1.5px solid #e5e3f1;border-radius:12px;margin:0 0 8px;overflow:hidden}
.pr-det summary{cursor:pointer;padding:11px 14px;font-weight:800;font-size:.88rem;color:#111d39;list-style:none}
.pr-det summary::-webkit-details-marker{display:none}
.pr-det summary::before{content:"▸ ";color:#39169a}
.pr-det[open] summary::before{content:"▾ "}
.pr-det .in{padding:0 14px 12px;font-size:.88rem;line-height:1.6;color:#6130e8}
.pr-det .in p{margin:0 0 8px}
.pr-det.pauta{border-color:#ad94f0}
.pr-det.pauta summary{background:#f0eaff}
.pr-usa{font-size:.84rem;color:#6130e8;margin:6px 0 0;line-height:1.6}
.pr-usa i{font-style:normal;font-weight:700;background:#e3f5ea;color:#1d6b40;border-radius:6px;padding:1px 7px;margin:0 2px;white-space:nowrap}
.pr-veces{font-size:.84rem;color:#6130e8;margin:0 0 10px}
.pr-veces b{color:#111d39}

/* mini quiz */
.pr-por{font-size:.76rem;font-weight:700;color:#34148c;background:#dfd4fd;border-radius:8px;padding:5px 10px;display:inline-block;margin:0 0 10px}
.pr-q{font-size:1rem;line-height:1.5;color:#111d39;font-weight:600;margin:0 0 12px}
.pr-ops{display:grid;gap:8px}
.pr-ops button{font-family:inherit;text-align:left;font-size:.92rem;line-height:1.45;border:1.5px solid #d7d4e9;background:#fff;color:#1f3162;border-radius:12px;padding:11px 14px;cursor:pointer}
.pr-ops button:hover:not(:disabled){border-color:#6d3cf5;background:#f7f6fc}
.pr-ops button:disabled{cursor:default}
.pr-ops button.bien{border-color:#5cbf8a;background:#e3f5ea}
.pr-ops button.mal{border-color:#e08a7c;background:#fdecea}
.pr-fb{margin:12px 0 0;padding:11px 14px;border-radius:12px;font-size:.88rem;line-height:1.55;background:#e3f5ea;color:#1d4f33}
.pr-fb.mal{background:#fdf0ee;color:#7c2a1d}

/* tu camino */
.pr-res{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.pr-res .num{flex:none;width:76px;height:76px;border-radius:50%;background:conic-gradient(#2e9b57 var(--p),#e8e6f2 0);display:flex;align-items:center;justify-content:center}
.pr-res .num b{width:60px;height:60px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.15rem;color:#111d39}
.pr-res p{margin:0;font-size:.9rem;line-height:1.5;color:#6130e8}
.pr-tabla{width:100%;border-collapse:collapse;font-size:.84rem;margin:0 0 14px}
.pr-tabla th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#7b8f9c;padding:6px 6px;border-bottom:1.5px solid #e5e3f1}
.pr-tabla td{padding:9px 6px;border-bottom:1px solid #efeef6;vertical-align:top;line-height:1.4;color:#1f3162}
.pr-tabla td b{color:#111d39}
.pr-tag{display:inline-block;font-size:.72rem;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap}
.pr-tag.n0{background:#fdecea;color:#9c2f1f}.pr-tag.n1{background:#dfd4fd;color:#2b1174}.pr-tag.n2{background:#e3f5ea;color:#1d6b40}.pr-tag.nx{background:#efeef6;color:#6b8191}
.pr-h4{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7b8f9c;margin:4px 0 8px}
.pr-prox{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.pr-prox li{display:flex;gap:10px;align-items:center;font-size:.88rem;border:1px solid #e5e3f1;border-radius:12px;padding:9px 12px}
.pr-prox li .d{flex:none;font-size:.72rem;font-weight:800;color:#6d3cf5;background:#f0eef8;border-radius:8px;padding:4px 8px;min-width:78px;text-align:center}
.pr-prox li .t{flex:1;color:#111d39;font-weight:600}
.pr-prox li .t small{display:block;font-weight:500;color:#6b8191;font-size:.76rem}
.pr-prox li .lk{font-size:.9rem}
.pr-oferta{background:linear-gradient(135deg,#111d39,#1f3162);color:#ece9fa;border-radius:18px;padding:18px 18px 16px;margin:0 0 4px}
.pr-oferta h3{margin:0 0 6px;font-size:1.12rem;color:#fff}
.pr-oferta p{margin:0 0 12px;font-size:.86rem;line-height:1.55;color:#ddd3ff}
.pr-oferta p b{color:#a78bfa}
.pr-oferta .pr-btn{width:100%}
.pr-oferta small{display:block;text-align:center;margin-top:8px;font-size:.74rem;color:#9675f0}

/* ------------------------------------------------- modo foco (páginas de área) */
html.pr-foco #tabs,html.pr-foco header nav,html.pr-foco .qg-row,html.pr-foco .qg-strip,
html.pr-foco .tqtab,html.pr-foco #qtWrap,html.pr-foco .hbar a[href="plan.html"]{display:none!important}
html.pr-foco main>.tab:not(.pr-tab){display:none!important}
html.pr-foco main>.tab.pr-tab{display:block!important}

.pr-dock{position:relative;z-index:60;background:#fff;border:1px solid #e3e1f0;border-top:4px solid #7f55ff;border-radius:0 0 18px 18px;
  box-shadow:0 14px 34px -22px rgba(17,29,57,.55);padding:12px 16px 12px;margin:0 0 18px;color:#1f3162;font-family:inherit}
.pr-dock .fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-dock .tit{flex:1;min-width:200px}
.pr-dock .tit small{display:block;font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#39169a}
.pr-dock .tit b{font-size:1rem;color:#111d39;line-height:1.3}
.pr-dock .acc{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pr-dock .pr-btn{padding:10px 16px;font-size:.88rem}
.pr-dock .pr-sec{padding:9px 13px;font-size:.82rem}
.pr-dock .chips{display:flex;gap:6px;overflow-x:auto;margin-top:10px;padding-bottom:2px;scrollbar-width:thin}
.pr-dock .chips button{flex:none;font-family:inherit;font-size:.74rem;font-weight:700;border-radius:999px;padding:4px 10px;cursor:pointer;border:1.5px solid #e5e3f1;background:#f7f6fb;color:#1f3162;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-dock .chips button.n0{border-color:#e9b0a6;background:#fdf0ee}
.pr-dock .chips button.n1{border-color:#a68cec;background:#f0eaff}
.pr-dock .chips button.n2{border-color:#a9dcbe;background:#f0faf4}
.pr-dock .tutq{font-size:.72rem;color:#6b8191;font-weight:600}
.pr-dock .pr-pasos{margin:10px 0 0}
@media(max-width:640px){
  .pr-dock{padding:10px 12px;border-radius:0 0 14px 14px}
  .pr-dock .acc{width:100%}
  .pr-dock .acc .pr-btn{flex:1}
  .pr-stats b{font-size:1.1rem}
  .pr-top{padding:14px 16px 0}.pr-b{padding:6px 16px 4px}.pr-f{padding:12px 16px 16px}
  .pr-f .pr-btn{width:100%}
  .pr-prox li .d{min-width:64px}
}

/* lo que dijo de cada concepto, encima de su ficha */
.pr-dijo{display:inline-block;font-size:.74rem;font-weight:800;border-radius:8px;padding:4px 10px;margin:2px 0 8px}
.pr-dijo.n0{background:#fdecea;color:#9c2f1f}
.pr-dijo.n1{background:#dfd4fd;color:#2b1174}
.pr-dijo.n2{background:#e3f5ea;color:#1d6b40}
.pr-fin-tab{margin:22px 0 10px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#f0eaff,#fff);border:1.5px solid #ad94f0;text-align:center}
.pr-fin-tab p{margin:0 0 12px;font-size:.92rem;color:#6130e8}
.pr-flash{animation:prFlash 1.6s ease}
@keyframes prFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(127,85,255,.55)}}
.pr-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2147483500;background:#111d39;color:#fff;font-size:.88rem;padding:11px 16px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:min(92vw,420px);text-align:center}

/* ----------------------------------------------- tarjeta en el inicio */
.pr-home{background:#fff;color:#1f3162;border-radius:20px;padding:20px 22px;text-align:left;margin:22px 0 4px;border:2px solid #7f55ff;
  box-shadow:0 24px 60px -24px rgba(109,60,245,.7)}
.pr-home .k{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#39169a}
.pr-home h2{margin:4px 0 4px;font-size:1.2rem;color:#111d39}
.pr-home p{margin:0 0 12px;font-size:.88rem;color:#6130e8;line-height:1.5}
.pr-home .acc{display:flex;gap:8px;flex-wrap:wrap}

/* en celular la tabla de "tu camino" pasa a tarjetas: 4 columnas no caben */
@media(max-width:640px){
  .pr-tabla,.pr-tabla tbody{display:block}
  .pr-tabla tr:first-child{display:none}
  .pr-tabla tr{display:block;border:1px solid #e5e3f1;border-radius:12px;padding:10px 12px;margin-bottom:8px}
  .pr-tabla td{display:inline-block;border:0;padding:0 6px 0 0;vertical-align:middle}
  .pr-tabla td:first-child{display:block;margin-bottom:6px}
  .pr-tabla td:last-child{display:block;margin-top:6px;color:#6130e8;font-size:.82rem}
}

/* ---------------- Modo guiado del plan, con Pase (06-10-2026) ---------------- */
.pr-salir{display:block;margin:8px 0 0 auto;background:none;border:none;font-family:inherit;font-size:.76rem;font-weight:700;color:#7b8f9c;text-decoration:underline;cursor:pointer;padding:2px 0}
.pr-salir:hover{color:#1f3162}
/* widget Hoy (plan-hoy.js) */
.hw-acc{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.hw-guia{font-family:inherit;font-size:.84rem;font-weight:800;color:#ffffff;border:none;cursor:pointer;background:linear-gradient(135deg,#8b5cff,#6d3cf5);border-radius:10px;padding:8px 13px;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(109,60,245,.9)}
.hw-guia:hover{filter:brightness(1.05)}
.hw-ficha{font-size:.74rem;font-weight:700;color:#6130e8;text-align:center;text-decoration:underline;white-space:nowrap}
.hw-guiabar{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font-family:inherit;cursor:pointer;margin:12px 0 4px;padding:14px 16px;border-radius:16px;
  border:none;background:linear-gradient(135deg,#111d39,#1f3162);color:#fff;box-shadow:0 14px 30px -18px rgba(17,29,57,.8);position:relative;z-index:1;transition:transform .15s}
.hw-guiabar:hover{transform:translateY(-1px)}
.hw-guiabar .ic{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#8b5cff,#6d3cf5);color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:1rem}
.hw-guiabar .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hw-guiabar small{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#a78bfa}
.hw-guiabar b{font-size:1rem;color:#fff;line-height:1.3}
.hw-guiabar em{font-style:normal;font-size:.78rem;color:#9675f0}
.hw-guiabar .segs{display:flex;gap:4px;margin-top:6px}
.hw-guiabar .segs i{flex:1;height:5px;border-radius:5px;background:#ffffff26}
.hw-guiabar .segs i.ok{background:#5cd08f}
.hw-guiabar .segs i.on{background:#7f55ff}
.hw-guiabar .go{flex:none;font-weight:800;font-size:.88rem;color:#ffffff;background:linear-gradient(135deg,#8b5cff,#6d3cf5);border-radius:10px;padding:9px 14px}
.hw-guiabar.listo{cursor:default;background:linear-gradient(135deg,#1d6b40,#2e9b57)}
.hw-guiabar.listo .ic{background:#fff;color:#2e9b57}
.hw-guiabar.listo small{color:#d6f5e3}
@media(max-width:600px){.hw-guiabar{flex-wrap:wrap}.hw-guiabar .go{width:100%;text-align:center}}

/* paso 3: resumen de cómo lo preguntan */
.pr-asi{margin:12px 0 0}
.pr-asi h4{margin:0 0 5px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:#2d1179}
.pr-asi p{margin:0;line-height:1.55}
.pr-asi ol{margin:0;padding-left:20px;line-height:1.55}
.pr-asi ol li{margin:3px 0}
.pr-ej{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pr-ej li{background:#f5f4fa;border-left:3px solid #6d3cf5;border-radius:8px;padding:8px 11px;line-height:1.45}
.pr-ej li span{display:block;font-size:.72rem;font-weight:800;color:#6d3cf5;margin-bottom:2px}
.pr-ojo{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:#ece5ff;border:1px solid #ad94f0;color:#2b1174;line-height:1.5;font-size:.92rem}
/* pasos clicables */
.pr-pasos button.ir{font-family:inherit;background:none;border-width:4px 0 0;border-style:solid;padding:7px 0 0;margin:0;cursor:pointer;text-align:left;text-decoration:underline dotted;text-underline-offset:3px}
.pr-pasos button.ir:hover{opacity:.75}

/* tema largo partido en días: las fichas de otra parte no se ven en el modo guiado (05-10-2026) */
html.pr-foco .pr-fuera{display:none!important}
.pr-parte{background:#ede7fd;border:1px solid #bba8f0;border-radius:10px;padding:8px 12px;font-size:.9rem;color:#2b1174}

/* ---------------- Celular más ordenado en la prueba y el modo guiado (07-10-2026) ----------------
   09-10-2026: `header` a secas escondía también la cabecera del tutor (#chat header:
   título, ampliar, ⚡, nueva conversación y cerrar). Fernando: "los tutores perdieron la
   parte de arriba". Se excluye el header del tutor.
   Fernando: en celular el primer tema se veía desordenado. Arriba una sola línea
   con el paso, el título una vez, los conceptos numerados y todas las acciones
   en una barra fija abajo. En PC nada cambia: lo nuevo está escondido. */
.pr-mini,.pr-bot,.pr-ok,.pr-dijo .ct{display:none}
@media(max-width:640px){
  html.pr-foco header:not(#chat header){display:none!important}
  html.pr-foco body{padding-bottom:84px}
  /* barra de arriba: una línea y los 4 segmentos */
  html.pr-foco .pr-dock{position:sticky;top:0;margin:-18px -13px 14px;border:none;border-bottom:1px solid #e3e1f0;border-radius:0;box-shadow:0 6px 16px -14px rgba(17,29,57,.5);
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 14px 8px}
  html.pr-foco .pr-dock .fila,html.pr-foco .pr-dock .chips,html.pr-foco .pr-dock .pr-salir{display:none}
  html.pr-foco .pr-mini{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.76rem;font-weight:700}
  .pr-mini a,.pr-mini button{color:#5b6477;text-decoration:none;background:none;border:none;font:inherit;padding:2px 0;cursor:pointer}
  .pr-mini .p{color:#39169a;font-weight:800}
  .pr-mini .pr-cnt{color:#5b6477;min-width:28px;text-align:right}
  html.pr-foco .pr-dock .pr-pasos{margin:6px 0 0;gap:4px}
  html.pr-foco .pr-dock .pr-pasos>*{font-size:0;line-height:0;padding:6px 0 0;border-top-width:4px;min-height:10px}
  /* el título de la pestaña una vez, con el área encima */
  html.pr-foco .pr-tab h2.sec[data-kick]::before{content:attr(data-kick);display:block;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6d3cf5;margin-bottom:4px}
  html.pr-foco .pr-tab .plTodo,html.pr-foco .pr-tab .ckLinea,html.pr-foco .pr-tab .pr-fin-tab{display:none!important}
  /* cada concepto: número a la izquierda, flecha a la derecha, sin casilla ni palabras */
  html.pr-foco .pr-tab{counter-reset:prc}
  html.pr-foco .pr-tab .card>h3.plH{counter-increment:prc;display:flex;align-items:center;gap:11px;font-size:1.02rem;line-height:1.3}
  html.pr-foco .pr-tab .card>h3.plH::before{content:counter(prc);flex:none;width:28px;height:28px;border-radius:50%;background:#f1ecff;color:#39169a;font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center}
  html.pr-foco .pr-tab .card>h3.plH.ckHecho::before{content:"✓";background:#2e9b57;color:#fff}
  html.pr-foco .pr-tab .card>h3.plH::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2.4px solid #9aa3b5;border-bottom:2.4px solid #9aa3b5;transform:rotate(-135deg);margin-top:4px}
  html.pr-foco .pr-tab .card>h3.plH.cerrado::after{transform:rotate(45deg);margin-top:-4px}
  html.pr-foco .pr-tab h3 .ckBox,html.pr-foco .pr-tab h3 .plCaret,html.pr-foco .pr-tab h3 .plN{display:none!important}
  html.pr-foco .pr-tab .card:has(h3.ckHecho){border-color:#9fd6b5}
  /* lo que dijo, en chico bajo el título */
  html.pr-foco .pr-dijo{display:block;background:none!important;color:#5b6477!important;font-size:.74rem;font-weight:600;padding:0;margin:-4px 0 10px 39px}
  html.pr-foco .pr-dijo .lg{display:none}
  html.pr-foco .pr-dijo .ct{display:inline}
  html.pr-foco .pr-dijo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#5cbf8a}
  html.pr-foco .pr-dijo.n0::before{background:#e08a7c}
  html.pr-foco .pr-dijo.n1::before{background:#9573f0}
  /* "Lo entendí" al final de la ficha */
  html.pr-foco .pr-ok{display:block;width:100%;margin:14px 0 2px;font-family:inherit;font-weight:800;font-size:.88rem;border:1.5px solid #9fd6b5;background:#e3f5ea;color:#1d6b40;border-radius:12px;padding:12px;cursor:pointer}
  .pr-ok .si{display:none}
  .card:has(h3.ckHecho) .pr-ok{background:#fff;color:#5b6477;border-color:#e2e6ef}
  .card:has(h3.ckHecho) .pr-ok .no{display:none}
  .card:has(h3.ckHecho) .pr-ok .si{display:inline}
  html.pr-foco .card:has(h3.plH.cerrado) .pr-ok{display:none}
  /* barra de abajo: marcador y tutor a la izquierda, el botón del paso a la derecha */
  html.pr-foco .pr-bot{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:59;background:#fff;border-top:1px solid #e3e1f0;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom)) 124px}
  html.pr-foco .pr-bot>*{flex:1;min-height:46px;padding:10px 8px;font-size:.88rem;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:13px}
  body.chat-open .pr-bot{display:none!important}
  html.pr-foco #qiBar{display:none!important}
  html.pr-foco #qnMk{left:12px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important}
  html.pr-foco #fab{left:66px!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;width:48px;height:48px;padding:0!important;font-size:0!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center}
  html.pr-foco #fab::before{content:"🤖";font-size:1.3rem}
  /* la lengüeta de Apuntes sigue al costado, pero delgada para no tapar el texto */
  html.pr-foco #qnEdge{padding:10px 4px!important;font-size:.56rem!important;gap:4px!important;border-radius:0 8px 8px 0!important;opacity:.9}
  html.pr-foco #qnEdge>span:first-child{display:none}
  html.pr-foco .pr-toast{bottom:88px}
}

/* ---------------- PC: directo a la materia (08-10-2026) ----------------
   Fernando: con el encabezado del área, la barra con título y chips, el "Abrir
   los apartados" y el párrafo de entrada no se entendía dónde estaba la materia.
   Ahora arriba solo una barra delgada con los 4 pasos y el botón, y la página
   parte en el título del tema y su primer concepto. */
.pr-volver{display:none}
html.pr-foco .pr-tab>p.lead,html.pr-foco .pr-tab .plTodo{display:none!important}
@media(min-width:641px){
  html.pr-foco header:not(#chat header){display:none!important}
  html.pr-foco .pr-dock{position:sticky;top:0;display:flex;align-items:center;gap:18px;margin:-26px 0 22px;padding:10px 16px;border-top-width:3px;border-radius:0 0 16px 16px;
    background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html.pr-foco .pr-dock .fila{display:contents}
  html.pr-foco .pr-dock .tit,html.pr-foco .pr-dock .chips{display:none}
  html.pr-foco .pr-volver{display:block;order:1;flex:none;font-size:.82rem;font-weight:700;color:#5b6477;text-decoration:none}
  html.pr-foco .pr-volver:hover{color:#39169a}
  html.pr-foco .pr-dock .pr-pasos{order:2;flex:1;margin:0}
  html.pr-foco .pr-dock .acc{order:3;flex:none}
  html.pr-foco .pr-dock .pr-salir{order:4;flex:none;margin:0}
  html.pr-foco .pr-tab h2.sec[data-kick]::before{content:attr(data-kick);display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6d3cf5;margin-bottom:4px}
}
/* PC, los conceptos como en celular: número, título grande, sin casilla, flecha
   ni conteo de palabras, "Lo entendí" al final y lo que dijo en una línea chica. */
@media(min-width:641px){
  html.pr-foco .pr-tab .ckLinea,html.pr-foco #ckAv{display:none!important}
  html.pr-foco .pr-tab{counter-reset:prc}
  html.pr-foco .pr-tab .card>h3.plH{counter-increment:prc;display:flex;align-items:center;gap:14px;font-size:1.32rem;line-height:1.3}
  html.pr-foco .pr-tab .card>h3.plH::before{content:counter(prc);flex:none;width:34px;height:34px;border-radius:50%;background:#f1ecff;color:#39169a;font-size:.9rem;font-weight:800;display:flex;align-items:center;justify-content:center}
  html.pr-foco .pr-tab .card>h3.plH.ckHecho::before{content:"✓";background:#2e9b57;color:#fff}
  html.pr-foco .pr-tab .card>h3.plH::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2.4px solid #9aa3b5;border-bottom:2.4px solid #9aa3b5;transform:rotate(-135deg);margin-top:4px}
  html.pr-foco .pr-tab .card>h3.plH.cerrado::after{transform:rotate(45deg);margin-top:-4px}
  html.pr-foco .pr-tab h3 .ckBox,html.pr-foco .pr-tab h3 .plCaret,html.pr-foco .pr-tab h3 .plN{display:none!important}
  html.pr-foco .pr-tab .card:has(h3.ckHecho){border-color:#9fd6b5}
  html.pr-foco .pr-dijo{display:block;background:none!important;color:#5b6477!important;font-size:.8rem;font-weight:600;padding:0;margin:-2px 0 14px 48px}
  html.pr-foco .pr-dijo .lg{display:none}
  html.pr-foco .pr-dijo .ct{display:inline}
  html.pr-foco .pr-dijo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#5cbf8a}
  html.pr-foco .pr-dijo.n0::before{background:#e08a7c}
  html.pr-foco .pr-dijo.n1::before{background:#9573f0}
  html.pr-foco .pr-tab .card p{line-height:1.75}
  html.pr-foco .pr-ok{display:block;margin:18px 0 2px auto;font-family:inherit;font-weight:800;font-size:.9rem;border:1.5px solid #9fd6b5;background:#e3f5ea;color:#1d6b40;border-radius:12px;padding:11px 22px;cursor:pointer}
  html.pr-foco .pr-ok .si{display:none}
  html.pr-foco .card:has(h3.ckHecho) .pr-ok .no{display:none}
  html.pr-foco .card:has(h3.ckHecho) .pr-ok .si{display:inline}
  html.pr-foco .card:has(h3.plH.cerrado) .pr-ok{display:none}
}

/* 11-10-2026, Fernando: las pestañas normales en celular con el mismo formato
   del paso a paso, "que no moleste". Solo en las áreas (las que tienen
   section.tab) y fuera del modo foco, que ya tiene sus reglas arriba. La
   lengüeta delgada no tapa el título, el tutor queda redondo al lado del
   marcador y el lápiz de tinta se esconde como en el paso a paso. */
@media(max-width:640px){
  html:not(.pr-foco) body:has(main section.tab) #qnEdge{padding:10px 4px!important;font-size:.56rem!important;gap:4px!important;border-radius:0 8px 8px 0!important;opacity:.9}
  html:not(.pr-foco) body:has(main section.tab) #qnEdge>span:first-child{display:none}
  html:not(.pr-foco) body:has(main section.tab) #qiBar{display:none!important}
  html:not(.pr-foco) body:has(main section.tab) #qnMk{left:12px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important}
  html:not(.pr-foco) body:has(main section.tab) #fab{left:66px!important;right:auto!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;width:48px;height:48px;padding:0!important;font-size:0!important;border-radius:50%!important;display:flex;align-items:center;justify-content:center}
  html:not(.pr-foco) body:has(main section.tab) #fab::before{content:"🤖";font-size:1.3rem}
}

/* correo con el plan (12-10-2026) */
.pr-correo{border:1.5px dashed #c9bdf5;background:#f7f4ff;border-radius:16px;padding:14px 16px;margin:14px 0 4px}
.pr-correo p{margin:0 0 10px;font-size:.88rem;line-height:1.5;color:#1f3162}
.pr-correo.ok{border-style:solid;border-color:#9ee0c4;background:#effbf5}
.pr-correo.ok p{margin:0}
.pr-correo-f{display:flex;gap:8px;flex-wrap:wrap}
.pr-correo-f input{flex:1 1 200px;min-width:0;font:inherit;font-size:16px;border:1.5px solid #d7d4e9;border-radius:12px;padding:10px 12px;background:#fff;color:#1f3162}
.pr-correo-f input:focus{outline:none;border-color:#6d3cf5;box-shadow:0 0 0 3px rgba(127,85,255,.25)}
.pr-correo-f .pr-btn{flex:0 0 auto}
.pr-correo-m{display:block;margin-top:6px;font-size:.78rem;color:#b42318}
.pr-correo-m:empty{display:none}

/* ------------------------------------------- Recorre tu app (17-10-2026) */
/* misma luz y misma burbuja que la guía de uso (guia-uso.js), para que se lea como parte de la app */
.pr-spot{position:fixed;z-index:2147483300;border-radius:14px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,16,34,.68),0 0 0 3px #a78bfa;transition:all .28s cubic-bezier(.2,.7,.3,1)}
.pr-coach{position:fixed;z-index:2147483350;width:min(320px,calc(100vw - 24px));background:#fff;color:#1f3162;border-radius:16px;
  padding:16px 16px 12px;box-shadow:0 24px 60px -18px rgba(0,0,0,.7);transition:top .28s,left .28s;
  font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
.pr-coach .n{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6d3cf5}
.pr-coach h4{margin:4px 0 6px;font-size:1.05rem;line-height:1.25}
.pr-coach p{margin:0;font-size:.88rem;line-height:1.5;color:#3d4a6b}
.pr-coach p b{color:#1f3162}
.pr-coach .f{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
.pr-coach .salta{font:inherit;font-size:.8rem;font-weight:700;color:#8a92a8;background:none;border:none;cursor:pointer;padding:6px 2px;min-width:44px;text-align:left}
.pr-coach .sig{font:inherit;font-weight:800;font-size:.9rem;border:none;border-radius:11px;padding:10px 18px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#8b5cff,#6d3cf5)}
.pr-coach .pts{display:flex;gap:4px}
.pr-coach .pts i{width:6px;height:6px;border-radius:50%;background:#e2dcf5}
.pr-coach .pts i.on{background:#6d3cf5}
.pr-ruta li .ok{margin-left:auto;align-self:center;font-weight:800;color:#2e9b57}
.pr-ruta li.pase{background:#fff;border-style:dashed}
.pr-ruta li.pase .ok{color:inherit}
/* el widget Hoy de la prueba: es para mirar */
.hoyW.hw-muestra .hw-chk,.hoyW.hw-muestra .hw-car{opacity:.55}
/* el camino de Duolingo dentro del cierre */
.pr-cd{max-width:420px;margin:6px auto 4px;padding:0}
.pr-cd .cdFila{height:88px}
.pr-cd .cdNodo{cursor:default}
.pr-cd .cdBanner.cdMeta{margin:14px 0 6px}
.pr-cd-cta{display:block;width:100%;text-align:center;margin-top:10px}

/* ---------------------------------------------------------------- 20-10-2026
   Plan listo con jerarquía (check grande y título al lado), números en tarjetas
   moradas que se animan, correo en su propio pop-up, elección "Ver mi app" o
   "Empezar a estudiar", y los beneficios bajo el camino. */
.pr-m.chico{width:min(470px,100%)}
.pr-listo-cab{display:flex;align-items:center;gap:16px;margin:4px 0 12px}
.pr-listo-cab .pr-check{flex:none;width:72px;height:72px;font-size:2.2rem;margin:0;animation:prPop .55s cubic-bezier(.2,1.6,.4,1) .1s both}
.pr-b .pr-listo-cab h2{margin:0;font-size:1.62rem;line-height:1.14;letter-spacing:-.02em}
.pr-listo-cab .em{display:inline-block;animation:prTada 1.1s ease .45s both}
@keyframes prPop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes prTada{0%{transform:scale(.4) rotate(-20deg);opacity:0}55%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:none;opacity:1}}
.pr-b>p.pr-lead{color:#3b4a63;font-size:.98rem;line-height:1.55;margin:0 0 16px}
.pr-stats.v2{gap:10px;margin:0 0 4px}
.pr-stats.v2 div{position:relative;overflow:hidden;background:linear-gradient(150deg,#9b74ff 0%,#6d3cf5 55%,#4f25c9 100%);border:none;border-radius:18px;padding:14px 8px 13px;color:#fff;
  box-shadow:0 14px 26px -16px rgba(79,37,201,.95);transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s;animation:prUp .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
.pr-stats.v2 div::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);animation:prBrillo 1.6s ease 1.3s both;pointer-events:none}
@keyframes prBrillo{from{left:-60%}to{left:140%}}
.pr-stats.v2 div:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 22px 34px -16px rgba(79,37,201,1)}
.pr-stats.v2 div:active{transform:scale(.97)}
.pr-stats.v2 .ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0 auto 6px;border-radius:50%;background:rgba(255,255,255,.2);font-size:1.05rem}
.pr-stats.v2 b{color:#fff;font-size:1.85rem;line-height:1.05;font-variant-numeric:tabular-nums}
.pr-stats.v2 small{color:#ece6ff;font-size:.74rem;margin-top:4px}
.pr-f .pr-ancho{flex:1}
.pr-f-centro{justify-content:center}
.pr-f:empty{padding:0 0 12px}
/* correo */
.pr-mail{text-align:center}
.pr-mail-ic{width:64px;height:64px;margin:4px auto 12px;border-radius:20px;background:#f0eaff;display:flex;align-items:center;justify-content:center;font-size:2rem;animation:prPop .5s cubic-bezier(.2,1.6,.4,1) both}
.pr-b.pr-mail h2{font-size:1.5rem;letter-spacing:-.015em}
.pr-correo.pr-correo-g{border:none;background:none;padding:0;margin:4px 0 0;text-align:left}
.pr-correo.pr-correo-g.ok{border:1.5px solid #9ee0c4;background:#effbf5;padding:12px 14px;text-align:center}
.pr-b>p.pr-mail-ok{display:inline-block;background:#effbf5;border:1px solid #9ee0c4;color:#1d4f33;border-radius:99px;padding:5px 12px;font-size:.8rem;margin:2px 0 10px}
.pr-b>p.pr-mail-ok b{color:#1d4f33}
/* elegir cómo partir */
.pr-b h2.pr-h2g{font-size:1.5rem;letter-spacing:-.015em;margin-bottom:14px}
.pr-elige{display:grid;gap:10px;margin:0 0 4px}
.pr-op{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;cursor:pointer;border:1.5px solid #d7d4e9;background:#fff;color:#1f3162;border-radius:16px;padding:14px 16px;
  transition:transform .15s,border-color .15s,box-shadow .15s;animation:prUp .4s cubic-bezier(.2,.7,.3,1) both}
.pr-op+.pr-op{animation-delay:.08s}
.pr-op:hover{transform:translateY(-2px);border-color:#9573f0;box-shadow:0 12px 24px -16px rgba(109,60,245,.8)}
.pr-op .ic{flex:none;width:46px;height:46px;border-radius:13px;background:#f0eaff;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.pr-op .tx{flex:1;min-width:0}
.pr-op b{display:block;font-size:1.06rem;color:#111d39}
.pr-op small{display:block;font-size:.82rem;color:#5b6b80;line-height:1.4;margin-top:2px}
.pr-op .fl{flex:none;font-weight:800;font-size:1.2rem;color:#6d3cf5}
.pr-op.prim{background:linear-gradient(135deg,#8b5cff,#6d3cf5);border-color:transparent;color:#fff;box-shadow:0 14px 26px -14px rgba(109,60,245,.95)}
.pr-op.prim b,.pr-op.prim .fl{color:#fff}
.pr-op.prim small{color:#ece6ff}
.pr-op.prim .ic{background:rgba(255,255,255,.2)}
/* beneficios bajo el camino */
.pr-benef{list-style:none;margin:14px 0 2px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pr-benef li{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:start;background:#f7f4ff;border:1px solid #e6defd;border-radius:14px;padding:10px 12px}
.pr-benef li span{grid-row:span 2;font-size:1.2rem;line-height:1.3}
.pr-benef b{font-size:.87rem;color:#111d39;line-height:1.25}
.pr-benef small{font-size:.75rem;color:#5b6b80;line-height:1.35}
@media(max-width:400px){.pr-benef{grid-template-columns:1fr}}
@media(max-width:640px){
  .pr-listo-cab{gap:12px}
  .pr-listo-cab .pr-check{width:58px;height:58px;font-size:1.8rem}
  .pr-b .pr-listo-cab h2{font-size:1.36rem}
  .pr-stats.v2{gap:7px}
  .pr-stats.v2 div{padding:12px 6px 11px}
  .pr-stats.v2 b{font-size:1.5rem}
  .pr-stats.v2 small{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){.pr-listo-cab .pr-check,.pr-listo-cab .em,.pr-stats.v2 div,.pr-stats.v2 div::after,.pr-op,.pr-mail-ic{animation:none}}