/* =========================================================================
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:#0a2540; --d2:#123a63; --a:#1f6f8b; --a2:#123146; --soft:#e6f1f6;
--line:#cfe0e9; --ink:#132833; --muted:#557080; --gold:#f5b800; --gold2:#e0a800;
--grad-dark:linear-gradient(135deg,#0a2540 0%,#123a63 48%,#17507f 100%);
--grad-a:linear-gradient(135deg,#1f6f8b,#123146);
--grad-gold:linear-gradient(135deg,#ffd75e,#e0a800);
--bg:#eef2f6;
}
*{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:#d7e9f2;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(10,37,64,.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:#d7e9f2;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:#3a2c00;box-shadow:0 6px 16px -8px rgba(245,184,0,.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(10,37,64,.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:#fff5d6;color:#8a6d00;border-radius:6px;padding:1px 8px;font-size:.78rem;font-weight:700}
/* fórmulas */
.fml{background:var(--dark);color:#eef7fb;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:#cfe3ee;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:#d3e6f0}
.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:#fdf8e7;border:1px solid #f0e0a8;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:#5c4a00}
.obj::before{content:"🎯 Para qué sirve";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#8a6d00;margin-bottom:5px}
.eli5{background:linear-gradient(160deg,#eaf4fa,#dfeef6);border:1px solid #bcdcea;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:#12354a}
.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 #9dc9dd}
.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:#eef7fb;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:#eef5fb;border:1px solid #c8ddf0;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:#173a5e}
.ej::before{content:"🧮 Ejemplo aplicado";display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#2e6da4;margin-bottom:5px}
.ej b{color:#0d4b8c}
.note{background:#f1f8fb;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:#fcfdfe;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 (A: ... 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:#f8fafc}
.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(10,37,64,.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:#f7fafc;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:#fbfcfd;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}
.exq>.enun>p:first-child,.exq>p:first-of-type:not(.eli5),.exq>.eli5+p{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:#f6f9fb;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:#f2f7fa;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:#3a2c00;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(245,184,0,.95);transition:.15s}
.tqtab:hover{filter:brightness(1.05)}
.tqtab .tqsc{background:rgba(255,255,255,.7);color:#5c4a00;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(10,37,64,.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:#fdf3d6;color:#8a6d00}
.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:#f2f6f8;color:#8496a3;white-space:nowrap}
.av .row .medida:empty{display:none}
.av .row .medida.bien{background:#e2f7ec;color:#0d6b3f}
.av .row .medida.medio{background:#fdf3d6;color:#8a6d00}
.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:#3a2c00;border:none;border-radius:999px;padding:14px 20px;font-weight:800;font-size:.95rem;cursor:pointer;box-shadow:0 14px 30px -10px rgba(224,168,0,.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:#f4f7f9}
.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:#d7e9f2}
.tabs button.active:hover{background:var(--grad-gold);color:#3a2c00}
}
/* 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)}