/* Sitio de repaso · IA y Productividad. Base copiada del sitio de n8n (referencia/prototipo-n8n.html); --tool reemplaza a --n8n */
/* Layout: una columna de lectura; cada bloque lleva el estilo de su rol (concepto, herramienta, prompt) */
:root{
  --page:#F6F5F2; --card:#FFFFFF; --ink:#1E1D1B; --ink-2:#5D5A54; --line:#E2DFD8; --dot:#D3CFC6;
  --tool:#5B4FD6; --tool-bg:#ECEAFD; --tool-ink:#352A9E; --tool-on:#FFFFFF;
  --book-bg:#EFEDFD; --book-line:#D2CDF7; --book-ink:#26215C; --book-ink-2:#4A447A; --book-acc:#5B4FD6;
  --lab-bg:#1D2422; --lab-line:#34413D; --lab-ink:#DDEFE9; --lab-ink-2:#9AB2AB; --lab-acc:#3CC59E; --lab-hl:#24453B;
  --ok:#2F8F5B; --ok-bg:#E3F3EA;
  --err:#B4234A; --err-bg:#FCE7EE;
  --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;
  --tool:#A39BFF; --tool-bg:#24203F; --tool-ink:#D4CFFF; --tool-on:#17132E;
  --book-bg:#1A1A1E; --book-line:#3A355F; --book-ink:#E6E3FF; --book-ink-2:#BEB9EC; --book-acc:#A39BFF;
  --lab-bg:#0E1312; --lab-line:#26322E; --lab-ink:#DDEFE9; --lab-ink-2:#93ABA4; --lab-acc:#4ED5AE; --lab-hl:#1C3A31;
  --ok:#5CC48A; --ok-bg:#183326; --err:#F2789A; --err-bg:#3B1522; color-scheme:dark}}
:root[data-theme="dark"]{
  --page:#131312; --card:#1B1A18; --ink:#ECEAE4; --ink-2:#A9A59C; --line:#2F2D29; --dot:#38352F;
  --tool:#A39BFF; --tool-bg:#24203F; --tool-ink:#D4CFFF; --tool-on:#17132E;
  --book-bg:#1A1A1E; --book-line:#3A355F; --book-ink:#E6E3FF; --book-ink-2:#BEB9EC; --book-acc:#A39BFF;
  --lab-bg:#0E1312; --lab-line:#26322E; --lab-ink:#DDEFE9; --lab-ink-2:#93ABA4; --lab-acc:#4ED5AE; --lab-hl:#1C3A31;
  --ok:#5CC48A; --ok-bg:#183326; --err:#F2789A; --err-bg:#3B1522; 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(--tool);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.tool{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.tool .ms{color:var(--tool)}
.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)}}

/* Rol: herramienta (A). Antes "En n8n"; ahora ChatGPT, Gemini, Codex, etc. */
.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(--tool);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(--tool);background:var(--card);color:var(--tool);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(--tool) 0%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--tool) 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(--tool);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(--tool-ink);box-shadow:inset 0 0 0 1.5px var(--tool);border-radius:9px;font-weight:600}
.btn{font:inherit;font-size:14px;font-weight:600;border-radius:10px;border:1px solid var(--tool);background:var(--tool);color:var(--tool-on);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(--tool-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(--tool);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(--tool);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(--tool);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(--tool);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(--tool-bg);color:var(--tool-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(--tool)}
.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(--tool);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(--tool)}
.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.extra{border-style:dashed}
.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(--tool);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}
details.err summary .sint{display:flex;flex-direction:column;align-items:flex-start;gap:6px}

/* 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.tool{border-color:var(--tool);background:var(--card);color:var(--ink);animation:borde 1.6s ease-in-out infinite}
.branch.on.tool .ms{color:var(--tool)}
/* 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}
/* Ejercicios: fila con el archivo complementario (.csv) */
.plantilla{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px dashed var(--line)}
.plantilla .note{flex:1 1 180px}

/* ===================== Tema triggers-y-apis: componentes nuevos ===================== */

/* Analogía de 4 íconos, sin flechas (triggers) */
.analogy-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:460px}
.analogy-4 .ana-step{width:auto}

/* Controles segmentados que pueden ocupar dos filas */
.seg-wrap{flex-wrap:wrap}

/* Controles segmentados dentro del laboratorio (fondo oscuro, verde agua) */
.seg.seg-lab{background:transparent;border-color:var(--lab-line)}
.seg.seg-lab button{color:var(--lab-ink-2);font-family:var(--f-mono);font-size:12.5px}
.seg.seg-lab button[aria-pressed="true"]{background:var(--lab-hl);color:var(--lab-acc);box-shadow:inset 0 0 0 1.5px var(--lab-acc)}

/* Triggers: vida real ↔ nodo de n8n */
.trig{display:flex;flex-direction:column;gap:12px}
.trig-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.trig-card{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.trig-k{font-size:12px;color:var(--ink-2)}
.trig-row{display:flex;gap:12px;align-items:flex-start}
.trig-row p{font-size:14px;color:var(--ink-2);margin-top:2px}
.trig-row .ana-ic{flex:none}
.trig-box{flex:none;width:56px;height:56px;border-radius:14px;border:1.5px solid var(--tool);background:var(--card);color:var(--tool);display:flex;align-items:center;justify-content:center}
.trig-box .ms{font-size:28px}

/* Webhook: nombre → URL → JSON */
.wh-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wh-ctrl label{font-size:14px;color:var(--lab-ink-2)}
.wh-ctrl input{font:inherit;font-family:var(--f-mono);font-size:14px;width:min(220px,100%);padding:8px 10px;border-radius:8px;border:1px solid var(--lab-line);background:rgba(0,0,0,.18);color:var(--lab-ink)}
.wh-url{overflow-wrap:anywhere}
.expr .hl-val{color:var(--lab-ink);text-decoration:underline;text-decoration-color:var(--lab-acc);text-underline-offset:3px}
pre.json .hl-val{background:var(--lab-acc);color:var(--lab-bg);border-radius:4px;padding:0 3px}
.lab p.mono{font-size:13px}

/* Tipos de nodo: nodos que son botones */
button.node{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button.node .lbl{display:block}
.node.sel .box{border-color:var(--tool);color:var(--tool);transform:translateY(-2px)}
.flow-5{min-width:520px}
.tipos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px}
.tipos>div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;transition:box-shadow .2s,border-color .2s}
.tipos h4{margin:0;font-size:15px;display:flex;gap:8px;align-items:center}
.tipos h4 .ms{color:var(--tool)}
.tipos p{font-size:13.5px;color:var(--ink-2)}
.tipos>div.on{border-color:var(--tool);box-shadow:inset 0 0 0 1px var(--tool)}

/* If, Switch y Filter: consultas que viajan */
.ramas{display:flex;flex-direction:column;gap:12px}
.r-entrada{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:52px;padding:10px;border:1px dashed var(--line);border-radius:12px;background:var(--card)}
.r-k{width:100%;font-size:12px;color:var(--ink-2)}
.r-nodo{display:flex;gap:12px;align-items:center;align-self:center;padding:10px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--card)}
.r-nodo>.ms{font-size:26px;color:var(--tool)}
.r-nodo b{display:block;font-size:15px}
.r-cond{font-size:13.5px;color:var(--ink-2)}
.r-nodo.on{border-color:var(--tool);animation:borde 1.1s ease-in-out infinite}
.r-salidas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:8px}
.r-lane{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--card)}
.r-lane-h{display:flex;gap:8px;align-items:flex-start}
.r-lane-h .ms{font-size:20px;color:var(--ink-2)}
.r-lane-h small{display:block;font-size:12.5px;color:var(--ink-2)}
.r-lane.yes{border-color:var(--ok)}
.r-lane.yes .r-lane-h .ms,.r-lane.yes .r-lane-h b{color:var(--ok)}
.r-lane.no{background:var(--page);border-color:var(--ink-2)}
.r-lane.reserva,.r-lane.descarte{border-style:dashed}
.r-box{display:flex;flex-wrap:wrap;gap:6px;min-height:30px}
.r-chip{font-size:13px;line-height:1.3;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--page);color:var(--ink)}
.r-chip b{font-weight:600}
.r-chip.descartada{color:var(--ink-2);text-decoration:line-through;opacity:.6}

/* Executions: la ejecución fallida marca el nodo en rojo (único lugar con rojo: es un error real) */
.exec{display:flex;flex-direction:column;gap:12px}
.exec-lista{display:flex;flex-wrap:wrap;gap:8px}
.exec-lista button{font:inherit;display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-align:left}
.exec-lista button small{display:block;font-size:12.5px;color:var(--ink-2)}
.exec-lista button[aria-pressed="true"]{border-color:var(--tool);box-shadow:inset 0 0 0 1px var(--tool)}
.exec-lista .ms.ok{color:var(--ok)}
.exec-lista .ms.err{color:var(--err)}
.node.fail .box{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.node.fail .lbl b{color:var(--err)}
.node.skip{opacity:.45}

/* Varios */
.chain-lab .c{background:var(--lab-hl);border-color:var(--lab-line);color:var(--lab-acc)}
.chain-lab .ln{background:var(--lab-line)}
.check .check-dl{margin-top:8px;font-size:13px;padding:6px 10px}
@media (max-width:400px){
  .analogy-4{gap:6px}
  .analogy-4 .ana-step{font-size:12px}
}
/* Celular: los JSON del laboratorio entran sin scrollear */
@media (max-width:400px){pre.json{font-size:12.5px;padding:12px 10px}}
/* Las expresiones largas cortan línea en vez de scrollear */
.expr{overflow-wrap:anywhere}
.next p.cierre{display:flex;gap:8px;align-items:flex-start;max-width:none;padding:10px 12px;border-radius:10px;background:var(--page);border:1px solid var(--line);color:var(--ink);font-size:14.5px}
.next p.cierre .ms{color:var(--ok);font-size:20px;flex:none}

/* Tema triggers-y-apis · GET y POST: dos sobres (el dato escrito afuera / una hoja adentro) */
.sobres{display:flex;flex-wrap:wrap;gap:20px 28px;padding-top:14px}
.sobre{margin:0;display:flex;flex-direction:column;gap:10px;width:160px}
.env{position:relative;isolation:isolate;height:100px;border-radius:8px;background:var(--card);border:1.5px solid var(--book-line);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.env::before{content:"";position:absolute;left:0;right:0;top:0;height:54%;background:var(--book-line);opacity:.55;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:6px 6px 0 0}
.env-txt{position:relative;font-family:var(--f-mono);font-size:13px;color:var(--book-ink);border-bottom:1.5px dashed var(--book-acc);padding:0 2px}
.env::before{z-index:1}
.hoja{position:absolute;z-index:0;left:22px;right:22px;top:26px;bottom:10px;border-radius:4px;background:var(--book-bg);border:1px dashed var(--book-acc)}
.hoja i{display:block;height:3px;margin:9px 10px 0;border-radius:2px;background:var(--book-line)}
.env.cerrado::after{content:"";position:absolute;z-index:2;left:50%;top:54%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--book-acc)}
.sobre figcaption{font-size:13px;line-height:1.4;color:var(--book-ink-2)}
.sobre figcaption b{display:block;font-family:var(--f-mono);font-weight:500;color:var(--book-ink)}

/* Laboratorio del webhook: lo que viaja adentro del pedido (POST) y aviso sobre datos sensibles */
.wh-body{display:flex;flex-direction:column;gap:6px}
.wh-body:not([hidden]){animation:aparecer .3s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.wh-k{font-size:13px;color:var(--lab-ink-2)}
.aviso-lab{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--lab-line);background:rgba(0,0,0,.18);font-size:14px;color:var(--lab-ink)}
.aviso-lab .ms{color:#F2C879;font-size:20px;flex:none}

/* ===== Tema triggers-y-apis · El viaje del pedido (webhook) ===== */
/* Controles arriba; abajo, una fila a todo el ancho donde el camino es el protagonista */
.vj-ctrl{display:flex;flex-direction:column;gap:10px}
.vj-k{font-size:12.5px;color:var(--ink-2)}
#viaje .seg button small{font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.vj-campo{display:flex;align-items:center;gap:8px}
.vj-campo label{font-size:14px;color:var(--ink-2);white-space:nowrap}
.vj-campo input{font:inherit;font-size:14px;width:130px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.vj-bar{flex:1 1 260px;min-width:0;display:flex;gap:6px;align-items:center;min-height:34px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--page);font-family:var(--f-mono);font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.vj-bar .ms{font-size:15px;flex:none}
#vjEnviar:disabled{opacity:.55;cursor:default}

.vj-fila{display:grid;grid-template-columns:150px minmax(40%,1fr) auto;gap:10px;align-items:start;padding:10px 0 4px}
.vj-emisor{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.vj-nodos{display:flex;align-items:flex-start;gap:6px}
.vj-ln{flex:none;width:22px;height:2px;margin-top:32px;background:var(--line)}
#vjWh.pub .box{border-color:var(--tool);color:var(--tool)}
.vj-resp{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;border:1.5px solid var(--ok);background:var(--ok-bg);font-size:13.5px;color:var(--ink)}
.vj-resp b{font-weight:600}
.vj-resp code{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2);overflow-wrap:anywhere}
.vj-resp:not([hidden]){animation:aparecer .3s ease}

/* Camino: la línea punteada a la altura del centro de los nodos y el sobre que la recorre entera */
.vj-camino{position:relative;height:64px}
.vj-linea{position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--line)}
.vj-sobre{position:absolute;left:0;top:50%;z-index:1;isolation:isolate;width:80px;height:50px;margin-top:-25px;border-radius:6px;background:var(--card);border:1.5px solid var(--book-line);display:flex;align-items:flex-end;justify-content:center;padding:5px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.vj-sobre::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:54%;background:var(--book-line);opacity:.6;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:4px 4px 0 0}
.vj-sobre-txt{position:relative;z-index:2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-mono);font-size:10px;color:var(--book-ink);border-bottom:1px dashed var(--book-acc)}
.vj-sobre.cerrado::after{content:"";position:absolute;z-index:2;left:50%;top:54%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--book-acc)}
.vj-hoja{position:absolute;z-index:0;left:14px;right:14px;top:8px;height:32px;border-radius:3px;background:var(--card);border:1px solid var(--line);opacity:0;transition:transform .45s ease,opacity .3s}
.vj-hoja i{display:block;height:3px;margin:7px 7px 0;border-radius:2px;background:var(--book-line)}
.vj-sobre.abierto .vj-hoja{opacity:1;transform:translateY(-28px)}
.vj-sobre.abierto::after{display:none}
.vj-sobre.vuelta{border-color:var(--ok)}
.vj-sobre.vuelta::before{background:var(--ok-bg);opacity:1}
.vj-sobre.vuelta .vj-sobre-txt{color:var(--ok);border-bottom-color:var(--ok)}
.vj-sobre.rebote{border-color:var(--ink-2);background:var(--page)}
.vj-sobre.rebote::before{background:var(--line)}
.vj-sobre.rebote::after{background:var(--ink-2)}
.vj-sobre.rebote .vj-sobre-txt{color:var(--ink-2);border-bottom-color:var(--ink-2)}

/* Lo que llegó al Webhook (colores del lienzo, no del laboratorio) */
.vj-llego{display:flex;flex-direction:column;gap:6px;margin-left:auto;width:min(100%,380px)}
.vj-llego-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.vj-cont{font-family:var(--f-mono);font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
#viaje pre.json{background:var(--page);border-color:var(--line);color:var(--ink);font-size:12.5px;line-height:1.7}
#viaje pre.json .k{color:var(--ink-2)}
#viaje pre.json .v{color:var(--ink);font-weight:600}
#viaje pre.json .row.hl{background:var(--ok-bg)}

/* Línea de estado: gris mientras viaja o rebota, verde cuando llega y vuelve la respuesta */
.vj-estado.st-neutro .ms,.vj-estado.st-gris .ms{color:var(--ink-2)}
.vj-estado.st-ok{border-color:var(--ok);background:var(--ok-bg)}
.vj-estado.st-ok .ms{color:var(--ok)}

/* Interruptor "Publicado" */
.vj-switch{font:inherit;font-size:14px;display:inline-flex;gap:8px;align-items:center;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.vj-track{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .2s}
.vj-knob{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s}
.vj-switch[aria-pressed="true"] .vj-track{background:var(--tool)}
.vj-switch[aria-pressed="true"] .vj-knob{transform:translateX(14px)}

/* Pantallas angostas: la fila pasa a vertical y el sobre viaja de arriba hacia abajo */
@media (max-width:760px){
  .vj-fila{grid-template-columns:1fr;justify-items:center;gap:6px}
  .vj-emisor{align-items:center;width:100%}
  .vj-resp{text-align:center;align-self:stretch}
  .vj-camino{width:100%;height:170px}
  .vj-linea{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--line)}
  .vj-sobre{left:50%;top:0;margin:0 0 0 -40px}
  .vj-llego{width:100%}
  .vj-campo input{width:min(160px,100%)}
}

/* ===== Tema triggers-y-apis · El mozo de la API ===== */
/* Tabla de equivalencias restaurante ↔ API */
.equiv{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:6px 14px}
.equiv>div{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border-radius:10px;background:var(--card);border:1px solid var(--book-line)}
.equiv dt{display:flex;gap:6px;align-items:center;font-weight:600;color:var(--book-ink);font-size:14px}
.equiv dt .ms{font-size:18px;color:var(--book-acc)}
.equiv dd{margin:0;font-size:13.5px;color:var(--book-ink-2)}
.equiv dd .term{color:inherit}

/* Comanda: los parámetros resaltados */
.mz-comanda .param{color:var(--ink);background:var(--card);border-radius:4px;padding:0 2px;box-shadow:inset 0 -2px 0 var(--tool)}

/* El mozo que camina por la línea */
.mz-mozo{position:absolute;left:0;top:50%;z-index:1;width:64px;height:48px;margin-top:-24px;border-radius:12px;background:var(--card);border:1.5px solid var(--tool);color:var(--tool);display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.mz-mozo .ms{font-size:22px}
.mz-mozo .mz-lleva{font-size:18px}
.mz-mozo.con-plato{border-color:var(--ok);color:var(--ok)}
.mz-mozo.sin-plato{border-color:var(--ink-2);color:var(--ink-2);background:var(--page)}
@media (max-width:760px){.mz-mozo{left:50%;top:0;margin:0 0 0 -32px}}

/* El plato: el JSON que llega, la expresión y la frase */
.mz-plato{display:flex;flex-direction:column;gap:8px}
.mz-plato:not([hidden]){animation:aparecer .3s ease}
#mozo pre.json{background:var(--page);border-color:var(--line);color:var(--ink);font-size:12.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
#mozo pre.json .k{color:var(--ink-2)}
#mozo pre.json .v{color:var(--ink)}
#mozo pre.json .row.hl{background:var(--ok-bg)}
#mozo pre.json .hl-val{background:var(--ok);color:var(--card);border-radius:4px;padding:0 3px;font-weight:600}
.mz-expr{display:flex;flex-direction:column;gap:4px}
.mz-expr code{font-family:var(--f-mono);font-size:13px;padding:8px 10px;border-radius:8px;background:var(--page);border:1px solid var(--line);color:var(--tool-ink);overflow-wrap:anywhere}
.mz-frase{font-weight:600}

/* Aviso de respuesta de ejemplo (gris) y errores simulados (rojo, solo acá) */
.aviso-gris{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px dashed var(--ink-2);background:var(--page);font-size:14px;color:var(--ink)}
.aviso-gris .ms{color:var(--ink-2);font-size:20px;flex:none}
.mz-err{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1.5px solid var(--err);background:var(--err-bg);font-size:14px;color:var(--ink)}
.mz-err .ms{color:var(--err);font-size:20px;flex:none}
.vj-estado.st-err .ms{color:var(--err)}
.mz-problemas{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px dashed var(--line)}
.mz-problemas .btn:disabled{opacity:.55;cursor:default}

/* API vs. Webhook: ¿quién empieza la conversación? */
.cmp{display:flex;flex-direction:column;gap:10px;padding-top:10px;border-top:1px dashed var(--line)}
.cmp-q{margin:0;font-size:16px;font-weight:600}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px}
.cmp-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.cmp-card p{font-size:14px;color:var(--ink-2)}
.cmp-chain{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.cmp-chain .c{display:inline-flex;gap:4px;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:var(--page);font-size:13px}
.cmp-chain .c .ms{font-size:16px;color:var(--tool)}
.cmp-chain .ar{font-size:16px;color:var(--ink-2)}
/* Comanda con problemas: la parte mal escrita (404) y la línea de lo que falta (401 / 429) */
.mz-comanda .mal{color:var(--err);background:var(--err-bg);border-radius:4px;padding:0 2px;text-decoration:underline wavy var(--err);text-underline-offset:3px}
.mz-nota{margin:0;padding:6px 12px;border-left:3px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.mz-nota code{font-family:var(--f-mono);font-size:12.5px;color:var(--ink)}
.mz-nota b{color:var(--ink)}

/* Ilustración del mozo (concepto 4): sin fondo ni borde; en pantallas chicas va la versión sin etiquetas y la lista */
.ilus{margin:0;display:flex;flex-direction:column;gap:8px}
.ilus img{display:block;width:100%;max-width:720px;height:auto;margin:0 auto}
.ilus-lista{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--book-ink-2)}
.ilus-lista b{color:var(--book-ink);font-weight:600}
@media (min-width:600px){.ilus-lista{display:none}}
/* Modo oscuro: un contorno claro y sutil para que las partes oscuras del dibujo no se pierdan en el fondo (sin fondo ni borde) */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ilus img{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 4px rgba(255,255,255,.12))}}
:root[data-theme="dark"] .ilus img{filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 0 4px rgba(255,255,255,.12))}

/* Líneas de estado y ayuda: ícono neutro (gris). El naranja es n8n y el rojo queda solo para errores reales */
.caption .ms{color:var(--ink-2)}
.vj-estado.st-ok .ms{color:var(--ok)}
.vj-estado.st-err .ms{color:var(--err)}

/* ===================== Tema primer-agente: componentes nuevos ===================== */

/* Reglas o agente: el mismo mensaje por dos carriles */
.ra-msg{font-size:15px}
.ra-carriles{display:flex;flex-direction:column;gap:12px}
.ra-carril{display:grid;grid-template-columns:92px 24px minmax(0,1fr);align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.ra-flecha{color:var(--ink-2);font-size:20px;margin-bottom:28px}
.ra-res{min-height:56px;display:flex;align-items:center}
.ra-res .branch{flex:1}
.ra-res .branch:not([hidden]){animation:aparecer .3s ease}
#raEnviar:disabled,#tlEnviar:disabled,#memEnviar:disabled{opacity:.55;cursor:default}

/* Las partes del agente: el nodo AI Agent con sus tres conectores */
.pt-dibujo{display:flex;flex-direction:column;align-items:center;gap:0;overflow-x:auto;padding:4px 2px}
.pt-fila{display:flex;align-items:flex-start;gap:6px}
.pt-ln{flex:none;width:28px;height:2px;margin-top:32px;background:var(--line)}
.pt-agente{font:inherit;color:var(--ink);display:flex;gap:10px;align-items:center;min-height:64px;padding:10px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;text-align:left}
.pt-agente>.ms{font-size:28px;color:var(--ink-2)}
.pt-agente b{display:block;font-size:14px}
.pt-agente small{display:block;font-size:12px;color:var(--ink-2)}
.pt-subs{display:flex;gap:10px;justify-content:center;margin-top:14px;padding-top:14px;border-top:2px dashed var(--line);margin-left:98px}
.pt-sub{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;text-align:center}
.pt-con{font-size:11.5px;color:var(--ink-2)}
.pt-sub .box{width:52px;height:52px;border-radius:50%;background:var(--card);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:border-color .2s,color .2s}
.pt-sub .box .ms{font-size:24px}
.pt-sub .lbl{font-size:12.5px;color:var(--ink)}
.pt-sub[aria-pressed="true"] .box{border-color:var(--tool);color:var(--tool)}
.pt-agente[aria-pressed="true"]{border-color:var(--tool);box-shadow:inset 0 0 0 1px var(--tool)}
.pt-agente[aria-pressed="true"]>.ms{color:var(--tool)}
.pt-panel{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.pt-panel .ana-ic{flex:none;color:var(--ink-2)}
.pt-panel b{display:block;font-size:15px}
.pt-panel p{font-size:14px;color:var(--ink)}
.pt-panel p.pt-n8n{color:var(--ink-2);margin-top:4px}
@media (max-width:480px){
  .pt-subs{margin-left:0;gap:4px}
  .pt-sub{width:84px}
}

/* RCICE: el system message dividido en partes */
.rc-caja{display:flex;flex-direction:column;gap:8px}
.rc-caja .copyrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
pre.rc-pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--f-mono);font-size:13px;line-height:1.6;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--page);color:var(--ink)}
.rc-p{border-radius:4px;transition:opacity .2s,background .2s}
pre.rc-foco .rc-p{opacity:.35}
pre.rc-foco .rc-p.on{opacity:1;background:var(--tool-bg);color:var(--tool-ink);box-shadow:0 0 0 3px var(--tool-bg)}
#rcice .seg button b{color:var(--tool);font-family:var(--f-mono)}

/* Laboratorio: dos columnas sobre fondo oscuro */
.duo-lab>div{background:rgba(0,0,0,.18);border-color:var(--lab-line);color:var(--lab-ink)}
.duo-lab h4 .ms{color:var(--lab-acc)}
.duo-lab p{color:var(--lab-ink-2)}

/* Memoria: dos chats lado a lado */
.mem-chats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.mem-chat{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.mem-h{display:flex;gap:6px;align-items:center;font-size:14px}
.mem-h .ms{font-size:20px;color:var(--ink-2)}
.mem-lista{display:flex;flex-direction:column;gap:6px;min-height:120px}
.mem-msg{max-width:88%;font-size:14px;line-height:1.4;padding:7px 11px;border-radius:12px;animation:aparecer .3s ease}
.mem-msg.yo{align-self:flex-end;background:var(--page);border:1px solid var(--line);color:var(--ink)}
.mem-msg.bot{align-self:flex-start;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.mem-msg.bot.gris{background:var(--page);border-color:var(--ink-2);color:var(--ink-2)}
.mem-msg.bot.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ink)}
.mem-libreta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line);font-size:13.5px}
.mem-libreta>.ms{font-size:18px;color:var(--ink-2)}
.mem-vacia{color:var(--ink-2);font-style:italic}

/* Temperatura */
.tmp-ctrl{display:flex;flex-direction:column;gap:6px;max-width:420px}
.tmp-ctrl label{font-size:14px}
.tmp-ctrl input{width:100%;accent-color:var(--tool)}
.tmp-ext{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2)}
.tmp-resps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:10px}
.tmp-r{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.tmp-r p{font-size:14px}

/* Herramientas: el agente elige una y completa los datos */
.tl-escena{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;align-items:start}
.tl-msg{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;border:1px dashed var(--line);background:var(--card);font-size:14px;transition:border-color .25s}
.tl-msg.on{border-style:solid;border-color:var(--ink-2)}
.tl-agente{width:auto;flex-direction:row;justify-content:center}
.tl-agente .lbl{text-align:left}
.tl-tools{display:flex;flex-direction:column;gap:8px}
.tl-tool{padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);transition:all .25s}
.tl-tool b{font-size:13px}
.tl-tool p{font-size:13px;color:var(--ink-2);margin-top:2px}
.tl-tool.leyendo{border-color:var(--tool);border-style:dashed}
.tl-tool.elegida{border-color:var(--tool);box-shadow:inset 0 0 0 1px var(--tool)}
.tl-tool.descartada{opacity:.45}
.tl-campos{display:flex;flex-direction:column;gap:4px}
.tl-campo{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;font-size:13px;padding:5px 8px;border-radius:8px;border:1px solid var(--line);background:var(--card);transition:background .25s,border-color .25s}
.tl-campo .mono{color:var(--ink-2)}
.tl-v{overflow-wrap:anywhere;color:var(--ink-2)}
.tl-campo.lleno .tl-v{color:var(--ink);font-weight:600}
.tl-tabla-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.tl-tabla{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.tl-tabla caption{text-align:left;padding:8px 12px}
.tl-tabla th,.tl-tabla td{text-align:left;padding:7px 10px;border-top:1px solid var(--line)}
.tl-tabla th{font-family:var(--f-mono);font-weight:500;color:var(--ink-2)}
.tl-tabla tr.nueva td{background:var(--ok-bg);color:var(--ink)}
.tl-tabla tr.nueva td:first-child{box-shadow:inset 3px 0 0 var(--ok)}
.tl-tabla tr.nueva:not([hidden]){animation:aparecer .4s ease}

/* $fromAI por partes */
.fa-partes{margin:0;display:flex;flex-direction:column;gap:6px}
.fa-partes>div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:10px;font-size:14px}
.fa-partes dt{color:var(--lab-acc);font-size:13px}
.fa-partes dd{margin:0;color:var(--lab-ink-2)}
/* RCICE: el system message scrollea adentro de su caja; Copiar con los colores del lienzo */
pre.rc-pre{max-height:380px;overflow-y:auto}
.copybtn.rc-copy{font-family:var(--f-body);font-weight:600;border-color:var(--line);background:var(--card);color:var(--tool-ink)}
/* RCICE: la segunda C lleva la aclaración de Constraints debajo */
#rcice .seg button.rc-c2{flex-direction:column;align-items:flex-start;gap:0;line-height:1.3}
.rc-nota{font-size:11.5px;font-weight:400;color:var(--ink-2)}
/* Reglas o agente: urgencia y motivo en líneas separadas */
.ra-det{display:block}
.ra-k{font-weight:600}
/* Reglas o agente: los cuatro tipos posibles; el que elige el agente queda en verde */
.ra-tipos{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ra-tipos .vj-k{width:100%}
.ra-tipo{font-size:13px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);transition:background .25s,border-color .25s}
.ra-tipo.ok{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:600}
/* Herramientas: la respuesta del agente al cliente, al final del recorrido */
.tl-resp{display:flex;flex-direction:column;gap:4px;max-width:520px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:14px}
.tl-resp:not([hidden]){animation:aparecer .3s ease}

/* Clases: enlace arriba de todo para volver al mapa de clases del inicio */
.volver a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--tool-ink);text-decoration:none;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card)}
.volver a:hover{border-color:var(--tool)}
.volver .ms{font-size:18px}

/* Guía: renovar la cuenta de n8n */
.mudanza{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:flex-start;gap:6px;max-width:420px}
.mudanza .ana-step{width:auto}
.variantes{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:6px 0}
.mudanza-llaves{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px dashed var(--ink-2);background:var(--card);color:var(--ink);font-size:14px;max-width:460px}
.mudanza-llaves .ms{color:var(--ink-2);font-size:24px;flex:none}
.paso-h{display:flex;gap:12px;align-items:flex-start}
.paso-h .n{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--tool);color:var(--tool-ink);background:var(--tool-bg);display:flex;align-items:center;justify-content:center;font-weight:600}
.paso-h h3{padding-top:4px}
.cuenta{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--page);color:var(--ink-2)}
.cuenta .ms{font-size:16px}
.ruta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px}
.ruta>span:not(.ms){padding:4px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600}
.ruta>.ms{color:var(--ink-2);font-size:18px}
.paso ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.paso code,.salio code,.cred-tabla code,.aviso code{font-family:var(--f-mono);font-size:13px;padding:1px 6px;border-radius:5px;background:var(--page);border:1px solid var(--line)}
.salio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--ok);background:var(--ok-bg);color:var(--ink);font-size:14.5px}
.salio .ms{color:var(--ok);font-size:20px;flex:none}
.cred-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cred-tabla{width:100%;border-collapse:collapse;font-size:14px}
.cred-tabla th,.cred-tabla td{text-align:left;vertical-align:top;padding:10px 12px;border-top:1px solid var(--line)}
.cred-tabla thead th{border-top:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.cred-tabla th[scope=row]{font-weight:600;width:34%}
.cred-tabla th[scope=row] .ms{display:block;color:var(--tool);font-size:20px;margin-bottom:4px}
.prog{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.prog .score{margin:0}

/* Tema agentes-en-el-negocio · salida estructurada: sin parser (párrafo, gris) y con parser (JSON, verde) */
.so-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;align-items:start}
.so-out{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--ink-2);background:var(--page);min-height:180px}
.so-out p{font-size:14.5px;color:var(--ink-2);animation:aparecer .3s ease}
.so-out.con{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.so-json{margin:0;font-family:var(--f-mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);animation:aparecer .3s ease}
.so-json .k{color:var(--ok);font-weight:500}
.so-json>span{display:block}
.so-json .f{padding-left:4ch;text-indent:-2ch}
.so-json .hl{background:var(--card);border-radius:4px;box-shadow:0 0 0 1px var(--ok)}
.so-if{display:flex;flex-direction:column;gap:10px}
.so-if-h{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px}
.so-if-h>.ms{color:var(--tool)}
.so-if-h code{font-family:var(--f-mono);font-size:12.5px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);background:var(--card)}

/* Tema agentes-en-el-negocio · análisis de sentimiento */
.sen-lista{display:flex;flex-direction:column;gap:8px}
.sen-c{font:inherit;font-size:14px;text-align:left;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.sen-c .sen-n{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:var(--page);border:1px solid var(--line);color:var(--ink-2)}
.sen-c[aria-pressed="true"]{border-color:var(--tool);box-shadow:inset 0 0 0 1px var(--tool)}
.sen-panel{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;border:1.5px solid var(--line);background:var(--card)}
.sen-panel.alerta{border-color:var(--err)}
.sen-dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.sen-dl dt{font-size:12.5px;color:var(--ink-2)}
.sen-dl dd{margin:2px 0 0;font-weight:600;display:flex;flex-direction:column;gap:6px}
.sen-bar{display:flex;gap:3px}
.sen-bar i{width:22px;height:8px;border-radius:4px;background:var(--line)}
.sen-bar.pos i.on{background:var(--ok)}
.sen-bar.neu i.on{background:var(--ink-2)}
.sen-bar.neg i.on{background:var(--book-acc)}
.sen-esc{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;font-size:13px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--page);color:var(--ink-2)}
.sen-esc .ms{font-size:16px}
.sen-esc.si{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.sen-res{font-size:14px;color:var(--ink-2)}

/* Tema agentes-en-el-negocio · escalar: el If con el aviso al equipo (alerta) o la respuesta sugerida (gris) */
.branch.on.alerta{border-color:var(--err);background:var(--err-bg);color:var(--err)}
.esc-msg{font-size:13.5px;line-height:1.45;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);white-space:pre-line;animation:aparecer .3s ease}

/* Tema agentes-en-el-negocio · confirmar antes de actuar: chat en pasos y calendario dibujado */
.agd{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:14px;align-items:start}
.agd .mem-lista{min-height:260px}
.agd-tool{align-self:center;display:inline-flex;gap:6px;align-items:center;font-family:var(--f-mono);font-size:12.5px;padding:4px 10px;border-radius:999px;border:1.5px solid var(--tool);color:var(--tool-ink);background:var(--card);animation:aparecer .3s ease}
.agd-tool .ms{font-size:16px;color:var(--tool)}
.mem-msg.bot.pregunta{border-color:var(--ink-2);box-shadow:inset 3px 0 0 var(--ink)}
.agd-lado{display:flex;flex-direction:column;gap:10px}
.agd-cal{display:grid;grid-template-columns:30px repeat(3,minmax(0,1fr));grid-auto-rows:24px;gap:2px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:12px}
.agd-cal .dia{text-align:center;font-weight:600;color:var(--ink-2);align-self:end}
.agd-cal .hora{color:var(--ink-2);font-family:var(--f-mono);font-size:11px;text-align:right;padding-right:4px}
.agd-cal .celda{border-top:1px dashed var(--line)}
.agd-cal .bloque{border-radius:6px;padding:2px 6px;font-size:11.5px;line-height:1.2;overflow:hidden;display:flex;align-items:center}
.agd-cal .ocupado{background:var(--page);border:1px solid var(--line);color:var(--ink-2)}
.agd-cal .libre{border:1.5px dashed var(--ink-2);color:var(--ink);background:var(--card);animation:aparecer .3s ease}
.agd-cal .elegido{border:1.5px dashed var(--tool);color:var(--tool-ink);background:var(--card)}
.agd-cal .evento{border:1.5px solid var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:600;animation:aparecer .4s ease}
.agd-cal .tapa{opacity:.15}

/* Tema agentes-en-el-negocio · agentes encadenados */
.cad-panel{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);min-height:150px}
.cad-panel p,.cad-panel li{font-size:14px;color:var(--ink)}
.cad-panel pre{margin:0;font-family:var(--f-mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);animation:aparecer .3s ease}
.cad-panel .mail{white-space:pre-line;font-size:14px;line-height:1.5;animation:aparecer .3s ease}
.cad-flow{min-width:0}

/* Guía · capturas de pantalla: ancho de la tarjeta, borde suave y ampliables al tocarlas */
.ruta-alt{font-size:14px;color:var(--ink-2)}
.captura{margin:0;display:flex;flex-direction:column;gap:6px}
.captura a{position:relative;display:block;border-radius:10px;border:1px solid var(--line);background:var(--card);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.captura img{display:block;width:100%;height:auto}
.captura .ampliar{position:absolute;right:8px;bottom:8px;display:inline-flex;gap:4px;align-items:center;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--card);color:var(--ink);border:1px solid var(--line)}
.captura .ampliar .ms{font-size:16px}
.captura figcaption{font-size:13.5px;color:var(--ink-2)}
.captura-dialog{width:min(1440px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - 16px);padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);flex-direction:column;gap:8px}
.captura-dialog[open]{display:flex}
.captura-dialog::backdrop{background:rgba(0,0,0,.7)}
.captura-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.captura-scroll{overflow:auto;min-height:0;border-radius:8px;border:1px solid var(--line)}
.captura-scroll img{display:block;width:100%;min-width:900px;height:auto}
@media (min-width:900px){.captura-scroll img{min-width:0}}

/* Tema integraciones · polling: el contador de ejecuciones y los chips de cada revisión */
#pol .r-nodo b{font-family:var(--f-display);font-size:26px;line-height:1.1}
#pol .r-nodo>.ms{font-size:30px}
.r-chip.cuenta{border-color:var(--ok);background:var(--ok-bg)}
.r-chip.nada{color:var(--ink-2)}
/* Tema integraciones · cuatro caminos: el mail de entrada ocupa toda la fila */
#cam .esc-msg{flex:1 1 100%}

/* ==== IA y Productividad: agregados propios (mismos tokens) ==== */

/* Leyenda: el rol herramienta */
.lg.tool{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.tool .ms{color:var(--tool)}

/* Ejercicios: herramientas con sus marcas (gris neutro: gratis o pago no es un resultado) */
.ex .tools{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tool-chip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--ink-2)}
.tool-chip b{color:var(--ink);font-weight:600}
.tool-chip .mark{display:inline-flex;align-items:center;gap:3px}
.tool-chip .mark .ms{font-size:15px}
.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(--tool);flex:none}
.ex-prompt{background:var(--lab-bg);border:1px solid var(--lab-line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;color:var(--lab-ink)}
.ex-prompt .tag{font-family:var(--f-mono);font-size:12px;color:var(--lab-acc);display:flex;gap:6px;align-items:center}
.ex-prompt .tag .ms{font-size:16px}
.ex-prompt pre.prompt{font-size:13px;padding:10px 12px}
.ex .ex-actions .btn{max-width:100%;overflow-wrap:anywhere}

/* Empresa → producto → modelo */
.mapa-emp{display:flex;flex-wrap:wrap;gap:6px}
.mapa-emp button{font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer}
.mapa-emp button[aria-pressed="true"]{color:var(--tool-ink);box-shadow:inset 0 0 0 1.5px var(--tool);font-weight:600}
.mapa-fila{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:6px}
.mapa-caja{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mapa-caja small{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.mapa-caja b{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.mapa-caja.prod{border-color:var(--tool)}
.mapa-fila>.ms{align-self:center;color:var(--ink-2)}
@media (max-width:520px){.mapa-fila{grid-template-columns:1fr}.mapa-fila>.ms{transform:rotate(90deg);justify-self:center}}
.mapa-nota{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.mapa-nota .ms{color:var(--tool);flex:none}

/* Próxima palabra */
.pp-frase{font-family:var(--f-display);font-size:20px;line-height:1.4;color:var(--book-ink)}
.pp-bars{display:flex;flex-direction:column;gap:6px}
.pp-row{display:grid;grid-template-columns:84px 1fr 42px;gap:8px;align-items:center;font-size:14px}
.pp-w{font-family:var(--f-mono);font-size:13px;overflow-wrap:anywhere}
.pp-track{height:10px;border-radius:999px;background:var(--line);overflow:hidden}
.pp-fill{display:block;height:100%;border-radius:999px;background:var(--ink-2);transition:width .4s}
.pp-row.top .pp-fill{background:var(--tool)}
.pp-n{font-size:12.5px;color:var(--ink-2);text-align:right}
.btn:disabled{opacity:.5;cursor:default}

/* Tokens */
.tk-out{display:flex;flex-wrap:wrap;gap:4px;font-family:var(--f-mono);font-size:13.5px}
.tk{padding:3px 6px;border-radius:6px;background:var(--lab-hl);color:var(--lab-ink)}
.tk.alt{background:color-mix(in srgb,var(--lab-acc) 22%,transparent)}
.tk-count{font-size:13px;color:var(--lab-ink-2)}

/* Clasificar tareas */
.cl-list{display:flex;flex-direction:column;gap:10px}
.cl-row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.cl-t{font-weight:600;font-size:15px}
.cl-row .seg{flex-wrap:wrap;align-self:flex-start;max-width:100%}
.cl-row .seg button[aria-pressed="true"]{color:var(--tool-ink);box-shadow:inset 0 0 0 1.5px var(--tool)}
.cl-sug{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.cl-sug .ms{font-size:18px;color:var(--ink-2);flex:none}
.cl-sug b{color:var(--ink)}
.cl-res{font-size:14px;color:var(--ink)}

/* Qué ve la IA */
.qv-ve{display:flex;gap:10px;align-items:center;font-size:15px}
.qv-ve .ms{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--tool);color:var(--tool);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none}
.qv-res{display:flex;gap:8px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.qv-res .ms{color:var(--ink-2);flex:none}

/* Tu asistente después de este tema */
.asist{background:var(--card);border:1.5px solid var(--tool);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}
.asist .tag{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tool-ink);display:flex;gap:6px;align-items:center;font-weight:600}
.asist h3{font-size:19px;font-weight:600}
.asist p{color:var(--ink-2);max-width:62ch}
.asist .file{white-space:nowrap;font-family:var(--f-mono);font-size:13px;padding:2px 6px;border-radius:6px;background:var(--page);border:1px solid var(--line);color:var(--ink)}