/* ============================================================================
   Suite SNIFA/SMA — chrome de los listados dedicados §15.8 (paso 5).
   Se carga DESPUÉS de sma-suite.css, solo en las páginas de listado. Aporta lo
   que el chrome de fichas no tiene (toolbar, popups server-side, pager, scroll
   horizontal flotante) y reconcilia la tabla Notion (que en las fichas es una
   card autoborde) con el contenedor scroll de listado. Portado del motor de
   listado ya aprobado en producción de la suite SEIA (seia-suite.css).
   ============================================================================ */

/* --- page header --- */
.eyebrow{display:flex;align-items:center;gap:var(--space-1-5)}

/* --- toolbar (buscador + contador + ayuda + agregar columnas) --- */
.toolbar{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);flex-wrap:wrap}
.toolbar-hint{font-size:11.5px;color:var(--ink-4);margin:0 0 var(--space-4);line-height:1.4}
.searchbox{flex:1;min-width:240px;max-width:440px;position:relative;display:flex;align-items:center}
.searchbox svg{position:absolute;left:12px;color:var(--ink-4)}
.searchbox input{width:100%;height:38px;padding:0 14px 0 36px;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);font-size:14px;background:#fff;font-family:var(--font-sans);color:var(--ink-1)}
.searchbox input:focus{outline:none;border-color:var(--teal-700);box-shadow:0 0 0 2px rgba(13,148,136,0.15)}
.count-pill{font-family:var(--font-mono);font-size:12px;color:var(--ink-4);font-feature-settings:"tnum" 1}
.filt-help-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;background:#fff;border:1px solid var(--hairline-strong);color:var(--ink-2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);white-space:nowrap}
.filt-help-btn:hover{background:var(--teal-50);border-color:var(--teal-300);color:var(--teal-700)}
.filt-help-btn svg{flex-shrink:0;color:var(--teal-600)}
.add-cols{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px dashed var(--hairline-strong);border-radius:var(--radius-md);font-size:13px;color:var(--ink-2);background:#fff;font-weight:500;margin-left:auto}
.add-cols:hover{border-color:var(--teal-600);color:var(--teal-700)}
.add-cols svg{color:var(--ink-4)}
.add-cols:hover svg{color:var(--teal-700)}

/* --- tabla: reconciliación con el contenedor scroll ---
   En las fichas .ntable es una card con borde + header sticky. En el listado la
   envolvemos en .table-scroll (borde + scroll-x); neutralizamos el borde interno
   y hacemos el header estático (scroll a nivel de página, sin sticky recortado). */
.table-scroll{border:1px solid var(--hairline);border-radius:var(--radius-md);background:#fff;overflow-x:auto;overflow-y:hidden}
.table-scroll > .ntable{border:none;border-radius:0;background:transparent}
.table-scroll .ntable-head{position:static;top:auto;z-index:auto;box-shadow:none;border-radius:0}
/* `.fits` — el header vuelve a pegarse cuando la tabla SÍ cabe (DS §15.4).
   El estático de la línea de arriba es el antídoto a un sticky que no
   funcionaría, no una preferencia: con overflow recortado el propio
   .table-scroll es el scrollport de sus descendientes sticky. Si la tabla cabe,
   el recorte no hace falta — chrome.js marca `.fits` MIDIENDO (nunca el
   template: hardcodeada, una tabla que no cabe queda sin scroll horizontal y
   con columnas inalcanzables), el overflow vuelve a `visible` y sirve el sticky
   de `.ntable-head` (sma-suite.css). Se repiten position/top/z-index/box-shadow
   /border-radius porque son justo lo que neutraliza la regla de arriba;
   `background` sobrevive de ella. Los tokens los define sma-suite.css, que
   acompaña SIEMPRE a esta hoja en los shells que la cargan.
   Solo desktop: en angosto el recorte es obligatorio. */
@media (min-width: 900px){
  .table-scroll.fits{overflow:visible}
  .table-scroll.fits .ntable-head{
    position:sticky;top:48px;z-index:5;
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    box-shadow:0 2px 4px -2px rgba(15,23,42,0.08);
  }
}
/* La fila completa del listado navega a la ficha (onclick) → indicarlo con el cursor. */
.table-scroll .ntable-row{cursor:pointer}
.ntable-head .x,.col-filter.x,.col-sort.x{color:var(--teal-700)}
.col-filter.has-filter{color:var(--teal-700)}
.col-filter.has-filter .funnel{opacity:1}
.col-sort.active{color:var(--ink-1)}
.col-sort.active .sort-arrow{opacity:1}

/* celdas específicas del listado */
.ntable-cell.nt-id{font-family:var(--font-mono);font-size:11px;color:var(--teal-700);font-feature-settings:"tnum" 1;font-weight:500}
.ntable-cell.nt-sub{margin-top:0;display:block;font-size:12px;color:var(--ink-4)}
.ntable-cell.nt-multa{color:var(--danger-600);font-weight:600}
.nt-titular{display:flex;align-items:center;gap:6px;overflow:hidden}
.nt-tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.nt-extra{flex-shrink:0;font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--teal-700);background:var(--teal-50);padding:1px 5px;border-radius:var(--radius-full)}
/* ID SEIA: 0..N expedientes por UF. Reusa .nt-extra (el "+N" de Titular) y el
   mono/teal de .nt-id, que es el mismo tipo de dato: un identificador oficial. */
.ntable-cell.nt-seia{display:flex;align-items:center;gap:6px;overflow:hidden}
.nt-seia-id{font-size:11px;color:var(--teal-700);font-feature-settings:"tnum" 1;font-weight:500;white-space:nowrap}
.nt-seia-id:hover{text-decoration:underline}
.nt-namesub{display:flex;flex-direction:column;gap:1px;min-width:0}
.nt-namesub .nt-name{color:var(--ink-1)}
.nt-namesub .nt-sub{margin-top:0;font-size:10.5px;color:var(--ink-4)}

/* conteos navegables (count-link) */
.count-link{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:2px 8px;border-radius:var(--radius-sm);transition:background var(--duration-fast),box-shadow var(--duration-fast)}
.count-link:hover{background:var(--surface-muted);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.num{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink-1);font-feature-settings:"tnum" 1}
.num.zero{color:var(--ink-5);font-weight:400}
.num.danger{color:var(--danger-600);font-weight:600}

/* --- popup de filtro de columna (server-side, HTMX) --- */
.col-popup{position:fixed;z-index:80;width:240px;background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;flex-direction:column;overflow:hidden}
/* Barra de orden: hermana del scroller (#cpOpts) y no hija, para que "ordenar"
   quede fijo al pie del popup. Dentro del scroller caía bajo el pliegue apenas
   la columna tenía muchas opciones —Año son 14, comuna 346— y ordenar es la
   acción más frecuente del embudo. `:empty` porque la mayoría de los embudos no
   ofrece orden: sin esa regla cada uno de ellos pintaría un borde y un hueco. */

/* Bloque de opciones excluyentes del popup: "ordenar" (dentro de .cp-sortbar) y
   "o por vínculo" en el embudo de ID SEIA, que sí vive junto a su input porque
   son la misma pregunta. Mismas reglas que en seia-suite.css: las dos suites
   tienen su hoja propia, así que el primitivo se copia igual en vez de derivar
   dos variantes.

   Filas apiladas y no dos píldoras lado a lado: son etiquetas de frase ("Mayor a
   menor", "Con vínculo SEIA") y partidas en columnas de 107px envolvían a dos
   líneas dentro de un borde completamente redondo, que se veía inflado. Apiladas
   caben en una línea, admiten etiquetas descriptivas y toman la forma de fila que
   el propio popup ya usa para elegir (.cp-opt). El estado elegido lo lleva el
   fondo teal del DS y el radio; el borde de píldora sobraba —y pintaba un verde
   `--accent` que no existe en estos tokens, así que caía al fallback—. */
.cp-foot button{height:30px;padding:0 12px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;cursor:pointer;border:none}

/* --- panel "+ Agregar columnas" (Básico) --- */
.cols-panel{position:fixed;z-index:80;width:268px;background:#fff;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);display:none;flex-direction:column;overflow:hidden}
.xp-head{padding:11px 14px 9px;border-bottom:1px solid var(--hairline)}
.xp-head h4{font-size:13px;font-weight:600;margin:0}
.xp-head p{font-size:11.5px;color:var(--ink-4);margin-top:2px;line-height:1.4}
.xp-opts{padding:6px}
.xp-opt{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2);cursor:pointer}
.xp-opt:hover{background:var(--surface-muted)}
.xp-opt input{accent-color:var(--teal-700)}
.xp-opt .lbl{flex:1}
.xp-foot{padding:9px 12px;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:8px}
.xp-foot .note{font-size:11px;color:var(--ink-4)}
.xp-foot .xp-cta{font-size:12px;font-weight:600;color:var(--teal-700);background:none;border:none;padding:0;cursor:pointer}
.xp-foot .xp-cta:hover{color:var(--teal-800)}

/* --- modal "Cómo filtrar" --- */
.fhelp-scrim{position:fixed;inset:0;background:rgba(15,23,42,0.4);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
.fhelp-scrim.show{display:flex}
.fhelp{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:520px;width:100%;padding:22px 24px}
.fhelp-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.fhelp-head h3{flex:1;font-family:var(--font-serif,'IBM Plex Serif',Georgia,serif);font-size:17px;font-weight:600;margin:0}
.fhelp-close{width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--hairline);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-3);flex-shrink:0}
.fhelp-close:hover{background:var(--surface-muted);color:var(--ink-1)}
.fhelp-lead{font-size:13px;color:var(--ink-3);margin:0 0 14px}
.fhelp-demo{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.fh-col{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:var(--surface-muted);border:1px solid var(--hairline);border-radius:var(--radius-sm);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-3)}
.fh-col svg{color:var(--teal-700)}
.fhelp-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.fhelp-list li{font-size:13px;color:var(--ink-2);line-height:1.5}
.fhelp-list strong{color:var(--ink-1)}

/* --- pager --- */
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-4);font-size:12.5px;color:var(--ink-4)}
.pager .pg{display:flex;gap:4px}
.pager .pg button{min-width:30px;height:30px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);background:#fff;font-size:12px;color:var(--ink-2);font-family:var(--font-mono);padding:0 6px;cursor:pointer}
.pager .pg button.on{background:var(--teal-700);color:#fff;border-color:var(--teal-700)}
.pager .pg button:disabled{opacity:0.4;cursor:default}

/* --- barra de scroll horizontal flotante --- */
.hscroll-float{position:fixed;bottom:0;height:14px;overflow-x:auto;overflow-y:hidden;z-index:35;display:none;background:rgba(248,250,252,0.85);backdrop-filter:blur(3px);border-top:1px solid var(--hairline-strong)}
.hscroll-inner{height:1px}