/* Sitio de repaso · tokens y componentes extraídos de referencia/clase-1-prototipo.html */
/* Layout: una columna de lectura; cada bloque lleva el estilo de su rol (concepto, n8n, laboratorio) */
:root{
  --page:#F6F5F2; --card:#FFFFFF; --ink:#1E1D1B; --ink-2:#5D5A54; --line:#E2DFD8; --dot:#D3CFC6;
  --n8n:#E4533D; --n8n-bg:#FDECE8; --n8n-ink:#8A2B1C;
  --book-bg:#FBF0DC; --book-line:#E7C68A; --book-ink:#47300F; --book-ink-2:#76531F; --book-acc:#B46F16;
  --lab-bg:#1D2422; --lab-line:#34413D; --lab-ink:#DDEFE9; --lab-ink-2:#9AB2AB; --lab-acc:#3CC59E; --lab-hl:#24453B;
  --ok:#2F8F5B; --ok-bg:#E3F3EA;
  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --page:#131312; --card:#1B1A18; --ink:#ECEAE4; --ink-2:#A9A59C; --line:#2F2D29; --dot:#38352F;
  --n8n:#FF7A64; --n8n-bg:#3A1E18; --n8n-ink:#FFC6B9;
  --book-bg:#292116; --book-line:#5C4524; --book-ink:#F5E2C0; --book-ink-2:#D5B583; --book-acc:#E8A54A;
  --lab-bg:#0E1312; --lab-line:#26322E; --lab-ink:#DDEFE9; --lab-ink-2:#93ABA4; --lab-acc:#4ED5AE; --lab-hl:#1C3A31;
  --ok:#5CC48A; --ok-bg:#183326; color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#131312; --card:#1B1A18; --ink:#ECEAE4; --ink-2:#A9A59C; --line:#2F2D29; --dot:#38352F;
  --n8n:#FF7A64; --n8n-bg:#3A1E18; --n8n-ink:#FFC6B9;
  --book-bg:#292116; --book-line:#5C4524; --book-ink:#F5E2C0; --book-ink-2:#D5B583; --book-acc:#E8A54A;
  --lab-bg:#0E1312; --lab-line:#26322E; --lab-ink:#DDEFE9; --lab-ink-2:#93ABA4; --lab-acc:#4ED5AE; --lab-hl:#1C3A31;
  --ok:#5CC48A; --ok-bg:#183326; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--page);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;margin:0}
.wrap{max-width:860px;margin:0 auto;padding-block:32px 64px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:40px}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.ms{font-family:"Material Symbols Rounded";font-weight:400;font-style:normal;font-size:20px;line-height:1;display:inline-block;vertical-align:middle;-webkit-font-feature-settings:"liga";font-feature-settings:"liga"}
a{color:inherit}
:focus-visible{outline:2px solid var(--n8n);outline-offset:2px;border-radius:6px}

/* Header */
/* Sin mayúsculas forzadas: la marca se escribe EducaciónIT */
.eyebrow{font-size:13px;letter-spacing:.01em;color:var(--ink-2)}
header{display:flex;flex-direction:column;gap:14px}
header h1{font-family:var(--f-body);font-weight:600;font-size:clamp(28px,5vw,40px);line-height:1.15}
.dates{display:flex;flex-wrap:wrap;gap:8px}
.date{font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-2)}
.date b{color:var(--ink);font-weight:600}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:6px}
.lg{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;font-size:14px;line-height:1.4}
.lg .ms{font-size:22px}
.lg strong{display:block;font-weight:600}
.lg.book{background:var(--book-bg);color:var(--book-ink);border:1px solid var(--book-line)}
.lg.book .ms{color:var(--book-acc)}
.lg.n8n{background:var(--card);color:var(--ink);border:1px solid var(--line);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:14px 14px}
.lg.n8n .ms{color:var(--n8n)}
.lg.lab{background:var(--lab-bg);color:var(--lab-ink);border:1px solid var(--lab-line)}
.lg.lab .ms{color:var(--lab-acc)}
.lg span.sub{color:inherit;opacity:.85;font-size:13px}
nav.toc{display:flex;flex-wrap:wrap;gap:6px}
nav.toc a{font-size:13px;text-decoration:none;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
nav.toc a:hover{color:var(--ink);border-color:var(--ink-2)}

/* Section titles */
.sec{display:flex;flex-direction:column;gap:16px}
.sec>h2{font-size:24px;font-weight:600;display:flex;align-items:center;gap:10px}
.sec>p.lead{color:var(--ink-2);max-width:62ch}

/* Role: concepto (B) */
.book{background:var(--book-bg);border:1px solid var(--book-line);border-radius:16px;padding:22px;color:var(--book-ink);display:flex;flex-direction:column;gap:14px}
.book .tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--book-acc);display:flex;gap:6px;align-items:center;font-weight:600}
.book .tag .ms{font-size:18px}
.book h3{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.2;color:var(--book-ink)}
.book p{max-width:62ch;color:var(--book-ink-2)}
.book p b{color:var(--book-ink);font-weight:600}
.analogy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ana-step{display:flex;flex-direction:column;align-items:center;gap:6px;width:96px;text-align:center;font-size:13px;color:var(--book-ink-2)}
.ana-ic{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--book-line);display:flex;align-items:center;justify-content:center;color:var(--book-acc)}
.ana-ic .ms{font-size:28px}
.ana-arrow{color:var(--book-acc);opacity:.7}
.ana-step.pulse .ana-ic{animation:pulse 3.6s ease-in-out infinite}
.ana-step:nth-child(3).pulse .ana-ic{animation-delay:1.2s}
.ana-step:nth-child(5).pulse .ana-ic{animation-delay:2.4s}
@keyframes pulse{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.12);background:var(--book-line)}}
.rule{font-family:var(--f-display);font-size:20px;line-height:1.4;color:var(--book-ink)}
/* Las dos partes de la regla se resaltan como texto marcado y se encienden a la par del diagrama:
   la primera con "Pasa algo" y la segunda con "Se hace la acción" (mismo ciclo de 3.6 s que pulse) */
.rule em{font-style:normal;color:var(--book-ink);background-color:color-mix(in srgb,var(--book-line) 45%,transparent);text-decoration:underline;text-decoration-color:var(--book-acc);text-decoration-thickness:2px;text-underline-offset:5px;border-radius:4px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;animation:marca 3.6s ease-in-out infinite}
.rule em:last-of-type{animation-delay:2.4s}
@keyframes marca{0%,30%,100%{background-color:color-mix(in srgb,var(--book-line) 45%,transparent)}12%{background-color:color-mix(in srgb,var(--book-acc) 40%,transparent)}}

/* Role: n8n (A) */
.canvas{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:16px 16px;display:flex;flex-direction:column;gap:16px}
.canvas .tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--n8n);display:flex;gap:6px;align-items:center;font-weight:600}
.canvas .tag .ms{font-size:18px}
.canvas h3{font-size:19px;font-weight:600}
.canvas p.hint{font-size:14px;color:var(--ink-2);max-width:62ch}
.flow-scroll{overflow-x:auto;padding-bottom:4px}
.flow{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:440px;padding:6px 4px}
.flow::before{content:"";position:absolute;left:44px;right:44px;top:38px;height:2px;background:var(--line)}
.node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;width:92px;text-align:center}
.node .box{width:64px;height:64px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:border-color .25s,background .25s,color .25s,transform .25s}
.node.trigger .box{border-radius:28px 14px 14px 28px}
.node .box .ms{font-size:28px}
.node .lbl{font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.node .lbl b{display:block;color:var(--ink);font-weight:600;font-size:13px}
/* Nodo activo: fondo neutro y borde naranja que pulsa (el naranja es la herramienta, no un resultado) */
.node.on .box{border-color:var(--n8n);background:var(--card);color:var(--n8n);transform:translateY(-2px);animation:borde 1.1s ease-in-out infinite}
@keyframes borde{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--n8n) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--n8n) 28%,transparent)}}
.node.done .box{border-color:var(--ok);color:var(--ok)}
.packet{position:absolute;z-index:2;top:32px;left:0;width:14px;height:14px;border-radius:50%;background:var(--n8n);opacity:0;pointer-events:none}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{font:inherit;font-size:13px;border:0;background:transparent;color:var(--ink-2);padding:8px 12px;cursor:pointer;display:flex;gap:6px;align-items:center}
.seg button .ms{font-size:18px}
/* Opción elegida: fondo neutro y borde naranja, como el nodo activo (el rojizo queda para avisos y errores) */
.seg button[aria-pressed="true"]{background:var(--card);color:var(--n8n-ink);box-shadow:inset 0 0 0 1.5px var(--n8n);border-radius:9px;font-weight:600}
.btn{font:inherit;font-size:14px;font-weight:600;border-radius:10px;border:1px solid var(--n8n);background:var(--n8n);color:#fff;padding:9px 14px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--n8n-ink);border-color:var(--line)}
.caption{min-height:52px;padding:12px 14px;border-radius:12px;background:var(--page);border:1px solid var(--line);font-size:14.5px;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.caption .ms{color:var(--n8n);font-size:22px}

/* Role: laboratorio (C) */
.lab{background:var(--lab-bg);border:1px solid var(--lab-line);border-radius:16px;padding:20px;color:var(--lab-ink);display:flex;flex-direction:column;gap:14px}
.lab .tag{font-family:var(--f-mono);font-size:12px;color:var(--lab-acc);display:flex;gap:6px;align-items:center}
.lab .tag .ms{font-size:18px}
.lab h3{font-family:var(--f-mono);font-weight:500;font-size:17px}
.lab p{color:var(--lab-ink-2);font-size:14.5px;max-width:64ch}
.lab code,.mono{font-family:var(--f-mono);font-size:13.5px}
.lab .inline{background:var(--lab-hl);color:var(--lab-acc);padding:1px 6px;border-radius:5px}
pre.json{margin:0;font-family:var(--f-mono);font-size:14px;line-height:1.75;overflow-x:auto;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--lab-line)}
pre.json .k{color:var(--lab-acc)}
pre.json .v{color:#F2C879}
pre.json .row{display:block;border-radius:4px;padding:0 4px;margin:0 -4px;transition:background .2s}
pre.json .row.hl{background:var(--lab-hl)}

/* JSON explorer */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
.ficha{background:var(--card);border:1px solid var(--book-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--ink);min-width:0}
.ficha .head{font-family:var(--f-display);font-size:18px;display:flex;align-items:center;gap:8px;color:var(--book-ink)}
.ficha .head .ms{color:var(--book-acc)}
.field{font:inherit;text-align:left;display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--ink);cursor:pointer}
.field span:first-child{color:var(--ink-2);font-size:13px}
.field[aria-pressed="true"]{border-style:solid;border-color:var(--lab-acc);background:var(--ok-bg)}
.expr{font-family:var(--f-mono);font-size:14px;padding:10px 12px;border-radius:10px;background:var(--lab-hl);color:var(--lab-acc);min-width:0;overflow-x:auto}

/* If sim */
.ifsim{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:center}
.slider{display:flex;flex-direction:column;gap:8px}
.slider label{font-size:14px;color:var(--ink-2)}
.slider .num{font-size:32px;font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{accent-color:var(--n8n);width:100%}
.branches{display:flex;flex-direction:column;gap:8px}
.branch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink-2);transition:all .25s}
.branch .ms{font-size:22px}
.branch.on.yes{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.branch.on.no{border-color:var(--ink-2);background:var(--page);color:var(--ink)}
.branch small{display:block;font-size:12.5px}

/* Test vs prod */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.duo>div{background:var(--card);border:1px solid var(--book-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.duo h4{margin:0;font-size:15px;display:flex;gap:8px;align-items:center}
.duo h4 .ms{color:var(--book-acc)}
.duo p{font-size:14px;color:var(--ink-2)}

/* Checklist */
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ok)}
.check b{font-weight:600}
.check span.sub{display:block;font-size:13.5px;color:var(--ink-2)}
.check:has(input:checked){border-color:var(--ok);background:var(--ok-bg)}

/* Exercises */
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.ex{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ex .top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--ink-2)}
.ex .num{font-family:var(--f-mono);color:var(--n8n);font-weight:500}
.ex h4{margin:0;font-size:16px;font-weight:600}
.ex p{font-size:14px;color:var(--ink-2)}
.chain{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.chain .c{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--n8n);background:var(--page)}
.chain .c .ms{font-size:19px}
.chain .ln{width:12px;height:2px;background:var(--line)}
.ex .file{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}

/* Copilot steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.step{background:var(--card);border:1px solid var(--book-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--ink)}
.step .n{font-family:var(--f-display);font-size:22px;color:var(--book-acc)}
.step p{font-size:14px;color:var(--ink-2)}
.warn{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--n8n-bg);color:var(--n8n-ink);font-size:14px}
.copyrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.copybtn{font:inherit;font-family:var(--f-mono);font-size:13px;border:1px solid var(--lab-line);background:transparent;color:var(--lab-acc);padding:6px 10px;border-radius:8px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.copybtn .ms{font-size:16px}
pre.prompt{margin:0;white-space:pre-wrap;font-family:var(--f-mono);font-size:13.5px;line-height:1.7;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.18);border:1px solid var(--lab-line);color:var(--lab-ink)}
pre.prompt i{font-style:normal;color:#F2C879}

/* Errors */
.errs{display:flex;flex-direction:column;gap:0}
details.err{border-top:1px solid var(--lab-line)}
details.err:last-child{border-bottom:1px solid var(--lab-line)}
details.err summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;padding:12px 2px;font-family:var(--f-mono);font-size:14px;color:var(--lab-ink)}
details.err summary::-webkit-details-marker{display:none}
details.err summary .ms{color:#F2C879;font-size:20px}
details.err summary .chev{margin-left:auto;color:var(--lab-ink-2);transition:transform .2s}
details.err[open] summary .chev{transform:rotate(180deg)}
details.err .body{padding:0 2px 14px 32px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--lab-ink-2)}
details.err .body b{color:var(--lab-ink);font-weight:500}

footer{font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px}

/* Glosario en el texto */
.term{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:help;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:3px;position:relative;display:inline}
.term .tip{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:5;width:min(270px,72vw);padding:10px 12px;border-radius:10px;background:var(--ink);color:var(--page);font-family:var(--f-body);font-size:13.5px;font-weight:400;line-height:1.45;text-align:left;text-decoration:none;white-space:normal}
.term .tip b{display:block;font-weight:600;margin-bottom:2px;color:var(--page)}
.term:hover .tip,.term:focus-visible .tip,.term.open .tip{display:block}
.words{display:flex;flex-wrap:wrap;gap:8px}
.words .term{padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--book-line);text-decoration:none;font-size:14px;color:var(--book-ink)}

/* Resumen */
.tldr{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.tldr h2{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:center;color:var(--ink)}
.tldr h2 .ms{color:var(--n8n)}
.tldr ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;color:var(--ink-2)}
.tldr li b{color:var(--ink);font-weight:600}

/* Autoevaluacion */
.quiz{display:flex;flex-direction:column;gap:12px}
.q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.q p.qt{font-weight:600}
.q .opts{display:flex;flex-wrap:wrap;gap:8px}
.q .opts button{font:inherit;font-size:14px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--page);color:var(--ink);cursor:pointer}
.q .opts button.mono{font-family:var(--f-mono);font-size:13px}
.q .opts button:hover{border-color:var(--ink-2)}
.q .opts button.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.q .opts button.wrong{border-color:var(--ink-2);text-decoration:line-through;color:var(--ink-2)}
.q .fb{font-size:14px;color:var(--ink-2)}
.q .fb b{color:var(--ink)}
.score{font-size:14px;color:var(--ink-2)}

/* Proxima clase y navegacion */
.next{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:16px 16px}
.next .tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--n8n);font-weight:600}
.next h3{font-size:20px;font-weight:600}
.next p{color:var(--ink-2);max-width:62ch}
.pager{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pager a{text-decoration:none;display:inline-flex;gap:6px;align-items:center;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:14px}
.pager a:hover{border-color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* ---- Agregados del sitio (mismos tokens y piezas del prototipo) ---- */

/* Mensaje de respaldo cuando no se pueden leer los datos */
.fallback{padding:12px 14px;border-radius:12px;background:var(--page);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.lab .fallback{background:rgba(0,0,0,.18);border-color:var(--lab-line);color:var(--lab-ink-2)}
.fallback a{color:inherit;font-weight:600}

/* Ejercicios: descarga y recordatorio */
a.btn{text-decoration:none;align-self:flex-start}
.ex .note{display:flex;gap:6px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.ex .note .ms{font-size:17px;color:var(--n8n)}
.ex .note code{font-family:var(--f-mono);font-size:12px;overflow-wrap:anywhere}

/* Inicio: mapa de clases */
.map{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:none}
a.ex{text-decoration:none;color:var(--ink)}
a.ex:hover{border-color:var(--ink-2)}
.ex.soon{background:var(--page);border-style:dashed}
.ex.soon h4{color:var(--ink-2)}
.ex .state{display:inline-flex;gap:4px;align-items:center}
.ex .state .ms{font-size:16px}
.ex .state.ok{color:var(--ink)}
.ex .state.ok .ms{color:var(--ok)}

/* Glosario: buscador y lista */
.search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.search .ms{color:var(--ink-2)}
.search input{font:inherit;flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:12px 0}
.search input:focus{outline:none}
.search:focus-within{outline:2px solid var(--n8n);outline-offset:2px}
.gl{display:flex;flex-direction:column;gap:10px}
.gl-item{background:var(--book-bg);border:1px solid var(--book-line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;color:var(--book-ink)}
.gl-item h3{font-family:var(--f-display);font-weight:600;font-size:20px}
.gl-item p{color:var(--book-ink-2);max-width:62ch}
.gl-item a{font-size:13px;color:var(--book-ink);font-weight:600}

/* Errores: etiqueta de clase en cada error */
details.err summary .cl{font-family:var(--f-body);font-size:12px;color:var(--lab-ink-2);border:1px solid var(--lab-line);border-radius:999px;padding:1px 8px;white-space:nowrap}

/* Respaldo visible solo sin JS o si falla la carga de datos */
.js .fallback:not(.show){display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pager span.off{display:inline-flex;gap:6px;align-items:center;padding:10px 14px;border-radius:10px;border:1px dashed var(--line);font-size:14px;color:var(--ink-2)}
.site-foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between}
[hidden]{display:none!important}

/* Leyenda: .book y .lab (estilos de bloque) pisaban el layout de .lg; las tres tarjetas quedan iguales */
.lg.book,.lg.lab{flex-direction:row;padding:12px;gap:10px;border-radius:12px}

/* Celular: el selector de trigger entra completo a 375 px */
@media (max-width:400px){.seg button{padding:8px 9px}}

/* Ejercicios: acciones y ventana con la vista previa del flujo (iframe del servicio de n8n) */
.ex-actions{display:flex;flex-wrap:wrap;gap:8px}
.ex .note .ms{flex:none}
.flow-dialog{width:min(1040px,calc(100vw - 32px));height:min(760px,calc(100dvh - 32px));max-width:none;max-height:none;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);flex-direction:column;gap:12px}
.flow-dialog[open]{display:flex}
.flow-dialog::backdrop{background:rgba(0,0,0,.55)}
.flow-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.flow-tit{display:flex;flex-direction:column;gap:2px;min-width:0}
.flow-tit h2{font-size:18px;font-weight:600}
.flow-tit .file{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.preview-frame{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--page)}
.preview-frame iframe{display:block;width:100%;height:100%;border:0}
.preview-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--page);color:var(--ink-2);font-size:14px}
.preview-status.err{color:var(--ink)}
.preview-hint{font-size:13px;color:var(--ink-2)}
.sin-scroll,.sin-scroll body{overflow:hidden}
@media (max-width:600px){
  .flow-dialog{width:100vw;height:100dvh;border:0;border-radius:0;padding:12px max(12px,env(safe-area-inset-left,0px))}
  .flow-head .ex-actions{width:100%}
}
.solo-cel{display:none}
@media (max-width:600px) and (orientation:portrait){.solo-cel{display:inline}}
@media (max-height:500px){
  .flow-dialog{width:100vw;height:100dvh;border:0;border-radius:0;padding:8px max(12px,env(safe-area-inset-left,0px));gap:6px}
  .flow-dialog .preview-hint{display:none}
  .flow-tit h2{font-size:15px}
}
/* Ejercicios: 2 columnas en computadora para que los tres botones entren en una fila */
.ex-grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.ex .ex-actions{gap:6px}
.ex .ex-actions .btn{padding:8px 11px;gap:5px}
/* Si la tarjeta es angosta (celular o dos columnas apretadas), los botones pasan a una barra de tres
   partes iguales con el ícono arriba: así nunca saltan de fila */
.ex:has(.ex-actions){container-type:inline-size}
@container (max-width:380px){
  .ex .ex-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .ex .ex-actions .btn{flex-direction:column;justify-content:center;gap:2px;padding:8px 4px;font-size:12.5px;text-align:center}
}
/* Botón Copiar: ancho fijo aunque cambie la palabra */
.lbl-fija{display:inline-grid;justify-items:center}
.lbl-fija>span{grid-area:1/1}
.lbl-molde{visibility:hidden}
/* Inicio: muestra de colores dentro de los diagramas (mismo formato que las ramas del If) */
.colores{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.branch.on.n8n{border-color:var(--n8n);background:var(--card);color:var(--ink);animation:borde 1.6s ease-in-out infinite}
.branch.on.n8n .ms{color:var(--n8n)}
/* Tooltip del glosario hacia abajo cuando arriba no entra en la pantalla */
.term.abajo .tip{bottom:auto;top:calc(100% + 8px)}
/* Celular: los tres pasos de la analogía entran en una sola línea */
@media (max-width:400px){
  .analogy{gap:6px;flex-wrap:nowrap}
  .ana-step{width:76px;font-size:12.5px}
  .ana-ic{width:50px;height:50px}
  .ana-ic .ms{font-size:24px}
}
/* Selector de modo de color en el encabezado */
:root[data-theme="light"]{color-scheme:light}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.topbar .eyebrow{flex:1 1 220px}
.seg.tema button{padding:6px 10px;font-size:12.5px;gap:4px}
.seg.tema button .ms{font-size:16px}
/* Analogía: los pasos se alinean por arriba (no por el centro del texto) y las flechas al centro del círculo */
.analogy{align-items:flex-start}
.ana-arrow{margin-top:18px}
@media (max-width:400px){.ana-arrow{margin-top:15px}}
/* Inicio: aviso de que es material complementario */
.aviso{display:flex;gap:10px;align-items:flex-start;max-width:62ch;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.aviso .ms{color:var(--ink-2);font-size:20px;flex:none}