*,*::before,*::after{box-sizing:border-box}

/* ---------- tipografías de marca (Rebl) ---------- */
@font-face{font-family:"Inter";src:url("fonts/Inter-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Telegraf";src:url("fonts/Telegraf-UltraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* Rebl: negro de base, rojo de marca, neutros fríos */
  --ground:#000;
  --surface:#0B0D10;
  --surface2:#141619;
  --sunk:#000;
  --ink:#FAF9F9;
  --ink2:#B9BCC0;
  --ink3:#7E848B;
  --rule:#26292E;
  --rule-soft:#1A1C20;
  --accent:#ED174C;
  --accent-ink:#FF5C82;
  --accent-soft:#2A0A14;
  --ok:#10B981; --ok-soft:#07281E;
  --warn:#E0A100; --warn-soft:#2B2107;
  --bad:#ED174C; --bad-soft:#2A0A14;
  --alt:#8B93F8; --alt-soft:#15173A;
  --start:#FAF9F9; --start-soft:#1C1F24;
  --shadow:0 1px 0 rgba(0,0,0,.6), 0 10px 30px -18px #000;

  --f-display:"Telegraf",ui-serif,Georgia,serif;
  --f-body:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:15.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* ---------- estructura ---------- */
.app{display:grid;grid-template-columns:262px minmax(0,1fr);gap:0;max-width:1480px;margin:0 auto}

.rail{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  padding:26px 20px 40px 26px;
  border-right:1px solid var(--rule);
  background:linear-gradient(to bottom,var(--sunk),var(--ground));
}
.rail-search{
  width:100%;padding:7px 10px;font:inherit;font-size:13px;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:4px;margin-bottom:18px;
}
.rail-search::placeholder{color:var(--ink3)}
.rail-group{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);margin:20px 0 7px}
.rail-group:first-of-type{margin-top:0}
.rail a{
  display:flex;gap:9px;align-items:baseline;
  padding:4px 8px 4px 7px;margin-left:-7px;border-radius:4px;
  font-size:13.5px;line-height:1.35;color:var(--ink2);text-decoration:none;
  border-left:2px solid transparent;
}
.rail a .num{font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);flex:none;font-variant-numeric:tabular-nums}
.rail a:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rail a.on{color:var(--accent);border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rail a.on .num{color:var(--accent)}
.rail a.hide{display:none}
.rail-group.hide{display:none}

main{min-width:0;padding:0 clamp(20px,3.4vw,54px) 96px}

/* ---------- masthead ---------- */
.masthead{padding:52px 0 30px;border-bottom:1px solid var(--rule)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(32px,4.2vw,48px);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 16px;text-wrap:balance;max-width:16ch;
}
.lede{font-size:17.5px;line-height:1.55;color:var(--ink2);max-width:64ch;margin:0}
.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid var(--rule-soft)}
.stat{padding:14px 26px 12px 0;margin-right:26px;border-right:1px solid var(--rule-soft)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--f-mono);font-size:24px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12px;color:var(--ink3);letter-spacing:.04em}

/* ---------- secciones ---------- */
.overview{padding:38px 0 8px;border-bottom:1px solid var(--rule)}
h2.sec{font-family:var(--f-display);font-weight:800;font-size:25px;letter-spacing:-.015em;margin:0 0 8px}
.sec-note{color:var(--ink2);max-width:70ch;margin:0 0 26px}

.flow{padding:46px 0 14px;border-bottom:1px solid var(--rule);scroll-margin-top:16px}
.flow-head{display:flex;gap:18px;align-items:flex-start}
.flow-num{
  font-family:var(--f-mono);font-size:12px;font-weight:600;color:var(--accent);
  padding-top:9px;flex:none;font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.flow-title{flex:1;min-width:0}
h3{font-family:var(--f-display);font-weight:800;font-size:clamp(21px,2.2vw,27px);line-height:1.16;letter-spacing:-.012em;margin:0 0 7px;text-wrap:balance}
.mods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.mod{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  padding:2.5px 7px;border-radius:3px;background:var(--accent-soft);color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
}
.mod.n{background:var(--surface2);color:var(--ink2);border-color:var(--rule)}
.resumen{max-width:72ch;margin:0 0 26px;color:var(--ink)}

/* ---------- figura / diagrama ---------- */
.fig{margin:0 0 30px;border:1px solid var(--rule);border-radius:7px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.fig-scroll{overflow-x:auto;padding:16px 16px 8px;background:
  linear-gradient(var(--surface2) 0 0) padding-box;}
.dg{display:block;width:100%;min-width:940px;height:auto;color:var(--ink)}
figcaption{
  padding:11px 16px 13px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;line-height:1.5;color:var(--ink2);background:var(--surface);
}
figcaption b{color:var(--ink);font-weight:600}

/* nodos */
.dn{stroke-width:1.2}
.dn-step{fill:var(--surface);stroke:var(--rule)}
.dn-start{fill:var(--start-soft);stroke:color-mix(in srgb,var(--start) 55%,transparent)}
.dn-end{fill:var(--ok-soft);stroke:color-mix(in srgb,var(--ok) 45%,transparent)}
.dn-state{fill:var(--surface);stroke:var(--ink3);stroke-dasharray:none}
.dn-decision{fill:var(--warn-soft);stroke:color-mix(in srgb,var(--warn) 50%,transparent)}
.dn-bad{fill:var(--bad-soft);stroke:color-mix(in srgb,var(--bad) 45%,transparent)}
.dn-ok{fill:var(--ok-soft);stroke:color-mix(in srgb,var(--ok) 45%,transparent)}
.dn-warn{fill:var(--warn-soft);stroke:color-mix(in srgb,var(--warn) 50%,transparent)}
.dn-ext{fill:var(--alt-soft);stroke:color-mix(in srgb,var(--alt) 45%,transparent);stroke-dasharray:4 3}
.dn-job{fill:var(--alt-soft);stroke:color-mix(in srgb,var(--alt) 45%,transparent)}
.dn-doc{fill:var(--surface2);stroke:var(--rule)}

.dt{fill:var(--ink);font-family:var(--f-body);font-size:12.5px;text-anchor:middle;dominant-baseline:auto}
.dt-sub{fill:var(--ink3);font-family:var(--f-mono);font-size:9px}
.dt-tag{fill:var(--ink3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase}

/* aristas */
.de{fill:none;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
.de-base{stroke:var(--ink3)}
.de-ok{stroke:var(--ok)}
.de-bad{stroke:var(--bad)}
.de-alt{stroke:var(--alt)}
.de-dash{stroke-dasharray:5 4}
.mk-base{fill:var(--ink3)}
.mk-ok{fill:var(--ok)}
.mk-bad{fill:var(--bad)}
.mk-alt{fill:var(--alt)}
.dl{font-family:var(--f-mono);font-size:10px;fill:var(--ink2);letter-spacing:.01em;paint-order:stroke fill;stroke:var(--surface2);stroke-width:3.5px;stroke-linejoin:round}
.dl-bad{fill:var(--accent-ink)}
.dl-ok{fill:var(--ok)}
.dl-alt{fill:var(--alt)}

.dband{fill:color-mix(in srgb,var(--accent) 5%,transparent);stroke:var(--rule-soft);stroke-width:1}
.dband-t{fill:var(--ink3);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}

/* ---------- bloques de detalle ---------- */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:0 40px}
.block{margin:0 0 28px}
.block-h{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 11px;padding-bottom:6px;border-bottom:1px solid var(--rule);
}

/* tabla de pasos, con reglado de libro contable */
.pasos{display:grid;grid-template-columns:34px minmax(0,1fr);border-top:1px solid var(--rule-soft)}
.paso{display:contents}
.paso-n{
  font-family:var(--f-mono);font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;
  padding:12px 10px 12px 0;border-bottom:1px solid var(--rule-soft);border-right:1px solid var(--rule-soft);
  text-align:right;
}
.paso-b{padding:12px 0 12px 14px;border-bottom:1px solid var(--rule-soft);min-width:0}
.paso-a{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:2px}
.paso-t{margin:0 0 4px}
.paso-m{font-size:12.5px;color:var(--ink2);margin:0}
.paso-m code{font-size:11.5px}
code,.mono{font-family:var(--f-mono);font-size:12px;background:var(--surface2);border:1px solid var(--rule-soft);border-radius:3px;padding:.5px 4px;color:var(--ink2);word-break:break-word}
.paso-m .sep{color:var(--ink3);padding:0 6px}

/* estados */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font-family:var(--f-mono);font-size:11px;padding:3px 8px;border-radius:3px;
  border:1px solid var(--rule);background:var(--surface2);color:var(--ink2);
}
.chip.f{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.estados dt{font-family:var(--f-mono);font-size:11.5px;color:var(--ink);margin-top:9px}
.estados dd{margin:1px 0 0;font-size:13px;color:var(--ink2)}
.estados dt:first-child{margin-top:0}
.fin{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ok);text-transform:uppercase;margin-left:6px}

ul.rules{margin:0;padding:0;list-style:none}
ul.rules li{position:relative;padding:0 0 9px 17px;font-size:13.5px;color:var(--ink2);line-height:1.55}
ul.rules li::before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.6}
ul.rules li b{color:var(--ink);font-weight:600}

.obs li::before{background:var(--warn);opacity:.85}
.files{display:flex;flex-direction:column;gap:4px}
.files code{background:transparent;border:0;padding:0;font-size:11.5px;color:var(--ink2)}

.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-family:var(--f-mono);font-size:11px;padding:3px 8px;border-radius:3px;border:1px solid color-mix(in srgb,var(--alt) 30%,transparent);background:var(--alt-soft);color:var(--alt)}

.actores{margin:0}
.actores div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.actores div:last-child{border-bottom:0}
.actores b{font-family:var(--f-mono);font-size:11px;color:var(--ink);flex:none;width:118px;padding-top:2px}
.actores span{color:var(--ink2)}

details.more{margin-top:4px}
details.more>summary{
  cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);padding:9px 0;list-style:none;
}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"+ ";}
details.more[open]>summary::before{content:"− ";}
details.more[open]>summary{border-bottom:1px solid var(--rule-soft);margin-bottom:20px}

.legend{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 26px;padding:12px 15px;border:1px solid var(--rule-soft);border-radius:6px;background:var(--surface)}
.legend i{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:12px;color:var(--ink2)}
.legend s{display:inline-block;width:15px;height:11px;border-radius:2.5px;border:1.2px solid var(--rule);background:var(--surface2)}
.legend s.st{background:var(--start-soft);border-color:color-mix(in srgb,var(--start) 55%,transparent)}
.legend s.en{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.legend s.de{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 50%,transparent);transform:rotate(45deg);width:11px}
.legend s.ba{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.legend s.ex{background:var(--alt-soft);border-color:color-mix(in srgb,var(--alt) 45%,transparent);border-style:dashed}

footer{padding:44px 0 0;color:var(--ink3);font-size:12.5px;max-width:70ch}
footer p{margin:0 0 8px}

.toTop{
  position:fixed;right:18px;bottom:18px;z-index:5;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;
  background:var(--surface2);color:var(--ink);border:1px solid var(--rule);
  border-radius:5px;padding:8px 11px;cursor:pointer;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.toTop.on{opacity:1;pointer-events:auto}
.toTop:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:1080px){
  .app{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:20px clamp(20px,3.4vw,54px)}
  .rail-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 22px}
  .rail-group{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:15px}
  .stat{padding-right:18px;margin-right:18px}
  .actores b{width:auto}
  .actores div{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .rail,.toTop{display:none}
  .app{grid-template-columns:1fr}
  .flow{break-inside:avoid}
}

/* ---------- marca Rebl ---------- */
.rail-brand{display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.rebl-mark{display:block;width:78px;height:auto;color:var(--ink)}
.rail-brand .doc{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink3);
}
.rail-brand .doc b{color:var(--accent);font-weight:600}
footer .rebl-mark{width:62px;margin:0 0 12px;color:var(--ink3)}