/* Open Cuadra · la lectura. Tokens de marca de la versión cero (grafito, marfil, cobre).
   Ningún color es veredicto: los estados se distinguen por texto e ícono. */
:root{
  --marfil:#FAF8F3; --papel:#FFFFFF; --tinta:#20242A; --tinta2:#565C64;
  --linea:#E4E0D5; --linea2:#D5D0C3; --cobre:#B45309; --cobre2:#8A3F06;
  --velo:#F4E9DC; --velo2:#FBF3EA; --piedra:#666C73; --campo:#F1EEE6;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --col:560px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfil);color:var(--tinta);font-family:var(--sans);font-size:15.5px;line-height:1.6}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:var(--cobre2)}
.mono{font-family:var(--mono);font-size:.92em}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cobre);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.marca{font-family:var(--serif);font-size:22px;font-weight:600}
.kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cobre2);font-weight:650;margin-bottom:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:9px 15px;min-height:42px;font-size:12.5px;font-weight:700;white-space:nowrap;border:1.3px solid var(--tinta);background:transparent;color:var(--tinta)}
.btn:hover{background:var(--tinta);color:#fff}
.btn.primario{background:var(--tinta);color:#fff}
.btn.primario:hover{background:var(--cobre2);border-color:var(--cobre2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:transparent;color:var(--tinta)}
.btn.primario:disabled:hover{background:var(--tinta);color:#fff}
.campo{display:block;font-size:12px;font-weight:650;color:var(--tinta2);margin:10px 0 4px}
input[type=text],select{width:100%;padding:10px 12px;border:1px solid var(--linea2);border-radius:10px;font:inherit;background:var(--papel);color:var(--tinta)}

/* ------------------------------------------------ disposición */
.app{display:grid;grid-template-columns:minmax(0,var(--col)) 1fr;min-height:100vh}
.relato{padding:22px 20px 40px;background:var(--marfil);overflow-y:auto;max-height:100vh}
.escena{position:relative;background:var(--campo)}
#mapa{position:sticky;top:0;height:100vh;width:100%}
.sin-mapa{padding:24px;color:var(--tinta2);font-size:14px}
.sobre-mapa{position:absolute;top:10px;left:54px;right:10px;z-index:1000;padding:8px 12px;background:var(--papel);border:1px solid var(--linea2);border-radius:10px}
details.tecnico{margin-top:8px;font-size:12.5px;color:var(--tinta2)}
details.tecnico summary{cursor:pointer}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .relato{max-height:none;overflow:visible;padding:18px 16px 40px}
  #mapa{position:relative;height:42vh;min-height:260px}
}

/* ------------------------------------------------ cabecera y señal */
.cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.aviso-superficie{font-size:13px;color:var(--tinta2);margin-bottom:16px}
.senal{background:var(--papel);border:1px solid var(--linea2);border-radius:16px;padding:16px 18px;margin-bottom:18px}
.senal h1{font-family:var(--serif);font-size:24px;line-height:1.2;font-weight:600;margin-bottom:6px;text-wrap:balance}
.senal p.ayuda{font-size:13.5px;color:var(--tinta2);margin-bottom:10px}
.senal .fila{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.senal .acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.candidatos{margin-top:12px;border-top:1px solid var(--linea);padding-top:10px}
.candidatos li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea)}
.candidatos .sin-copia{color:var(--tinta2)}
.estado-senal{font-size:13.5px;color:var(--tinta2);margin-top:10px}

/* ------------------------------------------------ lectura */
.lectura{background:var(--papel);border:1px solid var(--linea2);border-radius:16px;padding:18px;margin-bottom:18px}
.fecha-primero{border-left:3px solid var(--cobre);padding:8px 12px;margin-bottom:16px;background:var(--velo2)}
.fecha-primero p{font-size:14.5px}
.fecha-primero .corte{font-family:var(--serif);font-size:18px;font-weight:600}
.lectura h2{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;margin:18px 0 8px;text-wrap:balance}
.lectura h2:first-of-type{margin-top:4px}
.falta{background:var(--velo);border-radius:12px;padding:12px 14px}
.falta .frase{font-weight:650}
.falta .quien,.falta .porque{font-size:13.5px;color:var(--tinta2);margin-top:4px}
.que-hay li{list-style:none;padding:8px 0;border-bottom:1px solid var(--linea)}
.que-hay .dim{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobre2);font-weight:650;display:block}
.hasta-donde{list-style:none;padding:0}
.hasta-donde li{padding:10px 0;border-bottom:1px solid var(--linea)}
.hasta-donde button{all:unset;display:block;width:100%;cursor:pointer}
.hasta-donde .nota{display:block;font-size:15px}
.hasta-donde .tecnico{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--tinta2);margin-top:3px}
.hasta-donde .estado{font-family:var(--mono);font-size:12px;border:1px solid var(--linea2);border-radius:6px;padding:0 6px}
.hasta-donde .icono{margin-right:6px}
/* Lectura por partes (#41): lo que sigue leyendo se distingue por texto e ícono; el latido es un apoyo y se apaga
   con prefers-reduced-motion. */
.hasta-donde li.leyendo .nota{color:var(--tinta2)}
.hasta-donde li.leyendo .icono{display:inline-block;animation:latido 1.6s ease-in-out infinite}
.dimension .leyendo{color:var(--tinta2)}
@keyframes latido{50%{opacity:.35}}
.pie-lectura{font-size:13px;color:var(--tinta2);margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.simulacion{font-size:12.5px;color:var(--cobre2);font-weight:650}

/* ------------------------------------------------ dimensión abierta */
.dimension{background:var(--papel);border:1px solid var(--linea2);border-radius:16px;padding:18px;margin-bottom:18px}
.dimension h2{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.2}
.dimension .pregunta{color:var(--tinta2);font-size:14px;margin-bottom:10px}
.fuente{border-top:1px solid var(--linea);padding:12px 0}
.fuente h3{font-size:15px;font-weight:650}
.fuente dl{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;font-size:13.5px;margin-top:6px}
.fuente dt{color:var(--tinta2)}
.fuente .no-afirma{font-weight:650}
.discrepancia{background:var(--velo);border-radius:12px;padding:12px;margin-top:10px}
.discrepancia .lado{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.discrepancia .lado>div{background:var(--papel);border-radius:8px;padding:8px;font-size:13.5px}
.declarado{background:var(--velo2);border-radius:12px;padding:12px;font-size:14px}

/* ------------------------------------------------ hoja de vida */
.hoja{background:var(--papel);border:1px solid var(--linea2);border-radius:16px;padding:18px;margin-bottom:18px}
.hoja h2{font-family:var(--serif);font-size:21px;font-weight:600}
.linea-tiempo{list-style:none;padding:0;margin-top:8px;border-left:2px solid var(--linea2)}
.linea-tiempo li{padding:8px 0 8px 14px;position:relative}
.linea-tiempo li::before{content:"";position:absolute;left:-6px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--cobre);}
.linea-tiempo li.lectura-hecho::before{background:var(--tinta)}
.linea-tiempo .cuando{font-family:var(--mono);font-size:12.5px;color:var(--tinta2)}
.linea-tiempo .vida{font-size:12.5px;color:var(--tinta2)}
.nota-fija{font-size:13px;color:var(--tinta2);margin-top:12px}

/* ------------------------------------------------ paneles */
.panel{background:var(--papel);border:1px solid var(--linea2);border-radius:16px;padding:16px 18px;margin-bottom:18px}
.panel h2{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px}
.panel p,.panel li{font-size:14px}
.niveles{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.niveles label{font-size:13px;color:var(--tinta2)}
.verdad{margin-top:10px;font-size:13.5px}
.verdad.ok{color:#2F5D3A;font-weight:650}
.verdad.falla{color:#8A1C1C;font-weight:650}
.encontrar .fila{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.resultado li{list-style:none;display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--linea)}
.cobertura-mini{font-family:var(--mono);font-size:12px;color:var(--tinta2)}
.contexto li{list-style:none;font-size:13.5px;padding:6px 0;border-bottom:1px solid var(--linea)}
.pie{font-size:12.5px;color:var(--tinta2);margin-top:24px}
@media (max-width:480px){
  .encontrar .fila{grid-template-columns:1fr}
  .discrepancia .lado{grid-template-columns:1fr}
  .fuente dl{grid-template-columns:1fr}
}
.credito{display:block;font-size:12px;color:var(--tinta2);margin-top:2px}