/* =====================================================================
   FINANCOOP × SURMET · Sistema de diseño "Lectura inteligente de liquidaciones"
   CSS puro, sin dependencias externas (la CSP de la plataforma solo permite
   recursos propios: fuente del sistema). Todos los montos con cifras tabulares.
   Sin estilos en línea en el HTML ni en el JS: la CSP lo exige.
   Índice
     1. Tokens            6. Botones            11. Alertas y toasts
     2. Base              7. Formularios        12. Modal y panel lateral
     3. Estructura        8. Tablas             13. Visor de documento
     4. Encabezados       9. Pills y etiquetas  14. Ficha de persona
     5. Tarjetas y KPI   10. Pestañas/segmentos 15. Vacíos, esqueletos, utilidades
   ===================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  /* Marca */
  --navy-950:#071528; --navy-900:#0b1f3a; --navy-800:#13305a; --navy-700:#1d4170;
  --navy-100:#dfe6f1; --navy-50:#eef2f8;
  --emerald-300:#6ee7b7; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857; --emerald-800:#065f46;
  --emerald-100:#d1fae5; --emerald-50:#ecfdf5;
  --amber-500:#f59e0b; --amber-700:#b45309; --amber-800:#92400e; --amber-100:#fef3c7; --amber-50:#fffbeb;
  --red-700:#b91c1c; --red-50:#fef2f2; --red-100:#fee2e2;
  /* Neutros (tinte frío, alineado al navy) */
  --ink-900:#0f172a; --ink-800:#1e293b; --ink-700:#334155; --ink-600:#475569; --ink-500:#64748b; --ink-400:#94a3b8;
  --line:#e3e8ef; --line-strong:#cbd5e1;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f4f8;

  /* Semántica */
  --text:var(--ink-900); --text-2:var(--ink-600); /* --text-2 cumple AA (7:1) sobre blanco y sobre --bg */
  --accent:var(--emerald-700);                     /* emerald con contraste AA para texto y botón primario */
  --accent-hover:var(--emerald-800);
  --focus:0 0 0 2px var(--surface),0 0 0 4px var(--emerald-600);
  --focus-dark:0 0 0 2px var(--navy-900),0 0 0 4px var(--emerald-300);

  /* Tipografía */
  --font:"Segoe UI Variable Text","Segoe UI",ui-sans-serif,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;
  --fs-11:.6875rem; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-22:1.375rem; --fs-28:1.75rem; --fs-36:2.25rem; --fs-44:2.75rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh:1.55;

  /* Espaciado (escala de 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;

  /* Radios */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Sombras (difusas, teñidas de navy; nunca negras duras) */
  --sh-1:0 1px 2px rgba(11,31,58,.05),0 0 0 1px rgba(11,31,58,.05);
  --sh-2:0 1px 2px rgba(11,31,58,.04),0 6px 16px -6px rgba(11,31,58,.10),0 0 0 1px rgba(11,31,58,.05);
  --sh-3:0 2px 4px rgba(11,31,58,.04),0 16px 32px -12px rgba(11,31,58,.18),0 0 0 1px rgba(11,31,58,.05);
  --sh-4:0 32px 64px -16px rgba(7,21,40,.35),0 0 0 1px rgba(11,31,58,.06);

  /* Capas */
  --z-sticky:10; --z-sidebar:20; --z-topbar:30; --z-drawer:40; --z-modal:50; --z-toast:60; --z-tooltip:70;

  /* Movimiento */
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-fast:120ms; --t:180ms; --t-slow:260ms;

  --sidebar-w:256px; --content-max:1280px;
}

/* ---------------------------------------------------------------- 2. Base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--font);font-size:var(--fs-14);line-height:var(--lh);color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em;color:var(--navy-900)}
p{margin:0}
code,kbd,.mono{font-family:var(--mono);font-size:.92em}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
::selection{background:var(--emerald-100);color:var(--navy-900)}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px}.ico-lg{width:22px;height:22px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-60px;z-index:var(--z-tooltip);background:var(--navy-900);color:#fff;padding:var(--s-2) var(--s-4);border-radius:var(--r-md);transition:transform var(--t) var(--ease-out)}
.skip:focus-visible{transform:translateY(76px)}

/* ---------------------------------------------------------------- 3. Estructura */
.shell{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;background:var(--navy-900);color:#dbe4f0;display:flex;flex-direction:column;
  padding:var(--s-6) var(--s-4) var(--s-5);z-index:var(--z-sidebar);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.brand{display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-2) var(--s-6)}
.brand .logo-fc{height:34px;width:auto;filter:brightness(0) invert(1)}
.brand .logo-sm{height:17px;width:auto}
.brand .x{color:rgba(255,255,255,.45);font-size:var(--fs-14)}
.product{padding:0 var(--s-2) var(--s-5);font-size:var(--fs-12);color:#9fb0c8;line-height:var(--lh-snug)}
.product b{display:block;color:#fff;font-size:var(--fs-13);font-weight:600;margin-bottom:2px}
.nav{display:flex;flex-direction:column;gap:var(--s-5)}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.12em;color:#7f93b0;font-weight:600;padding:0 var(--s-3) var(--s-2)}
.nav-item{display:flex;align-items:center;gap:var(--s-3);width:100%;border:0;background:transparent;color:#c9d5e6;text-align:left;
  padding:9px var(--s-3);border-radius:var(--r-md);font-size:var(--fs-14);font-weight:500;
  transition:background-color var(--t) ease,color var(--t) ease}
.nav-item .ico{color:#8aa0bf;transition:color var(--t) ease}
.nav-item .count{margin-left:auto;font-size:var(--fs-11);font-weight:700;min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;background:var(--amber-500);color:var(--navy-950)}
@media (hover:hover) and (pointer:fine){.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}.nav-item:hover .ico{color:#fff}}
.nav-item[aria-current="page"]{background:rgba(255,255,255,.10);color:#fff;font-weight:600}
.nav-item[aria-current="page"] .ico{color:var(--emerald-300)}
.nav-item:focus-visible{box-shadow:var(--focus-dark)}
.sidebar-foot{margin-top:auto;padding:var(--s-5) var(--s-2) 0;font-size:var(--fs-12);color:#8aa0bf;display:flex;align-items:center;gap:var(--s-2)}
.sidebar-foot img{height:13px;width:auto;opacity:.9}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:var(--s-4);padding:var(--s-3) var(--s-8);
  background:rgba(244,246,249,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.topbar .crumb{font-size:var(--fs-13);color:var(--text-2);display:flex;align-items:center;gap:var(--s-2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .crumb b{color:var(--navy-900);font-weight:600}
.topbar .spacer{flex:1}
.topbar .m-brand{display:none}
.topbar .menu-btn{display:none}
.user-chip{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-13);white-space:nowrap}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--navy-800);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-12);letter-spacing:.02em;flex:none}
.user-chip .who{line-height:1.25}.user-chip .who b{display:block;font-weight:600;color:var(--navy-900)}.user-chip .who span{color:var(--text-2);font-size:var(--fs-12)}
.content{width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--s-6) var(--s-8) var(--s-16)}
.view{display:none}.view.is-active{display:block;animation:viewIn var(--t-slow) var(--ease-out)}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stack{display:flex;flex-direction:column;gap:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-6);align-items:start}
.split-aside{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:var(--s-6);align-items:start}
.row{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}

/* ---------------------------------------------------------------- 4. Encabezados */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;margin:var(--s-4) 0 var(--s-8)}
.page-head .txt{max-width:720px}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);margin-bottom:var(--s-3)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald-500)}
.page-head h1{font-size:var(--fs-28);line-height:var(--lh-tight);letter-spacing:-.02em}
.lead{color:var(--text-2);font-size:var(--fs-16);line-height:var(--lh);margin-top:var(--s-3);max-width:68ch}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
.section-title h2{font-size:var(--fs-18);letter-spacing:-.01em}
.section-title p{color:var(--text-2);font-size:var(--fs-13);margin-top:2px}
.demo-tag{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:600;color:var(--navy-800);background:var(--navy-50);
  padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}

/* ---------------------------------------------------------------- 5. Tarjetas y KPI */
.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:var(--s-6);min-width:0}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-5) var(--s-6)}
.card-head h2{font-size:var(--fs-16)}
.card-head p{color:var(--text-2);font-size:var(--fs-13);margin-top:2px}
.card-sub{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-4)}
.card h3{font-size:var(--fs-14);margin-bottom:var(--s-2)}
.card p.body{color:var(--ink-700);font-size:var(--fs-13)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-6)}
.kpi{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.kpi .k-label{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-13);color:var(--text-2);font-weight:500}
.kpi .k-label .ico{color:var(--ink-400)}
.kpi .k-value{font-size:var(--fs-28);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--navy-900);font-variant-numeric:tabular-nums}
.kpi .k-foot{font-size:var(--fs-12);color:var(--text-2)}
.kpi.is-good .k-value{color:var(--emerald-700)}
.kpi.is-attn .k-value{color:var(--amber-700)}
.kpi.is-feature{background:var(--navy-900);box-shadow:var(--sh-3)}
.kpi.is-feature .k-label,.kpi.is-feature .k-foot{color:#b7c6dc}.kpi.is-feature .k-value{color:#fff}
.kpi.is-feature .k-label .ico{color:var(--emerald-300)}
.feature{display:flex;gap:var(--s-4);align-items:flex-start}
.feature .f-ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--emerald-50);color:var(--emerald-700);display:flex;align-items:center;justify-content:center;flex:none}
.feature h3{margin:0 0 4px}
.feature p{color:var(--ink-700);font-size:var(--fs-13)}

/* ---------------------------------------------------------------- 6. Botones */
.btn{--h:40px;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--h);padding:0 var(--s-4);border-radius:var(--r-md);
  border:0;font-size:var(--fs-14);font-weight:600;white-space:nowrap;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--t) ease,color var(--t) ease,box-shadow var(--t) ease,transform var(--t-fast) var(--ease-out),opacity var(--t) ease}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(4,120,87,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-navy{background:var(--navy-900);color:#fff;box-shadow:0 1px 2px rgba(11,31,58,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-secondary{background:var(--surface);color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 2px rgba(11,31,58,.05)}
.btn-ghost{background:transparent;color:var(--navy-800)}
.btn-danger-ghost{background:transparent;color:var(--red-700)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover:not(:disabled){background:var(--accent-hover)}
  .btn-navy:hover:not(:disabled){background:var(--navy-800)}
  .btn-secondary:hover:not(:disabled){background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink-400)}
  .btn-ghost:hover:not(:disabled){background:var(--navy-50)}
}
.btn:focus-visible{box-shadow:var(--focus)}
.btn-sm{--h:32px;padding:0 var(--s-3);font-size:var(--fs-13);border-radius:var(--r-sm)}
.btn-lg{--h:48px;padding:0 var(--s-6);font-size:var(--fs-16)}
.btn-block{width:100%}
.btn-icon{--h:36px;width:var(--h);padding:0}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.btn-secondary .spin,.btn-ghost .spin{border-color:var(--line-strong);border-top-color:var(--navy-800)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- 7. Formularios */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.label{font-size:var(--fs-13);font-weight:600;color:var(--ink-700)}
.input,.select,.textarea{width:100%;height:44px;padding:0 var(--s-3);border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);
  font-size:var(--fs-14);color:var(--text);transition:border-color var(--t) ease,box-shadow var(--t) ease}
.textarea{height:auto;min-height:96px;padding:var(--s-3);resize:vertical;line-height:var(--lh)}
.input::placeholder,.textarea::placeholder{color:var(--ink-500)}
@media (hover:hover){.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-400)}}
.input:focus,.select:focus,.textarea:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(16,185,129,.22);outline:none}
.input[aria-invalid="true"]{border-color:var(--red-700);box-shadow:0 0 0 3px rgba(185,28,28,.12)}
.input:disabled{background:var(--surface-3);color:var(--ink-500)}
.hint{font-size:var(--fs-12);color:var(--text-2)}
.field-error{font-size:var(--fs-13);color:var(--red-700);min-height:20px;display:flex;align-items:center;gap:6px}
.search{position:relative;min-width:0;flex:1 1 260px}
.search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-500);pointer-events:none}
.search .input{padding-left:38px}
.input-num{text-align:right;font-variant-numeric:tabular-nums;width:140px}
.choice{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow var(--t) ease,background-color var(--t) ease}
.choice input{margin:3px 0 0;accent-color:var(--emerald-700);width:16px;height:16px;flex:none}
.choice b{display:block;font-size:var(--fs-14);color:var(--navy-900)}
.choice span{font-size:var(--fs-13);color:var(--text-2)}
.choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--emerald-600);background:var(--emerald-50)}
.choice:has(input:focus-visible){box-shadow:var(--focus)}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s-2);padding:var(--s-8) var(--s-6);
  border-radius:var(--r-lg);background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;
  transition:background-color var(--t) ease,box-shadow var(--t) ease}
.dropzone .dz-ico{width:48px;height:48px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;color:var(--emerald-700);margin-bottom:var(--s-2)}
.dropzone b{color:var(--navy-900);font-size:var(--fs-14)}
.dropzone span{color:var(--text-2);font-size:var(--fs-13)}
.dropzone.is-over{background:var(--emerald-50);box-shadow:inset 0 0 0 2px var(--emerald-600)}
.dropzone:focus-visible{box-shadow:inset 0 0 0 2px var(--emerald-600),var(--focus)}

/* ---------------------------------------------------------------- 8. Tablas */
.table-wrap{overflow:auto;max-height:560px;border-radius:0 0 var(--r-lg) var(--r-lg);overscroll-behavior:contain}
.table-wrap.is-short{max-height:none}
.table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-14)}
.table th{position:sticky;top:0;z-index:1;background:var(--surface-2);text-align:left;font-size:var(--fs-12);font-weight:600;color:var(--text-2);
  padding:10px var(--s-4);white-space:nowrap;box-shadow:inset 0 -1px 0 var(--line)}
.table td{padding:14px var(--s-4);border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-800)}
.table tbody tr:last-child td{border-bottom:0}
.table th:first-child,.table td:first-child{padding-left:var(--s-6)}
.table th:last-child,.table td:last-child{padding-right:var(--s-6)}
.table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.table .strong{font-weight:600;color:var(--navy-900)}
.table .muted{color:var(--text-2)}
.table .nowrap{white-space:nowrap}
.table .folio{font-family:var(--mono);font-size:var(--fs-13);color:var(--navy-800);white-space:nowrap}
.table tr.is-link{cursor:pointer;transition:background-color var(--t-fast) ease}
@media (hover:hover){.table tr.is-link:hover td{background:#f5faf8}}
.table tr.is-link:focus-visible{outline:none;box-shadow:none}
.table tr.is-link:focus-visible td{background:var(--emerald-50)}
.table tr.is-link:focus-visible td:first-child{box-shadow:inset 3px 0 0 var(--emerald-600)}
.table tr.is-new td{animation:rowIn 900ms var(--ease-out)}
@keyframes rowIn{from{background:var(--emerald-50)}to{background:transparent}}
.cell-person{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.cell-person .avatar{width:32px;height:32px;background:var(--navy-50);color:var(--navy-800)}
.cell-person b{display:block;font-weight:600;color:var(--navy-900);white-space:nowrap}
.cell-person span{font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums}
.file{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.file .ficon{width:34px;height:34px;border-radius:var(--r-sm);background:var(--red-50);color:var(--red-700);display:flex;align-items:center;justify-content:center;flex:none;font-size:10px;font-weight:800;letter-spacing:.04em}
.file .ficon.img{background:var(--navy-50);color:var(--navy-800)}
.file b{display:block;font-weight:600;color:var(--navy-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.file span{font-size:var(--fs-12);color:var(--text-2)}
/* En pantallas angostas, las tablas marcadas .table-stack pasan a tarjetas */
@media (max-width:720px){
  .table-stack thead{display:none}
  .table-stack,.table-stack tbody,.table-stack tr,.table-stack td{display:block;width:100%}
  .table-stack tr{padding:var(--s-4) var(--s-4);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--s-3);align-items:center}
  .table-stack tbody tr:last-child{border-bottom:0}
  .table-stack td{padding:0!important;border:0!important;text-align:left}
  .table-stack td.n{text-align:right}
  .table-stack td[data-col="main"]{grid-column:1/2}
  .table-stack td[data-col="end"]{grid-column:2/3;justify-self:end;text-align:right}
  .table-stack td[data-col="full"]{grid-column:1/-1}
  .table-stack td[data-col="hide"]{display:none}
  .table-stack td[data-label]::before{content:attr(data-label) " ";color:var(--text-2);font-size:var(--fs-12);font-weight:500}
  .table-stack tr.is-link:focus-visible{box-shadow:inset 3px 0 0 var(--emerald-600)}
  .table-wrap{max-height:none}
}

/* ---------------------------------------------------------------- 9. Pills y etiquetas */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;white-space:nowrap;line-height:1}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.pill-ok{background:var(--emerald-50);color:var(--emerald-800)}
.pill-attn{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.pill-info{background:var(--navy-50);color:var(--navy-800)}
.pill-neutral{background:var(--surface-3);color:var(--ink-600)}
.pill-run{background:var(--navy-50);color:var(--navy-800)}
.pill-run::before{animation:pulse 1.1s var(--ease-in-out) infinite}
.pill-err{background:var(--red-50);color:var(--red-700)}
@keyframes pulse{50%{opacity:.25}}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-sm);font-size:var(--fs-11);font-weight:700;letter-spacing:.02em;white-space:nowrap}
.t-imp{background:#e0eaff;color:#1e3a8a}.t-noimp{background:#e0f2fe;color:#075985}.t-leg{background:var(--navy-50);color:var(--navy-800)}
.t-otr{background:var(--surface-3);color:var(--ink-700)}.t-tot{background:var(--emerald-50);color:var(--emerald-800)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-sm);font-size:var(--fs-12);font-weight:600;background:var(--surface-3);color:var(--ink-700)}
.chip.ai{background:var(--emerald-50);color:var(--emerald-800)}
.chip.trg{background:var(--navy-900);color:#fff}
.chip.db{background:var(--navy-50);color:var(--navy-800)}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.chain .sep{color:var(--ink-400);width:14px;height:14px}

/* ---------------------------------------------------------------- 10. Pestañas y segmentos */
.segmented{display:inline-flex;background:var(--surface-3);border-radius:var(--r-md);padding:4px;gap:4px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.segmented button{border:0;background:transparent;border-radius:var(--r-sm);height:34px;padding:0 var(--s-4);font-size:var(--fs-13);font-weight:600;color:var(--ink-600);
  white-space:nowrap;display:inline-flex;align-items:center;gap:var(--s-2);transition:background-color var(--t) ease,color var(--t) ease,box-shadow var(--t) ease}
.segmented button[aria-selected="true"],.segmented button.is-on{background:var(--surface);color:var(--navy-900);box-shadow:0 1px 2px rgba(11,31,58,.08),0 0 0 1px rgba(11,31,58,.04)}
.segmented .badge{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--line);color:var(--ink-700);font-size:var(--fs-11);display:inline-flex;align-items:center;justify-content:center}
.segmented button[aria-selected="true"] .badge.attn{background:var(--amber-100);color:var(--amber-800)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.filter{height:32px;padding:0 var(--s-3);border-radius:var(--r-pill);border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:var(--fs-13);font-weight:600;color:var(--ink-700);
  transition:background-color var(--t) ease,color var(--t) ease,box-shadow var(--t) ease}
.filter[aria-pressed="true"]{background:var(--navy-900);color:#fff;box-shadow:none}

/* ---------------------------------------------------------------- 11. Alertas y toasts */
.alert{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border-radius:var(--r-md);font-size:var(--fs-14);line-height:var(--lh)}
.alert .ico{margin-top:2px}
.alert b{color:inherit}
.alert-info{background:var(--navy-50);color:var(--navy-800)}
.alert-ok{background:var(--emerald-50);color:var(--emerald-800)}
.alert-attn{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.alert-err{background:var(--red-50);color:var(--red-700)}
.alert .a-body{flex:1;min-width:0}
.alert .a-body p+p{margin-top:var(--s-2)}
.toasts{position:fixed;right:var(--s-6);bottom:var(--s-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-end;pointer-events:none;max-width:calc(100vw - 32px)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--s-3);background:var(--navy-900);color:#fff;padding:12px var(--s-4);border-radius:var(--r-md);
  box-shadow:var(--sh-4);font-size:var(--fs-14);max-width:420px;opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.toast .ico{color:var(--emerald-300)}
.toast.is-attn .ico{color:var(--amber-500)}
.toast.is-entering,.toast.is-leaving{opacity:0;transform:translateY(12px) scale(.98)}
.toast.is-leaving{transition-duration:var(--t)}

/* ---------------------------------------------------------------- 12. Modal y panel lateral */
.overlay{position:fixed;inset:0;background:rgba(7,21,40,.48);z-index:var(--z-modal);opacity:0;pointer-events:none;transition:opacity var(--t-slow) var(--ease-out)}
.overlay.is-open{opacity:1;pointer-events:auto}
.modal{position:fixed;left:50%;top:50%;z-index:calc(var(--z-modal) + 1);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);display:flex;flex-direction:column;
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-4);opacity:0;pointer-events:none;transform:translate(-50%,-48%) scale(.97);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.modal.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal-lg{width:min(1080px,calc(100vw - 32px))}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:var(--s-6) var(--s-6) var(--s-4)}
.modal-head h2{font-size:var(--fs-18)}
.modal-head p{color:var(--text-2);font-size:var(--fs-13);margin-top:4px}
.modal-body{padding:0 var(--s-6) var(--s-6);overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--s-3);padding:var(--s-4) var(--s-6);background:var(--surface-2);border-radius:0 0 var(--r-xl) var(--r-xl);flex-wrap:wrap}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(620px,100vw);background:var(--bg);box-shadow:var(--sh-4);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform 320ms var(--ease-drawer);visibility:hidden}
.drawer.is-open{transform:none;visibility:visible}
.drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);padding:var(--s-6);background:var(--surface);box-shadow:0 1px 0 var(--line)}
.drawer-body{flex:1;overflow:auto;padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-5)}
.overlay.for-drawer{z-index:calc(var(--z-drawer) - 1)}
/* Menú móvil: la barra lateral se vuelve panel deslizable */

/* ---------------------------------------------------------------- 13. Visor de documento */
.doc-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-6)}
.doc-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0;background:var(--surface);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  box-shadow:var(--sh-1);transition:box-shadow var(--t) ease,background-color var(--t) ease}
.doc-opt b{font-size:var(--fs-14);color:var(--navy-900)}
.doc-opt span{font-size:var(--fs-12);color:var(--text-2)}
.doc-opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--emerald-600),var(--sh-1);background:var(--emerald-50)}
.scan-stage{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--navy-800);padding:var(--s-6);box-shadow:var(--sh-2)}
.scan-stage.is-light{background:#e8edf3}
.scan-beam{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;opacity:0;z-index:3;
  background:linear-gradient(180deg,rgba(16,185,129,0) 0%,rgba(16,185,129,.16) 70%,rgba(16,185,129,.55) 100%);transform:translateY(-64px)}
.scan-beam.go{animation:beam 1.6s var(--ease-in-out) forwards}
@keyframes beam{0%{opacity:1;transform:translateY(-64px)}92%{opacity:1}100%{opacity:0;transform:translateY(var(--beam-end,640px))}}
.scan{background:#fbfaf6;color:#222;font-family:"Courier New",Consolas,monospace;font-size:12px;line-height:1.45;padding:22px 24px;position:relative;
  box-shadow:0 18px 36px -12px rgba(0,0,0,.45);transform:rotate(-.5deg)}
.scan::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.016) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.scan h3{margin:0 0 2px;font-size:14px;text-align:center;letter-spacing:.05em;color:#111;font-family:inherit}
.scan .hd{display:flex;justify-content:space-between;gap:10px;font-size:11px;margin:8px 0 10px;border-top:1px dashed #999;border-bottom:1px dashed #999;padding:6px 0;flex-wrap:wrap}
.scan .ln{display:flex;justify-content:space-between;gap:8px;padding:2px 4px;border-radius:3px;transition:background-color var(--t) ease,box-shadow var(--t) ease}
.scan .ln.hl{background:rgba(16,185,129,.24);box-shadow:0 0 0 1.5px var(--emerald-600)}
.scan .ln.hlw{background:rgba(245,158,11,.28);box-shadow:0 0 0 1.5px var(--amber-500)}
.scan .grp{font-weight:700;margin:8px 0 3px;text-decoration:underline}
.scan .tot{font-weight:700;border-top:1px solid #444;margin-top:4px;padding-top:3px}
.scan .cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scan .stamp{position:absolute;right:26px;bottom:24px;border:2px solid rgba(30,64,175,.45);color:rgba(30,64,175,.5);padding:4px 10px;font-weight:700;transform:rotate(-8deg);font-size:11px}
.scan.fmtB{font-family:Arial,sans-serif;font-size:11.5px}
.scan.fmtC{font-family:Georgia,serif;font-size:12px}
.split-viewer{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:var(--s-6);align-items:start}
@media (max-width:860px){.split-viewer{grid-template-columns:minmax(0,1fr)}}
.stepper{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-2);margin-bottom:var(--s-5);list-style:none;padding:0}
.stepper li{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-12);color:var(--ink-500);font-weight:500;min-width:0}
.stepper li::before{content:"";height:4px;border-radius:var(--r-pill);background:var(--line);transition:background-color var(--t-slow) ease}
.stepper li.is-done{color:var(--emerald-800)}.stepper li.is-done::before{background:var(--emerald-500)}
.stepper li.is-now{color:var(--navy-900);font-weight:700}.stepper li.is-now::before{background:var(--navy-800)}
.stepper li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-5)}
.meta-grid div{background:var(--surface);padding:10px var(--s-3);min-width:0}
.meta-grid small{display:block;color:var(--text-2);font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.meta-grid b{font-size:var(--fs-13);color:var(--navy-900);overflow-wrap:anywhere;font-weight:600}
.grp-head{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-600);margin:var(--s-5) 0 var(--s-2)}
.grp-head .num{font-size:var(--fs-13);letter-spacing:0;color:var(--navy-900)}
.fields{display:flex;flex-direction:column;gap:4px}
.fld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto 56px;gap:var(--s-3);align-items:center;padding:10px var(--s-3);border-radius:var(--r-md);background:var(--surface-2);
  transition:background-color var(--t-fast) ease,box-shadow var(--t-fast) ease}
@media (hover:hover){.fld:hover{background:var(--emerald-50)}}
.fld:focus-visible{box-shadow:var(--focus);background:var(--emerald-50)}
.fld .orig{font-size:var(--fs-13);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fld .canon{font-size:var(--fs-13);font-weight:600;color:var(--navy-900);display:flex;align-items:center;gap:6px;min-width:0}
.fld .canon span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fld .canon .ico{width:14px;height:14px;color:var(--ink-400)}
.fld .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy-900)}
.fld.is-warn{background:var(--amber-50);box-shadow:inset 0 0 0 1px rgba(245,158,11,.45)}
.conf{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.conf .bar{width:100%;height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.conf .bar i{display:block;height:100%;background:var(--emerald-500);border-radius:inherit}
.fld.is-warn .conf .bar i{background:var(--amber-500)}
.conf small{font-size:var(--fs-11);color:var(--text-2);font-variant-numeric:tabular-nums}
.checks{display:flex;flex-direction:column;gap:6px}
.chk{display:flex;gap:var(--s-3);align-items:flex-start;padding:10px var(--s-3);border-radius:var(--r-md);font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.chk .ico{margin-top:1px}
.chk.ok{background:var(--emerald-50);color:var(--emerald-800)}
.chk.bad{background:var(--amber-50);color:var(--amber-800)}
.progress{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:100%;background:var(--emerald-500);border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform var(--t) linear}

/* ---------------------------------------------------------------- 14. Ficha de persona */
.person-head{display:flex;gap:var(--s-4);align-items:center;min-width:0}
.person-head .avatar{width:52px;height:52px;font-size:var(--fs-16);background:var(--navy-900)}
.person-head h2{font-size:var(--fs-22);line-height:var(--lh-tight)}
.person-head .sub{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;margin-top:6px;font-size:var(--fs-13);color:var(--text-2)}
.rut{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy-900)}
.mini-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.mini-kpis .kpi{padding:var(--s-4)}
.mini-kpis .k-value{font-size:var(--fs-18)}
.chart{position:relative}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .c-grid{stroke:var(--line);stroke-width:1}
.chart .c-area{fill:rgba(16,185,129,.10)}
.chart .c-line{fill:none;stroke:var(--emerald-600);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.chart .c-dot{fill:var(--surface);stroke:var(--emerald-600);stroke-width:2}
.chart .c-dot.is-last{fill:var(--emerald-600)}
.chart .c-dot.is-attn{stroke:var(--amber-500);fill:var(--amber-500)}
.chart text{font-family:var(--font);font-size:11px;fill:var(--ink-600);font-variant-numeric:tabular-nums}
.chart text.c-val{font-weight:700;fill:var(--navy-900)}
.history{display:flex;flex-direction:column}
.hist-row{display:grid;grid-template-columns:110px minmax(0,1fr) 120px auto;gap:var(--s-3);align-items:center;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line)}
.hist-row:last-child{border-bottom:0}
.hist-row .per b{display:block;color:var(--navy-900);font-weight:600}
.hist-row .per span{font-size:var(--fs-12);color:var(--text-2);font-family:var(--mono)}
.hist-row .amt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy-900)}
.hist-row .amt small{display:block;font-weight:500;font-size:var(--fs-12);color:var(--text-2)}

/* Lista de alertas */
.alert-list{display:flex;flex-direction:column}
.alert-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-4);align-items:flex-start;padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--line);transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
.alert-item:last-child{border-bottom:0}
.alert-item.is-leaving{opacity:0;transform:translateX(12px)}
.alert-item .a-ico{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;background:var(--amber-50);color:var(--amber-700)}
.alert-item .a-ico.info{background:var(--navy-50);color:var(--navy-800)}
.alert-item .a-ico.ok{background:var(--emerald-50);color:var(--emerald-700)}
.alert-item h3{font-size:var(--fs-14);margin:0 0 4px;color:var(--navy-900)}
.alert-item p{font-size:var(--fs-13);color:var(--ink-700)}
.alert-item .a-meta{display:flex;flex-wrap:wrap;gap:4px var(--s-3);margin-top:var(--s-2);font-size:var(--fs-12);color:var(--text-2)}
.alert-item .a-meta .folio{font-family:var(--mono)}
.alert-item .a-act{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}

/* Panel de arquitectura sobre fotografía */
.photo-band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--navy-900) center/cover no-repeat;padding:var(--s-8);color:#fff;box-shadow:var(--sh-3)}
.photo-band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,21,40,.96) 0%,rgba(11,31,58,.82) 55%,rgba(11,31,58,.55) 100%)}
.photo-band>*{position:relative}
.arch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-6)}
.arch .box{background:rgba(255,255,255,.07);border-radius:var(--r-md);padding:var(--s-4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.arch .box small{display:block;color:var(--emerald-300);font-size:var(--fs-11);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.arch .box b{font-size:var(--fs-14);font-weight:600}
.arch .box span{display:block;font-size:var(--fs-12);color:#b7c6dc;margin-top:2px}
.arch .box.them{background:rgba(255,255,255,.12)}
.arch .box.them small{color:#bfdbfe}
pre.code{background:var(--navy-950);color:#d6e2f0;border-radius:var(--r-md);padding:var(--s-4) var(--s-5);overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.65;margin:0;max-height:420px}
pre.code .k{color:#7dd3fc}pre.code .c{color:#7f93b0}pre.code .s{color:#fcd34d}

/* Línea de pasos (Cómo funciona) */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.step-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2)}
.step-card .n{width:32px;height:32px;border-radius:50%;background:var(--navy-900);color:#fff;font-weight:700;font-size:var(--fs-13);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2);font-variant-numeric:tabular-nums}
.step-card.ai .n{background:var(--emerald-700)}
.step-card h3{font-size:var(--fs-16)}
.step-card p{font-size:var(--fs-13);color:var(--ink-700)}

/* ---------------------------------------------------------------- 15. Vacíos, esqueletos y utilidades */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-12) var(--s-6);color:var(--text-2)}
.empty .e-ico{width:52px;height:52px;border-radius:50%;background:var(--emerald-50);color:var(--emerald-700);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-2)}
.empty .e-ico.neutral{background:var(--surface-3);color:var(--ink-500)}
.empty b{color:var(--navy-900);font-size:var(--fs-16)}
.empty p{max-width:42ch;font-size:var(--fs-13)}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--surface-3) 0%,#e9eef4 40%,var(--surface-3) 80%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.skel-row{display:grid;grid-template-columns:32px minmax(0,2fr) minmax(0,1fr) 90px;gap:var(--s-4);align-items:center;padding:14px var(--s-6);border-bottom:1px solid var(--line)}
.skel-row .skel{height:12px}.skel-row .skel.c{height:32px;border-radius:50%}
.divider-space{height:var(--s-6)}
.muted{color:var(--text-2)}
.small{font-size:var(--fs-13)}
.xs{font-size:var(--fs-12)}
.strong{font-weight:600;color:var(--navy-900)}
.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}
.foot-note{text-align:center;color:var(--text-2);font-size:var(--fs-12);margin-top:var(--s-12)}
.syn{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-3)}
.syn span{background:var(--surface-3);border-radius:var(--r-sm);padding:3px 8px;font-size:var(--fs-12);color:var(--ink-700)}
.syn span.new{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.4)}
.dic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s-4)}
.dic-card{padding:var(--s-5)}
.dic-card .row-between h3{margin:0;font-size:var(--fs-14)}
.dic-card code{font-size:var(--fs-12);color:var(--emerald-700)}

/* ---------------------------------------------------------------- Ingreso */
.login{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(400px,.8fr);min-height:100dvh;background:var(--surface)}
.login-hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:var(--s-10) var(--s-12);color:#fff;background:var(--navy-900) center/cover no-repeat;min-height:100dvh}
.login-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,21,40,.55) 0%,rgba(11,31,58,.55) 40%,rgba(7,21,40,.94) 100%)}
.login-hero>*{position:relative}
.login-logos{display:flex;align-items:center;gap:var(--s-4)}
.login-logos .logo-fc{height:46px;width:auto;filter:brightness(0) invert(1)}
.login-logos .logo-sm{height:22px;width:auto}
.login-logos .x{color:rgba(255,255,255,.5)}
.login-hero h1{font-size:clamp(2rem,3.2vw,2.75rem);line-height:1.1;letter-spacing:-.025em;color:#fff;max-width:19ch;font-weight:700}
.login-hero .lead{color:#c9d5e6;font-size:var(--fs-18);max-width:52ch}
.login-stats{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:var(--s-10);margin-top:var(--s-8)}
.login-stats b{display:block;font-size:var(--fs-28);font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.login-stats span{font-size:var(--fs-13);color:#b7c6dc}
.login-stats em{font-style:normal;color:var(--emerald-300)}
.login-panel{display:flex;flex-direction:column;justify-content:center;padding:var(--s-12) var(--s-12);background:var(--surface)}
.login-panel .inner{width:100%;max-width:400px;margin:0 auto;display:flex;flex-direction:column}
.login-panel .logo-fc-c{height:52px;width:auto;align-self:flex-start;margin-bottom:var(--s-6)}
.login-panel h2{font-size:var(--fs-28);letter-spacing:-.02em}
.login-panel .lead{font-size:var(--fs-14);margin:var(--s-2) 0 var(--s-6)}
.login-form{display:flex;flex-direction:column;gap:var(--s-4)}
.login-form .segmented{display:flex}
.login-form .segmented button{flex:1}
.demo-accounts{margin-top:var(--s-6);display:flex;flex-direction:column;gap:var(--s-2)}
.demo-accounts .label{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.1em;color:var(--text-2);margin-bottom:var(--s-1)}
.demo-acc{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;border:0;background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);
  transition:background-color var(--t) ease,transform var(--t-fast) var(--ease-out)}
.demo-acc .d-ico{width:36px;height:36px;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--sh-1);display:flex;align-items:center;justify-content:center;color:var(--navy-800);flex:none}
.demo-acc b{display:block;color:var(--navy-900);font-size:var(--fs-14)}
.demo-acc span{display:block;font-size:var(--fs-12);color:var(--text-2)}
.demo-acc .go{margin-left:auto;color:var(--ink-400);transition:transform var(--t) var(--ease-out),color var(--t) ease}
@media (hover:hover){.demo-acc:hover{background:var(--emerald-50)}.demo-acc:hover .go{transform:translateX(3px);color:var(--emerald-700)}}
.demo-acc:active{transform:scale(.985)}
.login-secure{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-6);font-size:var(--fs-12);color:var(--text-2)}
.login-secure .ico{color:var(--emerald-700);margin-top:1px}
.by-surmet{display:inline-flex;align-items:center;gap:var(--s-2);margin-top:var(--s-6);align-self:flex-start;background:var(--navy-900);color:#c9d5e6;font-size:var(--fs-12);padding:8px 12px;border-radius:var(--r-pill)}
.by-surmet img{height:13px;width:auto}

/* ---------------------------------------------------------------- Responsivo */
@media (max-width:1320px){.split-aside{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-aside{grid-template-columns:minmax(0,1fr)}
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:100dvh;transform:translateX(-102%);visibility:hidden;transition:transform 320ms var(--ease-drawer),visibility 0s linear 320ms;z-index:calc(var(--z-drawer) + 1);box-shadow:var(--sh-4)}
  .sidebar.is-open{transform:none;visibility:visible;transition:transform 320ms var(--ease-drawer)}
  .topbar{background:var(--navy-900);color:#fff;padding:var(--s-3) var(--s-4);backdrop-filter:none;-webkit-backdrop-filter:none}
  .topbar .crumb{display:none}
  .topbar .m-brand{display:flex;align-items:center;gap:var(--s-2);min-width:0}
  .topbar .m-brand .logo-fc{height:28px;width:auto;filter:brightness(0) invert(1)}
  .topbar .m-brand .logo-sm{height:13px;width:auto}
  .topbar .m-brand .x{color:rgba(255,255,255,.45);font-size:12px}
  .topbar .menu-btn{display:inline-flex;color:#fff;background:rgba(255,255,255,.08)}
  .menu-btn:focus-visible{box-shadow:var(--focus-dark)}
  .topbar .demo-tag{display:none}
  .user-chip .who{display:none}
  .user-chip .avatar{background:var(--emerald-700)}
  .topbar .btn-ghost{color:#fff}
  .topbar .btn-ghost:focus-visible{box-shadow:var(--focus-dark)}
  .content{padding:var(--s-5) var(--s-5) var(--s-12)}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .arch{grid-template-columns:repeat(2,minmax(0,1fr))}
  .login{grid-template-columns:minmax(0,1fr)}
  .login-hero{min-height:auto;padding:var(--s-6) var(--s-5) var(--s-6);gap:var(--s-5)}
  .login-hero h1{font-size:var(--fs-22);max-width:none}
  .login-hero .lead,.login-stats{display:none}
  .login-logos .logo-fc{height:34px}.login-logos .logo-sm{height:16px}
  .login-panel{padding:var(--s-6) var(--s-5) var(--s-10);justify-content:flex-start}
  .login-panel .logo-fc-c{display:none}
  .login-panel h2{font-size:var(--fs-22)}
  .login-panel .lead{margin:var(--s-1) 0 var(--s-4)}
  .login-form{gap:var(--s-3)}
}
@media (max-width:720px){
  .page-head{margin:var(--s-2) 0 var(--s-6);align-items:flex-start}
  .page-head h1{font-size:var(--fs-22)}
  .lead{font-size:var(--fs-14)}
  .kpi{padding:var(--s-4)}
  .kpi .k-value{font-size:var(--fs-22)}
  .card{padding:var(--s-5)}
  .card-flush{padding:0}
  .card-head .search,.row-between .search{flex:1 1 100%!important;max-width:none!important}
  .table-stack .cell-person b{white-space:normal}
  .table-stack td[data-col="end"]{align-self:start}
  .card-head{padding:var(--s-4) var(--s-4)}
  .table th:first-child,.table td:first-child{padding-left:var(--s-4)}
  .table th:last-child,.table td:last-child{padding-right:var(--s-4)}
  .doc-picker{grid-template-columns:minmax(0,1fr)}
  .steps-grid{grid-template-columns:minmax(0,1fr)}
  .stepper{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s-3)}
  .fld{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .fld .orig{grid-column:1/-1}
  .fld .conf{grid-column:1/-1;flex-direction:row;align-items:center;gap:var(--s-2)}
  .fld .conf .bar{flex:1}
  .meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scan-stage{padding:var(--s-3)}
  .scan{font-size:10.5px;padding:16px 14px;transform:none}
  .scan .cols{grid-template-columns:minmax(0,1fr)}
  .mini-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mini-kpis .kpi:first-child{grid-column:1/-1}
  .hist-row{grid-template-columns:minmax(0,1fr) auto;padding:var(--s-3)}
  .hist-row .pill-cell{grid-column:1/2}
  .alert-item{grid-template-columns:36px minmax(0,1fr);padding:var(--s-4)}
  .alert-item .a-ico{width:36px;height:36px}
  .alert-item .a-act{grid-column:1/-1;justify-content:flex-start}
  .arch{grid-template-columns:minmax(0,1fr)}
  .photo-band{padding:var(--s-5)}
  .drawer-head,.drawer-body{padding:var(--s-4)}
  .modal-head{padding:var(--s-5) var(--s-4) var(--s-3)}.modal-body{padding:0 var(--s-4) var(--s-4)}.modal-foot{padding:var(--s-3) var(--s-4)}
  .toasts{right:var(--s-4);left:var(--s-4);bottom:var(--s-4);align-items:stretch}
  .toast{max-width:none}
  .file b{max-width:200px}
  .input,.select,.textarea{font-size:16px} /* evita el zoom automático de iOS */
}
@media (max-width:380px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .topbar .m-brand .x,.topbar .m-brand .logo-sm{display:none}
  .stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .modal,.drawer,.sidebar,.toast,.alert-item{transition-property:opacity!important}
  .modal,.modal.is-open{transform:translate(-50%,-50%)}
}
@media print{.sidebar,.topbar,.toasts{display:none}.shell{display:block}.card,.kpi{box-shadow:none;border:1px solid var(--line)}}

/* ---------------------------------------------------------------- Foco visible (siempre gana) */
button:focus-visible,a:focus-visible,[tabindex]:not(tr):focus-visible,[role="button"]:focus-visible{box-shadow:var(--focus)!important;outline:none}
.sidebar :focus-visible,.login-hero :focus-visible{box-shadow:var(--focus-dark)!important}
@media (max-width:1024px){.topbar :focus-visible{box-shadow:var(--focus-dark)!important}}
@media (forced-colors:active){:focus-visible{outline:2px solid CanvasText!important}}

/* =====================================================================
   v3 · Plataforma: flujo guiado por lote + vistas existentes reubicadas
   ===================================================================== */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
#app{display:none}
body.dentro #login{display:none}
body.dentro #app{display:grid}
.link{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.back{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--text-2);font-size:var(--fs-13);margin-bottom:var(--s-2)}
.back .ico{transform:rotate(180deg);width:16px;height:16px}
@media (hover:hover){.back:hover{color:var(--navy-900)}}
.nowrap{white-space:nowrap}
.break{overflow-wrap:anywhere}
.mt{margin-top:var(--s-4)}.mb{margin-bottom:var(--s-4)}
.card>h2{font-size:var(--fs-16);margin-bottom:var(--s-4)}
.card-head+.table-wrap,.card-head+.lista{border-top:1px solid var(--line)}
.vacio{color:var(--text-2);text-align:center;padding:var(--s-8) var(--s-4)!important}
.archivo-nom{font-family:var(--mono);font-size:var(--fs-12);overflow-wrap:anywhere;color:var(--navy-900)}
.nav-group[hidden]{display:none}
.count[hidden]{display:none}
@media (max-width:720px){.hide-m{display:none!important}}

/* Ingreso: el formulario normal se oculta cuando hay demo de un clic */
#login.demo .ltabs,#login.demo .lf,#login.demo .lperfil{display:none!important}
.login-hero{background-image:url("img/hero.jpg")}
.ltabs{display:flex;margin-bottom:var(--s-4)}
.ltabs button{flex:1}
.segmented button.on{background:var(--surface);color:var(--navy-900);box-shadow:0 1px 2px rgba(11,31,58,.08),0 0 0 1px rgba(11,31,58,.04)}
.lperfil{min-height:34px;margin-top:var(--s-3)}
.lerr{color:var(--red-700);font-size:var(--fs-13);min-height:20px}
.lcard[disabled]{opacity:.6;cursor:wait}
.demo-acc .txt{display:block;min-width:0}

/* ---------------------------------------------------------------- Mensajes */
.msg{border-radius:var(--r-md);padding:var(--s-3) var(--s-4);font-size:var(--fs-13);margin-top:var(--s-3)}
.msg.ok{background:var(--emerald-50);color:var(--emerald-800)}
.msg.bad{background:var(--red-50);color:var(--red-700)}
.msg.info{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.note{background:var(--navy-50);color:var(--navy-800);border-radius:var(--r-md);padding:var(--s-4);font-size:var(--fs-13);margin-top:var(--s-6)}

/* ---------------------------------------------------------------- Paginación y buscador */
.pag{display:flex;gap:var(--s-2);align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:var(--s-3) var(--s-6);font-size:var(--fs-13);color:var(--text-2);border-top:1px solid var(--line)}
.pag:empty{display:none}
.pag span{margin-right:auto}
.toolbar{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;padding:var(--s-4) var(--s-6)}
.toolbar .search{flex:1 1 240px}
.toolbar .select{width:auto;min-width:180px;max-width:100%}
.toolbar form{display:flex;gap:var(--s-2);flex:1 1 300px;min-width:0}

/* ---------------------------------------------------------------- Lista de lotes */
.lote-nom b{display:block;color:var(--navy-900);font-weight:600}
.lote-nom span{display:block;font-size:var(--fs-12);color:var(--text-2);font-family:var(--mono);overflow-wrap:anywhere}
.avance{display:flex;flex-direction:column;gap:4px;min-width:140px}
.avance small{font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums}
.progress.lg{height:12px}
.progress.is-run i{background:var(--navy-700)}
.pill-amber{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}

/* ---------------------------------------------------------------- Asistente: pasos */
.wizard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);list-style:none;padding:0;margin:0 0 var(--s-6)}
.wizard li{min-width:0}
.wizard button{display:flex;align-items:center;gap:var(--s-3);width:100%;text-align:left;border:0;background:var(--surface);border-radius:var(--r-lg);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-1);color:var(--ink-600);min-width:0}
.wizard button:disabled{cursor:default;opacity:1}
.wizard .wn{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-13);background:var(--surface-3);color:var(--ink-600);font-variant-numeric:tabular-nums}
.wizard .wn .ico{width:16px;height:16px;stroke-width:2.2}
.wizard .wt{min-width:0;display:flex;flex-direction:column;line-height:var(--lh-snug)}
.wizard .wt b{font-size:var(--fs-13);color:inherit;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wizard .wt small{font-size:var(--fs-12);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wizard li.is-done .wn{background:var(--emerald-700);color:#fff}
.wizard li.is-done button{color:var(--navy-900)}
.wizard li.is-done button:not(:disabled){cursor:pointer}
@media (hover:hover){.wizard li.is-done button:not(:disabled):hover{background:var(--emerald-50)}}
.wizard li.is-now button{background:var(--navy-900);color:#fff;box-shadow:var(--sh-2)}
.wizard li.is-now .wn{background:var(--emerald-500);color:var(--navy-950)}
.wizard li.is-now .wt small{color:#b7c6dc}
.wizard li.is-view:not(.is-now) button{box-shadow:inset 0 0 0 2px var(--emerald-600),var(--sh-1)}

/* ---------------------------------------------------------------- Paso 1: repositorio y período */
.repo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s-3)}
.repo-card{display:flex;flex-direction:column;gap:var(--s-2);text-align:left;border:0;background:var(--surface);border-radius:var(--r-lg);padding:var(--s-4);box-shadow:var(--sh-1);min-width:0;color:var(--ink-700)}
.repo-card .rc-top{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.repo-card .rc-ico{width:36px;height:36px;border-radius:var(--r-md);background:var(--navy-50);color:var(--navy-800);display:flex;align-items:center;justify-content:center;flex:none}
.repo-card b{color:var(--navy-900);font-size:var(--fs-14);font-family:var(--mono);overflow-wrap:anywhere;min-width:0}
.repo-card .rc-meta{display:flex;flex-wrap:wrap;gap:4px var(--s-3);font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums}
.repo-card .rc-meta strong{color:var(--navy-900);font-weight:700}
button.repo-card{transition:box-shadow var(--t) ease,background-color var(--t) ease}
@media (hover:hover){button.repo-card:hover{box-shadow:inset 0 0 0 1px var(--emerald-600),var(--sh-2)}}
button.repo-card[aria-pressed="true"]{background:var(--emerald-50);box-shadow:inset 0 0 0 2px var(--emerald-600),var(--sh-1)}
button.repo-card[aria-pressed="true"] .rc-ico{background:var(--emerald-700);color:#fff}
.repo-card.is-busy{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.repo-card.is-busy .rc-ico{background:var(--surface-3);color:var(--ink-500)}
.periodo{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
.periodo .field{flex:0 1 200px}
.paso1{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-6);align-items:start}
.resumen-sel{position:sticky;top:80px;display:flex;flex-direction:column;gap:var(--s-4)}
.resumen-sel dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);font-size:var(--fs-13)}
.resumen-sel dt{color:var(--text-2)}
.resumen-sel dd{margin:0;color:var(--navy-900);font-weight:600;overflow-wrap:anywhere;text-align:right}

/* ---------------------------------------------------------------- Paso 2: revisión previa */
.vivo{display:flex;flex-direction:column;gap:var(--s-4)}
.vivo .v-top{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.vivo .v-top h2{font-size:var(--fs-18)}
.vivo .v-num{margin-left:auto;font-size:var(--fs-28);font-weight:700;color:var(--navy-900);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vivo .v-num small{font-size:var(--fs-14);color:var(--text-2);font-weight:500;letter-spacing:0}
.pulso{width:10px;height:10px;border-radius:50%;background:var(--emerald-500);flex:none;animation:pulse 1.1s var(--ease-in-out) infinite}
.semaforo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-6)}
.sem{display:flex;align-items:center;gap:var(--s-4);text-align:left;border:0;border-radius:var(--r-lg);padding:var(--s-5);background:var(--surface);box-shadow:var(--sh-2);min-width:0;color:var(--ink-700);transition:box-shadow var(--t) ease,transform var(--t-fast) var(--ease-out)}
.sem:active{transform:scale(.985)}
.sem .luz{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center}
.sem .luz .ico{width:24px;height:24px;stroke-width:2}
.sem .s-n{display:block;font-size:var(--fs-36);font-weight:700;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sem .s-l{display:block;font-size:var(--fs-14);font-weight:600;color:var(--navy-900);margin-top:4px}
.sem .s-d{display:block;font-size:var(--fs-12);color:var(--text-2)}
.sem.verde .luz{background:var(--emerald-100);color:var(--emerald-800)}.sem.verde .s-n{color:var(--emerald-700)}
.sem.ambar .luz{background:var(--amber-100);color:var(--amber-800)}.sem.ambar .s-n{color:var(--amber-700)}
.sem.rojo .luz{background:var(--red-100);color:var(--red-700)}.sem.rojo .s-n{color:var(--red-700)}
.sem[aria-pressed="true"].verde{box-shadow:inset 0 0 0 2px var(--emerald-600),var(--sh-2)}
.sem[aria-pressed="true"].ambar{box-shadow:inset 0 0 0 2px var(--amber-500),var(--sh-2)}
.sem[aria-pressed="true"].rojo{box-shadow:inset 0 0 0 2px var(--red-700),var(--sh-2)}
@media (hover:hover){.sem:hover{box-shadow:var(--sh-3)}}
.mini-sem{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-13);color:var(--text-2);font-variant-numeric:tabular-nums}
.mini-sem span{display:inline-flex;align-items:center;gap:6px}
.mini-sem i{width:10px;height:10px;border-radius:50%;display:inline-block}
.mini-sem .v{background:var(--emerald-500)}.mini-sem .a{background:var(--amber-500)}.mini-sem .r{background:var(--red-700)}.mini-sem .p{background:var(--line-strong)}
.mini-sem b{color:var(--navy-900)}

.codigos{display:flex;flex-direction:column}
.codigo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3) var(--s-4);align-items:center;padding:var(--s-4) var(--s-6);border-top:1px solid var(--line)}
.codigo .c-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.codigo .c-txt p{font-size:var(--fs-13);color:var(--ink-700)}
.codigo .c-acc{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.codigo .c-acc .hint{align-self:center}

/* Chips de observación por nivel */
.obs{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;line-height:1.3;max-width:100%}
.obs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.obs.rojo{background:var(--red-50);color:var(--red-700)}
.obs.ambar{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35)}
.obs.info{background:var(--navy-50);color:var(--navy-800)}
.obs .n{font-variant-numeric:tabular-nums;font-weight:700}
.obs-list{display:flex;flex-direction:column;gap:6px;min-width:0}
.obs-item{display:flex;flex-direction:column;gap:2px;align-items:flex-start;min-width:0}
.obs-item small{font-size:var(--fs-12);color:var(--text-2);overflow-wrap:anywhere}
.sin-obs{font-size:var(--fs-13);color:var(--emerald-800);display:inline-flex;align-items:center;gap:6px}
.sin-obs .ico{width:16px;height:16px}

/* Tabla de documentos */
.docs .doc-nom{display:flex;flex-direction:column;gap:2px;min-width:0}
.docs .doc-nom b{font-family:var(--mono);font-size:var(--fs-13);color:var(--navy-900);font-weight:600;overflow-wrap:anywhere}
.docs .doc-nom span{font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums}
.docs td{vertical-align:top}
.docs tr.is-excl td{background:#fcfcfd}
.docs tr.is-excl .doc-nom b{color:var(--ink-500);text-decoration:line-through;text-decoration-color:var(--ink-400)}
.per-dist{color:var(--red-700);font-weight:600}
.decision{display:inline-flex;background:var(--surface-3);border-radius:var(--r-md);padding:3px;gap:3px}
.decision button{border:0;background:transparent;border-radius:var(--r-sm);height:30px;padding:0 var(--s-3);font-size:var(--fs-13);font-weight:600;color:var(--ink-600);white-space:nowrap}
.decision button[aria-pressed="true"][data-d="leer"]{background:var(--emerald-700);color:#fff}
.decision button[aria-pressed="true"][data-d="excluir"]{background:var(--red-700);color:#fff}
.decision button:disabled{cursor:not-allowed;opacity:.6}
.dec-txt{font-size:var(--fs-13);font-weight:600}
.dec-txt.leer{color:var(--emerald-800)}.dec-txt.excluir{color:var(--red-700)}
.acc-doc{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Barra fija de acción */
.actionbar{position:sticky;bottom:var(--s-4);z-index:var(--z-sticky);margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  background:var(--navy-900);color:#dbe4f0;border-radius:var(--r-lg);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-5);box-shadow:var(--sh-4)}
.actionbar .ab-txt{font-size:var(--fs-13);min-width:0;flex:1 1 220px}
.actionbar .ab-txt b{color:#fff;font-variant-numeric:tabular-nums}
.actionbar .btn-ghost{color:#fff}
@media (hover:hover){.actionbar .btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.08)}}
.actionbar :focus-visible{box-shadow:var(--focus-dark)!important}
.actionbar .btn-primary{background:var(--emerald-500);color:var(--navy-950)}
@media (hover:hover){.actionbar .btn-primary:hover:not(:disabled){background:var(--emerald-300)}}

/* ---------------------------------------------------------------- Paso 3: lectura */
.lista{display:flex;flex-direction:column}
.lec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-2) var(--s-4);padding:var(--s-4) var(--s-6);border-top:1px solid var(--line);align-items:start}
.lista>.lec:first-child{border-top:0}
.lec .l-nom{font-family:var(--mono);font-size:var(--fs-13);color:var(--navy-900);font-weight:600;overflow-wrap:anywhere}
.lec .l-liqs{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.lec .l-liq{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s-2) var(--s-4);align-items:center;background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-2) var(--s-3)}
.lec .l-liq .who b{display:block;color:var(--navy-900);font-size:var(--fs-13)}
.lec .l-liq .who span{font-size:var(--fs-12);color:var(--text-2);font-variant-numeric:tabular-nums}
.lec .l-liq .amt{font-weight:700;color:var(--navy-900);font-variant-numeric:tabular-nums;text-align:right}
.lec .l-liq .amt small{display:block;font-weight:500;font-size:var(--fs-11);color:var(--text-2)}
.lec .l-al{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.lec.is-cola .l-nom{color:var(--ink-500)}
.lec.is-new{animation:rowIn 900ms var(--ease-out)}

/* ---------------------------------------------------------------- Paso 4: en la base */
.fin-head{display:flex;gap:var(--s-4);align-items:center;margin-bottom:var(--s-5)}
.fin-head .f-ico{width:52px;height:52px;border-radius:50%;background:var(--emerald-100);color:var(--emerald-800);display:flex;align-items:center;justify-content:center;flex:none}
.fin-head .f-ico .ico{width:26px;height:26px;stroke-width:2}
.fin-head h2{font-size:var(--fs-22)}
.fin-head p{color:var(--text-2);font-size:var(--fs-14);margin-top:2px}
.kpis.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sync-note{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--navy-50);color:var(--navy-800);border-radius:var(--r-md);padding:var(--s-4);font-size:var(--fs-13)}
.sync-note .ico{margin-top:1px;flex:none}

/* ---------------------------------------------------------------- Panel lateral del original */
.drawer .d-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden}
.drawer .d-meta div{background:var(--surface);padding:10px var(--s-3);min-width:0}
.drawer .d-meta small{display:block;color:var(--text-2);font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.drawer .d-meta b{font-size:var(--fs-13);color:var(--navy-900);font-weight:600;overflow-wrap:anywhere}
.drawer .d-img{background:var(--navy-800);border-radius:var(--r-lg);padding:var(--s-3)}
.drawer .d-img img{width:100%;height:auto;border-radius:var(--r-sm);background:#fff}
.drawer .d-pdf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3);background:var(--surface);border-radius:var(--r-lg);padding:var(--s-8) var(--s-5);box-shadow:var(--sh-1)}
.drawer .d-pdf .e-ico{width:52px;height:52px;border-radius:50%;background:var(--red-50);color:var(--red-700);display:flex;align-items:center;justify-content:center}
.drawer .d-pdf p{font-size:var(--fs-13);color:var(--text-2);max-width:40ch}
.drawer-head h2{font-size:var(--fs-16);overflow-wrap:anywhere;font-family:var(--mono)}

/* ---------------------------------------------------------------- Modal heredado (resolver alerta, confirmar) */
.lmodal{position:fixed;inset:0;background:rgba(7,21,40,.48);z-index:var(--z-modal);display:flex;align-items:flex-start;justify-content:center;padding:4vh var(--s-3);overflow-y:auto}
.lmodal-c{background:var(--surface);border-radius:var(--r-xl);width:min(920px,100%);padding:var(--s-6);box-shadow:var(--sh-4);animation:viewIn var(--t-slow) var(--ease-out);min-width:0}
.lmodal-c.sm{width:min(520px,100%)}
.modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-4)}
.modal-h h2{font-size:var(--fs-18)}
.cerrar{border:0;background:var(--surface-3);border-radius:var(--r-md);width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink-700)}
.modal-pie{display:flex;justify-content:flex-end;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-5)}
.campo{height:38px;padding:0 var(--s-3);border:1px solid var(--line-strong);border-radius:var(--r-sm);font-size:var(--fs-13);min-width:0;width:100%;background:var(--surface)}
.campo:focus{border-color:var(--emerald-600);box-shadow:0 0 0 3px rgba(16,185,129,.22);outline:none}
.campo.monto{text-align:right;max-width:130px;font-variant-numeric:tabular-nums}
.campo.concepto{max-width:220px}
.corr td{padding:8px var(--s-2)!important}
.opc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.opc label{display:block;font-size:var(--fs-12);font-weight:600;color:var(--ink-700);margin-bottom:6px}
.chkl{display:flex;gap:var(--s-2);align-items:center;font-size:var(--fs-13)}
.chkl input{accent-color:var(--emerald-700);width:16px;height:16px}

/* ---------------------------------------------------------------- Ficha de persona (heredada) */
.ficha-h{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}
.ficha-h h1{font-size:var(--fs-28);overflow-wrap:anywhere;margin:var(--s-1) 0 var(--s-2)}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-5)}
.meta div{background:var(--surface);padding:10px var(--s-3);min-width:0}
.meta small{display:block;color:var(--text-2);font-size:var(--fs-11);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.meta b{font-size:var(--fs-13);color:var(--navy-900);overflow-wrap:anywhere;font-weight:600}
.ficha-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s-6);margin-bottom:var(--s-6)}
.ficha-g .card{padding:0;overflow:hidden}
.ficha-g .card>h2{padding:var(--s-5) var(--s-6) 0}
.graf{padding:0 var(--s-6) var(--s-5)!important}
.ficha-g .graf{padding:0!important}
.ficha-g .graf svg{padding:0 var(--s-5) var(--s-5)}
.graf svg{display:block;width:100%;height:auto;overflow:visible}
.graf .eje{stroke:var(--line);stroke-width:1}
.graf .linea{fill:none;stroke:var(--emerald-600);stroke-width:2.25;stroke-linejoin:round}
.graf .punto{fill:var(--surface);stroke:var(--emerald-600);stroke-width:2}
.graf .lbl{font-size:11px;fill:var(--ink-600)}
.graf .val{font-size:11px;fill:var(--navy-900);font-weight:700}
.liq{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-2);margin-bottom:var(--s-4);overflow:hidden}
.liq-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--s-5);background:var(--surface-2)}
.liq-h b{color:var(--navy-900)}
.liq-b{padding:var(--s-4) var(--s-5)}
.liq-b .table-wrap{margin:var(--s-3) calc(var(--s-5) * -1) 0;max-height:none}
.liq-tot{display:flex;gap:var(--s-4);flex-wrap:wrap;font-size:var(--fs-13);margin:var(--s-3) 0 0;font-variant-numeric:tabular-nums}
.liq-tot span b{color:var(--navy-900)}
.motivos{margin:var(--s-2) 0 0;padding-left:18px;font-size:var(--fs-12);color:var(--amber-800)}
.glosa{font-size:var(--fs-13);overflow-wrap:anywhere}
.glosa .orig{color:var(--text-2)}
.glosa .arrow{color:var(--emerald-700);font-weight:700;margin:0 4px}
.glosa .exp{color:var(--ink-900)}
.conc{font-size:var(--fs-12);font-weight:700;color:var(--navy-900);font-family:var(--mono)}
.conf-l{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.conf-l .bar{width:54px;height:6px;background:var(--line);border-radius:4px;overflow:hidden;flex:none}
.conf-l .bar i{display:block;height:100%;background:var(--emerald-500)}
.conf-l.warn .bar i{background:var(--amber-500)}
.conf-l.warn{color:var(--amber-800);font-weight:700}
.table tr.warn td{background:var(--amber-50)}
.h2-sec{font-size:var(--fs-18);margin:var(--s-2) 0 var(--s-4)}

/* ---------------------------------------------------------------- Archivos sueltos (repositorio heredado) */
.ultimo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-3)}
.ultimo div{background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-2) var(--s-3);min-width:0}
.ultimo b{display:block;font-size:var(--fs-18);color:var(--navy-900);font-variant-numeric:tabular-nums}
.ultimo small{font-size:var(--fs-11);color:var(--text-2)}
.acciones{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-top:var(--s-4)}

/* ---------------------------------------------------------------- Base de datos */
.photo-band.servers{background-image:url("img/servidores.jpg");margin-bottom:var(--s-6)}
.photo-band h2{color:#fff;font-size:var(--fs-18)}
.photo-band p{color:#c9d5e6;font-size:var(--fs-13);margin-top:4px;max-width:70ch}
.destino{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s-3)}
pre#ddl{background:var(--navy-950);color:#d6e2f0;border-radius:var(--r-md);padding:var(--s-4) var(--s-5);overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.65;margin:0;max-height:420px}

/* ---------------------------------------------------------------- Flujos n8n */
.wf{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
.wf .card{padding:var(--s-5)}
.wf h4{margin:0;font-size:var(--fs-14);color:var(--navy-900);display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.wf h4 code{font-size:var(--fs-11);background:var(--surface-3);padding:2px 7px;border-radius:var(--r-sm);color:var(--ink-600)}
.wf p{margin:6px 0 var(--s-3);font-size:var(--fs-13);color:var(--ink-700)}
.wfst{font-size:var(--fs-11);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-600)}
.wfst.main{background:var(--emerald-50);color:var(--emerald-800)}
.wfst.nuevo{background:var(--navy-50);color:var(--navy-800)}

/* ---------------------------------------------------------------- Cómo funciona (pasos + características) */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-6)}
.feat .card h4{margin:0 0 6px;color:var(--navy-900);font-size:var(--fs-14)}
.feat .card p{margin:0;font-size:var(--fs-13);color:var(--ink-700)}
.como-tabs{margin-bottom:var(--s-6)}
.foot{text-align:center;color:var(--text-2);font-size:var(--fs-12);margin-top:var(--s-10)}

/* ---------------------------------------------------------------- Visor de demostración (heredado) */
.visor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-6);align-items:start}
.docsel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-5)}
.docsel button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:0;background:var(--surface);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);box-shadow:var(--sh-1);font-size:var(--fs-12);color:var(--text-2)}
.docsel button b{font-size:var(--fs-14);color:var(--navy-900)}
.docsel button.on{box-shadow:inset 0 0 0 2px var(--emerald-600),var(--sh-1);background:var(--emerald-50)}
.scan-stage img{width:100%;height:auto;border-radius:4px}
.scan h3.mt8{margin-top:8px}
.scan .emp{text-align:center;font-size:11px}
.scan .encab{display:flex;justify-content:space-between;font-size:11px;gap:8px;flex-wrap:wrap}
.scan .ln.sub{color:#555}.scan .ln.subi{color:#555;font-style:italic}
.scan .borroso{filter:blur(.7px);opacity:.8}
.scan .liqline{margin-top:12px;font-size:13px}
.scan .esp{margin-top:10px}.scan .sep8{height:8px}
.scan .firma{margin-top:24px;font-size:10px;color:#555}
.res .grp-head:first-of-type{margin-top:var(--s-3)}
.res .fld{margin-bottom:4px}
.note-attn{background:var(--amber-50);color:var(--amber-800);box-shadow:inset 0 0 0 1px rgba(245,158,11,.35);border-radius:var(--r-md);padding:var(--s-4);margin-top:var(--s-3);font-size:var(--fs-13)}
.note-attn .row{margin-top:var(--s-2)}
.note-attn input{width:120px;height:36px;padding:0 var(--s-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);text-align:right;font-variant-numeric:tabular-nums;background:#fff}
.note-ok{background:var(--emerald-50);color:var(--emerald-800);border-radius:var(--r-md);padding:var(--s-4);margin-top:var(--s-4);font-size:var(--fs-13)}
.pie-img{font-size:var(--fs-12);color:var(--text-2);margin:var(--s-2) 2px}
.chk .ico{width:16px;height:16px}

/* ---------------------------------------------------------------- Responsivo v3 */
@media (max-width:1180px){
  .paso1{grid-template-columns:minmax(0,1fr)}
  .resumen-sel{position:static}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
  body.dentro #app{display:block}
  .visor,.ficha-g{grid-template-columns:minmax(0,1fr)}
  .meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .wizard{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
  .wizard button{flex-direction:column;align-items:center;text-align:center;padding:var(--s-2) 4px;gap:4px;border-radius:var(--r-md)}
  .wizard .wt small{display:none}
  .wizard .wt b{font-size:var(--fs-11);white-space:normal;line-height:1.2}
  .wizard li:not(.is-now) .wt b{color:var(--text-2)}
  .wizard .wn{width:26px;height:26px;font-size:var(--fs-12)}
  .semaforo{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .sem{padding:var(--s-3) var(--s-4)}
  .sem .luz{width:40px;height:40px}
  .sem .s-n{font-size:var(--fs-28)}
  .codigo{grid-template-columns:minmax(0,1fr);padding:var(--s-4)}
  .codigo .c-acc{justify-content:flex-start}
  .toolbar{padding:var(--s-4)}
  .toolbar .select{flex:1 1 100%}
  .pag{padding:var(--s-3) var(--s-4)}
  .lec{padding:var(--s-4)}
  .lec .l-liq{grid-template-columns:minmax(0,1fr) auto}
  .lec .l-liq .pill-cell{grid-column:1/-1}
  .actionbar{bottom:var(--s-2);padding:var(--s-3);gap:var(--s-2)}
  .actionbar .ab-txt{flex:1 1 100%}
  .actionbar .btn-primary{flex:1 1 auto}
  .kpis.k3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docsel{grid-template-columns:minmax(0,1fr)}
  .feat{grid-template-columns:minmax(0,1fr)}
  .opc{grid-template-columns:minmax(0,1fr)}
  .ultimo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lmodal-c{padding:var(--s-4)}
  .campo.monto{max-width:100px}.campo.concepto{max-width:150px}
  .drawer .d-meta{grid-template-columns:minmax(0,1fr)}
  .ficha-h h1{font-size:var(--fs-22)}
  .liq-h,.liq-b{padding:var(--s-3) var(--s-4)}
  .liq-b .table-wrap{margin:var(--s-3) calc(var(--s-4) * -1) 0}
  .docs td[data-col="acc"]{grid-column:1/-1;justify-self:stretch}
  .docs .acc-doc{justify-content:space-between}
  .avance{min-width:0}
  .fin-head h2{font-size:var(--fs-18)}
}
.skel-h{height:64px}
@media (max-width:720px){
  .toolbar .segmented{display:flex;flex-wrap:wrap;width:100%;overflow:visible}
  .toolbar .segmented button{flex:1 1 auto;padding:0 var(--s-2)}
}
@media (max-width:720px){
  .actionbar #abCancelar{display:none}
  .actionbar{flex-wrap:nowrap;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4)}
  .actionbar .ab-txt{flex:1 1 auto;font-size:var(--fs-12)}
  .actionbar .btn-lg{--h:44px;padding:0 var(--s-4);font-size:var(--fs-14)}
  .docs tr.is-excl td{background:transparent}
  .docs tr.is-excl{background:var(--surface-2)}
}
.drawer-body>*{flex-shrink:0}
.obs.gris{background:var(--surface-3);color:var(--ink-600)}

/* v3 · visor del PDF original en el panel lateral */
.d-frame{display:block;width:100%;height:min(72vh,900px);border:1px solid #cbd5e1;border-radius:10px;background:#f1f5f9;margin-bottom:12px}
@media (max-width:640px){.d-frame{height:60vh}}

/* v3 · los avisos van arriba para no tapar la barra fija de "Leer N documentos" */
.toasts{top:76px;bottom:auto}
@media (max-width:640px){.toasts{top:64px;bottom:auto}}

/* v3.1 · Ejecutar */
.chk-parar{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--mut,#475569);margin:4px 0 12px;cursor:pointer}
.chk-parar input{margin-top:2px;accent-color:var(--emerald-600,#059669)}
.head-acc{display:flex;gap:12px;align-items:center;flex-wrap:wrap}