/* ═══ LA CAPA VIAJA CON LA HOJA (2026-07-20) ══════════════════════════════════
Esta hoja declara su @layer ACÁ ADENTRO. Antes la capa la ponía quien la
importaba —`@import url(...) layer(lib)`, repetido en 4 emisores— así que
la hoja caía en su capa SOLO si el importador acertaba, y cargarla por
la dejaba SIN CAPA: en CSS lo no-capado le gana a todo lo capado.
Con la capa acá la hoja es inmune a CÓMO se la cargue, y el puede
usar (paralelo, y un fallo se ve en Network) en vez de @import
(serial, render-blocking, y si falla se pierde EN SILENCIO — el defecto que
dejaba el shell sin `container-type` y tiraba el layout a flujo plano).
═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
* Cx · TABLAS (la piel compartida de CxSimpleTable).
*
* Fuente ÚNICA del skin a nivel celda (th/td) y de los estados de fila.
* Antes vivía scoped en CxSimpleTable.razor.css, pero NO pintaba: el markup de
*
/
se escribe en los RenderFragment del consumidor (HeaderRow/RowTemplate),
* así que Blazor los estampa con el scope-id del CONSUMIDOR, no el de CxSimpleTable.
* Las reglas scoped ('.cx-table th[b-xxx]') jamás casaban con las celdas.
* Al ser global (mismo contrato que cx-controls), cualquier celda dentro de una
* .cx-table recibe estilo sin importar su scope-id. Mismo patrón que la
* piel de inputs (.cx-input vive en cx-controls por exactamente esta razón).
*
* Sólo consume tokens (--mx-color-*, --mx-radius-*, --mx-space-*, --mx-text-*,
* --mx-shadow-*, --mx-focus-ring-rgb). NO define tokens. Voltea solo en oscuro.
*
* 3 planos: header (surface-alt, opaco, el más alto) > zebra (tinte alfa neutro
* vía shadow-color, no compite con el hover alfa-primary) > body (surface).
*/
.cx-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--mx-text-sm);
background: var(--mx-color-surface);
border: var(--mx-border-width) solid var(--mx-color-border);
border-radius: var(--mx-radius-md);
box-shadow: var(--mx-shadow-sm);
overflow: hidden;
}
.cx-table th,
.cx-table td {
text-align: left;
padding: var(--mx-space-2) var(--mx-space-3); /* 8/12 — ultra-compacto */
border-bottom: var(--mx-border-width) solid var(--mx-color-border);
color: var(--mx-color-text);
}
/* IDs / montos alineados verticalmente */
.cx-table td {
font-variant-numeric: tabular-nums;
}
.cx-table tbody tr:last-child td {
border-bottom: none;
}
/* Header = plano más alto (surface-alt, opaco) */
.cx-table th {
background: var(--mx-color-surface-alt);
font-weight: 600;
color: var(--mx-color-text-muted);
font-size: var(--mx-text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: var(--mx-border-width) solid var(--mx-color-border);
}
/* Header sticky para tablas largas (no estorba en tablas cortas) */
.cx-table thead th {
position: sticky;
top: 0;
z-index: 1;
}
/* Zebra = tinte alfa neutro (no opaco) → no se mezcla mal con el hover.
shadow-color es 0 0 0 en claro/oscuro estándar y voltea solo donde el tema lo
define. 6% es perceptible sobre la superficie sin tapar el hover/selected. */
.cx-table tbody tr:nth-child(even) td {
background: rgb(var(--mx-shadow-color) / 0.06);
}
.cx-table__row--clickable {
cursor: pointer;
transition: background var(--mx-transition-fast) var(--mx-ease-out);
}
/* Hover sobre la fila entera — gana al zebra en pares e impares por igual */
.cx-table__row--clickable:hover td,
.cx-table__row--clickable:nth-child(even):hover td {
background: var(--mx-color-surface-hover);
color: var(--mx-color-text);
}
/* Foco por teclado — anillo inset (no se recorta con overflow:hidden del container) */
.cx-table__row--clickable:focus-visible {
outline: none;
}
.cx-table__row--clickable:focus-visible td {
box-shadow: inset 0 0 0 2px rgb(var(--mx-focus-ring-rgb) / 0.7);
}
/* Fila seleccionada — surface-active + barra primary lateral. Gana al zebra y al hover. */
.cx-table__row--selected td,
.cx-table__row--selected:nth-child(even) td,
.cx-table__row--selected.cx-table__row--clickable:hover td {
background: var(--mx-color-surface-active);
}
.cx-table__row--selected td:first-child {
box-shadow: inset 2px 0 0 0 var(--mx-color-primary);
}
/* Empty state */
.cx-table__empty td {
color: var(--mx-color-text-muted);
text-align: center;
padding: var(--mx-space-5);
background: var(--mx-color-surface);
}
@media (prefers-reduced-motion: reduce) {
.cx-table__row--clickable { transition: none; }
}
}