/* ==========================================================================
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 */
/* La letra de la casa, guardada en el proyecto (D-806). Una sola fuente
variable cubre los pesos 300–900; el navegador que no la cargue sigue con
la del sistema. Licencia OFL en `static/fonts/OFL-source-sans-3.txt`. */
@font-face {
font-family: "Source Sans 3";
font-style: normal;
font-weight: 300 900;
font-display: swap;
src: url("../fonts/source-sans-3-latin.6e4bd172ce22.woff2") format("woff2");
}
:root {
/* Superficies y texto -------------------------------------------------- */
/* 2026-10-06 — primera prioridad de la propuesta de diseño (D-801): el
fondo deja el azul de ERP por un gris mineral con un punto de verde —el de
Gamma— y los bordes lo acompañan. Los grises de apoyo se oscurecen: el
texto de ayuda medía 3.85:1 sobre blanco, por debajo del 4.5:1 que hace
falta para leerlo sin esfuerzo. `tests/unit/test_contraste_de_la_hoja.py`
impide que vuelva a bajar.
El fondo va un punto más gris que las tarjetas, para que las blancas se
despeguen — Agustín, 22/sep/2026: *«está algo desabrido con tanto blanco;
tal vez fondo tantito gris, tarjetas sí blancas con color»*. Esa medida se
conserva; lo que cambia es el matiz. Hasta hoy el valor efectivo lo fijaba
una segunda regla `:root` al final de la sección 20; ahora vive aquí, una
sola vez. */
/* 2026-10-06 — **Matraz** (D-806): la identidad que Agustín eligió entre
tres. Papel cálido en vez de blanco frío, verde de Gamma como color de la
casa, y ningún azul de ERP. Un punto más gris el fondo que las tarjetas,
como pidió el 22/sep. */
--c-bg: #eceae0;
--c-surface: #fffdf7;
--c-surface-alt: #f6f4ec;
--c-surface-sunk: #ebe8dd;
--c-border: #e2ded2;
--c-border-strong: #cfc9b9;
--c-border-soft: #ece9df;
--c-text: #14201b;
--c-text-2: #3e4b45;
--c-text-3: #596a62;
/* Primario — el verde de Gamma, en dos tonos -------------------------- */
/* 2026-10-06 (D-806) — Agustín: *«me gustó la dirección A»*, y sí al verde
en los botones. El verde VIVO del matraz (`--c-gamma`) es el fondo del
botón principal, con texto oscuro encima: blanco sobre él no se lee
(2.4:1). El verde TINTA (`--c-accent`) es el de enlaces, iconos de acción
y «hecho»: 5.4:1 sobre blanco. El azul deja de ser el color de actuar y
queda sólo como franja informativa y serie de gráfica. */
--c-accent: #1a7340;
--c-accent-dark: #145c33;
--c-accent-soft: #e3f6ec;
--c-accent-line: #b9e4cb;
--c-sobre-gamma: #06281a;
/* 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: #1c7a44; --c-serie-1: #0e8f9c; --c-serie-2: #96660c;
--c-serie-3: #5b41ab; --c-serie-4: #2d6a9f; --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 ----------------------------------------------------------- */
/* D-806 — verde profundo de laboratorio, no azul marino. */
--c-nav-bg: #0d2b21;
--c-nav-bg-2: #143a2d;
--c-nav-text: #d2e6db;
--c-nav-text-2: #9cc0ae;
--c-nav-active: #1a4a38;
/* 2026-09-21 — **el verde del matraz de Gamma, muestreado del logotipo**
(`img/pqg-logo.png`: #2bb673 es su color dominante). Agustín, 21/sep/2026:
*«que se vea como tu empresa, no como un ERP»*. Hasta hoy la marca de la
sección activa era azul —el mismo azul de los enlaces y los botones— y el
verde de su logotipo **no aparecía en ninguna pantalla**.
El azul **no se retira**: sigue siendo el color de lo que se pulsa y de lo
que navega. El verde entra donde dice **identidad y «hecho»**, que es el
único sitio donde un color puede significar algo sin leerse. */
--c-gamma: #2bb673;
--c-nav-mark: #2bb673;
--c-nav-line: #1f5040;
/* Estados — el significado del color es el MISMO en toda PQG ----------- */
--s-info-bg: #ecebe3; --s-info-fg: #44506380; --s-info-bd: #d8d5c9;
--s-ok-bg: #e3f6ec; --s-ok-fg: #1c7a44; --s-ok-bd: #b9e4cb;
--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;
/* --- Las FRANJAS de color: la raya de una tarjeta, el canto de un panel ---
2026-09-22, Agustín viendo el Dashboard en su monitor: *«ese dorado
cámbialo por amarillo; a los amarillo, azul y verde dales tantita
transparencia»*.
**Son tokens aparte de los de estado, y tiene que ser así.** `--s-aten-fg`
es el color del TEXTO de «atención» y de su icono: un amarillo claro ahí
no se leería sobre blanco. Lo que cambia es la franja, que no lleva texto
encima y sólo tiene que distinguirse; y la transparencia la ablanda un
punto para que acompañe a la tarjeta en vez de gritar. */
--c-franja-acento: rgba(45, 106, 159, .8); /* azul informativo (D-806: ya no es «acción») */
--c-franja-ok: rgba(43, 182, 115, .78); /* verde de Gamma */
--c-franja-aten: rgba(242, 191, 15, .85); /* amarillo, ya no dorado */
--c-franja-bloq: #b03028; /* vencido: sin ablandar */
/* Tipografía ----------------------------------------------------------- */
/* 2026-10-06 (D-801) — un punto más grande en lo que se lee a diario: el
texto operativo pasa de 13 a 14 px y las ayudas de 12 a 13. Las tablas se
quedan en 13 (`--fs-sm`): son compactas por su tarea. Los campos siguen en
16 px en el teléfono, que es lo que impide el zoom de iOS al enfocar. */
/* D-806 — Source Sans 3, guardada en `static/fonts` (sin descargas de
terceros, como htmx). Tiene la x más baja que la letra del sistema, así
que cada medida sube un punto para leerse igual de grande: el texto
operativo a 15, las ayudas y tablas a 14. Agustín descartó la letra
condensada para títulos y cifras («muy ancha y alta»): van en la misma
Source Sans 3, en negrita. */
--fs-xs: 12px;
--fs-sm: 14px;
--fs: 15px;
--fs-md: 16px;
--fs-lg: 17px;
--fs-xl: 22px;
--fs-2xl: 28px;
--ff: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
--ff-num: "Source Sans 3", 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;
/* 2026-10-06 (D-801) — la sombra queda para lo que SE ELEVA: la ficha
acoplada, el cajón, un menú, una tarjeta al pasar el ratón. Las tarjetas
planas —panel, indicador, formulario, cabecera— van con su borde de 1 px
y sin sombra: la pantalla deja de parecer una colección de cajas iguales. */
--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: 72px;
}
/* Corrección del token de texto informativo (se escribe entero, sin alfa). */
:root { --s-info-fg: #43524a; }
/* --------------------------------------------- 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: 700; letter-spacing: -.015em; }
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; }
/* --- LA BARRA SE PUEDE ENCOGER (2026-09-21) -------------------------------
Agustín, 21/sep/2026: la aplicación se usa mucho en escritorio, y ahí la
barra son 236 px fijos delante de tablas de doce columnas. Encogerla a
iconos devuelve ese ancho al contenido sin perder un solo destino: los
nombres siguen ahí, en el `title` y para el lector de pantalla.
**Es CSS y un checkbox, sin JavaScript**: el mismo mecanismo que el menú
móvil ya usaba. El guion sólo recuerda la preferencia de cada quien.
Sólo aplica en pantallas anchas: en un teléfono la barra ya colapsa a
«Menú», y encogerla a iconos ahí sería resolver dos veces el mismo problema
con dos respuestas distintas. */
/* Texto sólo para lector de pantalla. Existía como `.dots__sr` para un caso
concreto; aquí se nombra de forma general porque ya lo usan tres sitios. */
.sr {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.nav-estrecha { position: absolute; opacity: 0; pointer-events: none; }
.nav__encoger {
display: none; cursor: pointer; border: 0; background: none;
color: var(--c-nav-text-2); padding: 4px; border-radius: var(--radius-sm);
align-self: flex-start;
}
.nav__encoger:hover { color: #fff; background: var(--c-nav-active); }
.nav__encoger:focus-visible { outline: 2px solid var(--c-nav-mark); outline-offset: 2px; }
@media (min-width: 981px) {
.nav__encoger { display: inline-flex; }
/* Encogida: sólo iconos. `--nav-w` se redefine en el propio `.app`, así que
el área de trabajo gana el ancho sin una sola regla más. */
.nav-estrecha:checked ~ .nav { --nav-w: 62px; width: 62px; flex-basis: 62px; padding-inline: 8px; }
.nav-estrecha:checked ~ .nav .nav__brand-logo,
.nav-estrecha:checked ~ .nav .nav__grupo,
.nav-estrecha:checked ~ .nav .nav__group,
.nav-estrecha:checked ~ .nav .nav__pie-texto,
.nav-estrecha:checked ~ .nav .nav__boton span,
.nav-estrecha:checked ~ .nav summary.nav__boton::after { display: none; }
.nav-estrecha:checked ~ .nav .nav__boton { justify-content: center; padding-inline: 0; }
.nav-estrecha:checked ~ .nav .nav__boton .ic { margin: 0; }
}
/* --- Barra lateral oscura ---------------------------------------------- */
/* La barra ocupa **la pantalla completa, siempre**, y sus tres piezas —marca,
navegación y pie— tienen altura independiente (§25, D-572).
Antes era una sola columna con `align-self: flex-start` y `max-height`, así
que su altura era **la de su contenido**: con dos o tres destinos —el caso
normal, no la excepción: casi nadie tiene las quince secciones— la barra
oscura terminaba a media pantalla, el pie quedaba flotando bajo el último
enlace y debajo asomaba el fondo claro del documento. Con la lista completa
pasaba lo contrario: el `scroll` se comía la barra entera, marca y pie
incluidos.
Nada aquí está calculado para un número concreto de elementos. */
.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;
/* D-880 — por encima de la barra superior (20): la lista emergente vive
dentro de la barra y sólo sube tan alto como ella. Debajo de los menús y
diálogos (60 y más). */
z-index: 30;
height: 100vh;
/* `dvh` donde exista: en un móvil la barra del navegador aparece y
desaparece, y `100vh` deja el pie fuera de la pantalla mientras está. */
height: 100dvh;
overflow: hidden;
}
/* La lista de destinos: **ocupa lo que necesita y ni un píxel más**, y es la
ÚNICA pieza que scrollea, sólo cuando de verdad no cabe. `min-height: 0` es
lo que permite que se encoja dentro del flex; sin él el `overflow` no llega
a activarse nunca y el pie se sale por abajo. */
.nav__scroll {
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-width: thin;
}
.nav__brand {
display: flex; align-items: center; justify-content: center;
/* No cede altura cuando la lista es larga: es lo primero que se ve. */
flex: 0 0 auto;
min-height: var(--topbar-h);
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);
}
/* D-880 — **áreas de trabajo con su lista emergente.** Agustín, 16/oct/2026:
*«quiero cero scroll»* y *«no está muy legible»*. Cada área es una fila
grande (letra de 15.5 px, icono de 20); su lista sale **encima de la
pantalla**, pegada a la barra, así que la barra mide siempre lo mismo. */
.nav .nav__boton {
display: flex; align-items: center; gap: 12px;
width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 2px;
border-radius: var(--radius-sm);
font-size: 15.5px; font-weight: 550; line-height: 1.2;
color: var(--c-nav-text); text-decoration: none;
list-style: none; cursor: pointer; user-select: none;
transition: background .12s ease, color .12s ease;
}
.nav .nav__boton .ic { width: 20px; height: 20px; flex: 0 0 20px; opacity: .85; }
.nav summary.nav__boton::-webkit-details-marker { display: none; }
.nav summary.nav__boton::after {
content: ""; margin-left: auto; width: 7px; height: 7px; flex: 0 0 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg); opacity: .6;
}
.nav .nav__boton:hover { background: var(--c-nav-bg-2); color: #fff; }
.nav .nav__boton:hover .ic { opacity: 1; }
.nav .nav__boton:focus-visible { outline: 2px solid var(--c-nav-mark); outline-offset: -2px; }
/* El área de la pantalla actual se marca igual que un enlace actual. */
.nav .nav__boton--actual,
.nav .nav__area[open] > .nav__boton {
background: var(--c-nav-active); color: #fff;
box-shadow: inset 3px 0 0 var(--c-nav-mark);
}
.nav .nav__boton--actual .ic,
.nav .nav__area[open] > .nav__boton .ic { color: var(--c-nav-mark); opacity: 1; }
.nav__fly { display: none; }
.nav__area[open] > .nav__fly {
display: block;
position: fixed; z-index: 55;
top: 0; bottom: 0; left: var(--nav-w);
width: 300px;
padding: 22px 14px;
background: var(--c-surface);
border-right: 1px solid var(--c-border-strong);
box-shadow: 10px 0 30px rgb(20 32 27 / .14);
overflow-y: auto; overscroll-behavior: contain;
animation: fly-entra .14s ease-out;
}
@keyframes fly-entra { from { opacity: 0; transform: translateX(-8px); } }
.nav__fly-titulo {
padding: 0 12px 14px; margin-bottom: 6px;
border-bottom: 1px solid var(--c-border);
font-size: 20px; font-weight: 650; color: var(--c-text);
}
.nav .nav__fly a {
min-height: 46px; padding: 11px 12px; gap: 12px;
font-size: 16px; color: var(--c-text);
}
.nav .nav__fly a .ic { width: 20px; height: 20px; flex-basis: 20px; color: var(--c-accent); opacity: 1; }
.nav .nav__fly a:hover { background: var(--c-surface-alt); color: var(--c-text); }
.nav .nav__fly a[aria-current="page"] {
background: var(--c-accent-soft); color: var(--c-accent-dark);
box-shadow: inset 3px 0 0 var(--c-accent);
}
.nav .nav__fly a[aria-current="page"] .ic { color: var(--c-accent); }
.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. **Siempre abajo, con dos destinos
igual que con quince** — `margin-top: auto` empuja, y como la barra mide toda
la pantalla, ese empuje ahora tiene contra qué apoyarse. `flex-shrink: 0`
para que no sea él quien ceda cuando la lista es larga. */
.nav__foot {
margin-top: auto; flex: 0 0 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; flex-wrap: wrap; gap: 10px 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;
}
/* Nombre y correo se recortan con puntos suspensivos en vez de partirse: el
pie mide **lo mismo** con cualquier nombre y cualquier correo, y eso es lo
que lo mantiene estable (§25). */
/* `flex-basis: 0` y no `auto`: con la base en el contenido, el nombre
completo empujaba el botón de salir al renglón siguiente antes de
encogerse. Así la columna toma lo que sobra y se recorta ella. */
.nav__who, .nav__who b {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav__who { flex: 1 1 0; }
.nav__who b { display: block; color: #fff; font-weight: 550; }
/* `Mi contraseña`, en su propio renglón y a todo el ancho de la barra. */
.nav__yo {
flex: 1 0 100%; margin-top: 8px;
color: var(--c-nav-text-2); font-size: var(--fs-sm);
}
.nav__yo:hover { color: #fff; }
.nav__foot form { margin: 0; flex: 0 0 auto; }
.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: nowrap;
position: sticky; top: 0; z-index: 20;
/* 2026-10-20 — la barra mide `--topbar-h` de verdad. El token decía 43 px y
la barra medía 67 (el botón `Atrás` mide 44): la cabecera fija de una
tabla, la ficha acoplada y la barra de selección se detenían 24 px por
debajo de donde empieza la barra, es decir, debajo de ella. Y la franja
blanca de la marca, en la barra lateral, terminaba 5 px más abajo que esta
barra: un escalón en la línea que cruza toda la pantalla. */
min-height: var(--topbar-h);
}
.topbar a { color: var(--c-text-2); text-decoration: none; }
/* 2026-09-25 — **la barra de arriba, en dos bloques.** `Atrás` y la miga a la
izquierda; buscar y la campana juntos a la derecha. El hueco lo abre este
`margin-left:auto` y **sólo éste**: antes lo ponían el buscador y la campana
por separado, y eso dejaba el buscador flotando a media barra.
`nowrap` + la miga recortable es lo que hace que en un teléfono la barra
siga siendo UNA franja: el título largo se corta con puntos suspensivos en
vez de empujar la campana a un segundo renglón. */
.topbar__fin { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.crumb {
min-width: 0; flex: 0 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* `Atrás` — D-715. Es un control, no un enlace de texto: caja propia, borde y
un blanco de 44 px de alto para que se pueda picar con el pulgar. */
.atras {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
min-height: 44px; padding: 0 12px; margin-right: var(--sp-2);
border: 1px solid var(--c-border); border-radius: var(--radius);
background: var(--c-surface); font-size: var(--fs-sm); font-weight: 550;
transition: border-color .12s ease, color .12s ease;
}
.atras .ic { transform: rotate(180deg); }
.atras:hover { border-color: var(--c-accent-line); color: var(--c-accent); text-decoration: none; }
/* El calendario de cupo — D-716. Botones grandes, cómodos para el pulgar: la
fecha se pica, no se teclea. */
.cupo {
display: grid; gap: 6px; margin: var(--sp-2) 0;
grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}
.cupo__dia {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
min-height: 62px; padding: 8px 10px;
border: 1px solid var(--c-border); border-radius: var(--radius);
background: var(--c-surface); color: var(--c-text);
font: inherit; text-align: left; cursor: pointer;
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cupo__dia:hover:not(:disabled) {
border-color: var(--c-accent-line); box-shadow: var(--shadow); transform: translateY(-1px);
}
.cupo__dia--on { border-color: var(--c-accent); box-shadow: var(--shadow); }
.cupo__dia--no { background: var(--c-surface-sunk); color: var(--c-text-2); cursor: not-allowed; }
.cupo__dow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-2); }
.cupo__num { font-size: var(--fs-lg); font-weight: 650; line-height: 1; }
.cupo__kg { font-size: var(--fs-xs); font-weight: 550; color: var(--s-ok-fg); }
.cupo__kg--no { color: var(--c-text-2); font-weight: 500; display: flex; align-items: center; gap: 3px; }
.cupo__kg--no .ic { width: 12px; height: 12px; }
/* Escribir para encontrar, en los desplegables largos — D-740, sobre D-730.
Era una caja de texto ENCIMA del desplegable: dos cajas, y la lista de
resultados escondida dentro de un `select` cerrado. Ahora es **una** caja con
su lista debajo, y el `select` original se queda en el formulario —es el que
se envía— apartado de la vista en cuanto `filtrar.js` marca el envoltorio.
Sin JavaScript no hay marca, así que el desplegable se ve como siempre. */
.combo { position: relative; }
.combo--armado > select {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); border: 0;
}
.combo__campo {
display: block; width: 100%;
padding: 10px 12px; min-height: 44px;
border: 1px solid var(--c-border); border-radius: var(--radius);
background: var(--c-surface); color: var(--c-text);
/* 16 px: por debajo de eso, iOS hace zoom al enfocar. */
font: inherit; font-size: 16px;
}
.combo__campo:focus { border-color: var(--c-accent-line); outline: none; }
.combo__lista {
position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 2px);
margin: 0; padding: 4px; list-style: none;
max-height: 46vh; overflow-y: auto;
background: var(--c-surface); color: var(--c-text);
border: 1px solid var(--c-border); border-radius: var(--radius);
box-shadow: 0 10px 26px rgb(0 0 0 / .18);
}
.combo__lista[hidden] { display: none; }
.combo__op {
padding: 11px 12px; min-height: 44px; border-radius: var(--radius);
font-size: 16px; line-height: 1.3; cursor: pointer;
}
.combo__op--on, .combo__op:hover { background: var(--c-accent-soft); }
.combo__nada { padding: 11px 12px; color: var(--c-text-3); font-size: 15px; }
/* El margen que se está ofreciendo — D-741. Rojo por debajo del 12 %, ámbar
hasta el 18 % y verde desde el 18 %, que es el objetivo de margen bruto que
el negocio confirmó el 2026-08-19. **No bloquea nada**: informa. */
.margen { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.margen__cifra { font-size: var(--fs-lg); font-weight: 700; line-height: 1.1; }
.margen__pie { font-size: 12px; color: var(--c-text-3); }
.margen--bajo .margen__cifra { color: var(--s-bloq-fg); }
.margen--medio .margen__cifra { color: var(--s-aten-fg); }
.margen--bueno .margen__cifra { color: var(--s-ok-fg); }
@media (max-width: 720px) {
/* En un teléfono `Atrás` es sólo la flecha, y la barra se aprieta: caben la
flecha, dónde estoy, buscar y la campana en UNA franja. */
:root { --topbar-h: 60px; }
.topbar { padding: 8px 12px; gap: 6px; }
.atras { padding: 0 10px; margin-right: 4px; }
.atras span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.topbar__fin { gap: 4px; }
.campana { width: 34px; height: 34px; }
}
.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; }
/* D-627 — lo que falta para preparar, un renglón por requisito. Antes era un
párrafo con los tres pegados y no se leía. */
.faltantes { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); }
.faltantes li { margin-bottom: var(--sp-2); }
/* D-621 — la navegación por mes del panel. Una fila, con la flecha atrás, el
mes que se está mirando y la flecha adelante cuando ese mes ya pasó. */
.mes-nav {
display: flex; align-items: center; gap: var(--sp-2);
flex-wrap: wrap; margin: 0 0 var(--sp-3);
}
/* La misma punta de flecha, girada: no se añade un icono al sprite para
dibujar el mismo trazo al revés. */
.icon--flip { transform: rotate(180deg); }
.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; }
/* 2026-10-05 — **en el teléfono las acciones de la ficha no se salen.**
La revisión de uso del 4/oct: en la ficha del Cliente a 390 px, `Inactivar
Cliente` quedaba fuera de la pantalla y la página no daba arrastre lateral
para alcanzarlo — la acción existía y no se podía pulsar.
La causa era `flex-shrink: 0` de arriba. Es correcto en escritorio: evita que
el título empuje los botones y los parta. Pero con el ancho de un teléfono
obliga al bloque a conservar su ancho de contenido —los tres botones en una
fila—, y lo que sobra se va por el borde derecho de un `.screen__head` que ya
no puede desplazarse.
Aquí el bloque ocupa el ancho entero y sus botones se reparten en renglones:
es lo que `.screen__actions` ya hacía con `flex-wrap`, sólo que no podía.
**No se esconde ni se mueve ninguna acción**, y los Permisos que cada una
exige siguen siendo los mismos. */
@media (max-width: 720px) {
.screen__actions--admin {
width: 100%; flex-shrink: 1; min-width: 0; justify-content: flex-start;
}
/* Un botón por renglón cabe entero y se pulsa con el pulgar; la regla de la
casa pide 44 px de alto, que `.btn` ya da en pantalla táctil. */
.screen__actions--admin > form { flex: 1 1 auto; }
.screen__actions--admin > form > .btn { width: 100%; justify-content: center; }
}
/* 2026-09-25 — **los botones de la cabecera van juntos, siempre.** Agustín, al
ver Consultas: *«el botón de Nueva Consulta y el de Material nuevo están mal
acomodados»*.
La causa era del molde, no de esa pantalla: `.screen__head` es un `flex` con
`space-between`, así que reparte el hueco entre TODOS sus hijos. Con el
título y UN bloque de acciones sale bien; con el título y DOS —que es lo que
pasa en cuanto una pantalla ofrece una segunda acción— el primer botón queda
flotando a media cabecera.
El `margin-right:auto` sobre el primer hijo pone el hueco **una sola vez**,
justo después del título: los bloques de acciones que vengan detrás, sean
uno o tres, se agrupan pegados a la derecha. Se corrige aquí y no pantalla
por pantalla para que la siguiente que añada un botón nazca bien. */
.screen__head > :first-child { margin-right: auto; }
/* ------------------------------------------------------------ 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);
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: inset 3px 0 0 var(--c-franja-aten); }
.panel--bloq { box-shadow: inset 3px 0 0 var(--s-bloq-fg); }
.panel--ok { box-shadow: inset 3px 0 0 var(--c-franja-ok); }
.panel--acc { box-shadow: inset 3px 0 0 var(--c-franja-acento); }
/* 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.25fr) minmax(24rem, 1fr);
/* **`stretch`, no `start`** — 2026-09-22, Agustín viendo el Dashboard en su
monitor: *«arregla esos dos espacios en pantalla completa»*.
Con `start` cada tarjeta medía lo que pedía su contenido, y en pantalla
ancha la columna corta dejaba un hueco del tamaño de media pantalla al
lado de la larga. Estiradas, las dos acaban a la misma altura.
**No vuelve el scroll interno**, que era lo que `start` evitaba y sí era
un defecto de uso: la tarjeta crece, su contenido se queda arriba y no se
fija ninguna altura ni ningún `overflow`. */
align-items: stretch;
}
.dashboard-priority > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
.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;
}
/* --- EL DASHBOARD CON CUERPO (2026-09-21 · D-693) --------------------------
Agustín, al ver el Dashboard de D-691 en producción: «se le quitó demasiado,
quedó muy vacío; sí me gusta entrar y poder ver ciertas gráficas y acceso e
información general útil». Vuelven la silueta de Ventas con su margen, la
semana de Logística, Cuentas como dos barras por moneda, lo que viene de
Proveedores y seis accesos. Lo que no vuelve: las 26 tarjetas de antes. */
/* La primera fila: la gráfica a la izquierda y «Lo urgente hoy» a la derecha.
Si sólo se produce uno de los dos —sin casilla de Ventas, o sin nada
urgente—, ocupa la fila entera en vez de dejar media pantalla vacía. */
.dashboard-priority > .panel:only-child { grid-column: 1 / -1; }
/* La línea de arriba de la gráfica: el mes en curso con su variación, para
que la última barra —siempre la más corta, porque el mes no termina— se
lea con su contexto y no como una caída. */
.chart__lead {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
margin: 0 0 4px; font-size: var(--fs-sm); color: var(--c-text-2);
}
.chart__lead > b { font-size: var(--fs-xl); font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.chart__lead-label { text-transform: uppercase; letter-spacing: .07em; font-size: var(--fs-xs); font-weight: 600; }
.chart__lead-margen { margin-left: auto; }
.chart__lead-margen b { color: var(--c-text); font-variant-numeric: tabular-nums; }
.chart--tablero .chart__cols { height: 176px; }
/* En el tablero los meses pasados no se apagan a gris: son la misma serie,
en el mismo azul y más tenue; el mes en curso, a tono entero. */
.chart--tablero .chart__col--off .chart__bar { background: var(--c-accent); opacity: .42; }
.chart--tablero .chart__col--off:hover .chart__bar { opacity: .7; }
/* El margen de cada mes, debajo de su rótulo: una segunda fila alineada con
las columnas. Es texto, no color, así que se lee igual en cualquier tono. */
.chart__labels--sub { padding-top: 2px; }
.chart__labels--sub span { color: var(--c-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 1200px) {
/* Seis meses caben siempre: la regla de «uno de cada dos» es para doce. */
.chart--tablero .chart__labels span:nth-child(even) { visibility: visible; }
}
/* La leyenda del semáforo, separada de los renglones de la semana. */
.dashboard-week .legend { margin-top: var(--sp-2); }
/* Abajo y a ancho completo, la gráfica gana alto: las barras se leen mejor y
el panel no queda como una franja aplastada de lado a lado. */
.dashboard-chart--ancha .chart--tablero .chart__cols { height: 208px; }
/* Cuentas: por cada moneda, «Por cobrar» y «Por pagar» como dos barras sobre
la misma escala, con el importe a la derecha. Cada barra es un enlace a su
cartera. La escala es la mayor de las dos cifras de ESA moneda; las monedas
nunca comparten escala ni se suman. */
.saldos { display: flex; flex-direction: column; gap: var(--sp-3); }
.saldos__moneda { display: flex; flex-direction: column; gap: 5px; }
.saldos__titulo {
font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase;
letter-spacing: .07em; color: var(--c-text-2);
}
.saldos__fila {
display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto;
align-items: center; gap: 10px; text-decoration: none; color: inherit;
font-size: var(--fs-sm); border-radius: var(--radius-sm); padding: 2px 0;
}
.saldos__fila:hover { color: inherit; }
.saldos__fila:hover .saldos__monto { text-decoration: underline; }
.saldos__rotulo { color: var(--c-text-2); }
.saldos__barra {
display: block; height: 12px; border-radius: var(--radius-pill);
background: var(--c-surface-sunk); overflow: hidden;
}
.saldos__barra i { display: block; height: 100%; border-radius: var(--radius-pill); min-width: 2px; }
/* Las dos barras usan las FRANJAS, no los colores de texto: es la misma
familia de la tarjeta y con su mismo punto de transparencia. El «Por pagar»
era el dorado que Agustín señaló el 22/sep — ahora amarillo. */
.saldos__barra--cobrar i { background: var(--c-franja-acento); }
.saldos__barra--pagar i { background: var(--c-franja-aten); }
.saldos__monto { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.saldos__nota { font-size: var(--fs-xs); color: var(--c-text-3); cursor: help; }
/* 2026-09-25 — **el vencido, del mismo rango que las barras de arriba.**
Agustín: *«el cuadro amarillo parece alerta temporal»*. El fondo ámbar y el
icono de reloj son el lenguaje de *«esto acaba de pasar»*, y el vencido no es
eso: es una cifra permanente de la cartera. Lo separa una línea, no un color,
y el importe se lee con el mismo peso y la misma tipografía tabular que los
de las barras. El ámbar se queda **sólo en la nota de los días**, que es lo
único que de verdad empeora con el tiempo. */
.saldos__vencido {
display: flex; flex-direction: column; gap: 2px; margin: 0;
padding-top: var(--sp-3); border-top: 1px solid var(--c-border-soft);
}
.saldos__vencido-et {
font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase;
letter-spacing: .07em; color: var(--c-text-2);
}
.saldos__vencido-cifras {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
font-size: var(--fs-md);
}
.saldos__vencido-cifras b { font-weight: 650; color: var(--c-text); font-variant-numeric: tabular-nums; }
.saldos__vencido-sep { color: var(--c-text-3); }
.saldos__vencido-pie { font-size: var(--fs-xs); color: var(--s-aten-fg); font-weight: 600; }
/* La fila de abajo: Cuentas, lo que viene de Proveedores y los accesos.
Mismo criterio que arriba: las tres acaban a la misma altura, porque la de
los accesos es mucho más corta que la de Cuentas y dejaba el otro hueco que
Agustín señaló. */
.dashboard-bottom { align-items: stretch; }
.dashboard-bottom > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
/* D-808 — al subir los accesos arriba, el bloque de abajo pasó de tres paneles a
dos; quien no ve Cuentas se quedaba con «Lo que viene de Proveedores» a media
pantalla y un hueco al lado. Solo, ocupa el ancho entero. */
.dashboard-bottom > .panel:only-child { grid-column: 1 / -1; }
/* Seis accesos en dos columnas, cada uno con su icono a la izquierda. */
.quick--tablero {
grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; gap: var(--sp-2);
}
.quick--tablero a {
display: grid; grid-template-columns: 30px minmax(0, 1fr);
align-items: center; min-height: 58px; padding: 8px 10px;
}
/* -------------------------------- 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);
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);
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);
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-franja-acento); }
.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(--c-franja-aten); }
.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);
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); }
/* La tarjeta que AGREGA una tarjeta — D-714. Es la misma caja, con el borde
punteado que dice «aquí todavía no hay nada, pero puede haberlo»: así se lee
como parte de la fila y no como un botón suelto encima de ella. */
.card--nuevo {
border-style: dashed; box-shadow: none; text-decoration: none; color: var(--c-text);
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.card--nuevo:hover {
border-color: var(--c-accent-line); border-style: solid;
box-shadow: var(--shadow); transform: translateY(-1px); color: var(--c-text);
}
/* --- Los DOCUMENTOS de la empresa (2026-09-25, sobre D-714) ---------------
Agustín: *«se puede hacer más bonita toda esta sección, sólo más claro qué
documento es y los botones relevantes»*.
Usaban `.card`, cuyo título es un rótulo en versalitas de 11 px pensado para
ir ENCIMA de una cifra grande —`.card__value`—. Aquí la cifra grande era la
vigencia, o sea el dato que sobraba, y el nombre del documento —lo único que
se viene a buscar— quedaba en letra chica. Molde propio: el nombre es el
titular, la tarjeta entera se puede picar y los botones van abajo, con
`Descargar` de primero. */
.docs {
display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.doc {
background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
/* Sin archivo la tarjeta no grita: un borde ámbar y su distintivo bastan. */
.doc--falta { border-color: var(--s-aten-bd); }
.doc__head { display: flex; align-items: flex-start; gap: 11px; }
.doc__head .icobox { flex: 0 0 auto; width: 34px; height: 34px; flex-basis: 34px; }
.doc__id { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
/* `.panel__body h3` pinta los subtítulos de sección en versalitas grises de
11 px, y gana por especificidad: el nombre del documento salía como un
rótulo en vez de como el titular de la tarjeta. Se declara con la clase de
la tarjeta delante para que este molde mande dentro de él. */
.doc .doc__titulo {
margin: 0; padding: 0; border: 0;
font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.01em;
text-transform: none; color: var(--c-text); line-height: 1.25;
}
.doc__pie { margin: 0; margin-top: auto; font-size: var(--fs-sm); color: var(--c-text-3); }
.doc__botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.doc--nuevo {
border-style: dashed; box-shadow: none; text-decoration: none; color: var(--c-text);
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.doc--nuevo:hover {
border-color: var(--c-accent-line); border-style: solid;
box-shadow: var(--shadow); transform: translateY(-1px); color: var(--c-text);
}
.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; }
/* D-808 — la franja de «lo que más haces», arriba del Panel general y a todo
lo ancho: una sola fila cuando caben los seis, y se parte sola cuando no. */
.accesos { padding: var(--sp-3); }
.quick--franja {
grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 0; gap: var(--sp-2);
}
.quick--franja a {
flex-direction: row; align-items: center; min-height: 52px; padding: 9px 12px;
}
/* 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; }
/* D-806 — el botón principal es del verde vivo de Gamma, con texto oscuro:
el blanco sobre ese verde no se lee. Al pasar el ratón se aclara, no se
oscurece, para que siga siendo el mismo verde. */
.btn--primary {
background: var(--c-gamma); border-color: var(--c-gamma); color: var(--c-sobre-gamma);
box-shadow: 0 1px 2px rgba(13, 43, 33, .14);
}
.btn--primary:hover { background: #3cc482; border-color: #3cc482; color: var(--c-sobre-gamma); }
.btn--primary .ic { color: var(--c-sobre-gamma); }
.btn--secondary {
background: var(--c-accent-soft); border-color: var(--c-accent-line);
color: var(--c-accent-dark);
}
.btn--secondary:hover { background: #d4f0e0; 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; }
/* D-806 — **la burbuja del matraz.** Cuando el servidor confirma algo, del
aviso verde suben tres burbujas y se apagan en menos de un segundo. No
bloquean nada, no mueven el texto, y con «Reducir movimiento» no existen.
El marcado (``) lo pone `base.html` sólo en el aviso de
éxito. */
.messages .note { position: relative; }
.burbujas, .burbujas::before, .burbujas::after {
position: absolute; display: block; border-radius: 50%;
background: var(--c-gamma); opacity: 0; pointer-events: none;
}
.burbujas { left: 12px; bottom: 6px; width: 9px; height: 9px; }
.burbujas::before { content: ""; left: 13px; bottom: 3px; width: 6px; height: 6px; }
.burbujas::after { content: ""; left: -7px; bottom: 5px; width: 5px; height: 5px; }
@media (prefers-reduced-motion: no-preference) {
.burbujas { animation: burbuja .9s ease-out .1s 1 both; }
.burbujas::before { animation: burbuja .9s ease-out .3s 1 both; }
.burbujas::after { animation: burbuja .9s ease-out .45s 1 both; }
}
@keyframes burbuja {
0% { transform: translateY(0) scale(1); opacity: .95; }
100% { transform: translateY(-56px) scale(.5); opacity: 0; }
}
.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;
/* 13 px: la tabla es compacta por su tarea (D-801). */
font-size: var(--fs-sm); 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);
/* **El encabezado se parte en dos líneas antes que cortarse** — D-707.
Con `nowrap`, en `Inventario → Existencias` se leía «COMPROMETI…» y
«BLOQUEAD…»: la tabla tiene nueve columnas y la cabecera no cabía. Un
rótulo cortado no se puede leer, y dos líneas de cabecera cuestan una vez
por tabla. Las celdas de datos **no cambian**: lo que no se debe partir
sigue declarándolo `.nowrap` o `.mid`, columna por columna. */
white-space: normal; overflow-wrap: break-word;
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
`