/* ==========================================================================
   Aprende Arduino — estilos (tema claro/oscuro con data-theme en <html>)
   ========================================================================== */
@font-face{font-family:'Nunito';src:url('../../fonts/Nunito-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Nunito';src:url('../../fonts/Nunito-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Nunito';src:url('../../fonts/Nunito-Black.ttf') format('truetype');font-weight:900;font-display:swap;}

:root{
	--zoom:1;
	--bg:#eef5f5; --bg2:#f7fbfb; --card:#ffffff; --text:#12262a; --text2:#40585d; --muted:#6f878c;
	--ard:#00878f; --ard2:#006d74; --ard-s:rgba(0,135,143,.1); --acc:#e47128;
	--ok:#2e9d57; --ok-s:rgba(46,157,87,.12); --bad:#d64545; --bad-s:rgba(214,69,69,.1); --warn:#d99a16; --warn-s:rgba(217,154,22,.13);
	--line:rgba(0,90,96,.15); --sh:0 2px 10px rgba(0,60,64,.07); --sh2:0 10px 30px rgba(0,60,64,.12);
	--code-bg:#1b2528; --code-tx:#dce6e8;
	--r:14px;
}
:root[data-theme="dark"]{
	--bg:#0d1517; --bg2:#121d20; --card:#172327; --text:#e5eff0; --text2:#aabfc2; --muted:#7d9498;
	--ard:#1fb5bd; --ard2:#16939a; --ard-s:rgba(31,181,189,.12); --acc:#f08a45;
	--ok:#43c47a; --ok-s:rgba(67,196,122,.13); --bad:#f06b6b; --bad-s:rgba(240,107,107,.12); --warn:#f1b53a; --warn-s:rgba(241,181,58,.13);
	--line:rgba(140,200,205,.14); --sh:0 2px 10px rgba(0,0,0,.3); --sh2:0 10px 30px rgba(0,0,0,.4);
	--code-bg:#0a1113;
}
*,*::before,*::after{box-sizing:border-box;}
html{font-size:calc(16px * var(--zoom));scroll-behavior:smooth;}
body{margin:0;font-family:'Nunito',system-ui,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
a{color:var(--ard);}
code{font-family:Consolas,'Cascadia Mono',monospace;font-size:.9em;background:var(--ard-s);color:var(--ard);padding:1px 5px;border-radius:5px;}
button{font:inherit;}
svg{display:block;max-width:100%;height:auto;}

/* ---------- barra superior ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--sh);}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0;}
.brand-ico{width:38px;height:38px;border-radius:11px;background:var(--ard);display:grid;place-items:center;flex-shrink:0;}
.brand-ico svg{width:26px;}
.brand b{font-weight:900;font-size:1.05rem;white-space:nowrap;}
.brand small{display:block;color:var(--muted);font-size:.7rem;font-weight:700;line-height:1;}
.top-sp{flex:1;}
.prog{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:800;color:var(--text2);}
.prog-b{width:110px;height:8px;border-radius:9px;background:var(--ard-s);overflow:hidden;}
.prog-b i{display:block;height:100%;background:linear-gradient(90deg,var(--ard),var(--ok));border-radius:9px;transition:width .4s;}
.tb{border:1px solid var(--line);background:var(--bg2);color:var(--text);border-radius:10px;min-width:36px;height:36px;padding:0 8px;cursor:pointer;font-weight:800;}
.tb:hover{border-color:var(--ard);}
.zoom{display:flex;align-items:center;gap:4px;}
.zoom span{font-size:.72rem;color:var(--muted);font-weight:800;min-width:36px;text-align:center;}
#btnMenu{display:none;}

/* ---------- layout ---------- */
.lay{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:calc(100vh - 58px);}
#nav{position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;padding:14px 10px 30px;background:var(--bg2);border-right:1px solid var(--line);}
.nav-g{margin:16px 10px 6px;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.nav-it{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;text-decoration:none;color:var(--text2);font-size:.9rem;font-weight:700;line-height:1.3;}
.nav-it:hover{background:var(--ard-s);color:var(--text);}
.nav-it.act{background:var(--ard);color:#fff;}
.nav-ico{width:24px;text-align:center;flex-shrink:0;}
.nav-t{flex:1;}
.nav-ok{color:var(--ok);font-weight:900;}
.nav-it.act .nav-ok,.nav-it.act .nav-p{color:#fff;}
.nav-p{font-size:.68rem;color:var(--muted);font-weight:800;}
#main{padding:26px 34px 60px;max-width:1080px;width:100%;outline:none;}
#velo{display:none;}

/* ---------- inicio ---------- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:28px;border-radius:22px;background:linear-gradient(135deg,var(--ard-s),transparent 70%),var(--card);border:1px solid var(--line);box-shadow:var(--sh2);}
.kicker{display:inline-block;font-size:.75rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ard);background:var(--ard-s);padding:4px 10px;border-radius:20px;}
.hero h1{font-size:2.8rem;line-height:1.05;margin:12px 0 10px;font-weight:900;}
.hero h1 span{color:var(--ard);}
.hero p{color:var(--text2);margin:0 0 18px;}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap;}
.hero-stats b{display:block;font-size:1.6rem;font-weight:900;color:var(--ard);line-height:1.1;}
.hero-stats span{font-size:.78rem;color:var(--muted);font-weight:700;}
.sec-t{font-size:1.25rem;font-weight:900;margin:32px 0 12px;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.card-l{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--text);box-shadow:var(--sh);transition:transform .15s,border-color .15s;}
.card-l:hover{transform:translateY(-3px);border-color:var(--ard);}
.card-l.ok{border-color:var(--ok);}
.cl-ico{font-size:1.6rem;}
.cl-t{font-weight:900;line-height:1.25;}
.cl-r{font-size:.82rem;color:var(--text2);flex:1;}
.cl-bar{height:5px;border-radius:5px;background:var(--ard-s);overflow:hidden;margin-top:6px;}
.cl-bar i{display:block;height:100%;background:var(--ok);}
.cl-est{font-size:.72rem;font-weight:800;color:var(--muted);}
.card-l.ok .cl-est{color:var(--ok);}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:800;text-decoration:none;cursor:pointer;font-size:.92rem;transition:background .15s,border-color .15s,transform .1s;}
.btn:hover{border-color:var(--ard);}
.btn:active{transform:scale(.97);}
.btn.pri{background:var(--ard);border-color:var(--ard);color:#fff;}
.btn.pri:hover{background:var(--ard2);}
.btn.sm{padding:7px 12px;font-size:.84rem;}
.btn:disabled{opacity:.5;cursor:default;}
.btn:focus-visible,.op:focus-visible,.chip:focus-visible,.tb:focus-visible{outline:3px solid var(--acc);outline-offset:2px;}

/* ---------- lección ---------- */
.lec-h{margin-bottom:18px;}
.lec-g{font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--ard);}
.lec-h h1{display:flex;align-items:center;gap:12px;font-size:2rem;line-height:1.15;margin:4px 0;font-weight:900;}
.lec-ico{font-size:2.1rem;}
.lec-h p{color:var(--text2);margin:0;}
.lec-b>*{margin:0 0 18px;}
.par{font-size:1.02rem;}
.sub{font-size:1.35rem;font-weight:900;margin-top:30px!important;padding-bottom:6px;border-bottom:2px solid var(--ard-s);}
.lista{padding-left:22px;}
.lista li{margin:5px 0;}
.lec-nav{display:flex;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap;}
.formula{display:inline-block;font-family:Consolas,monospace;font-weight:700;background:var(--ard-s);color:var(--text);padding:3px 10px;border-radius:8px;margin:3px 0;}

.nota{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--card);border-left:5px solid var(--ard);}
.n-ico{font-size:1.3rem;line-height:1.3;}
.n-ojo{border-left-color:var(--warn);background:var(--warn-s);}
.n-tip{border-left-color:var(--ok);background:var(--ok-s);}
.n-dato{border-left-color:#8e6cc9;}
.n-meta{border-left-color:var(--acc);background:linear-gradient(90deg,rgba(228,113,40,.1),transparent);}
.n-reto{border-left-color:#8e24aa;background:rgba(142,36,170,.08);}

.fig{margin:0 auto;padding:16px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);text-align:center;}
.fig svg{margin:0 auto;max-height:430px;}
.fig figcaption{font-size:.86rem;color:var(--text2);margin-top:8px;}
.fila{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center;}
.fila>*{margin:0!important;}

.tabla-w{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);}
.tabla{width:100%;border-collapse:collapse;background:var(--card);font-size:.92rem;}
.tabla th{background:var(--ard);color:#fff;text-align:left;padding:9px 12px;font-weight:800;}
.tabla td{padding:8px 12px;border-top:1px solid var(--line);vertical-align:top;}
.tabla tr:nth-child(even) td{background:var(--bg2);}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.tarj{padding:14px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);transition:transform .15s;}
.tarj:hover{transform:translateY(-3px);}
.tarj-img{height:110px;display:grid;place-items:center;background:var(--bg2);border-radius:10px;margin-bottom:10px;padding:8px;}
.tarj-img svg{max-height:96px;width:auto;}
.tarj h3{margin:0 0 4px;font-size:1rem;font-weight:900;}
.tarj p{margin:0;font-size:.86rem;color:var(--text2);}

.materiales{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px;border-radius:var(--r);background:var(--card);border:1px dashed var(--line);}
.mat-t{font-weight:900;margin-right:6px;}
.mat{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:.86rem;}
.mat svg{width:46px;height:38px;}

/* ---------- código ---------- */
.codigo{border-radius:var(--r);overflow:hidden;background:var(--code-bg);border:1px solid #243236;box-shadow:var(--sh);}
.cod-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#00878f;color:#fff;}
.cod-dots{display:flex;gap:5px;}
.cod-dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);}
.cod-tit{font-weight:800;font-size:.86rem;flex:1;font-family:Consolas,monospace;}
.cod-copiar{border:0;background:rgba(255,255,255,.18);color:#fff;border-radius:7px;padding:3px 9px;font-size:.78rem;font-weight:800;cursor:pointer;}
.cod-pre{margin:0;padding:10px 0;overflow-x:auto;font-family:Consolas,'Cascadia Mono',monospace;font-size:.92rem;line-height:1.55;color:var(--code-tx);background:var(--code-bg);}
.ln{display:flex;align-items:flex-start;padding:0 12px 0 0;border-left:3px solid transparent;}
.ln.tiene-exp{cursor:pointer;}
.ln.tiene-exp:hover{background:rgba(255,255,255,.05);}
.ln.sel{background:rgba(31,181,189,.16);border-left-color:#1fb5bd;}
.ln.run{background:rgba(253,216,53,.2);border-left-color:#fdd835;}
.lnum{width:38px;flex-shrink:0;text-align:right;padding-right:12px;color:#5d7478;user-select:none;}
.lsrc{white-space:pre;flex:1;}
.lexp-ic{font-size:.75rem;opacity:.7;}
.cod-exp{padding:10px 14px;background:#10302f;color:#cdeeee;font-size:.9rem;border-top:1px solid #243236;min-height:42px;}
.tk-kw{color:#4ec9b0;font-weight:700;} .tk-fn{color:#e0a458;} .tk-const{color:#5cc2ff;} .tk-num{color:#b5cea8;} .tk-str{color:#ce9178;} .tk-com{color:#7a9a78;font-style:italic;}
.cod-pre.compl{padding:14px 16px;white-space:pre;border-radius:var(--r);}

/* ---------- ejercicios ---------- */
.ej,.widget{position:relative;padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh);}
.ej{border-top:4px solid var(--acc);}
.ej-cab h3{margin:2px 0 2px;font-size:1.15rem;font-weight:900;}
.ej-tipo{font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--acc);}
.ej-ayuda{margin:0 0 12px;font-size:.86rem;color:var(--muted);}
.ej-hecho{position:absolute;top:12px;right:14px;font-size:.72rem;font-weight:900;color:var(--ok);background:var(--ok-s);padding:3px 9px;border-radius:20px;z-index:2;}
.ej-pie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;}
.ej-res{flex:1;font-size:.92rem;min-height:1em;}
.ej-res.r-ok{color:var(--ok);} .ej-res.r-med{color:var(--warn);} .ej-res.r-mal{color:var(--bad);}
.q{padding:12px 0;border-bottom:1px dashed var(--line);}
.q:last-child{border-bottom:0;}
.q-t{display:flex;gap:10px;font-weight:700;margin-bottom:10px;}
.q-n{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--ard);color:#fff;font-size:.8rem;font-weight:900;flex-shrink:0;}
.q-ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;}
.op{padding:10px 14px;border-radius:11px;border:2px solid var(--line);background:var(--bg2);color:var(--text);text-align:left;cursor:pointer;font-weight:700;transition:border-color .15s,background .15s;}
.op:hover{border-color:var(--ard);}
.resp .op,.q-ops.resp .op{cursor:default;}
.op.bien{border-color:var(--ok);background:var(--ok-s);}
.op.mal{border-color:var(--bad);background:var(--bad-s);}
.op.marcada{border-color:var(--ard);background:var(--ard-s);}
.q-exp{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:.9rem;}
.e-ok{background:var(--ok-s);} .e-mal{background:var(--bad-s);}
.vf{padding:12px 0;border-bottom:1px dashed var(--line);}
.vf p{margin:0 0 8px;font-weight:700;}
.vf-b{display:flex;gap:8px;flex-wrap:wrap;}
.num{padding:10px 0;border-bottom:1px dashed var(--line);}
.num p{margin:0 0 8px;font-weight:700;}
.num-in{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.num-in .inp{width:130px;}
.u{font-weight:800;color:var(--muted);min-width:20px;}
.inp{padding:8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg2);color:var(--text);font:inherit;font-weight:700;}
.inp:focus{outline:none;border-color:var(--ard);}

.pool{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;padding:10px;border-radius:12px;background:var(--bg2);border:2px dashed var(--line);}
.ficha{padding:7px 12px;border-radius:10px;border:2px solid var(--line);background:var(--card);color:var(--text);font-weight:700;cursor:grab;font-size:.88rem;}
.ficha.sel{border-color:var(--acc);box-shadow:0 0 0 3px rgba(228,113,40,.25);}
.ficha.bien{border-color:var(--ok);background:var(--ok-s);} .ficha.mal{border-color:var(--bad);background:var(--bad-s);}
.cajas{display:grid;grid-template-columns:repeat(var(--nc),minmax(0,1fr));gap:10px;margin-top:12px;}
.caja{border-radius:12px;border:2px solid var(--line);background:var(--bg2);min-height:120px;cursor:pointer;}
.caja:hover{border-color:var(--ard);}
.caja-t{padding:7px 10px;font-weight:900;background:var(--ard-s);color:var(--ard);border-radius:10px 10px 0 0;text-align:center;}
.caja-in{display:flex;flex-wrap:wrap;gap:6px;padding:8px;}

.orden{list-style:none;padding:0;margin:0;counter-reset:o;}
.ord{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;border-radius:11px;border:2px solid var(--line);background:var(--bg2);cursor:grab;counter-increment:o;}
.ord::before{content:counter(o);display:grid;place-items:center;min-width:26px;height:26px;border-radius:50%;background:var(--ard);color:#fff;font-weight:900;font-size:.8rem;}
.ord-t{flex:1;font-weight:700;}
.ord-b{display:flex;gap:4px;}
.ord-b button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:7px;width:30px;height:28px;cursor:pointer;}
.ord.bien{border-color:var(--ok);background:var(--ok-s);} .ord.mal{border-color:var(--bad);background:var(--bad-s);}
.ord.arr{opacity:.5;}

.pares{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.col-a,.col-b{display:flex;flex-direction:column;gap:8px;}
.pa,.pb{padding:10px 12px;border-radius:11px;border:2px solid var(--line);background:var(--bg2);color:var(--text);font-weight:700;text-align:left;cursor:pointer;border-left:8px solid var(--pc,transparent);}
.pa.sel{border-color:var(--acc);box-shadow:0 0 0 3px rgba(228,113,40,.25);}
.pa.con,.pb.con{border-left-color:var(--pc);}
.pa.bien,.pb.bien{background:var(--ok-s);border-color:var(--ok);border-left-color:var(--pc);} .pa.mal,.pb.mal{background:var(--bad-s);border-color:var(--bad);border-left-color:var(--pc);}

.hueco{font-family:Consolas,monospace;font-size:.9rem;padding:1px 4px;border-radius:6px;border:2px dashed #e0a458;background:#26363a;color:#fff;cursor:pointer;}
.hueco.bien{border:2px solid #43c47a;background:#1d3d2b;} .hueco.mal{border:2px solid #f06b6b;background:#43201f;}

.confeti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:18px;}
.confeti i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:caer 1.4s ease-in forwards;}
@keyframes caer{to{transform:translateY(420px) rotate(540deg);opacity:0;}}

/* ---------- widgets ---------- */
.w-t{margin:0 0 12px;font-size:1.1rem;font-weight:900;}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.chips .lbl{font-weight:800;font-size:.86rem;margin-right:4px;}
.chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--bg2);color:var(--text2);font-weight:800;font-size:.8rem;cursor:pointer;}
.chip.on,.chip:hover{border-color:var(--ard);color:var(--ard);}
.chip.on{background:var(--ard);color:#fff;}
.placa-w{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start;}
.placa-svg,.ide-svg{background:var(--bg2);border-radius:14px;padding:10px;}
.info-p{position:sticky;top:74px;padding:16px;border-radius:14px;background:var(--ard-s);border:1px solid var(--line);min-height:150px;}
.info-p h3{margin:0 0 6px;color:var(--ard);font-weight:900;}
.info-p p{margin:0;}
.svg-uno .pin,.svg-uno .parte,.svg-ide .parte{cursor:pointer;}
.svg-uno .pin:hover rect:first-child,.svg-uno .pin.sel rect:first-child{fill:#fdd835;}
.svg-uno .pin.resaltado rect:first-child{fill:#fb8c00;}
.svg-uno .pin.ok rect:first-child{fill:#43c47a;}
.svg-uno .pin.no rect:first-child{fill:#f06b6b;}
.svg-uno .parte:hover,.svg-ide .parte:hover{filter:brightness(1.25) drop-shadow(0 0 4px #fdd835);}
.svg-uno .parte.sel,.svg-ide .parte.sel{filter:drop-shadow(0 0 5px #fdd835) drop-shadow(0 0 2px #fdd835);}
.placa-svg.bp{max-width:680px;margin:0 auto;}
.bp-reto{padding:12px 14px;border-radius:12px;background:var(--ard-s);font-size:1.05rem;margin-bottom:10px;min-height:50px;}
.bp-n{display:inline-block;background:var(--ard);color:#fff;border-radius:8px;padding:1px 8px;font-weight:900;font-size:.8rem;margin-right:6px;}
.bp-err{color:var(--bad);font-size:.9rem;}
.proto-svg{overflow-x:auto;background:var(--bg2);border-radius:14px;padding:10px;}
.svg-proto{min-width:560px;}
.svg-proto .hoyo{fill:#4a4a44;cursor:pointer;transition:fill .15s;}
.svg-proto .hoyo:hover{fill:#fb8c00;}
.svg-proto .hoyo.con{fill:#00b3bd;}
.proto-msg{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--ard-s);}
.col-w{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;}
.col-ctrl{display:grid;gap:8px;}
.col-ctrl label,.ohm-in label,.ledr-c label,.map-w label,.ser-w label{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.86rem;}
.res-big{position:relative;padding:14px;background:var(--bg2);border-radius:14px;}
.res-val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-weight:800;color:var(--text2);}
.res-val b{font-size:1.7rem;color:var(--ard);}
.lr{display:grid;gap:12px;}
.lr .res-big{max-width:420px;margin:0 auto;width:100%;}
.lr-n{position:absolute;top:8px;left:12px;font-weight:900;color:var(--muted);font-size:.8rem;}
.ohm-w,.ledr-w{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;}
.ohm-tri{width:100%;}
.ohm-tri svg,.ledr-led svg{width:100%;}
.ohm-in{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0;}
.in-u{display:flex;align-items:center;gap:6px;}
.in-u .inp{width:100%;}
.in-u i{font-style:normal;color:var(--muted);}
.ohm-res{padding:12px 14px;border-radius:12px;background:var(--ard-s);font-family:Consolas,monospace;font-size:.95rem;margin-top:8px;}
.ohm-res .big,.big{font-size:1.3rem;color:var(--ard);}
.ledr-led{max-width:150px;margin:0 auto;}
.ledr-c{display:grid;gap:10px;}
.rng{display:flex;flex-direction:column;gap:4px;font-weight:800;margin-bottom:10px;}
input[type=range]{width:100%;accent-color:var(--ard);height:26px;cursor:pointer;}
.adc-o{display:grid;gap:10px;}
.adc-bar{height:18px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;}
.adc-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ard),var(--acc));}
.adc-n{font-weight:800;}
.adc-bits{display:flex;flex-wrap:wrap;gap:3px;align-items:center;font-weight:800;font-size:.9rem;}
.bit{display:inline-grid;place-items:center;width:26px;height:30px;border-radius:6px;font-family:Consolas,monospace;font-weight:900;}
.bit.b1{background:var(--ard);color:#fff;} .bit.b0{background:var(--bg2);border:1px solid var(--line);color:var(--muted);}
.pwm-w{display:grid;grid-template-columns:1fr 180px;gap:16px;align-items:center;}
.pwm-onda{background:var(--bg2);border-radius:12px;padding:8px;}
.pwm-led{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:.85rem;font-weight:700;}
.map-w{display:grid;grid-template-columns:130px 1fr 150px;gap:16px;align-items:center;}
.map-cod{padding:8px 12px;border-radius:10px;white-space:pre-wrap;}
.map-out{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;}
.map-out svg{width:140px;}
.pct-bar{width:40px;height:110px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);display:flex;align-items:flex-end;overflow:hidden;}
.pct-bar i{display:block;width:100%;background:var(--ard);}
.fp-cod{padding:14px 16px;border-radius:12px;white-space:pre;}
.fp{padding:1px 3px;border-radius:5px;transition:background .2s;}
.fp.on{background:#fdd835;color:#111;}
.fp-w{display:flex;align-items:center;gap:26px;margin:14px 0;flex-wrap:wrap;}
.fp-var{font-family:Consolas,monospace;font-size:1.4rem;font-weight:900;padding:8px 16px;border-radius:12px;background:var(--ard-s);}
.fp-cont{font-weight:800;}
.fp-t{margin:0;padding:10px 12px;border-radius:10px;background:var(--bg2);min-height:44px;}
.ser-w{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;}
.monitor{border-radius:12px;overflow:hidden;border:1px solid #243236;background:#0a1113;}
.mon-bar{padding:6px 12px;background:#00878f;color:#fff;font-weight:800;font-size:.8rem;}
.mon-out{height:190px;overflow-y:auto;padding:8px 12px;font-family:Consolas,monospace;font-size:.86rem;color:#b9f6ca;}
.monitor.mini .mon-out{height:150px;}

/* LED virtual (brillo con --b entre 0 y 1) */
.ledv{--b:0;--c:#e53935;position:relative;width:46px;height:46px;border-radius:50%;background:#3a3f44;border:3px solid rgba(0,0,0,.35);transition:box-shadow .08s;}
.ledv::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,var(--c) 45%);opacity:var(--b);box-shadow:0 0 calc(34px * var(--b)) calc(8px * var(--b)) var(--c);}

/* ---------- demos ---------- */
.demo{border-radius:18px;background:var(--card);border:2px solid var(--ard);overflow:hidden;box-shadow:var(--sh);}
.demo-cab{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--ard-s);}
.demo-tag{font-size:.72rem;font-weight:900;background:var(--ard);color:#fff;padding:2px 9px;border-radius:20px;}
.demo-esc{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:center;padding:22px 16px;background:radial-gradient(circle at 50% 0%,var(--ard-s),transparent 70%);}
.demo-esc>.monitor{flex:1 1 240px;max-width:340px;}
.demo-ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 14px 14px;}
.demo-ctrl:empty{display:none;}
.vel{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.84rem;}
.demo-t{font-size:.84rem;color:var(--muted);font-weight:700;font-family:Consolas,monospace;}
.leds{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.led-c{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.78rem;font-weight:800;color:var(--text2);}
.leds.semaforo{flex-direction:column;gap:10px;padding:14px 18px;background:#20262b;border-radius:18px;border:3px solid #111;}
.leds.semaforo .led-c span{color:#b0bec5;}
.leds.semaforo .ledv{width:58px;height:58px;}
.fade-v{min-width:200px;font-weight:800;font-family:Consolas,monospace;}
.pulsador-v{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:var(--text2);cursor:pointer;font-weight:800;font-size:.8rem;touch-action:none;user-select:none;}
.pulsador-v svg{width:110px;transition:transform .08s;}
.pulsador-v.pres svg{transform:scale(.92);}
.pulsador-v.pres svg circle:nth-of-type(2){fill:#00878f;}
.lect{font-weight:700;font-size:.9rem;}
.sens{flex:1 1 280px;max-width:420px;}
.sal{display:flex;align-items:center;justify-content:center;}
.servo-v{display:flex;flex-direction:column;align-items:center;font-weight:900;}
.servo-v svg{width:170px;}
.servo-v .brazo{transition:transform .15s;}
.cielo{--luz:.7;height:40px;border-radius:10px;margin-bottom:10px;background:linear-gradient(90deg,rgba(255,214,79,var(--luz)),rgba(135,206,250,var(--luz))),#0c1633;}
.teclado{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.tecla{width:62px;height:120px;border-radius:0 0 10px 10px;border:2px solid #9aa;background:#fdfdfd;color:#223;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;cursor:pointer;font-size:.8rem;}
.tecla span{font-size:.64rem;color:#667;}
.tecla.on{background:#1fb5bd;color:#fff;transform:translateY(3px);}
.tecla.on span{color:#e0f7f7;}

/* ---------- referencia, glosario, evaluación ---------- */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.ref-it{position:relative;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);}
.ref-f{display:inline-block;font-weight:800;font-size:.9rem;padding:2px 8px;}
.ref-cat{position:absolute;top:10px;right:12px;font-size:.66rem;font-weight:900;color:var(--muted);text-transform:uppercase;}
.ref-it p{margin:8px 0;font-size:.88rem;color:var(--text2);}
.ref-ej{margin:0;padding:6px 10px;border-radius:8px;background:var(--code-bg);color:var(--code-tx);font-family:Consolas,monospace;font-size:.84rem;overflow-x:auto;}
.glosario .inp{width:100%;max-width:360px;margin-bottom:10px;}
.glosario dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px;margin:0;}
.gl-it{padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);}
.gl-it dt{font-weight:900;color:var(--ard);}
.gl-it dd{margin:2px 0 0;font-size:.88rem;color:var(--text2);}
.ev-ini,.ev-fin{text-align:center;}
.ev-ico{font-size:3.4rem;}
.ev-ini h3{font-size:1.5rem;margin:6px 0;}
.ev-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-weight:700;}
.ev-bar{flex:1;height:8px;border-radius:8px;background:var(--ard-s);overflow:hidden;}
.ev-bar i{display:block;height:100%;background:var(--ard);transition:width .3s;}
.ev .q-t{font-size:1.1rem;}
.ev-nota{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:140px;height:140px;border-radius:50%;border:8px solid var(--ard);margin:6px auto;}
.ev-nota b{font-size:2.6rem;line-height:1;font-weight:900;}
.ev-nota span{font-weight:900;font-size:.85rem;text-transform:uppercase;}
.ev-nota.n-superior,.ev-nota.n-alto{border-color:var(--ok);color:var(--ok);}
.ev-nota.n-básico{border-color:var(--warn);color:var(--warn);}
.ev-nota.n-bajo{border-color:var(--bad);color:var(--bad);}
.ev-fin .ej-pie{justify-content:center;}
.ev-rev{text-align:left;padding-left:22px;}
.ev-rev li{padding:8px 10px;margin-bottom:6px;border-radius:10px;font-size:.9rem;}
.ev-rev li.ok{background:var(--ok-s);} .ev-rev li.no{background:var(--bad-s);}
.chuleta{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px;}
.ch-b{padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);}
.ch-b h4{margin:0 0 6px;color:var(--ard);}
.ch-b pre{margin:0;padding:8px 10px;border-radius:8px;background:var(--code-bg);color:var(--code-tx);font-family:Consolas,monospace;font-size:.8rem;white-space:pre-wrap;}
.ch-b p{margin:0;font-size:.88rem;}

/* ---------- responsive ---------- */
@media (max-width:980px){
	.lay{grid-template-columns:minmax(0,1fr);}
	#btnMenu{display:inline-block;}
	#nav{position:fixed;top:58px;left:0;bottom:0;width:290px;height:auto;z-index:35;transform:translateX(-100%);transition:transform .25s;box-shadow:var(--sh2);}
	body.nav-abierta #nav{transform:none;}
	body.nav-abierta #velo{display:block;position:fixed;inset:58px 0 0 0;background:rgba(0,0,0,.4);z-index:30;}
	#main{padding:20px 16px 50px;}
	.hero{grid-template-columns:1fr;padding:20px;}
	.hero-img{order:-1;}
	.placa-w,.col-w,.ser-w{grid-template-columns:1fr;}
	.info-p{position:static;}
}
@media (max-width:640px){
	.brand small,.prog-b,.zoom span{display:none;}
	.hero h1{font-size:2.1rem;}
	.lec-h h1{font-size:1.5rem;}
	.fila,.pares,.ohm-w,.ledr-w,.pwm-w,.map-w,.ohm-in{grid-template-columns:minmax(0,1fr);}
	.cajas{grid-template-columns:1fr;}
	.ohm-tri{max-width:170px;margin:0 auto;}
	.zoom{display:none;}
}

/* ---------- impresión de la referencia ---------- */
@media print{
	.top,#nav,.lec-nav,.ej-pie,.lec-h p{display:none!important;}
	body{background:#fff;color:#000;}
	.lay{display:block;}
	#main{padding:0;max-width:none;}
	body.imprimiendo .lec-b>*:not(.w-chuleta){display:none!important;}
	.ch-b pre{background:#f3f3f3!important;color:#000!important;}
	.tk-kw,.tk-fn,.tk-const,.tk-num,.tk-str,.tk-com{color:#000!important;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}