/* ============================================================
   MANUAL DE CONVERSACION DE DIA - sistema de diseno compartido
   Regla: cero px fijos en anchos de lectura (clamp/%), contraste AA,
   offline (sin fuentes externas). Julio 2026.
   ============================================================ */
:root{
  --bg:#101216; --bg2:#171a20; --bg3:#1e222a; --bg4:#252a34;
  --ink:#f4f6f8; --ink2:#c3cad4; --ink3:#9aa4b2;
  --acc:#e23a3a; --acc2:#ff8a4c; --acc3:#4cc2b4; --acc4:#7c9cff;
  --line:#2e343f; --line2:#3d4552;
  --col:clamp(58ch,60vw,104ch);
  --nav:clamp(262px,15.5vw,368px);
  --rail:clamp(248px,14.5vw,344px);
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --disp:"Segoe UI Variable Display","Segoe UI Semibold","Segoe UI",system-ui,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:clamp(17px,0.30vw + 15.4px,20px);line-height:1.68;-webkit-font-smoothing:antialiased}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:var(--nav) minmax(0,1fr) var(--rail);align-items:start;min-height:100vh}
.main{width:100%;max-width:100%;padding:0 0 90px}
.wrap{padding:0 clamp(26px,3.6vw,74px)}

/* ---------- nav izquierda ---------- */
.nav{position:sticky;top:0;height:100vh;overflow-y:auto;
  background:linear-gradient(180deg,#161a21 0%,#101216 60%);
  border-right:1px solid var(--line);padding:26px 18px 40px}
.brand{display:block;text-decoration:none;color:inherit;margin-bottom:26px}
.brand .mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--acc);margin-bottom:12px}
.brand .k{font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--acc2)}
.brand .t{font:700 20px/1.15 var(--disp);letter-spacing:-.01em;margin-top:6px;display:block}
.nav h4{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin:22px 0 10px;padding-left:10px}
.nav a.item{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;text-decoration:none;
  color:var(--ink2);font-size:14.5px;line-height:1.35;border-left:3px solid transparent}
.nav a.item .n{font:700 11px/1 var(--mono);color:var(--ink3);min-width:20px}
.nav a.item:hover{background:var(--bg3);color:var(--ink)}
.nav a.item.on{background:var(--bg3);color:#fff;border-left-color:var(--acc);font-weight:600}
.nav a.item.on .n{color:var(--acc2)}
.lvl{display:inline-block;font:700 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:3px 6px;border-radius:4px;margin-left:auto}
.lvl.b{background:#1d3a33;color:#7fe3d0}
.lvl.m{background:#3a3320;color:#ffcf8a}
.lvl.a{background:#3d2028;color:#ff9aa6}

/* ---------- portada (solo index) ---------- */
.hero{position:relative;
  background:radial-gradient(900px 420px at 12% -10%,rgba(226,58,58,.30),transparent 60%),
             radial-gradient(700px 380px at 88% 0%,rgba(124,156,255,.16),transparent 60%),
             linear-gradient(160deg,#1b1f27 0%,#101216 75%);
  border-bottom:1px solid var(--line);
  padding:clamp(40px,5vw,72px) clamp(26px,3.6vw,74px) clamp(34px,4vw,54px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr);gap:clamp(24px,3vw,54px);align-items:center}
.kicker{font:700 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--acc2)}
.hero h1{font:800 clamp(34px,4.4vw,56px)/1.04 var(--disp);letter-spacing:-.025em;margin:16px 0 0}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .sub{font-size:clamp(17px,1.35vw,20px);color:var(--ink2);margin:18px 0 0;max-width:60ch}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{font:600 12.5px/1 var(--sans);padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line2);color:var(--ink2)}
.pill b{color:#fff}
.hero-card{background:var(--bg3);border:1px solid var(--line2);border-radius:16px;padding:22px 22px 20px}
.hero-card h5{font:700 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--acc3);margin:0 0 14px}
.hero-card ol{margin:0;padding-left:20px;color:var(--ink2);font-size:14.5px;line-height:1.75}
.hero-card ol b{color:#fff}

/* barra de ruta (index) */
.route{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.route div{padding:16px 22px;border-right:1px solid var(--line)}
.route div:last-child{border-right:0}
.route span{display:block;font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.route p{margin:0;font-size:14px;color:var(--ink2)}
.route .r1{background:linear-gradient(180deg,rgba(76,194,180,.14),transparent)} .route .r1 span{color:#7fe3d0}
.route .r2{background:linear-gradient(180deg,rgba(255,207,138,.13),transparent)} .route .r2 span{color:#ffcf8a}
.route .r3{background:linear-gradient(180deg,rgba(255,154,166,.13),transparent)} .route .r3 span{color:#ff9aa6}

/* ---------- secciones ---------- */
section{padding-top:14px;scroll-margin-top:10px}
.sec-head{margin:52px 0 26px;padding:22px clamp(26px,3.6vw,74px);border-top:1px solid var(--line);
  background:linear-gradient(115deg,rgba(226,58,58,.16),rgba(226,58,58,0) 55%)}
.sec-head.t2{background:linear-gradient(115deg,rgba(255,138,76,.16),rgba(255,138,76,0) 55%)}
.sec-head.t3{background:linear-gradient(115deg,rgba(76,194,180,.16),rgba(76,194,180,0) 55%)}
.sec-head.t4{background:linear-gradient(115deg,rgba(124,156,255,.16),rgba(124,156,255,0) 55%)}
.sec-head .num{font:800 12px/1 var(--mono);letter-spacing:.14em;color:var(--acc2)}
.sec-head h2{font:800 clamp(26px,2.7vw,36px)/1.12 var(--disp);letter-spacing:-.02em;margin:10px 0 8px}
.sec-head p{margin:0;color:var(--ink2);font-size:0.96em;max-width:var(--col)}
h3{font:700 clamp(19px,1.7vw,23px)/1.25 var(--disp);letter-spacing:-.01em;margin:36px 0 12px;color:#fff}
h4{font:700 15.5px/1.3 var(--sans);margin:24px 0 8px;color:var(--acc2);letter-spacing:.01em}
p{margin:0 0 14px;max-width:var(--col)}
.lead{font-size:1.09em;color:var(--ink2);max-width:var(--col)}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:var(--col)}
li{margin-bottom:7px}
strong{color:#fff}
em.q{font-style:normal;color:#ffd9a0}

/* ---------- enlaces dentro del contenido ----------
   SIN esta regla, un <a> suelto en la prosa cae al azul por defecto del navegador
   (rgb(0,0,238)) y sobre fondo oscuro da un contraste de 1.99: ilegible. */
.main a{color:var(--acc4);text-decoration:none;border-bottom:1px solid rgba(124,156,255,.38)}
.main a:hover{color:#a8bcff;border-bottom-color:#a8bcff}
.main a.brand,.nextbar a,.vent a{color:inherit;border-bottom:0}
.srcs a{border-bottom:0}

/* ---------- frases literales ---------- */
.say{list-style:none;padding:0;margin:0 0 18px;max-width:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.say li{margin:0;padding:11px 15px 11px 40px;position:relative;background:var(--bg2);
  border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:0 9px 9px 0;
  font-size:15.5px;color:#ffe9d6}
.say li::before{content:"\201C";position:absolute;left:13px;top:4px;font:700 30px/1 Georgia,serif;color:var(--acc);opacity:.9}
.say.alt li{border-left-color:var(--acc3);color:#d9fbf5} .say.alt li::before{color:var(--acc3)}
.say.alt2 li{border-left-color:var(--acc4);color:#dfe6ff} .say.alt2 li::before{color:var(--acc4)}
/* Algunas ventanas escriben <p class="say"> suelto en vez de <ul class="say"><li>.
   Sin esta regla heredaban el grid de .say y perdian fondo, borde y comilla. */
p.say{display:block;grid-template-columns:none;position:relative;margin:0 0 8px;max-width:none;
  padding:11px 15px 11px 40px;background:var(--bg2);border:1px solid var(--line);
  border-left:3px solid var(--acc);border-radius:0 9px 9px 0;font-size:15.5px;color:#ffe9d6}
p.say::before{content:"\201C";position:absolute;left:13px;top:4px;font:700 30px/1 Georgia,serif;color:var(--acc);opacity:.9}
p.say.alt{border-left-color:var(--acc3);color:#d9fbf5} p.say.alt::before{color:var(--acc3)}
p.say.alt2{border-left-color:var(--acc4);color:#dfe6ff} p.say.alt2::before{color:var(--acc4)}

/* ---------- tarjetas ---------- */
/* auto-fit con un minimo FIJO multiplica columnas en pantallas anchas y estrangula el texto
   (se vio a 228px de ancho: una palabra por linea). El minimo en % topa las columnas en 3. */
.cards{display:grid;gap:14px;margin:0 0 22px;
  grid-template-columns:repeat(auto-fit,minmax(clamp(280px,30%,460px),1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:18px 18px 15px}
.card.g1{background:linear-gradient(165deg,#1c2530,#171a20)}
.card.g2{background:linear-gradient(165deg,#2a2029,#171a20)}
.card.g3{background:linear-gradient(165deg,#1f2a26,#171a20)}
.card h5{font:700 14.5px/1.3 var(--sans);margin:0 0 8px;color:#fff}
.card .tag{font:700 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc2);display:block;margin-bottom:8px}
.card p{margin:0;font-size:14.5px;color:var(--ink2)}
.card ul{margin:8px 0 0;padding-left:18px;font-size:14.5px;color:var(--ink2)}

/* ---------- pasos ---------- */
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px;max-width:var(--col)}
.steps li{counter-increment:s;position:relative;padding:15px 18px 15px 62px;background:var(--bg2);
  border:1px solid var(--line);border-radius:12px;margin:0}
.steps li::before{content:counter(s);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;
  background:var(--acc);color:#fff;font:800 15px/32px var(--disp);text-align:center}
.steps li b{display:block;color:#fff;margin-bottom:3px;font-size:15.5px}
.steps li span{color:var(--ink2);font-size:15px}

/* ---------- tablas ---------- */
.tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:12px;background:var(--bg2)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th{text-align:left;padding:12px 15px;background:var(--bg4);color:#fff;font:700 12px/1.3 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line2)}
td{padding:12px 15px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
tr:last-child td{border-bottom:0}
tr:nth-child(even) td{background:rgba(255,255,255,.022)}
td b{color:#fff}
.no{color:#ff9aa6} .si{color:#7fe3d0}

/* ---------- avisos ---------- */
.note{border-radius:12px;padding:16px 18px;margin:0 0 22px;max-width:min(100%,calc(var(--col) + 300px));
  border:1px solid var(--line2);background:var(--bg3)}
.note p,.note ul{max-width:none}
.note b.h{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.note.reg{border-left:4px solid var(--acc2);background:linear-gradient(100deg,rgba(255,138,76,.13),var(--bg3) 60%)}
.note.reg b.h{color:var(--acc2)}
.note.stop{border-left:4px solid var(--acc);background:linear-gradient(100deg,rgba(226,58,58,.15),var(--bg3) 60%)}
.note.stop b.h{color:#ff9aa6}
.note.ok{border-left:4px solid var(--acc3);background:linear-gradient(100deg,rgba(76,194,180,.13),var(--bg3) 60%)}
.note.ok b.h{color:#7fe3d0}
.note p:last-child{margin-bottom:0}

/* ---------- dialogos ---------- */
.dlg{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:18px 20px;margin:0 0 22px;
  max-width:min(100%,calc(var(--col) + 300px))}
.dlg .l{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;margin-bottom:11px;align-items:start}
.dlg .l:last-child{margin-bottom:0}
.dlg .who{font:700 11.5px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.dlg .yo .who{color:var(--acc2)}
.dlg .ella .who{color:var(--acc4)}
.dlg .l p{margin:0;font-size:15.5px;color:var(--ink)}
.dlg .ella p{color:var(--ink2)}
.dlg .nota .who{color:var(--acc3)}
.dlg .nota p{color:var(--ink3);font-size:14px;border-left:2px solid var(--line2);padding-left:10px}

/* cabecera de conversacion */
.convhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:40px 0 12px}
.convhead h3{margin:0;margin-right:6px}
.tagx{font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:5px;
  background:var(--bg4);color:var(--ink2);border:1px solid var(--line2)}
.tagx.ok{background:#1d3a33;color:#7fe3d0;border-color:#2a5449}
.tagx.bad{background:#3d2028;color:#ff9aa6;border-color:#5a303c}
.tagx.med{background:#3a3320;color:#ffcf8a;border-color:#57492a}

/* ---------- chat whatsapp ---------- */
.chat{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:18px;margin:0 0 22px;
  max-width:min(100%,720px);display:grid;gap:8px}
.chat .tx,.chat .rx{max-width:78%;padding:9px 13px;border-radius:12px;font-size:14.5px;line-height:1.5;margin:0}
.chat .tx{justify-self:end;background:#1f4d3d;color:#e9fff6;border-bottom-right-radius:3px}
.chat .rx{justify-self:start;background:var(--bg4);color:var(--ink);border-bottom-left-radius:3px}
.chat .meta{font-size:11.5px;color:var(--ink3);text-align:center;margin:4px 0;max-width:none}

/* ---------- capas ---------- */
.layer{display:grid;grid-template-columns:88px minmax(0,1fr);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;margin:0 0 16px}
.layer .lft{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 8px;text-align:center}
.layer .lft .cn{font:800 30px/1 var(--disp);color:#fff}
.layer .lft .ct{font:700 9px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-top:6px;color:rgba(255,255,255,.92)}
.layer .rgt{padding:16px 20px;background:var(--bg2)}
.layer .rgt h5{margin:0 0 4px;font:700 17px/1.25 var(--disp);color:#fff}
.layer .rgt .when{font:600 12.5px/1 var(--sans);color:var(--acc2);letter-spacing:.04em;margin-bottom:10px;display:block}
.layer .rgt p{margin:0 0 10px;font-size:15px}
.layer .rgt ul{margin:0;font-size:15px}
.l1 .lft{background:linear-gradient(160deg,#2a7f72,#1d5c53)}
.l2 .lft{background:linear-gradient(160deg,#c2762b,#8a5119)}
.l3 .lft{background:linear-gradient(160deg,#c2453f,#8a2b28)}
.l4 .lft{background:linear-gradient(160deg,#4f63b8,#333f79)}

/* ---------- semanas ---------- */
.week{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px;margin:0 0 22px}
.week .w{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--bg2)}
.week .w header{padding:12px 16px;background:var(--bg4)}
.week .w header b{display:block;font:800 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc2)}
.week .w header span{display:block;font:700 16px/1.3 var(--disp);color:#fff;margin-top:5px}
.week .w .body{padding:14px 16px}
.week .w .body p{margin:0 0 9px;font-size:14.5px}
.week .w .body ul{margin:0;padding-left:18px;font-size:14.5px}
.week .w:nth-child(1) header{border-bottom:3px solid var(--acc3)}
.week .w:nth-child(2) header{border-bottom:3px solid var(--acc2)}
.week .w:nth-child(3) header{border-bottom:3px solid var(--acc)}
.week .w:nth-child(4) header{border-bottom:3px solid var(--acc4)}

/* ---------- figura svg ---------- */
.figure{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px 20px 14px;margin:0 0 24px}
.figure svg{width:100%;height:auto;display:block;color:var(--ink)}
.figure figcaption{margin-top:12px;font-size:13.5px;color:var(--ink3);text-align:center}

/* ---------- fuentes ---------- */
.srcs{display:grid;gap:9px;margin:0 0 20px;padding:0;list-style:none;max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.srcs li{margin:0;padding:11px 15px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;font-size:14.5px}
.srcs a{color:var(--acc4);text-decoration:none;word-break:break-word}
.srcs a:hover{text-decoration:underline;color:#a8bcff}
.srcs span{display:block;color:var(--ink3);font-size:13px;margin-top:3px}

/* ---------- siguiente/anterior ---------- */
.nextbar{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:46px 0 0;max-width:min(100%,calc(var(--col) + 300px))}
.nextbar a{display:block;padding:16px 18px;border:1px solid var(--line2);border-radius:12px;text-decoration:none;background:var(--bg2)}
.nextbar a:hover{background:var(--bg3)}
.nextbar a span{display:block;font:700 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.nextbar a b{color:#fff;font-size:15.5px}
.nextbar a.nx{text-align:right;border-right:3px solid var(--acc)}
.nextbar a.pv{border-left:3px solid var(--line2)}

footer.end{margin-top:56px;padding:26px clamp(26px,3.6vw,74px);border-top:1px solid var(--line);
  color:var(--ink3);font-size:13.5px;background:linear-gradient(180deg,var(--bg2),var(--bg))}

/* ---------- riel derecho ---------- */
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;padding:30px 18px 40px;border-left:1px solid var(--line);
  background:linear-gradient(180deg,#141821,#101216 55%)}
.rail h4{font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.rail a{display:block;padding:6px 10px;border-left:2px solid var(--line2);color:var(--ink3);text-decoration:none;font-size:13.5px;line-height:1.4}
.rail a:hover{color:var(--ink)}
.rail a.on{border-left-color:var(--acc2);color:#fff}
.railbox{margin-top:26px;padding:15px;border-radius:12px;background:var(--bg3);border:1px solid var(--line2)}
.railbox b{display:block;font:700 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--acc3);margin-bottom:9px}
.railbox p{margin:0 0 9px;font-size:13.5px;color:var(--ink2);max-width:none}
.railbox p:last-child{margin:0}
.railbox.rojo{border-color:#4a2b2b}
.railbox.rojo b{color:#ff9aa6}

/* Pantalla angosta: la etiqueta del dialogo (86px) y el texto NO caben lado a lado.
   A 294px de ancho el texto quedaba en 102px, una palabra por linea. Se apilan. */
@media(max-width:640px){
  .dlg{padding:14px 14px}
  .dlg .l{grid-template-columns:minmax(0,1fr);gap:2px;margin-bottom:14px}
  .dlg .who{padding-top:0}
  .dlg .nota p{padding-left:8px}
  .chat .tx,.chat .rx{max-width:92%}
  .convhead{gap:6px}
  .say li{padding-left:34px}
}
@media(max-width:1280px){
  .shell{grid-template-columns:var(--nav) minmax(0,1fr)}
  .rail{display:none}
}
@media(max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .nav{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .route{grid-template-columns:1fr}
  .route div{border-right:0;border-bottom:1px solid var(--line)}
  .nextbar{grid-template-columns:1fr}
}