/* coteja — sistema de diseño (identidad «coteja», Amplifica custom:16).
   Fuente de verdad: el artifact «coteja» Design System. Núcleo y riesgo son fijos;
   la capa brand-* es la única que cambia con la marca blanca. */
:root{
  /* núcleo */
  --paper:#F6F3EC; --paper-sunk:#EDE8DD; --rule:#D9D2C3; --ink:#1B1F1E; --ink-soft:#545B58;
  /* marca (sustituible) */
  --brand-accent:#14695F; --brand-accent-strong:#0E4F47; --brand-on-accent:#F6F3EC;
  --seal:#7E6233;
  /* riesgo: lenguaje propio, nunca el acento */
  --risk-low:#56656E; --risk-medium:#7A5C0F; --risk-high:#A84E17; --risk-critical:#9B2B2C;
  --risk-low-wash:#E6E8E6; --risk-medium-wash:#F0E7D2; --risk-high-wash:#F6EAE1; --risk-critical-wash:#F1DCDA;
  /* estado de proceso: forma + palabra */
  --state-current:#3F5F55; --state-delayed:#7A5C0F; --state-error:#9B2B2C; --state-offline:#626563;
  --focus-ring:0 0 0 1px #F6F3EC,0 0 0 3px #14695F;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-display:Spectral,Georgia,"Times New Roman",serif;
  --radius-sm:2px; --radius-md:4px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#141716; --paper-sunk:#1E2221; --rule:#2E3432; --ink:#E9E5DC; --ink-soft:#A7ABA6;
  --brand-accent:#4FB3A3; --brand-accent-strong:#7CCBBE; --brand-on-accent:#141716; --seal:#C9A86A;
  --risk-low:#9AA9B2; --risk-medium:#D9B04A; --risk-high:#E08A55; --risk-critical:#E87773;
  --risk-low-wash:#232A2D; --risk-medium-wash:#2B2514; --risk-high-wash:#2F1F15; --risk-critical-wash:#321C1C;
  --state-current:#86B5A6; --state-delayed:#D9B04A; --state-error:#E87773; --state-offline:#9A9D9A;
  --focus-ring:0 0 0 1px #141716,0 0 0 3px #4FB3A3;
}}
:root[data-theme="dark"]{
  --paper:#141716; --paper-sunk:#1E2221; --rule:#2E3432; --ink:#E9E5DC; --ink-soft:#A7ABA6;
  --brand-accent:#4FB3A3; --brand-accent-strong:#7CCBBE; --brand-on-accent:#141716; --seal:#C9A86A;
  --risk-low:#9AA9B2; --risk-medium:#D9B04A; --risk-high:#E08A55; --risk-critical:#E87773;
  --risk-low-wash:#232A2D; --risk-medium-wash:#2B2514; --risk-high-wash:#2F1F15; --risk-critical-wash:#321C1C;
  --state-current:#86B5A6; --state-delayed:#D9B04A; --state-error:#E87773; --state-offline:#9A9D9A;
  --focus-ring:0 0 0 1px #141716,0 0 0 3px #4FB3A3;
}
/* semánticos: lo que leen los componentes. Se declaran también en [data-brand]
   para que una marca redefinida en un contenedor llegue a los componentes. */
:root,[data-brand]{
  --surface:var(--paper); --surface-sunk:var(--paper-sunk); --border:var(--rule);
  --text:var(--ink); --text-soft:var(--ink-soft);
  --action:var(--brand-accent); --action-strong:var(--brand-accent-strong); --on-action:var(--brand-on-accent);
  --focus:var(--brand-accent);
  /* nombres heredados del prototipo → tokens nuevos (las vistas aún los usan en línea) */
  --bg:var(--paper); --panel:var(--paper); --soft:var(--paper-sunk); --sunken:var(--paper-sunk);
  --ink-2:var(--ink-soft); --ink-3:var(--ink-soft);
  --line:var(--rule); --line-2:var(--rule);
  --ac:var(--brand-accent); --ac-2:var(--brand-accent-strong); --ac-bg:var(--paper-sunk);
  /* crit/alto/med/bajo eran colores de estado en las vistas: van a los estados */
  --crit:var(--state-error); --crit-bg:var(--risk-critical-wash);
  --alto:var(--risk-high); --alto-bg:var(--risk-high-wash);
  --med:var(--state-delayed); --med-bg:var(--risk-medium-wash);
  --bajo:var(--state-current); --bajo-bg:var(--paper-sunk);
  --info:var(--ink-soft); --info-bg:var(--paper-sunk);
  --r:var(--radius-md);
  /* campos: opción B «contorno» — filete completo en tinta suave (6,3:1) sobre papel */
  --field-bg:var(--paper); --field-border:var(--ink-soft);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* `hidden` manda siempre: los controladores (filter-list…) lo usan para ocultar. */
[hidden]{display:none !important}
b,strong{font-weight:500}
input,select,textarea,button{font-family:inherit}
input.btn{font-family:var(--font-sans)}
/* Selector de archivo: el botón nativo como botón secundario del sistema. */
input[type=file]{max-width:100%;font-size:14px;color:var(--text-soft)}
input[type=file]::file-selector-button{font:500 14px var(--font-sans);min-height:40px;padding:0 16px;margin-right:12px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--surface-sunk)}
.file-pick,.pq .file-pick{position:relative;display:flex;margin:0;font-size:14px;font-weight:400;align-items:center;gap:12px;flex-wrap:wrap;padding:8px;border:1px dashed var(--field-border);border-radius:var(--radius-md);cursor:pointer}
.file-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-pick .btn{pointer-events:none}
.file-pick .file-name{font-size:14px;color:var(--text-soft);min-width:0;overflow-wrap:anywhere}
.file-pick.has-file{border-style:solid}
.file-pick.has-file .file-name{color:var(--text)}
.file-pick:focus-within .btn{box-shadow:var(--focus-ring)}
/* Enlace en texto corrido: verdigrís y subrayado fino. El chrome (botones, filas, nav) lo anula más abajo. */
a{color:var(--action);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--action-strong)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ─── shell ─── */
.app{display:grid;grid-template-columns:244px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:22px 20px 18px}
.brand .wm{display:inline-block;margin-bottom:16px;text-decoration:none}
.brand .wm img{height:22px;width:auto}
.brand .org{display:flex;align-items:center;gap:10px}
.brand .mk{width:30px;height:30px;border-radius:var(--radius-md);background:var(--action);color:var(--on-action);display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:15px;flex:none}
.brand .nm{font-weight:500;font-size:14px;letter-spacing:-.01em;line-height:1.25}
.brand .sub{font-size:12px;color:var(--text-soft)}
nav{padding:4px 12px 20px;flex:1}
.ngrp{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:18px 8px 7px}
.nav{display:flex;align-items:center;width:100%;text-align:left;padding:8px 10px;border-radius:var(--radius-md);color:var(--ink-2);font-size:14px;transition:background .13s,color .13s}
.nav:hover{background:var(--soft);color:var(--ink)}
.nav.on{background:var(--surface-sunk);color:var(--text);font-weight:500;box-shadow:inset 2px 0 0 var(--action)}
.nav .bdg{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--state-error);font-weight:500}
.who{border-top:1px solid var(--line);padding:15px 20px;display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;background:var(--surface-sunk);color:var(--text-soft);display:grid;place-items:center;font-size:12px;font-weight:500;flex:none}

/* ─── mobile drawer ─── */
.hamb{display:none}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,15,20,.42);z-index:60}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:272px;height:100dvh;z-index:70;
        transform:translateX(-100%);transition:transform .18s ease}
  body.menu .side{transform:translateX(0)}
  body.menu .scrim{display:block}
  .hamb{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
        border:1px solid var(--ink-soft);border-radius:var(--radius-md);flex:none;font-size:15px;color:var(--text)}
}

/* ─── topbar ─── */
main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);
     backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:14px 30px;
     display:flex;align-items:center;gap:14px}
.top .hd{min-width:0;flex:1}
/* La marca de coteja en la barra: el cuadrado con la «c», enlace al panel. */
.top-mark{display:block;flex:none;width:32px;height:32px;border-radius:var(--radius-md);overflow:hidden}
.top-mark img{display:block;width:32px;height:32px}
.top-mark:focus-visible{box-shadow:var(--focus-ring)}
.crumb{font-size:13px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--ink-2);font-weight:500}
.top h1{font-size:21px;line-height:28px;margin:1px 0 0;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acts{display:flex;gap:8px;flex:none}
@media(max-width:900px){
  .top{padding:11px 16px;gap:11px}
  .top h1{font-size:17px;line-height:24px}
  .acts .hide-m{display:none}
}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:var(--radius-md);
     font-size:14px;font-weight:500;border:1px solid var(--ink-soft);background:var(--surface);color:var(--text);transition:background .12s,border-color .12s,color .12s;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-sunk)}
.btn.pr{background:var(--action);border-color:var(--action);color:var(--on-action)}
.btn.pr:hover{background:var(--action-strong);border-color:var(--action-strong);color:var(--on-action)}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--surface)}
.btn.pr:disabled:hover{background:var(--action);border-color:var(--action)}
.wrap{padding:26px 30px 72px;max-width:1180px}
@media(max-width:900px){.wrap{padding:18px 16px 56px}}

/* ─── surfaces ─── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card-h{padding:15px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:17px;line-height:24px;margin:0;font-weight:500}
.card-h .sp,.top .sp{flex:1}
.card-b{padding:18px}
@media(max-width:620px){.card-b{padding:15px}.card-h{padding:14px 15px}.fil{padding:12px 15px}tbody td{padding:12px 15px}thead th{padding:10px 15px}}
.hint{font-size:13px;color:var(--text-soft)}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
@media(max-width:620px){.g2{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Una columna de retícula nunca empuja la página: sin scroll horizontal (§6.1). */
.grid>*,.bld>*,.q-t>div,.card-b>*{min-width:0}
.btn{max-width:100%}
@media(max-width:760px){.btn{white-space:normal}}
/* Las fichas de factor de segmentación llevan texto y barra: en móvil, una por fila. */
@media(max-width:620px){.g-fct{grid-template-columns:minmax(0,1fr)}}
.sel,.srch,.pin{max-width:100%}
.lbl{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}

/* ─── kpi ─── */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px}
@media(max-width:620px){.kpi{padding:14px}.kpi .n{font-size:27px;line-height:34px}.kpi .t{font-size:13px}}
.kpi .n{font-size:34px;font-weight:500;line-height:40px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text)}
.kpi .t{font-size:14px;color:var(--text);margin-top:4px}
.kpi .d{font-size:13px;line-height:18px;color:var(--text-soft);margin-top:4px}
/* la cifra de un indicador nunca va en color: lo dice el detalle */

/* ─── estado: forma + palabra, sin fondo (habla de la fuente o el trámite) ─── */
.p{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;line-height:20px;font-weight:400;white-space:normal;overflow-wrap:break-word;max-width:100%;color:var(--text-soft);background:none;border:0;padding:0}
.p .dot{display:none}
.p::before{font-size:10px;line-height:1;flex:none}
.p-b{color:var(--state-current)} .p-b::before{content:"●"}
.p-a,.p-m{color:var(--state-delayed)} .p-a::before,.p-m::before{content:"◐"}
.p-c{color:var(--state-error)} .p-c::before{content:"■"}
.p-n{color:var(--state-offline)} .p-n::before{content:"○"}
.p-ac{color:var(--action);font-weight:500}
.p-i{color:var(--text-soft)}
button.p{cursor:pointer}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ─── riesgo: lenguaje propio, siempre con barras y palabra ─── */
.rchip{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:var(--radius-sm);font-size:13px;line-height:20px;font-weight:500;white-space:nowrap}
.rchip-bars{display:inline-flex;gap:2px}
.rchip .rchip-bars i{width:3px;height:10px;border-radius:1px;border:1px solid currentColor;box-sizing:border-box}
.rchip .rchip-bars i.on{background:currentColor}
.rchip-low{color:var(--risk-low);background:var(--risk-low-wash)}
.rchip-medium{color:var(--risk-medium);background:var(--risk-medium-wash)}
.rchip-high{color:var(--risk-high);background:var(--risk-high-wash)}
.rchip-critical{color:var(--risk-critical);background:var(--risk-critical-wash)}
.rchip-none{color:var(--text-soft);background:var(--surface-sunk)}

/* ─── expediente: el nombre del tercero en Spectral ─── */
.page-h{margin:0;font-size:21px;line-height:28px;font-weight:500;color:var(--text)}
.dossier-name{margin:0;font-family:var(--font-display);font-size:27px;line-height:34px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
@media(max-width:620px){.dossier-name{font-size:21px;line-height:28px}}

/* ─── table ─── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:540px}
/* Tablas anchas declaran su mínimo en --tbl-min (no en línea), para que en móvil pasen a fichas. */
table.tbl-wide{min-width:var(--tbl-min,540px)}
thead th{font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);font-weight:500;text-align:left;padding:11px 18px;border-bottom:1px solid var(--line)}
tbody td{padding:12px 18px;height:48px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--text);font-size:14px}
tbody tr:last-child td{border-bottom:none}
tbody tr.clk{cursor:pointer;transition:background .1s}
tbody tr.clk:hover{background:var(--sunken)}
td .nm{color:var(--ink);font-weight:500;font-size:14px}
/* Un NIT o una fecha partidos en dos líneas dejan de leerse como dato. */
td.mono,td .mono{white-space:nowrap}
td .sb{font-size:13px;color:var(--text-soft)}

/* ─── filters ─── */
.fil{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.seg{display:inline-flex;border:1px solid var(--ink-soft);border-radius:var(--radius-md);padding:2px;gap:2px}
.seg button{padding:5px 12px;font-size:13px;color:var(--text-soft);border-radius:var(--radius-sm);transition:background .12s,color .12s}
.seg button.on{background:var(--text);color:var(--surface);font-weight:500}
.srch{flex:1;min-width:150px;min-height:40px;padding:8px 12px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--field-bg);color:var(--text);font:400 14px/1.4 var(--font-sans)}
.srch::placeholder,.pin::placeholder{color:var(--text-soft)}
.srch:focus-visible,.pin:focus-visible,.sel:focus-visible,textarea:focus-visible{border-color:var(--action)}

/* ─── provenance / match ─── */
.prov{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--text-soft)}
.prov .sep{opacity:.4}
.match{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.match-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.wrow{display:grid;grid-template-columns:120px 1fr 56px;gap:13px;align-items:center;padding:10px 18px;border-bottom:1px solid var(--line);font-size:13px}
@media(max-width:520px){.wrow{grid-template-columns:96px 1fr 48px;gap:9px;padding:10px 14px}.wrow .f{font-size:12px}}
.wrow:last-child{border-bottom:none}
.wrow .f{font-size:13px;color:var(--ink-2)}
.bar{height:5px;border-radius:3px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px}
.bar i.pos{background:var(--action)} .bar i.neg{background:var(--ink-soft)}
.wrow .v{font-family:var(--font-mono);font-size:13px;text-align:right;font-weight:500}
.v.pos{color:var(--action-strong)} .v.neg{color:var(--text-soft)}
.score{display:flex;align-items:center;gap:15px;padding:16px 18px;border-radius:var(--r);flex-wrap:wrap}
.score{background:var(--surface-sunk)}
.score .big{font-family:var(--font-mono);font-size:34px;font-weight:500;line-height:40px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score .big{color:var(--text)}
.score .tx{font-size:13px;color:var(--ink-2)}
.score .tx b{display:block;font-size:15px;color:var(--text);font-weight:500;margin-bottom:1px}

/* ─── timeline ─── */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.tl .ev{position:relative;padding-bottom:17px}
.tl .ev:last-child{padding-bottom:0}
.tl .ev::before{content:"";position:absolute;left:-22px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--ac);border:2px solid var(--panel)}
.tl .ev .t{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.tl .ev .d{font-size:13px;color:var(--ink-2);margin-top:1px}

/* ─── misc ─── */
.kv{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;font-size:14px}
@media(max-width:520px){.kv{grid-template-columns:1fr;gap:2px 0}.kv dd{margin-bottom:9px}}
.kv dt{color:var(--ink-3);font-size:12px;padding-top:2px}
.kv dd{margin:0;color:var(--ink)}
.steps{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.step{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);
      border-radius:var(--radius-md);font-size:13px;color:var(--ink-3)}
.step.done{color:var(--state-current);border-color:var(--rule);background:var(--surface-sunk)}
.step.now{background:var(--action);color:var(--on-action);font-weight:500;border-color:var(--action)}
.step .n{font-family:var(--font-mono);font-size:12px;opacity:.75}
.cov{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}
.cov:last-child{border-bottom:none}
.cov .nm{flex:1;font-size:14px;color:var(--ink)}
.cov .tr{width:96px;height:5px;background:var(--soft);border-radius:3px;overflow:hidden;flex:none}
.cov .tr i{display:block;height:100%;background:var(--ac);border-radius:3px}
.cov .pc{font-family:var(--font-mono);font-size:12px;width:40px;text-align:right;color:var(--ink-2);flex:none}
.heat{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:250px}
.heat div{aspect-ratio:1;border-radius:var(--radius-md);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#fff}
.note{font-size:13px;color:var(--ink-2);background:var(--ac-bg);padding:12px 15px;border-radius:var(--radius-md);line-height:1.5}
.note.mute{background:var(--soft);color:var(--ink-3)}
.view{display:none} .view.on{display:block}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{text-decoration:none;padding:10px 14px;font-size:14px;color:var(--text-soft);border-bottom:2px solid transparent;white-space:nowrap}
.tab.on{color:var(--text);border-bottom-color:var(--action);font-weight:500}
.stk{display:flex;flex-wrap:wrap;gap:6px}

/* documentos */
.doc{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--panel)}
.doc-m{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.doc-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.doc-g .rf{font-size:13px;color:var(--ink-2);margin-top:4px}
.doc-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.doc-a .hint{flex:1;min-width:180px}
.minib{width:74px;height:5px;background:var(--soft);border-radius:3px;overflow:hidden}
.minib i{display:block;height:100%;background:var(--ac);border-radius:3px}

/* portal del tercero */
#portal{display:none;min-height:100vh;background:var(--bg)}
body.portal #portal{display:block}
body.portal .app,body.portal .scrim{display:none}
.ph{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.ph-in{max-width:760px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:14px}
.ph-br{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.ph-mk{width:34px;height:34px;border-radius:var(--radius-md);background:var(--action);color:var(--on-action);display:grid;place-items:center;font-family:var(--font-display);font-size:16px;font-weight:600;flex:none}
.ph-nm{font-weight:500;font-size:15px;line-height:1.25}
.ph-sb{font-size:12px;color:var(--ink-3)}
.pw{max-width:760px;margin:0 auto;padding:26px 22px 80px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
@media(max-width:620px){.pcard{padding:18px}.ph-in,.pw{padding-left:16px;padding-right:16px}}
.ptitle{font-size:27px;line-height:34px;font-weight:500;letter-spacing:-.01em;margin:6px 0 0}
.plead{font-size:15px;color:var(--ink-2);margin:10px 0 18px;max-width:58ch}
.pbar{height:6px;background:var(--soft);border-radius:3px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--ac);border-radius:3px}
.pmeta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-top:8px}
.pq{padding:18px 0;border-bottom:1px solid var(--line)}
.pq:first-child{padding-top:0}
.pq label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:9px}
.pq .req{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:6px}
.pin{width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--field-bg);color:var(--text);font:400 15px/1.5 var(--font-sans)}
.pin.mono{font-family:var(--font-mono)}

.pch{display:inline-flex;background:var(--soft);border-radius:var(--radius-md);padding:3px}
.pch button{padding:7px 20px;font-size:14px;color:var(--ink-3);border-radius:var(--radius-md)}
.pch button.on{background:var(--text);color:var(--surface);font-weight:500}
.pup{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:13px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--sunken);font-size:14px}
.pup.ok{border-color:var(--bajo)} .pup.rej{border-color:var(--crit)}
.pwhy{font-size:13px;color:var(--crit);background:var(--crit-bg);padding:11px 13px;border-radius:var(--radius-md);margin-top:9px}
.pact{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}


/* ── modal ── */
.mbk{display:none;position:fixed;inset:0;background:rgba(10,15,20,.5);z-index:90;align-items:center;justify-content:center;padding:20px}
body.modal .mbk{display:flex}
.mdl{background:var(--panel);border-radius:var(--radius-md);max-width:520px;width:100%;max-height:90vh;overflow-y:auto;border:1px solid var(--line)}
.mdl-h{padding:20px 22px 0}
.mdl-h h2{font-size:21px;font-weight:500;margin:0;letter-spacing:-.015em}
.mdl-b{padding:18px 22px}
.mdl-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.fld{margin-bottom:16px}
.fld>label{display:block;font-size:13px;font-weight:500;margin-bottom:7px}
.sel{width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--field-bg);color:var(--text);font:400 15px/1.5 var(--font-sans)}
.radios{display:grid;gap:8px}
.radio{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--field-border);border-radius:var(--radius-md);cursor:pointer;font-size:14px}
.radio.on{border-color:var(--ac);background:var(--ac-bg)}
.radio .rk{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--field-border);flex:none;margin-top:2px;display:grid;place-items:center}
.radio.on .rk{border-color:var(--ac)}
.radio.on .rk::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ac)}
.radio .rt b{display:block;font-weight:500;color:var(--ink)}
.radio .rt span{font-size:12px;color:var(--ink-3)}

/* ── constructor ── */
.bld{display:grid;grid-template-columns:272px 1fr;gap:18px;align-items:start}
@media(max-width:880px){.bld{grid-template-columns:1fr}}
.slist{display:grid;gap:6px}
.sitem{display:flex;gap:10px;align-items:center;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);cursor:pointer;transition:all .12s}
.sitem:hover{border-color:var(--line-2)}
.sitem.on{border-color:var(--ac);background:var(--ac-bg)}
.sitem .gr{color:var(--ink-3);font-size:13px;cursor:grab;flex:none}
.sitem .st{flex:1;min-width:0}
.sitem .st b{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.3}
.sitem .st span{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.q{border:1px solid var(--line);border-radius:var(--radius-md);padding:15px;background:var(--panel);margin-bottom:10px}
.q-t{display:flex;gap:10px;align-items:flex-start}
.q-t .gr{color:var(--ink-3);cursor:grab;font-size:13px;padding-top:9px;flex:none}
.q-o{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tog{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);border:1px solid var(--field-border);border-radius:var(--radius-md);padding:5px 12px;cursor:pointer}
.tog.on{border-color:var(--ac);color:var(--ac);background:var(--ac-bg);font-weight:500}

/* ── importar ── */
.drop{border:1.5px dashed var(--line-2);border-radius:var(--radius-md);padding:26px;text-align:center;background:var(--sunken)}
.map{display:grid;grid-template-columns:1fr 24px 1fr;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.map:last-child{border-bottom:none}
.map .ar{color:var(--ink-3);text-align:center;font-size:13px}
.map .col{font-family:var(--font-mono);font-size:13px;color:var(--ink-2);background:var(--sunken);padding:8px 12px;border-radius:var(--radius-md);border:1px solid var(--line)}
@media(max-width:620px){.map{grid-template-columns:1fr;gap:6px}.map .ar{display:none}}

/* ── OTP y evidencia ── */
/* Las seis casillas van siempre en una fila: encogen en móvil en vez de partir línea. */
.otp{display:flex;gap:clamp(4px,1.5vw,8px);justify-content:center;margin:18px 0;flex-wrap:nowrap}
.otp input{flex:0 1 46px;min-width:34px}
.otp input{width:46px;height:56px;text-align:center;font-family:var(--font-mono);font-size:21px;font-weight:500;
  border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--panel);color:var(--ink)}
.otp input.f{border-color:var(--action);box-shadow:inset 0 -2px 0 var(--action)}
.ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;padding:15px;background:var(--sunken);border-radius:var(--radius-md);border:1px solid var(--line)}
.ev .vv{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);word-break:break-all;margin-top:3px}
body.firma #portalSec{display:none}
body:not(.firma) #portalFirma{display:none}


/* ── paleta de series (validada: 6/6 checks, claro y oscuro) ── */
:root{--s1:#00897A;--s2:#C96A00;--s3:#3366CC;--s4:#C32F22;--s5:#9B4DB0;--s6:#6F8E00;
  --seq1:#DCEDEA;--seq2:#A9D3CC;--seq3:#6FB5AB;--seq4:#2E8F80;--seq5:#14695F;--grid:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --s1:#27A08E;--s2:#CC7A31;--s3:#6089D2;--s4:#D45B4E;--s5:#AE6FBE;--s6:#7E9A2E;
  --seq1:#1B2E2B;--seq2:#235048;--seq3:#2E7267;--seq4:#3E9586;--seq5:#55ABA0}}
:root[data-theme="dark"]{--s1:#27A08E;--s2:#CC7A31;--s3:#6089D2;--s4:#D45B4E;--s5:#AE6FBE;--s6:#7E9A2E;
  --seq1:#1B2E2B;--seq2:#235048;--seq3:#2E7267;--seq4:#3E9586;--seq5:#55ABA0}

.chart{width:100%;overflow:visible}
.chart .gl{stroke:var(--grid);stroke-width:1}
/* --k = unidades de viewBox por píxel en pantalla (controlador chart). Se topa en 1,5
   para que en un teléfono las etiquetas no desborden: quedan en 10 px como mínimo. */
.chart{--k:1}
.chart .ax{font-family:var(--font-mono);font-size:calc(12px * min(var(--k), 1.5));fill:var(--text-soft)}
.chart .vl{font-family:var(--font-mono);font-size:calc(12px * min(var(--k), 1.5));fill:var(--text);font-weight:500}
.chart .hit{fill:transparent;cursor:pointer}
.lg{display:flex;gap:14px;flex-wrap:wrap;margin-top:13px}
.lg span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text)}
.lg i{width:9px;height:9px;border-radius:var(--radius-sm);flex:none}
.tip{position:fixed;pointer-events:none;z-index:95;background:var(--ink);color:var(--paper);
  padding:7px 10px;border-radius:var(--radius-md);font-size:12px;line-height:1.4;opacity:0;transition:opacity .1s;white-space:nowrap}
.tip.on{opacity:1}
.tip b{font-family:var(--font-mono)}
.hero{font-size:34px;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}

/* ── cartograma ── */
.cart{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;max-width:330px}
.cart .c{aspect-ratio:1;border-radius:var(--radius-md);display:grid;place-items:center;position:relative;
  font-family:var(--font-mono);font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent}
.cart .c.em{background:transparent;cursor:default}
.cart .c .bd{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--panel)}
.scale{display:flex;align-items:center;gap:3px;margin-top:12px;font-size:12px;color:var(--ink-3)}
.scale i{width:22px;height:9px;display:block}
.scale i:first-of-type{border-radius:3px 0 0 3px}.scale i:last-of-type{border-radius:0 3px 3px 0}


/* ── geo ── */
.globe{width:100%;max-width:430px;aspect-ratio:1;display:block;margin:0 auto;cursor:grab;touch-action:none}
.globe:active{cursor:grabbing}
.gwrap{position:relative}
.gctl{display:flex;gap:7px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.hexco{width:100%;max-width:290px;display:block;margin:0 auto}
.fct{border:1px solid var(--line);border-radius:var(--radius-md);padding:15px;background:var(--panel)}
.fct .fh{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.fct .fn{font-size:14px;font-weight:500;flex:1}
.fbar{display:flex;height:9px;border-radius:var(--radius-md);overflow:hidden;gap:2px;background:transparent}
.fbar i{display:block}
.fleg{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--text)}
.fleg span{display:inline-flex;align-items:center;gap:5px}
.fleg i{width:8px;height:8px;border-radius:var(--radius-sm)}

/* ─────────────────────────────────────────────────────────────
   Móvil — ajustes de uso real, no de maqueta.
   Probado a 390 px en la app, no en el prototipo.
   ───────────────────────────────────────────────────────────── */

/* Los enlaces dentro de listas y fichas heredan el color y no se subrayan:
   la fila entera ya es pulsable, el subrayado sólo ensucia. */
/* Ningún enlace de chrome lleva subrayado: navegación, botones, tarjetas y
   filas. El subrayado se reserva para enlaces dentro de texto corrido. */
a.btn, .btn, a.kpi, a.kpi *, .nav, .side a, .who a, .card-h a, .sitem, .sitem a, .slist a, .tab { text-decoration: none }
.slist a, .sitem a { color: inherit }
a.kpi { color: inherit; transition: border-color .13s }
a.kpi:hover { border-color: var(--ac) }
/* Etiqueta que sólo aparece en móvil, donde la cabecera de la tabla no existe. */
.only-m { display: none }
.tw a, .card a:not(.btn), td a { text-decoration: none; color: inherit }
.tw a:hover, td a:hover { color: var(--ac) }

@media (max-width: 760px) {
  /* La barra superior deja respirar al título: las acciones bajan a su propia
     línea en vez de estrujar la miga hasta «Opera…». */
  .top { flex-wrap: wrap; row-gap: 10px }
  .top .hd { flex: 1 1 auto; min-width: 0 }
  .acts { flex: 1 0 100%; justify-content: flex-start; flex-wrap: wrap }
  .acts .btn { flex: 1 1 auto; justify-content: center }
  /* Celdas que sólo aportan ruido en un teléfono. */
  .hide-m { display: none !important }
  .only-m { display: inline; color: var(--ink-3); font-size: 11.5px }

  /* Una tabla de siete columnas en 390 px no es una tabla: es un acordeón roto.
     Cada fila pasa a ser una tarjeta — la identidad arriba, los atributos
     fluyendo debajo — sin tocar ni una vista. */
  .tw { overflow-x: visible }
  table, table.tbl-wide { min-width: 0 }
  /* En móvil la tabla es una lista de fichas: bloque, no rejilla que crece con el contenido. */
  table, tbody { display: block; width: 100% }
  tbody td { min-width: 0; overflow-wrap: anywhere }
  /* La etiqueta y el dato pueden ir en líneas distintas; el dato (sin espacios) no se parte. */
  tbody td.mono, tbody td .mono { white-space: normal }
  tbody td[style*="max-width"] { max-width: none !important }
  /* Cada celda ya muestra su etiqueta (table-labels): la cabecera sobra y, oculta a
     medias, seguía ensanchando la página a 320 px. */
  thead { display: none !important }
  tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
             padding: 14px 15px; border-bottom: 1px solid var(--line) }
  tbody tr:last-child { border-bottom: none }
  tbody td { display: block; padding: 0; border: none; width: auto; height: auto }
  tbody td:first-child { flex: 1 0 100% }
  tbody td:empty { display: none }
  /* La etiqueta de la columna (data-label, desde el <th>) antecede al valor, salvo
     en la identidad, los chips y las celdas que ya traen su etiqueta móvil. */
  tbody td[data-label]:not(:first-child):not(:has(.rchip, .p, .only-m, .btn, form))::before {
    content: attr(data-label) " · "; font-size: 12px; color: var(--text-soft); font-family: var(--font-sans) }
  tbody td.mono { font-size:13px }

  /* Los números largos no se parten a la mitad. Un NIT cortado en dos líneas
     deja de ser un NIT. */
  td .nm { white-space: normal }

  /* Filtros: una sola fila deslizable en vez de tres apiladas. */
  .fil { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
         scrollbar-width: none; gap: 7px }
  .fil::-webkit-scrollbar { display: none }
  .fil > * { flex: 0 0 auto }
  .fil .srch { min-width: 190px }

  /* Objetivos táctiles: nada por debajo de 40 px de alto. */
  .btn { min-height: 40px }
  .seg button { min-height: 34px }
  .nav { min-height: 42px }
}

/* Teléfonos estrechos: los KPI siguen de dos en dos, pero más compactos. */
@media (max-width: 400px) {
  .kpi .n { font-size: 23px }
  .wrap { padding-left: 13px; padding-right: 13px }
  .card-b, .card-h { padding-left: 13px; padding-right: 13px }
  tbody tr { padding-left: 13px; padding-right: 13px }
}

/* ── Comprobar en la fuente ──────────────────────────────────────────────
   Los enlaces al servicio oficial. Selectores nuevos: van al final, después
   de las media queries, sin pisar nada de lo de arriba. */
.verif { display: grid; gap: 7px }
.verif-i { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
           border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel);
           text-decoration: none; color: inherit }
.verif-i:hover { border-color: var(--ink-soft); background: var(--surface-sunk) }
.verif-i .p { flex: none; margin-top: 1px }
.verif-t { min-width: 0; flex: 1 }
.verif-t b { display: block; font-size: 13px; font-weight: 500; color: var(--ink) }
.verif-t span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; line-height: 1.45 }
.verif-t code { font-size: 12px; color: var(--ink-3); word-break: break-all }
.verif-x { flex: none; color: var(--ink-3); font-size: 13px; margin-top: 1px }
.verif-i:hover .verif-x { color: var(--action) }

@media (max-width: 560px) {
  .verif-i { flex-wrap: wrap; gap: 7px }
  .verif-t { flex-basis: 100% }
}

/* ── Expediente completo ─────────────────────────────────────────────────
   Un documento largo que además se imprime y se entrega en una auditoría. */
.exp-s { margin-bottom: 16px }
.exp-f { padding: 13px 0; border-top: 1px solid var(--line) }
.exp-f:first-of-type { border-top: none; padding-top: 0 }
.exp-f-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 9px }
.exp-f-h b { font-size: 14px; font-weight: 500 }

@media print {
  .side, .topbar, .crumbs, .btn, button, .only-m { display: none !important }
  .wrap, .pw { max-width: none !important; padding: 0 !important; margin: 0 !important }
  .card { break-inside: avoid; border-color: #ccc !important; box-shadow: none !important }
  .exp-s { break-inside: auto }
  .verif-i { break-inside: avoid }
  .verif-t code, .verif-x { display: none }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; color: #666; word-break: break-all }
}

/* La tira de trabajos en segundo plano. Vacía no ocupa nada: sin el :empty la
   rejilla dejaría un hueco en todas las páginas que la montan. */
.jobs { display: grid; gap: 9px }
.jobs:not(:empty) { margin-bottom: 16px }
.pbar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden }
.pbar > i { display: block; height: 100%; background: var(--action); border-radius: var(--radius-sm);
            transition: width .4s ease }

/* ── logotipo: la versión de tinta en claro, la de tinta clara en oscuro ── */
.logo img{display:block;width:auto}
.logo .logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .logo-l{display:none}:root:not([data-theme="light"]) .logo .logo-d{display:block}}
:root[data-theme="dark"] .logo .logo-l{display:none}
:root[data-theme="dark"] .logo .logo-d{display:block}

/* ── regla de probabilidad (explicación de la coincidencia) ── */
.score{flex-wrap:wrap}
.ruler{position:relative;flex:1 0 100%;height:30px;margin-top:4px}
.ruler::before{content:"";position:absolute;left:0;right:0;top:10px;height:1px;background:var(--text-soft)}
.ruler .thr{position:absolute;top:3px;width:1px;height:15px;background:var(--text)}
.ruler .thr span{position:absolute;top:16px;left:-4ch;font:400 12px/14px var(--font-mono);color:var(--text-soft);white-space:nowrap}
.ruler .pt{position:absolute;top:6px;width:9px;height:9px;margin-left:-4px;border-radius:50%;background:var(--action)}

/* ── decisión firmada: un sello en latón, inmutable ── */
.seal{border:1px solid var(--seal);border-radius:var(--radius-md);padding:12px 15px;font-size:13px;line-height:1.55;color:var(--text)}
.seal .seal-t{display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--seal);margin-bottom:2px}

/* ── evidencia: filete de latón cuando la fuente está verificada ── */
.evidence{background:var(--surface-sunk);border-left:2px solid var(--rule);padding:12px 16px;border-radius:0}
.evidence.ok{border-left-color:var(--seal)}

/* ── utilidades de los controladores Stimulus ── */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:pre;border:0}
.ev-copy{display:flex;align-items:center;gap:6px 10px;margin-top:8px;flex-wrap:wrap}
.ev-copy .btn{white-space:nowrap}
.btn.sm{min-height:32px;padding:0 12px;font-size:13px}