/* =====================================================================
   Tablero · Máquina Creadora de Negocios
   Archivo (títulos) · IBM Plex Sans (texto) · IBM Plex Mono (números)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  color-scheme:light;
  --paper:#EDEAE5;
  --surface:#F6F4F1;
  --sunk:#E3DFD9;
  --ink:#191411;
  --ink-2:#4A4340;
  --ink-3:#7C736E;
  --line:#D4CEC6;
  --line-soft:#E0DAD3;
  --ember:#BF3626;
  --ember-soft:#F0DAD6;
  --forest:#2F6B4F;
  --forest-soft:#D9E6DE;
  --amber:#9A6B18;
  --amber-soft:#F0E4CC;
  --slate:#8A817B;
  --slate-soft:#E4DFD9;

  --f-disp:'Archivo',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#141110; --surface:#1C1817; --sunk:#0E0C0B;
    --ink:#EDE8E3; --ink-2:#B5ACA6; --ink-3:#877D77;
    --line:#312B28; --line-soft:#252120;
    --ember:#E06455; --ember-soft:#3A1D18;
    --forest:#5FAE86; --forest-soft:#17301F;
    --amber:#D2A044; --amber-soft:#332616;
    --slate:#8A817B; --slate-soft:#232020;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#141110; --surface:#1C1817; --sunk:#0E0C0B;
  --ink:#EDE8E3; --ink-2:#B5ACA6; --ink-3:#877D77;
  --line:#312B28; --line-soft:#252120;
  --ember:#E06455; --ember-soft:#3A1D18;
  --forest:#5FAE86; --forest-soft:#17301F;
  --amber:#D2A044; --amber-soft:#332616;
  --slate:#8A817B; --slate-soft:#232020;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:980px; margin:0 auto; padding-inline:20px; padding-block:0 72px}

/* ---------- la puerta de entrada ---------- */
body.portal{display:grid; place-items:center; min-height:100vh; padding:24px}
.acceso{
  width:100%; max-width:330px; display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); background:var(--surface); padding:30px 26px 28px;
}
.acceso h1{font-family:var(--f-disp); font-weight:700; font-size:30px; letter-spacing:-.02em; margin:0}
.acceso p{margin:0 0 6px; font-size:13.5px; color:var(--ink-2)}
.acceso input{
  font-family:var(--f-body); font-size:15px; padding:11px 13px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:2px;
}
.acceso input:focus{outline:2px solid var(--ember); outline-offset:1px; border-color:transparent}
.acceso button{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px; border:0; border-radius:2px; cursor:pointer;
  background:var(--ember); color:#fff; font-weight:600;
}
.acceso button:hover{filter:brightness(1.08)}
.mal{font-family:var(--f-mono); font-size:11.5px; color:var(--ember); letter-spacing:.04em}

/* ---------- cabecera ---------- */
header.top{
  border-bottom:1px solid var(--line); padding-block:26px 20px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.marca{display:flex; flex-direction:column; gap:3px}
.acciones{display:flex; gap:8px; flex-wrap:wrap}
.eyebrow{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
h1{
  font-family:var(--f-disp); font-weight:700; font-size:clamp(26px,5.2vw,36px);
  letter-spacing:-.02em; margin:0; line-height:1.05; text-wrap:balance;
}
.sub{color:var(--ink-2); font-size:13.5px; max-width:44ch}
.tema{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--line); color:var(--ink-2);
  padding:7px 12px; border-radius:2px; cursor:pointer; white-space:nowrap;
  text-decoration:none; display:inline-block;
}
.tema:hover{border-color:var(--ink-3); color:var(--ink)}
.tema:focus-visible{outline:2px solid var(--ember); outline-offset:2px}

/* ---------- las tres verdades ---------- */
.verdades{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line)}
.verdad{padding:22px 22px 24px; border-right:1px solid var(--line-soft)}
.verdad:last-child{border-right:none}
.verdad h2{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.cifra{
  font-family:var(--f-disp); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(30px,6vw,44px); line-height:1; font-variant-numeric:tabular-nums;
}
.cifra small{font-size:.44em; font-weight:600; letter-spacing:0; color:var(--ink-3); margin-left:4px}
.pie{font-size:12.5px; color:var(--ink-2); margin-top:9px; line-height:1.45}
.pie b{font-weight:600; color:var(--ink)}
.barra-vida{height:3px; background:var(--sunk); margin-top:14px; position:relative; overflow:hidden}
.barra-vida i{position:absolute; inset:0 auto 0 0; background:var(--ember); display:block}

/* ---------- secciones ---------- */
section{padding-block:34px 0}
.rotulo{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.rotulo h2{font-family:var(--f-disp); font-weight:600; font-size:19px; letter-spacing:-.01em; margin:0}
.rotulo p{margin:0; font-size:12.5px; color:var(--ink-3); max-width:52ch}

/* ---------- escalera de puertas ---------- */
.escalera{margin-top:18px; border-top:1px solid var(--line)}
.puerta{border-bottom:1px solid var(--line-soft)}
.cabeza{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:grid; grid-template-columns:30px 54px 1fr auto; align-items:center;
  gap:14px; padding:13px 10px 13px 0; color:inherit; font:inherit;
  border-left:3px solid transparent;
}
.cabeza:hover{background:var(--surface)}
.cabeza:focus-visible{outline:2px solid var(--ember); outline-offset:-2px}
.puerta[data-cuello] .cabeza{border-left-color:var(--ember)}
.puerta[data-estado="cerrada"] .cabeza{border-left-color:var(--forest)}
.ord{font-family:var(--f-mono); font-size:11px; color:var(--ink-3); text-align:right; font-variant-numeric:tabular-nums}
.cod{font-family:var(--f-mono); font-size:13px; font-weight:600; letter-spacing:.02em}
.nom{display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0}
.nom > span:first-child{font-weight:500}
.traba{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em; white-space:nowrap}
.marca-cuello{
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ember); border:1px solid var(--ember);
  padding:1px 5px; border-radius:2px; white-space:nowrap;
}
.derecha{display:flex; align-items:center; gap:14px}
.medida{display:flex; align-items:center; gap:11px}
.pista{width:86px; height:6px; background:var(--sunk); position:relative; overflow:hidden}
.pista i{position:absolute; inset:0 auto 0 0; display:block}
.pct{
  font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums;
  width:42px; text-align:right; color:var(--ink-2);
}
.pastilla{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; padding:3px 8px; border-radius:2px; white-space:nowrap;
  width:92px; text-align:center;
}
.flecha{font-size:11px; color:var(--ink-3); width:12px; transition:transform .15s}
.puerta[data-abierta] .flecha{transform:rotate(90deg)}

[data-estado="cerrada"] .pastilla{background:var(--forest-soft); color:var(--forest)}
[data-estado="cerrada"] .pista i{background:var(--forest)}
[data-estado="en_curso"] .pastilla{background:var(--amber-soft); color:var(--amber)}
[data-estado="en_curso"] .pista i{background:var(--amber)}
[data-estado="abierta"] .pastilla{background:var(--slate-soft); color:var(--ink-2)}
[data-estado="abierta"] .pista i{background:var(--slate)}
[data-estado="bloqueada"] .pastilla{background:var(--ember-soft); color:var(--ember)}
[data-estado="bloqueada"] .pista i{background:var(--ember)}
[data-estado="dormida"] .pastilla{background:var(--slate-soft); color:var(--ink-3)}
[data-estado="dormida"] .pista i{background:var(--slate); opacity:.55}

.detalle{padding:2px 10px 22px 101px; max-width:74ch}
.detalle p.que{font-size:13.5px; color:var(--ink-2); margin:0 0 14px}
.detalle h3{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 7px;
}
ul.criterios{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
ul.criterios li{display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start; font-size:13.5px}
ul.criterios li em{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--ember); line-height:1.5}
.sin-catalogo{font-size:13px; color:var(--ink-3); font-style:italic; border-left:2px solid var(--line); padding-left:12px}

/* ---------- grafo ---------- */
.grafo-caja{margin-top:18px; border:1px solid var(--line); background:var(--surface); overflow-x:auto}
.grafo-caja svg{display:block; min-width:640px; width:100%; height:auto}
.leyenda{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.leyenda span{display:flex; align-items:center; gap:6px}
.leyenda i{width:18px; height:0; border-top:2px solid var(--ink-3); display:block}
.leyenda i.blanda{border-top-style:dashed}

/* ---------- tareas ---------- */
.tanda{margin-top:22px}
.tanda > h3{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 2px;
}
.tanda > p{margin:0 0 12px; font-size:12.5px; color:var(--ink-3)}
.tarea{
  display:grid; grid-template-columns:44px 1fr auto; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line-soft);
}
.tarea:last-child{border-bottom:1px solid var(--line-soft)}
.tarea .p{font-family:var(--f-mono); font-size:11.5px; font-weight:600; color:var(--ink-3)}
.tarea .t{font-size:14px; line-height:1.4}
.tarea .porque{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; max-width:62ch}
.tarea .min{font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.aai{
  display:inline-block; font-family:var(--f-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; color:var(--ember); border:1px solid var(--ember);
  padding:0 4px; border-radius:2px; margin-left:8px; vertical-align:2px;
}
.aai.hoy{color:var(--forest); border-color:var(--forest)}

/* ---------- obra ---------- */
.obra{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); margin-top:18px;
}
.celda{background:var(--paper); padding:16px 18px}
.celda .n{font-family:var(--f-disp); font-weight:700; font-size:27px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.celda .l{font-size:12.5px; color:var(--ink-2); margin-top:3px}
.celda .x{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-top:8px}

.nota{
  margin-top:26px; border-left:3px solid var(--ember); padding:2px 0 2px 16px;
  font-size:13.5px; color:var(--ink-2); max-width:62ch;
}
.nota b{color:var(--ink); font-weight:600}

footer{
  margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}

@media (max-width:720px){
  .verdades{grid-template-columns:1fr}
  .verdad{border-right:none; border-bottom:1px solid var(--line-soft); padding:18px 0 20px}
  .verdad:last-child{border-bottom:none}
  .cabeza{grid-template-columns:26px 44px 1fr; gap:10px; row-gap:9px; padding-right:0}
  .derecha{grid-column:1/-1; justify-content:space-between; padding-left:80px}
  .flecha{display:none}
  .detalle{padding-left:80px}
  .tarea{grid-template-columns:38px 1fr; row-gap:4px}
  .tarea .min{grid-column:2; text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}