/*
  Layout compartido por toda página de listado con tabla (Clientes, Empresas,
  Centros, Trabajadores, ...). Ver CODING_STANDARDS.md: una vez un patrón se
  repite en un segundo módulo, se extrae en vez de duplicarse por página.
*/

.cabecera-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.cabecera-pagina .titulo-pagina {
    margin-bottom: 0;
}

.acciones-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.enlace-exportar {
    font: var(--font-label-md);
    color: var(--color-text-muted);
    text-decoration: none;
}

.enlace-exportar:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.barra-filtros {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    max-width: 480px;
}

.barra-filtros .campo {
    flex: 1;
}

/*
  Toolbar de Centros (lámina L3 ".toolbar", contrato de fidelidad
  2026-08-09 § 1.4): una sola fila con buscar/estado/orden/selección
  múltiple/expandir todos/exportar/nuevo centro, en vez de las 3 regiones
  fragmentadas (cabecera de página, barra de filtros, BarraHerramientasLista)
  que había antes. Es composición nueva y no una adaptación de
  BarraHerramientasLista (prohibida como región propia, § 1.2) ni de
  .barra-filtros — esta fila agrupa además la selección múltiple, expandir
  todos, exportar y el alta, que .barra-filtros no lleva en ninguna otra lista.
*/
.barra-trabajo-centros {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

/* CampoTexto renderiza su propio ".campo" como contenedor — se apunta por
   posición porque el "class" splatteado llega al <input> interno, no a este
   wrapper (mismo motivo que documenta CampoTexto.razor). */
.barra-trabajo-centros > .campo {
    flex: 1 1 220px;
    min-width: 160px;
}

.filtro-critico {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-body-md);
    white-space: nowrap;
}

/*
  Chips de filtros activos y de filtros guardados (H4, docs/ux-audit/02-clientes.md;
  UX_PATTERNS.md § Filtrar: "filtros activos se muestran como chips
  removibles"). Mismos tokens que .badge-neutro (Badge.razor.css), pero con
  el botón "×" propio — un Badge no lleva acción.
*/
.chips-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.chip-filtro {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-hover);
    color: var(--color-text);
    font: var(--font-label-md);
    font-size: 0.75rem;
}

.chip-filtro-quitar {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

.chip-filtro-quitar:hover {
    color: var(--color-text);
}

.campo-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font: var(--font-body-md);
}

.campo-con-boton {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.campo-con-boton > .campo {
    flex: 1;
}

.lista-seleccion-multiple {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 200px;
    overflow-y: auto;
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.glosario-tipo-documento {
    background-color: var(--color-surface-hover);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.glosario-tipo-documento p {
    margin: 0;
}

.glosario-tipo-documento strong {
    color: var(--color-text);
}

.alerta-formulario {
    background-color: var(--color-danger-50);
    color: var(--color-danger-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
}

/* Bloque "Se solicita a" de la reclamación documental: los contactos de la
   agenda que van a recibir el correo, con el motivo por el que entra cada uno.
   Global y no aislado porque tiene dos superficies —la pestaña Reclamaciones
   de /documentos y el drawer de Centro 360— y debe leerse igual en las dos. */
.reclamacion-destinatarios {
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin: var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.reclamacion-destinatarios legend {
    font: var(--font-label);
    padding: 0 var(--space-1);
}

.reclamacion-motivo {
    color: var(--color-text-muted);
    font: var(--font-caption);
}

.alerta-info {
    background-color: var(--color-primary-50);
    color: var(--color-primary-500);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-bottom: var(--space-3);
}

/* Fase B: preflight no bloqueante al asignar en lote — ver Asignaciones.razor. */
.alerta-preflight-asignacion {
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font: var(--font-body-sm);
    margin-top: var(--space-3);
}

.alerta-preflight-asignacion ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}

.texto-ayuda-matriz {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: var(--space-2) 0;
}

/* Ayuda bajo un campo de formulario: explica qué escribir, no un error. */
.texto-ayuda-campo {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin: calc(var(--space-2) * -1) 0 var(--space-4);
}

.matriz-asignaciones-contenedor {
    overflow-x: auto;
}

.matriz-asignaciones {
    border-collapse: collapse;
    width: 100%;
}

.matriz-asignaciones th,
.matriz-asignaciones td {
    padding: var(--space-2) var(--space-3);
    border: var(--border-default);
    text-align: center;
    white-space: nowrap;
}

.matriz-asignaciones th[scope="row"] {
    text-align: left;
}

/* Fase C: Bandeja del gestor — ver PanelResolverItem.razor. */
.panel-resolver-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.panel-resolver-item-enfocado {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 1px var(--color-primary-500);
}

.panel-resolver-item-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.panel-resolver-item-titulo {
    margin: 0;
    font: var(--font-body-md);
    font-weight: 600;
}

.panel-resolver-item-subtitulo {
    margin: 0;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

.panel-resolver-item-fecha {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    white-space: nowrap;
}

.lista-bandeja {
    display: flex;
    flex-direction: column;
}

.paginador {
    margin-top: var(--space-4);
}

.paginador-simple {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.paginador-texto {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/* H5 (docs/ux-audit/05-trabajadores-vehiculos.md): selector de tamaño de página, compartido por PaginadorSimple.razor. */
.paginador-tamano {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    margin-left: auto;
}

.paginador-tamano-select {
    padding: var(--space-1) var(--space-2);
    /* Borde que identifica un control: sujeto al 3:1 de 02 § 8
       (DDL-062/063). --color-border no lo alcanza (1.18:1). */
    border: var(--border-control);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: var(--font-body-sm);
}

/*
  Centro 360 (PLAN-EJECUCION-UX.md § 0.1): fila de /centros como tarjeta con
  SeccionColapsable anidada, en vez de <tr> de QuickGrid — QuickGrid no
  soporta filas expandibles. La cabecera con checkbox/nombre/acciones queda
  FUERA del <button> de SeccionColapsable (que solo envuelve el chevron y el
  título "Asignaciones") porque anidar botones/checkboxes dentro de un
  <button> es HTML inválido y rompería el toggle del acordeón.
*/
.lista-filas-acordeon {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/*
  overflow:hidden RETIRADO (era lo que recortaba VentanaContexto — nivel
  Overlay, tiene que flotar sobre el contenido — cuando su panel necesitaba
  salir de los límites de la tarjeta: bug real reportado, "el cuadro de
  contexto aparece detrás del fondo"). El redondeo de esquinas lo llevan
  ahora los hijos que sí necesitan recortarse (cabecera/contenido), no toda
  la tarjeta.
*/
.tarjeta-fila-acordeon {
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
}

/*
  Densidad de fila (Centro 360 § 0.9): padding vertical y gap reducidos
  respecto a space-4/space-3 para que quepan más centros por pantalla. El
  padding horizontal se mantiene — apretar los lados no gana filas, solo
  aprieta. Los Badge y el badge-visita de la fila también bajan de tamaño
  más abajo, por el mismo motivo.
*/
.tarjeta-fila-acordeon-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: var(--border-default);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

/*
  Identidad del centro en dos líneas (lámina L3). Ocupa el espacio sobrante y
  recorta con elipsis: es la única zona elástica de la fila, para que todo lo
  demás pueda tener posición fija.
*/
.tarjeta-fila-acordeon-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.tarjeta-fila-acordeon-identidad > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/*
  Nombre del centro en negrita (lámina L3 ".rname", font-weight 600) — no se
  toca `.enlace-nombre-fila` en general (patrón compartido por 9+ pantallas,
  contrato § 1.3): solo se refuerza aquí, donde es la primera línea de la
  identidad de la fila.
*/
.tarjeta-fila-acordeon-identidad > .enlace-nombre-fila {
    font-weight: 600;
    font-size: 0.8125rem; /* 13px, ESPECIFICACION-VISUAL-HYDRA.md § 3.7 ".rnombre" */
    line-height: 1.3;
}

.tarjeta-fila-acordeon-meta {
    color: var(--color-text-muted);
    font: var(--font-body-sm);
}

/*
  Zona de indicadores de ANCHO FIJO (lámina L3, blueprint § 3.2, contrato de
  fidelidad 2026-08-09 § 1.6, bug C-2).

  Grid de 3 ranuras fijas — vencidos · próximos · estado-o-visita — igual que
  ".rbadges"/".wbadges" de la lámina: 200px de ancho total, 26px + 26px +
  el resto para la 3ª ranura. Antes eran solo 2 columnas (recuento + un "resto"
  que cargaba a la vez el Badge de Estado y la visita), y ese resto no
  alcanzaba para los dos — el badge de visita caía a una segunda línea. Con 3
  ranuras fijas y la 3ª mutuamente excluyente (ver Centros.razor), cada
  indicador tiene su propio hueco reservado.
*/
.tarjeta-fila-acordeon-indicadores {
    display: grid;
    grid-template-columns: 26px 26px minmax(0, 1fr);
    gap: var(--space-1);
    align-items: center;
    width: 200px;
    flex-shrink: 0;
}

/*
  3ª ranura (estado o visita, mutuamente excluyentes): overflow visible para
  que el panel de VentanaContexto de la visita no quede recortado por el
  ancho fijo de la ranura, igual que ".bs3" en la lámina.
*/
.ranura-recuento-final {
    overflow: visible;
}

/*
  Las VentanaContexto de la fila de Centro se abren hacia ABAJO, no hacia
  arriba (por defecto en VentanaContexto.razor.css): es la fila más alta de
  cada tarjeta, y hacia arriba puede quedar recortada por el borde superior
  del viewport o de un contenedor con scroll — mismo motivo que
  ".c360 .rowhead .tip" en el lámina.
*/
/*
  !important en "bottom" necesario: VentanaContexto.razor.css es CSS con
  ámbito de Blazor, que añade un selector de atributo
  (".ventana-contexto-panel[b-xxxxxxxx]") con la MISMA especificidad que
  este selector de dos clases — sin !important, "bottom" se quedaba en el
  valor del componente base y "top" en el de aquí, los dos a la vez
  (ninguno "auto"). Con ambos bordes fijados, el navegador calcula la altura
  como la distancia entre ellos en vez de ajustarla al contenido — así se
  producía el panel de 18px de alto que recortaba el desglose entero
  (bug real reportado, "mini lista que no se ve").
*/
.tarjeta-fila-acordeon-indicadores .ventana-contexto-panel {
    bottom: auto !important;
    top: calc(100% + var(--space-1));
}

.tarjeta-fila-acordeon-acciones {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/*
  Fondo distinto del contenido expandido (lámina L3 ".expand", --c-subtle):
  el segundo/tercer nivel se lee como una superficie "hundida" respecto a la
  cabecera del centro, no como una continuación del mismo plano — es lo que
  distingue visualmente "estás dentro del desplegable" sin depender del
  borde superior.
*/
.tarjeta-fila-acordeon-contenido {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background-color: var(--color-surface-subtle);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/*
  Guía de lectura (Tier A, 07 § 3 / ESPECIFICACION-VISUAL-HYDRA.md § 3.7):
  la fila entera se resalta al apuntarla o enfocarla — sin ella, en una fila
  ancha hay que recorrer el renglón dos veces para confirmar que se está en
  la fila correcta.
*/
.tarjeta-fila-acordeon-cabecera:hover {
    background-color: var(--color-surface-hover);
}

@media (prefers-reduced-motion: reduce) {
    .tarjeta-fila-acordeon-cabecera {
        transition: none;
    }
}

/*
  Chevron de expandir/colapsar de la fila (§ 0.9). Vive donde antes vivía
  siempre el checkbox; con "Selección múltiple" activo el checkbox vuelve a
  su sitio, a la izquierda de este botón, y ambos conviven. No reutiliza
  SeccionColapsable: su CSS está scoped al componente y su estado es
  interno, y aquí la expansión la decide la página para poder hacer
  "Expandir/Colapsar todos".
*/
.boton-expandir-fila {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-1);
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    /* Tier B (ESPECIFICACION-VISUAL-HYDRA.md § 3.8): el chevron controla un
       bloque que se expande/revela, no un simple color/estado de control —
       eso es lo que separa Tier A de Tier B (07 § 8), y antes usaba el
       primero. */
    transition: transform var(--motion-transition) var(--ease-fluid);
    transform: rotate(-90deg);
}

.boton-expandir-fila-abierta {
    transform: rotate(0deg);
}

.boton-expandir-fila:hover {
    color: var(--color-text);
}

.boton-expandir-fila:focus-visible {
    outline: var(--border-focus);
    outline-offset: 1px;
}

/*
  Barra de herramientas de lista (§ 0.9) — controles que actúan sobre la
  lista entera, bajo la barra de filtros.
*/
.barra-herramientas-lista {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

/*
  Badge "Visita dd/mm–dd/mm" (Centro 360 § 0.3) — no es <Badge> porque ese
  componente renderiza un <span> (Badge.razor); aquí hace falta un <button>
  real (clicable, foco de teclado) con el mismo aspecto visual. Mismos
  tokens que .badge-info de Badge.razor.css — ese CSS está scoped al
  componente y no llega hasta aquí.
*/
.badge-visita {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    /* Métrica de .badge-pequeno (Badge.razor.css) — densidad de fila, § 0.9. */
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-label-md);
    font-size: 0.6875rem;
    line-height: 1.125rem;
    background-color: var(--color-info-50);
    color: var(--color-info-500);
    border: none;
    cursor: pointer;
}

.badge-visita:hover {
    text-decoration: underline;
}

/*
  Badge "N detección(es)" en Empresas (docs/ux-audit/03-empresas-subcontratas.md
  H2) — mismo motivo que .badge-visita (botón clicable, no <Badge>), mismos
  tokens que .badge-advertencia de Badge.razor.css.
*/
.badge-deteccion {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font: var(--font-label-md);
    font-size: 0.6875rem;
    line-height: 1.125rem;
    background-color: var(--color-warning-50);
    color: var(--color-warning-700);
    border: none;
    cursor: pointer;
}

.badge-deteccion:hover {
    text-decoration: underline;
}

/*
  Modificador "vigente con riesgo en ventana de visita" (Centro 360 § 0.3,
  dado de alta también en DESIGN_SYSTEM.md/UX_PATTERNS.md): sigue siendo un
  badge Exito (el documento SÍ está vigente hoy) — el borde ámbar es la
  única señal de que caduca antes de que termine la próxima visita del
  centro. No es un cuarto color del semáforo, es un modificador encima de
  uno de los tres ya existentes.
*/
.badge-riesgo-ventana-visita {
    box-shadow: inset 0 0 0 1.5px var(--color-warning-500);
}

.acordeon-asignaciones-cabecera {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.lista-trabajadores-acordeon {
    display: flex;
    flex-direction: column;
}

/*
  El checkbox de selección va como hermano de ancho fijo a la izquierda del
  cuerpo de la fila (mismo motivo que .tarjeta-fila-acordeon-cabecera con su
  propio checkbox): anidarlo dentro del <button> del chevron sería HTML
  inválido.
*/
.fila-trabajador-acordeon {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: var(--border-default);
}

.fila-trabajador-acordeon:first-child {
    border-top: none;
}

.fila-trabajador-acordeon > .fila-trabajador-acordeon-cuerpo {
    flex: 1;
    min-width: 0;
}

/*
  Fila de Trabajador (contrato de fidelidad 2026-08-09 § 1.4, lámina L3
  ".wrow"): mismo grid de 5 columnas fijas que la fila de Centro, sin anillo
  de cumplimiento — el lámina solo lo pone a nivel de Centro, aquí va la
  fracción "7/9" en su lugar.
*/
.fila-trabajador-rejilla {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 46px 200px 76px;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-1) 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast) var(--ease-standard);
}

/* Guía de lectura (Tier A) — mismo motivo que la fila de Centro. */
.fila-trabajador-rejilla:hover,
.fila-trabajador-rejilla:focus-within {
    background-color: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
    .fila-trabajador-rejilla {
        transition: none;
    }
}

/*
  Selector compuesto (no ".fila-trabajador-nombre" sola): ".enlace-nombre-fila"
  define "font: inherit" más abajo en esta misma hoja, y con la misma
  especificidad (una sola clase) gana por orden de cascada — el peso 600 se
  perdía en runtime aunque estuviera declarado aquí. Mismo motivo por el que
  el nombre del Centro usa ".tarjeta-fila-acordeon-identidad > .enlace-nombre-fila".
*/
.enlace-nombre-fila.fila-trabajador-nombre {
    font: var(--font-body-md);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fila-trabajador-fraccion {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font: var(--font-body-sm);
    text-align: right;
}

.fila-trabajador-accion {
    display: flex;
    justify-content: flex-end;
}

/*
  Enlace de acción de fila ("Detalles", "Eliminar", "Gestionar" en Centro
  360) — ESPECIFICACION-VISUAL-HYDRA.md § 3.1/§ 3.7: en el lámina estas
  acciones son un <a> plano (color enlace, sin relleno ni borde), no un
  botón Fantasma con borde (ese es el estilo de la barra de herramientas).
  Se aplica como clase adicional sobre <Boton Variante="Fantasma"> —
  conserva el padding/min-height del botón base (objetivo táctil WCAG
  2.5.5 ya documentado en Boton.razor.css) y solo cambia el aspecto.
  !important necesario: Boton.razor.css es CSS con ámbito de Blazor, que
  añade un selector de atributo (".boton-fantasma[b-xxxxxxxx]") con más
  especificidad que una clase sola en esta hoja global.
*/
.accion-fila-enlace {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color-primary-500) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.accion-fila-enlace:not(:disabled):hover {
    background-color: transparent !important;
    transform: none !important;
    text-decoration: underline;
}

/* Acción disponible pero sin nada que gestionar — atenuada, nunca disabled real (04 § 2.5). */
.accion-fila-enlace.accion-atenuada {
    color: var(--color-text-muted) !important;
}

.accion-fila-enlace.accion-atenuada:hover,
.accion-fila-enlace.accion-atenuada:focus-visible {
    color: var(--color-primary-500) !important;
}

/*
  Tercer nivel del Centro 360 — variante A (OD-12, blueprint § 3.4, DDL-034).

  La rejilla se declara UNA vez, en el contenedor, y la heredan cabecera y
  filas: es lo unico que garantiza que las cuatro columnas caigan en la misma
  vertical cuando una fila no tiene fecha de vigencia. Con flex libre cada fila
  reparte el espacio segun su propio contenido y la lectura por columna, que es
  el motivo de existir de esta variante, se pierde.

  Los anchos vienen del banco visual: 168px basta para el badge de estado mas
  largo del lexico cerrado, y 76px para "Gestionar".
*/
.tabla-documentos-requeridos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px minmax(0, 150px) 76px;
    /*
      stretch, no center: con "center" cada celda se recorta a la altura de
      su propio contenido y se centra dentro de la fila — la celda de
      "Gestionar" (con el padding vertical del botón) queda más alta que las
      demás, y el resaltado de fila al pasar el ratón (abajo) pintaba
      rectángulos de altura distinta por celda en vez de una fila continua.
      Con "stretch" las 4 celdas ocupan la altura completa de la fila y cada
      una centra su propio contenido por dentro (ver ".fila-documento-requerido > *").
    */
    align-items: stretch;
    column-gap: var(--space-3);
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-3);
    margin-left: var(--space-6);
}

/* La cabecera y cada fila son `display: contents`: sus celdas participan en la
   rejilla del padre en vez de crear una anidada. */
.documentos-requeridos-cabecera,
.fila-documento-requerido {
    display: contents;
}

.documentos-requeridos-cabecera > * {
    font: var(--font-body-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding-bottom: var(--space-1);
    border-bottom: var(--border-default);
    margin-bottom: var(--space-1);
}

.fila-documento-requerido > * {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
    min-width: 0;
    border-radius: var(--radius-sm);
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.fila-documento-requerido > .columna-accion {
    justify-content: flex-end;
}

/*
  Guía de lectura (Tier A) — "display: contents" en la fila (arriba) no
  genera caja propia, así que no hay un único elemento al que ponerle fondo:
  se resalta cada celda por separado con el mismo color, y el margen
  negativo compensa el padding para que seguan alineadas con la cabecera.
*/
.fila-documento-requerido:hover > *,
.fila-documento-requerido:focus-within > * {
    background-color: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
    .fila-documento-requerido > * {
        transition: none;
    }
}

.celda-documento-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.celda-documento-vigencia {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
    /* Fechas en columna: sin numeracion tabular los digitos no alinean y la
       comparacion vertical, que es para lo que existe la columna, cuesta. */
    font-variant-numeric: tabular-nums;
}

/*
  Sin `justify-self: end`: eso encoge la celda al ancho de su contenido y su
  borde izquierdo deja de coincidir con el de la cabecera — la columna se ve
  desalineada aunque la rejilla sea correcta. La celda ocupa su columna entera
  y es el CONTENIDO el que se alinea a la derecha.
*/
.columna-accion {
    text-align: right;
}

/*
  Accion presente pero atenuada cuando el documento no la necesita
  (04 § 2.5). No se oculta: sigue siendo alcanzable con teclado y recupera
  contraste completo al enfocarla o apuntarla.
*/
.accion-atenuada {
    opacity: 0.55;
}

.accion-atenuada:hover,
.accion-atenuada:focus-visible {
    opacity: 1;
}

/* Cada linea del detalle de una ventana de contexto, como bloque propio. */
.ventana-linea {
    display: block;
    padding: 1px 0;
}

.texto-vacio-seccion {
    color: var(--color-text-muted);
    font: var(--font-body-md);
}

/*
  Click en el nombre/identificador de una fila = misma acción que el botón
  "Ver" de esa fila — evita tener que mover el ratón hasta la columna de
  Acciones para abrir el detalle. Se ve como el texto normal de la celda
  (no como un enlace azul de manual): el cursor y el subrayado al pasar por
  encima son la única pista de que es interactivo.
*/
.enlace-nombre-fila {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.enlace-nombre-fila:hover {
    text-decoration: underline;
}

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tabla-datos th {
    text-align: left;
    padding: var(--space-4);
    font: var(--font-label-md);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    background-color: var(--color-surface-hover);
    border-bottom: var(--border-default);
}

.tabla-datos td {
    padding: var(--space-4);
    border-bottom: var(--border-default);
    font: var(--font-body-md);
}

.tabla-datos tr:last-child td {
    border-bottom: none;
}

/* Resalte de fila: es la funcion que --motion-base declara (07 § 8). */
.tabla-datos tr:hover td {
    background-color: var(--color-surface-hover);
    transition: background-color var(--motion-base) var(--ease-standard);
}

/* Fila con foco de teclado (atajos j/k, P3-31) */
.fila-enfocada td {
    background-color: var(--color-primary-50);
    box-shadow: inset 2px 0 0 var(--color-primary-400);
}

/* Misma señal de foco que .fila-enfocada, para una tarjeta en vez de un <tr> (Centro 360). */
.tarjeta-fila-acordeon.fila-enfocada {
    box-shadow: 0 0 0 1px var(--color-primary-400);
}

.celda-acciones-revision {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    white-space: nowrap;
}

.fila-previsualizacion td {
    padding: var(--space-4);
    background-color: var(--color-surface-hover);
}

.previsualizacion-documento {
    display: block;
    width: 100%;
    height: 600px;
    border: var(--border-default);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
}

/*
  QuickGrid rellena el cuerpo de la tabla con filas <tr><td></td></tr>
  vacías hasta completar ItemsPerPage cuando hay menos resultados que el
  tamaño de página, incluso sin Virtualize — es un comportamiento del
  componente, no del ItemsProvider (que ya devuelve solo los elementos
  reales). Se ocultan por CSS las filas donde ninguna celda tiene contenido.
*/
.tabla-datos tbody tr:not(:has(td:not(:empty))) {
    display: none;
}

/*
  Revelado escalonado: cada fila/tarjeta entra un poco después que la
  anterior en vez de aparecer todas a la vez. Solo se dispara cuando el
  navegador inserta el elemento en el DOM — Blazor reutiliza las filas
  existentes al paginar/filtrar (mismo índice, solo cambia el contenido),
  así que esto se ve en la carga inicial de una pantalla, no se repite en
  cada tecla de un buscador en vivo (sería ruido, no pulido).
  .stagger-item es la clase genérica para reutilizar el mismo patrón fuera
  de tablas (p. ej. tarjetas de KPI en Dashboard).
*/
@keyframes revelar-escalonado {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tabla-datos tbody tr,
.stagger-item {
    animation: revelar-escalonado var(--motion-transition) var(--ease-fluid) backwards;
}

.tabla-datos tbody tr:nth-child(1), .stagger-item:nth-child(1)   { animation-delay: 0ms; }
.tabla-datos tbody tr:nth-child(2), .stagger-item:nth-child(2)   { animation-delay: 25ms; }
.tabla-datos tbody tr:nth-child(3), .stagger-item:nth-child(3)   { animation-delay: 50ms; }
.tabla-datos tbody tr:nth-child(4), .stagger-item:nth-child(4)   { animation-delay: 75ms; }
.tabla-datos tbody tr:nth-child(5), .stagger-item:nth-child(5)   { animation-delay: 100ms; }
.tabla-datos tbody tr:nth-child(6), .stagger-item:nth-child(6)   { animation-delay: 125ms; }
.tabla-datos tbody tr:nth-child(7), .stagger-item:nth-child(7)   { animation-delay: 150ms; }
.tabla-datos tbody tr:nth-child(8), .stagger-item:nth-child(8)   { animation-delay: 175ms; }
.tabla-datos tbody tr:nth-child(9), .stagger-item:nth-child(9)   { animation-delay: 200ms; }
.tabla-datos tbody tr:nth-child(10), .stagger-item:nth-child(10) { animation-delay: 225ms; }
.tabla-datos tbody tr:nth-child(11), .stagger-item:nth-child(11) { animation-delay: 250ms; }
.tabla-datos tbody tr:nth-child(n+12), .stagger-item:nth-child(n+12) { animation-delay: 275ms; }

@media (prefers-reduced-motion: reduce) {
    .tabla-datos tbody tr,
    .stagger-item {
        animation: none;
    }
}

/*
  Móvil: la tabla ya no cabe con todas sus columnas en ~375-767px, y
  table-layout:auto la aplastaría hasta ser ilegible en vez de desbordar.
  display:block convierte el <table> en la caja que scrollea; thead/tbody
  siguen generando su caja de tabla anónima interna con su ancho natural
  (sin comprimirse), así que el contenido real desborda ese bloque y aquí
  es donde aparece el scroll horizontal — sin envolver cada tabla en un div
  nuevo por página (esta clase la comparten ~15 pantallas de listado, ver
  cabecera del archivo).
*/
@media (max-width: 767px) {
    .tabla-datos {
        display: block;
        overflow-x: auto;
    }

    .tabla-datos th,
    .tabla-datos td {
        white-space: nowrap;
    }
}


/*
  Ranura individual del grid de indicadores (Centro y Trabajador — ver
  ".tarjeta-fila-acordeon-indicadores" / ".wbadges-fila-trabajador"). Existe
  aunque la fila no tenga ese recuento: es lo que permite leer la columna en
  vertical y lo que impide que el contenido de una ranura se corra hacia la
  ranura vecina cuando falta un número.
*/
.ranura-recuento {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
}

/*
  Badge de solo recuento (DDL-036): sin etiqueta de texto. Solo es admisible
  porque va dentro de una VentanaContexto, que aporta el nombre accesible y el
  desglose literal — el número por sí solo dejaría el color como único
  portador de significado.
*/
.badge-solo-recuento {
    min-width: 26px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* Cabecera de ámbito dentro del desglose de una ventana de contexto. */
.ventana-grupo {
    font: var(--font-caption);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.ventana-grupo:first-child {
    margin-top: 0;
}


/*
  Ámbito Empresa dentro del acordeón de un Centro (OD-13, blueprint § 3.3).

  Los dos ámbitos van declarados y separados: sin el rótulo, el bloque de la
  empresa se leería como "un trabajador más" y el recuento del Centro —que
  agrega los dos— dejaría de poder explicarse.
*/
.separador-ambito {
    font: var(--font-caption);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
    padding: var(--space-3) 0 var(--space-1);
}

.fila-sujeto-ambito {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: var(--border-default);
}

.sujeto-ambito-identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.sujeto-ambito-nombre {
    font: var(--font-body-md);
    font-weight: 600;
}

/*
  Distintivo junto al nombre de la fila Empresa (ESPECIFICACION-VISUAL-HYDRA.md
  § 3.7, ".etiqueta-ambito") — el separador "Empresa" de arriba da contexto a
  todo el bloque, pero al leer solo esta fila (fuera de contexto, p. ej. al
  volver de un scroll) el nombre por sí solo no dice si es una empresa o un
  trabajador más.
*/
.etiqueta-ambito {
    font: var(--font-caption);
    font-size: 0.5625rem; /* 9px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    border: var(--border-default);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}

/*
  La nota que exige el blueprint: sin ella, una lista corta se leería como
  "la empresa casi no tiene documentación" en vez de "esto es lo que falla".
*/
.sujeto-ambito-nota {
    font: var(--font-body-sm);
    color: var(--color-text-muted);
}

/*
  Misma anchura que la zona de indicadores de la fila de Centro (200px,
  contrato de fidelidad 2026-08-09 § 1.6), para que el recuento de la empresa
  caiga en la vertical de los recuentos de arriba.
*/
.sujeto-ambito-indicadores {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 200px;
    flex-shrink: 0;
}

.sujeto-ambito-accion {
    flex-shrink: 0;
}