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;
}
/*
Cabecera de cada ventana de vencimiento de Preventivo (D-24): a ancho
completo, con el rótulo en una línea y el recuento en línea al final. Antes
reutilizaba la rejilla de 5 columnas fijas de la fila de Trabajador con solo
3 hijos, y el rótulo caía en la columna de 14 px y se partía en cinco líneas.
*/
.cabecera-ventana-preventivo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) 0;
}
.cabecera-ventana-preventivo > .fila-trabajador-nombre {
font: var(--font-body-md);
font-weight: 600;
white-space: nowrap;
}
.cabecera-ventana-preventivo > .fila-trabajador-fraccion {
margin-left: auto;
white-space: nowrap;
}
/*
Á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 (documento que ya no existe)
§ 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;
}
/*
Columna de estado de un listado (EstadoFila): ancho fijo y contenido alineado a la izquierda, para que las
pastillas formen una columna recta de fila en fila y de un listado a otro, lleven o no motivo debajo.
QuickGrid pone la clase de la columna tanto en el | como en el | .
*/
.tabla-datos th.col-estado,
.tabla-datos td.col-estado {
width: 200px;
min-width: 200px;
max-width: 200px;
text-align: left;
}
/*
Columna «Registrados vigentes» de un listado de propietarios: ancho fijo, justo antes de la de estado, para
que caiga en el mismo sitio de fila en fila. La regla es compartida (vive aquí, no en el CSS de una
pantalla); hoy solo la usa el listado de Trabajadores. La celda aloja la barra de cumplimiento compartida, con la
fracción («8/10») como cifra.
*/
.tabla-datos th.col-registrados-vigentes,
.tabla-datos td.col-registrados-vigentes {
width: 176px;
min-width: 176px;
max-width: 176px;
text-align: left;
}
.celda-registrados-vigentes {
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
|