/* ============================================================
   Sorby · Manuales — sistema de estilos compartido
   Lo usan el hub (/manuales/) y cada manual (/manuales/<slug>/).
   Paleta y tipografía según el Manual de Marca:
     #1E4469 navy · #23B5D3 celeste · #0097B2 teal
     #2DC197 verde · #F6F6F6 gris
     Títulos: Codec Cold · Cuerpo: Quicksand
   Documento SIEMPRE claro: el navy queda para portada y pie.
   ============================================================ */

:root{
  --titulo: 'Codec Cold', 'Quicksand', system-ui, sans-serif;
  --cuerpo: 'Quicksand', system-ui, -apple-system, sans-serif;

  --fs-xs:.78rem; --fs-sm:.875rem; --fs-base:1.0625rem; --fs-lg:1.2rem;
  --fs-xl:1.5rem; --fs-2xl:2rem; --fs-3xl:2.6rem;
  --r:14px; --r-sm:10px; --r-pill:999px;

  /* marca */
  --navy:#1E4469; --celeste:#23B5D3; --teal:#0097B2; --verde:#2DC197; --gris:#F6F6F6;

  /* documento */
  --bg:#EDF1F5; --surface:#FFFFFF; --surface-2:#F4F7FA;
  --ink:#1A2D42; --ink-soft:#6B7E91; --line:rgba(30,68,105,.09);
  --accent:#0097B2; --accent-2:#23B5D3;
  --ok:#1E9E7C; --bad:#C4453A;
  --shadow:0 1px 2px rgba(30,68,105,.04), 0 10px 26px -20px rgba(30,68,105,.28);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--cuerpo); font-size:var(--fs-base); line-height:1.65; font-weight:500;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--titulo); font-weight:700; margin:0; text-wrap:balance; line-height:1.15;}
p{margin:0;}
a{color:var(--accent);}
img{max-width:100%;}
:focus-visible{outline:2.5px solid var(--accent-2); outline-offset:3px; border-radius:6px;}

.eyebrow{font-family:var(--cuerpo); font-size:.68rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);}

/* ── Barra del sitio ─────────────────────────────────── */
.site-bar{background:var(--navy); padding:.85rem 1.5rem;}
.site-bar-in{max-width:1160px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;}
.site-bar img{height:26px; width:auto; display:block;}
.site-bar nav{display:flex; align-items:center; gap:1.25rem;}
.site-bar a{color:#CFE2F0; text-decoration:none; font-size:var(--fs-sm); font-weight:600;}
.site-bar a:hover{color:#FFF;}
.site-bar .cta{background:var(--celeste); color:#0B2237; padding:.45rem 1rem;
  border-radius:var(--r-pill); font-weight:700;}
.site-bar .cta:hover{background:#4CC6E0; color:#0B2237;}

/* ── Portada ─────────────────────────────────────────── */
.portada{position:relative; overflow:hidden; color:#F6F6F6;
  background:linear-gradient(155deg,#1E4469 0%,#24507A 55%,#1A5A80 100%);
  padding:clamp(2rem,5vw,3rem) 1.5rem clamp(2.25rem,5vw,3rem);}
.portada::after{content:""; position:absolute; top:-70px; right:-70px; width:280px; height:280px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(35,181,211,.28) 0%, transparent 70%);}
.portada-in{position:relative; z-index:1; max-width:1160px; margin:0 auto;
  display:flex; flex-direction:column; gap:1.75rem;}
.portada h1{font-size:clamp(2rem,6vw,3.1rem); color:#FFF;}
.portada .lede{font-size:clamp(1rem,2.2vw,1.25rem); color:#CFE2F0; max-width:56ch;}
.portada-head{display:flex; flex-direction:column; gap:.9rem; max-width:62ch;}
.migas{font-size:var(--fs-sm); color:#8FB2CC;}
.migas a{color:#8FB2CC; text-decoration:none;}
.migas a:hover{color:#FFF;}

/* dos lados (portada del manual de obra) */
.lados{display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;}
.lado{background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r); padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.7rem;}
.lado h3{font-size:var(--fs-sm); letter-spacing:.08em; text-transform:uppercase;}
.lado.cobrar h3{color:var(--celeste);} .lado.gastar h3{color:var(--verde);}
.cadena{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;}
.cadena b{font-size:var(--fs-xs); font-weight:700; color:#FFF; background:rgba(255,255,255,.13);
  border-radius:var(--r-pill); padding:.28rem .7rem;}
.cadena i{color:#8FB2CC; font-style:normal; font-size:var(--fs-xs);}
.menos{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#8FB2CC; text-align:center;}
.igual{font-weight:700; color:var(--celeste);}
@media(max-width:780px){.lados{grid-template-columns:1fr;}}

/* ── Layout del manual ───────────────────────────────── */
.wrap{max-width:1160px; margin:0 auto; padding:3rem 1.5rem 5rem;
  display:grid; grid-template-columns:216px minmax(0,1fr); gap:3.5rem; align-items:start;}
.toc{position:sticky; top:1.5rem; display:flex; flex-direction:column; gap:.2rem;}
.toc a{font-size:var(--fs-sm); color:var(--ink-soft); text-decoration:none;
  padding:.42rem .8rem; border-radius:var(--r-pill); line-height:1.3; font-weight:600;}
.toc a:hover{color:var(--ink); background:var(--surface-2);}
.toc a.on{color:#FFF; background:var(--accent);}
@media(max-width:920px){
  .wrap{grid-template-columns:1fr; gap:1.75rem; padding-top:1.5rem;}
  .toc{position:static; flex-direction:row; overflow-x:auto; gap:.4rem; padding-bottom:.4rem;}
  .toc .eyebrow{display:none;}
  .toc a{white-space:nowrap; background:var(--surface); border:1px solid var(--line);}
}

.doc{display:flex; flex-direction:column; gap:3.25rem; min-width:0;}
.doc section{display:flex; flex-direction:column; gap:1.15rem; scroll-margin-top:1.5rem;}
.doc section>p, .doc section>ul, .doc section>ol{max-width:66ch;}
.doc h2{font-size:var(--fs-2xl);}
.doc h3{font-size:var(--fs-lg); margin-top:.7rem;}
.sec-head{display:flex; align-items:center; gap:.85rem;}
.sec-head .shape{width:30px; height:30px; color:var(--accent-2); flex-shrink:0;}
.sec-head .shape svg{width:100%; height:100%; display:block; fill:currentColor;}
ul,ol{margin:0; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem;}
li::marker{color:var(--accent-2);}
code,.k{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:.88em;
  background:var(--surface-2); border-radius:6px; padding:.1em .45em; color:var(--accent);}

/* ── Componentes ─────────────────────────────────────── */
.nota{background:rgba(0,151,178,.07); border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0; padding:.9rem 1.15rem; max-width:66ch;}
.nota.ok{background:rgba(45,193,151,.10); border-left-color:var(--verde);}
.nota.warn{background:rgba(196,69,58,.07); border-left-color:var(--bad);}
.nota p{font-size:var(--fs-sm);}
.nota b{display:block; color:var(--ink);}

figure{margin:0; display:flex; flex-direction:column; gap:.55rem;}
figure img{width:100%; height:auto; display:block; border-radius:var(--r-sm);
  border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface);}
figcaption{font-size:var(--fs-xs); color:var(--ink-soft); display:flex; gap:.5rem; align-items:baseline;}
figcaption b{color:var(--accent); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; flex-shrink:0;}

/* ── Ejemplo: conversación con el bot ────────────────── */
.chat{display:flex; flex-direction:column; gap:.6rem; max-width:62ch;}
.burbuja{border-radius:var(--r); padding:.75rem 1rem; font-size:var(--fs-sm); max-width:88%;}
.burbuja .quien{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-soft); display:block; margin-bottom:.35rem;}
.burbuja.yo{align-self:flex-end; background:rgba(45,193,151,.13); border:1px solid rgba(45,193,151,.32);}
.burbuja.bot{align-self:flex-start; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);}

/* Ficha campo → valor (lo que devuelve el bot) */
.ficha{display:flex; flex-direction:column; gap:.1rem; margin:.5rem 0 0;}
.ficha .f{display:flex; gap:.75rem; padding:.16rem 0; align-items:baseline;}
.ficha .f > span:first-child{color:var(--ink-soft); min-width:9.5rem; flex-shrink:0;}
.ficha .f > span:last-child{font-weight:700;}
.ficha .f.destacado{background:rgba(0,151,178,.09); border-radius:6px; padding:.4rem .55rem; margin:.25rem -.55rem;}
.ficha .f.destacado > span:last-child{color:var(--accent);}

/* ── Ejemplo: reparto por porcentaje ─────────────────── */
.reparto{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); max-width:62ch;}
.reparto-hd{background:var(--surface-2); padding:.75rem 1rem; border-bottom:1px solid var(--line);}
.reparto-hd b{font-size:var(--fs-sm);}
.reparto-hd span{display:block; font-size:var(--fs-xs); color:var(--ink-soft); margin-top:.15rem;}
.reparto ul{list-style:none; padding:0; margin:0; gap:0;}
.reparto li{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.6rem 1rem; border-bottom:1px solid var(--line); font-size:var(--fs-sm);}
.reparto li:last-child{border-bottom:0;}
.reparto .pct{font-weight:700; font-variant-numeric:tabular-nums; background:var(--surface-2);
  border:1px solid var(--line); border-radius:6px; padding:.18rem .6rem; min-width:3.6rem; text-align:right;}
.reparto li.activa .pct{background:rgba(0,151,178,.10); border-color:var(--accent); color:var(--accent);}
.reparto li.suma{background:var(--surface-2); font-weight:700;}
.reparto li.suma .pct{background:rgba(45,193,151,.14); border-color:var(--verde); color:var(--ok);}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--shadow);}
.card .tagx{font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);}
.card h4{font-size:var(--fs-base);}
.card p{font-size:var(--fs-sm); color:var(--ink-soft);}

.tabs{display:flex; flex-wrap:wrap; gap:.4rem;}
.tab{font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.45rem .95rem;}
.tab:hover{color:var(--ink); border-color:var(--accent-2);}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#FFF;}
.panel{display:none; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:1.4rem; box-shadow:var(--shadow);}
.panel.on{display:flex; flex-direction:column; gap:.7rem;}
.panel p{font-size:var(--fs-sm);}

.flow{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;}
.step{font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--line);
  border-radius:var(--r-pill); padding:.42rem .95rem;}
.step:hover{border-color:var(--accent-2);}
.step[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#FFF;}
.step.bad[aria-pressed="true"]{background:var(--bad); border-color:var(--bad);}
.arrow{color:var(--ink-soft);}
.flow-detail{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.2rem; font-size:var(--fs-sm); max-width:66ch; min-height:3.6rem; box-shadow:var(--shadow);}
.flow-detail b{display:block; color:var(--accent); font-size:var(--fs-xs);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:.3rem;}

.calc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:1.75rem;}
@media(max-width:720px){.calc{grid-template-columns:1fr;}}
.calc-in{display:flex; flex-direction:column; gap:.9rem;}
.field{display:flex; flex-direction:column; gap:.3rem;}
.field label{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);}
.field input{font-family:var(--cuerpo); font-weight:700; font-size:var(--fs-base);
  font-variant-numeric:tabular-nums; background:var(--surface-2); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:.55rem .7rem; width:100%;}
.field input:focus{border-color:var(--accent-2);}
.calc-out{display:flex; flex-direction:column; gap:.6rem;}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;}
.row .lbl{font-size:var(--fs-sm); color:var(--ink-soft);}
.row .val{font-weight:700; font-variant-numeric:tabular-nums;}
.row.total{border-top:1.5px solid var(--line); padding-top:.6rem;}
.row.total .lbl{color:var(--ink); font-weight:700;}
.row.total .val{font-size:var(--fs-xl);}
.pill{font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.35rem .8rem; border-radius:var(--r-pill); align-self:flex-start;}
.pill.ok{background:rgba(45,193,151,.12); color:var(--ok);}
.pill.bad{background:rgba(196,69,58,.10); color:var(--bad);}

.tabla-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; font-size:var(--fs-sm);}
th,td{text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--surface-2);}
tr:last-child td{border-bottom:0;}

details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
details+details{margin-top:.5rem;}
summary{cursor:pointer; padding:.9rem 1.2rem; font-size:var(--fs-sm); font-weight:700;
  list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+"; color:var(--accent); font-weight:700; flex-shrink:0;}
details[open] summary::after{content:"\2212";}
.ans{padding:0 1.2rem 1rem; font-size:var(--fs-sm); display:flex; flex-direction:column; gap:.45rem;}
.ans .causa{color:var(--ink-soft);}

.buscador input{font-family:var(--cuerpo); font-size:var(--fs-sm); background:var(--surface);
  color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:.6rem 1rem; max-width:22rem; width:100%;}
.buscador input:focus{border-color:var(--accent-2);}
.glos{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:0;}
.term{padding:.8rem 0; border-top:1px solid var(--line);}
.term dt{font-weight:700; color:var(--accent);}
.term dd{margin:.15rem 0 0; font-size:var(--fs-sm); color:var(--ink-soft);}
.term[hidden]{display:none;}
.vacio{font-size:var(--fs-sm); color:var(--ink-soft);}

/* ── KPIs (recreación de tablero) ────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:.9rem 1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.15rem;}
.kpi .kpi-lbl{font-size:var(--fs-xs); color:var(--ink-soft); font-weight:600;}
/* OJO: los números van en --cuerpo (Quicksand), NO en --titulo.
   Codec Cold no trae glifos de dígitos: los 0-9 salen como círculos
   tachados. Vale para cualquier cifra del manual, no solo acá. */
.kpi .kpi-val{font-family:var(--cuerpo); font-weight:700; font-size:var(--fs-xl);
  font-variant-numeric:tabular-nums; line-height:1.1;}
.kpi.warn .kpi-val{color:var(--bad);} .kpi.ok .kpi-val{color:var(--ok);}
.kpi.money .kpi-val{color:var(--accent);}

/* ── Lista mock (recreación de listados de la app) ───── */
.lista{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); max-width:66ch;}
.lista .lista-hd{background:var(--surface-2); padding:.65rem 1rem; border-bottom:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.lista-row{display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line); font-size:var(--fs-sm);}
.lista-row:last-child{border-bottom:0;}
.lista-row .li-main{display:flex; flex-direction:column; gap:.1rem; min-width:0;}
.lista-row .li-sub{font-size:var(--fs-xs); color:var(--ink-soft);}
.lista-row .li-val{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tag-estado{font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; padding:.14rem .55rem;
  border-radius:var(--r-pill); border:1px solid; white-space:nowrap;}
.tag-estado.pend{color:#B4740A; border-color:rgba(180,116,10,.4); background:rgba(180,116,10,.08);}
.tag-estado.parc{color:var(--teal); border-color:rgba(0,151,178,.4); background:rgba(0,151,178,.08);}
.tag-estado.ok{color:var(--ok); border-color:rgba(30,158,124,.4); background:rgba(30,158,124,.08);}
.btn-mock{font-family:var(--cuerpo); font-size:var(--fs-xs); font-weight:700; color:#FFF;
  background:var(--accent); border:0; border-radius:var(--r-sm); padding:.35rem .8rem; white-space:nowrap;}

/* ── Menú de opciones del bot (recreación) ───────────── */
.opts{list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem;}
.opts li{display:flex; gap:.5rem; align-items:baseline; font-size:var(--fs-sm);}
.opts .num{font-weight:700; color:var(--accent); flex-shrink:0;}

/* ── Hub de manuales ─────────────────────────────────── */
.hub{max-width:1160px; margin:0 auto; padding:3rem 1.5rem 5rem;
  display:flex; flex-direction:column; gap:2.75rem;}
.hub-area{display:flex; flex-direction:column; gap:1rem;}
.hub-area h2{font-size:var(--fs-xl);}
.hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem;}
.manual-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;}
.manual-card:hover{border-color:var(--accent-2); transform:translateY(-2px);}
.manual-card .ico{width:34px; height:34px; color:var(--accent-2);}
.manual-card .ico svg{width:100%; height:100%; fill:currentColor; display:block;}
.manual-card h3{font-size:var(--fs-lg);}
.manual-card p{font-size:var(--fs-sm); color:var(--ink-soft);}
.manual-card .mas{font-size:var(--fs-sm); font-weight:700; color:var(--accent); margin-top:.2rem;}
.manual-card.soon{opacity:.62; pointer-events:none;}
.manual-card .badge{font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2);
  border-radius:var(--r-pill); padding:.2rem .6rem; align-self:flex-start;}

/* ── Pie ─────────────────────────────────────────────── */
.pie{background:var(--navy); color:#A8C4DB; padding:2.25rem 1.5rem;}
.pie-in{max-width:1160px; margin:0 auto; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; align-items:center; font-size:var(--fs-sm);}
.pie img{height:26px; width:auto;}
.pie a{color:#CFE2F0;}

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