/* =========================================================================
   Estilos compartidos por las 4 áreas de la app "Grado".
   Cada página define su paleta sobreescribiendo las variables de :root.
   Mismo lenguaje visual que las apps de ramo (finanzas2, marketing2, etc.).
   ========================================================================= */
:root{
  --dark:#111d39; --d2:#1f3162; --a:#6d3cf5; --a2:#1f3162; --soft:#f1ecff;
  --line:#e2e6ef; --ink:#17213b; --muted:#5b6477; --gold:#7f55ff; --gold2:#6d3cf5;
  --grad-dark:linear-gradient(135deg,#111d39 0%,#1f3162 48%,#2b3f7d 100%);
  --grad-a:linear-gradient(135deg,#6d3cf5,#1f3162);
  --grad-gold:linear-gradient(135deg,#8b5cff,#6d3cf5);
  --bg:#efeef6;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:860px),(max-height:560px){ html{font-size:90%} }
body{margin:0;font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}

header{background:var(--grad-dark);color:#fff;padding:22px 18px 0;position:relative;overflow:hidden}
header::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle at 20% 0,#000,transparent 70%);opacity:.6}
.hbar{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.back{color:#dcd6f5;text-decoration:none;font-size:.9rem;font-weight:600}
.hbar .ramo{font-size:.8rem;opacity:.85}
.htitle{max-width:1000px;margin:12px auto 0;position:relative;z-index:1}
.htitle h1{margin:0;font-size:clamp(1.4rem,4vmin,2rem);font-weight:800;letter-spacing:-.01em}
.htitle p{margin:4px 0 0;opacity:.85;font-size:.92rem;font-weight:300}
nav{position:sticky;top:0;z-index:20;background:rgba(17,29,57,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);margin-top:16px}
.tabs{max-width:1000px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:8px 12px;scrollbar-width:thin}
.tabs button{white-space:nowrap;background:transparent;color:#dcd6f5;border:none;padding:9px 14px;border-radius:10px;font-size:.86rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
.tabs button:hover{background:rgba(255,255,255,.08);color:#fff}
.tabs button.active{background:var(--grad-gold);color:#ffffff;box-shadow:0 6px 16px -8px rgba(127,85,255,.9)}

main{max-width:1000px;margin:0 auto;padding:26px 18px 90px}
.tab{display:none;animation:fade .35s}
.tab.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h2.sec{font-size:1.5rem;margin:.2em 0 .1em;color:var(--d2);letter-spacing:-.01em}
/* subtitulo dentro de una pestana, para separar bloques grandes */
h3.sec2{font-size:1.16rem;margin:32px 0 4px;color:var(--d2);letter-spacing:-.005em;padding-top:14px;border-top:1px solid var(--line)}
h3.sec2:first-of-type{border-top:0;padding-top:0;margin-top:20px}
.lead{color:var(--muted);margin:.2em 0 1.2em;font-size:1.02rem}

.card{background:#fff;border-radius:16px;padding:22px;margin:16px 0;box-shadow:0 10px 30px -18px rgba(17,29,57,.5);border:1px solid var(--line)}
.card h3{margin:0 0 8px;color:var(--a2);font-size:1.15rem}
.card h4{margin:16px 0 6px;color:var(--d2);font-size:1rem}
.card p{margin:8px 0}
.card ul,.card ol{margin:8px 0;padding-left:22px}.card li{margin:5px 0}
.pill{display:inline-block;background:var(--soft);color:var(--a2);border-radius:999px;padding:2px 11px;font-size:.76rem;font-weight:700;margin:0 4px 4px 0}
.tag{display:inline-block;background:#e1d6ff;color:#2d1179;border-radius:6px;padding:1px 8px;font-size:.78rem;font-weight:700}

/* fórmulas */
.fml{background:var(--dark);color:#f0eefb;border-radius:12px;padding:14px 16px;margin:12px 0;font-family:"Cascadia Code",ui-monospace,Consolas,monospace;font-size:.92rem;overflow-x:auto;line-height:1.9;border-left:4px solid var(--gold)}
.fml b{color:var(--gold)}
/* Pizarra de gráficos. Mismo fondo que .fml (var(--dark)), así cada área lo pinta
   con su propio color sin tocar nada. La paleta de las series vive en graficos.js
   y está validada contra los cuatro fondos con la skill dataviz. */
.gfx{background:var(--dark);border-radius:12px;padding:14px 16px 12px;margin:14px 0;border-left:4px solid var(--gold);overflow-x:auto}
.gfx svg{display:block;width:100%;height:auto;max-width:660px;margin:0 auto}
.gfx .cap{color:#d4cfee;font-size:.9rem;line-height:1.65;margin:10px 2px 0;max-width:660px;margin-inline:auto}
.gfx .cap b{color:var(--gold)}
.fml .katex-display{margin:6px 0}
.fml .katex{font-size:1.14em}
.fml .vars{border-top:1px dashed rgba(255,255,255,.28);margin-top:10px;padding-top:9px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:3px 20px;font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif;font-size:.85rem;line-height:1.55}
.fml .vars .v{color:#d8d3f0}
.fml .vars .v .sym{color:var(--gold);font-weight:600;margin-right:4px;white-space:nowrap}

/* bloques pedagógicos: objetivo → en simple → desarrollo → ejemplo */
.obj{background:#ede7fd;border:1px solid #bba8f0;border-left:5px solid var(--gold);border-radius:4px 12px 12px 4px;padding:10px 14px;margin:10px 0 12px;font-size:.93rem;line-height:1.62;color:#2b1174}
.obj::before{content:"🎯 Para qué sirve";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2d1179;margin-bottom:5px}
.eli5{background:linear-gradient(160deg,#edeafa,#e3dff6);border:1px solid #c4bcea;border-left:5px solid var(--a);border-radius:4px 14px 14px 4px;padding:14px 17px;margin:14px 0;font-size:.99rem;line-height:1.72;color:#152247}
.eli5::before{content:"💡 Explicado en simple";display:block;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--a2);margin-bottom:7px}
.eli5 b{color:var(--a2)}
.eli5 .say{margin-top:12px;padding-top:11px;border-top:1px dashed #9675f0}
.eli5 .say .lbl{display:block;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a2);margin-bottom:7px}
.eli5 .say .l{margin:7px 0;font-size:.93rem}
.eli5 .say .fx{display:inline-block;background:var(--dark);color:#f0eefb;border-radius:8px;padding:6px 12px;margin:2px 6px 4px 0;line-height:1.4;max-width:100%;overflow-x:auto;vertical-align:middle}
.ej{background:#f0eefb;border:1px solid #cfc8f0;border-left:5px solid #5b9bd5;border-radius:4px 12px 12px 4px;padding:11px 14px;margin:12px 0;font-size:.93rem;line-height:1.68;color:#1a2b5b}
.ej::before{content:"🧮 Ejemplo aplicado";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#6130e8;margin-bottom:5px}
.ej b{color:#6130e8}
.note{background:#f3f1fb;border-left:4px solid var(--a);border-radius:8px;padding:11px 14px;margin:12px 0;font-size:.92rem}
/* Bloque de definiciones al hueso. Nació porque la guía nombraba conceptos
   ("efecto halo", "profecía autocumplida") sin decir qué eran, y había que
   preguntárselos al tutor uno por uno. Una línea por concepto: qué es y,
   si es un modelo, para qué se usa. No es para desarrollar, es para que el
   término deje de ser una palabra suelta. */
.defs{background:#fcfcfe;border:1px solid var(--line);border-left:4px solid var(--gold2);border-radius:4px 12px 12px 4px;padding:13px 16px 11px;margin:14px 0}
.defs::before{content:"📌 Qué es cada uno";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.defs dl{margin:0}
.defs dt{font-weight:700;color:var(--a2);font-size:.93rem;margin-top:9px}
.defs dt:first-child{margin-top:0}
.defs dd{margin:2px 0 0;font-size:.92rem;line-height:1.62;color:var(--ink)}
.defs dd .uso{color:var(--muted)}
.defs dd .uso::before{content:"→ ";font-weight:700}

/* .filas: enumeracion de terminos, uno por renglon. Reemplaza al parrafo
   con etiquetas encadenadas (<b>A</b>: ... <b>B</b>: ...), que se lee mal.
   Sirve dentro de .defs dd, dentro de una .card o suelta. */
ul.filas{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
ul.filas>li{display:grid;grid-template-columns:minmax(9.5em,auto) 1fr;gap:4px 12px;align-items:baseline;padding:5px 0 5px 10px;border-left:2px solid var(--line);line-height:1.55}
ul.filas>li>b:first-child{color:var(--a2);font-weight:700}
@media(max-width:560px){ul.filas>li{grid-template-columns:1fr;gap:1px}}
.warn{background:#fff6ec;border-left:4px solid var(--gold2);border-radius:8px;padding:11px 14px;margin:12px 0;font-size:.92rem}

/* pregunta típica de examen */
.pex{background:#f6f1fb;border:1px solid #ddd0ec;border-left:5px solid #7a52a8;border-radius:4px 12px 12px 4px;padding:11px 14px;margin:12px 0;font-size:.93rem;line-height:1.68;color:#3b2657}
.pex::before{content:"🎓 Cómo lo preguntan";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7a52a8;margin-bottom:5px}

/* cita de fuente: de qué archivo y de qué curso viene el contenido */
/* Todos los formatos de práctica deben usar la tarjeta completa. Evita que
   un enunciado quede como columna angosta al aparecer fuera de Practicar. */
main .ej,main .pex,main .exq,main .calc{width:100%;max-width:none}

.src{display:block;margin:10px 0 0;font-size:.72rem;color:#8496a3;line-height:1.5;border-top:1px dotted var(--line);padding-top:7px}
.src b{color:var(--muted);font-weight:700}
.src.inline{border:none;padding-top:0;margin-top:4px}

/* tablas */
table.dt{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9rem}
table.dt th,table.dt td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.dt th{background:var(--soft);color:var(--a2);font-weight:700}
table.dt tr:nth-child(even) td{background:#f9f8fc}
.scrollx{overflow-x:auto}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* temario oficial */
.temario{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:16px 0;box-shadow:0 10px 30px -18px rgba(17,29,57,.5)}
.temario h3{margin:0 0 4px;color:var(--a2)}
.temario ol{padding-left:20px}
.temario li{margin:6px 0}
.temario .sub{color:var(--muted);font-size:.9rem;margin:2px 0 10px}
.temario .goto{background:var(--soft);border:1px solid var(--line);color:var(--a2);border-radius:8px;padding:2px 9px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;margin-left:6px}
.temario .goto:hover{background:#fff;border-color:var(--a)}

/* ejercicios con pauta oculta */
details.reveal{background:#f8f7fc;border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:10px 0}
details.reveal summary{cursor:pointer;font-weight:700;color:var(--a2);padding:12px 0;list-style:none}
details.reveal summary::-webkit-details-marker{display:none}
details.reveal summary::before{content:"▸ ";color:var(--gold2)}
details.reveal[open] summary::before{content:"▾ "}
details.reveal .body{padding:0 0 14px}
.exq{background:#fbfbfd;border:1px solid var(--line);border-left:4px solid var(--a);border-radius:4px 14px 14px 4px;padding:18px 20px;margin:14px 0}
.exq .h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.exq .h b{color:var(--a2);font-size:1.02rem}
.exq .h b::before{content:"\1F4DD  ";font-size:.88em}
.exq .h .tag{margin-left:auto}
.exq>.enun,.exq>p:not(.eli5){line-height:1.75;font-size:1.01rem}
/* El primer párrafo de un ejercicio se destaca SOLO si es un título corto.
   Antes esta regla iba por posición (:first-child) y dejaba en negrita grande
   enunciados de mil caracteres, que es justo lo que se veía mal. La clase
   .destacado la pone destacar-enunciados.js midiendo el texto. */
.exq>.enun>p.destacado,.exq>p.destacado{font-size:1.05rem;font-weight:650;color:var(--a2);line-height:1.55}
.exq .pide{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold2);border-radius:4px 10px 10px 4px;margin:14px 0;padding:10px 16px 10px 34px;line-height:1.65}
.exq .pide li{padding-left:3px;margin:5px 0}

/* quiz */
.q{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}
.q .qq{font-weight:700;color:var(--d2);margin-bottom:10px}
.q .opt{display:block;width:100%;text-align:left;background:#f7f6fb;border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin:7px 0;cursor:pointer;font-family:inherit;font-size:.94rem;transition:.15s}
.q .opt:hover{border-color:var(--a)}
.q .opt.ok{background:#e2f7ec;border-color:#37b877;color:#0d6b3f;font-weight:600}
.q .opt.no{background:#fdecec;border-color:#e07a7a;color:#a33}
.q .exp{margin-top:10px;font-size:.9rem;background:#f3f2fa;border-left:4px solid var(--a);padding:10px 12px;border-radius:8px;display:none}
.q .exp.show{display:block}
#quizscore{font-weight:800;color:var(--a2)}

/* quiz por tema: pestañita arriba a la derecha del título, panel desplegable */
.tqbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tqbar h2.sec{flex:1 1 260px;min-width:0}
.tqtab{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:8px;background:var(--grad-gold);color:#ffffff;border:none;border-radius:12px 12px 4px 4px;padding:8px 14px;font-family:inherit;font-size:.83rem;font-weight:800;cursor:pointer;box-shadow:0 8px 18px -10px rgba(127,85,255,.95);transition:.15s}
.tqtab:hover{filter:brightness(1.05)}
.tqtab .tqsc{background:rgba(255,255,255,.7);color:#2b1174;font-size:.72rem;padding:2px 9px}
.tqtab .tqcv{font-size:.75rem;transition:transform .18s}
.tqtab.abierta{border-radius:12px 12px 0 0;box-shadow:none}
.tqtab.abierta .tqcv{transform:rotate(180deg)}
@media(max-width:520px){.tqtab .tqtt{font-size:.8rem}}

.tq{display:none;background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:4px 4px 16px 16px;padding:18px 20px;margin:6px 0 18px;box-shadow:0 10px 30px -20px rgba(17,29,57,.55)}
.tq.abierto{display:block;animation:fade .25s}
.tq .tqh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tq .tqh b{color:var(--a2);font-size:1.1rem;flex:1 1 auto}
.tq .tqx{background:var(--soft);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:5px 11px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.tq .tqx:hover{background:#fff;border-color:var(--a);color:var(--a2)}
.tq .tqsub{margin:4px 0 6px;font-size:.87rem;color:var(--muted)}
.tq .tqsc{font-size:.8rem;font-weight:800;border-radius:999px;padding:4px 12px;background:var(--soft);color:var(--muted);white-space:nowrap}
.tq .tqsc.bien{background:#e2f7ec;color:#0d6b3f}
.tq .tqsc.medio{background:#e0d6fd;color:#2d1179}
.tq .tqsc.mal{background:#fdecec;color:#a33}
.tq .q{border:none;padding:14px 0 6px;margin:0;border-top:1px dashed var(--line);border-radius:0}
.tq .q:first-child{border-top:none}
.tq .tqfoot{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.tq .tqre{background:var(--soft);border:1px solid var(--line);color:var(--a2);border-radius:9px;padding:7px 14px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit}
.tq .tqre:hover{background:#fff;border-color:var(--a)}

/* mi avance */
.av{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0}
.av .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-bottom:1px dashed var(--line)}
.av .row:last-child{border-bottom:none}
.av .row .n{flex:1;min-width:170px;font-size:.93rem;font-weight:600;color:var(--a2)}
.av .row input[type=range]{flex:1;min-width:140px;accent-color:var(--a)}
.av .row.esmedido input[type=range]{accent-color:#37b877;opacity:.75;pointer-events:none}
.av .row .v{width:2.2em;text-align:right;font-weight:800;color:var(--a)}
.av .row .medida{font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 9px;background:#f3f2f8;color:#8496a3;white-space:nowrap}
.av .row .medida:empty{display:none}
.av .row .medida.bien{background:#e2f7ec;color:#0d6b3f}
.av .row .medida.medio{background:#e0d6fd;color:#2d1179}
.av .row .medida.mal{background:#fdecec;color:#a33}
.avbar{height:10px;border-radius:999px;background:var(--soft);overflow:hidden;margin:10px 0 4px}
.avbar i{display:block;height:100%;background:var(--grad-a);width:0;transition:width .3s}

/* Tutor IA */
#fab{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--grad-gold);color:#ffffff;border:none;border-radius:999px;padding:14px 20px;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 14px 30px -10px rgba(109,60,245,.8);font-family:inherit}
#chat{position:fixed;right:16px;bottom:16px;z-index:61;width:min(410px,94vw);height:min(620px,86vh);background:#fff;border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden}
#chat header{background:var(--grad-a);padding:14px 16px;display:block}
#chat .ct{display:flex;align-items:center;justify-content:space-between}
#chat .ct b{font-size:1rem}#chat .ct span{cursor:pointer;font-size:1.3rem;opacity:.9}
#chat .sub{font-size:.76rem;opacity:.85;margin-top:2px}
#msgs{flex:1;overflow-y:auto;padding:14px;background:#f5f4f9}
.m{margin:9px 0;max-width:88%;padding:10px 13px;border-radius:14px;font-size:.92rem;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.m.u{background:var(--grad-a);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.m.b{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.m.b b{color:var(--a2)}
#cin{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff;align-items:flex-end}
/* font-size 16px evita que iOS haga zoom al enfocar. La altura la maneja fit() */
#cin textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:16px;line-height:1.45;min-height:40px;max-height:180px;overflow-y:auto}
#cin button{background:var(--grad-a);color:#fff;border:none;border-radius:10px;padding:0 15px;font-weight:800;cursor:pointer;height:40px;flex:none}
/* con el tutor abierto, los flotantes de apuntes, pizarra y tinta tapaban el
   cuadro de escritura en el celular (z-index gigante sobre el chat) */
/* Apuntes con el tutor abierto: antes se escondía #qnEdge y no se podían tomar
     apuntes mientras se preguntaba, que es justo cuando hacen falta. El panel de
     apuntes vive a la izquierda y el chat a la derecha, así que no se pisan.
     Se siguen escondiendo las barras flotantes de marcador y tinta, que sí tapan
     el cuadro de escritura. */
  body.chat-open #qnMk,body.chat-open #qnMkAviso,body.chat-open #qiBar,body.chat-open #qiAviso{display:none !important}
  @media(max-width:900px){body.chat-open #qnEdge{display:none !important}}
  @media(min-width:1100px){body.qn-open.chat-open #qnBack{display:none}}
@media(max-width:640px){
  /* A pantalla completa el chat arranca en top:0, o sea debajo de la barra de
     estado del teléfono y de la barra del navegador. La ✕ quedaba pegada
     arriba, tocándose con las pestañas de la página que se ven detrás y, en
     iPhone, medio tapada por la isla dinámica. Se baja la cabecera con el
     safe-area del sistema más un colchón propio, y la ✕ se agranda al mínimo
     táctil de 44 px que pide Apple. */
  #chat{top:0;right:0;bottom:0;left:0;width:100%;height:100%;height:100dvh;max-height:none;border-radius:0}
  /* El safe-area vale 0 en un teléfono sin notch y en el navegador de
     escritorio, así que el colchón NO puede depender solo de él: se usa un
     mínimo fijo de 34 px y encima se suma el inset del sistema cuando existe.
     Con 12 px la ✕ quedaba pegada al borde y encima de las pestañas. */
  #chat header{padding:calc(env(safe-area-inset-top,0px) + 34px) 14px 12px}
  #chat .ct b{font-size:.95rem;line-height:1.25}
  #chat .ct span{font-size:1.5rem;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;margin:-8px -10px -8px 0;border-radius:12px}
  #chat .ct span:active{background:rgba(255,255,255,.18)}
  #chat .sub{display:none}
  #msgs{padding:12px}
  .m{max-width:94%}
  /* el cuadro de escritura tiene que quedar sobre la barra de gestos del
     iPhone, si no el botón de enviar cae justo bajo la franja de "home" */
  #cin{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
}
.codegate{padding:16px}
.codegate input{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;font-size:16px;margin:8px 0}
.codegate button{width:100%;background:var(--grad-a);color:#fff;border:none;border-radius:10px;padding:11px;font-weight:800;cursor:pointer}

@media(max-width:600px){main{padding:20px 14px 90px}.card{padding:18px 16px}}

/* =========================================================================
   Celular, con nombre y apellido: iPhone.
   El sitio ya era responsive, pero le faltaban las cosas que solo se notan en
   un teléfono de verdad: el notch, la barra de gestos, el zoom automático de
   Safari al tocar un input, y botones más chicos que un dedo.
   ========================================================================= */

/* 1. Safari hace zoom solo al enfocar un campo con letra menor a 16 px, y
      después NO vuelve atrás: la página queda corrida para siempre. La única
      cura es que todo campo mida 16 px o más. */
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}

/* 2. Zonas seguras: el contenido no se mete bajo el notch ni bajo la franja
      de gestos, y el scroll horizontal de las tablas se siente nativo. */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media(max-width:640px){
  /* 3. La barra de pestañas es lo que más se usa con el pulgar. Se le da
        altura de dedo y se deja que el scroll enganche en cada pestaña. */
  .tabs{padding:8px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .tabs button{padding:11px 14px;min-height:44px;scroll-snap-align:start}
  .tabs::-webkit-scrollbar{height:0}

  /* 4. Nada de texto de 12 px en un teléfono: el mínimo cómodo es 15. */
  main{padding:18px 13px 92px}
  .card{padding:16px 14px;border-radius:14px}
  table.dt{font-size:.86rem}
  table.dt th,table.dt td{padding:9px 8px}

  /* 5. El botón flotante del tutor caía sobre la barra de gestos. */
  #fab{right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);padding:13px 18px;min-height:48px}

  /* 6. Palabras largas (nombres de ratios, fórmulas escritas) desbordaban a
        lo ancho y hacían que TODA la página se pudiera arrastrar de lado. */
  h1,h2,h3,h4,p,li,td,th{overflow-wrap:break-word;word-break:normal;hyphens:auto}
}

/* 7. Un iPhone no tiene :hover. Los estilos de hover se quedaban "pegados"
      después de tocar, dejando botones iluminados sin razón. */
@media(hover:none){
  .tabs button:hover{background:transparent;color:#dcd6f5}
  .tabs button.active:hover{background:var(--grad-gold);color:#ffffff}
}

/* apartados del enunciado, uno por linea */
ol.pide{margin:8px 0 6px;padding-left:22px}
ol.pide li{margin:5px 0;line-height:1.6}
ol.pide li b:first-child{color:var(--a2,#6b57c7)}

/* Formato de ejercicios de Finanzas II, adaptado a la paleta de cada área.
   Se aplica también a los exámenes que examenes.js inserta dinámicamente. */
main .exq{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;margin:18px 0;
  box-shadow:0 10px 30px -18px rgba(6,37,28,.5);
  min-width:0;
}
main .exq .h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 8px;padding:0;border:0;
}
main .exq .h b{color:var(--d2);font-size:1.18rem;line-height:1.4}
main .exq .h b::before{content:none}
main .exq .h .tag{
  margin-left:0;background:var(--soft);color:var(--a2);
  border-radius:999px;padding:3px 11px;font-size:.74rem;line-height:1.5;
  white-space:normal;
}
main .exq .ejnivel{font-size:.74rem;letter-spacing:0;text-transform:none;margin:0 0 10px}
main .exq>.enun,main .exq>p:not(.eli5){font-size:.96rem;line-height:1.7;max-width:none}
main .exq .enun p{margin:8px 0 12px}
main .exq .enun ul{padding-left:20px}
main .exq .enun li{margin:6px 0;line-height:1.62}
main .exq>.enun>p.destacado,main .exq>p.destacado{
  font-size:1.05rem;line-height:1.55;color:var(--a2);
}
main .exq ol.pide{
  background:transparent;border:0;border-radius:0;
  margin:8px 0 4px;padding:0 0 0 22px;font-size:.96rem;
}
main .exq ol.pide li{margin:6px 0;padding-left:0;line-height:1.62}
main .exq ol.pide li::marker{color:var(--a2);font-weight:800}
main .exq details.reveal{
  margin:12px 0 0;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--soft) 35%,white);padding:0 16px;
}
main .exq details.reveal>summary{
  cursor:pointer;font-weight:800;color:#fff;background:var(--grad-a);
  margin:0 -16px;padding:12px 16px;border-radius:11px;
  list-style:none;font-size:.94rem;line-height:1.5;
}
main .exq details.reveal>summary::before{content:"▸ ";color:inherit}
main .exq details.reveal[open]>summary{border-radius:11px 11px 0 0}
main .exq details.reveal[open]>summary::before{content:"▾ "}
main .exq details.reveal>.body{padding:14px 0;font-size:.94rem;line-height:1.65;min-width:0}
main .exq details.reveal h4{margin:14px 0 8px;color:var(--a2);font-size:.9rem}
main .exq details.reveal h4:first-child{margin-top:0}
main .exq .fml,main .exq .exfml,main .exctx .exfml,main details.excaso .exfml{
  background:var(--dark);color:#f0eefb;border-radius:10px;
  padding:13px 15px;margin:10px 0;border-left:4px solid var(--gold);
  font-size:.88rem;line-height:1.85;max-width:100%;overflow-x:auto;
}
main .exq .eli5{
  background:linear-gradient(160deg,white,var(--soft));border:1px solid var(--line);
  border-left:5px solid var(--a);padding:13px 16px;margin:12px 0;
  font-size:.96rem;line-height:1.7;color:var(--ink);
}
main .exq .eli5::before{content:"💡 Qué te están pidiendo, en simple";color:var(--a2)}
main .exq .eli5 b{color:var(--a2)}
main .exq .ejclave,main .exq .res{
  background:#e8e0ff;border:1px solid #a58af0;border-radius:8px;
  padding:10px 13px;margin:10px 0;color:#2b1174;font-size:.9rem;
}
main .exq .exnota,main .exctx .exnota,main details.excaso .exnota{
  background:#f7faf8;border:0;border-left:3px solid var(--line);
  border-radius:0;padding:6px 11px;margin:9px 0;font-size:.84rem;color:var(--muted);
}
main .exq .cifra,main .exctx .cifra,main details.excaso .cifra{
  color:var(--a2);background:var(--soft);border-radius:4px;font-weight:700;
}
main .exq table.dt,main .exctx table.dt,main details.excaso table.dt{font-size:.88rem}
main .exq table.dt th,main .exctx table.dt th,main details.excaso table.dt th{
  background:var(--soft);color:var(--a2);
}
main .exq .exalt li{padding:9px 12px 9px 36px;font-size:.96rem;line-height:1.62}
main details.excaso{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:0 22px;margin:18px 0;
  box-shadow:0 10px 30px -18px rgba(6,37,28,.5);
}
main details.excaso>summary{padding:16px 0;font-size:.96rem;line-height:1.5;color:var(--a2)}
main details.excaso .cn{display:block;margin:4px 0 0;font-size:.82rem}
main details.excaso>.body{font-size:.96rem;line-height:1.7;padding:0 0 16px;min-width:0}
main .exctx{
  background:color-mix(in srgb,var(--soft) 35%,white);
  border:1px solid var(--line);border-radius:12px;
  padding:14px 16px 4px;margin:18px 0 0;font-size:.96rem;line-height:1.7;
}
main .exq .pzej,main .exq .corrEsc,main .exq .corr>summary{font-size:.88rem;min-height:44px;line-height:1.5}
main .exq .pzej,main .exq .corrEsc{max-width:100%;white-space:normal;text-align:left}
main .exq summary:focus-visible,main .exq button:focus-visible,main details.excaso>summary:focus-visible{
  outline:3px solid var(--gold2);outline-offset:3px;
}
@media(max-width:640px){
  main .exq{padding:16px;margin:14px 0}
  main .exq .h b{font-size:1.1rem}
  main details.excaso{padding:0 16px}
  main .exq .h .tag{max-width:100%}
  main .exq .fml .vars{grid-template-columns:1fr}
}

/* ==========================================================================
   Ejercicios en cajas (2026-09-25). El patrón de finanzas2/solemne.html que a
   Fernando le encantó el 15-09: cada parte de la ficha en su caja rotulada,
   de arriba abajo cabecera, enunciado, lo que se pide y la pauta citada
   aparte. Va al final para ganarle a las reglas de arriba sin tocarlas. El
   acento es el del área (--a), así cada página conserva su color.
   ========================================================================== */
main .exq{
  --ex-accent:var(--a);--ex-pad:22px;
  position:relative;overflow:hidden;padding:0 0 18px;
  border-top:5px solid var(--ex-accent);border-radius:18px;
}
main .exq:has(.ejnivel.examen){--ex-accent:var(--gold2)}
main .exq>*,main .exq>.enun,main .exq>ol.pide,main .exq>details.reveal{margin-left:var(--ex-pad);margin-right:var(--ex-pad)}
main .exq>.h{
  margin:0 0 14px !important;padding:14px 22px;
  background:linear-gradient(110deg,var(--soft),#fff);
  border-bottom:1px solid var(--line);
}
main .exq>.ejnivel{display:inline-block;margin-top:0}
main .exq>.enun{
  position:relative;margin-top:4px;margin-bottom:14px;
  padding:40px 18px 12px;background:#fbfafd;
  border:1px solid var(--line);border-left:5px solid var(--ex-accent);border-radius:14px;
}
main .exq>.enun::before{
  content:"📋 ENUNCIADO";position:absolute;top:13px;left:18px;
  color:var(--a2);font-size:.68rem;font-weight:850;letter-spacing:.085em;
}
main .exq.ejp>.enun::before{content:"📋 ENUNCIADO · CONTEXTO Y DATOS"}
/* subpreguntas a), b), c) dentro del enunciado (ej-grado.js, EJE-1015-4) */
main .exq .enun>.subp{margin:12px 0;padding:9px 14px 2px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold2);border-radius:10px}
main .exq .enun>.subp::before{content:attr(data-h);display:block;color:var(--a2);font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
main .exq .enun>.subp>p{margin:4px 0 8px}
main .exq>ol.pide{
  position:relative;margin-top:0;margin-bottom:14px;
  padding:38px 18px 10px 40px;background:#fff;
  border:1px solid var(--line);border-left:5px solid var(--gold2);border-radius:14px;
}
main .exq>ol.pide::before{
  content:"✏️ LO QUE SE PIDE";position:absolute;top:12px;left:18px;
  color:#2b1174;font-size:.68rem;font-weight:850;letter-spacing:.085em;
}
/* La pauta: caja dorada que se abre, como details.sol de finanzas2. */
main .exq>details.reveal{
  margin-top:0;padding:0;overflow:hidden;
  background:#f8f6ff;border:1px solid #a78eec;border-radius:14px;
}
main .exq>details.reveal>summary{
  display:flex;align-items:center;gap:9px;margin:0;padding:13px 16px;
  background:linear-gradient(110deg,#d7c8ff,#f8f6ff);color:#2b1174;
  border-radius:0;font-size:.92rem;font-weight:850;
}
main .exq>details.reveal>summary::before{
  content:"✓";display:grid;place-items:center;width:23px;height:23px;flex:none;
  border-radius:50%;background:var(--gold);color:#2b1174;font-size:.74rem;
}
main .exq>details.reveal[open]>summary::before{content:"✓"}
main .exq>details.reveal>summary::after{
  content:"Abrir pauta";margin-left:auto;padding:3px 8px;flex:none;
  border:1px solid rgba(43,17,116,.22);border-radius:999px;
  font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
}
main .exq>details.reveal[open]>summary::after{content:"Cerrar pauta"}
main .exq>details.reveal>.body{
  margin:14px;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-left:5px solid var(--a);border-radius:12px;
}
main .exq>details.reveal h4{
  font-size:.72rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--a2);
}
main .exq>details.reveal .warn{margin-top:8px}
main .exq>.sinpauta{margin-top:0}
main .exq>.pzej,main .exq>.corrEsc{margin-top:4px}
main .exq>.corr{margin-top:12px}
@media(max-width:640px){
  main .exq{padding:0 0 14px;--ex-pad:13px}
  main .exq>.h{margin:0 0 12px;padding:12px 14px}
  main .exq>.enun{padding:38px 13px 10px}
  main .exq>.enun::before,main .exq>ol.pide::before{left:13px;font-size:.62rem}
  main .exq>ol.pide{padding:36px 13px 8px 34px}
  main .exq>details.reveal>.body{margin:10px;padding:12px}
  main .exq>details.reveal>summary::after{display:none}
}

/* pregunta abierta desde el plan (examenes.js, ?ex=&q=) */
.exq.exq-foco{outline:3px solid var(--gold);outline-offset:3px;transition:outline-color .6s}

/* ---- Esquema de cada ficha (29-09-2026) ------------------------------
   Cada ficha lleva algo visual entre el explicado en simple y el resto:
   una tabla o este esquema. .flujo son pasos con flecha; .flujo.bloques
   son cajas sin orden. En celular los pasos se apilan y la flecha gira. */
.flujo{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;margin:14px 0 16px;padding:12px;background:#f7f6fb;border:1px solid var(--line);border-radius:14px}
.flujo::before{content:"🗺️ Esquema";flex-basis:100%;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.flujo .fp{flex:1 1 120px;min-width:0;background:#fff;border:1.5px solid var(--a);border-radius:11px;padding:9px 11px;font-size:.85rem;line-height:1.45;color:var(--ink)}
.flujo .fp b{display:block;color:var(--a2);font-size:.9rem;margin-bottom:3px;line-height:1.3}
.flujo .fa{align-self:center;color:var(--a);font-weight:800;font-size:1.15rem;flex:none}
.flujo.bloques .fp{flex:1 1 170px;border-width:1px;border-top:4px solid var(--a)}
@media(max-width:640px){
  .flujo{flex-direction:column}
  .flujo .fp,.flujo.bloques .fp{flex:none}
  .flujo .fa{transform:rotate(90deg);line-height:1}
}
/* los "Qué es cada uno" que pasaron a tabla */
.dt.tdefs td:first-child{width:32%}

/* ==========================================================================
   Tarjetas con el diseño de Marketing II / GDP II (01-10-2026). Las arma
   assets/ej-grado.js sobre los mismos .exq: franja con origen y puntaje,
   BLOQUE NN, plegadas con vista previa, pizarra y corrector siempre a mano.
   El color sale del puntaje: hasta 8 pts verde, hasta 20 dorado, más rojo.
   ========================================================================== */
main section{counter-reset:exg}
main .exq.exg{
  counter-increment:exg;--ex-accent:var(--a);--ex-soft:var(--soft);
  background:#fff;border:1px solid var(--line);border-top:5px solid var(--ex-accent);
  border-radius:20px;margin:22px 0 28px;padding:0 0 16px;
  box-shadow:0 18px 46px -28px rgba(17,29,57,.55);
}
main .exq.exg-d1{--ex-accent:#249b72;--ex-soft:#eaf6f1}
main .exq.exg-d2{--ex-accent:#6d3cf5;--ex-soft:#e8dfff}
main .exq.exg-d3{--ex-accent:#c45d56;--ex-soft:#fff0ee}
main .exq.exg>.exg-top{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 !important;padding:12px 22px;
  background:linear-gradient(110deg,var(--ex-soft),#fff);border-bottom:1px solid var(--line);
}
main .exq.exg .exg-t::before,main .exq.exg .exg-d::before{content:attr(data-x)}
main .exq.exg .exg-t,main .exq.exg .exg-d{
  display:inline-flex;align-items:center;max-width:100%;border-radius:999px;
  font-size:.68rem;font-weight:850;letter-spacing:.055em;line-height:1.35;text-transform:uppercase;
}
main .exq.exg .exg-t{padding:5px 10px;background:#fff;color:var(--a2);border:1px solid var(--line);box-shadow:0 3px 10px -8px rgba(17,29,57,.6)}
main .exq.exg .exg-t::after{content:"";order:-1;width:6px;height:6px;border-radius:50%;background:var(--ex-accent);margin-right:7px;flex:none}
main .exq.exg .exg-d{flex:none;padding:5px 11px;background:var(--ex-accent);color:#fff}
/* título: BLOQUE NN, caret y largo */
main .exq.exg>.h{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;cursor:pointer;
  margin:0 !important;padding:18px 24px 8px;background:none;border:0;
}
main .exq.exg>.h::before{
  content:"BLOQUE " counter(exg,decimal-leading-zero);flex-basis:100%;
  color:var(--ex-accent);font-size:.64rem;font-weight:850;letter-spacing:.12em;
}
main .exq.exg>.h b{flex:1 1 auto;color:var(--d2);font-size:clamp(1.08rem,2.3vw,1.3rem);line-height:1.35}
main .exq.exg>.h b::before{content:"▾";display:inline-block;margin-right:8px;color:var(--a);font-size:.8em;transition:transform .18s}
main .exq.exg.exg-cerrada>.h b::before{transform:rotate(-90deg)}
main .exq.exg>.h .tag{display:none}
main .exq.exg>.h[data-n]::after{
  content:attr(data-n);flex:none;align-self:center;font-size:.68rem;font-weight:700;color:var(--muted);
  background:var(--soft);border-radius:999px;padding:2px 9px;white-space:nowrap;
}
main .exq.exg>.h:hover b{color:var(--a)}
main .exq.exg>.ejnivel{display:none}
/* plegada: queda la franja, el título con la vista previa, pizarra y corrector */
main .exq.exg.exg-cerrada>*:not(.exg-top):not(.h):not(.pzej):not(.corrEsc):not(.corr){display:none !important}
main .exq.exg.exg-cerrada>.h{padding-bottom:4px}
main .exq.exg.exg-cerrada>.h[data-teaser]::after{
  content:attr(data-teaser) "  seguir leyendo";order:5;flex-basis:100%;
  margin-top:6px;padding:0;background:none;border-radius:0;
  color:var(--muted);font-size:.89rem;font-weight:400;line-height:1.55;white-space:normal;align-self:auto;
}
main .exq.exg.exg-cerrada>.pzej,main .exq.exg.exg-cerrada>.corrEsc{margin-top:12px}
/* las cajas de adentro con el margen de la tarjeta */
main .exq.exg>.enun{margin:12px 24px 18px}
main .exq.exg>.enun::before{content:"📋 ENUNCIADO · CONTEXTO Y DATOS"}
main .exq.exg>p.eli5{margin:14px 24px 16px;border-radius:14px}
main .exq.exg>details.reveal,main .exq.exg>.sinpauta{margin-left:24px;margin-right:24px}
main .exq.exg>.pzej,main .exq.exg>.corrEsc{margin-left:24px}
main .exq.exg>.corrEsc+.pzej{margin-left:8px}
main .exq.exg>.corr{margin-left:24px;margin-right:24px}
main .exq.exg>ol.pide{margin-left:24px;margin-right:24px}
/* "Abrir las N preguntas" */
.exg-todo{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--a2);
  border-radius:999px;padding:5px 13px;font-family:inherit;font-size:.78rem;font-weight:700;cursor:pointer;margin:6px 0 2px}
.exg-todo:hover{background:var(--soft);border-color:var(--a)}
@media(max-width:640px){
  main .exq.exg{margin:16px 0 22px;border-radius:16px}
  main .exq.exg>.exg-top{padding:10px 14px;align-items:flex-start}
  main .exq.exg .exg-t,main .exq.exg .exg-d{font-size:.6rem}
  main .exq.exg>.h{padding:15px 15px 6px}
  main .exq.exg>.h[data-n]::after{display:none}
  main .exq.exg.exg-cerrada>.h[data-teaser]::after{display:block}
  main .exq.exg>.enun{margin:10px 14px 14px}
  main .exq.exg>p.eli5,main .exq.exg>details.reveal,main .exq.exg>.sinpauta,main .exq.exg>.corr,main .exq.exg>ol.pide{margin-left:14px;margin-right:14px}
  main .exq.exg>.pzej,main .exq.exg>.corrEsc{margin-left:14px}
  main .exq.exg>.corrEsc+.pzej{margin-left:8px}
}

/* En PC (mouse) el marcador y el lápiz sobran: se subraya seleccionando texto. Quedan en celular y tablet. */
@media (hover:hover) and (pointer:fine){#qnMk,#qiBar{display:none!important}}

/* ---- Procesos por etapas y tipos de diseño (05-10-2026) ---------------
   .etapas: línea de tiempo vertical, cada etapa con qué haces / para qué
   sirve / qué entrega / en el ejemplo. Lleva .tool para que plegable.js
   no la esconda. .tipos: tarjetas lado a lado para comparar alternativas. */
.etapas{list-style:none;margin:14px 0 16px;padding:0;counter-reset:et}
.etapas>li{position:relative;margin:0;padding:0 0 16px 54px;counter-increment:et}
.etapas>li:last-child{padding-bottom:0}
.etapas>li::before{content:counter(et);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--grad-a);color:#fff;font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(31,49,98,.25)}
.etapas>li::after{content:"";position:absolute;left:18px;top:42px;bottom:4px;width:2px;background:var(--line)}
.etapas>li:last-child::after{display:none}
.etapas .et{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px}
.etapas .et>b.t{display:block;font-size:1.02rem;color:var(--a2);margin-bottom:6px;line-height:1.3}
.etapas .et .r{display:grid;grid-template-columns:104px 1fr;gap:2px 10px;padding:4px 0;font-size:.92rem;line-height:1.55;border-top:1px dashed var(--line)}
.etapas .et .r:first-of-type{border-top:0}
.etapas .et .r>i{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.etapas .et .r.ej2{background:#ede7fd;border-radius:8px;border-top:0;margin-top:5px;padding:6px 9px;color:#2b1174}
.etapas .et .r.ej2>i{color:#2d1179}
@media(max-width:640px){
  .etapas>li{padding-left:46px}
  .etapas>li::before{width:32px;height:32px;font-size:.95rem}
  .etapas>li::after{left:15px;top:36px}
  .etapas .et .r{grid-template-columns:1fr}
  .etapas .et .r>i{padding-top:0}
}
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}
.tipos>div{background:#fff;border:1px solid var(--line);border-top:5px solid var(--a);border-radius:12px;padding:11px 13px;font-size:.9rem;line-height:1.55}
.tipos>div:nth-child(2){border-top-color:var(--gold)}
.tipos>div:nth-child(3){border-top-color:#c0576b}
.tipos .tn{display:block;font-weight:800;font-size:1rem;color:var(--a2);line-height:1.25}
.tipos .ts{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px}
.tipos .tq{background:var(--soft);border-radius:8px;padding:6px 9px;margin:6px 0;font-weight:600;color:var(--a2)}
.tipos .tk{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:7px}
@media(max-width:860px){.tipos{grid-template-columns:1fr}}
/* dos listas de definiciones lado a lado: misma columna de término y tarjeta propia */
.caus{align-items:stretch}
.caus>div{background:#f7f6fb;border:1px solid var(--line);border-radius:12px;padding:10px 14px 12px}
.caus h5{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.caus ul.filas.fijo{margin-top:0}
.caus ul.filas.fijo>li{grid-template-columns:8.5em 1fr;background:#fff;border-radius:0 8px 8px 0;border-left:3px solid var(--a)}
@media(max-width:560px){.caus ul.filas.fijo>li{grid-template-columns:1fr}}

/* 08-10-2026, Fernando: "limpiar, limpiar, limpiar". Fuera en todas las pestañas:
   el conteo de palabras de cada concepto, el botón "Mídete en este tema", el
   párrafo de entrada bajo el título y "Abrir los N apartados". */
h3 .plN,.tqtab,#qtWrap,section.tab>p.lead,.plTodo{display:none!important}
/* colores del ejemplo aplicado largo (assets/ejx.css) */
.ej.ejx{--ejx-a:#6130e8;--ejx-d:#3d1fa3;--ejx-tx:#1a2b5b;--ejx-tx2:#33406b;--ejx-l:#cfc8f0;--ejx-l2:#ddd7f5;--ejx-th:#ebe7fb;--ejx-track:#f1eff9}