/* ==========================================================================
   INNOVAI ERP — SISTEMA DE DISEÑO
   Tokens heredados de dashboard_engine/assets/executive_light_theme.css.
   Una sola fuente para todas las pantallas del ERP autónomo: html_pages la
   sirve desde aquí y Dash desde dashboard_engine/assets/erp.css, que debe ser
   idéntica (lo exige dashboard_engine/tests/test_sistema_diseno.py).
   Las filas y botones se llaman .erp-row y .erp-btn para convivir con
   Bootstrap, que Dash carga en todas las pantallas.
   ========================================================================== */

:root{
  /* Superficies — arena / alabastro */
  --bg-base:#FAF9F6; --surface:#FFFFFF; --surface-subtle:#F8F6F1; --surface-hover:#F3EFE6;
  --border-sand:#EBE8E1; --border-sand-strong:#DDD8CE;

  /* Navy — autoridad */
  --navy-950:#0A0F1D; --navy-900:#0F172A; --navy-800:#1E293B; --navy-700:#334155;

  /* Teal — motor cognitivo, salud contable */
  --teal-600:#0D9488; --teal-500:#14B8A6; --teal-100:#CCFBF1; --teal-50:#F0FDFA;

  /* Sky — balance y navegación */
  --sky-600:#0284C7; --sky-500:#0EA5E9; --sky-100:#E0F2FE; --sky-50:#F0F9FF;

  /* Semánticos de excepción */
  --amber-600:#B45309; --amber-100:#FEF3C7; --amber-50:#FFFBEB;
  --rose-600:#BE123C;  --rose-100:#FFE4E6;  --rose-50:#FFF1F2;

  --text-title:#0F172A; --text-body:#334155; --text-muted:#64748B; --text-light:#94A3B8;

  --shadow-subtle:0 1px 3px rgba(15,23,42,.04),0 1px 2px rgba(15,23,42,.02);
  --shadow-card:0 4px 14px rgba(15,23,42,.03),0 1px 3px rgba(15,23,42,.04);
  --shadow-elevated:0 12px 28px rgba(15,23,42,.06),0 4px 10px rgba(15,23,42,.04);

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-base); color:var(--text-body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.55;
}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;color:var(--text-title);letter-spacing:-.02em;margin:0}
a{color:var(--sky-600)}
.mono{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Estructura ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:32px 16px 64px}
.masthead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600);margin-bottom:6px}
.masthead h1{font-size:clamp(24px,3.4vw,34px);font-weight:800}
.masthead p{margin:8px 0 0;color:var(--text-muted);max-width:58ch;font-size:14px}
.stamp{background:var(--surface);border:1px solid var(--border-sand);border-radius:var(--radius-md);
  padding:10px 14px;box-shadow:var(--shadow-subtle);font-size:12px;color:var(--text-muted)}
.stamp strong{display:block;color:var(--text-title);font-size:13px;font-weight:600}

.grid-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:920px){.grid-2{grid-template-columns:1fr}}

/* ---------- Tarjetas de estado ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:26px 0 30px}
.tile{background:var(--surface);border:1px solid var(--border-sand);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-card)}
.tile .lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.tile .val{font-family:'Geist Mono',monospace;font-size:28px;font-weight:600;color:var(--text-title);margin-top:8px;font-variant-numeric:tabular-nums}
.tile .sub{font-size:12px;color:var(--text-light);margin-top:4px}
.tile.accent{border-color:var(--teal-100);background:linear-gradient(180deg,var(--teal-50),var(--surface) 62%)}
.tile.accent .val{color:var(--teal-600)}
.tile.warn{border-color:var(--amber-100);background:linear-gradient(180deg,var(--amber-50),var(--surface) 62%)}
.tile.warn .val{color:var(--amber-600)}
.tile.stop{border-color:var(--rose-100);background:linear-gradient(180deg,var(--rose-50),var(--surface) 62%)}
.tile.stop .val{color:var(--rose-600)}

/* ---------- Paneles ---------- */
.panel{background:var(--surface);border:1px solid var(--border-sand);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.panel + .panel{margin-top:20px}
.grid-2 > .panel + .panel{margin-top:0} /* lado a lado, no apilados */
.panel-head{padding:16px 18px;border-bottom:1px solid var(--border-sand);background:var(--surface-subtle);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:15px;font-weight:700}
.panel-head .hint{font-size:12px;color:var(--text-muted)}
.panel-body{padding:18px}

/* ---------- Distintivos de severidad ---------- */
.sev{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--radius-full);white-space:nowrap}
.sev.block{background:var(--rose-100);color:var(--rose-600)}
.sev.rev{background:var(--amber-100);color:var(--amber-600)}
.sev.info{background:var(--sky-100);color:var(--sky-600)}
.sev.ok{background:var(--teal-100);color:var(--teal-600)}
.sev.na{background:var(--surface-subtle);color:var(--text-light);border:1px solid var(--border-sand-strong)}

/* ---------- Cola de trabajo ---------- */
.queue{list-style:none;margin:0;padding:0}
.queue li{border-bottom:1px solid var(--border-sand)}
.queue li:last-child{border-bottom:none}
.erp-row{width:100%;display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:none;border:0;
  text-align:left;cursor:pointer;font:inherit;color:inherit;transition:background .15s}
.erp-row:hover{background:var(--surface-hover)}
.erp-row[aria-current="true"]{background:var(--sky-50);box-shadow:inset 3px 0 0 var(--sky-500)}
.erp-row:focus-visible{outline:2px solid var(--sky-600);outline-offset:-2px}
.erp-row .body{flex:1;min-width:0}
.erp-row .title{font-weight:600;color:var(--text-title);font-size:14px;display:block}
.erp-row .meta{font-size:12.5px;color:var(--text-muted);margin-top:3px;display:block}
.count{font-family:'Geist Mono',monospace;font-size:19px;font-weight:600;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.count.block{color:var(--rose-600)} .count.rev{color:var(--amber-600)}
.count.info{color:var(--sky-600)}  .count.ok{color:var(--teal-600)}

/* ---------- Cadena de evidencia ---------- */
.chain{list-style:none;margin:0;padding:0}
.chain li{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border-sand)}
.chain li:last-child{border-bottom:none}
.chain .step{font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;color:var(--text-light);min-width:26px;padding-top:2px}
.chain .what{flex:1}
.chain .what b{display:block;color:var(--text-title);font-size:13.5px;font-weight:600}
.chain .what > span{font-size:12.5px;color:var(--text-muted)}
.verdict{font-family:'Geist Mono',monospace;font-size:12px;font-weight:600;white-space:nowrap;padding-top:2px}
.verdict.ok{color:var(--teal-600)} .verdict.no{color:var(--rose-600)} .verdict.na{color:var(--text-light)}

/* ---------- Medidor de confianza ---------- */
.conf{padding:14px;border:1px solid var(--border-sand);border-radius:var(--radius-md)}
.conf h3{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.bar{height:9px;border-radius:var(--radius-full);background:var(--border-sand);margin:11px 0 7px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--amber-600),var(--teal-500))}
.bar.ok i{background:linear-gradient(90deg,var(--teal-500),var(--teal-600))}
.legend{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted)}
.kv{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px}
.kv td{padding:4px 0;color:var(--text-muted)}
.kv td:last-child{text-align:right;font-family:'Geist Mono',monospace;color:var(--text-body)}

/* ---------- Botones ---------- */
.actions{display:flex;flex-wrap:wrap;gap:9px}
.erp-btn{font:inherit;font-size:13px;font-weight:600;padding:9px 15px;border-radius:var(--radius-sm);
  cursor:pointer;border:1px solid transparent;transition:transform .12s,background .15s}
.erp-btn:active{transform:translateY(1px)}
.erp-btn.primary{background:var(--navy-900);color:#fff;box-shadow:0 4px 12px rgba(15,23,42,.22)}
.erp-btn.primary:hover{background:var(--navy-800)}
.erp-btn.ghost{background:var(--surface);color:var(--text-body);border-color:var(--border-sand-strong)}
.erp-btn.ghost:hover{background:var(--surface-hover)}
.erp-btn[disabled]{opacity:.45;cursor:not-allowed}
.erp-btn:focus-visible{outline:2px solid var(--sky-600);outline-offset:2px}

/* ---------- Tablas ---------- */
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data thead th{background:var(--surface-subtle);text-align:left;padding:11px 14px;font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border-sand)}
table.data th.n,table.data td.n{text-align:right;font-family:'Geist Mono',monospace;font-variant-numeric:tabular-nums}
table.data tbody td{padding:11px 14px;border-bottom:1px solid var(--border-sand);color:var(--text-body)}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--surface-hover)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);
  background:var(--surface-subtle);border:1px solid var(--border-sand-strong);color:var(--text-muted)}

/* ---------- Notas ---------- */
.note{padding:11px 13px;border-left:3px solid var(--teal-500);background:var(--teal-50);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:12.5px;color:var(--text-body)}
.note.warn{border-left-color:var(--amber-600);background:var(--amber-50)}
.note.stop{border-left-color:var(--rose-600);background:var(--rose-50)}
.foot{margin-top:26px;padding:16px 18px;border:1px dashed var(--border-sand-strong);
  border-radius:var(--radius-md);font-size:12.5px;color:var(--text-muted);background:var(--surface)}
.foot b{color:var(--text-title)}

/* ---------- Progreso de cierre ---------- */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 18px;border-bottom:1px solid var(--border-sand)}
.steps li:last-child{border-bottom:none}
.dot{width:22px;height:22px;border-radius:var(--radius-full);flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;margin-top:1px}
.dot.done{background:var(--teal-100);color:var(--teal-600)}
.dot.todo{background:var(--amber-100);color:var(--amber-600)}
.dot.stop{background:var(--rose-100);color:var(--rose-600)}
.dot.na{background:var(--surface-subtle);color:var(--text-light);border:1px solid var(--border-sand-strong)}
.steps .what{flex:1;min-width:0}
.steps .what b{display:block;color:var(--text-title);font-size:14px;font-weight:600}
.steps .what > span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}

/* ==========================================================================
   MARCO DE LA APLICACIÓN
   Dos facetas sobre el mismo motor: Operación (quien contabiliza) y
   Gobierno (quien responde por el motor). El marco las hace explícitas.
   ========================================================================== */
.app{display:grid;grid-template-columns:254px minmax(0,1fr);min-height:100vh}
.sidenav{background:var(--navy-950);display:flex;flex-direction:column;padding:18px 12px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 10px}
.brand .mark{width:27px;height:27px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal-500),var(--sky-600));color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800}
.brand b{display:block;color:#F1F5F9;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.brand small{display:block;color:#64748B;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.navgroup{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#475569;padding:17px 10px 6px}
.navlink{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);
  color:#CBD5E1;text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.navlink:hover{background:var(--navy-800);color:#F1F5F9}
.navlink[aria-current="page"],.navlink.is-active{background:var(--navy-800);color:#fff;font-weight:600;box-shadow:inset 2px 0 0 var(--teal-500)}
.navlink:focus-visible{outline:2px solid var(--sky-500);outline-offset:-2px}
.navlink .tag{margin-left:auto;flex:none;font-family:'Geist Mono',monospace;font-size:10.5px;font-weight:600;
  padding:1px 7px;border-radius:var(--radius-full);letter-spacing:.01em;white-space:nowrap}
.navlink .tag.rev{background:rgba(180,83,9,.26);color:#FCD34D}
.navlink .tag.block{background:rgba(190,18,60,.26);color:#FDA4AF}
.navlink .tag.off{background:#1E293B;color:#64748B}
.navlink.soon{opacity:.4;cursor:not-allowed;pointer-events:none}
/* El admin ve el módulo, pero la compañía no lo tiene: el cliente no lo verá. */
.navlink.unassigned{opacity:.5} .navlink.unassigned:hover,.navlink.unassigned.is-active{opacity:1}
.navfoot{margin-top:auto;padding:14px 10px 2px;border-top:1px solid var(--navy-800);color:#64748B;font-size:11px}
.navfoot b{display:block;color:#E2E8F0;font-size:12.5px;font-weight:600;margin-bottom:1px}
.navfoot > span{display:block}
.navlogout{margin-top:10px;font:inherit;font-size:12px;font-weight:600;color:#94A3B8;background:none;
  border:1px solid var(--navy-800);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;width:100%;text-align:left}
.navlogout:hover{background:var(--navy-800);color:#F1F5F9}
.navlogout:focus-visible{outline:2px solid var(--sky-500);outline-offset:1px}
.navlink .fa-fw{color:#64748B;flex:none} .navlink.is-active .fa-fw,.navlink:hover .fa-fw{color:var(--teal-500)}

.viewport{min-width:0;display:flex;flex-direction:column}
/* Una tabla ancha se desplaza dentro del contenido; nunca ensancha la página. */
.viewport > main{min-width:0;overflow-x:auto}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 22px;border-bottom:1px solid var(--border-sand);
  background:rgba(250,249,246,.9);backdrop-filter:blur(10px)}
.tenant{display:flex;align-items:center;gap:9px;font:inherit;font-size:13px;font-weight:600;color:var(--text-title);
  background:var(--surface);border:1px solid var(--border-sand-strong);border-radius:var(--radius-sm);
  padding:6px 11px;cursor:pointer;transition:background .15s}
.tenant:hover{background:var(--surface-hover)}
a.tenant{text-decoration:none}
.tenant-mark{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--teal-50);border:1px solid var(--teal-100);color:var(--teal-600);font-size:10px;font-weight:800}
.tenant small{font-weight:500;font-size:11.5px;color:var(--text-muted)}
.tenant .caret{color:var(--text-light);font-size:10px}
.faces{display:flex;gap:3px;padding:3px;background:var(--surface-subtle);
  border:1px solid var(--border-sand-strong);border-radius:var(--radius-sm)}
.faces a{padding:5px 13px;border-radius:4px;font-size:12.5px;font-weight:600;color:var(--text-muted);text-decoration:none}
.faces a:hover{color:var(--text-title)}
.faces a[aria-current="true"],.faces a.is-active{background:var(--surface);color:var(--text-title);box-shadow:var(--shadow-subtle)}
.faces a:focus-visible{outline:2px solid var(--sky-600);outline-offset:1px}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-muted)}
.topbar .who .avatar{width:26px;height:26px;border-radius:var(--radius-full);flex:none;display:grid;place-items:center;
  background:var(--navy-900);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.topbar .who b{display:block;color:var(--text-title);font-size:12.5px;font-weight:600;line-height:1.3}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border-sand-strong);border-radius:var(--radius-full);padding:4px 11px}
.live i{width:7px;height:7px;border-radius:var(--radius-full);background:var(--teal-500);flex:none}
.live.off i{background:var(--text-light)} .live.stop i{background:var(--rose-600)}

@media (max-width:920px){
  /* La barra pasa a ser una tira desplazable; sin min-width:0 su contenido
     ensancharía la rejilla y arrastraría toda la página al scroll lateral. */
  .app{grid-template-columns:minmax(0,1fr)}
  .sidenav{position:static;height:auto;min-width:0;flex-direction:row;overflow-x:auto;
    align-items:center;gap:6px;padding:10px 14px}
  .brand{padding:0 12px 0 2px;flex:none} .brand small{display:none}
  .navgroup{display:none}
  .navlist{display:contents}
  .navlink{flex:none;white-space:nowrap}
  /* Cerrar sesión sigue al alcance: sólo se ocultan nombre y rol. */
  .navfoot{flex:none;margin:0;padding:0 0 0 6px;border:0}
  .navfoot b,.navfoot > span{display:none}
  .navlogout{margin:0;width:auto;white-space:nowrap}
  .topbar{padding:10px 16px}
}

/* ---------- Controles de formulario ---------- */
.field{display:block;margin-bottom:15px}
.field > label{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px}
.field .help{font-size:12px;color:var(--text-light);margin-top:6px}
.input,select.input{width:100%;font:inherit;font-size:13.5px;color:var(--text-title);background:var(--surface);
  border:1px solid var(--border-sand-strong);border-radius:var(--radius-sm);padding:9px 11px}
.input:focus-visible{outline:2px solid var(--sky-600);outline-offset:-1px}
.input:disabled{background:var(--surface-subtle);color:var(--text-light);cursor:not-allowed}
.seg{display:flex;gap:3px;padding:3px;background:var(--surface-subtle);
  border:1px solid var(--border-sand-strong);border-radius:var(--radius-sm)}
.seg button{flex:1;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-muted);background:none;
  border:0;border-radius:4px;padding:7px 10px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text-title);box-shadow:var(--shadow-subtle)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.seg button:focus-visible{outline:2px solid var(--sky-600);outline-offset:1px}
.switch{display:flex;align-items:flex-start;gap:12px;padding:13px;background:var(--surface-subtle);
  border:1px solid var(--border-sand-strong);border-radius:var(--radius-md);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:40px;height:23px;border-radius:var(--radius-full);background:var(--border-sand-strong);
  flex:none;padding:3px;transition:background .18s;margin-top:1px}
.switch .track i{display:block;width:17px;height:17px;border-radius:var(--radius-full);background:#fff;
  box-shadow:var(--shadow-subtle);transition:transform .18s}
.switch input:checked + .track{background:var(--teal-600)}
.switch input:checked + .track i{transform:translateX(17px)}
.switch input:focus-visible + .track{outline:2px solid var(--sky-600);outline-offset:2px}
.switch input:disabled + .track{opacity:.45}
.switch .txt b{display:block;font-size:13.5px;font-weight:600;color:var(--text-title)}
.switch .txt > span{display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px}

/* Eliminar = archivar (S1): panel en la misma fila, con motivo y contraseña */
.eliminar-panel{flex-basis:100%;grid-column:1/-1;display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px 14px;border:1px solid var(--rose-100);border-radius:12px;background:#FFF7F7}
.eliminar-panel[hidden]{display:none}
.erp-btn.danger{background:var(--rose-600);color:#FFF;border-color:var(--rose-600)}