/* ==========================================================================
DESIGN SYSTEM PQG — sistema visual único de la aplicación.
Una sola hoja para toda PQG: **ningún módulo trae CSS propio** (encargo §2).
Los componentes se nombran por lo que SON, no por dónde se usan, de modo que
la misma tarjeta sirve en el Dashboard, en CxC y en Compras.
Esta pasada es VISUAL. No cambia ninguna regla de negocio, ningún cálculo,
ningún estado y ningún Permiso: sólo cómo se ve lo que la vista ya entrega.
Compatibilidad: **todas las clases anteriores siguen existiendo**. La pasada
redefine su aspecto, no su nombre, así que las 163 plantillas adoptan el
sistema sin reescribirse una a una.
Índice
1. Tokens (color, tipografía, espacio, radio, sombra)
2. Base y accesibilidad
3. Layout: barra lateral, barra superior, área de trabajo
4. Encabezado de pantalla
5. Iconos
6. Tarjeta de sección (panel) y rejillas
7. Franja de indicadores (KPI) y tendencia
8. Tarjetas de acción y accesos rápidos
9. Botones
10. Estados: badges, avisos, marcas
11. Tablas
12. Pestañas y barra de filtros
13. Formularios
14. Progreso, listas de comprobación y listas compactas
15. Gráficas
16. Calendario
17. Panel de detalle, ficha y rejilla de Permisos
18. Estado vacío y utilidades
19. Responsive
========================================================================== */
/* ------------------------------------------------------------- 1. TOKENS */
:root {
/* Superficies y texto -------------------------------------------------- */
--c-bg: #f2f5f9;
--c-surface: #ffffff;
--c-surface-alt: #f7f9fc;
--c-surface-sunk: #eef2f7;
--c-border: #e2e7ef;
--c-border-strong: #cfd6e2;
--c-border-soft: #edf0f5;
--c-text: #131924;
--c-text-2: #4e5a6b;
--c-text-3: #778394;
/* Primario — azul de producto ----------------------------------------- */
--c-accent: #1668c4;
--c-accent-dark: #10508f;
--c-accent-soft: #e8f1fc;
--c-accent-line: #bdd6f2;
/* Paleta de SERIES — sólo para gráficas de varias series (`Progreso de
comisiones`). NO son estados y no significan nada por sí mismos: sirven
para distinguir una serie de otra, y **siempre** van acompañadas de una
leyenda con el nombre. Ocho matices con contraste suficiente entre sí y
sobre `--c-surface`; a partir del noveno se repiten, y quien identifica la
barra es el globo, no el color. */
--c-serie-0: #1668c4; --c-serie-1: #0e8f9c; --c-serie-2: #96660c;
--c-serie-3: #5b41ab; --c-serie-4: #1c7a44; --c-serie-5: #b03028;
--c-serie-6: #2b6a86; --c-serie-7: #8a4a86;
/* Turquesa — categoría secundaria, nunca un estado --------------------- */
--c-teal: #0e8f9c;
--c-teal-soft: #e2f4f6;
--c-teal-line: #b4dfe4;
/* Navegación ----------------------------------------------------------- */
--c-nav-bg: #101725;
--c-nav-bg-2: #18202f;
--c-nav-text: #9fabbd;
--c-nav-text-2: #6e7a8c;
--c-nav-active: #1e293b;
--c-nav-mark: #4d9fe6;
--c-nav-line: #232d3e;
/* Estados — el significado del color es el MISMO en toda PQG ----------- */
--s-info-bg: #eef2f7; --s-info-fg: #44506380; --s-info-bd: #d6dde7;
--s-ok-bg: #e7f5ec; --s-ok-fg: #1c7a44; --s-ok-bd: #b6e0c6;
--s-aten-bg: #fdf4e3; --s-aten-fg: #96660c; --s-aten-bd: #ecd5a4;
--s-revi-bg: #f1ecfb; --s-revi-fg: #5b41ab; --s-revi-bd: #d5c9f0;
--s-bloq-bg: #fdecea; --s-bloq-fg: #b03028; --s-bloq-bd: #f2c3bf;
/* Tipografía ----------------------------------------------------------- */
--fs-xs: 11px;
--fs-sm: 12px;
--fs: 13px;
--fs-md: 14px;
--fs-lg: 16px;
--fs-xl: 20px;
--fs-2xl: 26px;
--ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--ff-num: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Espacio, radio, sombra ----------------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
--shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 4px 10px -4px rgba(16, 24, 40, .06);
--shadow-md: 0 2px 6px rgba(16, 24, 40, .07), 0 12px 24px -12px rgba(16, 24, 40, .12);
--nav-w: 236px;
--wa-max: 1500px;
/* Alto de la barra superior: la cabecera fija de una tabla se detiene justo
debajo, en vez de deslizarse por detrás. */
--topbar-h: 43px;
}
/* Corrección del token de texto informativo (se escribe entero, sin alfa). */
:root { --s-info-fg: #445063; }
/* --------------------------------------------- 2. BASE Y ACCESIBILIDAD */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--ff);
font-size: var(--fs);
color: var(--c-text);
background: var(--c-bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
a { color: var(--c-accent); text-underline-offset: 2px; }
a:hover { color: var(--c-accent-dark); }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.01em; }
code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--fs-sm);
background: var(--c-surface-sunk);
padding: 1px 5px;
border-radius: var(--radius-sm);
}
/* Un foco visible SIEMPRE, con el mismo anillo en toda la aplicación. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
left: var(--sp-2); top: var(--sp-2); z-index: 60;
background: #fff; padding: 10px 14px; border: 1px solid var(--c-border);
border-radius: var(--radius); box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ------------------------------------------------------------ 3. LAYOUT */
/* --- Anclas internas y la barra superior fija -----------------------------
La `.topbar` es `sticky` en lo alto del documento, así que al pulsar un
ancla del menú de secciones de una ficha 360° el navegador dejaba el título
**debajo** de ella, cortado. `scroll-padding-top` en el contenedor que
scrollea —que es el documento— lo resuelve **de una vez para toda PQG**: no
hace falta una regla por plantilla ni un `scroll-margin-top` repetido en
cada `id`, y cualquier ancla futura nace ya corregida.
El valor es la altura de la barra más un respiro, para que el título quede
visible **completo** y no pegado al borde. */
html { scroll-padding-top: calc(var(--topbar-h) + var(--sp-4)); }
.app { display: flex; min-height: 100vh; }
/* --- Barra lateral oscura ---------------------------------------------- */
.nav {
width: var(--nav-w);
flex: 0 0 var(--nav-w);
background: var(--c-nav-bg);
color: var(--c-nav-text);
padding: 14px 12px 20px;
display: flex;
flex-direction: column;
position: sticky;
top: 0;
align-self: flex-start;
max-height: 100vh;
overflow-y: auto;
scrollbar-width: thin;
}
.nav__brand {
display: flex; align-items: center; justify-content: center;
min-height: 72px;
margin: -14px -12px 8px;
padding: 14px 18px 13px;
border-bottom: 1px solid var(--c-border);
background: var(--c-surface);
}
.nav__brand-logo {
display: block;
width: 100%; max-width: 114px; height: auto;
}
.nav__group {
padding: 14px 10px 5px;
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: .1em; color: var(--c-nav-text-2);
}
.nav a {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; margin-bottom: 1px;
color: var(--c-nav-text); text-decoration: none;
font-size: var(--fs); min-height: 34px;
border-radius: var(--radius-sm);
transition: background .12s ease, color .12s ease;
}
.nav a .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.nav a:hover { background: var(--c-nav-bg-2); color: #fff; }
.nav a:hover .ic { opacity: 1; }
.nav a[aria-current="page"] {
background: var(--c-nav-active); color: #fff; font-weight: 550;
box-shadow: inset 2px 0 0 var(--c-nav-mark);
}
.nav a[aria-current="page"] .ic { color: var(--c-nav-mark); opacity: 1; }
/* Pie de la barra: quién soy y cómo salgo. */
.nav__foot {
margin-top: auto; padding: 12px 10px 0;
border-top: 1px solid var(--c-nav-line);
font-size: var(--fs-sm); color: var(--c-nav-text);
display: flex; align-items: center; gap: 10px;
}
.nav__avatar {
width: 30px; height: 30px; flex: 0 0 30px;
border-radius: var(--radius-pill);
background: var(--c-nav-active); color: #fff;
display: grid; place-items: center;
font-size: var(--fs-sm); font-weight: 650;
}
.nav__who { min-width: 0; flex: 1 1 auto; }
.nav__who b { display: block; color: #fff; font-weight: 550;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__foot form { margin: 0; }
.nav__foot button {
background: none; border: 0; color: var(--c-nav-text-2);
padding: 6px; cursor: pointer; min-height: 30px;
border-radius: var(--radius-sm); display: grid; place-items: center;
}
.nav__foot button:hover { color: #fff; background: var(--c-nav-bg-2); }
.nav__foot button .ic { width: 16px; height: 16px; }
/* --- Área principal ----------------------------------------------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
background: var(--c-surface);
border-bottom: 1px solid var(--c-border);
padding: 11px 26px;
font-size: var(--fs-sm); color: var(--c-text-2);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
position: sticky; top: 0; z-index: 20;
}
.topbar a { color: var(--c-text-2); text-decoration: none; }
.topbar a:hover { color: var(--c-accent); text-decoration: underline; }
.topbar b { color: var(--c-text); font-weight: 600; }
.workarea { padding: 22px 26px 72px; max-width: var(--wa-max); width: 100%; min-width: 0; }
/* ------------------------------------------ 4. ENCABEZADO DE PANTALLA */
/* Título + descripción breve + acciones principales. Los indicadores van
debajo, en `.stats`, sólo cuando ayudan a operar la pantalla (encargo §5). */
.screen__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.screen__title {
font-size: var(--fs-2xl); margin: 0 0 3px; line-height: 1.2;
letter-spacing: -.02em;
}
.screen__eyebrow {
display: block; font-size: var(--fs-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .1em;
color: var(--c-accent); margin-bottom: 5px;
}
.screen__sub { margin: 0 0 var(--sp-3); color: var(--c-text-2); max-width: 86ch; }
.screen__head .screen__sub { margin-bottom: 0; }
.screen__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
/* Acciones ADMINISTRATIVAS de una ficha: **dentro de la cabecera**, alineadas
a la derecha del nombre y por encima del menú de secciones (encargo §3). Son
pocas y sensibles —deshabilitar, inactivar— y se separan así de la edición,
que vive dentro de cada sección.
Ya no llevan franja ni rótulo propios: los botones dicen lo que hacen, y el
rótulo «Acciones administrativas» sólo repetía la categoría. */
.screen__actions--admin {
justify-content: flex-end; align-items: center; gap: var(--sp-2);
margin: 0; flex-shrink: 0;
}
.screen__head .screen__actions { margin: 0; }
/* ------------------------------------------------------------ 5. ICONOS */
/* Iconografía vendorizada: un sprite SVG en línea, sin CDN y sin emojis como
iconografía de producto (encargo §4). El icono es SIEMPRE decorativo: el
significado lo lleva el texto que lo acompaña. */
.ic {
width: 16px; height: 16px;
display: inline-block; vertical-align: -3px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
flex: 0 0 auto;
}
.ic--sm { width: 14px; height: 14px; }
.ic--lg { width: 20px; height: 20px; }
.ic--xl { width: 24px; height: 24px; }
/* Icono dentro de un cuadro suave de color — el patrón de la referencia. */
.icobox {
width: 34px; height: 34px; flex: 0 0 34px;
display: grid; place-items: center;
border-radius: 9px;
background: var(--c-accent-soft); color: var(--c-accent-dark);
}
.icobox .ic { width: 17px; height: 17px; }
.icobox--ok { background: var(--s-ok-bg); color: var(--s-ok-fg); }
.icobox--aten { background: var(--s-aten-bg); color: var(--s-aten-fg); }
.icobox--bloq { background: var(--s-bloq-bg); color: var(--s-bloq-fg); }
.icobox--revi { background: var(--s-revi-bg); color: var(--s-revi-fg); }
.icobox--teal { background: var(--c-teal-soft); color: var(--c-teal); }
.icobox--info { background: var(--c-surface-sunk); color: var(--c-text-2); }
.icobox--lg { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
.icobox--lg .ic { width: 20px; height: 20px; }
/* ---------------------------------------- 6. TARJETA DE SECCIÓN Y REJILLAS */
.panel {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
margin: 0 0 var(--sp-4);
min-width: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
}
.panel__head {
padding: 13px 18px;
border-bottom: 1px solid var(--c-border-soft);
display: flex; justify-content: space-between; align-items: center;
gap: var(--sp-3); flex-wrap: wrap;
}
.panel__title {
margin: 0; font-size: var(--fs-md); font-weight: 650;
display: flex; align-items: center; gap: 9px; color: var(--c-text);
}
.panel__title .ic { color: var(--c-text-3); }
.panel__sub { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--c-text-3); }
.panel__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.panel__body { padding: 16px 18px; min-width: 0; overflow-x: auto; }
.panel__body > * + * { margin-top: var(--sp-3); }
.panel__body > .table:first-child, .panel__body > .tabla:first-child { margin-top: 0; }
.panel__foot {
padding: 11px 18px; border-top: 1px solid var(--c-border-soft);
background: var(--c-surface-alt); font-size: var(--fs-sm);
display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
flex-wrap: wrap;
}
/* Una tabla ocupa el ancho completo de su tarjeta, sin doble margen. */
.panel__body--flush { padding: 0; }
.panel__body--flush > * + * { margin-top: 0; }
.panel--aten { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--s-aten-fg); }
.panel--bloq { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--s-bloq-fg); }
.panel--ok { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--s-ok-fg); }
.panel--acc { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--c-accent); }
/* Rejilla de paneles (Dashboard y pantallas de resumen). */
.board { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; align-items: start; }
.board__full { grid-column: 1 / -1; }
.board--2 { grid-template-columns: 1fr 1fr; }
.board--3 { grid-template-columns: repeat(3, 1fr); }
/* Bloque inferior del Dashboard (encargo §2.4): `Abastecimiento` a la
izquierda, alto; a la derecha `Cuentas` arriba e `Inventario en riesgo`
debajo. La suma de las dos derechas se aproxima a la altura de la izquierda
**sin fijar ninguna altura absoluta**: `align-items: stretch` deja que la
columna alta marque el alto y el apilado lo reparta.
En pantalla angosta las tres caen en una sola columna por la regla de
`.board` que ya existe, y el apilado se disuelve solo — ninguna tarjeta
queda aislada ni deja un hueco al lado. */
.board--bottom { align-items: stretch; }
/* El panel de la izquierda llevaba el margen inferior de `.panel`, que queda
FUERA de su caja: `stretch` estiraba la caja de margen, así que la tarjeta
acababa `--sp-4` más baja que el apilado de la derecha. Sin ese margen las
dos columnas terminan exactamente a la misma altura. */
.board--bottom > .panel { margin-bottom: 0; }
.board__stack { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.board__stack > .panel { margin-bottom: 0; }
/* Primer bloque operativo del Dashboard: lo urgente conserva mayor peso y los
accesos permanecen visibles sin empujar el Calendario fuera del primer
recorrido. Es composición de componentes existentes, no otra tarjeta. */
/* §F6 — `Lo urgente hoy` **no lleva scroll interno**.
La causa medida, no deducida: `.panel__body` declara `overflow-x: auto`, y
por la propia especificación de CSS un eje `visible` junto a un eje que no lo
es **computa a `auto`**. Es decir, el cuerpo ya tenía `overflow-y: auto`
latente; sólo le faltaba una altura que lo activara. Se la daba
`height: calc(100% - 51px)`, puesta para que las dos tarjetas de la franja
quedaran a la misma altura: con ocho tarjetas urgentes el contenido no cabía
en esa altura prestada y aparecía la barra de desplazamiento **dentro** de la
tarjeta, justo donde el Usuario no la busca.
Se retira la altura impuesta y la franja pasa a `align-items: start`: cada
tarjeta mide lo que su contenido necesita y la única navegación vertical es
la de la página, que es la natural. La simetría de altura era una preferencia
estética; el scroll interno era un defecto de uso. */
.dashboard-priority {
display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-4);
grid-template-columns: minmax(0, 1.65fr) minmax(25rem, 1fr);
align-items: start;
}
.dashboard-priority > .panel { margin-bottom: 0; }
.dashboard-priority .panel__body { height: auto; }
/* Las ocho tarjetas del encargo §F7 en una rejilla que las acomoda en dos
filas de cuatro a 1440 px y en dos de tres a 1280 px, sin recortar ninguna. */
.dashboard-priority .urgent {
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}
.dashboard-priority .urgent__item { padding: 10px 11px; }
.dashboard-priority .quick {
grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0;
gap: var(--sp-2);
/* Nueve accesos = tres filas de tres. La cuadrícula queda cerrada y no
deja el hueco que dejaba el octavo. */
grid-auto-rows: 1fr;
}
.dashboard-priority .quick a {
display: grid; grid-template-columns: 30px minmax(0, 1fr);
align-items: center; min-height: 58px; padding: 8px 9px;
}
/* -------------------------------- 7. FRANJA DE INDICADORES Y TENDENCIA */
/* 3–6 indicadores clave, compactos y visuales. Nunca «KPIs porque sí»: cada
uno tiene que ayudar a operar la pantalla en la que está (encargo §5). */
.stats {
display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.stats--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
/* Una sola tarjeta que RESUME la población y ocupa la fila entera, con sus
desgloses debajo en su propia rejilla (`Pedidos activos`). Compartir rejilla
con ellos dejaba a la tarjeta dominante del mismo tamaño que sus partes. */
.stats--1 { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-3); }
/* §F38 — `Ventas del mes` **domina la primera fila** de Mi panel.
Con cinco o seis tarjetas del mismo tamaño la cabecera se leía como una lista
sin jerarquía: la cifra que resume el mes competía con un conteo de
Cotizaciones. Aquí ocupa la fila entera y las demás se reparten la siguiente
en `.stats--4`, que ya se apila sola en pantalla angosta.
No es una tarjeta distinta: es **la misma** `.stat--kpi`, en una rejilla de
una sola columna y con el hueco inferior reducido para que las dos filas se
lean como una sola cabecera. */
.stats--panel-lead {
grid-template-columns: minmax(0, 1fr);
margin-bottom: var(--sp-3);
}
/* La SEGUNDA fila de esa cabecera — §F38.
Medido en el navegador: con `.stats--4` (`minmax(13rem, 1fr)`) las cinco
tarjetas restantes caben en una fila a 1440 px pero **se parten en 4 + 1** a
1280, porque a ese ancho el hueco disponible da 12.9 rem por tarjeta y el
mínimo pedía 13. Una fila de cuatro y otra de una no es «las otras cuatro
debajo»: es una tarjeta huérfana.
Con `11.5rem` las cinco entran en una sola fila a 1280 y a 1440, y en
pantalla más angosta se siguen apilando solas — no se fija ningún número de
columnas, que es lo que dejaría una rejilla rota en un ancho no previsto. */
.stats--panel-rest { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.stats--dashboard { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.stats--fit { grid-template-columns: repeat(auto-fit, minmax(11rem, max-content)); }
.stat {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
display: flex; flex-direction: column; gap: 3px;
min-width: 0;
position: relative;
}
.stat__top { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.stat__top .stat__label { margin: 0; }
.stat__label {
font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2);
text-transform: uppercase; letter-spacing: .07em;
overflow: hidden; text-overflow: ellipsis;
}
.stat__value {
font-size: var(--fs-xl); font-weight: 680; line-height: 1.2;
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.stat__value--sm { font-size: var(--fs-lg); }
.stat__value--xl { font-size: var(--fs-2xl); }
.stat__meta { font-size: var(--fs-sm); color: var(--c-text-3); }
.stat__foot { margin-top: auto; padding-top: var(--sp-2); }
.stat a.stat__link { font-size: var(--fs-sm); text-decoration: none; }
.stat a.stat__link:hover { text-decoration: underline; }
/* El tono de una tarjeta refuerza al texto; nunca lo sustituye. */
.stat--aten { border-color: var(--s-aten-bd); }
.stat--bloq { border-color: var(--s-bloq-bd); }
.stat--ok { border-color: var(--s-ok-bd); }
.stat--acc { border-color: var(--c-accent-line); }
.stat--aten .stat__value { color: var(--s-aten-fg); }
.stat--bloq .stat__value { color: var(--s-bloq-fg); }
.stat--ok .stat__value { color: var(--s-ok-fg); }
/* --- Tarjeta KPI de cabecera (componente compartido) ---------------------
Una sola definición para TODAS las cabeceras (Dashboard, Clientes, y
cualquier pantalla futura): la cifra manda, va CENTRADA y la lectura baja
en una jerarquía fija — **cifra → título → contexto**. El contexto
secundario se estructura en pares etiqueta/valor alineados; nunca en texto
corrido, que es lo que descuadraba las tarjetas cuando una frase era larga
y otra corta. Mejorar aquí evita copiar CSS pantalla por pantalla. */
.stat--kpi {
align-items: center; text-align: center; gap: 2px; padding: 15px 16px 14px;
}
.stat--kpi .icobox { margin-bottom: 5px; }
.stat--kpi .stat__value { font-size: var(--fs-2xl); }
.stat--kpi .stat__value--sm { font-size: var(--fs-xl); }
/* El título NO se recorta con elipsis: envuelve. Una cifra sin su nombre
completo no se puede interpretar, y la altura la iguala la rejilla. */
.stat--kpi .stat__label {
overflow: visible; text-overflow: clip; white-space: normal; max-width: 100%;
}
.stat--kpi .stat__meta { text-align: center; }
.stat--kpi .delta { align-self: center; }
.stat--kpi .stat__foot {
width: 100%; text-align: center;
border-top: 1px solid var(--c-border-soft); margin-top: auto;
}
/* Contexto secundario de un KPI: pares etiqueta/valor en columnas alineadas.
Sustituye a la frase corrida — dos datos distintos se leen de un vistazo y
dos tarjetas contiguas quedan a la misma altura. */
.kpi-facts {
display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 4px var(--sp-3); width: 100%;
margin-top: var(--sp-2); padding-top: var(--sp-2);
border-top: 1px solid var(--c-border-soft);
}
.kpi-facts--1 { grid-template-columns: minmax(0, 1fr); }
/* Variante en FILAS para un contexto de tres cifras cortas cuyo rótulo es una
palabra larga (`Pedidos activos`). En columnas, `Programados` no cabía en un
tercio de la tarjeta y se partía a media palabra o se salía; en filas cada
rótulo tiene el ancho entero, así que **los tres caben en una sola línea**,
comparten exactamente la misma composición —rótulo a la izquierda, cifra a
la derecha— y quedan alineados entre sí por construcción.
`display: contents` en el par deja que rótulo y cifra participen
directamente en la rejilla: sin él, cada par formaría su propia caja y las
cifras dejarían de compartir columna. */
.kpi-facts--rows {
grid-template-columns: minmax(0, 1fr) auto;
gap: 3px var(--sp-3); text-align: left;
}
.kpi-facts--rows .kpi-fact { display: contents; }
.kpi-facts--rows .kpi-fact__label {
letter-spacing: .04em; line-height: 1.3; align-self: center;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-facts--rows .kpi-fact__value { text-align: right; }
.kpi-fact { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kpi-fact__label {
font-size: var(--fs-xs); color: var(--c-text-3);
text-transform: uppercase; letter-spacing: .06em;
}
.kpi-fact__value {
font-size: var(--fs-sm); font-weight: 650;
font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi-fact__value--aten { color: var(--s-aten-fg); }
.kpi-fact__value--muted { color: var(--c-text-3); font-weight: 550; }
/* --- Tarjeta KPI de un SUBENCABEZADO (*refinement 6* §B4.4) ---------------
Misma tarjeta, misma composición y mismo comportamiento; **menos peso
visual**. Una franja secundaria —la de revisión de `Cuentas por cobrar`—
tenía exactamente la altura y el tamaño de cifra del encabezado principal, y
por eso se leía como un segundo encabezado en vez de como contexto.
Lo que se reduce es **altura, relleno y tamaño de la cifra**; lo que NO se
reduce es el título, ni el contraste, ni el área pulsable: sigue siendo
legible y sigue llevando a su conjunto exacto. Achicar el texto hasta
volverlo decorativo habría cambiado el problema, no resuelto. */
.stats--sub { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--sp-2); }
.stat--mini { padding: 9px 12px 8px; gap: 1px; }
.stat--mini .icobox { width: 24px; height: 24px; flex: 0 0 24px; margin-bottom: 2px; }
.stat--mini .icobox .ic { width: 13px; height: 13px; }
.stat--mini .stat__value { font-size: var(--fs-lg); }
.stat--mini .stat__value--sm { font-size: var(--fs-md); }
.stat--mini .stat__label { font-size: 10px; letter-spacing: .05em; }
.stat--mini .stat__meta { font-size: var(--fs-xs); }
.stat--mini .stat__foot { padding-top: 5px; }
/* --- Tarjeta KPI CLICKABLE (regla global §1 del refinement 2) -------------
Una cifra que representa un conjunto de hechos lleva a esos hechos, y el
destino llega **ya filtrado** al mismo subconjunto. La tarjeta entera es un
``: sin JavaScript, así que el teclado, el botón central del ratón y
«abrir en pestaña nueva» funcionan solos.
El texto NO se pinta de color de enlace —la cifra manda y el subrayado la
ensuciaría—; lo que indica que es pulsable es el estado al pasar por encima
y un anillo de foco visible, que es lo que el teclado necesita. */
.stat--link {
text-decoration: none; color: inherit; cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.stat--link:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-md); }
.stat--link:focus-visible { outline: 2px solid var(--c-accent-line); outline-offset: 2px; }
.stat--link .stat__label { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
.stat--link:hover { transform: translateY(-1px); }
}
/* --- Tarjeta de VENDEDOR de `Mi panel` (*refinement 6* §B1.1) ------------
La entrada del Administrador: una tarjeta por Vendedor con su nombre y las
tres cifras que permiten decidir a quién abrir. **No es un KPI**: el KPI
tiene UNA cifra dominante y centrada, y aquí las tres pesan lo mismo, así
que reutilizar `.stat--kpi` habría obligado a deshacer justo lo que ese
componente define. Lo que sí se reutiliza es `.kpi-facts--rows`, que ya
resuelve los pares rótulo/cifra alineados.
La tarjeta entera es un ``, con el mismo estado de hover y el mismo
anillo de foco que `.stat--link`: sin JavaScript. */
.sellercards {
display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.sellercard {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
display: flex; flex-direction: column; gap: 2px;
min-width: 0; text-decoration: none; color: inherit; cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.sellercard:hover { border-color: var(--c-accent-line); box-shadow: var(--shadow-md); }
.sellercard:focus-visible { outline: 2px solid var(--c-accent-line); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
.sellercard:hover { transform: translateY(-1px); }
}
.sellercard__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sellercard__name {
font-size: var(--fs-lg); font-weight: 650; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sellercard__foot {
margin-top: auto; padding-top: var(--sp-2);
font-size: var(--fs-xs); color: var(--c-text-3);
}
/* La tarjeta DOMINANTE de una cabecera —`Pedidos activos` sobre sus cuatro
estados operativos— ocupa dos columnas de la rejilla cuando hay sitio. En
una pantalla angosta vuelve a una sola: `auto-fit` ya reparte, y forzar dos
columnas donde no caben dejaría justo los huecos que el encargo prohíbe. */
.stat--wide { grid-column: span 2; }
@media (max-width: 720px) {
.stat--wide { grid-column: span 1; }
}
/* --- Cifra BIMONEDA de una tarjeta KPI (encargo §2.1) --------------------
CxC y CxP son la excepción al KPI de un solo número, porque manejan dos
monedas y **nunca se suman entre sí** (RN-138). El orden de lectura que el
negocio pidió es *importe MXN → importe USD → título → contexto*, así que
los importes se apilan **encima** del título, centrados y con cifras
tabulares para que las dos líneas queden alineadas. */
.stat__money {
display: flex; flex-direction: column; align-items: center; gap: 1px;
width: 100%;
}
.stat__money-line {
font-size: var(--fs-xl); line-height: 1.2;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
color: var(--c-text-2); overflow-wrap: anywhere;
}
/* El importe manda; el código de moneda lo acompaña sin competir con él. Las
dos líneas son igual de importantes —una NO es el total y la otra un
detalle—, así que van al mismo tamaño: sumarlas está prohibido (RN-138). */
.stat__money-line b { font-weight: 680; color: var(--c-text); }
.stat__money-line--none { color: var(--c-text-3); font-weight: 600; }
/* --- Comparación CxC / CxP por moneda (encargo §2.5) ---------------------
Tabla compacta de tres cifras. El signo se refuerza con color **y** con el
propio signo escrito: el color nunca es el único canal, y el `title` de
cada celda repite que esto es una COMPARACIÓN — las dos carteras siguen
separadas y no existe ninguna función que las netee (RN-213). */
.ledger { margin-bottom: var(--sp-2); }
.ledger th[scope="row"] { font-weight: 650; }
.ledger td, .ledger th { padding-top: 6px; padding-bottom: 6px; }
.ledger__pos { color: var(--s-ok-fg); font-weight: 650; cursor: help; }
.ledger__neg { color: var(--s-bloq-fg); font-weight: 650; cursor: help; }
/* Indicador compacto de alerta en una tabla: un punto con su descripción.
**El color nunca es el único canal** — el punto SIEMPRE viaja con su
`title` y su `aria-label`, que dicen exactamente qué falta. Sustituye a los
globos de texto largo, que hacían saltar el alto de la fila según cuántas
palabras llevara cada Cliente. */
.alerts { white-space: nowrap; }
.alerts > * + * { margin-left: 6px; }
/* Una señal de la columna `Alertas` — §F13.
## El defecto que se corrige, medido y no deducido
Los puntos se veían **huecos**, sin su color. La causa era una **colisión de
nombres en el propio CSS**: `.dot` estaba declarado DOS veces, aquí para la
alerta y mucho más abajo para el checklist compacto de Próximas salidas, que
declara `background: transparent` y un borde gris. Con la misma
especificidad gana la última, así que la regla del checklist **borraba el
relleno de `.dot--aten` y `.dot--bloq`** en una pantalla que no tiene nada
que ver con ella. Por eso la alerta pasa a llamarse `.alerta__dot`: pertenece
a este componente, y así ninguna de las dos puede volver a pisar a la otra.
## La forma que el negocio pidió
Agustín prefiere el patrón anterior —**punto de color**, color según la
gravedad, y el globo explicando exactamente qué significa— y pidió que el
texto no viva permanentemente al lado, porque tres etiquetas por fila
volvían pesada la tabla.
**El color no es el único portador del significado**, y eso no se negocia:
cada punto es `tabindex="0"`, así que se alcanza con el teclado; lleva su
globo instantáneo dibujado por la página (mismo mecanismo que `.dot__tip`,
por el mismo motivo: el `title` nativo tarda y sólo enseña el cursor `?`); y
lleva **texto completo para lector de pantalla**, que dice qué falta. Lo que
se retira es la etiqueta *visible* permanente, no la información. */
.alerta {
position: relative; display: inline-flex; align-items: center;
font-size: var(--fs-sm); white-space: nowrap;
}
.alerta:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 50%; }
.alerta__dot {
display: inline-block; width: 11px; height: 11px; border-radius: 50%;
vertical-align: middle; border: 1px solid rgba(0, 0, 0, .18); flex: none;
}
.alerta__dot--aten { background: var(--s-aten-fg); border-color: var(--s-aten-fg); }
.alerta__dot--bloq { background: var(--s-bloq-fg); border-color: var(--s-bloq-fg); }
.alerta__dot--ok { background: var(--s-ok-fg); border-color: var(--s-ok-fg); }
/* El globo: sale **al instante**, con el ratón y con el teclado. */
.alerta__tip {
position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-1);
white-space: normal; width: max-content; max-width: 22rem;
text-transform: none; letter-spacing: 0; text-align: left;
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
padding: 4px 9px; z-index: 5;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .08s ease;
}
.alerta:hover .alerta__tip, .alerta:focus-visible .alerta__tip { opacity: 1; visibility: visible; }
/* Dentro de la celda, el globo del primero y del último no puede desbordarla. */
.alerts .alerta:first-child .alerta__tip { left: 0; transform: none; }
.alerts .alerta:last-child .alerta__tip { left: auto; right: 0; transform: none; }
/* La etiqueta VISIBLE de una señal, cuando la columna es suya y no comparte
sitio con otras: en `Solicitudes de precio` cada fila tiene **una** señal, así
que el texto cabe al lado y ahorra el globo para el detalle. En la columna
`Alertas` de Clientes, donde conviven hasta tres, la etiqueta no se dibuja y
el texto vive en el globo y en el lector de pantalla (§F13, §F72). */
.alerta__label { margin-left: 5px; }
.alerta__sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Tendencia — la dirección NUNCA es sólo color: lleva su flecha y su texto. */
.delta {
font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
display: inline-flex; align-items: center; gap: 3px;
}
.delta--up::before { content: "▲"; font-size: 8px; }
.delta--down::before { content: "▼"; font-size: 8px; }
.delta--up.delta--good, .delta--down.delta--good { color: var(--s-ok-fg); }
.delta--up.delta--bad, .delta--down.delta--bad { color: var(--s-bloq-fg); }
.delta--flat { color: var(--c-text-3); font-weight: 500; }
.delta__ref { color: var(--c-text-3); font-weight: 400; }
/* Micrográfica: la silueta de los últimos meses bajo la cifra. Es
ORIENTACIÓN, no lectura de valores: las cifras exactas viven en la gráfica
completa y en su tabla accesible. */
.spark {
display: flex; align-items: flex-end; gap: 2px;
height: 30px; margin-top: 8px;
}
.spark__b {
flex: 1 1 0; min-height: 2px; border-radius: 2px 2px 0 0;
background: var(--c-accent-line);
}
.spark__b--now { background: var(--c-accent); }
.spark__b--none { background: var(--c-border); }
.spark--ok .spark__b { background: #b6e0c6; }
.spark--ok .spark__b--now { background: var(--s-ok-fg); }
.spark--aten .spark__b { background: #ecd5a4; }
.spark--aten .spark__b--now { background: var(--s-aten-fg); }
.spark--teal .spark__b { background: var(--c-teal-line); }
.spark--teal .spark__b--now { background: var(--c-teal); }
/* Toda micrográfica lleva su equivalente en cifras, plegado: el dato exacto
nunca vive sólo en un píxel. */
.spark__data { margin-top: 6px; }
.spark__data summary { font-size: var(--fs-xs); color: var(--c-text-3); }
.spark__data .tabla { margin-top: 6px; }
.spark__data .tabla th, .spark__data .tabla td { padding: 4px 8px; font-size: var(--fs-sm); }
/* ------------------------- 8. TARJETAS DE ACCIÓN Y ACCESOS RÁPIDOS */
.cards {
display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.card {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.card__head { display: flex; align-items: center; gap: 10px; }
.card__title {
margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-2);
text-transform: uppercase; letter-spacing: .07em;
}
.card__value {
margin: 0; font-size: var(--fs-xl); font-weight: 680; line-height: 1.25;
letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.card__meta { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.card__detail { margin: 0; color: var(--c-text-2); font-size: var(--fs-sm); }
.card__action { margin: auto 0 0; padding-top: var(--sp-2); }
.card__diag {
margin-top: var(--sp-3); padding-top: var(--sp-3);
border-top: 1px dashed var(--c-border);
grid-template-columns: 12rem 1fr; font-size: var(--fs-sm);
}
/* Accesos rápidos: acciones reales — icono + color + etiqueta corta. */
.quick {
display: grid; gap: 10px; margin: 0 0 var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.quick a {
display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
padding: 13px 14px;
border: 1px solid var(--c-border); border-radius: var(--radius);
background: var(--c-surface); color: var(--c-text);
text-decoration: none; font-size: var(--fs); font-weight: 550;
box-shadow: var(--shadow-xs);
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
min-height: 76px;
}
.quick a:hover {
border-color: var(--c-accent-line); box-shadow: var(--shadow);
transform: translateY(-1px); color: var(--c-text);
}
.quick a .icobox { width: 30px; height: 30px; flex-basis: 30px; border-radius: 8px; }
.quick a .icobox .ic { width: 16px; height: 16px; }
.quick__label { line-height: 1.3; }
/* Fila compacta de accesos, cuando el bloque no es protagonista. */
.quick--row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quick--row a { flex-direction: row; align-items: center; min-height: 38px; padding: 7px 12px; }
/* ----------------------------------------------------------- 9. BOTONES */
/* Cuatro niveles y ni uno más: primario (la acción de la pantalla),
secundario (complementaria), fantasma (navegación o acción menor) y
excepcional (sólo lo realmente excepcional) — encargo §17. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 7px 14px; min-height: 34px; line-height: 1.3;
border-radius: var(--radius-sm);
border: 1px solid var(--c-border-strong);
background: var(--c-surface); color: var(--c-text);
font-family: inherit; font-size: var(--fs); font-weight: 550;
cursor: pointer; text-decoration: none;
box-shadow: var(--shadow-xs);
transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
white-space: nowrap;
}
.btn:hover { background: var(--c-surface-alt); border-color: var(--c-text-3); color: var(--c-text); }
.btn:active { box-shadow: none; }
.btn .ic { width: 15px; height: 15px; }
.btn--primary {
background: var(--c-accent); border-color: var(--c-accent); color: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.btn--primary:hover { background: var(--c-accent-dark); border-color: var(--c-accent-dark); color: #fff; }
.btn--secondary {
background: var(--c-accent-soft); border-color: var(--c-accent-line);
color: var(--c-accent-dark);
}
.btn--secondary:hover { background: #dbe9fa; border-color: var(--c-accent); color: var(--c-accent-dark); }
.btn--ghost {
background: transparent; border-color: transparent; color: var(--c-text-2);
box-shadow: none;
}
.btn--ghost:hover { background: var(--c-surface-sunk); color: var(--c-text); border-color: transparent; }
/* Excepcional: sólo para acciones realmente excepcionales (cancelar, revertir,
corregir historia). Se ve distinta a propósito. */
.btn--danger {
background: var(--c-surface); border-color: var(--s-bloq-bd); color: var(--s-bloq-fg);
}
.btn--danger:hover { background: var(--s-bloq-bg); border-color: var(--s-bloq-fg); color: var(--s-bloq-fg); }
.btn--sm { padding: 4px 10px; min-height: 28px; font-size: var(--fs-sm); }
.btn--sm .ic { width: 14px; height: 14px; }
.btn--lg { padding: 10px 18px; min-height: 40px; font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn--icon { padding: 6px; width: 32px; min-height: 32px; }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: .5; cursor: not-allowed; box-shadow: none;
}
/* Grupo de botones con jerarquía visible de izquierda a derecha. */
.btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
/* ------------------------------------------------------- 10. ESTADOS */
/* Un estado se lee por su TEXTO; el color sólo lo refuerza (encargo §3, §21). */
.chip, .pill, .badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 9px; border-radius: var(--radius-pill);
font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
border: 1px solid var(--c-border); background: var(--c-surface-alt);
color: var(--c-text-2); white-space: nowrap;
}
.chip .ic, .pill .ic, .badge .ic { width: 12px; height: 12px; }
.chip--ok, .badge--ok {
background: var(--s-ok-bg); border-color: var(--s-ok-bd); color: var(--s-ok-fg);
}
.chip--aten, .badge--aten {
background: var(--s-aten-bg); border-color: var(--s-aten-bd); color: var(--s-aten-fg);
}
.chip--bloq, .chip--off, .chip--n3, .badge--bloq {
background: var(--s-bloq-bg); border-color: var(--s-bloq-bd); color: var(--s-bloq-fg);
}
.chip--revi, .chip--exc, .badge--revi, .badge--exc {
background: var(--s-revi-bg); border-color: var(--s-revi-bd); color: var(--s-revi-fg);
}
.chip--sens { background: var(--s-aten-bg); border-color: var(--s-aten-bd); color: var(--s-aten-fg); }
.chip--dep, .chip--nat, .chip--acc, .badge--acc {
background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-accent-dark);
}
.chip--teal { background: var(--c-teal-soft); border-color: var(--c-teal-line); color: var(--c-teal); }
.chip--lg { font-size: var(--fs-sm); padding: 3px 11px; }
/* Familias de estado operativo — encargo §20 del *Functional refinement 3*.
Una clase por FAMILIA, no por pantalla: el mismo estado se ve igual en el
listado de Pedidos, en Mi panel y en la ficha del Cliente, porque las tres
piden su clase a `commercial.selectors.status_family`.
**No se inventó ningún estado por tener color** y **el color nunca es el
único canal**: la etiqueta de texto acompaña siempre al badge. */
.badge--borrador { background: var(--c-surface-alt); border-color: var(--c-border); color: var(--c-text-2); }
.badge--por-preparar { background: var(--s-aten-bg); border-color: var(--s-aten-bd); color: var(--s-aten-fg); }
.badge--esperando-material { background: var(--s-revi-bg); border-color: var(--s-revi-bd); color: var(--s-revi-fg); }
.badge--listo { background: var(--c-teal-soft); border-color: var(--c-teal-line); color: var(--c-teal); }
.badge--programado { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-accent-dark); }
.badge--en-ruta { background: var(--c-accent-soft); border-color: var(--c-accent-line); color: var(--c-accent-dark); }
.badge--entregado { background: var(--s-ok-bg); border-color: var(--s-ok-bd); color: var(--s-ok-fg); }
.badge--cancelado { background: var(--s-bloq-bg); border-color: var(--s-bloq-bd); color: var(--s-bloq-fg); }
.badge--neutro { background: var(--c-surface-alt); border-color: var(--c-border); color: var(--c-text-2); }
/* Punto de estado: el segundo canal, además del texto. */
.chip::before { content: none; }
.chip--dot::before {
content: ""; display: inline-block; width: 6px; height: 6px;
border-radius: 50%; background: currentColor; flex: 0 0 6px;
}
/* Avisos --------------------------------------------------------------- */
.note {
border: 1px solid var(--s-info-bd); background: var(--s-info-bg); color: var(--s-info-fg);
padding: 11px 14px; border-radius: var(--radius); font-size: var(--fs);
display: block;
}
.note--ok { border-color: var(--s-ok-bd); background: var(--s-ok-bg); color: var(--s-ok-fg); }
.note--aten { border-color: var(--s-aten-bd); background: var(--s-aten-bg); color: var(--s-aten-fg); }
.note--revi { border-color: var(--s-revi-bd); background: var(--s-revi-bg); color: var(--s-revi-fg); }
.note--bloq { border-color: var(--s-bloq-bd); background: var(--s-bloq-bg); color: var(--s-bloq-fg); }
.note + .note { margin-top: var(--sp-2); }
.note a { color: inherit; font-weight: 600; }
/* La marca no decora: es el canal que NO depende del color. */
.note--ok::before { content: "✓ "; font-weight: 700; }
.note--aten::before { content: "⚠ "; font-weight: 700; }
.note--bloq::before { content: "✕ "; font-weight: 700; }
.note--revi::before { content: "◆ "; font-weight: 700; }
.messages { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
/* Compatibilidad incremental con las plantillas anteriores a esta pasada.
`datos` y `cifras` ya expresaban dos patrones estables: pares dato/valor y
una franja de cifras reconciliables. Se incorporan al sistema común sin
obligar a reescribir docenas de pantallas ni mantener CSS por módulo. */
.datos {
display: grid; grid-template-columns: 13rem minmax(0, 1fr);
gap: 7px var(--sp-4); margin: 0; font-size: var(--fs);
}
.datos dt { color: var(--c-text-2); }
.datos dd { margin: 0; font-weight: 550; min-width: 0; }
.cifras {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--sp-2);
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.cifras li {
min-width: 0; padding: 10px 12px;
border: 1px solid var(--c-border-soft); border-radius: var(--radius);
background: var(--c-surface-alt); color: var(--c-text-2);
}
.cifras li b { color: var(--c-text); font-variant-numeric: tabular-nums; }
/* Algunas pantallas heredadas ya usaban el título canónico, pero todavía no
lo envolvían en `panel__head`. Conservarlas es seguro: la tarjeta les da la
misma cabecera sin duplicar una variante por módulo. */
.panel > .panel__title {
padding: 13px 18px; border-bottom: 1px solid var(--c-border-soft);
}
.panel > p.help, .panel > p.note { margin: 12px 18px; }
.panel__body > h2 {
margin: 0 0 var(--sp-3); font-size: var(--fs-md); font-weight: 650;
color: var(--c-text); letter-spacing: -.01em;
}
/* ------------------------------------------------------------ 11. TABLAS */
.table, .tabla {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: var(--fs); background: var(--c-surface);
}
.table th, .table td, .tabla th, .tabla td {
text-align: left; padding: 10px 14px;
border-bottom: 1px solid var(--c-border-soft);
vertical-align: top;
}
.table th, .tabla th {
background: var(--c-surface-alt);
font-size: var(--fs-xs); font-weight: 650;
text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-2);
white-space: nowrap;
border-bottom: 1px solid var(--c-border);
}
.table thead th, .tabla thead th { position: sticky; top: var(--topbar-h); z-index: 1; }
/* Dentro de una tarjeta la cabecera se pega **al borde de la tarjeta**, no bajo
la barra superior: la tarjeta ya está debajo de ella.
El selector es de DESCENDENCIA a propósito. Con `>` sólo acertaba a la tabla
que colgaba directamente de la tarjeta, así que una tabla dentro de un
`