/*
 * SAO Vox: tabla de datos tipo Excel (SaoTabla), marca v3 (2026-10-16).
 * Va después de tokens.css y componentes.css; solo usa variables de tokens.css: ningún color literal. Prefijo .st
 * La tabla en sí es .sv-tabla (componentes.css): este archivo añade la barra, la cabecera con orden, filtro y asa de ancho,
 * los menús de filtro y de columnas, la paginación y la ficha por fila en pantallas angostas.
 * Plano: solo lo que flota (los menús, que son .sv-menu) lleva sombra. Guía: docs/marca/tabla.md.
 */

.st { display: grid; gap: var(--sv-space-3); min-width: 0; font-variant-numeric: tabular-nums; }
.st [hidden] { display: none !important; }

/* Íconos: los trazos de Lucide, a 1,5 */
.st__icono { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Solo para el lector de pantalla */
.st__solo-lector,
.st__tabla caption.st__solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Barra de herramientas: búsqueda a la izquierda; columnas y exportar a la derecha */
.st__barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2) var(--sv-space-3); }
.st__buscar { position: relative; flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.st__buscar .sv-campo__control { min-height: 2rem; padding-left: 2.25rem; }
.st__buscar .st__icono { position: absolute; top: 50%; left: var(--sv-space-3); transform: translateY(-50%); color: var(--sv-text-3); pointer-events: none; }
.st__barra-acciones { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); margin-left: auto; }
.st__btn-movil { display: none; }
@media (pointer: coarse) {
  .st__buscar .sv-campo__control { min-height: 2.75rem; }
}

/* Chips de filtros activos: píldora con ✕ y, al final, «Quitar filtros» */
.st__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2); }
.st__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  max-width: 100%;
  padding: 0 var(--sv-space-1) 0 var(--sv-space-3);
  border: 1px solid var(--sv-border-strong);
  border-radius: var(--sv-radius-full);
  background: var(--sv-surface-1);
  color: var(--sv-text-1);
  font-size: var(--sv-text-xs);
  line-height: var(--sv-leading-snug);
}
.st__chip-texto { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st__chip button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--sv-radius-full);
  background: transparent;
  color: var(--sv-text-2);
  cursor: pointer;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-out), color var(--sv-dur-fast) var(--sv-ease-out);
}
.st__chip button:hover { background: var(--sv-surface-3); color: var(--sv-text-1); }
@media (pointer: coarse) {
  .st__chip button { width: 2.25rem; height: 2.25rem; }
}

/* Mensaje de error en línea (role="alert"); vacío no ocupa lugar */
.st__error { margin: 0; padding: var(--sv-space-3) var(--sv-space-4); border: 1px solid var(--sv-danger-border); border-radius: var(--sv-radius-md); background: var(--sv-danger-bg); color: var(--sv-danger); font-size: var(--sv-text-sm); line-height: var(--sv-leading-snug); }
.st__error:empty { display: none; }

/* Tabla: ancho fijo por columna (colgroup). Filas de 44 y cabecera de 36, de .sv-tabla */
/* relative: los textos solo para lector (position: absolute) se desplazan dentro de la caja y no ensanchan la página */
.st__caja { position: relative; min-width: 0; }
.st__tabla { table-layout: fixed; }
.st__tabla thead th { padding: 0; overflow: visible; }
.st__tabla td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st__mono { font-family: var(--sv-font-mono); font-size: var(--sv-text-xs); }
.st__nulo { color: var(--sv-text-3); }
.st__col-acciones { width: 8rem; }

/* Cabecera de columna: título que ordena, embudo que filtra y asa de ancho en el borde derecho */
.st__cab { display: flex; align-items: center; gap: var(--sv-space-1); min-height: 2.25rem; padding: 0 var(--sv-space-2) 0 var(--sv-space-4); }
.st__ordenar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sv-space-1);
  min-width: 0;
  height: 2rem;
  margin: 0 0 0 calc(var(--sv-space-2) * -1);
  padding: 0 var(--sv-space-2);
  border: 0;
  border-radius: var(--sv-radius-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--sv-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--sv-dur-fast) var(--sv-ease-out);
}
.st__ordenar:hover { background: var(--sv-surface-2); }
.st__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st__ordenar .st__icono { width: 0.875rem; height: 0.875rem; }
.st__ico-asc,
.st__ico-desc { display: none; }
.st__ico-neutro { color: var(--sv-text-3); opacity: 0; transition: opacity var(--sv-dur-fast) var(--sv-ease-out); }
/* Sin orden, la flecha solo aparece al apuntar o enfocar: la cabecera queda limpia */
.st__ordenar:is(:hover, :focus-visible) .st__ico-neutro { opacity: 1; }
@media (hover: none) {
  .st__ico-neutro { opacity: 1; }
}
.st__th[aria-sort="ascending"] .st__ico-asc,
.st__th[aria-sort="descending"] .st__ico-desc { display: block; }
.st__th[aria-sort="ascending"] .st__ico-neutro,
.st__th[aria-sort="descending"] .st__ico-neutro { display: none; }
.st__th[aria-sort="ascending"],
.st__th[aria-sort="descending"] { color: var(--sv-text-1); }
/* Columnas de cifras: el título va a la derecha, junto a los números */
.st__th--num .st__cab { flex-direction: row-reverse; padding: 0 var(--sv-space-4) 0 var(--sv-space-2); }
.st__th--num .st__ordenar { justify-content: flex-end; margin: 0 calc(var(--sv-space-2) * -1) 0 0; }
.st__filtro { flex: none; color: var(--sv-text-3); }
.st__filtro:hover { color: var(--sv-text-1); }
.st__filtro--activo { background: var(--sv-surface-3); color: var(--sv-text-1); }
.st__filtro--activo .st__icono { fill: currentColor; }

.st__asa { position: absolute; top: 0; right: 0; bottom: 0; width: 0.5rem; cursor: col-resize; touch-action: none; }
.st__asa::after { content: ""; position: absolute; top: 0.5rem; right: 0; bottom: 0.5rem; width: 1px; background: var(--sv-border-strong); opacity: 0; transition: opacity var(--sv-dur-fast) var(--sv-ease-out); }
.st__th:hover .st__asa::after,
.st__asa:focus-visible::after,
.st__asa--activa::after { opacity: 1; }
.st__asa--activa::after { background: var(--sv-text-1); width: 2px; }
@media (pointer: coarse) {
  .st__asa { width: 1.25rem; }
}

/* Columna de acciones: pegada a la derecha, sin ordenar ni filtrar */
.st__tabla :is(th, td).st__acciones { position: sticky; right: 0; border-left: 1px solid var(--sv-border); text-align: right; overflow: visible; }
.st__tabla td.st__acciones { z-index: 1; background: var(--sv-surface-raised); }
.st__tabla thead th.st__acciones { z-index: 2; background: var(--sv-surface-1); }
/* max-content: tabla.js mide esta caja para dar el ancho de la columna; 8rem es solo hasta esa primera medida */
.st__acciones-caja { display: flex; align-items: center; justify-content: flex-end; gap: var(--sv-space-1); width: max-content; margin-left: auto; }

/* Estados sin filas */
.st__vacio .sv-vacio,
.st > .sv-vacio { border: 1px solid var(--sv-border); border-radius: var(--sv-radius-panel); background: var(--sv-surface-raised); }

/* Pie: contador y tamaño de página a la izquierda; páginas a la derecha */
.st__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sv-space-2) var(--sv-space-4); color: var(--sv-text-2); font-size: var(--sv-text-sm); }
.st__pie-izq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-2) var(--sv-space-3); }
.st__contador { margin: 0; }
.st__tam { width: auto; min-height: 2rem; }
.st__pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sv-space-1); }
.st__pag { min-width: 2rem; padding: 0 var(--sv-space-2); font-variant-numeric: tabular-nums; }
.st__pag[aria-current="page"] { border-color: var(--sv-border-strong); background: var(--sv-surface-3); }
.st__puntos { min-width: 1.25rem; text-align: center; color: var(--sv-text-3); }

/* Menús flotantes (.sv-menu: Popover API, colocados por el script) */
.st__flotante { gap: var(--sv-space-3); min-width: 14rem; max-width: min(22rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: var(--sv-space-3); overflow-y: auto; overscroll-behavior: contain; white-space: normal; }
.st__flotante[role="menu"] { gap: 0; min-width: 11rem; padding: var(--sv-space-1); }
.st__grupo { display: grid; gap: var(--sv-space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.st__rango { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-space-2); }
.st__nota { margin: 0; color: var(--sv-text-2); font-size: var(--sv-text-xs); line-height: var(--sv-leading-snug); }
.st__lista,
.st__col-lista { display: grid; max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; }
.st__lista { border: 1px solid var(--sv-border); border-radius: var(--sv-radius-md); }
.st__op { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; min-height: 2rem; padding: 0 var(--sv-space-2); border-radius: var(--sv-radius-xs); font-size: var(--sv-text-sm); line-height: var(--sv-leading-snug); cursor: pointer; }
.st__op:hover { background: var(--sv-surface-2); }
.st__op input { flex: none; width: 1rem; height: 1rem; margin: 0; accent-color: var(--sv-primary); }
.st__op span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st__op--todo { border-bottom: 1px solid var(--sv-border); border-radius: 0; font-weight: var(--sv-weight-medium); }
.st__quitar { justify-self: start; }
.st__col-lista { max-height: 18rem; }
.st__col-fila { display: flex; align-items: center; gap: var(--sv-space-1); }
.st__col-fila .st__op { flex: 1 1 auto; }
.st__restablecer { border-top: 1px solid var(--sv-border); border-radius: 0; margin-top: var(--sv-space-1); }
@media (pointer: coarse) {
  .st__op { min-height: 2.75rem; }
}

/* Pantallas angostas: cada fila es una ficha «etiqueta: valor» (la etiqueta sale de data-etiqueta). Sin cabecera: el orden
   y los filtros se abren desde el botón «Filtros», en una hoja anclada abajo. El ancho de las columnas no cambia nada. */
@media (max-width: 47.99rem) {
  .st__btn-movil { display: inline-flex; }
  .st__buscar { max-width: none; }
  .st__caja { overflow: visible; border: 0; background: none; }
  .st__tabla { display: block; }
  .st__tabla thead,
  .st__tabla colgroup { display: none; }
  .st__tabla tbody,
  .st__tabla tr { display: block; }
  .st__tabla tr { margin: 0 0 var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4); border: 1px solid var(--sv-border); border-radius: var(--sv-radius-panel); background: var(--sv-surface-raised); }
  .st__tabla tbody tr:hover > * { background: none; }
  .st__tabla td {
    display: grid;
    grid-template-columns: minmax(6rem, 2fr) minmax(0, 3fr);
    align-items: center;
    gap: 0 var(--sv-space-3);
    height: auto;
    padding: var(--sv-space-1) 0;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
  }
  .st__tabla td.sv-num { text-align: left; }
  /* Insignias y enlaces conservan su ancho: no se estiran a toda la columna de valores */
  .st__tabla td > * { justify-self: start; max-width: 100%; }
  .st__tabla td[data-etiqueta]::before { content: attr(data-etiqueta); align-self: start; padding-top: 0.1rem; color: var(--sv-text-2); font-family: var(--sv-font-sans); font-size: var(--sv-text-xs); font-weight: var(--sv-weight-medium); }
  .st__tabla td.st__acciones { position: static; display: block; margin-top: var(--sv-space-2); padding-top: var(--sv-space-3); border-top: 1px solid var(--sv-border); border-left: 0; background: none; text-align: left; }
  .st__acciones-caja { flex-wrap: wrap; justify-content: flex-start; gap: var(--sv-space-2); width: auto; margin-left: 0; }
  .st__pie { justify-content: center; }

  .st__panel-movil { inset: auto 0 0 0; width: 100%; min-width: 0; max-width: none; max-height: 85dvh; border-width: 1px 0 0; border-radius: var(--sv-radius-panel) var(--sv-radius-panel) 0 0; }
  .st__panel-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-space-3); }
  .st__panel-titulo { margin: 0; font-size: var(--sv-text-lg); font-weight: var(--sv-weight-semibold); line-height: var(--sv-leading-tight); }
  .st__det { border-top: 1px solid var(--sv-border); }
  .st__det summary { display: flex; align-items: center; min-height: 2.75rem; font-size: var(--sv-text-sm); font-weight: var(--sv-weight-medium); cursor: pointer; }
  .st__det-cuerpo { padding-bottom: var(--sv-space-3); }
}

/* El contenedor de los menús no genera caja: los popover son de la capa superior */
.st__flotantes { display: contents; }