/* Tabla de listado (componentes/tabla.js) — un solo componente para
   Personas, Organismos, Expedientes, Gestiones y Reportes (Actas queda
   afuera: esa sesión está en medio de un refactor propio). Archivo
   aparte de ../estilos.css a propósito (esa hoja y sus tokens los tiene
   la sesión de dirección visual) — todo acá abajo sólo CONSUME las
   variables que ya existen ahí (var(--tx), var(--ln), var(--r1)…), nunca
   redefine ninguna.
*/

.tbl-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--ln);background:var(--card2)}

/* Selector de columnas — <details>/<summary> nativo: abrir/cerrar es
   gratis, sin una línea de JS para el toggle en sí. */
.tbl-colsel{position:relative}
.tbl-colsel summary{list-style:none;cursor:pointer}
.tbl-colsel summary::-webkit-details-marker{display:none}
.tbl-colsel-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:200px;background:var(--card);border:1px solid var(--ln);border-radius:var(--r2);box-shadow:var(--s2);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tbl-colsel-panel label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2);cursor:pointer}
.tbl-colsel-panel input{width:auto}

.tbl-densidad{display:flex;gap:2px;margin-left:auto}
.tbl-densidad button[aria-pressed="true"]{background:var(--acS);border-color:var(--ac);color:var(--acT)}

.tbl-orden-movil{display:none}
.tbl-orden-movil select{width:100%}

/* Encabezado fijo al desplazar — antes esto era `overflow-x:auto` con
   `top` calculado en JS a partir de la altura de la barra superior
   (.tb), pensado para que el encabezado quedara pegado debajo de esa
   barra mientras se desplaza TODA la página. No funciona: fijar
   `overflow-x` (aunque `overflow-y` se deje en el valor por default)
   hace que el navegador calcule el `overflow-y` real como `auto` de
   todos modos (así lo pide la spec de CSS Overflow cuando uno de los
   dos ejes no es `visible`), así que `.tbl-scroll` termina siendo su
   propio contenedor de scroll — y un `position:sticky` adentro se pega
   respecto de ese contenedor, no respecto de la ventana. El resultado,
   confirmado en vivo: el offset de la barra superior se sumaba sobre
   el propio borde de `.tbl-scroll` (que ya arranca más abajo en la
   página), así que el encabezado aparecía corrido hacia abajo tapando
   la primera fila incluso sin haber scrolleado nada.
   La `.mx` (matriz de permisos) ya resolvía este mismo problema con el
   patrón correcto: el contenedor con el scroll tiene su propia altura
   acotada, así que es SU PROPIO scroll (no el de la ventana) el que
   hace sentido, y `top:0` alcanza porque ya no hay ningún offset ajeno
   que calcular ni recalcular al re-dimensionar. */
.tbl-scroll{overflow:auto;max-height:60vh}
.tbl{width:100%;border-collapse:collapse}
.tbl thead th{position:sticky;top:0;z-index:5;background:var(--card2)}

.tbl-sort{display:inline-flex;align-items:center;gap:5px;border:0;background:none;font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);cursor:pointer;padding:0}
.tbl-sort:hover{color:var(--tx)}
.tbl th[aria-sort] .tbl-sort{color:var(--tx)}
.tbl-sort-ic{font-size:11px;color:var(--tx3)}
.tbl th[aria-sort] .tbl-sort-ic{color:var(--ac)}

.tbl-num{text-align:right;font-variant-numeric:tabular-nums}

/* Columna de selección (opt-in, opciones.seleccion — "comunicaciones
   institucionales a varios destinatarios") — angosta a propósito, nunca
   compite con el ancho de las columnas de datos. `position:relative` +
   `z-index` no es decoración: .tbl-row-link::after (más arriba) estira
   un <a> hasta cubrir TODA la fila (inset:0 contra el <tr>, que es el
   contenedor posicionado); sin esto, un click en la casilla navegaría a
   la ficha en vez de tildarla, porque el ::after (sin z-index propio,
   nivel "auto") queda pintado encima de una celda que no está
   posicionada. En la tarjeta compacta la casilla pasa a fila (columna
   vuelve fila) porque ahí .tbl-card ya es column por default. */
.tbl-sel{width:1%;white-space:nowrap;text-align:center;position:relative;z-index:1}
.tbl-card:has(.tbl-card-sel){flex-direction:row;align-items:flex-start;gap:10px}
/* Mismo motivo que .tbl-sel arriba: .tbl-card ya es position:relative
   (para su propio .tbl-row-link::after estirado), así que esto también
   necesita quedar por encima explícitamente. */
.tbl-card-sel{display:flex;align-items:center;padding-top:1px;position:relative;z-index:1}

/* Fila con destino — un <a> real, "estirado" con ::after sobre toda la
   fila (mismo patrón que .stretched-link de Bootstrap): el <a> en sí
   queda como texto normal dentro de su celda, nunca se lo posiciona a
   él, así que su contenido visible no se mueve. */
.tbl tbody tr{position:relative;transition:var(--tr)}
.tbl tbody tr:hover{background:var(--card2)}
.tbl-row-link{color:inherit;text-decoration:none;font-weight:inherit}
.tbl-row-link::after{content:"";position:absolute;inset:0}
.tbl-row-link:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}

/* Densidad — "cómoda" es el alto actual de .estilos.css (td{padding:12px
   16px}), "compacta" lo reduce sin tocar esa hoja: la sobreescritura vive
   acá, con más especificidad por selector, no por !important. */
.tbl-wrap.compacta .tbl td,
.tbl-wrap.compacta .tbl th{padding-top:6px;padding-bottom:6px}
.tbl-wrap.compacta .tbl-card{padding:8px 14px}

/* Tarjeta compacta en pantallas angostas — lista real (<ul>/<li>), nunca
   la misma tabla "aplastada" con display:block (eso le rompe el rol de
   tabla al lector de pantalla justo en el ancho donde más se lo necesita
   leer bien). Tabla y tarjetas conviven siempre en el DOM; sólo una de
   las dos es visible según el ancho. */
.tbl-cards{display:none;list-style:none}
.tbl-card{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-bottom:1px solid var(--ln2);transition:var(--tr)}
.tbl-card:last-child{border-bottom:0}
.tbl-card:hover{background:var(--card2)}
.tbl-card .tbl-row-link,
.tbl-card-titulo{font-size:13.5px;font-weight:500}
.tbl-card-sub{font-size:12px;color:var(--tx3)}
.tbl-card-vacio{padding:0}

@media(max-width:640px){
  .tbl-scroll{display:none}
  .tbl-cards{display:block}
  .tbl-orden-movil{display:block;flex:1;min-width:160px}
  .tbl-colsel{display:none} /* no hay tabla ancha que columnar en este ancho */
}