/* Componentes de página (UI-003).
Se carga entre layout.css y site.css. Es el vocabulario que comparten las vistas: encabezado,
secciones, tablas, estados vacíos, métricas y el shell de las pantallas de sesión.
Por qué existe este archivo y no se resuelve con utilidades de Bootstrap en cada .cshtml: hasta
UI-002 cada vista armaba lo mismo de forma distinta (tres variantes de encabezado, dos tamaños de
valor para la misma métrica, "table table-striped align-middle" copiado en cinco tablas). Con las
reglas acá, UI-004 toca los breakpoints en un solo lugar.
Misma regla que layout.css: ni un color literal. Todo sale de los tokens --zw-* de UI-001.
Estructura:
1. Encabezado de página y títulos
2. Toolbar
3. Tablas
4. Números
5. Estados vacíos
6. Métricas (stat cards)
7. Formularios
8. Paginación
9. Badges
10. Bloques monoespaciados y QR
11. Listas de detalle
12. Shell de las pantallas de sesión
13. Área táctil en pantallas chicas
Los breakpoints de UI-004 están junto al componente que modifican y no agrupados al final: la
excepción es la §13, que es una sola regla transversal a los controles de Bootstrap. */
/* ============================================================================
1. ENCABEZADO DE PÁGINA Y TÍTULOS
============================================================================
El de Bootstrap mide 2.5rem, pensado para una landing. Acá compite con el contenido: la
aplicación es un tablero operativo y el título es una referencia, no el protagonista. */
.zw-page-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.zw-page-title {
margin: 0;
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
}
/* Las acciones de la página (exportar, ir al historial) van a la derecha del título y bajan solas
cuando no entran. */
.zw-page-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
/* Título de una sección suelta sobre la página. El margen superior es parte del componente: sin él
cada vista lo resolvía con un mt-4 propio. */
.zw-section-title {
margin: 1.75rem 0 0.75rem;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
}
/* Título de un bloque dentro de una card (filtros, formulario de alta). Va en label chico y no en
heading grande: la card ya delimita el bloque, el texto solo lo nombra. */
.zw-panel-title {
margin: 0 0 1rem;
color: var(--zw-text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
/* ============================================================================
2. TOOLBAR
============================================================================
Fila de controles arriba de una tabla: a la izquierda lo que filtra o cambia la vista (el selector
de moneda de Assets/List), a la derecha lo que actúa sobre el resultado (exportar). */
.zw-toolbar {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
/* Empuja el bloque a la derecha aunque sea el único hijo del toolbar. */
.zw-toolbar-end {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
/* Cuando el toolbar se parte en dos líneas ya no hay nada a la izquierda de este bloque, y el
margin-left:auto lo deja solo contra el borde derecho, desalineado del selector de moneda que le
quedó arriba. Apilado, alinea a la izquierda como el resto de la página (UI-004). */
@media (max-width: 575.98px) {
.zw-toolbar-end {
margin-left: 0;
}
}
.zw-toolbar-label {
display: block;
margin: 0 0 0.375rem;
color: var(--zw-text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ============================================================================
3. TABLAS
============================================================================
.zw-table se usa junto a .table de Bootstrap: hereda de ahí el striping y el hover (cuyos colores
ya define theme.css) y agrega la densidad y el encabezado. */
/* El wrapper y no .table-responsive de Bootstrap: aquel fuerza overflow siempre, lo que recorta el
foco de los controles dentro de la tabla incluso cuando entra entera. Acá el scroll aparece solo
si hace falta.
Sombra de scroll (UI-004): cuatro gradientes con background-attachment mixto. Los dos primeros son
"tapas" del color de la superficie ancladas al contenido (local), los dos últimos son la sombra
anclada al recuadro visible (scroll). Mientras hay contenido por ver de un lado, la tapa de ese
lado está fuera de cuadro y la sombra queda expuesta; al llegar al extremo, la tapa la cubre. Es
decir: la sombra aparece exactamente del lado hacia el que todavía se puede desplazar, sin JS y
sin elementos extra. --zw-bg hace de sombra por ser la superficie más oscura de la paleta.
El anillo de foco cuando el contenedor es enfocable (ver site.js) lo aporta la regla global
:focus-visible de theme.css; no hace falta repetirlo acá. */
.zw-table-wrap {
overflow-x: auto;
border: 1px solid var(--zw-border);
border-radius: var(--bs-border-radius);
background-color: var(--zw-surface);
background-image:
linear-gradient(to right, var(--zw-surface), transparent),
linear-gradient(to left, var(--zw-surface), transparent),
linear-gradient(to right, var(--zw-bg), transparent),
linear-gradient(to left, var(--zw-bg), transparent);
background-position: left center, right center, left center, right center;
background-repeat: no-repeat;
background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
background-attachment: local, local, scroll, scroll;
}
.zw-table {
margin-bottom: 0;
font-size: 0.8125rem;
vertical-align: middle;
}
/* Los encabezados como label y no como texto: en una tabla densa el nombre de la columna es
metadato, y en mayúsculas chicas deja de competir con los datos. */
.zw-table > thead > tr > th {
padding: 0.625rem 0.75rem;
border-bottom: 1px solid var(--zw-border-md);
color: var(--zw-text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.zw-table > tbody > tr > td {
padding: 0.5625rem 0.75rem;
}
/* La última fila no dibuja su borde: ya lo aporta el borde del wrapper. */
.zw-table > tbody > tr:last-child > td {
border-bottom: 0;
}
/* En pantalla chica cada píxel de ancho es una columna menos que hay que ir a buscar con scroll: el
historial de movimientos tiene ocho, y recortando el padding lateral entran casi dos más antes de
necesitar desplazarse (UI-004). El padding vertical no baja tanto porque define el alto de fila,
que es lo que se toca con el dedo. */
@media (max-width: 767.98px) {
.zw-table > thead > tr > th,
.zw-table > tbody > tr > td {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
/* ============================================================================
4. NÚMEROS
============================================================================
Los dígitos de DM Sans son proporcionales: en una columna de montos el "1" ocupa menos que el "8"
y las cifras no alinean por posición decimal. tabular-nums las lleva a ancho fijo. */
.zw-num {
font-variant-numeric: tabular-nums;
}
/* ============================================================================
5. ESTADOS VACÍOS
============================================================================
El borde punteado marca "acá va a haber algo" sin fingir un contenedor con contenido. */
.zw-empty {
padding: 1.75rem 1.25rem;
border: 1px dashed var(--zw-border-md);
border-radius: var(--bs-border-radius);
color: var(--zw-text-muted);
font-size: 0.8125rem;
text-align: center;
}
.zw-empty p {
margin-bottom: 0;
}
.zw-empty p + p,
.zw-empty p + a {
margin-top: 0.5rem;
}
/* Un estado vacío ofrece a lo sumo una acción, y como es lo único accionable del bloque se muestra
como botón y no como link suelto. */
.zw-empty-action {
display: inline-block;
margin-top: 0.75rem;
}
/* ============================================================================
6. MÉTRICAS
============================================================================
.zw-stat se usa sobre .card: aporta el ritmo interno (label chico, valor grande, nota) que antes
cada bloque resolvía por su cuenta —de ahí que el dashboard tuviera un h3 en la fila de valores y
un h4 en la de actividad para métricas del mismo rango. */
.zw-stat {
height: 100%;
padding: 1rem 1.125rem;
}
.zw-stat-label {
margin: 0 0 0.5rem;
color: var(--zw-text-muted);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.zw-stat-value {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
/* Cuando no hay dato el hueco se llena con texto en el tono secundario, no con el tamaño de un
valor: "todavía no hay" no es una cifra. */
.zw-stat-value--empty {
color: var(--zw-text-muted);
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
}
.zw-stat-note {
margin: 0.625rem 0 0;
font-size: 0.75rem;
line-height: 1.4;
}
/* ============================================================================
7. FORMULARIOS
============================================================================ */
/* Pie del formulario. El borde separa los campos de la acción que los envía, que si no queda como
un control más de la grilla. */
.zw-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--zw-border);
}
/* En teléfono los campos ocupan el ancho completo y un submit de 90px al pie se lee como un control
secundario más. Repartido, cierra el formulario con el mismo peso que tiene (UI-004).
Selector de hijo directo y no descendiente: en ConnectDrive los hijos del bloque son dos