/* ============================================================================
   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 --- */
.page-sub{font-size:13.5px;color:var(--ink-3);max-width:80ch;margin-bottom:var(--space-5)}
.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}
/* 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}
.col-popup.open{display:flex}
.cp-search{position:relative;padding:10px 10px 8px;border-bottom:1px solid var(--hairline)}
.cp-search svg{position:absolute;left:18px;top:18px;color:var(--ink-4)}
.cp-search input{width:100%;height:32px;padding:0 10px 0 30px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans)}
.cp-daterange{padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.cp-dr-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3)}
.cp-dr-row span{width:42px;flex-shrink:0}
.cp-dr-row input{flex:1;min-width:0;height:30px;border:1px solid var(--hairline-strong);border-radius:var(--radius-sm);padding:0 8px;font-size:12.5px;font-family:var(--font-sans)}
.cp-years-label{padding:4px 10px 2px;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-4)}
.cp-years{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.cp-year{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid var(--hairline-strong);border-radius:var(--radius-full);font-size:12px;color:var(--ink-2);cursor:pointer}
.cp-year input{margin:0}
/* 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. */
.cp-sortbar{border-top:1px solid var(--hairline);padding-top:2px}
.cp-sortbar:empty{display:none}

/* 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-sortrow{display:flex;flex-direction:column;gap:2px;padding:2px 2px 8px}
.cp-sortrow .cp-year{border:0;border-radius:var(--radius-sm);justify-content:flex-start;gap:8px;padding:6px 8px;font-size:13px}
.cp-sortrow .cp-year input{accent-color:var(--teal-700)}
.cp-sortrow .cp-year:hover{background:var(--surface-muted)}
.cp-sortrow .cp-year:has(input:checked){background:var(--teal-50);color:var(--ink-1);font-weight:500}
.cp-opts{max-height:210px;overflow-y:auto;padding:6px}
.cp-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2);cursor:pointer}
.cp-opt:hover{background:var(--surface-muted)}
.cp-opt input{accent-color:var(--teal-700)}
.cp-foot{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--hairline)}
.cp-foot button{height:30px;padding:0 12px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;cursor:pointer;border:none}
.cp-clear{background:transparent;color:var(--ink-4)}
.cp-apply{background:var(--teal-700);color:#fff}
.cp-hint{font-size:11px;color:var(--ink-5);padding:0 10px 8px}

/* --- 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}
.cols-panel.open{display:flex}
.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}