/* Páginas de listado a todo el ancho y tabla densa.
 *
 * `.main-ancho` (listados): todo el ancho con 16px de margen (24px desde 1440). `.main-ficha`: más
 * ancha que el resto (1600px) pero legible. La barra superior va siempre a todo el ancho.
 *
 * `.tabla-listado` (core/_list_table.html, el de clientes, usuarios): densidad «Compacta» por
 * defecto (13px, celdas 4px 8px, una línea con «…» y el texto completo en el `title`), o «Normal»
 * con `html[data-densidad="normal"]` (el selector de columnas la cambia y la recuerda en el
 * navegador). El ancho máximo de cada columna sale de su `Col.weight` (`--w` en `.cel`). La tabla
 * scrollea adentro de su caja (nunca la página): encabezado fijo arriba y primeras columnas
 * (`.fija`, `.fija-2`) fijas a la izquierda.
 */
.topbar-inner { width: 100%; padding-left: 1rem; padding-right: 1rem; }
.main-ancho { width: 100%; padding: 1.25rem 1rem 1.5rem; }
.main-ficha { max-width: 1600px; margin: 0 auto; padding: 1.5rem 1rem; }
@media (min-width: 1440px) {
    .topbar-inner, .main-ancho, .main-ficha { padding-left: 1.5rem; padding-right: 1.5rem; }
}
.main-ancho, .main-ficha { min-width: 0; }

.tabla-listado { overflow: auto; max-width: 100%; overscroll-behavior-x: contain; }
@media (min-width: 768px) {
    .tabla-listado { max-height: calc(100vh - 7.5rem); }
}
.tabla-listado table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.3; }
.tabla-listado th {
    position: sticky; top: 0; z-index: 2; background: rgb(var(--c-card)); text-align: left;
    padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap; color: rgb(var(--c-txt-muted)); border-bottom: 1px solid rgb(var(--c-stroke-strong));
}
.tabla-listado td {
    padding: 4px 8px; white-space: nowrap; border-bottom: 1px solid rgb(var(--c-stroke));
    color: rgb(var(--c-txt)); background: rgb(var(--c-card));
}
.tabla-listado tr:hover td { background: rgb(var(--c-subtle)); }
.tabla-listado th.text-right, .tabla-listado td.text-right { text-align: right; }
.tabla-listado .text-right .cel { margin-left: auto; }
.tabla-listado .cel {
    max-width: calc(var(--w, 10) * 0.72em); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabla-listado th .cel { max-width: calc(var(--w, 10) * 0.9em); }
.tabla-listado .text-xs { font-size: 12px; }
.tabla-listado .badge { font-size: 11px; padding: 0 6px; line-height: 1.45; }
.tabla-listado .btn-sm { padding: 2px 8px; font-size: 12px; }
.tabla-listado .fila-menu-btn { width: 1.5rem; height: 1.5rem; }
/* Fecha y hora: en una línea. */
.tabla-listado .cel br { display: none; }
.tabla-listado .cel br + * { margin-left: 0.25em; }

/* La primera columna (razón social, nombre…) es la flexible: absorbe todo el ancho que sobra (mínimo
 * 14rem, sin máximo) y el resto se ajusta a su contenido (tope por `--w`). `max-width: 0` en la celda
 * es el truco para que `width: 100%` no la agrande por el texto: el «…» recorta y el `title` lo completa. */
.tabla-listado :is(th, td).fija-2, .tabla-listado :is(th, td).fija:not(.th-check, .td-check) { width: 100%; min-width: 14rem; max-width: 0; }
.tabla-listado :is(.fija-2, .fija:not(.th-check, .td-check)) .cel { max-width: none; }

/* Columnas fijas al scrollear de costado. */
.tabla-listado .fija { position: sticky; left: 0; z-index: 1; }
.tabla-listado .fija-2 { position: sticky; left: var(--fija-1, 2.25rem); z-index: 1; box-shadow: 1px 0 0 rgb(var(--c-stroke)); }
.tabla-listado th.fija, .tabla-listado th.fija-2 { z-index: 3; }
@media (max-width: 640px) {
    .tabla-listado .fija-2 { position: static; box-shadow: none; }
}
.tabla-listado .th-check, .tabla-listado .td-check { width: 2.25rem; min-width: 2.25rem; max-width: 2.25rem; }

/* Normal: la de antes (más aire, el texto largo baja de línea). */
html[data-densidad="normal"] .tabla-listado table { font-size: 0.875rem; line-height: 1.45; }
html[data-densidad="normal"] .tabla-listado th { padding: 0.625rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em; }
html[data-densidad="normal"] .tabla-listado td { padding: 0.625rem 1rem; white-space: normal; }
html[data-densidad="normal"] .tabla-listado .cel { white-space: normal; max-width: calc(var(--w, 10) * 1.1em); }
html[data-densidad="normal"] .tabla-listado .badge { font-size: 0.75rem; padding: 0.1875rem 0.625rem; }
html[data-densidad="normal"] .tabla-listado :is(.fija-2, .fija:not(.th-check, .td-check)) .cel { max-width: none; }
html[data-densidad="normal"] .tabla-listado .cel br { display: initial; }
html[data-densidad="normal"] .tabla-listado .th-check, html[data-densidad="normal"] .tabla-listado .td-check { width: 3rem; min-width: 3rem; max-width: 3rem; }
html[data-densidad="normal"] .tabla-listado .fija-2 { left: 3rem; }

/* Selector de densidad (en el de columnas). */
.densidad { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgb(var(--c-txt-muted)); }