/* =========================================================================
   VBA en Excel · Ciclos repetitivos — estilos
   Tema claro/oscuro con data-theme en <html> (clave compartida edu-theme).
   ========================================================================= */
:root{
  color-scheme:light;
  --bg:#eef4f0; --panel:#ffffff; --panel-2:#f5f9f6; --soft:#e7f2eb;
  --text:#14231a; --text-2:#3f5647; --text-m:#7a8f81;
  --accent:#1d7044; --accent-2:#0f5b8a; --accent-soft:#dff0e6;
  --ok:#15803d; --warn:#b45309; --bad:#c62828; --info:#1d4ed8;
  --line:rgba(29,112,68,.16); --line-2:rgba(29,112,68,.3);
  --sh:0 6px 22px rgba(20,60,35,.09); --sh-lg:0 18px 48px rgba(20,60,35,.16);
  --grad:linear-gradient(135deg,#1d7044,#0f5b8a);
  --mono:Consolas,"Cascadia Mono","Courier New",monospace;
  /* editor VBE */
  --ed-bg:#ffffff; --ed-gut:#f0f0f0; --ed-gut-t:#8a8a8a; --ed-text:#000000;
  --ed-kw:#0000ff; --ed-com:#008000; --ed-str:#a31515; --ed-num:#098658; --ed-obj:#267f99;
  --ed-exec:#fff59d; --ed-err:#ffcdd2; --ed-bp:#9b1c1c; --ed-sel:rgba(0,120,215,.25);
  /* hoja de cálculo */
  --xl-bg:#ffffff; --xl-grid:#dadcdf; --xl-head:#f3f3f3; --xl-head-t:#444; --xl-head-sel:#d3f0e0;
  --xl-sel:#1d7044; --xl-flash:#fff3b0; --xl-text:#111;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c1511; --panel:#131f19; --panel-2:#18271f; --soft:#1a2c22;
  --text:#e3efe7; --text-2:#a9bfb1; --text-m:#6f8a79;
  --accent:#3ecf8e; --accent-2:#5cb3f0; --accent-soft:#193527;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
  --line:rgba(62,207,142,.15); --line-2:rgba(62,207,142,.3);
  --sh:0 6px 22px rgba(0,0,0,.4); --sh-lg:0 18px 48px rgba(0,0,0,.55);
  --grad:linear-gradient(135deg,#1f8a57,#1d6fa5);
  --ed-bg:#1e1e1e; --ed-gut:#252526; --ed-gut-t:#858585; --ed-text:#d4d4d4;
  --ed-kw:#569cd6; --ed-com:#6a9955; --ed-str:#ce9178; --ed-num:#b5cea8; --ed-obj:#4ec9b0;
  --ed-exec:#5c5410; --ed-err:#5a1d1d; --ed-bp:#f14c4c; --ed-sel:rgba(38,79,120,.8);
  --xl-bg:#1b1b1b; --xl-grid:#3a3a3a; --xl-head:#262626; --xl-head-t:#bbb; --xl-head-sel:#1f4a33;
  --xl-sel:#3ecf8e; --xl-flash:#5a4d10; --xl-text:#e8e8e8;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-2)}
code,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------ barra top */
.top{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh)}
.top-in{max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;white-space:nowrap}
.logo .ico{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:.95rem;letter-spacing:-.5px;box-shadow:var(--sh)}
.logo small{display:block;font-weight:600;color:var(--text-m);font-size:.72rem;margin-top:-3px}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:0;background:transparent;padding:8px 12px;border-radius:10px;font-weight:650;font-size:.9rem;color:var(--text-2);white-space:nowrap}
.tab:hover{background:var(--soft)}
.tab.on{background:var(--accent-soft);color:var(--accent)}
.top-acc{display:flex;gap:6px;align-items:center}
.ibtn{border:1px solid var(--line-2);background:var(--panel-2);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;font-size:1.05rem}
.ibtn:hover{background:var(--soft)}
.prog-mini{font-size:.78rem;color:var(--text-m);white-space:nowrap}
.prog-mini b{color:var(--accent)}

main{max-width:1500px;margin:0 auto;padding:18px 16px 60px}
.sec{display:none}
.sec.on{display:block;animation:ent .25s ease}
@keyframes ent{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ piezas comunes */
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);padding:18px}
.h1{font-size:1.6rem;font-weight:800;line-height:1.2}
.h2{font-size:1.2rem;font-weight:800;margin:4px 0 10px}
.sub{color:var(--text-2)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--panel-2);padding:7px 12px;border-radius:10px;font-weight:650;font-size:.88rem;white-space:nowrap}
.btn:hover{background:var(--soft)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .btn.pri{color:#06170e}
.btn.pri:hover{filter:brightness(1.08)}
.btn.pri .kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:inherit}
.btn.warn{border-color:var(--warn);color:var(--warn)}
.btn.bad{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:4px 9px;font-size:.8rem;border-radius:8px}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.74rem;font-weight:700;background:var(--soft);color:var(--text-2);border:1px solid var(--line)}
.chip.b{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.chip.i{background:#fef3c7;color:#92400e;border-color:#fde68a}
.chip.a{background:#fee2e2;color:#991b1b;border-color:#fecaca}
[data-theme="dark"] .chip.b{background:#14351f;color:#86efac;border-color:#1f5130}
[data-theme="dark"] .chip.i{background:#3a2d0c;color:#fcd34d;border-color:#5b4513}
[data-theme="dark"] .chip.a{background:#3d1717;color:#fca5a5;border-color:#5f2222}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.muted{color:var(--text-m)}
.kbd{font-family:var(--mono);font-size:.78rem;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:6px;padding:0 6px;background:var(--panel-2)}

/* ------------------------------------------------------------- inicio */
.hero{position:relative;overflow:hidden;border-radius:20px;padding:30px;background:var(--grad);color:#fff;box-shadow:var(--sh-lg)}
.hero h1{font-size:2rem;line-height:1.15;max-width:760px}
.hero p{max-width:720px;opacity:.93;margin-top:10px;font-size:1.02rem}
.hero .deco{position:absolute;right:18px;top:12px;font-family:var(--mono);font-size:.82rem;line-height:1.5;opacity:.22;white-space:pre;pointer-events:none}
.hero .acc{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero .btn{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);color:#fff}
.hero .btn.pri{background:#fff;color:#14532d;border-color:#fff}
.mod-card{cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column;gap:6px}
.mod-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.mod-card .em{font-size:1.8rem}
.mod-card h3{font-size:1.02rem}
.mod-card p{font-size:.88rem;color:var(--text-2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat b{display:block;font-size:1.5rem;color:var(--accent)}
.stat span{font-size:.8rem;color:var(--text-m)}

/* ------------------------------------------------------------ lecciones */
.aprende{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
.lec-nav{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;padding:10px}
.lec-nav button{display:flex;gap:8px;align-items:center;width:100%;text-align:left;border:0;background:transparent;padding:8px 10px;border-radius:10px;font-size:.88rem;color:var(--text-2)}
.lec-nav button:hover{background:var(--soft)}
.lec-nav button.on{background:var(--accent-soft);color:var(--accent);font-weight:700}
.lec-nav button .ok{margin-left:auto;color:var(--ok);font-size:.8rem}
.lec-nav .grp{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-m);font-weight:800;margin:10px 10px 4px}
.lec{padding:24px;min-width:0}
.lec h2{font-size:1.5rem;line-height:1.2;margin-bottom:4px}
.lec h3{font-size:1.1rem;margin:20px 0 8px;color:var(--accent)}
.lec p{margin:8px 0;color:var(--text)}
.lec ul,.lec ol{margin:8px 0 8px 22px}
.lec li{margin:3px 0}
.lec table{border-collapse:collapse;width:100%;margin:10px 0;font-size:.9rem}
.lec th,.lec td{border:1px solid var(--line-2);padding:7px 9px;text-align:left;vertical-align:top}
.lec th{background:var(--soft)}
.tabla-wrap{overflow-x:auto}
.nota{border-left:4px solid var(--info);background:var(--panel-2);padding:10px 14px;border-radius:0 10px 10px 0;margin:12px 0}
.nota.tip{border-color:var(--ok)}
.nota.warn{border-color:var(--warn)}
.nota.bad{border-color:var(--bad)}
.nota b:first-child{display:block;margin-bottom:2px}
.lec-pie{display:flex;justify-content:space-between;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.analogia{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border-radius:14px;padding:12px 14px;margin:12px 0}
.analogia .em{font-size:1.6rem}

/* Bloque de código de las lecciones */
.code{margin:12px 0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--ed-bg)}
.code-bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ed-gut);border-bottom:1px solid var(--line);flex-wrap:wrap}
.code-bar .tt{font-size:.78rem;color:var(--ed-gut-t);font-weight:700;margin-right:auto;font-family:var(--mono)}
.code pre{margin:0;padding:12px 14px;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.5;color:var(--ed-text);tab-size:4}
.code .salida{border-top:1px dashed var(--line-2);padding:8px 14px;font-family:var(--mono);font-size:.82rem;color:var(--text-2);background:var(--panel-2);white-space:pre-wrap}
.code .salida b{font-family:'Segoe UI',sans-serif;color:var(--text-m);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;display:block}
.tk-kw{color:var(--ed-kw)} .tk-com{color:var(--ed-com);font-style:italic} .tk-str{color:var(--ed-str)} .tk-num{color:var(--ed-num)} .tk-obj{color:var(--ed-obj)}

/* Diagramas de flujo */
.flujo{display:flex;justify-content:center;margin:12px 0;overflow-x:auto}
.flujo svg{max-width:100%;height:auto}
.flujo .caja{fill:var(--panel-2);stroke:var(--accent);stroke-width:2}
.flujo .dec{fill:var(--accent-soft);stroke:var(--accent-2);stroke-width:2}
.flujo .ext{fill:var(--accent);stroke:none}
.flujo text{fill:var(--text);font-family:'Segoe UI',sans-serif;font-size:13px}
.flujo .ext + text,.flujo text.cl{fill:#fff;font-weight:700}
[data-theme="dark"] .flujo text.cl{fill:#06170e}
.flujo .fl{stroke:var(--text-2);stroke-width:2;fill:none}
.flujo .lb{font-size:12px;font-weight:700;fill:var(--accent-2)}
.flujo .lb.no{fill:var(--bad)}
.flujo .activo{stroke:var(--warn);stroke-width:3.5}

/* --------------------------------------------------------- emulador */
.emu{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:12px}
.emu-reto{grid-column:1/-1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.panel-h{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--panel-2);font-size:.82rem;font-weight:700;color:var(--text-2);flex-wrap:wrap}
.panel-h .tit{display:flex;align-items:center;gap:6px}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line)}
.toolbar .sep{width:1px;height:24px;background:var(--line-2);margin:0 2px}
.toolbar select{border:1px solid var(--line-2);background:var(--panel-2);border-radius:8px;padding:5px 6px;font-size:.84rem;max-width:180px}
.vel{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2)}
.vel input{width:96px;accent-color:var(--accent)}
.vel output{min-width:74px;font-weight:700}

.ed{display:flex;background:var(--ed-bg);position:relative;height:430px;font-family:var(--mono);font-size:14px;line-height:21px}
.ed-gut{width:58px;flex:none;background:var(--ed-gut);color:var(--ed-gut-t);overflow:hidden;position:relative;user-select:none;border-right:1px solid var(--line)}
.ed-gut-in{position:absolute;left:0;right:0;top:0;padding:8px 0}
.gl{height:21px;position:relative;text-align:right;padding-right:6px;font-size:12px;cursor:pointer}
.gl .bp{position:absolute;left:4px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ed-bp);display:none}
.gl.bpon .bp{display:block}
.gl.exec::before{content:'➜';position:absolute;left:3px;top:0;color:#d4a600;font-size:13px}
.gl .vu{position:absolute;left:18px;top:3px;font-size:9.5px;line-height:14px;padding:0 3px;border-radius:5px;background:var(--accent);color:#fff;font-weight:700;display:none}
[data-theme="dark"] .gl .vu{color:#06170e}
.gl.hayvu .vu{display:block}
.gl.hayvu{color:transparent}
.gl.hayvu .vu,.gl.hayvu .bp{color:#fff}
.ed-area{position:relative;flex:1;overflow:hidden}
.ed-hl,.ed-txt{position:absolute;inset:0;margin:0;padding:8px 10px;font:inherit;line-height:inherit;tab-size:4;white-space:pre;letter-spacing:0;word-spacing:0}
.ed-hl{pointer-events:none;color:var(--ed-text);overflow:hidden}
.ed-hl-in{position:absolute;left:0;top:0;padding:8px 10px;min-width:100%}
.ed-hl .cl{height:21px;padding-right:20px}
.ed-hl .cl.exec{background:var(--ed-exec)}
.ed-hl .cl.errl{background:var(--ed-err)}
.ed-hl .cl.bpl{background:rgba(155,28,28,.14)}
.ed-hl-in{padding:8px 10px}
.ed-txt{background:transparent;color:transparent;caret-color:var(--ed-text);border:0;resize:none;outline:none;overflow:auto;z-index:1}
.ed-txt::selection{background:var(--ed-sel)}
.ed-txt[readonly]{cursor:default}
.ed-estado{display:flex;gap:12px;align-items:center;padding:5px 10px;font-size:.76rem;border-top:1px solid var(--line);background:var(--panel-2);color:var(--text-2);min-height:28px;flex-wrap:wrap}
.ed-estado .pt{width:9px;height:9px;border-radius:50%;background:var(--text-m);display:inline-block;margin-right:5px}
.ed-estado.run .pt{background:var(--ok);animation:lat 1s infinite}
.ed-estado.pausa .pt{background:var(--warn)}
.ed-estado.error .pt{background:var(--bad)}
.ed-estado.error{color:var(--bad);font-weight:600}
@keyframes lat{50%{opacity:.3}}

/* Hoja de cálculo */
.xl-fx{display:flex;border-bottom:1px solid var(--xl-grid);background:var(--xl-bg);font-size:.84rem}
.xl-nb{width:74px;flex:none;border-right:1px solid var(--xl-grid);padding:4px 8px;font-family:var(--mono);color:var(--xl-text)}
.xl-fxi{padding:4px 8px;color:var(--text-m);font-style:italic;border-right:1px solid var(--xl-grid)}
.xl-fv{flex:1;padding:4px 8px;font-family:var(--mono);color:var(--xl-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-wrap{overflow:auto;height:398px;background:var(--xl-bg);position:relative}
table.xl{border-collapse:collapse;table-layout:fixed;font-size:13px;color:var(--xl-text);font-family:Calibri,'Segoe UI',sans-serif}
.xl th{background:var(--xl-head);color:var(--xl-head-t);font-weight:500;border:1px solid var(--xl-grid);position:sticky;top:0;z-index:2;height:22px;font-size:12px}
.xl th.rh{position:sticky;left:0;z-index:1;width:42px;min-width:42px}
.xl thead th.rh{z-index:3}
.xl th.hs{background:var(--xl-head-sel);color:var(--accent);font-weight:700}
.xl td{border:1px solid var(--xl-grid);height:22px;width:84px;min-width:84px;max-width:84px;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip;cursor:cell;position:relative}
.xl td.num{text-align:right}
.xl td.bool{text-align:center}
.xl td.err{text-align:center;color:var(--bad)}
.xl td.sel{outline:2px solid var(--xl-sel);outline-offset:-2px;z-index:1}
.xl td.rsel{background-image:linear-gradient(rgba(29,112,68,.12),rgba(29,112,68,.12))}
.xl td.flash{animation:flash 1s ease}
@keyframes flash{0%{box-shadow:inset 0 0 0 40px var(--xl-flash)}100%{box-shadow:inset 0 0 0 40px transparent}}
.xl td input{position:absolute;inset:0;width:100%;border:2px solid var(--xl-sel);padding:0 3px;font:inherit;background:var(--xl-bg);color:var(--xl-text);outline:none}
.xl-tabs{display:flex;gap:2px;padding:0 8px;background:var(--xl-head);border-top:1px solid var(--xl-grid);overflow-x:auto}
.xl-tabs button{border:0;background:transparent;padding:5px 14px;font-size:.8rem;color:var(--text-2);border-bottom:3px solid transparent}
.xl-tabs button.on{background:var(--xl-bg);color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}

/* Panel inferior */
.emu-bajo{grid-column:1/-1}
.ptabs{display:flex;gap:2px}
.ptabs button{border:0;background:transparent;padding:4px 10px;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--text-2)}
.ptabs button.on{background:var(--accent-soft);color:var(--accent)}
.pbody{height:190px;overflow:auto}
.inm{font-family:var(--mono);font-size:13px;padding:8px 12px;white-space:pre;color:var(--ed-text);background:var(--ed-bg);min-height:100%}
.inm .vacio{color:var(--text-m);font-style:italic;font-family:'Segoe UI',sans-serif;white-space:normal}
table.loc{width:100%;border-collapse:collapse;font-size:.84rem}
.loc th,.loc td{border-bottom:1px solid var(--line);padding:5px 10px;text-align:left}
.loc th{position:sticky;top:0;background:var(--panel-2);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-m)}
.loc td.v{font-family:var(--mono)}
.loc tr.cambio td.v{background:var(--xl-flash);transition:background 1s}
.loc .amb{font-size:.72rem;color:var(--text-m)}
.vuelta-row{display:grid;grid-template-columns:120px 1fr 70px;gap:10px;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line);font-size:.84rem}
.vuelta-row .barra{height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.vuelta-row .barra i{display:block;height:100%;background:var(--grad);border-radius:6px}
.vuelta-row code{font-size:.8rem}

/* Reto (ejercicio) sobre el emulador */
.reto{border:2px solid var(--accent);border-radius:14px;background:var(--panel);padding:14px 16px;box-shadow:var(--sh)}
.reto-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.reto-h h3{font-size:1.05rem;margin-right:auto}
.reto .enun{margin-top:8px}
.reto .pista{display:none;margin-top:8px}
.reto .pista.on{display:block}
.reto .res{margin-top:10px;display:none}
.reto .res.on{display:block}
.res-ok{border-left:4px solid var(--ok);background:var(--panel-2);padding:10px 12px;border-radius:0 10px 10px 0}
.res-no{border-left:4px solid var(--bad);background:var(--panel-2);padding:10px 12px;border-radius:0 10px 10px 0}
.res-no ul{margin:6px 0 0 18px;font-size:.88rem}

/* --------------------------------------------------- ejemplos/ejercicios */
.filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 16px}
.filtros button{border:1px solid var(--line-2);background:var(--panel);border-radius:20px;padding:5px 12px;font-size:.82rem;font-weight:650;color:var(--text-2)}
.filtros button.on{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme="dark"] .filtros button.on{color:#06170e}
.filtros input{border:1px solid var(--line-2);background:var(--panel);border-radius:20px;padding:5px 12px;font-size:.85rem;min-width:200px}
.ej-card{display:flex;flex-direction:column;gap:8px}
.ej-card h3{font-size:1rem;line-height:1.3}
.ej-card p{font-size:.87rem;color:var(--text-2);flex:1}
.ej-card .meta{display:flex;gap:6px;flex-wrap:wrap}
.ej-card .acc{display:flex;gap:6px;flex-wrap:wrap}
.ej-card.hecho{border-color:var(--ok)}
.ej-card .hecho-m{color:var(--ok);font-weight:800;font-size:.8rem}
.ej-det{margin-top:14px}

/* ----------------------------------------------------------------- lab */
.lab{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
.lab>*{min-width:0}
.lab-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.lab-dos{grid-template-columns:minmax(0,1fr)}}
.lab label{display:block;font-size:.8rem;font-weight:700;color:var(--text-2);margin:10px 0 4px}
.lab input[type=number],.lab select,.lab input[type=text]{width:100%;border:1px solid var(--line-2);background:var(--panel-2);border-radius:10px;padding:7px 10px}
.lab .fila{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cinta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.cinta .it{min-width:46px;padding:8px 6px;text-align:center;border-radius:10px;border:2px solid var(--line-2);background:var(--panel-2);font-family:var(--mono);font-weight:700;transition:all .2s}
.cinta .it small{display:block;font-size:.62rem;color:var(--text-m);font-family:'Segoe UI',sans-serif;font-weight:600}
.cinta .it.on{border-color:var(--warn);background:#fff7d6;transform:translateY(-3px)}
[data-theme="dark"] .cinta .it.on{background:#3a300b}
.cinta .it.hecho{border-color:var(--accent);background:var(--accent-soft)}
.cinta .it.fin{border-style:dashed;border-color:var(--bad);color:var(--bad)}
.lab-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.lab-res .stat b{font-size:1.25rem}
table.traza{border-collapse:collapse;width:100%;font-size:.85rem}
.traza th,.traza td{border:1px solid var(--line);padding:5px 8px;text-align:center}
.traza th{background:var(--soft)}
.traza tr.on td{background:#fff7d6}
[data-theme="dark"] .traza tr.on td{background:#3a300b}
.traza td.f{color:var(--bad);font-weight:700}
.traza td.v{color:var(--ok);font-weight:700}

/* ---------------------------------------------------------------- quiz */
.quiz{max-width:840px;margin:0 auto}
.q-prog{height:8px;border-radius:6px;background:var(--soft);overflow:hidden;margin:8px 0 16px}
.q-prog i{display:block;height:100%;background:var(--grad);transition:width .3s}
.q-op{display:block;width:100%;text-align:left;border:2px solid var(--line-2);background:var(--panel);border-radius:12px;padding:10px 14px;margin:8px 0;font-size:.95rem}
.q-op:hover:not(:disabled){border-color:var(--accent)}
.q-op.ok{border-color:var(--ok);background:rgba(21,128,61,.1)}
.q-op.no{border-color:var(--bad);background:rgba(198,40,40,.08)}
.q-exp{margin-top:10px}

/* ---------------------------------------------------------- referencia */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:14px}
.ref-grid .card h3{font-size:1rem;margin-bottom:8px}
.ref-grid table{width:100%;border-collapse:collapse;font-size:.85rem}
.ref-grid td{border-bottom:1px solid var(--line);padding:5px 4px;vertical-align:top}
.ref-grid td:first-child{font-family:var(--mono);color:var(--accent-2);overflow-wrap:anywhere;padding-right:10px;min-width:120px}
.autotest{margin-top:16px}
.autotest pre{font-family:var(--mono);font-size:.8rem;white-space:pre-wrap;max-height:320px;overflow:auto;background:var(--panel-2);padding:10px;border-radius:10px;margin-top:8px}

/* ------------------------------------------------------ diálogos (MsgBox) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal.on{display:flex}
.win{background:#fff;color:#111;border:1px solid #9aa0a6;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.35);min-width:300px;max-width:min(520px,100%);font-family:'Segoe UI',sans-serif;font-size:.9rem;overflow:hidden}
[data-theme="dark"] .win{background:#2b2b2b;color:#eee;border-color:#555}
.win-t{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:.82rem}
.win-t button{border:0;background:transparent;font-size:1rem;width:28px;height:24px;border-radius:4px}
.win-t button:hover{background:#e81123;color:#fff}
.win-b{display:flex;gap:14px;padding:14px 18px 18px;align-items:flex-start}
.win-b .ic{font-size:1.9rem;line-height:1}
.win-b .msg{white-space:pre-wrap;word-break:break-word;flex:1;padding-top:4px}
.win-b input{margin-top:10px;width:100%;border:1px solid #8a8a8a;padding:5px 7px;border-radius:3px;background:#fff;color:#111}
[data-theme="dark"] .win-b input{background:#1e1e1e;color:#eee;border-color:#666}
.win-f{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;background:#f0f0f0;border-top:1px solid #ddd}
[data-theme="dark"] .win-f{background:#202020;border-color:#444}
.win-f button{min-width:84px;padding:4px 12px;border:1px solid #adadad;background:#e1e1e1;border-radius:3px;color:#111}
.win-f button.def{border:2px solid #0078d7}
.win-f button:hover{background:#e5f1fb;border-color:#0078d7}
[data-theme="dark"] .win-f button{background:#3a3a3a;color:#eee;border-color:#666}
.win.err .win-t{background:#fff}
.win .pista{margin-top:10px;padding:8px 10px;background:#fff8e1;border-radius:6px;font-size:.84rem;color:#5d4200}
[data-theme="dark"] .win .pista{background:#3a300b;color:#fde68a}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--text);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:600;font-size:.9rem;z-index:120;transition:transform .3s;box-shadow:var(--sh-lg);max-width:calc(100% - 32px)}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ----------------------------------------------------------- responsive */
@media (max-width:1100px){
  .emu{grid-template-columns:1fr}
  .ed{height:360px}
  .xl-wrap{height:330px}
}
@media (max-width:860px){
  .aprende,.lab{grid-template-columns:1fr}
  .lec-nav{position:static;max-height:none;display:flex;overflow-x:auto;gap:4px;padding:8px}
  .lec-nav .grp{display:none}
  .lec-nav button{width:auto;white-space:nowrap}
  .logo small{display:none}
  .prog-mini{display:none}
}
@media (max-width:600px){
  .top-in{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .tabs{order:3;flex-basis:100%}
  .top-acc{margin-left:auto}
  main{padding:14px 12px 50px}
  .hero{padding:22px 18px}
  .hero h1{font-size:1.45rem}
  .hero .deco{display:none}
  .lec{padding:16px}
  .ed{font-size:13px}
  .ed-gut{width:46px}
  .vel input{width:70px}
  .toolbar .txt-opc{display:none}
  .vuelta-row{grid-template-columns:90px 1fr 56px}
}
@media print{
  .top,.toolbar,.lec-nav,.lec-pie{display:none!important}
  .sec{display:none!important}
  .sec.on{display:block!important}
}