/* ============================================================================
   TABLA — cabecera, ordenar y filtrar.
   Va DESPUÉS de app.css y ANTES de ios.css: el chasis táctil corrige por
   cascada y tiene que poder tapar lo de acá.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CABECERA

   La cabecera vieja era texto gris suelto sobre el mismo fondo de la tarjeta:
   no se distinguía de la primera fila de datos. Ahora tiene fondo propio,
   versalitas, y cada columna dice en el propio título si se puede ordenar y
   filtrar por ella.

   El position:sticky es para cuando la tabla va dentro de una caja con alto
   propio; con .table-wrap de alto automático no despega, pero tampoco estorba
   y evita tener que acordarse de agregarlo el día que haga falta.
   ---------------------------------------------------------------------------- */
.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  padding: 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table thead th:first-child { border-top-left-radius: var(--r-lg); }
.table thead th:last-child  { border-top-right-radius: var(--r-lg); }

.th-in {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 0 6px 0 12px;
}
.num-col .th-in { justify-content: flex-end; }
.th-txt { padding: 10px 6px 10px 0; }

.th-ord {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 10px 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.th-ord .th-flecha {
  width: 13px; height: 13px;
  opacity: 0;
  transition: opacity .12s ease;
  flex: none;
}
@media (hover: hover) {
  .th-ord:hover { color: var(--text-strong); }
  .th-ord:hover .th-flecha { opacity: .55; }
}
.th-ord:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* La columna por la que se está ordenando se marca de verdad: color de marca,
   flecha siempre visible y una línea abajo. El color nunca va solo. */
.table thead th.ordenada { color: var(--primary); background: var(--primary-soft); }
.table thead th.ordenada .th-flecha { opacity: 1; }
.table thead th.ordenada::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--primary);
}

.th-fil {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border: 0; background: none; padding: 0;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: .45;
  transition: opacity .12s ease, background .12s ease;
}
.th-fil .ico { width: 14px; height: 14px; }
@media (hover: hover) { .th-fil:hover { opacity: 1; background: var(--surface); } }
.th-fil:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; opacity: 1; }
.table thead th.filtrada .th-fil { opacity: 1; color: var(--primary); }
.table thead th.filtrada { color: var(--primary); }

/* ----------------------------------------------------------------------------
   PANEL DE FILTRO
   El mismo contenido en los dos lados: colgando del embudo en escritorio y
   dentro de la hoja en teléfono. Una sola plantilla, un solo comportamiento.
   ---------------------------------------------------------------------------- */
.pop-filtro {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  max-height: min(360px, calc(100vh - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(12, 23, 38, .22));
  overflow: hidden;
}
.pop-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--hairline, var(--border));
  font-size: 13px;
}
.pop-head strong { flex: 1; color: var(--text-strong); }

.pop-buscar { position: relative; padding: 10px 12px 6px; }
.pop-buscar .ico {
  position: absolute; left: 22px; top: 50%; transform: translateY(-40%);
  width: 15px; height: 15px; color: var(--text-muted); pointer-events: none;
}
.pop-buscar .input { padding-left: 32px; font-size: 13px; min-height: 34px; }

.pop-lista { overflow-y: auto; padding: 2px 6px 6px; flex: 1; }
.pop-op {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  color: var(--text);
}
.pop-op > span:not(.cnt) {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pop-op .cnt {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex: none;
}
.pop-op input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; }
@media (hover: hover) { .pop-op:hover { background: var(--surface-2); } }
.pop-todos { margin: 0 6px; border-bottom: 1px solid var(--hairline, var(--border)); border-radius: 0; }

.pop-pie {
  display: flex; gap: 8px; justify-content: space-between;
  padding: 8px 10px;
  border-top: 1px solid var(--hairline, var(--border));
  background: var(--surface-2);
}

/* Dentro de la hoja de teléfono no flota ni tiene borde propio. */
.pop-en-hoja .pop-lista { max-height: 46vh; }
.pop-en-hoja .pop-pie { background: none; border: 0; padding: 10px 0 0; }
.pop-en-hoja .pop-buscar { padding-left: 0; padding-right: 0; }
.pop-en-hoja .pop-buscar .ico { left: 10px; }

/* ----------------------------------------------------------------------------
   CHIPS DE FILTRO ACTIVO
   Un filtro que no se ve puesto es un filtro que se olvida, y después la
   tabla "no muestra datos" sin que nadie entienda por qué.
   ---------------------------------------------------------------------------- */
.tabla-chips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 0 0 var(--space-3);
}
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
.chip-filtro .rot { opacity: .75; font-weight: 500; }
.chip-filtro .ico { width: 13px; height: 13px; }

/* ----------------------------------------------------------------------------
   BARRA DE LA TABLA
   En escritorio la cabecera ya trae ordenar y filtrar, así que la barra solo
   muestra la cuenta. Bajo 640px la tabla se vuelve tarjeta y el <thead>
   desaparece: ahí los dos botones son la ÚNICA forma de ordenar y filtrar.
   ---------------------------------------------------------------------------- */
.tabla-barra {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 0;
}
/* En escritorio la barra suele quedar vacía —la cuenta solo aparece con un
   filtro puesto— y una fila vacía con relleno separa la tabla del título por
   nada. Solo se abre cuando tiene algo adentro. */
.tabla-barra:has(.tabla-cuenta:not(:empty)) { padding-bottom: var(--space-3); }
.tabla-barra .spacer { flex: 1; }
.tabla-barra [data-t-ordenar], .tabla-barra [data-t-filtrar] { display: none; }
.tabla-cuenta {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) {
  .tabla-barra { padding-bottom: var(--space-3); }
  .tabla-barra [data-t-ordenar], .tabla-barra [data-t-filtrar] { display: inline-flex; }
}

.ord-btns { display: flex; gap: 6px; flex: none; }

.tabla-vacia .empty { padding: var(--space-8) var(--space-4); }