/* Oilstone · Mallas de inyección — tokens y componentes (sin dependencias; ver docs/auditoria-producto/F_estado_objetivo.md)
   Regla: todo texto >= 4,5:1 sobre su fondo en claro y oscuro. Los colores de nivel vivos son para relleno; el texto usa *-ink. */
:root{
  /* superficies */ --bg:#f5f6f8; --panel:#ffffff; --panel-2:#eef1f5; --map:#fbfbfc; --line:#dfe3ea; --line-strong:#c3c9d4;
  /* texto */       --ink:#1b2130; --ink-2:#3b4354; --muted:#5c6474; --on-accent:#ffffff;
  /* acción */      --accent:#1f5fbf; --accent-hover:#194f9f; --accent-soft:#e6eefb; --focus:#2f6fe0;
  /* semántica */   --ok:#1d7a3c; --ok-ink:#1d7339; --danger:#c62828; --danger-ink:#b3261e; --ref:#7b4fd6; --ref-ink:#6a3fc4;
  /* niveles */     --nivel-verde:#2e9d4f; --nivel-amarillo:#d9a400; --nivel-naranja:#e8711a;
                    --verde-ink:#1d7339; --amarillo-ink:#7d5c00; --naranja-ink:#a3460a;
  /* mapa */        --falla:#1b2130; --falla-off:#8a92a3; --map-alcance:rgba(31,95,191,.05); --descartada:#8a92a3;
                    --serie-petroleo:#2e9d4f; --serie-agua:#2f7fd1; --serie-iny:#e8711a;
  /* tipografía */  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
                    --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px;
  /* espacio */     --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  /* forma */       --radius-sm:6px; --radius:10px; --radius-lg:14px; --shadow:0 1px 2px rgba(20,30,50,.06),0 2px 8px rgba(20,30,50,.05);
  --shadow-lg:0 10px 40px rgba(10,15,25,.22); --dur:120ms;
  --header:52px; --left:272px; --right:340px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12151b; --panel:#1a1e26; --panel-2:#232934; --map:#151920; --line:#2c3340; --line-strong:#3c4554;
    --ink:#e6e9ef; --ink-2:#c9cfda; --muted:#a3abba; --on-accent:#ffffff;
    --accent:#3a6fd8; --accent-hover:#4d7fe3; --accent-soft:#1f2b44; --focus:#7aa6ff;
    --ok:#23874a; --ok-ink:#5fcf84; --danger:#d33a2f; --danger-ink:#ff8a80; --ref:#a07cf0; --ref-ink:#b99cf5;
    --verde-ink:#5fcf84; --amarillo-ink:#e8bd42; --naranja-ink:#f59a57;
    --falla:#e6e9ef; --falla-off:#6b7385; --map-alcance:rgba(122,166,255,.07); --descartada:#7d8597;
    --serie-agua:#5aa2ef; --shadow:none; --shadow-lg:0 10px 40px rgba(0,0,0,.5);
  }
}

/* ---------- base */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:var(--fs-14)/1.4 var(--font)}
[hidden]{display:none !important}
h2{font-size:var(--fs-16);margin:0 0 var(--sp-2)}
h3{font-size:var(--fs-12);margin:0 0 var(--sp-2);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
p{margin:0 0 var(--sp-2)}
code{font-size:var(--fs-12);background:var(--panel-2);padding:1px 4px;border-radius:4px;word-break:break-all}
.muted{color:var(--muted)} .small{font-size:var(--fs-12)} .num{text-align:right;font-variant-numeric:tabular-nums}
.err{color:var(--danger-ink);font-size:var(--fs-12)} .err:empty{display:none}
.mt-1{margin-top:var(--sp-1)} .mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mb-2{margin-bottom:var(--sp-2)} .m-0{margin:0}
.grow{flex:1;min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- botones */
button{font:inherit;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);border-radius:8px;padding:6px 12px;cursor:pointer;
  transition:background var(--dur)}
button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
button.ghost:hover:not(:disabled){background:var(--panel-2);border-color:var(--line-strong)}
button.ok{background:var(--ok);border-color:var(--ok)} button.ok:hover:not(:disabled){background:var(--ok);filter:brightness(1.1)}
button.danger{background:var(--danger);border-color:var(--danger)} button.danger:hover:not(:disabled){background:var(--danger);filter:brightness(1.1)}
button.link{background:none;border:none;color:var(--accent);padding:0;text-decoration:underline;text-underline-offset:2px}
button.link:hover:not(:disabled){background:none;color:var(--accent-hover)}
button.icon{padding:4px 8px;min-width:30px}
button.sm{padding:3px 9px;font-size:var(--fs-12)}
a{color:var(--accent);text-underline-offset:2px}
@media (prefers-color-scheme: dark){button.link,a{color:var(--focus)}}

/* ---------- campos */
input,select,textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line-strong);border-radius:7px;padding:5px 8px;width:100%}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent)}
input[type=range]{padding:0;accent-color:var(--accent)}
input[aria-invalid=true]{border-color:var(--danger)}
label{display:block;margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--fs-12)}
label.check{display:flex;gap:6px;align-items:flex-start;color:var(--ink);font-size:var(--fs-13)}
label.check input{margin-top:3px}
label.file{display:inline-block;border:1px dashed var(--line-strong);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--ink);font-size:var(--fs-13)}
label.file:focus-within{outline:2px solid var(--focus);outline-offset:2px}
label.file input{position:absolute;opacity:0;width:1px;height:1px}
.campo-err{display:block;color:var(--danger-ink);font-size:var(--fs-12);margin-top:3px}
.ayuda{display:block;color:var(--muted);font-size:var(--fs-12);margin-top:3px}

/* ---------- segmentado y chips */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{background:transparent;color:var(--ink);border:none;border-radius:0;padding:5px 10px;font-size:var(--fs-12)}
.seg button+button{border-left:1px solid var(--line-strong)}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}
.seg button:hover:not(:disabled):not([aria-pressed=true]){background:var(--panel-2)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:2px 10px;font-size:var(--fs-12);background:var(--panel);color:var(--ink);line-height:1.5}
.chip:hover:not(:disabled){background:var(--panel-2);border-color:var(--line-strong)}
.chip.on,.chip[aria-pressed=true]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.chip.on:hover,.chip[aria-pressed=true]:hover{background:var(--ink-2);border-color:var(--ink-2)}
.chip.token .x{margin-left:5px;opacity:.75}
.chip.ctx{background:var(--accent-soft);border-color:transparent;color:var(--ink)}

/* ---------- login (marca Oilstone: azules de oilstone.com.ar; el panel de marca es oscuro en ambos temas) */
body.login{--marca-1:#003f62;--marca-2:#005884;--marca-cian:#00aeef;--marca-boton:#005884;--marca-boton-hover:#003f62}
@media (prefers-color-scheme: dark){body.login{--marca-boton:#0b6a9c;--marca-boton-hover:#0d7ab3}}
.login-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr);min-height:100%}
.login-marca{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-4);padding:48px 56px;
  color:#fff;overflow:hidden;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='208' viewBox='0 0 240 208'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M0 0L60 104L120 0L180 104L240 0M0 208L60 104L120 208L180 104L240 208M0 104H240M0 0H240'/%3E%3C/g%3E%3Cg fill='%2300aeef' fill-opacity='.35'%3E%3Ccircle cx='60' cy='104' r='3'/%3E%3Ccircle cx='180' cy='104' r='3'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='120' cy='0' r='2'/%3E%3Ccircle cx='240' cy='0' r='2'/%3E%3Ccircle cx='0' cy='208' r='2'/%3E%3Ccircle cx='120' cy='208' r='2'/%3E%3Ccircle cx='240' cy='208' r='2'/%3E%3C/g%3E%3C/svg%3E") center/240px 208px,linear-gradient(150deg,var(--marca-2) 0%,var(--marca-1) 70%)}
.login-marca::after{content:"";position:absolute;inset:auto -20% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,174,239,.22),transparent 65%);pointer-events:none}
.login-logo{width:195px;height:auto;position:relative}
.login-intro{position:relative;max-width:460px}
.login-kicker{margin:0 0 var(--sp-2);color:#8fdcf8;font-size:var(--fs-12);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.login-marca h1{margin:0 0 var(--sp-3);font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.login-bajada{margin:0;color:rgba(255,255,255,.86);font-size:16px;line-height:1.55}
.login-pie{position:relative;margin:0;color:rgba(255,255,255,.72);font-size:var(--fs-12)}
.login-panel{display:flex;align-items:center;justify-content:center;padding:48px 24px;background:var(--bg)}
.login-form{width:min(380px,100%)}
.login-form h2{font-size:26px;margin:0 0 var(--sp-1)}
.login-form > p.muted:first-of-type{margin-bottom:var(--sp-4)}
.login-form label{margin-top:var(--sp-3);margin-bottom:6px;color:var(--ink-2);font-size:var(--fs-13);font-weight:600}
.login-form input{padding:10px 12px;border-radius:8px;font-size:15px;transition:border-color var(--dur),box-shadow var(--dur)}
.login-form input:focus{outline:none;border-color:var(--marca-cian);box-shadow:0 0 0 3px rgba(0,174,239,.25)}
.login-form input[aria-invalid=true]{border-color:var(--danger)}
.login-clave{position:relative}
.login-clave input{padding-right:92px}
.login-clave button{position:absolute;top:50%;right:6px;transform:translateY(-50%);padding:4px 10px;font-size:var(--fs-12);border-color:transparent}
.login-aviso{margin:6px 0 0;color:var(--ink-2);font-size:var(--fs-12)}
.login-aviso::before{content:"⇪ ";font-weight:700}
.login-err{margin-top:var(--sp-3);padding:8px 12px;border-radius:8px;background:color-mix(in srgb,var(--danger) 10%,transparent);font-size:var(--fs-13)}
button.login-entrar{width:100%;margin-top:var(--sp-4);padding:11px 16px;font-size:15px;font-weight:600;border-radius:8px;
  background:var(--marca-boton);border-color:var(--marca-boton)}
button.login-entrar:hover:not(:disabled){background:var(--marca-boton-hover);border-color:var(--marca-boton-hover)}
button.login-entrar:disabled{opacity:.75;cursor:progress}
.login-ayuda{margin-top:var(--sp-4);text-align:center}
@media (max-width:820px){
  .login-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .login-marca{padding:28px 24px 32px;gap:var(--sp-3)}
  .login-logo{width:130px}
  .login-marca h1{font-size:28px;margin-bottom:var(--sp-2)}
  .login-bajada{font-size:14px}
  .login-pie{display:none}
  .login-panel{align-items:flex-start;padding:32px 16px}
}

/* ---------- manual (/manual: página de lectura, mismos tokens que la app) */
body.manual{height:auto;min-height:100%}
body.manual .top{position:sticky;top:0;z-index:5}
.manual-volver{white-space:nowrap;font-weight:600}
.manual-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:40px;justify-content:center;padding:32px 24px 80px}
.manual-indice{position:sticky;top:calc(var(--header) + 24px);align-self:start;max-height:calc(100vh - var(--header) - 48px);overflow:auto}
.manual-indice-tit{margin:0 0 var(--sp-2);color:var(--muted);font-size:var(--fs-12);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.manual-indice ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.manual-indice a{display:block;padding:5px 0 5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);
  text-decoration:none;font-size:var(--fs-13)}
.manual-indice a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.manual-cuerpo{font-size:15px;line-height:1.65;color:var(--ink)}
.manual-cuerpo h1{font-size:32px;line-height:1.15;margin:0 0 var(--sp-2)}
.manual-bajada{font-size:17px;color:var(--ink-2);margin-bottom:var(--sp-6)}
.manual-cuerpo section{padding-top:var(--sp-6);margin-top:var(--sp-4);border-top:1px solid var(--line);scroll-margin-top:calc(var(--header) + 8px)}
.manual-cuerpo h2{font-size:22px;margin:0 0 var(--sp-3)}
.manual-cuerpo h3{font-size:16px;text-transform:none;letter-spacing:0;color:var(--ink);margin:var(--sp-6) 0 var(--sp-2)}
.manual-cuerpo p{margin:0 0 var(--sp-3)}
.manual-cuerpo ul,.manual-cuerpo ol{margin:0 0 var(--sp-3);padding-left:22px}
.manual-cuerpo li{margin:4px 0}
.manual-cuerpo table{margin:var(--sp-2) 0 var(--sp-4);font-size:14px;line-height:1.5}
.manual-cuerpo th{position:static;background:none;font-size:var(--fs-12);border-bottom-color:var(--line-strong)}
.manual-cuerpo td,.manual-cuerpo th{padding:8px 10px}
.manual-cuerpo dl.glosario dd{font-size:14px}
.manual-nota{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 var(--sp-3)}
.manual-nota p:last-child,.manual-nota ul:last-child{margin-bottom:0}
.manual-cuerpo td:has(.manual-nivel){white-space:nowrap}
.manual-nivel{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:baseline}
.manual-nivel.verde{background:var(--nivel-verde)} .manual-nivel.amarillo{background:var(--nivel-amarillo)} .manual-nivel.naranja{background:var(--nivel-naranja)}
.manual-figura{margin:0 0 var(--sp-3)}
.manual-figura svg{display:block;width:100%;height:auto}
.f-marco{fill:var(--bg);stroke:var(--line-strong)} .f-barra{fill:var(--panel);stroke:var(--line-strong)}
.f-zona{fill:var(--panel);stroke:var(--line)} .f-mapa{fill:var(--map);stroke:var(--line)}
.f-tit{fill:var(--ink);font:600 13px var(--font)} .f-txt{fill:var(--muted);font:12px var(--font)}
.f-malla{fill:var(--map-alcance);stroke:var(--nivel-verde);stroke-width:1.5}
.f-iny{fill:#1f78c8} .f-prd{fill:var(--ink-2)}
@media print{.manual-indice,body.manual .top{display:none} .manual-layout{display:block;padding:0}}
@media (max-width:900px){
  .manual-layout{grid-template-columns:1fr;gap:var(--sp-4);padding:20px 16px 60px}
  .manual-indice{position:static;max-height:none}
  .manual-cuerpo table{display:block;overflow-x:auto}
  body.manual .brand .muted{display:none}
  body.manual .brand b,body.manual .brand .logo{display:block}
}

/* ---------- corte entre pozos */
.modalbox.corte{width:min(1100px,100%);max-height:calc(100vh - 32px);overflow:auto}
.corte-lienzo{margin-top:var(--sp-2);border:1px solid var(--line);border-radius:8px;background:var(--map)}
#corteCanvas{display:block;width:100%;height:440px}
.corte-estado{margin-top:4px;min-height:1.4em;font-variant-numeric:tabular-nums}
.corte-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;color:var(--ink-2)}
.corte-leyenda .lg{display:inline-block;width:14px;height:8px;margin-right:5px;vertical-align:middle;border-radius:2px}
.lg.punz{background:var(--ink);width:4px;height:12px} .lg.punz.off{opacity:.45}
.lg.sq{background:var(--muted);opacity:.5} .lg.gr{height:2px;background:var(--nivel-verde)} .lg.sp{height:2px;background:var(--danger)}
.lg.falla{height:0;border-top:2px dashed var(--ink);border-radius:0}
.corte-chip{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline}
.corte-ojo{color:var(--danger-ink);font-weight:600}
.corte-med{display:inline-flex;gap:6px;align-items:center;color:var(--ink)} .corte-med select{width:auto}
@media (max-width:700px){#corteCanvas{height:360px}}
/* ---------- layout */
.top{height:var(--header);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);background:var(--panel);border-bottom:1px solid var(--line);min-width:0}
.brand{display:flex;gap:var(--sp-2);align-items:center;white-space:nowrap;min-width:0}
.logo{color:var(--accent)} img.logo{display:block;flex:none}
button.proyecto{color:var(--muted);padding:4px 8px;font-weight:400;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto}
.tabs button{background:none;color:var(--muted);border:none;border-radius:6px;white-space:nowrap}
.tabs button:hover:not(:disabled){background:var(--panel-2);color:var(--ink)}
.tabs button[aria-selected=true]{background:var(--bg);color:var(--ink);font-weight:600}
.badge{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--panel-2);color:var(--ink-2);font-size:var(--fs-11);font-weight:600;line-height:18px;text-align:center}
.badge.warn{background:var(--nivel-naranja);color:#1b1206}
.guardado{font-size:var(--fs-12);color:var(--muted);white-space:nowrap}
.sesion{display:flex;gap:var(--sp-2);align-items:center;white-space:nowrap}
a.boton-ghost{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:8px;padding:3px 9px;font-size:var(--fs-12);
  color:var(--ink);text-decoration:none;white-space:nowrap;transition:background var(--dur)}
a.boton-ghost:hover{background:var(--panel-2)}
.guardado.err{color:var(--danger-ink);font-weight:600}
.layout{display:grid;grid-template-columns:var(--left) minmax(0,1fr) var(--right);height:calc(100% - var(--header));position:relative;overflow:hidden}
.layout.sin-derecho{grid-template-columns:var(--left) minmax(0,1fr)}
.left,.right{overflow:auto;padding:var(--sp-2);display:flex;flex-direction:column;gap:var(--sp-2);background:var(--bg);min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3);box-shadow:var(--shadow)}
.card.wide{margin:var(--sp-3)}
.row{display:flex;gap:var(--sp-2);align-items:center;margin:6px 0} .row.wrap{flex-wrap:wrap} .row label{margin:0} .row select{flex:1}
.center{position:relative;overflow:hidden;min-width:0}
.pane{display:none;height:100%} .pane.on{display:block}
.scroll{height:100%;overflow:auto}

/* ---------- secciones colapsables del panel de contexto */
details.sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
details.sec>summary{list-style:none;cursor:pointer;padding:10px var(--sp-3);display:flex;align-items:baseline;gap:var(--sp-2);border-radius:var(--radius)}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::before{content:"▸";color:var(--muted);font-size:var(--fs-11);transition:transform var(--dur)}
details.sec[open]>summary::before{transform:rotate(90deg)}
details.sec>summary h3{margin:0}
details.sec>summary .res{margin-left:auto;font-size:var(--fs-12);color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
details.sec>.body{padding:0 var(--sp-3) var(--sp-3)}
details.sub>summary{cursor:pointer;color:var(--muted);font-size:var(--fs-12);margin-top:var(--sp-2)}

/* ---------- mapa */
.mapwrap{position:absolute;inset:0;background:var(--map)}
canvas#mapa{width:100%;height:100%;display:block;cursor:grab}
canvas#mapa:focus-visible{outline-offset:-3px}
.mapbar{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:var(--sp-2);align-items:flex-start;pointer-events:none;flex-wrap:wrap}
.mapbar>*{pointer-events:auto}
.buscar{position:relative;width:220px}
.buscar input{padding-left:26px;background:var(--panel)}
.buscar::before{content:"⌕";position:absolute;left:9px;top:5px;color:var(--muted)}
.sugerencias{position:absolute;top:100%;left:0;right:0;margin-top:2px;background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--shadow-lg);max-height:240px;overflow:auto;z-index:5}
.sugerencias [role=option]{padding:5px 10px;cursor:pointer;font-size:var(--fs-13)}
.sugerencias [role=option][aria-selected=true],.sugerencias [role=option]:hover{background:var(--accent-soft)}
.ctxchips{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-width:0}
.maptools{display:flex;gap:var(--sp-2);align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin-left:auto;flex-wrap:wrap}
.maptools label.check{margin:0;font-size:var(--fs-12)}
.legend{position:absolute;left:10px;bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:var(--fs-12);max-width:calc(100% - 20px)}
.legend summary{cursor:pointer;display:flex;gap:12px;flex-wrap:wrap;align-items:center;list-style:none}
.legend summary::-webkit-details-marker{display:none}
.legend .mas{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:4px 16px;margin-top:6px}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.sw.verde{background:var(--nivel-verde)} .sw.amarillo{background:var(--nivel-amarillo)} .sw.naranja{background:var(--nivel-naranja)}
.sw.desc{border:2px dashed var(--descartada);background:none} .sw.ref{border:2px dashed var(--ref);background:none}
.sw.falla{height:3px;background:var(--falla);border-radius:0;vertical-align:3px}
.sym{display:inline-block;width:14px;text-align:center;margin-right:5px}
.hint{position:absolute;left:50%;transform:translateX(-50%);top:56px;background:var(--ink);color:var(--panel);border-radius:8px;padding:5px 12px;font-size:var(--fs-12);display:none;z-index:3}
.loading{position:absolute;right:10px;bottom:10px;background:var(--ink);color:var(--panel);border-radius:8px;padding:4px 10px;font-size:var(--fs-12);display:none}
.banner{position:absolute;left:50%;top:56px;transform:translateX(-50%);display:flex;gap:var(--sp-3);align-items:center;padding:8px 12px;border-radius:8px;
  background:var(--panel);border:1px solid var(--danger);color:var(--ink);box-shadow:var(--shadow-lg);z-index:4;max-width:calc(100% - 40px)}
.banner.info{border-color:var(--accent)}
.tooltip-map{position:absolute;pointer-events:none;background:var(--ink);color:var(--panel);font-size:var(--fs-12);padding:3px 8px;border-radius:6px;z-index:3;white-space:nowrap}
.toggle-panel,.toggle-izq{display:none}
.sym.iny{color:var(--accent)} .sym.excl{color:var(--danger)} .tag.ref{color:var(--ref-ink)} .sug-vacio{padding:6px 10px}
canvas.chart.alto{height:240px}
.stats.c4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ---------- resumen, listas, revisión */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0}
.stat{background:var(--panel-2);border-radius:8px;padding:6px 8px;min-width:0} .stat b{display:block;font-size:18px} .stat span{font-size:var(--fs-12);color:var(--muted)}
.stat.verde b{color:var(--verde-ink)} .stat.amarillo b{color:var(--amarillo-ink)} .stat.naranja b{color:var(--naranja-ink)}
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px 0 var(--sp-2)}
.subtabs button{background:none;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--muted);padding:6px 10px;font-size:var(--fs-13)}
.subtabs button:hover:not(:disabled){background:none;color:var(--ink)}
.subtabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.filtros select{width:auto;flex:1 1 120px;min-width:110px;padding:3px 6px;font-size:var(--fs-12)}
#marcarVisibles{margin-left:auto}
.list{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 470px);min-height:140px;overflow:auto;padding:2px}
.list:focus-visible{outline-offset:0}
.item{display:flex;gap:6px;align-items:center;padding:5px 6px;border-radius:6px;cursor:pointer;font-size:var(--fs-13);min-width:0}
.item:hover,.item[aria-selected=true]{background:var(--panel-2)}
.item[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent)}
.item.activo{outline:2px solid var(--focus);outline-offset:-2px}
.item .txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .mot{display:block;font-size:var(--fs-12);color:var(--muted);white-space:normal}
.grupo{display:flex;gap:6px;align-items:center;padding:6px 6px 3px;font-size:var(--fs-12);color:var(--ink-2);font-weight:600;border-top:1px solid var(--line);margin-top:4px}
.grupo:first-child{border-top:none;margin-top:0}
.nivel{flex:none;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:700;color:#1b1206}
.nivel.verde{background:var(--nivel-verde);color:#fff} .nivel.amarillo{background:var(--nivel-amarillo)} .nivel.naranja{background:var(--nivel-naranja)}
.tag{font-size:var(--fs-12);border-radius:5px;padding:1px 6px;background:var(--panel-2);color:var(--ink-2);white-space:nowrap}
.tag.aprobada{color:var(--ok-ink)} .tag.descartada{color:var(--danger-ink)} .tag.agregada{color:var(--accent)}
@media (prefers-color-scheme: dark){.tag.agregada{color:var(--focus)}}
.lote{display:flex;gap:6px;align-items:center;padding:6px;background:var(--accent-soft);border-radius:8px;margin-bottom:6px;font-size:var(--fs-12);flex-wrap:wrap}
.flags{margin:6px 0;padding-left:16px;font-size:var(--fs-13)}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-2)}
.kv{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
.kv td{padding:4px 0;border-bottom:1px solid var(--line)} .kv td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.vacio{padding:var(--sp-3);text-align:center;color:var(--muted);font-size:var(--fs-13)}
.vacio b{display:block;color:var(--ink);margin-bottom:4px}
.callout{border-left:3px solid var(--nivel-amarillo);background:var(--panel-2);padding:8px 10px;border-radius:6px;margin:8px 0;font-size:var(--fs-13)}
.callout.ok{border-color:var(--nivel-verde)} .callout.danger{border-color:var(--danger)} .callout.info{border-color:var(--accent)}
.right>.card{flex:none}
.right>.card.grow{flex:1 0 auto;min-height:220px}

/* ---------- tablas y gráficos */
table{border-collapse:collapse;width:100%;font-size:var(--fs-13)}
th,td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--panel);font-size:var(--fs-12)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{max-height:360px;overflow:auto}
tr.clic{cursor:pointer} tr.clic:hover td,tr.clic:focus-visible td{background:var(--panel-2)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);margin:0 var(--sp-3) var(--sp-3)}
.grid2 .card.wide{margin:0}
canvas.chart{width:100%;height:170px;display:block}
.chartwrap{position:relative}

/* ---------- export */
.pasos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-3);margin:var(--sp-3)}
.pasos .card.wide{margin:0}
.paso h2 .n{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:var(--fs-12);align-items:center;justify-content:center;margin-right:6px}
.progreso{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin:6px 0}
.progreso>i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s}

/* ---------- modal, toasts */
.modal{position:fixed;inset:0;background:rgba(10,15,25,.45);display:none;align-items:center;justify-content:center;z-index:20;padding:var(--sp-4)}
.modal.on{display:flex}
.modalbox{background:var(--panel);border-radius:var(--radius-lg);padding:22px;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:var(--shadow-lg)}
.modalbox.ancho{width:min(760px,100%)}
.rec{display:block;width:100%;text-align:left;background:var(--panel);color:var(--ink);padding:6px 8px;border:1px solid var(--line);border-radius:8px;margin:4px 0;font-size:var(--fs-13)}
.rec:hover:not(:disabled){background:var(--panel-2);border-color:var(--line-strong)}
.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:30;max-width:min(420px,calc(100vw - 32px))}
.toast{background:var(--ink);color:var(--panel);border-radius:8px;padding:8px 12px;font-size:var(--fs-13);display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-lg)}
.toast.error{background:var(--danger)} .toast.error,.toast.error button.link{color:#fff}
.toast button.link{color:var(--panel);font-weight:600}
kbd{font:600 var(--fs-12) var(--font);border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--panel-2)}
.atajos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--fs-13);align-items:baseline}
dl.glosario dt{font-weight:600;margin-top:8px} dl.glosario dd{margin:2px 0 0;color:var(--ink-2);font-size:var(--fs-13)}
.solo-escritorio{display:none}

/* ---------- responsive: >=1280 tres columnas; 1024–1279 trabajo como cajón; <900 contexto también; <700 solo lectura */
@media (max-width:1279px){
  .layout{grid-template-columns:var(--left) minmax(0,1fr)}
  .right{position:absolute;top:0;right:0;bottom:0;width:min(var(--right),92vw);z-index:6;box-shadow:var(--shadow-lg);border-left:1px solid var(--line);
    transform:translateX(105%);transition:transform .18s}
  .layout.derecho-abierto .right{transform:none}
  .toggle-panel{display:inline-flex}
}
@media (max-width:899px){
  :root{--left:260px}
  .layout,.layout.sin-derecho{grid-template-columns:minmax(0,1fr)}
  .left{position:absolute;top:0;left:0;bottom:0;width:min(var(--left),92vw);z-index:6;box-shadow:var(--shadow-lg);border-right:1px solid var(--line);
    transform:translateX(-105%);transition:transform .18s}
  .layout.izquierdo-abierto .left{transform:none}
  .toggle-izq{display:inline-flex}
  .grid2,.pasos{grid-template-columns:minmax(0,1fr)}
  .buscar{width:160px}
}
@media (max-width:699px){
  .top{gap:var(--sp-2);padding:0 var(--sp-2)}
  .brand b,.brand .logo{display:none}
  button.proyecto{max-width:120px}
  .guardado,#usuarioNombre{display:none}
  .solo-escritorio{display:block;margin:var(--sp-2);font-size:var(--fs-12)}
  .legend{display:none}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}