/* =============================================================================
   Raíces — hoja de estilo común (árbol + administración)

   La idea visual viene del original: papel cuadriculado, lápiz grafito, tinta
   azul para lo que se puede tocar y rojo apagado para lo que está en duda.
   ============================================================================= */

:root{
  --paper:#EFF1EC; --paper2:#F7F8F5; --panel:#E7EAE4;
  --rule:#C6D2CF; --rule-strong:#A9B8B6;
  --graphite:#2A2E33; --graphite2:#5E666E; --graphite3:#858E93;
  --ink:#1D3557; --ink-soft:#3E6394;
  --red:#8C2F39; --verde:#2F6B4F; --ambar:#8A6516;
  --grid1:rgba(120,150,150,.16); --grid2:rgba(120,150,150,.30);
  --shadow:0 1px 0 rgba(40,50,55,.06), 0 6px 18px -12px rgba(30,45,60,.35);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono","Liberation Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#13171B; --paper2:#1A1F25; --panel:#171C21;
    --rule:#2C363D; --rule-strong:#3C4952;
    --graphite:#DFE4E2; --graphite2:#9AA5AA; --graphite3:#6F7B82;
    --ink:#8DB2DD; --ink-soft:#6C93C2;
    --red:#D98E92; --verde:#7FBF9C; --ambar:#D7B268;
    --grid1:rgba(120,160,175,.07); --grid2:rgba(120,160,175,.13);
    --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#13171B; --paper2:#1A1F25; --panel:#171C21;
  --rule:#2C363D; --rule-strong:#3C4952;
  --graphite:#DFE4E2; --graphite2:#9AA5AA; --graphite3:#6F7B82;
  --ink:#8DB2DD; --ink-soft:#6C93C2;
  --red:#D98E92; --verde:#7FBF9C; --ambar:#D7B268;
  --grid1:rgba(120,160,175,.07); --grid2:rgba(120,160,175,.13);
  --shadow:0 1px 0 rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --paper:#EFF1EC; --paper2:#F7F8F5; --panel:#E7EAE4;
  --rule:#C6D2CF; --rule-strong:#A9B8B6;
  --graphite:#2A2E33; --graphite2:#5E666E; --graphite3:#858E93;
  --ink:#1D3557; --ink-soft:#3E6394;
  --red:#8C2F39; --verde:#2F6B4F; --ambar:#8A6516;
  --grid1:rgba(120,150,150,.16); --grid2:rgba(120,150,150,.30);
  --shadow:0 1px 0 rgba(40,50,55,.06), 0 6px 18px -12px rgba(30,45,60,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; color:var(--graphite); font-family:var(--serif); font-size:16px; line-height:1.5;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to right, var(--grid1) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--grid1) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to right, var(--grid2) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(to bottom, var(--grid2) 0 1px, transparent 1px 130px);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px 96px}
section{margin-top:44px;scroll-margin-top:76px}
[hidden]{display:none !important}

/* ------------------------------------------------------------- tipografía --*/
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.06;margin:0 0 14px;font-weight:600;
   letter-spacing:-.012em;text-wrap:balance;max-width:16em}
h1 em{font-style:normal;color:var(--graphite3)}
h2{font-size:24px;margin:0;font-weight:600;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
   color:var(--ink);margin:0 0 14px}
.lede{margin:0;max-width:60ch;color:var(--graphite2);font-size:17px}
.sec-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule-strong);
   padding-bottom:8px;margin-bottom:8px}
.sec-head .doc{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
   color:var(--graphite3);margin-left:auto;white-space:nowrap}
.sec-note{font-size:14.5px;color:var(--graphite2);margin:10px 0 18px;max-width:62ch}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- header --*/
header{padding:40px 0 22px;border-bottom:1px solid var(--rule-strong)}
.barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.barra .sp{margin-left:auto}
.marca{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
   color:var(--ink);text-decoration:none;font-weight:600}
.quien{font-family:var(--mono);font-size:11.5px;color:var(--graphite3)}
.quien b{color:var(--graphite2);font-weight:600}

.stats{display:flex;flex-wrap:wrap;gap:0;margin-top:26px;border:1px solid var(--rule-strong);
   background:var(--paper2)}
.stat{flex:1 1 130px;padding:12px 16px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;
   font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
   color:var(--graphite3)}

/* --------------------------------------------------------------- controles --*/
button.b, .b{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 12px;background:var(--paper2);color:var(--graphite2);
  border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
  text-decoration:none;display:inline-block;
}
button.b:hover,.b:hover{color:var(--ink);border-color:var(--ink-soft)}
button.b:focus-visible,.b:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
button.b[aria-pressed="true"]{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
button.b:disabled{opacity:.45;cursor:not-allowed}
button.b.pri{background:var(--ink);color:var(--paper2);border-color:var(--ink)}
button.b.pri:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:var(--paper2)}
button.b.danger{color:var(--red);border-color:var(--red)}

input[type=text],input[type=email],input[type=search],textarea,select{
  width:100%;padding:9px 11px;font-family:var(--mono);font-size:13px;
  color:var(--graphite);background:var(--paper2);
  border:1px solid var(--rule-strong);border-radius:2px;
}
textarea{font-family:var(--serif);font-size:15px;line-height:1.45;resize:vertical;min-height:76px}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
label.campo{display:block;margin:12px 0}
label.campo > span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
   text-transform:uppercase;color:var(--graphite3);margin-bottom:5px}
.ayuda{font-size:13px;color:var(--graphite3);margin:5px 0 0}

.toolbar{position:sticky;top:0;z-index:40;margin:0 -20px;padding:12px 20px;
   background:color-mix(in srgb, var(--paper) 88%, transparent);
   backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
   display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.search{position:relative;flex:1 1 260px;min-width:0}
.search input{padding-left:32px}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;
   stroke:var(--graphite3);fill:none;stroke-width:1.6}
.hits{font-family:var(--mono);font-size:12px;color:var(--graphite3);white-space:nowrap}

/* ------------------------------------------------------------------ árbol --*/
nav.troncos{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
nav.troncos a{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-decoration:none;
   color:var(--graphite2);border:1px solid var(--rule-strong);border-radius:2px;
   padding:6px 10px;background:var(--paper2)}
nav.troncos a:hover{color:var(--ink);border-color:var(--ink-soft)}

.tree{margin-top:6px}
.kids{margin:0;padding:0;list-style:none}
.node{position:relative;padding-left:26px}
.node::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px solid var(--rule-strong)}
.node:last-child::before{bottom:auto;height:23px}
.node::after{content:"";position:absolute;left:0;top:23px;width:26px;border-top:1.5px solid var(--rule-strong)}
.tree > .kids > .node{padding-left:0}
.tree > .kids > .node::before,.tree > .kids > .node::after{display:none}
.node.closed > .kids{display:none}
.node.closed > .card .toggle::after{content:"+";margin-left:1px}

.card{display:flex;align-items:flex-start;gap:2px;flex-direction:column;
   background:var(--paper2);border:1px solid var(--rule-strong);border-radius:2px;
   padding:8px 12px 9px;margin:5px 0;box-shadow:var(--shadow);position:relative;max-width:640px}
.card.is-root{border-color:var(--ink);border-left-width:3px}
.card.hit{border-color:var(--ink);box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 22%,transparent),var(--shadow)}
.card.dim{opacity:.34}
.card.pend{border-left:3px solid var(--ambar)}

.pers{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer;width:100%;
   background:none;border:0;padding:1px 0;font:inherit;color:inherit;text-align:left}
.pers:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.nm{font-size:16.5px;letter-spacing:.005em}
.nm .sur{font-variant-caps:all-small-caps;letter-spacing:.06em;font-weight:600}
.pers.unnamed .nm{color:var(--graphite3);font-style:italic}
.pers:hover .nm{color:var(--ink)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--graphite3);font-variant-numeric:tabular-nums}
.meta i{font-style:normal;color:var(--graphite2)}
.joiner{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
   color:var(--graphite3);padding:1px 0}

.flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
   border:1px solid currentColor;border-radius:2px;padding:0 4px;line-height:1.5}
.flag.q{color:var(--red)}
.flag.nk{color:var(--graphite3)}
.flag.pend{color:var(--ambar)}
.flag.ok{color:var(--verde)}

.toggle{position:absolute;right:8px;top:8px;width:26px;height:22px;
   font-family:var(--mono);font-size:10.5px;color:var(--graphite3);
   background:var(--panel);border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
   display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.toggle:hover{color:var(--ink);border-color:var(--ink-soft)}
.toggle:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ------------------------------------------------------------- panel lateral --*/
.drawer{position:fixed;right:0;top:0;height:100%;width:min(420px,94vw);z-index:60;
   background:var(--paper2);border-left:1px solid var(--rule-strong);
   box-shadow:-12px 0 40px -24px rgba(20,30,40,.6);
   transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;padding:22px 22px 60px}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer h3{margin:0 0 2px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.drawer .sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);margin-bottom:18px}
.drawer dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 18px;font-size:14px}
.drawer dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);padding-top:3px}
.drawer dd{margin:0}
.drawer .note{font-size:14px;color:var(--graphite2);border-left:2px solid var(--ink);
   padding-left:12px;margin:0 0 18px}
.drawer .note.warn{border-color:var(--red)}
.drawer .rel a{display:block;font-size:15px;color:var(--ink);text-decoration:none;padding:3px 0;
   border-bottom:1px solid var(--rule);cursor:pointer}
.drawer .rel a:hover{text-decoration:underline}
.drawer .close{position:absolute;right:14px;top:14px}
.scrim{position:fixed;inset:0;background:rgba(15,22,28,.35);z-index:55;opacity:0;
   pointer-events:none;transition:opacity .22s}
.scrim.on{opacity:1;pointer-events:auto}

/* --------------------------------------------------------------- tarjetas --*/
.caja{border:1px solid var(--rule-strong);background:var(--paper2);padding:16px 18px;
   margin:12px 0;max-width:72ch;box-shadow:var(--shadow)}
.caja.acento{border-left:3px solid var(--ink)}
.caja.duda{border-left:3px solid var(--red)}
.caja.resuelta{opacity:.6}
.caja .t{font-size:16.5px;font-weight:600;margin:0}
.caja .d{font-size:14.5px;color:var(--graphite2);margin:6px 0 0}
.caja .pie{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}

/* diff de una propuesta: lo viejo tachado, lo nuevo en tinta */
.diff{font-family:var(--mono);font-size:13px;margin:10px 0;display:grid;
   grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.diff dt{color:var(--graphite3);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.diff dd{margin:0}
.diff .viejo{color:var(--graphite3);text-decoration:line-through;text-decoration-thickness:1px}
.diff .nuevo{color:var(--ink);font-weight:600}
.diff .vacio{font-style:italic;color:var(--graphite3);text-decoration:none}

/* ------------------------------------------------------------------ avisos --*/
.aviso{border:1px solid var(--rule-strong);border-left:3px solid var(--ink);background:var(--paper2);
   padding:12px 16px;margin:14px 0;font-size:14.5px;max-width:72ch}
.aviso.mal{border-left-color:var(--red);color:var(--red)}
.aviso.bien{border-left-color:var(--verde)}
.vacio-msg{color:var(--graphite3);font-style:italic;padding:18px 0}

.cargando{color:var(--graphite3);font-family:var(--mono);font-size:12px;padding:24px 0}
.cargando::after{content:"";display:inline-block;width:1ch;animation:pts 1.2s steps(4) infinite}
@keyframes pts{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.cargando::after{animation:none;content:"..."}}

/* ------------------------------------------------------------------ tablas --*/
.tabla-scroll{overflow-x:auto;margin:12px 0}
table.datos{border-collapse:collapse;font-size:14px;width:100%;min-width:520px}
table.datos th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
   color:var(--graphite3);text-align:left;padding:6px 14px 6px 0;border-bottom:1px solid var(--rule-strong)}
table.datos td{padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.datos tr:hover td{background:var(--panel)}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--rule-strong);
   font-size:13.5px;color:var(--graphite3);max-width:70ch}
footer code{font-family:var(--mono);font-size:12.5px;color:var(--graphite2)}

@media (max-width:560px){
  .wrap{padding:0 14px 72px}
  .drawer{width:100vw}
  .node{padding-left:18px}
  .node::after{width:18px}
}