/* ============================================================================
   Holos — PRIMITIVAS DEL SISTEMA (docs/design/holos-design-system.md)
   La única hoja del Design System. Carga de ÚLTIMA. Lee tokens de brand.css y nada más.
   Regla: ninguna primitiva lleva CSS aislado (.razor.css) — el aislamiento no alcanza al
   contenido que la página aporta (issue 1272). Ningún módulo redefine lo que está acá (gate G9).
   Sin marcas de prioridad, salvo el bloque de reduced-motion (apagar movimiento es la única excepción).
   ============================================================================ */

/* ── Base ─────────────────────────────────────────────────────────────────────────────────── */
/* D-UI-1: el cuerpo de la app es base (14). html queda en 16 para no mover los rem de app.css. */
body {
    font-size: var(--holos-font-base);
}

/* Foco visible en TODO lo interactivo: outline sólido (≈5.5:1 claro) + halo con el token que ya
   existía (--holos-accent-glow). Dentro de contenedores con scroll el anillo va inset (abajo). */
:focus-visible {
    outline: 2px solid var(--holos-brand-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--holos-accent-glow);
}

.holos-dialog :focus-visible,
.holos-page table :focus-visible {
    outline-offset: -2px;
    box-shadow: inset 0 0 0 2px var(--holos-accent-glow);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ── HolosPage: raíz estructural y dueña de la densidad (§3.1, §5) ──────────────────────────── */
.holos-page {
    min-width: 0;
    padding: var(--holos-page-pad);
}

/* Cuando la página ya tiene raíz, el <main> del layout cede su padding (arriba y a los lados);
   el padding INFERIOR lo sigue poniendo el shell móvil para que su barra no tape el contenido. */
.holos-app .holos-content:has(> .holos-page) {
    padding-top: 0;
    padding-inline: 0;
}

.holos-page[data-density="executive"] {
    --holos-page-pad: var(--holos-space-5);
    --holos-card-pad: 20px;
    --holos-row-h: 44px;
    --holos-cell-y: 10px;
    --holos-cell-x: 12px;
    --holos-control-h: var(--holos-control-md);
    --holos-h1: var(--holos-font-2xl);
    --holos-table-text: var(--holos-font-base);
}

.holos-page[data-density="operational"] {
    --holos-page-pad: var(--holos-space-4);
    --holos-card-pad: var(--holos-space-3);
    --holos-row-h: 36px;
    --holos-cell-y: 6px;
    --holos-cell-x: 10px;
    --holos-control-h: var(--holos-control-sm);
    --holos-h1: var(--holos-font-xl);
    --holos-table-text: var(--holos-font-md);
}

.holos-page[data-density="data"] {
    --holos-page-pad: var(--holos-space-4);
    --holos-card-pad: var(--holos-space-3);
    --holos-row-h: 32px;
    --holos-cell-y: 4px;
    --holos-cell-x: 8px;
    --holos-control-h: var(--holos-control-sm);
    --holos-h1: var(--holos-font-xl);
    --holos-table-text: var(--holos-font-md);
}

.holos-page[data-density="form"] {
    --holos-page-pad: var(--holos-space-5);
    --holos-card-pad: 20px;
    --holos-row-h: 36px;
    --holos-cell-y: 6px;
    --holos-cell-x: 10px;
    --holos-control-h: var(--holos-control-md);
    --holos-h1: var(--holos-font-2xl);
    --holos-table-text: var(--holos-font-base);
}

/* Capa TOUCH (§2.8): no es un perfil que se elige, es lo que el puntero grueso impone sobre
   cualquier perfil — tableta de check-in, housekeeping en escritorio táctil, POS. */
@media (pointer: coarse) {
    .holos-page {
        --holos-page-pad: var(--holos-space-3);
        --holos-card-pad: var(--holos-space-4);
        --holos-row-h: 52px;
        --holos-cell-y: 12px;
        --holos-cell-x: 12px;
        --holos-control-h: var(--holos-control-lg);
    }

    /* Inputs a 16 para que iOS no haga zoom al enfocar (NO COMPROBADO en dispositivo; costo cero) */
    .holos-page input:not([type="checkbox"]):not([type="radio"]),
    .holos-page select,
    .holos-page textarea {
        font-size: var(--holos-font-lg);
    }
}

/* ── Cabecera de página: reglas base que antes vivían en holos-refined.css (dueño correcto) ── */
.holos-module-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--holos-font-xs);
    font-weight: 600;
    color: var(--holos-accent);
}

.holos-module-lead {
    max-width: 62ch;
    line-height: 1.6;
}

.holos-page-header-main h1,
.holos-page-header h1 {
    letter-spacing: -0.02em;
}

.holos-page .holos-page-header h1 {
    font-size: var(--holos-h1);
}

/* En una página migrada la cabecera respira antes del contenido (el North Star deja aire entre el
   lead y «Hoy en Personas»); el 0.65rem de app.css era para las páginas legacy. */
.holos-page .holos-page-header {
    margin-bottom: var(--holos-space-5);
}

.holos-page-back {
    transition: color var(--holos-motion-fast) ease, transform var(--holos-motion-fast) ease;
}

.holos-page-back:hover {
    transform: translateX(-2px);
}

/* Teléfono (640): la cabecera apila y el h1 se compacta. Antes: 520/820 en holos-refined.css. */
@media (width < 640px) {
    .holos-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--holos-space-3);
    }

    .holos-page-header-main h1,
    .holos-page-header h1 {
        font-size: var(--holos-font-xl);
    }
}

/* ── HolosMetricCard (KPI oficial mientras nace HolosKpiTile): línea de detalle bajo la etiqueta ── */
.holos-metric-card .holos-metric-sub {
    display: block;
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
    margin-top: var(--holos-space-1);
}

/* ── HolosDialog: <dialog> nativo, top layer — sin z-index (§2.9, D-UI-11) ────────────────── */
.holos-dialog {
    --holos-dialog-w: 32rem;
    border: 1px solid var(--holos-border);
    padding: 0;
    border-radius: var(--holos-radius);
    background: var(--holos-surface-elevated);
    color: var(--holos-text);
    box-shadow: var(--holos-shadow-md);
    width: min(100% - 2 * var(--holos-space-4), var(--holos-dialog-w));
    max-height: min(85dvh, 100% - 2 * var(--holos-space-4));
    display: none;
}

.holos-dialog[open] {
    display: flex;
    flex-direction: column;
}

.holos-dialog--sm { --holos-dialog-w: 24rem; }
.holos-dialog--lg { --holos-dialog-w: 48rem; }

.holos-dialog::backdrop {
    background: color-mix(in srgb, var(--holos-shadow-ink) 45%, transparent);
}

.holos-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--holos-space-3);
    padding: var(--holos-space-4) var(--holos-space-5);
    border-bottom: 1px solid var(--holos-border);
}

.holos-dialog-head h2 {
    margin: 0;
    font-size: var(--holos-font-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.holos-dialog-close {
    width: var(--holos-control-md);
    height: var(--holos-control-md);
    border: 1px solid var(--holos-border);
    border-radius: var(--holos-radius-sm);
    background: var(--holos-surface);
    color: var(--holos-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    font: inherit;
}

.holos-dialog-body {
    padding: var(--holos-space-5);
    overflow: auto;
    min-height: 0;
}

.holos-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--holos-space-2);
    padding: var(--holos-space-3) var(--holos-space-5);
    border-top: 1px solid var(--holos-border);
}

@media (pointer: coarse) {
    .holos-dialog-close {
        width: var(--holos-control-lg);
        height: var(--holos-control-lg);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   P1-A — las cinco primitivas del MODULE HUB (docs/design/ui-p1a-personas-module-hub.md §4).
   Todas leen tokens de brand.css y los de perfil que fija HolosPage. Nada de .card, .btn- ni .chip legacy.
   (La secuencia asterisco-barra dentro del texto de un comentario lo cierra: el 16-sep se tragó .holos-tone-success.)
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── HolosTone: el ÚNICO mapa tono → color (§2.5). Cada clase fija tres custom properties que
   leen chip, tile y el cuadro de icono. Ningún tono es la marca. ───────────────────────────── */
.holos-tone-success { --holos-tone: var(--holos-success); --holos-tone-ink: var(--holos-success-ink); --holos-tone-soft: var(--holos-success-soft); }
.holos-tone-warning { --holos-tone: var(--holos-warning); --holos-tone-ink: var(--holos-warning-ink); --holos-tone-soft: var(--holos-warning-soft); }
.holos-tone-danger  { --holos-tone: var(--holos-danger);  --holos-tone-ink: var(--holos-danger-ink);  --holos-tone-soft: var(--holos-danger-soft); }
.holos-tone-info    { --holos-tone: var(--holos-info);    --holos-tone-ink: var(--holos-info-ink);    --holos-tone-soft: var(--holos-info-soft); }
.holos-tone-neutral { --holos-tone: var(--holos-neutral); --holos-tone-ink: var(--holos-neutral-ink); --holos-tone-soft: var(--holos-neutral-soft); }

/* Cuadro tintado para un icono de línea (lo comparten KpiTile, Card Nav y las filas del hub). */
.holos-icon-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--holos-control-lg);
    height: var(--holos-control-lg);
    border-radius: var(--holos-radius-sm);
    background: var(--holos-tone-soft);
    color: var(--holos-tone-ink);
}

.holos-icon-tile svg {
    width: var(--holos-font-xl);
    height: var(--holos-font-xl);
}

/* El cuadro de icono de NAVEGACIÓN usa el acento (interacción), nunca un tono de estado. */
.holos-icon-tile--brand {
    background: var(--holos-brand-primary-soft);
    color: var(--holos-brand-primary);
}

/* ── HolosButton (D-UI-7): cuatro variantes × cuatro alturas; input y botón a la misma altura ── */
.holos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--holos-space-2);
    height: var(--holos-control-md);
    padding: 0 var(--holos-space-4);
    border: 1px solid transparent;
    border-radius: var(--holos-radius-sm);
    font: inherit;
    font-size: var(--holos-font-base);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--holos-motion-fast) ease, border-color var(--holos-motion-fast) ease, color var(--holos-motion-fast) ease;
}

.holos-btn svg {
    width: 1em;
    height: 1em;
    flex: none;
}

.holos-btn--xs { height: var(--holos-control-xs); padding: 0 var(--holos-space-2); font-size: var(--holos-font-sm); }
.holos-btn--sm { height: var(--holos-control-sm); padding: 0 var(--holos-space-3); font-size: var(--holos-font-sm); }
.holos-btn--lg { height: var(--holos-control-lg); padding: 0 var(--holos-space-5); }

.holos-btn--primary {
    background: var(--holos-brand-primary);
    border-color: var(--holos-brand-primary);
    color: var(--holos-on-accent);
}

.holos-btn--primary:hover {
    background: var(--holos-brand-primary-hover);
    border-color: var(--holos-brand-primary-hover);
}

.holos-btn--secondary {
    background: var(--holos-surface);
    border-color: var(--holos-border-strong);
    color: var(--holos-text);
}

.holos-btn--secondary:hover {
    background: var(--holos-surface-muted);
}

.holos-btn--ghost {
    background: transparent;
    color: var(--holos-text-soft);
}

.holos-btn--ghost:hover {
    background: var(--holos-surface-muted);
    color: var(--holos-text);
}

.holos-btn--danger {
    background: var(--holos-danger);
    border-color: var(--holos-danger);
    color: var(--holos-on-accent);
}

.holos-btn--danger:hover {
    background: color-mix(in srgb, var(--holos-danger) 85%, var(--holos-shadow-ink));
    border-color: color-mix(in srgb, var(--holos-danger) 85%, var(--holos-shadow-ink));
}

.holos-btn:disabled,
.holos-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── HolosStatusChip: tinte suave del tono, tinta del tono, pill (§3.1) ─────────────────────── */
.holos-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--holos-space-1);
    height: var(--holos-control-xs);
    padding: 0 var(--holos-space-3);
    border: 1px solid color-mix(in srgb, var(--holos-tone) 28%, transparent); /* el tinte Success sobre blanco era invisible: el chip se lee como chip */
    border-radius: var(--holos-radius-pill);
    background: var(--holos-tone-soft);
    color: var(--holos-tone-ink);
    font-size: var(--holos-font-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.holos-chip svg {
    width: var(--holos-font-base);
    height: var(--holos-font-base);
    flex: none;
}

/* Conteo pequeño tipo badge al final de un enlace («5» en Ausencias y permisos) */
.holos-chip--compact {
    height: auto;
    min-width: var(--holos-space-5);
    justify-content: center;
    padding: var(--holos-space-1) var(--holos-space-2);
    font-variant-numeric: tabular-nums;
}

/* Filtro seleccionado: la selección es acento (interacción), no estado (§2.5). Reservado en P1-A. */
.holos-chip--filter {
    background: var(--holos-brand-primary-soft);
    color: var(--holos-brand-primary);
    box-shadow: inset 0 0 0 1px var(--holos-brand-primary);
}

/* ── HolosKpiTile: icono en cuadro · etiqueta · valor tabular · detalle · tinte del estado en TODA
   la tarjeta (North Star) · anillo de progreso opcional sin JS ───────────────────────────────── */
.holos-kpi {
    display: flex;
    align-items: center;
    gap: var(--holos-space-3);
    min-height: var(--holos-tile);
    padding: var(--holos-card-pad);
    border: 1px solid color-mix(in srgb, var(--holos-tone) 28%, var(--holos-border));
    border-radius: var(--holos-radius);
    background: var(--holos-tone-soft);
    color: var(--holos-text);
    text-decoration: none;
    min-width: 0;
}

.holos-kpi .holos-icon-tile {
    background: var(--holos-surface);
}

/* En cero o sin dato el tile NO se apaga: superficie neutra, borde base, valor en tinta suave, y la
   identidad semántica queda en el icono (tinte suave + tinta del tono). Con dato vuelve el tinte pleno.
   Corrección de Joseph (17-sep): seis cajas grises no orientan; un KPI en cero sigue siendo ese KPI. */
.holos-kpi--idle {
    background: var(--holos-surface);
    border-color: var(--holos-border);
}

.holos-kpi--idle .holos-icon-tile {
    background: var(--holos-tone-soft);
}

.holos-kpi--idle .holos-kpi__value {
    color: var(--holos-text-soft);
}

a.holos-kpi {
    transition: border-color var(--holos-motion-fast) ease, box-shadow var(--holos-motion-fast) ease;
}

a.holos-kpi:hover {
    border-color: var(--holos-tone);
    box-shadow: var(--holos-shadow-sm);
}

.holos-kpi__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--holos-space-1);
    min-width: 0;
}

.holos-kpi__label {
    font-size: var(--holos-font-sm);
    font-weight: 600;
    color: var(--holos-text-soft);
}

.holos-kpi__value {
    font-size: var(--holos-font-2xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--holos-text);
}

.holos-kpi__detail {
    font-size: var(--holos-font-xs);
    color: var(--holos-text-soft); /* AA sobre los cinco tintes -soft (muted no llegaba a 4,5 en tres) */
}

/* Anillo: conic-gradient con el porcentaje en una custom property que el razor emite (style="--…") */
.holos-kpi__ring {
    --holos-kpi-progress: 0%;
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--holos-control-lg) + var(--holos-space-2));
    height: calc(var(--holos-control-lg) + var(--holos-space-2));
    border-radius: var(--holos-radius-pill);
    background: conic-gradient(var(--holos-tone) var(--holos-kpi-progress), var(--holos-border) 0);
}

.holos-kpi__ring-value {
    display: grid;
    place-items: center;
    width: calc(100% - 2 * var(--holos-space-1));
    height: calc(100% - 2 * var(--holos-space-1));
    border-radius: var(--holos-radius-pill);
    background: var(--holos-surface);
    font-size: var(--holos-font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--holos-tone-ink);
}

/* ── HolosCard: superficie con borde y sin sombra (§2.4); cabecera opcional; variante Nav ────── */
.holos-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--holos-surface);
    border: 1px solid var(--holos-border);
    border-radius: var(--holos-radius);
    color: var(--holos-text);
}

.holos-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--holos-space-3);
    padding: var(--holos-card-pad) var(--holos-card-pad) 0;
}

.holos-card__heading {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--holos-space-1);
    min-width: 0;
}

.holos-card__title {
    margin: 0;
    font-size: var(--holos-font-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.holos-card__desc {
    margin: 0;
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
}

.holos-card__action {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--holos-space-2);
    font-size: var(--holos-font-sm);
    font-weight: 600;
}

/* Una card puede llevar dos acciones de cabecera (P1-B-2C: la acción del estado del contrato + «Retirar»); entre ellas va un gap, no un espacio en blanco. */

.holos-card__action a {
    color: var(--holos-brand-primary);
    text-decoration: none;
}

.holos-card__action a:hover {
    text-decoration: underline;
}

.holos-card__body {
    flex: 1;
    min-width: 0;
    padding: var(--holos-card-pad);
}

.holos-card__head + .holos-card__body {
    padding-top: var(--holos-space-4);
}

.holos-card--flush > .holos-card__body {
    padding: 0;
}

/* Cuerpo flush con cabecera: conserva el aire hacia la primera fila (8 + los 8 de la fila = space-4,
   el mismo que un cuerpo con padding). Sin cabecera sigue a ras. */
.holos-card--flush > .holos-card__head + .holos-card__body {
    padding-top: var(--holos-space-2);
}

/* Nav: la lista de enlaces con chevron y contador («Áreas de trabajo») es gramática de la card. */
.holos-card__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.holos-card--flush > .holos-card__body > .holos-card__links {
    padding-bottom: var(--holos-space-2);
}

/* Cada fila lleva la sangría de la card (--holos-card-pad): icono alineado con el título, separador
   y área de clic de borde a borde (North Star: filas sangradas al ancho del título). */
.holos-card__link {
    display: flex;
    align-items: center;
    gap: var(--holos-space-3);
    min-height: var(--holos-row-h);
    padding: var(--holos-space-2) var(--holos-card-pad);
    border-top: 1px solid var(--holos-border);
    color: var(--holos-text);
    text-decoration: none;
    font-size: var(--holos-font-base);
    font-weight: 500;
}

.holos-card__links > li:first-child > .holos-card__link {
    border-top: 0;
}

.holos-card__link:hover {
    color: var(--holos-brand-primary);
}

.holos-card__link-icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--holos-font-xl);
    height: var(--holos-font-xl);
    color: var(--holos-muted);
}

.holos-card__link-icon svg,
.holos-card__link-chevron svg {
    width: var(--holos-font-lg);
    height: var(--holos-font-lg);
}

.holos-card__link-label {
    flex: 1;
    min-width: 0;
}

.holos-card__link-chevron {
    display: inline-grid;
    place-items: center;
    flex: none;
    color: var(--holos-border-strong);
    transition: color var(--holos-motion-fast) ease, transform var(--holos-motion-fast) ease;
}

.holos-card__link:hover .holos-card__link-chevron {
    color: var(--holos-brand-primary);
    transform: translateX(2px);
}

/* Nav · «Ver N más»: las cartas secundarias detrás de un <details> nativo (teclado, sin JS). El
   summary se lee como una fila más del listado, en acento (es interacción), con su chevron que gira. */
.holos-card__more {
    border-top: 1px solid var(--holos-border);
}

.holos-card__more-summary {
    display: flex;
    align-items: center;
    gap: var(--holos-space-2);
    min-height: var(--holos-row-h);
    padding: var(--holos-space-2) var(--holos-card-pad);
    list-style: none;
    cursor: pointer;
    color: var(--holos-brand-primary);
    font-size: var(--holos-font-sm);
    font-weight: 600;
}

.holos-card__more-summary::-webkit-details-marker {
    display: none;
}

.holos-card__more-summary::after {
    content: "";
    width: var(--holos-space-2);
    height: var(--holos-space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--holos-motion-fast) ease;
}

.holos-card__more[open] > .holos-card__more-summary::after {
    transform: rotate(-135deg);
}

.holos-card__more > .holos-card__links > li:first-child > .holos-card__link {
    border-top: 1px solid var(--holos-border);
}

/* ── HolosSection: título h2 + control contextual a la derecha + cuerpo ─────────────────────── */
.holos-section {
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-4);
    min-width: 0;
}

.holos-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--holos-space-3);
}

.holos-section__title {
    margin: 0;
    font-size: var(--holos-font-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.holos-section__aside {
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
}

/* ── MODULE HUB (§4): el chip de contexto va al lado del h1, como en el North Star; el lead
   (subtítulo) va debajo, a toda la fila; un chip de contexto largo envuelve en vez de desbordar ── */
/* Toda página migrada (HolosPage): los chips de contexto van al lado del h1 y el lead debajo, a toda la
   fila. Nació en MODULE HUB (P1-A) y es gramática de la cabecera, no de una composición (P1-B-1). */
.holos-page .holos-page-header-main {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--holos-space-3);
}

.holos-page .holos-page-header-main > .holos-page-back,
.holos-page .holos-page-header-main > .holos-module-lead {
    flex-basis: 100%;
}

.holos-page-header-main > .holos-module-lead {
    margin: 0;
}

.holos-page-header-context {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--holos-space-2);
    min-width: 0;
}

.holos-page-header-main .holos-chip {
    height: auto;
    min-height: var(--holos-control-xs);
    padding-block: var(--holos-space-1);
    white-space: normal;
}

/* Teléfono (640): el tile apila — fila 1 icono (y anillo, a la derecha), fila 2 el cuerpo a todo el
   ancho. En dos columnas de ~157 px, icono (44) + anillo (52) + dos gaps (24) dejaban el cuerpo en 0. */
@media (width < 640px) {
    .holos-kpi {
        flex-wrap: wrap;
    }

    .holos-kpi__body {
        flex-basis: 100%;
        order: 1;
    }

    .holos-kpi__ring {
        margin-left: auto;
    }
}

/* Capa TOUCH: objetivos de 44 en botón, enlace de card y tile (§2.7) */
@media (pointer: coarse) {
    .holos-btn {
        min-height: var(--holos-control-lg);
    }

    .holos-card__link {
        min-height: var(--holos-control-lg);
    }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   P1-B-1 — LIST PAGE: HolosField · HolosFilterBar · HolosFormGrid · HolosNotice · HolosDataTable
   (docs/design/ui-p1b-colaboradores-list-page.md §4). Solo tokens; nada de .holos-filter-bar/.data-table legacy.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── HolosField: etiqueta xs 600 · control a --holos-control-md · pista/error ─────────────────── */
.holos-field {
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-1);
    min-width: 0;
}

.holos-field--sm { flex: 0 1 8rem; }
.holos-field--md { flex: 0 1 14rem; }
.holos-field--lg { flex: 1 1 20rem; }
.holos-field--fill { flex: 1 1 100%; grid-column: 1 / -1; }

.holos-field__label {
    font-size: var(--holos-font-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--holos-text-soft);
}

.holos-field__required {
    margin-left: var(--holos-space-1);
    color: var(--holos-danger-ink);
}

/* Dentro del field el control mide lo que dice el sistema (D-UI-2: input = botón = 36) y respeta el
   tema: el .holos-input legacy trae min-height 2.5rem, .9rem y color-scheme: light (claro en oscuro). */
.holos-field__control > .holos-input,
.holos-field__control > .holos-select,
.holos-field__control > input:not([type="checkbox"]):not([type="radio"]),
.holos-field__control > select,
.holos-field__control > textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--holos-control-md);
    padding-block: 0;
    font-size: var(--holos-font-base);
    color-scheme: normal;
}

.holos-field__control > textarea {
    min-height: calc(var(--holos-control-md) * 2);
    padding-block: var(--holos-space-2);
}

.holos-field__hint,
.holos-field__error {
    margin: 0;
    font-size: var(--holos-font-xs);
    line-height: 1.4;
}

.holos-field__hint { color: var(--holos-muted); }
.holos-field__error { color: var(--holos-danger-ink); font-weight: 600; }

/* Capa TOUCH (§2.7/§2.8): el control de un campo también es objetivo de 44 — el botón ya lo era, el select y el input no
   (medido en la Ficha 2D a 375: el filtro de categoría daba 36). Solo el puntero grueso; el perfil de escritorio no cambia. */
@media (pointer: coarse) {
    .holos-field__control > .holos-input,
    .holos-field__control > .holos-select,
    .holos-field__control > input:not([type="checkbox"]):not([type="radio"]),
    .holos-field__control > select {
        min-height: var(--holos-control-lg);
    }
}

/* ── HolosFilterBar: una fila; los controles (36) alinean con el botón ─────────────────────────── */
.holos-fbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--holos-space-3);
    min-width: 0;
}

.holos-fbar__fields {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--holos-space-3);
    min-width: 0;
}

.holos-fbar__actions {
    display: flex;
    align-items: flex-end;
    gap: var(--holos-space-2);
}

.holos-fbar__aside {
    flex: 1 1 100%;
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
}

.holos-fbar--sticky {
    position: sticky;
    top: 0;
    z-index: var(--holos-z-sticky);
    background: var(--holos-bg);
    padding-block: var(--holos-space-2);
}

@media (width >= 1024px) {
    .holos-fbar__aside {
        flex: 0 1 auto;
        margin-left: auto;
        align-self: center;
    }
}

/* ── HolosFormGrid: 1 col en cel · máx. 2 en tableta · Columns en escritorio ──────────────────── */
.holos-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--holos-space-4);
}

.holos-form-grid .holos-field {
    flex: none;
}

@media (width >= 640px) {
    .holos-form-grid--2,
    .holos-form-grid--3,
    .holos-form-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width >= 1024px) {
    .holos-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .holos-form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── HolosNotice: aviso en línea con tono ─────────────────────────────────────────────────────── */
.holos-notice {
    display: flex;
    gap: var(--holos-space-3);
    align-items: flex-start;
    padding: var(--holos-space-3) var(--holos-space-4);
    border: 1px solid color-mix(in srgb, var(--holos-tone) 35%, var(--holos-border));
    border-radius: var(--holos-radius-sm);
    background: var(--holos-tone-soft);
    color: var(--holos-text);
    font-size: var(--holos-font-sm);
}

.holos-notice__icon {
    flex: none;
    color: var(--holos-tone-ink);
}

.holos-notice__icon svg {
    width: var(--holos-font-lg);
    height: var(--holos-font-lg);
}

.holos-notice__body { min-width: 0; }
/* Lista dentro de un aviso (bloqueos del contrato, P1-B-2C): sin el margen del navegador. */
.holos-notice__list { margin: var(--holos-space-1) 0 0; padding-left: var(--holos-space-4); }

/* ── HolosDataTable (.holos-data-table: «holos-table» ya era una clase legacy de 22 pantallas de Personas con reglas de módulo) ───────────────────────────────────────────────────────────────────────────── */
.holos-data-table {
    min-width: 0;
}

/* Scroll propio CON señal: sombras en los bordes que aparecen solo cuando hay contenido escondido. */
.holos-data-table__scroll {
    overflow-x: auto;
    background:
        linear-gradient(to right, var(--holos-surface) 30%, transparent),
        linear-gradient(to left, var(--holos-surface) 30%, transparent) 100% 0,
        linear-gradient(to right, var(--holos-shadow-ink), transparent),
        linear-gradient(to left, var(--holos-shadow-ink), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: var(--holos-space-6) 100%, var(--holos-space-6) 100%, var(--holos-space-3) 100%, var(--holos-space-3) 100%;
    background-attachment: local, local, scroll, scroll;
}

.holos-data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--holos-table-text);
}

.holos-data-table th,
.holos-data-table td {
    padding: var(--holos-cell-y) var(--holos-cell-x);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--holos-border);
}

.holos-data-table th {
    position: sticky;
    top: 0;
    z-index: var(--holos-z-sticky);
    background: var(--holos-surface);
    font-size: var(--holos-font-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--holos-text-soft);
    white-space: nowrap;
}

.holos-data-table tbody tr {
    height: var(--holos-row-h);
}

.holos-data-table--dense tbody tr {
    height: var(--holos-control-sm);
}

.holos-data-table tbody tr:hover {
    background: var(--holos-surface-muted);
}

.holos-data-table--clickable tbody tr {
    cursor: pointer;
}

.holos-data-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.holos-data-table__sticky {
    position: sticky;
    left: 0;
    background: var(--holos-surface);
    white-space: nowrap; /* un identificador no se parte en dos líneas; la tabla tiene su scroll con señal */
}

.holos-data-table th.holos-data-table__sticky {
    z-index: calc(var(--holos-z-sticky) + 1);
}

.holos-data-table__w-xs { width: 6ch; }
.holos-data-table__w-sm { width: 12ch; }
.holos-data-table__w-md { width: 20ch; }
.holos-data-table__w-lg { width: 32ch; }

.holos-data-table__state td,
.holos-data-table__card.holos-data-table__state {
    padding: var(--holos-space-5) var(--holos-cell-x);
    text-align: center;
    color: var(--holos-muted);
}

.holos-data-table tfoot td {
    border-bottom: 0;
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
}

/* Enlace de celda (no el HolosButton con Href, que ya trae su propia gramática y no se subraya al pasar). */
.holos-data-table a:not(.holos-btn) {
    color: var(--holos-text);
    font-weight: 600;
    text-decoration: none;
}

.holos-data-table a:not(.holos-btn):hover {
    color: var(--holos-brand-primary);
    text-decoration: underline;
}

@media (width < 1024px) {
    .holos-data-table__narrow-hide { display: none; }
}

/* Cards (D-UI-17): bajo 640 la tabla cede a una lista de cards por Priority */
.holos-data-table__cards {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: var(--holos-space-3);
}

.holos-data-table__card {
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-1);
    padding: var(--holos-space-3) var(--holos-space-4);
    border: 1px solid var(--holos-border);
    border-radius: var(--holos-radius-sm);
    background: var(--holos-surface);
}

.holos-data-table__card-title {
    font-size: var(--holos-font-base);
    font-weight: 600;
}

.holos-data-table__card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--holos-space-1) var(--holos-space-3);
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
}

.holos-data-table__card-pairs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--holos-space-1) var(--holos-space-3);
    margin: var(--holos-space-1) 0 0;
}

.holos-data-table__card-pairs > div { min-width: 0; }
.holos-data-table__card-pairs dt { font-size: var(--holos-font-xs); color: var(--holos-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.holos-data-table__card-pairs dd { margin: 0; font-size: var(--holos-font-sm); }

@media (width < 640px) {
    .holos-data-table--cards .holos-data-table__scroll { display: none; }
    .holos-data-table--cards .holos-data-table__cards { display: flex; }
}

@media (pointer: coarse) {
    .holos-data-table tbody tr { height: var(--holos-control-lg); }
}

/* ── P1-B-1, iteración visual (Joseph, 17-sep): toolbar, entidad, fila navegable, lista compacta, paginación ── */

/* FilterBar como UNA toolbar sobre la tabla */
.holos-fbar--toolbar {
    padding: var(--holos-space-3) var(--holos-card-pad);
    border-bottom: 1px solid var(--holos-border);
    background: var(--holos-surface);
}

.holos-fbar--toolbar .holos-field--lg {
    flex: 1 1 24rem;
}

.holos-fbar--toolbar .holos-field--md {
    flex: 0 1 16rem;
}

@media (width < 640px) {
    .holos-fbar--toolbar .holos-field {
        flex: 1 1 100%;
    }

    .holos-fbar--toolbar .holos-fbar__aside {
        flex-basis: 100%;
    }
}

/* Celda de ENTIDAD: avatar de iniciales · nombre (enlace) · metadato secundario (el número) */
.holos-entity {
    display: flex;
    align-items: center;
    gap: var(--holos-space-3);
    min-width: 0;
}

.holos-entity__avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--holos-control-sm);
    height: var(--holos-control-sm);
    border-radius: var(--holos-radius-pill);
    background: var(--holos-brand-primary-soft);
    color: var(--holos-brand-primary);
    font-size: var(--holos-font-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.holos-entity__text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.holos-entity__meta {
    font-size: var(--holos-font-xs);
    color: var(--holos-muted);
    font-variant-numeric: tabular-nums;
}

/* La fila comunica navegación: chevron al final que se aviva con el hover de la fila */
.holos-data-table__chev {
    width: var(--holos-control-sm);
    padding-inline: var(--holos-space-2);
    text-align: right;
    color: var(--holos-border-strong);
}

.holos-data-table__chev svg {
    width: var(--holos-font-lg);
    height: var(--holos-font-lg);
    vertical-align: middle;
    transition: color var(--holos-motion-fast) ease, transform var(--holos-motion-fast) ease;
}

.holos-data-table tbody tr:hover .holos-data-table__chev {
    color: var(--holos-brand-primary);
}

.holos-data-table tbody tr:hover .holos-data-table__chev svg {
    transform: translateX(2px);
}

/* Lista compacta de teléfono: una fila por persona (44 de alto mínimo), hairlines, sin cards sueltas ni etiquetas */
.holos-data-table__cards {
    gap: 0;
}

.holos-data-table__card {
    flex-direction: row;
    align-items: center;
    gap: var(--holos-space-2);
    min-height: var(--holos-control-lg);
    padding: var(--holos-space-2) var(--holos-space-3);
    border: 0;
    border-bottom: 1px solid var(--holos-border);
    border-radius: 0;
}

.holos-data-table__card:last-child {
    border-bottom: 0;
}

.holos-data-table__card-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.holos-data-table__card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--holos-space-2);
    font-size: var(--holos-font-base);
    font-weight: 600;
}

.holos-data-table__card-name {
    min-width: 0;
}

.holos-data-table__card-mark {
    flex: none;
}

.holos-data-table__card-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
    min-width: 0;
}

.holos-data-table__card-line > span { display: inline-block; white-space: nowrap; max-width: 100%; }
.holos-data-table__card-line > span:not(:last-child)::after { content: " ·"; margin-right: var(--holos-space-1); }

.holos-data-table__card > .holos-data-table__chev {
    flex: none;
    width: auto;
    padding: 0;
}

/* Paginación real: «Mostrando X–Y de Z» + anterior / siguiente */
.holos-data-table__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--holos-space-2) var(--holos-space-3);
    padding: var(--holos-space-2) var(--holos-card-pad);
    border-top: 1px solid var(--holos-border);
    font-size: var(--holos-font-sm);
    color: var(--holos-muted);
    font-variant-numeric: tabular-nums;
}

.holos-data-table__pager-actions {
    display: inline-flex;
    gap: var(--holos-space-1);
}

/* ── DETAIL PAGE (P1-B-2A) ─────────────────────────────────────────────────────────────────────── */

/* HolosEntityHeader: IDENTITY FIRST — una vuelta · iniciales · h1 · dos chips · meta · acciones */
.holos-entity-header {
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-2);
    margin-bottom: var(--holos-space-4);
}

.holos-entity-header__main {
    display: flex;
    align-items: flex-start;
    gap: var(--holos-space-3);
    flex-wrap: wrap;
}

.holos-entity__avatar--lg {
    width: var(--holos-control-lg);
    height: var(--holos-control-lg);
    font-size: var(--holos-font-md);
    font-weight: 600;
}

.holos-entity-header__text {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-1);
}

.holos-entity-header__title {
    display: flex;
    align-items: center;
    gap: var(--holos-space-2);
    flex-wrap: wrap;
}

.holos-entity-header__title h1 {
    margin: 0;
    font-size: var(--holos-h1);
    line-height: 1.2;
}

.holos-entity-header__meta {
    margin: 0;
    color: var(--holos-muted);
    font-size: var(--holos-font-sm);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--holos-space-1);
}

.holos-entity-header__meta > span {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
}

.holos-entity-header__meta > span:not(:last-child)::after { content: " ·"; }

.holos-entity-header__actions {
    display: flex;
    gap: var(--holos-space-2);
    flex-wrap: wrap;
    margin-left: auto;
}

@media (width < 640px) {
    .holos-entity-header__actions { margin-left: 0; width: 100%; }
    .holos-entity-header__actions > .holos-btn { flex: 1 1 auto; }
}

/* HolosAttentionList: ATTENTION SECOND — ícono tintado · título · secundario · chip · acción (promovida del hub) */
.holos-attention {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-3);
}

.holos-attention__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "icon text state action";
    align-items: center;
    gap: var(--holos-space-3);
}

.holos-attention__icon { grid-area: icon; }
.holos-attention__state { grid-area: state; }

.holos-attention__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: var(--holos-space-1);
    min-width: 0;
}

.holos-attention__text small { color: var(--holos-muted); }

.holos-attention__action {
    grid-area: action;
    display: inline-flex;
    align-items: center;
    gap: var(--holos-space-1);
    white-space: nowrap;
    min-height: var(--holos-control-sm);
    color: var(--holos-brand-primary);
    font-weight: 600;
    font-size: var(--holos-font-sm);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.holos-attention__action:empty { cursor: default; }
.holos-attention__action svg { width: 1em; height: 1em; }
.holos-attention__empty { margin: 0; }

@media (width < 640px) {
    .holos-attention__row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon text action" "icon state action";
        row-gap: var(--holos-space-1);
    }

    .holos-attention__action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: clip;
        clip-path: inset(50%);
    }

    .holos-attention__action svg { width: var(--holos-space-4); height: var(--holos-space-4); }
}

/* HolosTabs (D-UI-7): tira con scroll señalado en cel; la pestaña activa lleva el acento */
.holos-tabs {
    display: flex;
    gap: var(--holos-space-1);
    border-bottom: 1px solid var(--holos-border);
    margin: 0 0 var(--holos-space-4);
    overflow-x: auto;
    scrollbar-width: thin;
}

.holos-tabs__tab {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--holos-space-2) var(--holos-space-3);
    min-height: var(--holos-control-md);
    font: inherit;
    font-size: var(--holos-font-md);
    font-weight: 500;
    color: var(--holos-muted);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--holos-space-1);
}

.holos-tabs__tab[aria-selected="true"] {
    color: var(--holos-brand-primary);
    border-bottom-color: var(--holos-brand-primary);
    font-weight: 600;
}

.holos-tabs__count {
    font-size: var(--holos-font-xs);
    background: var(--holos-warning-soft);
    color: var(--holos-warning-ink);
    border-radius: var(--holos-radius-pill);
    padding: 0 var(--holos-space-1);
    min-width: var(--holos-space-4);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* En cel las pestañas envuelven: las cuatro se ven; nunca una escondida sin señal (Joseph, 17-sep). */
@media (width < 640px) {
    .holos-tabs { flex-wrap: wrap; overflow-x: visible; }
    .holos-tabs__tab { flex: 1 1 auto; justify-content: center; }
}

@media (pointer: coarse) {
    .holos-tabs__tab { min-height: var(--holos-control-lg); }
    .holos-attention__action { min-height: var(--holos-control-lg); }
    /* La vuelta era un enlace de texto de 16 px en TODA página (P0): objetivo táctil real, medido en la Ficha a 375. */
    .holos-page-back { display: inline-flex; align-items: center; min-height: var(--holos-control-lg); }
}

/* HolosDescriptionList: etiqueta · valor, 1–3 columnas; bajo 640 una */
.holos-dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--holos-space-2) var(--holos-space-3);
    margin: 0;
}

.holos-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.holos-dl--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.holos-dl--compact { gap: var(--holos-space-1) var(--holos-space-3); }
.holos-dl__item { min-width: 0; }

.holos-dl dt {
    font-size: var(--holos-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--holos-muted);
}

.holos-dl dd {
    margin: 0;
    font-size: var(--holos-font-md);
    overflow-wrap: anywhere;
}

.holos-dl__empty { color: var(--holos-muted); }

/* En cel las dos columnas se quedan (los pares son cortos y una columna duplica el alto de la página: medido 2.662 px
   en 375 con una columna); tres bajan a dos. */
@media (width < 640px) {
    .holos-dl--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* HolosCheckboxGroup: buscador · conteo · seleccionados primero · lista con scroll propio */
.holos-checkgroup { display: flex; flex-direction: column; gap: var(--holos-space-2); }
.holos-checkgroup__bar { display: flex; gap: var(--holos-space-2); align-items: center; flex-wrap: wrap; }
.holos-checkgroup__bar .holos-field { margin: 0; flex: 1 1 12rem; }

.holos-checkgroup__count {
    margin-left: auto;
    color: var(--holos-muted);
    font-size: var(--holos-font-sm);
    white-space: nowrap;
}

.holos-checkgroup__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 40vh;
    overflow: auto;
    border: 1px solid var(--holos-border);
    border-radius: var(--holos-radius-sm);
    scrollbar-width: thin;
}

.holos-checkgroup__group {
    font-size: var(--holos-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--holos-muted);
    padding: var(--holos-space-1) var(--holos-space-3);
    background: var(--holos-surface-muted);
    position: sticky;
    top: 0;
}

.holos-checkgroup__option {
    display: flex;
    align-items: center;
    gap: var(--holos-space-2);
    min-height: var(--holos-control-md);
    padding: 0 var(--holos-space-3);
    border-top: 1px solid var(--holos-border);
    cursor: pointer;
}

.holos-checkgroup__meta {
    margin-left: auto;
    color: var(--holos-muted);
    font-size: var(--holos-font-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (pointer: coarse) {
    .holos-checkgroup__option { min-height: var(--holos-control-lg); }
}

/* Disclosure de lectura (DETAIL ON DEMAND): el summary es un enlace de acción, no un botón */
details.holos-more { margin-top: var(--holos-space-2); }

details.holos-more > summary {
    cursor: pointer;
    color: var(--holos-brand-primary);
    font-weight: 600;
    font-size: var(--holos-font-sm);
    min-height: var(--holos-control-sm);
    display: flex;
    align-items: center;
    list-style: none;
}

details.holos-more > summary::-webkit-details-marker { display: none; }
details.holos-more[open] > summary { margin-bottom: var(--holos-space-2); }

@media (pointer: coarse) {
    details.holos-more > summary { min-height: var(--holos-control-lg); }
}

/* Número grande de una card de lectura (saldo, conteo), tabular */
.holos-stat { display: flex; flex-direction: column; gap: var(--holos-space-1); }

.holos-stat__value {
    font-size: var(--holos-font-2xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.holos-stat__value small { font-size: var(--holos-font-sm); font-weight: 500; color: var(--holos-muted); }
.holos-stat__detail { color: var(--holos-muted); font-size: var(--holos-font-sm); }
/* Una lista de descripción debajo de un stat (P1-B-2C: la cuenta bajo el salario vigente) lleva su propio aire. */
.holos-stat + .holos-dl { margin-top: var(--holos-space-3); }