/* El cascarón común de la web de KAIA: el del informe de producto, generalizado.

   - body.shell: las páginas que genera construir.py (guías, bloques, fechas, el manual). Llevan la
     maqueta del informe: barra con el logotipo, índice fijo a la izquierda y documento con márgenes.
   - En el informe, que trae su maqueta y su CSS, solo entran la navegación del sitio (.sitio, en su
     índice) y la barra de acciones: lo demás lo pinta su propio CSS, que va después.
   - body.shell-ancho: las piezas con formato propio (la hoja de ruta, «qué trae cada versión», el
     mapa). Conservan su ancho y solo cogen una lateral fija con la navegación y su índice.

   Los tokens son los del informe, con prefijo --s- para no pisar los de las piezas. */
:root{
  --s-bg:#fdfdfb;--s-raised:#ffffff;--s-sunk:#f4f4f1;--s-sunk2:#ebebe6;
  --s-ink:#252523;--s-ink2:#585856;--s-mut:#6c6c6a;
  --s-hair:rgba(0,0,0,.07);--s-hair2:rgba(0,0,0,.13);
  --s-accent:#0e7cd9;--s-accent2:#0a5fa6;--s-wash:rgba(14,124,217,.08);
  --s-idp:#0e7cd9;--s-auto:#bd7a2c;--s-know:#3c8a5f;--s-agent:#4b66a8;
  --s-shadow:0 1px 2px rgba(20,20,10,.04),0 10px 28px rgba(20,20,10,.07);
  --s-display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --s-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --s-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --s-lat:272px;
}
@media (prefers-color-scheme:dark){
  :root{
    --s-bg:#1f1e1c;--s-raised:#262522;--s-sunk:#2a2926;--s-sunk2:#34332f;
    --s-ink:#ece9e3;--s-ink2:#bab8af;--s-mut:#a3a198;
    --s-hair:rgba(255,255,255,.08);--s-hair2:rgba(255,255,255,.15);
    --s-accent:#4da3e8;--s-accent2:#7bbcf0;--s-wash:rgba(77,163,232,.13);
    --s-idp:#4da3e8;--s-auto:#e2a857;--s-know:#5fcf95;--s-agent:#88a0c8;
    --s-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.35);
  }
}

/* ── las páginas generadas: la maqueta del informe ─────────────────────── */
body.shell{margin:0;background:var(--s-bg);color:var(--s-ink);font-family:var(--s-body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
.shell *{box-sizing:border-box}
html:has(body.shell){scroll-behavior:smooth;scroll-padding-top:20px}
@media (prefers-reduced-motion:reduce){html:has(body.shell){scroll-behavior:auto}}
.shell a{color:var(--s-accent2);text-underline-offset:2px}
.shell a:hover{text-decoration-thickness:2px}
.shell :focus-visible{outline:2px solid var(--s-accent);outline-offset:2px;border-radius:4px}
:where(.shell) :is(h1,h2,h3,h4){font-family:var(--s-display);color:var(--s-ink);text-wrap:balance;margin:0}
:where(.shell) p{margin:0}
.shell code{font-family:var(--s-mono);font-size:.86em}
.shell b,.shell strong{font-weight:600;color:var(--s-ink)}
.shell .page,.portada .page{max-width:1320px;margin:0 auto;padding-inline:20px}
.shell .topbar,.portada .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;border-bottom:1px solid var(--s-hair)}
.shell .brand,.portada .brand{display:flex;align-items:center;color:var(--s-accent)}
.shell .brand svg,.portada .brand svg{height:30px;width:auto;display:block}
.shell .layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:56px;align-items:start;padding-top:40px}
.shell .toc{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-bottom:24px}
.shell .toc .h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--s-mut);font-weight:700;margin-bottom:10px;padding-left:8px}
.shell .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.shell .toc ol a{display:block;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--s-ink2);font-size:14px;line-height:1.35}
.shell .toc ol a:hover{background:var(--s-sunk);color:var(--s-ink)}
.shell .toc ol a[aria-current="true"]{background:var(--s-sunk2);color:var(--s-ink);font-weight:600}
.shell .toc ol .sub a{padding-left:22px;font-size:13.5px}
.shell main{min-width:0;max-width:1000px;padding-bottom:40px}
.shell .doc-cabeza{padding-bottom:28px;border-bottom:1px solid var(--s-hair);margin-bottom:8px}
.shell .doc-cabeza .fila{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.shell .doc-cabeza h1{font-size:clamp(30px,3.6vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:600}
.shell .doc-cabeza .lead{font-size:clamp(17px,1.5vw,19px);color:var(--s-ink2);margin-top:14px;max-width:62ch}
.shell section.ch{padding-block:40px 16px;border-top:1px solid var(--s-hair)}
.shell section.ch:first-of-type{border-top:0}
.shell h2{font-size:clamp(24px,2.6vw,30px);line-height:1.18;letter-spacing:-.015em;font-weight:600;margin-bottom:16px}
.shell h3{font-size:20px;line-height:1.28;font-weight:600;margin:34px 0 12px}
.shell h4{font-family:var(--s-body);font-size:16.5px;font-weight:600;margin:26px 0 8px}
.shell .pie-doc{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;border-top:1px solid var(--s-hair);
  padding-block:18px 32px;color:var(--s-mut);font-size:13px}
.shell .pie-doc{align-items:center}
.teknei{display:inline-flex;color:var(--s-ink)}
.teknei svg{height:34px;width:auto;display:block}
@media (max-width:640px){.teknei svg{height:28px}}

/* el texto de un documento: ancho de lectura, la tipografía del informe */
.doc{max-width:72ch}
.doc > * + *{margin-top:14px}
.doc :is(h2,h3,h4) + *{margin-top:0}
.doc ul,.doc ol{margin-block:14px 0;padding-left:1.25em}
.doc li + li{margin-top:6px}
.doc li > ul,.doc li > ol{margin-top:6px}
.doc .tabla{max-width:min(1000px,calc(100vw - 340px));overflow-x:auto;border:1px solid var(--s-hair2);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;font-size:14.5px;line-height:1.45}
.doc th,.doc td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--s-hair)}
.doc tr:last-child td{border-bottom:0}
.doc th{font-weight:600;color:var(--s-ink2);background:var(--s-sunk)}
.doc code{background:var(--s-sunk);padding:1px 5px;border-radius:5px}
.doc :not(pre) > code{overflow-wrap:anywhere}
.doc pre{background:var(--s-sunk);border:1px solid var(--s-hair2);border-radius:12px;padding:13px 16px;overflow-x:auto;
  font-size:13.5px;line-height:1.5}
.doc pre code{background:none;padding:0;font-size:inherit}
.doc blockquote{margin:16px 0 0;padding:10px 18px;border-left:3px solid var(--s-hair2);background:var(--s-sunk);border-radius:0 12px 12px 0;color:var(--s-ink2)}
.doc blockquote > * + *{margin-top:8px}
.doc blockquote:has(p.tu){border:0;background:none;padding:0}
.doc p.tu,.doc p.claude{padding:9px 16px;border-radius:0 12px 12px 0}
.doc p.tu{border-left:3px solid var(--s-auto);background:color-mix(in srgb,var(--s-auto) 9%,transparent)}
.doc p.claude{border-left:3px solid var(--s-agent);background:color-mix(in srgb,var(--s-agent) 9%,transparent)}
.doc img{display:block;max-width:100%;height:auto;margin:18px 0 6px;border-radius:12px}
.doc img[src*="capturas/"]{border:1px solid var(--s-hair2)}
.doc .mut{color:var(--s-mut);font-size:14.5px}
.doc .diagrama{margin:22px 0 8px;padding:18px;background:#fff;border:1px solid var(--s-hair2);border-radius:12px;overflow-x:auto;max-width:min(1000px,100%)}
.doc .diagrama svg{display:block;margin:0 auto;max-width:100%;height:auto}
.shell .diagrama :is(b,strong),.shell .diagrama p{color:inherit;margin:0}
.doc hr{border:0;border-top:1px solid var(--s-hair);margin:28px 0}

/* las piezas por capítulos: la lista de capítulos en el índice y anterior/siguiente al pie */
.shell .toc ol.capitulos{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--s-hair)}
.ant-sig{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--s-hair)}
.ant-sig a{display:block;padding:14px 18px;border:1px solid var(--s-hair2);border-radius:12px;text-decoration:none;color:var(--s-ink);
  font-family:var(--s-display);font-weight:600;font-size:15.5px;line-height:1.35}
.ant-sig a:hover{border-color:color-mix(in srgb,var(--s-accent) 40%,transparent);background:var(--s-sunk)}
.ant-sig small{display:block;font-family:var(--s-body);font-weight:500;font-size:12.5px;color:var(--s-mut);margin-bottom:3px}
.ant-sig .sig{text-align:right}
@media (max-width:560px){.ant-sig{grid-template-columns:1fr}.ant-sig .sig{text-align:left}}

/* una presentación: sus diapositivas, una debajo de otra */
.diapos{display:grid;gap:22px;max-width:1000px}
.diapo{margin:0}
.diapo img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--s-hair2);box-shadow:var(--s-shadow);background:#fff}
.diapo figcaption{margin-top:6px;font-size:12.5px;color:var(--s-mut);text-align:right}

/* las tarjetas de un bloque */
.tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.tarjeta{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:var(--s-raised);
  border:1px solid var(--s-hair2);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.tarjeta:hover{border-color:color-mix(in srgb,var(--s-accent) 40%,transparent);box-shadow:var(--s-shadow)}
.tarjeta .arriba{display:flex;align-items:center;gap:12px}
.tarjeta h3{font-size:17.5px;margin:0;line-height:1.3}
.tarjeta h3 a{color:var(--s-ink);text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.tarjeta p{color:var(--s-ink2);font-size:15px;line-height:1.5}
.tarjeta .fecha{font-size:12.5px;color:var(--s-mut)}
.tarjeta .acciones{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.s-icono{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--s-wash);color:var(--s-accent2)}
.s-icono svg{width:20px;height:20px}
@media (max-width:760px){.tarjetas{grid-template-columns:1fr}}

/* los botones: los del kit del front (.ui-btn y .primary) */
.s-btn{box-sizing:border-box;min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  font:600 13px/1.2 var(--s-body);color:var(--s-ink);background:var(--s-raised);border:1px solid var(--s-hair2);
  border-radius:8px;cursor:pointer;text-decoration:none;white-space:nowrap}
.s-btn:hover{background:var(--s-sunk);text-decoration:none}
.s-btn.grande{min-height:46px;padding:10px 20px;font-size:16px;border-radius:12px}
.s-btn.grande svg{width:18px;height:18px}
.maquina .direccion{font-size:12.5px;color:var(--s-mut);font-family:var(--s-mono,ui-monospace,monospace)}
.nota-entrada{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:12px;
  background:var(--s-sunk);color:var(--s-ink2);font-size:15px;line-height:1.5}
.nota-entrada svg{flex:none;width:18px;height:18px;margin-top:2px}
.s-btn.primary{color:var(--s-accent2);background:color-mix(in srgb,var(--s-accent) 14%,transparent);border-color:transparent}
.s-btn.primary:hover{background:color-mix(in srgb,var(--s-accent) 22%,transparent)}
.s-btn.discreto{border-color:transparent;background:none;color:var(--s-ink2);font-weight:500}
.s-btn.discreto:hover{background:var(--s-sunk)}
.s-btn svg{width:16px;height:16px;flex:none}

/* ── la navegación del sitio (en el índice de la página o en la lateral) ── */
.sitio{margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--s-hair);font-family:var(--s-body)}
.sitio details + details{margin-top:2px}
.sitio summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--s-ink);line-height:1.35}
.sitio summary::-webkit-details-marker{display:none}
.sitio summary svg{width:14px;height:14px;flex:none;color:var(--s-mut);transition:transform .15s}
.sitio details[open] > summary svg{transform:rotate(90deg)}
.sitio summary:hover{background:var(--s-sunk)}
.toc .sitio summary a,.lateral .sitio summary a{display:inline;padding:0;color:inherit;text-decoration:none;font-size:inherit;font-weight:inherit;background:none}
.toc .sitio summary a:hover,.lateral .sitio summary a:hover{text-decoration:underline}
.toc .sitio summary a[aria-current="page"],.lateral .sitio summary a[aria-current="page"]{color:var(--s-accent2)}
.toc .sitio ul,.lateral .sitio ul{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:1px}
.toc .sitio ul a,.lateral .sitio ul a{display:block;padding:5px 8px 5px 28px;border-radius:8px;text-decoration:none;
  color:var(--s-ink2);font-size:14px;line-height:1.35;font-weight:400}
.toc .sitio ul a:hover,.lateral .sitio ul a:hover{background:var(--s-sunk);color:var(--s-ink)}
.toc .sitio ul a[aria-current="page"],.lateral .sitio ul a[aria-current="page"]{background:var(--s-sunk2);color:var(--s-ink);font-weight:600}
.sitio .portada{display:block;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--s-ink2);text-decoration:none}
.sitio .portada:hover{background:var(--s-sunk);color:var(--s-ink)}

/* la barra de arriba: migas y acciones (PDF, edición completa) */
.shell-barra{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
.migas{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--s-mut);min-width:0;flex-wrap:wrap}
.migas a{color:var(--s-ink2);text-decoration:none}
.migas a:hover{color:var(--s-ink);text-decoration:underline}
.migas [aria-current]{color:var(--s-ink)}
.shell-menu{display:none}

/* la cuenta (la rellena shell.js con /.auth/me). Lo que pide un rol no aparece hasta que shell.js sabe
   que quien navega lo tiene; en local, sin Static Web App, aparece todo. */
[data-rol]:not([data-visible]){display:none!important}
.cuenta{display:inline-flex;align-items:center;gap:10px;font-family:var(--s-body);font-size:13.5px;color:var(--s-mut);white-space:nowrap}
.cuenta[hidden]{display:none}
.cuenta .quien{color:var(--s-ink2);max-width:16ch;overflow:hidden;text-overflow:ellipsis}
.cuenta a{color:var(--s-accent2);font-weight:600;text-decoration:none}
.cuenta a:hover{text-decoration:underline}
.cuenta-fija{position:fixed;top:16px;right:18px;z-index:21;display:flex;align-items:center;padding:7px 14px;border-radius:99px;
  background:var(--s-raised);border:1px solid var(--s-hair2);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.cuenta-fija:not(:has(.cuenta:not([hidden]))){display:none}
.toolbar .cuenta{padding:0 6px;font-size:13px}
body.pres .cuenta-fija{display:none}
@media print{.cuenta-fija{display:none}}


/* ── las piezas a todo el ancho: una lateral fija ──────────────────────── */
body.shell-ancho{padding-left:var(--s-lat)}
.shell-ancho .deck-title{display:none}
.lateral{position:fixed;top:0;bottom:0;left:0;width:var(--s-lat);z-index:60;overflow:auto;box-sizing:border-box;
  padding:18px 14px 28px;background:var(--s-bg);border-right:1px solid var(--s-hair2);color:var(--s-ink);
  font-family:var(--s-body);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
.lateral *{box-sizing:border-box}
.lateral .brand{display:block;color:var(--s-accent);padding:2px 8px 14px}
.lateral .brand svg{height:28px;width:auto;display:block}
.lateral .acciones{display:flex;gap:6px;flex-wrap:wrap;padding:0 4px 16px}
.lateral .h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--s-mut);font-weight:700;margin:0 0 8px;padding-left:8px}
.lateral ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.lateral ol a{display:block;padding:5px 8px;border-radius:8px;text-decoration:none;color:var(--s-ink2);font-size:13.5px;line-height:1.35}
.lateral ol a:hover{background:var(--s-sunk);color:var(--s-ink)}
.lateral ol a[aria-current="true"]{background:var(--s-sunk2);color:var(--s-ink);font-weight:600}
.lateral :focus-visible{outline:2px solid var(--s-accent);outline-offset:1px;border-radius:6px}
body.pres{padding-left:0}
body.pres .lateral,body.pres .shell-menu{display:none!important}

/* ── móvil: la navegación se pliega a un botón ─────────────────────────── */
.shell-menu{align-items:center;gap:7px}
@media (max-width:1180px){
  .shell .layout{grid-template-columns:1fr;gap:0;padding-top:28px}
  .shell .toc{position:static;max-height:none;border:1px solid var(--s-hair2);border-radius:12px;padding:16px;margin-bottom:36px}
  .shell .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
  .shell .toc ol .sub{display:none}
  .toc .sitio{display:none}
  .menu-abierto .toc .sitio{display:block}
  .shell-menu{display:inline-flex}
  .doc .tabla{max-width:100%}
}
@media (max-width:560px){.shell .toc ol{grid-template-columns:1fr}}
@media (max-width:900px){
  body.shell-ancho{padding-left:0}
  .lateral{display:none;box-shadow:0 0 40px rgba(0,0,0,.25);width:min(var(--s-lat),86vw)}
  .menu-abierto .lateral{display:block}
  .shell-ancho .shell-menu{display:inline-flex;position:fixed;top:14px;left:12px;z-index:61}
}
@media print{
  /* al imprimir una página de la web: nada partido entre páginas, los títulos con lo suyo */
  .doc :is(.diagrama,figure,img,svg,table,.tabla,pre,blockquote,tr){break-inside:avoid;page-break-inside:avoid}
  .doc :is(h2,h3,h4){break-after:avoid;page-break-after:avoid}
  .doc .diagrama svg{max-height:85vh;width:auto}
  .shell .toc,.shell .topbar,.ant-sig,.pie-doc{display:none!important}
  .shell .layout{display:block;padding-top:0}
  body.shell-ancho{padding-left:0}
  .lateral,.shell-menu,.shell-barra,.toc .sitio{display:none!important}
}