` no entiende `var(--x)` —hay que resolverlo— y un hex escrito en el
JSX sería un segundo lugar donde vive un color del sistema. Los lee
`modules/informes/tokens.js`. */
:root{--globo-esfera-1:#FFFFFF; --globo-esfera-2:#F2F3F5; --globo-esfera-3:#E4E6EA}
/* El globo. `aspect-ratio` y no alto fijo: tiene que ser cuadrado o la esfera
sale ovalada al proyectar. */
/* ⚠️ El tope baja de 430 a 310 px (2026-09-16). Era el bloque más alto de
Informes y, al ser el más alto de su fila, estiraba al tile de al lado: «% de
la carga exportada por país» tiene ocho renglones y quedaba con medio tile
vacío. A 310 la esfera se sigue leyendo y la fila mide lo que necesita. */
.globe-box{position:relative;width:100%;aspect-ratio:1;min-height:260px;
max-height:310px;margin:0 auto}
.globe-box canvas{width:100%;height:100%;display:block}
.globe-toast{position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(6px);
background:var(--panel);border:1px solid var(--borde);border-radius:999px;
padding:6px 14px;font-size:12.5px;white-space:nowrap;opacity:0;
transition:opacity .25s ease, transform .25s ease;pointer-events:none;
box-shadow:0 4px 14px rgba(20,22,28,.10)}
.globe-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.globe-ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:10px;font-size:12.5px;color:var(--tenue)}
.globe-ctl .cuenta b{color:var(--texto);font-variant-numeric:tabular-nums}
.rutas-origin-tag{margin-left:auto}
/* La puerta de entrada: nacional, exportación o ambas. Cubre el contenido
porque la elección cambia TODO el informe: dejarlo ver detrás invitaría a
leer números que están por cambiar. */
.puerta{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
padding:24px;background:rgba(244,245,249,.86);backdrop-filter:blur(7px)}
.puerta-caja{background:var(--panel);border-radius:20px;padding:30px 32px;
max-width:660px;width:100%;text-align:center;
box-shadow:0 18px 50px rgba(20,22,28,.16)}
.puerta-caja h2{margin:0 0 5px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.puerta-caja > p{margin:0 0 20px;color:var(--tenue);font-size:13px}
.puerta-ops{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.puerta .op{background:var(--fondo);border:1.5px solid var(--borde);
border-radius:14px;padding:16px 14px;cursor:pointer;font:inherit;color:inherit;
display:flex;flex-direction:column;gap:2px;transition:.15s ease}
.puerta .op:hover{border-color:var(--vino);background:var(--vino-tinte)}
.puerta .op:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
.puerta .op b{font-size:14.5px}
.puerta .op span{font-size:11.5px;color:var(--tenue)}
/* El MONTO en el botón no es decoración: es la razón de elegir. Sin él la
pregunta es a ciegas y uno aprende a apretar siempre lo mismo. */
.puerta .op em{font-style:normal;font-size:19px;font-weight:800;color:var(--vino);
font-variant-numeric:tabular-nums;margin-top:6px}
.tema-bento .puerta .op em{color:var(--a-lila)}
@media (max-width:760px){ .puerta-ops{grid-template-columns:1fr} }
/* Las tarjetas de grupo, con su foto. Son BOTONES: al hacer clic filtran el
informe por ese grupo, igual que el anillo. */
/* Los tres grupos botánicos son una fila más del mosaico, así que llevan su
mismo `gap` y su mismo margen: con 11 y 4 se leían como un bloque ajeno
metido entre los tiles, que es de lo que sale la sensación de desorden. */
.gcards{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);
margin-bottom:14px}
.gcard{border:0;border-radius:var(--r-tile,16px);padding:0;display:flex;
align-items:stretch;overflow:hidden;cursor:pointer;font:inherit;text-align:left;
transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring)}
.gcard:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,22,28,.10)}
.gcard:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.gfoto{width:84px;flex-shrink:0;background-size:cover;background-position:center}
.gtxt{display:flex;flex-direction:column;gap:1px;padding:14px 16px;min-width:0}
.gl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
opacity:.85}
.gv{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
font-variant-numeric:tabular-nums}
.gs{font-size:11px;opacity:.75}
@media (max-width:760px){ .gcards{grid-template-columns:1fr} }
/* Estacionalidad: mes contra grupo, el color dice cuánto. */
/* La grilla crece hasta llenar su tile: ocupaba 75 px de los 210 que la fila le
da (el tile se estira al más alto de los tres, que es el anillo), y esos 135
px de blanco abajo eran de lo que más se leía como «desordenado». Ahora las
celdas se reparten el alto disponible en vez de dejarlo muerto. */
.heat{display:flex;flex-direction:column;gap:4px;flex:1;justify-content:center}
/* ⚠️ `minmax(0,1fr)` y no `1fr`: una columna `1fr` no baja del ancho de su
contenido, así que en un celular de 360 px los doce meses no podían encogerse
y «Dic» sacaba la página 11 px de lado — el único desborde que quedaba en las
34 pantallas (medido el 2026-09-16 a 1280/900/768/600/360). */
.heat-fila{display:grid;grid-template-columns:104px repeat(var(--cols),minmax(0,1fr));
gap:4px;align-items:center}
.heat-fila:not(:first-child){flex:1;min-height:22px}
.heat-fila:not(:first-child) .heat-celda{height:100%;min-height:22px}
.heat-nom{font-size:10.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.heat-mes{font-size:9.5px;color:var(--tenue);text-align:center;
overflow:hidden;white-space:nowrap}
/* En un celular la columna de los nombres cede ancho para que los meses entren
enteros; es el nombre el que puede abreviarse, no el eje. */
@media (max-width:560px){
.heat-fila{grid-template-columns:68px repeat(var(--cols),minmax(0,1fr));gap:3px}
.heat-mes{font-size:9px}
}
.heat-celda{height:22px;border-radius:4px;opacity:var(--o)}
/* Variedades partidas por grupo. */
.vgs{display:flex;flex-direction:column;gap:14px}
.vg-t{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
display:block;margin-bottom:6px}
.vg-fila{display:grid;grid-template-columns:1fr 90px auto;gap:10px;align-items:center;
margin-bottom:5px}
.vg-n{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-p{height:10px}
.vg-b{display:block;height:10px;border-radius:3px}
.vg-v{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
white-space:nowrap}
/* Un número solo, grande, como respuesta de una tarjeta. */
.dato-grande{display:block;font-size:30px;font-weight:800;letter-spacing:-.025em;
line-height:1.1;font-variant-numeric:tabular-nums;margin-bottom:2px}
.lista-simple{list-style:none;margin:10px 0 0;padding:0;display:flex;
flex-direction:column;gap:5px}
.lista-simple li{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;
color:var(--tenue);border-bottom:1px dotted var(--borde);padding-bottom:4px}
.lista-simple li b{color:var(--texto);font-variant-numeric:tabular-nums}
/* El aviso del hueco sin vendedor. Solo aparece cuando el hueco es grande —
en el informe nacional es el 96 % y sin decirlo el ranking parece que sobra. */
.aviso-hueco{background:var(--vino-tinte);color:var(--vino);border-radius:10px;
padding:9px 12px;font-size:12px;margin-top:10px}
.tema-bento .aviso-hueco{background:var(--t-lila);color:var(--a-lila)}
/* Impresión: el informe en PDF sale sin sidebar ni controles. Es el «PDF» de la
cabecera, que es el diálogo del navegador — no hay un generador aparte que
pueda quedar desincronizado de lo que se está viendo en pantalla. */
@media print{
.sidebar,.barra-mod,.filtrera,.click-hint,.acts,.globe-ctl,
.puerta{display:none!important}
body{padding-left:0}
.content{max-width:100%;padding:0}
.tile{break-inside:avoid;page-break-inside:avoid}
}
/* ── Administración en React (2026-08-31) ────────────────────── */
/* Las clases que reemplazan al markup en línea de las 5 plantillas Jinja que se
borraron. Estaban como `style="..."` dentro del HTML; acá quedan una vez.
`.proc-*` NO se tocó: la pantalla de procesos automáticos las sigue usando. */
/* Cabecera de un registro (un error de Monitoreo, una eliminación auditada):
el badge, la fecha y —si va— el botón de acción, en una línea que envuelve. */
.reg-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reg-meta{color:var(--tenue);font-size:12px}
.reg-mensaje{margin-top:8px;font-weight:600}
.reg-recom{margin-top:8px;background:var(--vino-tinte);padding:8px 12px;
border-radius:8px;font-size:13px}
/* La traza y el snapshot: texto técnico, siempre sobre fondo oscuro para que se
lea como lo que es —una salida de consola— y no como parte de la interfaz. */
.traza{white-space:pre-wrap;font-size:11px;background:#1E1E24;color:#E4E4E7;
padding:12px;border-radius:8px;overflow:auto;max-height:260px;margin-top:8px;
font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
/* Un registro ya atendido sigue visible pero deja de pedir atención. */
.apagado{opacity:.55}
/* Monitoreo en estilo compacto (2026-10-05): cada proceso es un punto de color
con su nombre, y el mensaje del error es el dato de su renglón. */
.proc-punto{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
white-space:nowrap}
.proc-punto::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
background:var(--ok)}
.proc-punto.malo::before{background:var(--peligro)}
.proc-punto-estado{font-weight:500;font-size:12px;color:var(--tenue)}
.proc-punto.malo .proc-punto-estado{color:var(--peligro-texto,var(--peligro));font-weight:700}
.reg-mensaje-fila{font-weight:600}
/* Permisos por módulo (formulario de usuario). `fieldset` sin borde propio: el
borde lo lleva cada grupo, que es la unidad que se lee. */
/* ⚠️ En columnas y no apilados (2026-09-16). Los nueve grupos de permisos en una
sola columna eran ~700 px: había que scrollear para ver si un usuario tenía
Nómina, y la mitad derecha del formulario estaba vacía. `auto-fill` y no
`auto-fit` a propósito: con `auto-fit`, un grupo solo en la última fila se
estira a todo el ancho y se ve como otra cosa (la misma lección que dejaron
los KPI el 2026-09-16). */
.perms{border:0;padding:0;margin:0;display:grid;gap:12px;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.perms.apagado{pointer-events:none}
.perm-group{border:1px solid var(--borde);border-radius:var(--r-control,10px);
padding:10px 14px}
.perm-nombre{font-weight:600;margin-bottom:2px}
.perm-items{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:8px}
.perm-check{display:flex;gap:7px;align-items:center;font-weight:400;cursor:pointer}
.tema-bento .perm-group{border-color:var(--linea-control)}
/* ── Tarjetas de navegación (`ui/Tarjeta.jsx`) ────────────────── */
/* La portada de Ajustes: una tarjeta por catálogo y por pantalla del módulo.
Volvieron el 2026-08-31 a pedido del usuario («cada catálogo con su propia
tarjeta como era antes, se ve más bonito»). NO son las `.setcard` viejas: esas
eran de ancho fijo (200px) y del sistema de color anterior, donde `--vino` era
el rojo. Estas usan los tokens del tema y una rejilla que se acomoda sola.
`auto-fill` y no `auto-fit`: con 11 catálogos y una ventana ancha, `auto-fit`
estiraría las últimas dos tarjetas de la fila hasta el ridículo. */
/* El rótulo de cada grupo de tarjetas. Chico a propósito: separa, no compite
con el h1 de la pantalla. */
/* Separador de sección. `margin-top` para que se despegue del bloque anterior:
sin él, «Composición de la venta» quedaba pegado a la tabla de arriba y se
leía como su pie en vez de como el título de lo que sigue. */
.tarjetas-tt{font-size:15px;font-weight:700;margin:22px 0 12px;letter-spacing:-.01em}
.tarjetas-tt:first-child{margin-top:0}
.tarjetas-tt + .tarjetas{margin-top:0}
.tarjetas{display:grid;gap:14px;margin-bottom:26px;
grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
.tarjeta{display:flex;flex-direction:column;gap:2px;text-decoration:none;
background:var(--panel);border:1px solid var(--borde);border-radius:var(--r-control,12px);
padding:16px 18px;color:var(--texto);
transition:transform .3s var(--ease-spring), border-color .2s ease,
box-shadow .3s var(--ease-spring)}
.tarjeta:hover{transform:translateY(-3px);border-color:var(--vino);
box-shadow:0 8px 20px rgba(34,38,46,.10)}
.tarjeta:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
/* ⚠️ `margin-bottom:auto`: el icono se queda arriba y el nombre se apoya en el
piso de la tarjeta, así los nombres de una fila quedan todos a la misma
altura aunque uno ocupe dos renglones («Precios por cliente y variedad»
junto a «Países»). Antes el texto flotaba a distinta altura en cada una
(2026-09-16). */
.tarjeta-ico{font-size:24px;line-height:1.2;margin-bottom:auto;padding-bottom:6px}
/* `block` y no `flex`: con flex, un título de dos renglones («Precios por
cliente y variedad», «Categorías de ajuste (Cartera)») empujaba el conteo al
borde derecho de la tarjeta, lejos del texto. Así lo sigue como una palabra
más. */
.tarjeta-tt{font-weight:700;font-size:14.5px}
/* El conteo no compite con el nombre: es el dato secundario de la tarjeta. */
.tarjeta-n{display:inline-block;margin-left:7px;vertical-align:1px;
font-size:12px;font-weight:600;color:var(--tenue);
background:var(--fondo);border-radius:999px;padding:1px 8px;
font-variant-numeric:tabular-nums}
.tarjeta-ds{color:var(--tenue);font-size:12.5px;margin-top:2px}
/* Tarjetas compactas (``, Ajustes, 2026-10-05): el icono
a la izquierda ocupando las dos líneas, y a su lado el nombre con el conteo
y, si la tarjeta lo trae, su explicación en una sola línea. */
.tarjetas-compactas{gap:10px;margin-bottom:18px;
grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tarjetas-compactas .tarjeta{display:grid;grid-template-columns:24px minmax(0,1fr);
column-gap:11px;align-items:center;align-content:center;min-height:50px;padding:10px 16px}
.tarjetas-compactas .tarjeta-ico{grid-row:1 / span 2;font-size:19px;margin:0;padding:0;
text-align:center}
.tarjetas-compactas .tarjeta-tt{font-size:14px;line-height:1.25}
.tarjetas-compactas .tarjeta-ds{grid-column:2;margin-top:1px;font-size:12px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tarjetas-compactas + .tarjetas-tt,.tarjetas-tt:has(+ .tarjetas-compactas){margin-top:6px;margin-bottom:9px}
.tarjetas-tt:first-child:has(+ .tarjetas-compactas){margin-top:0}
.tema-bento .tarjeta{border:none;border-radius:var(--r-tile)}
.tema-bento .tarjeta:hover{background:var(--t-lila)}
.tema-bento .tarjeta:hover .tarjeta-tt{color:var(--a-lila)}
.tema-bento .tarjeta-n{background:var(--fondo)}
.tema-bento .tarjeta:hover .tarjeta-n{background:var(--panel)}
/* ── Barra de módulo (nivel 2 de la navegación) ───────────────── */
/* El sidebar lista los MÓDULOS y esta barra las PANTALLAS del módulo en el que
estás. Antes las pantallas colgaban del sidebar y el riel llegaba a 17 filas;
el usuario lo rechazó por saturado el 2026-08-28. La dibuja
`frontend/src/ui/BarraModulo.jsx`, desde el Shell: una sola barra para los
once módulos.
`sticky` y no `fixed`: el sidebar es `fixed` y ya reserva su riel con el
`padding-left` del body; una barra fija además tendría que repetir esa cuenta
y se rompería en la vista angosta, donde el sidebar pasa a `static`. */
.barra-mod{position:sticky;top:0;z-index:30;background:var(--panel);
border-bottom:1px solid var(--borde)}
/* Mismo `max-width` que `.content`: la barra y la pantalla arrancan alineadas. */
.barra-mod-in{display:flex;align-items:center;gap:20px;height:52px;padding:0 28px;
max-width:1600px;margin:0 auto;
/* Nómina tiene 8 pantallas y Compras 6: en una ventana angosta la barra se
desliza en vez de apretar los nombres o partirse en dos filas. */
overflow-x:auto;scrollbar-width:none}
.barra-mod-in::-webkit-scrollbar{display:none}
.barra-modulo{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
color:var(--texto);white-space:nowrap;flex-shrink:0;padding-right:20px;
border-right:1px solid var(--borde);height:26px}
.barra-modulo .navicon{width:16px;height:16px;opacity:.75}
.barra-pags{display:flex;align-items:center;gap:4px}
.barra-pag{text-decoration:none;white-space:nowrap;font-size:13px;color:var(--tenue);
padding:6px 13px;border-radius:999px;
transition:background .12s ease, color .12s ease}
.barra-pag:hover{background:var(--fondo);color:var(--texto)}
.barra-pag:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
/* La píldora activa. `--t-lila`/`--a-lila` es el par ya medido del tema (4.96:1)
y el mismo que usa `.chip-op.activo`: la barra no inventa un color propio. */
.barra-pag.on{background:var(--vino-tinte);color:var(--vino);font-weight:700}
.tema-bento .barra-pag.on{background:var(--t-lila);color:var(--a-lila)}
.content{padding:30px 28px;max-width:1600px;margin:0 auto}
/* 🔑 **Las dos barras horizontales, juntas** (2026-09-30, pedido del usuario).
La de módulo mide 52 px y `.content` abría con 30 px de aire: entre las dos
quedaba una franja blanca que no decía nada y que en una pantalla de lista se
paga en filas. Baja a 8.
⚠️ **Solo donde hay barra de trabajo**, con `:has()`: las otras 37 pantallas
abren con un título y ahí los 30 px separan la barra del encabezado, que es
para lo que estaban. */
.content:has(> .barra-trabajo){padding-top:8px}
h1{font-family:'Manrope',"Segoe UI",sans-serif;font-size:26px;font-weight:800;
letter-spacing:-0.015em;margin-bottom:4px;line-height:1.15}
/* ⚠️ `margin-top:0` a propósito: cuando `.sub` es un ``, el navegador le
pone 1em arriba, y cuatro pantallas lo compensaban con un `marginTop`
NEGATIVO escrito a mano (-4, -6, -8). Quitarlo de raíz es lo que hace que un
subtítulo quede pegado a su título en todas por igual. */
.sub{color:var(--tenue);margin-top:0;margin-bottom:var(--esp-3,14px);font-size:14px}
.row-head{display:flex;justify-content:space-between;align-items:flex-start;
gap:14px;flex-wrap:wrap;margin-bottom:18px}
/* ── `.barra-trabajo` — una sola franja arriba, y la tabla debajo ────
Reemplaza a `.row-head` en las pantallas cuyo trabajo es mostrar una lista
larga. Las dos conviven: la que no se convierte, no cambia.
🔴 **38 px, y el número sale de una medición.** Con Playwright a
1440 × 900 el 2026-09-29, el primer dato empezaba a los **343 px** en Cartera
y a los **197** en Facturas — y de esos, la fila explica 44 en las dos. O sea
que el alto de fila NO era el problema. Los 343 son la cabecera (65), las
tarjetas de KPI (78), el aviso de vencidas (48), la cabecera del panel (57) y
el aire del panel (95). Esta barra se come los tres primeros.
⚠️ **Fija arriba**: la tabla scrollea por debajo y el título no se va. Por
eso el `z-index` y el fondo opaco — sin fondo, las filas se leen a través.
📌 La tabla de abajo conserva su `altoScroll="alta"`, que la estira hasta el
fondo de la ventana: así la página NO scrollea y el `thead` se sigue pegando
dentro de su propia caja, como siempre. La ficha de diseño pedía sacarlo
«para que la página scrollee entera», y eso traía de vuelta el scroll doble
y despegaba el encabezado sobre las filas. */
:root{
--barra-trabajo-alto:38px; /* el contenido de la franja */
}
.barra-trabajo{
position:sticky;top:0;z-index:30;
display:flex;align-items:center;gap:14px;
min-height:var(--barra-trabajo-alto);
margin:0 0 10px;padding:0 0 6px;
background:var(--fondo,#fff);
border-bottom:1px solid var(--borde,#e6e6ef);
}
/* Un color de catálogo mostrado como color (Ajustes → Fincas, 2026-10-05). */
.punto-color{display:inline-flex;align-items:center;gap:7px}
.punto-color-muestra{width:10px;height:10px;border-radius:50%;flex:none;
background:var(--tenue)}
/* La segunda línea de la franja (Novedades y Reportes de Nómina, 2026-10-05):
los filtros, cuando no entran en la misma línea que los chips de arriba. A
1366 px no entraban: cuatro o cinco chips, dos o cuatro desplegables y dos
fechas. Una línea de 34 px sigue siendo la mitad de la tarjeta de filtros
con rótulos encima que había. */
.barra-linea2{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 10px;
padding-bottom:8px;border-bottom:1px solid var(--borde,#e6e6ef)}
/* La raya que cierra la franja va DEBAJO de la segunda línea: si quedara entre
las dos, los filtros se leerían como parte de la tabla y no de la barra. */
.barra-trabajo:has(+ .barra-linea2){border-bottom:none;margin-bottom:0;padding-bottom:2px}
.tema-bento .barra-linea2 .desp-btn{height:34px}
/* Un chip que NAVEGA (las pestañas de Novedades y de Reportes): es un ``, no
un ``, con la misma cara que `ChipOpcion`. */
a.chip.chip-op{text-decoration:none}
/* La miga («Ajustes ›») va pegada al título, en gris: dice de dónde venís sin
competir con dónde estás (``, 2026-10-05). */
.barra-miga{display:inline-flex;align-items:center;gap:6px;margin-right:-6px;
font-size:13.5px;font-weight:600;color:var(--tenue);white-space:nowrap;flex:0 0 auto}
.barra-miga a{color:inherit;text-decoration:none}
.barra-miga a:hover{color:var(--vino);text-decoration:underline}
.barra-miga a:focus-visible{outline:2px solid var(--vino);outline-offset:2px;border-radius:3px}
/* El título NO crece: lo que crece es el hueco entre las cifras y la acción. */
.barra-trabajo>h1{
margin:0;font-size:19px;line-height:1.2;white-space:nowrap;flex:0 0 auto}
.barra-trabajo-cifras{
display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;
overflow:hidden}
.barra-trabajo-acts{
display:flex;align-items:center;gap:7px;flex:0 0 auto;margin-left:auto}
/* Cada cifra: la etiqueta chica y el valor al lado, en una línea. En Cartera
eran cuatro tarjetas de 78 px de alto para cuatro números que caben acá. */
.barra-cifra{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.barra-cifra-et{color:var(--tenue);font-size:11px;
text-transform:uppercase;letter-spacing:.04em}
.barra-cifra-val{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
/* Los tonos son los tokens que la pantalla YA usaba, no colores nuevos.
⚠️ `--peligro-texto` y no `--peligro`: el rojo de relleno da 3,48:1, que
alcanza para un componente gráfico (WCAG 1.4.11) y NO para texto. Acá se
escribió mal la primera vez y lo cazó `test_el_rojo_de_relleno_no_se_usa_como
_color_de_texto`, que existe justamente para eso. */
.barra-cifra.peligro .barra-cifra-val{color:var(--peligro-texto,var(--peligro))}
.barra-cifra.ok .barra-cifra-val{color:var(--ok-texto,var(--ok))}
/* Los filtros de la lista de Compras, dentro de la franja (2026-10-05). Son
los mismos campos de `.fl-field`, un poco más angostos y bajos para que
entren en la línea con el conteo y los dos botones a 1366 px. */
.barra-filtros{display:flex;align-items:center;gap:6px;margin:0;flex:0 1 auto;min-width:0}
.barra-filtros .fl-wide input{width:190px}
.barra-filtros .fl-field:not(.fl-wide) input:not([type=date]){width:150px}
.barra-filtros .fl-field input[type=date]{width:128px}
.tema-bento .barra-filtros .fl-field input{height:34px}
/* La lista de Compras en una sola tabla (2026-10-05): sin las tarjetas, el
primer renglón de cada pedido abre con una raya más marcada y el total del
pedido va en negrita sobre el fondo. Es lo que dice dónde empieza y termina. */
.tema-bento table tr.pedido-ini>td{border-top:1px solid var(--borde)}
.tema-bento table tr.pedido-total>td{font-weight:700;background:var(--fondo)}
/* Una columna que no se parte en dos renglones (códigos, fechas, cifras): se
pone con `clase: "col-sin-salto"` en la columna de `Tabla`. */
.col-sin-salto{white-space:nowrap}
/* Una nota corta dentro de la franja, con un enlace que cambia la vista
(Movimiento ICA, 2026-10-05: «desde 01/07/2026 · ver todo»). Era una fila
entera de texto entre la cabecera y la tabla. */
.barra-nota{font-size:12.5px;color:var(--tenue);white-space:nowrap}
/* Un botón que se lee como un enlace: hace algo en la pantalla, no navega. */
.enlace-boton{border:none;background:none;padding:0;font:inherit;cursor:pointer;
color:var(--vino);font-weight:700}
.enlace-boton:hover{text-decoration:underline}
.enlace-boton:focus-visible{outline:2px solid var(--vino);outline-offset:2px;border-radius:3px}
/* ── La cifra que además FILTRA (``) ───────────────────────
Nació el 2026-09-30 en Siigo → Facturas, donde los cuatro números YA eran
los filtros de la lista desde el 09-23: al bajarlos a la barra tenían que
seguir apretándose, o se volvía a tener el número arriba y el control abajo.
Es un ``, así que hay que apagarle lo que el navegador le pone —sin
`font:inherit` la etiqueta y el valor caen al tamaño de un botón—.
⚠️ El activo NO se marca solo con color: lleva el tinte **y** una barra
abajo. Con cuatro pegados en una línea de 38 px, el tinte solo no dice cuál
está puesto; y el acento es de cada empresa, así que no puede ser la única
señal. Misma receta que `.kseg-filtro.activo` y `.chip-op.activo`. */
.barra-cifra-filtro{border:none;background:none;font:inherit;cursor:pointer;
padding:3px 8px;border-radius:6px;transition:background .15s ease}
.barra-cifra-filtro:hover{background:var(--fondo)}
.barra-cifra-filtro.activo{background:var(--vino-tinte);
box-shadow:inset 0 -3px 0 var(--vino)}
.barra-cifra-filtro.activo .barra-cifra-et,
.barra-cifra-filtro.activo .barra-cifra-val{color:var(--vino)}
/* El tono del semáforo manda sobre el del activo: una cifra en rojo que está
puesta como filtro sigue en rojo, que es lo que hay que ver. */
.barra-cifra-filtro.activo.peligro .barra-cifra-val{
color:var(--peligro-texto,var(--peligro))}
/* Las cifras-filtro van pegadas, no separadas por 16 px: juntas se leen como
UN control de cuatro posiciones, que es lo que son. */
.barra-trabajo-cifras:has(.barra-cifra-filtro){gap:2px}
/* ── Un CAMPO dentro de la franja (``) ────────────────────────
Nació el 2026-09-30 para Archivo plano OPD, donde el panel «Datos del
archivo» se llevaba **180 px para dos campos cortos** —la fecha de las
facturas y la hora del archivo— y empujaba el primer dato a los 442 px, el
peor de las cinco pantallas de Logística.
⚠️ **El rótulo va al lado y no encima**: apilado necesita 34 px y la franja
tiene 38. Al lado, el par entero entra en una línea.
⚠️ Y el `input` **no hereda** el alto de los de formulario: los de la hoja
miden 38 px con su relleno, que es toda la franja. Acá van a 24. */
.barra-campo{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.barra-campo>label,.barra-campo>.barra-campo-rotulo{color:var(--tenue);
font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin:0}
.barra-campo>input{height:24px;padding:0 8px;font-size:12.5px;
border:1px solid var(--borde);border-radius:6px;
background:var(--panel);color:var(--texto);font-family:inherit;
font-variant-numeric:tabular-nums}
.barra-campo>input:focus-visible{outline:2px solid var(--vino);outline-offset:1px}
/* El de fecha trae su propio icono y necesita algo más de aire a la derecha. */
.barra-campo>input[type=date]{padding-right:4px}
/* A 1366 y abajo las cifras pueden no entrar. Se recortan con scroll propio en
vez de empujar la acción fuera de la pantalla: el bug de las filas del
2026-09-17 aparecía a 1366 y no a 1440, y por eso esto se mide a los dos. */
@media (max-width:1400px){
.barra-trabajo-cifras{overflow-x:auto;scrollbar-width:none}
.barra-trabajo-cifras::-webkit-scrollbar{display:none}
}
/* El emoji de un botón de la barra (`.btn-ico`) se va a 1200 px o menos.
Nació el 2026-10-01 en `/siigo`, la única de las seis pantallas con barra que
no entraba a 1152: con cinco botones, las cifras de la izquierda quedaban
cortadas detrás de su scroll escondido («TODAS 4» sin el 4). Decisión del
usuario entre esto, acortar «Generar Ventas diarias» o dejarlo. El ícono va en
su propio `span` con `aria-hidden`, así que el lector de pantalla no lo leía
antes y no pierde nada ahora. Lo mide `scripts/verificar_alto_fila_siigo.py`. */
@media (max-width:1200px){
.barra-trabajo-acts .btn-ico{display:none}
}
@media (max-width:760px){
.barra-trabajo{flex-wrap:wrap;min-height:0;padding-top:8px}
.barra-trabajo>h1{flex:1 1 100%}
}
/* ── Separación entre bloques hermanos ─────────────────────────────
Tres arriba y tres abajo, con los valores de `tokens.css`. Existen para
que ningún JSX tenga que escribir un número: el que escribe una pantalla
elige «poco, normal o mucho», no 13 px. Lo cuida
`test_consistencia_visual.py`. */
.sep-sm{margin-top:var(--esp-1,6px)}
.sep{margin-top:var(--esp-2,10px)}
.sep-lg{margin-top:var(--esp-3,14px)}
.sep-abajo-sm{margin-bottom:var(--esp-1,6px)}
.sep-abajo{margin-bottom:var(--esp-2,10px)}
.sep-abajo-lg{margin-bottom:var(--esp-3,14px)}
/* Un formulario que vive DENTRO de otra cosa —una celda de tabla, una fila de
acciones— y no debe abrir espacio a su alrededor. Estaba escrito a mano como
`style={{margin:0}}` en once pantallas. `.form-fila` es el mismo caso cuando
además alinea a sus hijos en una línea. */
.form-plano{margin:0}
/* Lo mismo para lo que no es un formulario: un párrafo que ya vive dentro de
una caja con su propio relleno y no necesita el margen del navegador. */
.sin-margen{margin:0}
.form-fila{display:flex;gap:8px;align-items:center;margin:0}
/* Un control que ocupa el ancho de su contenedor (los botones y los campos de
los modales). No se llama `ancho-total` para no confundirse con
`.tile.ancho-total`, que es otra cosa: esa ocupa la fila de la rejilla. */
.ancho-completo{width:100%}
/* Empuja un elemento al final de su fila flex sin tener que escribir
`margin-left:auto` a mano. */
.a-la-derecha{margin-left:auto}
/* La contracara: empuja el elemento al PRINCIPIO de su fila flex, separándolo
del resto. La usa el botón «Eliminar» del pie de un modal, que va lejos de
«Guardar» a propósito. */
.a-la-izquierda{margin-right:auto}
/* ⚠️ Texto en rojo. Existe porque siete pantallas lo pedían inline con el rojo
de RELLENO, que da 3,48:1 sobre blanco cuando AA pide 4,5 para texto. Escrito
en el JSX, ningún guardián de contraste del CSS las veía. Acá usa
`--peligro-texto`, el mismo rojo de la marca, que pasa AA (2026-09-15). */
.texto-peligro{color:var(--peligro-texto,var(--peligro))}
.texto-alerta{color:var(--alerta)}
.texto-tenue{color:var(--tenue)}
/* Un formulario que va en la misma línea que otra cosa (dos botones de acción
en la misma celda, cada uno con su propio POST). */
.en-linea{display:inline}
/* Una fila de botones apretada dentro de una celda: menos separación que
`.acts`, que es la de las cabeceras. */
.acts-juntos{display:flex;gap:6px;justify-content:flex-end}
.texto-ok{color:var(--ok)}
.valor-fuerte{font-weight:700}
/* La caja de los estados de pantalla: «no hay nada» y «no se pudo cargar».
Un solo relleno para los dos, que es lo que los hace ver hermanos. */
.estado-caja{padding:18px 20px;color:var(--tenue)}
/* ⚠️ `.panel` no trae relleno a propósito: casi siempre contiene una tabla, que
pone el suyo. Cuando adentro va TEXTO hay que dárselo, o queda pegado a los
bordes — en «Importar empleados» el párrafo de columnas opcionales llegaba a
comerse su primera letra (2026-09-16). */
.panel-cuerpo{padding:16px 20px}
/* ── El campo de archivo ───────────────────────────────────────────────────
Los nueve `input[type=file]` del sistema mostraban el botón que dibuja el
sistema operativo, que al lado del resto se ve de otro programa — el mismo
motivo por el que el `` nativo se reemplazó por `Desplegable`
(2026-09-16). Acá alcanza con `::file-selector-button`: el botón toma el
aspecto del sistema y el control sigue siendo el nativo, con su diálogo y su
accesibilidad intactos. ⚠️ El TEXTO del botón lo pone el navegador según su
idioma y no hay CSS que lo cambie; en un Chrome en español dice «Elegir
archivo». */
input[type=file]{font-family:inherit;font-size:13px;color:var(--tenue);
padding:7px 10px}
input[type=file]::file-selector-button{font-family:inherit;font-size:13px;
font-weight:700;color:var(--vino);background:var(--vino-tinte);border:none;
border-radius:8px;padding:7px 12px;margin-right:10px;cursor:pointer;
transition:filter .12s ease}
input[type=file]::file-selector-button:hover{filter:brightness(.97)}
.estado-error{font-weight:600;margin:0 0 var(--esp-1,6px)}
/* Lo contrario del error: «no hay nada que revisar» es una buena noticia. */
.estado-bien{text-align:center;color:var(--ok);font-weight:600;padding:30px}
.estado-centrado{text-align:center}
/* Las salidas de una pantalla en error: a la izquierda, que es por donde se
sigue leyendo. `.acts` no sirve acá porque alinea a la derecha. */
.estado-acciones{display:flex;gap:7px;flex-wrap:wrap}
/* El pie del resumen de Transporte: un párrafo de datos, más chico que el
cuerpo y con más aire entre renglones. */
.transp-resumen{font-size:13px;line-height:1.6}
/* Un formulario de una línea con sus campos alineados abajo: el de las notas de
Ajustes, que vive dentro de la tarjeta y no arriba de ella. */
.form-fila-campos{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
margin-top:var(--esp-2,10px)}
/* El pie de una celda: el detalle chico debajo del dato principal. */
.pie-celda{font-size:11px;color:var(--tenue);margin-top:2px}
/* El historial plegable de una cuenta, que va indentado adentro de su tarjeta. */
.collapse.adentro{margin:0 20px var(--esp-1,6px)}
/* Los campos de un modal: el rótulo arriba, el control ocupando el ancho. Vivía
escrito control por control en el modal de Transporte. */
.campos-modal label{display:block;margin-bottom:4px}
.campos-modal input,.campos-modal textarea{width:100%;margin-bottom:var(--esp-1,6px)}
/* El desplegable propio, si algún día entra a un modal, se estira igual. No es
un `` nativo: en las pantallas migradas no queda ninguno. */
.campos-modal .desp{width:100%;min-width:0;margin-bottom:var(--esp-1,6px)}
.campos-modal textarea{margin-bottom:var(--esp-2,10px)}
/* ── Botones ──────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--vino);color:#fff;border:none;text-decoration:none;
padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;
transition:transform .2s var(--ease-spring), background .15s ease}
.btn:hover{background:var(--vino-h)}
.btn:active{transform:scale(.95)}
.btn.ghost{background:transparent;color:var(--vino);border:1px solid var(--vino)}
.btn.ghost:hover{background:var(--vino-tinte)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.gray{background:#eef0f3;color:var(--texto)}
.btn.danger{background:transparent;color:var(--peligro-texto,var(--peligro));
border:1px solid var(--peligro)}
.btn.danger:hover{background:#fdecea}
.btn:disabled,.btn[disabled]{opacity:0.4;cursor:not-allowed;pointer-events:none}
.btn.on {background:var(--vino);color:#fff;box-shadow:none}
.btn.active{background:var(--vino);color:#fff;box-shadow:none}
/* ── Cards / métricas ─────────────────────────────────────────── */
.cards{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--borde);border-radius:10px;
padding:18px 20px;min-width:170px}
.card .v{font-size:30px;font-weight:800;color:var(--vino)}
.card .l{color:var(--tenue);font-size:13px}
.setcard{text-decoration:none;color:var(--texto);width:200px;display:block}
.setcard .ic{font-size:26px}
.setcard .tt{font-weight:700;margin-top:6px;color:var(--vino)}
.setcard .ds{color:var(--tenue);font-size:12px;margin-top:2px}
/* ── Tablas ───────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:10px;overflow:hidden}
/* Scroll horizontal con indicador de fade — 100% CSS, sin JS. Doble
degradado: uno "tapa" (mismo color que el fondo, se mueve CON el
contenido vía background-attachment:local — desaparece cuando ya no hay
más para scrollear de ese lado) y otro "sombra" (fijo respecto al
contenedor vía background-attachment:scroll — siempre visible en el
borde, pero tapado por el degradado anterior cuando no hace falta).
Sin min-width propio a propósito: el ancho natural del padding+contenido
de las columnas ya fuerza el scroll cuando no entra, y bajo 900px ICA/
Facturas heredan min-width:560px de .panel table — evita competir con
ese min-width condicional que ya usa .panel para otras tablas del sistema. */
.tabla-scroll{
overflow-x:auto;
background:
linear-gradient(to right, var(--panel) 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), var(--panel) 70%) 100% 0,
linear-gradient(to right, rgba(34,38,46,.12), rgba(255,255,255,0) 10%),
linear-gradient(to left, rgba(34,38,46,.12), rgba(255,255,255,0) 10%) 100% 0;
background-repeat:no-repeat;
background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment:local, local, scroll, scroll;
}
table{width:100%;border-collapse:collapse}
th{background:var(--fondo);color:var(--tenue);text-align:left;font-size:12px;
padding:11px 14px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
td{padding:11px 14px;border-top:1px solid var(--borde);font-size:14px}
tr:hover td{background:var(--fondo)}
/* ⚠️ `flex-wrap` acá y no solo en el media query de móvil: la cabecera de
Informes por finca lleva cinco filtros y sacaba la página 18px de lado en una
pantalla de 1024 (medido el 2026-09-16), que es justo el ancho que NO entra en
ninguna de las dos ramas. Envolver es lo que hace que la cabecera se acomode
sola a cualquier ancho en vez de tener un umbral escrito a mano. */
.acts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end}
/* 🔴 Dentro de una CELDA no envuelve nunca (2026-09-21). El `flex-wrap:wrap` de
arriba es para las cabeceras, donde tener dos filas de botones está bien; en
una celda de tabla, envolver estira la fila entera. Medido en navegador el
09-19: a 1152 px la columna de acciones de `/facturas` apilaba «Abrir» sobre
el menú de tres puntos y TODAS las filas pasaban de 44 a 77 px, con nombres
cortos y largos por igual. Esos dos botones juntos miden poco más de 100 px:
entran siempre, lo que sobraba era el permiso para partirlos. */
td .acts{flex-wrap:nowrap}
/* Tinte por tipo de cliente en Facturas (2026-07-14, refinado 2026-07-15;
cambiado de verde/azul a ambar/purpura el mismo dia -- el usuario pidio
"otros 2 colores diferentes" para no confundirse con verde=ok/naranja=aves
de otros badges del sistema). Nacional = ambar (#B8860B), Exportación =
púrpura (#5B4B8A) — pareja cálido/frío elegida por el usuario entre 3
opciones. Borde izquierdo de 5px + fondo con cuerpo suficiente para
distinguirse de un vistazo. */
.td-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.td-money{color:var(--texto);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
/* Menú de 3 puntos por factura (Facturas → lista). #menu-flotante es un
único panel "portal" pegado directo al (no dentro de la tabla),
con position:fixed y coordenadas puestas por JS — inmune a cualquier
overflow/transform de contenedores padres (tabla, tarjetas, sidebar),
sin importar qué tan chico sea ese contenedor.
🔴 **Esta regla estuvo MUERTA del 2026-08-21 al 2026-10-05.** Encima de ella
quedó la segunda línea de `.dots-btn{…}` sin la primera (`f6fafaeb`), el
navegador la leyó como parte del selector y descartó `.dots-panel` entera.
No se notó porque `ui/Menu.jsx` pone casi todo en línea; lo único que se
perdía era el `z-index`, y el 2026-10-05 la grilla de Despachos pintó su
encabezado encima del menú «Etiquetas». La capa del modo portal la pone
ahora `Menu.jsx` en línea (1100, la de los paneles flotantes). Al revivirla
se le sacó el `min-width:230px`: nunca se aplicó en esas seis semanas y
habría agrandado los menús que piden 170 o 200 px. Lo cuida
`test_css_sin_declaraciones_huerfanas.py`. */
.dots-panel{display:none;position:fixed;background:var(--panel);
border:1px solid var(--borde);border-radius:10px;
box-shadow:0 10px 28px rgba(34,38,46,.16);padding:6px;z-index:500}
.dots-panel.open{display:block}
.dots-panel .dots-titulo{font-size:11px;font-weight:700;color:var(--tenue);
text-transform:uppercase;letter-spacing:.3px;padding:6px 10px 4px}
.dots-panel a,.dots-panel button{display:block;width:100%;text-align:left;
background:transparent;border:none;padding:8px 10px;border-radius:7px;
font-size:13.5px;color:var(--texto);text-decoration:none;cursor:pointer;
font-family:inherit}
.dots-panel a:hover,.dots-panel button:hover{background:var(--fondo);color:var(--vino)}
.dots-panel form{margin:0}
/* `.item-menu` es la clase de `ui/Menu.jsx::ItemMenu`. Hereda el mismo estilo
que los `a`/`button` del panel: un ítem de menú se ve igual en todos los
menús del sistema, venga de Jinja o de React. */
.dots-panel .item-menu{display:block;width:100%;text-align:left}
/* ── El desplegable de «Archivo plano» ────────────────────────────────────
Se ve como el de «Lugar de entrega» (pedido del usuario, 2026-09-30), pero
lleva dos cosas que ese no tiene: un aviso cuando alguna factura marcada no
tiene la dirección completa, y la hora que entra en la cabecera del archivo.
⚠️ El `