/* Kit de tablas — la regla de FILAS DE ALTO FIJO (auditoría de RRHH,
 * 2026-09-24: «Las filas de las tablas tienen que tener el mismo alto»).
 * Doc: docs/10-architecture/ui-listas-y-vistas.md §9.
 *
 * CSS a mano y no utilidades de Tailwind porque hace falta llegar a TODAS las
 * celdas que pinta cada parcial de filas (`[&_td]:…` no está compilado, y
 * desde un worktree no se recompila). Lo carga `layouts/base.twig`; sólo
 * afecta a las tablas que llevan `tabla-fija` (macro `pag.tabla_clases()`,
 * o `data-tabla-kit` en las de DataTables).
 *
 *  · Una línea por celda: nada salta de línea, así que todas las filas miden
 *    lo mismo (el alto mínimo es `--tk-alto`; una fila con avatar lo fija su
 *    avatar, y todas las de esa tabla lo llevan).
 *  · Lo que no cabe se corta con «…» a `--tk-ancho-max`; el texto entero lo
 *    pone `shared/tabla-kit.js` en el `title` de lo cortado.
 *  · Una celda con un desplegable (acciones) no se recorta: el menú tiene que
 *    poder salir de ella.
 *  · El scroll lateral, dentro de su caja (`pag.scroll_clases()`), nunca en
 *    la página.
 */
.tabla-fija {
  --tk-alto: 3.25rem;
  --tk-ancho-max: 20rem;
}

.tabla-fija > tbody > tr > td {
  height: var(--tk-alto);
  white-space: nowrap;
  vertical-align: middle;
}

/* El TOPE de ancho va en el hijo de la celda, no en la celda: en una tabla
 * de `table-layout: auto` el navegador ignora el `max-width` de un `<td>`
 * (medido: 581 px con `max-width: 320px`). Un bloque dentro sí lo respeta,
 * y el texto suelto de una celda lo envuelve `tabla-kit.js` en `.tk-corte`
 * cuando pasa del tope. */
.tabla-fija > tbody > tr > td > :where(div, p, a.block, span.block, .tk-corte) {
  max-width: var(--tk-ancho-max);
}
.tabla-fija > tbody > tr > td :where(div) {
  min-width: 0;
}
.tabla-fija .tk-corte {
  display: block;
}
.tabla-fija > tbody > tr > td :where(p, span.block, a.block, .tk-corte) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desplegables y celdas que piden no recortarse. */
.tabla-fija > tbody > tr > td:has(.hs-dropdown) > *,
.tabla-fija > tbody > tr > td[data-tk-sin-recorte] > * {
  overflow: visible;
  max-width: none;
}

/* El «Sin resultados» de ancho completo no es una celda de dato. */
.tabla-fija > tbody > tr > td[colspan] {
  white-space: normal;
}
.tabla-fija > tbody > tr > td[colspan] > * {
  max-width: none;
}

/* COLUMNAS QUE SE ESCONDEN POR EL ANCHO DE SU CAJA (auditoría CRM ronda 2,
 * F3: «Clientes › Empresas» con scroll lateral a 1.440 px).
 *
 * `data-tk-contenedor` en la caja con scroll y `data-tk-desde="N"` en el
 * `<th>` y en los `<td>` de una columna: la columna sólo se ve cuando la CAJA
 * mide al menos N rem. Consulta de CONTENEDOR y no de viewport a propósito:
 * a 1.440 px la caja mide ~1.030 px con el menú lateral abierto y ~1.300
 * cerrado, y lo que decide si cabe es la caja. Los `md:table-cell` y
 * hermanos no están en el CSS compilado (y desde un worktree no se
 * recompila), por eso va aquí a mano. Escalones: 40 · 50 · 60 · 70 rem. */
[data-tk-contenedor] {
  container-type: inline-size;
}
@container (max-width: 69.99rem) {
  [data-tk-desde="70"] { display: none; }
}
@container (max-width: 59.99rem) {
  [data-tk-desde="60"] { display: none; }
}
@container (max-width: 49.99rem) {
  [data-tk-desde="50"] { display: none; }
}
@container (max-width: 39.99rem) {
  [data-tk-desde="40"] { display: none; }
}
/* Y su contrario, `data-tk-hasta="40"`: SÓLO se ve cuando la caja mide
 * menos de 40 rem. Lo que una columna escondida por `data-tk-desde="40"`
 * deja de enseñar pasa a la línea de debajo del dato principal (Soporte ›
 * Tickets, T3: el estado, la fecha de alta y quién lo abrió no pueden
 * desaparecer de ninguna fila, SOP-14/42). */
@container (min-width: 40rem) {
  [data-tk-hasta="40"] { display: none; }
}

/* DataTables 2 parte la cabecera en `.dt-column-title` + `.dt-column-order`
 * (su hoja no se carga: duplica las flechas). Las flechas del kit van en
 * `.dt-column-order`, en línea con el texto. */
.tabla-fija thead th .dt-column-order {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: 0.25rem;
}
.tabla-fija thead th.dt-orderable-asc,
.tabla-fija thead th.dt-orderable-desc {
  cursor: pointer;
}

/* SIN SCROLL HORIZONTAL (auditoría CRM ronda 3, 2026-09-30: «no quiero
 * ningún scroll horizontal»). Clase `tabla-sin-scroll` en el `<table>` de
 * un listado, y su caja SIN `overflow-x-auto`.
 *
 * `table-layout: fixed` + `width: 100%`: la tabla mide lo que su caja y las
 * columnas se reparten ese ancho (la de la casilla conserva su `w-8`). En
 * `auto`, el mínimo de cada columna es lo que pide su contenido y la suma
 * desbordaba la caja (1.384 px de tabla en 1.247 de hueco en Oportunidades ›
 * Lista). Lo que no cabe en su celda se corta: el texto con «…» —los parciales
 * de filas ya ponen el `title` con el texto entero— y lo demás, recortado.
 * Las columnas OPCIONALES nacen ocultas (`barra.columnas()` con `oculta`) para
 * que las que se ven tengan aire.
 *
 * Mismo aviso que arriba: CSS a mano porque `[&_td]:…` no está compilado. */
.tabla-sin-scroll {
  table-layout: fixed;
  width: 100%;
}
.tabla-sin-scroll > thead > tr > th,
.tabla-sin-scroll > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabla-sin-scroll > thead > tr > th {
  white-space: nowrap;
}
/* Un desplegable (acciones de fila) tiene que poder salir de su celda. */
.tabla-sin-scroll > tbody > tr > td:has(.hs-dropdown),
.tabla-sin-scroll > tbody > tr > td[data-tk-sin-recorte] {
  overflow: visible;
}
/* El «Sin resultados» a lo ancho no es una celda de dato. */
.tabla-sin-scroll > tbody > tr > td[colspan] {
  white-space: normal;
}
/* COLUMNAS OCULTAS por `shared/tabla-columnas.js` (auditoría CRM ronda 3,
 * R3-04): el módulo pone `hcN` en el `<table data-tabla-columnas>` para
 * esconder la columna N. Las reglas eran de cada pantalla (`#mi-tabla.hcN
 * [data-col="N"]`); los listados del CRM llevan hasta 22 columnas desde un
 * catálogo, así que van aquí, genéricas, una vez. Por `[data-col]` y no por
 * `nth-child`: el orden de las columnas también lo cambia el usuario. */
table[data-tabla-columnas].hc1 [data-col="1"], table[data-tabla-columnas].hc2 [data-col="2"],
table[data-tabla-columnas].hc3 [data-col="3"], table[data-tabla-columnas].hc4 [data-col="4"],
table[data-tabla-columnas].hc5 [data-col="5"], table[data-tabla-columnas].hc6 [data-col="6"],
table[data-tabla-columnas].hc7 [data-col="7"], table[data-tabla-columnas].hc8 [data-col="8"],
table[data-tabla-columnas].hc9 [data-col="9"], table[data-tabla-columnas].hc10 [data-col="10"],
table[data-tabla-columnas].hc11 [data-col="11"], table[data-tabla-columnas].hc12 [data-col="12"],
table[data-tabla-columnas].hc13 [data-col="13"], table[data-tabla-columnas].hc14 [data-col="14"],
table[data-tabla-columnas].hc15 [data-col="15"], table[data-tabla-columnas].hc16 [data-col="16"],
table[data-tabla-columnas].hc17 [data-col="17"], table[data-tabla-columnas].hc18 [data-col="18"],
table[data-tabla-columnas].hc19 [data-col="19"], table[data-tabla-columnas].hc20 [data-col="20"],
table[data-tabla-columnas].hc21 [data-col="21"], table[data-tabla-columnas].hc22 [data-col="22"],
table[data-tabla-columnas].hc23 [data-col="23"], table[data-tabla-columnas].hc24 [data-col="24"],
/* R4-07: Localidad · Provincia · Comunidad autónoma (25-27 en personas,
 * 23-25 en empresas). Sin su regla, una columna oculta se ve igual. */
table[data-tabla-columnas].hc25 [data-col="25"], table[data-tabla-columnas].hc26 [data-col="26"],
table[data-tabla-columnas].hc27 [data-col="27"], table[data-tabla-columnas].hc28 [data-col="28"],
table[data-tabla-columnas].hc29 [data-col="29"], table[data-tabla-columnas].hc30 [data-col="30"] {
  display: none;
}
/* Cabeceras arrastrables (reordenar columnas) y el triángulo nativo del
 * `<summary>` del selector de columnas, fuera. */
table[data-crm-listado] > thead th[data-col],
table[data-soporte-tickets] > thead th[data-col] { cursor: grab; }
table[data-crm-listado] > thead th.al-col-dragging,
table[data-soporte-tickets] > thead th.al-col-dragging { opacity: .4; }
table[data-crm-listado] > thead th.al-col-over,
table[data-soporte-tickets] > thead th.al-col-over { box-shadow: inset 2px 0 0 0 currentColor; }
[data-bf-columnas] > summary::-webkit-details-marker { display: none; }

/* En el MÓVIL (< 640 px) repartir siete columnas en 340 px las deja en «T…»:
 * ahí, y sólo ahí, la tabla vuelve a medir lo que pide su contenido y se
 * desplaza DENTRO de su caja (nunca la página). En escritorio, sin scroll. */
@media (max-width: 639.98px) {
  .tabla-sin-scroll {
    table-layout: auto;
  }
  :has(> .tabla-sin-scroll) {
    overflow-x: auto;
  }
}

/* FILAS APILADAS cuando la tabla no cabe (AJ27, Campañas › Cadencias). Una
 * tabla con pocas filas y celdas ricas (el diagrama de pasos de una cadencia)
 * no se lee desplazándola de lado ni con su columna principal estrangulada a
 * un paso por línea: cuando su CAJA (`data-tk-contenedor`, consulta de
 * contenedor como `data-tk-desde`) mide menos de 56 rem, `tabla-apilada`
 * convierte cada fila en una tarjeta con una celda debajo de otra, y cada
 * celda con `data-etiqueta` lleva su rótulo encima (el de su columna, que
 * entonces se esconde). 56 rem: por debajo, las columnas de ancho fijo de
 * Cadencias (Dentro, Resultado, Acciones: ~410 px) dejaban el diagrama en
 * menos de cuatro pasos por línea. Va con `tabla-sin-scroll`. */
@container (max-width: 55.99rem) {
  .tabla-apilada,
  .tabla-apilada > tbody,
  .tabla-apilada > tbody > tr,
  .tabla-apilada > tbody > tr > td {
    display: block;
    width: 100%;
  }
  .tabla-apilada > thead {
    display: none;
  }
  .tabla-apilada > tbody > tr {
    padding-block: 0.5rem;
  }
  .tabla-apilada > tbody > tr > td {
    padding: 0.375rem 1rem;
    text-align: start;
    white-space: normal;
    overflow: visible;
  }
  .tabla-apilada > tbody > tr > td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
}
/* …y su caja no se desplaza en el móvil: la regla de `tabla-sin-scroll` de
 * arriba le pone `overflow-x: auto`, y apilada ya no hay nada que desplazar
 * (una consulta de contenedor no puede tocar al propio contenedor). */
@media (max-width: 639.98px) {
  :has(> .tabla-apilada) {
    overflow-x: visible;
  }
}