/* ============================================================================
Agrupa — sistema de diseño
----------------------------------------------------------------------------
Portado del dashboard de tiendapp. Este archivo define los tokens y las
piezas que NO dependen de módulos ni de permisos: lienzo, tipografía,
tarjetas, formularios, botones y los orbes de fondo.
El kernel de UI (P0-c) construye el shell sobre estos tokens; no los
redefine. Si un componente necesita un color nuevo, se agrega aquí como
variable, nunca como literal en una plantilla.
========================================================================= */
/* ── Inter, vendorizada ────────────────────────────────────────────────────
Sin CDN, por la misma razón que HTMX y Alpine: §5.5 del spec de P0-c2 dice
que varios clientes van a correr detrás de redes cerradas. Una hoja de
estilo de un tercero es peor que un script: `` BLOQUEA
el render, así que detrás de una red que no resuelve fonts.googleapis.com
la pantalla se queda en blanco hasta que el navegador se rinde.
Solo los subconjuntos `latin` y `latin-ext`: es un ERP colombiano, y los
quince archivos de cirílico, griego y vietnamita no los pide nadie.
------------------------------------------------------------------------ */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400-latin-ext.01ba6c2a184b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/inter-400-latin.65850a373e25.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500-latin-ext.01ba6c2a184b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/inter-500-latin.65850a373e25.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600-latin-ext.01ba6c2a184b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/inter-600-latin.65850a373e25.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-700-latin-ext.01ba6c2a184b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/inter-700-latin.65850a373e25.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Marca */
--primary: #7c5cf0;
--primary-dark: #5b3ec8;
--primary-soft: #f1edfe;
/* El contorno del bloque morado suave. `--border` es gris y sobre
`--primary-soft` se lee como suciedad; `--primary` a plena fuerza
convierte un enlace en un botón. Éste es el borde que la caja de la
factura necesita: visible, del mismo tinte, sin gritar. */
--primary-soft-border: #ddd3fb;
/* «Tus campos» (2026-10-29): la sección de los campos que creó la
empresa en Campos, tintada para que se distinga de lo que trae
Agrupa. Lila de la marca, nunca el ámbar o el rojo de un aviso. */
--campos-tinte: #faf8ff;
--campos-borde: #cfc3f8;
/* Cuánto del color claro de un agente tiñe la baldosa de su personaje
(las tarjetas de un equipo). En oscuro, mucho menos: sobre fondo
negro el pastel al 60 % se leía como un parche gris. */
--equipo-tinte-fuerza: 60%;
/* Las zonas seguras del teléfono, con el mismo nombre que en `pos.css`:
valen 0 en un navegador de escritorio y lo que mida el notch en la app. */
--sat: env(safe-area-inset-top, 0px);
--sab: env(safe-area-inset-bottom, 0px);
/* El borde de la casilla SIN marcar. NO es `--border-strong`: ése da
1.5:1 sobre blanco y la casilla hay que buscarla. Hay una prueba que
calcula la cifra.
`#9691ac` desde el 2026-08-17: Renzo lo quería MÁS CLARO —pidió
`#d2cfdf`— y ése da 1.53:1, o sea la casilla que hay que buscar otra
vez. Éste es lo más claro que sigue pasando el 3:1 que la WCAG 1.4.11
pide para el contorno de un control: da 3.02:1. Se eligió con la
calculadora de la propia guarda enfrente, no a ojo. */
--checkbox-border: #9691ac;
/* Lienzo y superficies */
--bg: #f7f6fb;
--card-bg: #ffffff;
--canvas: #0d0b16;
/* El banner de sección va sobre `--canvas`, que es el mismo negro de la
topbar: la pantalla lee como una pieza y no como dos temas pegados.
Por eso el par de texto vive acá y no es un hex suelto dentro de la
regla — el día que el tema cambie, se cambia junto a su fondo.
`--banner-sub` NO es `--text-light`: aquel está calibrado contra
blanco y sobre el negro da 3.1:1, que para texto normal es ilegible.
Hay dos pruebas que calculan las dos cifras. */
--banner-text: #ffffff;
--banner-sub: #b3aecb;
/* La banda es un DEGRADADO de dos morados oscuros, no un negro con un
resplandor encima. Es la diferencia entre una banda que se ve profunda y
una que se ve apagada, y son los dos valores exactos de `.page-hero` del
dashboard de tiendapp. */
--banner-from: #16132a;
--banner-to: #241e42;
/* Texto */
--text: #1c1830;
--text-light: #5d5873;
--text-faint: #8d88a3;
/* ── Tipografía ──────────────────────────────────────────────────────
SIETE pasos, nombrados por PAPEL y no por tamaño. Antes había catorce
números sueltos repartidos en 1.585 líneas, elegidos de a uno: por eso
las pantallas no se sentían una pieza — no lo eran.
Los valores salen de medir el dashboard de tiendapp, que es la
referencia visual. Ahí también están sueltos —diecinueve tamaños
distintos en 2.247 líneas— así que lo que se porta no es su hoja sino
los valores que de hecho funcionan, ya ordenados.
El paso que más cambia es el cuerpo: 15px → 13px. Todo lo nuestro venía
un 15% más grande, y esa sola cifra es la mitad de la diferencia.
Nombrar por papel es lo que vuelve barato el cambio que viene: el día
que una empresa quiera su propia densidad, se reasignan siete valores y
no se buscan cuarenta en la hoja. */
--fs-hero: 34px; /* el saludo de la portada, y nada más */
--fs-page: 22px; /* el título de la pantalla, en el banner */
--fs-number: 30px; /* una cifra que ES el contenido */
--fs-stat: 17px; /* la cifra de la tira del escritorio: un vistazo,
no el contenido. Dos pasos por debajo de
`number` — la tira se lee de reojo, y a 22px
empujaba la píldora a partirse en dos filas */
--fs-section: 13.5px; /* el título de una tarjeta o de una sección */
--fs-body: 13px; /* texto, celdas, campos, botones */
--fs-small: 12px; /* el subtítulo de algo, un dato de apoyo */
--fs-label: 11.5px; /* el rótulo de un campo */
--fs-meta: 11px; /* ayuda, subtítulos, lo secundario */
--fs-badge: 10px; /* pastillas y estados, en versalitas */
/* Un GLIFO, no un texto: el tamaño de un icono dibujado con una letra.
Está en la escala porque si no queda como el único número suelto de la
hoja, y un número suelto es por donde vuelven los otros cuarenta. */
--fs-glyph: 16px;
--fs-columna: 15px; /* el nombre de una columna de tablero (Tareas) */
/* ── Espaciado ───────────────────────────────────────────────────────
La escala de ESPACIO (Renzo, 2026-10-30): la de Atlassian, sobre una
base de 8px. El número dice cuánto mide en porcentaje de la base:
`--space-100` son 8px, `--space-050` la mitad, `--space-150` uno y
medio. Todo margen, relleno y hueco sale de aquí; un px escrito a mano
en `margin`, `padding` o `gap` lo frena el portón (1px queda, el
ajuste óptico de un borde). Para elegir: de 2 a 8 lo chico y apretado
(ícono y texto, una pastilla, un botón de ícono, la celda); de 12 a 24
lo de adentro de las tarjetas y los botones; de 32 a 80 el aire entre
las partes de la página. Guía: `/guia/espacios/`. */
--space-025: 2px;
--space-050: 4px;
--space-075: 6px;
--space-100: 8px;
--space-150: 12px;
--space-200: 16px;
--space-250: 20px;
--space-300: 24px;
--space-400: 32px;
--space-500: 40px;
--space-600: 48px;
--space-800: 64px;
--space-1000: 80px;
/* La escala vieja, ordinal (`--sp-1` = 4px … `--sp-8` = 40px), solo como
ALIAS mientras las ramas que ya estaban abiertas se ponen al día: en el
repo ya nadie la usa y el portón frena un `var(--sp-…)` nuevo. Se
borra cuando ninguna rama viva la tenga. */
--sp-1: var(--space-050);
--sp-2: var(--space-100);
--sp-3: var(--space-150);
--sp-4: var(--space-200);
--sp-5: var(--space-250);
--sp-6: var(--space-300);
--sp-7: var(--space-400);
--sp-8: var(--space-500);
/* El respiro lateral del contenido. Es una variable y no un número
dentro de `.content` porque la portada lo tiene que CANCELAR: los
orbes van de borde a borde de la aplicación, y para eso necesitan
saber cuánto padding deshacer. */
--content-pad: clamp(14px, 2.4vw, 28px);
/* Bordes y profundidad */
--border: #e7e4ef;
--border-strong: #d6d1e4;
/* La banda del encabezado de una tabla, y la línea entre sus filas.
Los dos son PROPIOS y no `--bg` y `--border` porque la tabla los usa
en dosis distintas de todo lo demás: el fondo tiene que separarse del
blanco de la tarjeta sin llegar a leerse como una fila, y la línea se
repite quinientas veces —con `--border` la lista se lee como una reja
y las filas dejan de ser filas—. Tenerlos nombrados es lo que deja
ajustar la densidad de la tabla sin tocar el resto del ERP. */
--table-head-bg: #faf9fc;
--table-line: #f0eef6;
/* Lo que ABRE una fila: la miniatura de un producto, la inicial de un
tercero, la baldosa con el icono de una ubicación. Un solo tamaño
para los tres (Renzo, 2026-08-14).
Eran DOS familias con dos tamaños: `.cell-thumb` a 36px en cuatro
plantillas —las que llevan foto— y `.tile-sm` a 26px en treinta y
cinco. Puestas una debajo de otra al navegar entre listas, las filas
cambiaban de altura de pantalla en pantalla sin que nada lo
justificara: la diferencia no decía nada, solo se notaba.
Token y no un literal porque hay TRES sitios que tienen que valer lo
mismo: las dos familias y el corrimiento del rótulo de esa columna
(`.th-lead`), que se calcula a partir de acá. Escritos como literales,
cambiar el tamaño desalinea el encabezado y nada lo avisa. */
--cell-thumb: 35px;
/* El alto de un botón de fila, y el de la BANDA que tiene que poder
contenerlo.
Derivado y no dos números sueltos: la banda existe para llevar un
título y, a veces, los verbos de esa tarjeta. Si el botón crece y la
banda no, o el botón se sale o la banda da un salto al aparecer — que
es exactamente lo que pasó el 2026-08-14 al subir `.btn-small` de 22
a 30: la banda de selección medía 55 y el encabezado que reemplaza
46, y la tabla brincaba nueve píxeles en cada clic.
Con el alto atado al del botón, cambiar el tamaño de los botones de
fila reajusta las bandas solo. El `+ 1px` es el borde inferior. */
/* El botón de pantalla mide 38 por padding + interlínea; el nombre existe
para que los tres puntos de la banda midan LO MISMO sin repetir la
cuenta. */
--btn-h: 38px;
--btn-small-h: 30px;
--band-h: calc(var(--btn-small-h) + var(--space-150) * 2 + 1px);
--radius: 12px;
/* Existía en dos pantallas como referencia sin definición —el navegador
ignoraba el `border-radius` entero y nadie lo notó. Definida el
2026-08-08 al armar la de reseñas. */
--radius-sm: 8px;
--radius-lg: 20px;
/* El radio de una TARJETA. Era `--radius-lg` (20px) y se veía blando al
lado de la referencia; tiendapp usa 12px en todas. `--radius-lg` se
queda para lo que de verdad es grande —el drawer, el shell— porque ahí
sí lo pide la escala de la pieza. */
--radius-card: 12px;
/* El de un control. Más cerrado que el de la tarjeta que lo contiene: al
revés, el campo se come visualmente su propia caja. */
--radius-field: 10px;
--shadow: 0 1px 3px rgba(16, 18, 22, .05), 0 8px 24px rgba(16, 18, 22, .06);
--shadow-lg: 0 2px 6px rgba(16, 18, 22, .06), 0 18px 48px rgba(16, 18, 22, .10);
/* El gris de las series que acompañan en una gráfica de Analíticas
(Renzo, 2026-10-05, con referente: la principal manda). Lo leen
`analiticas.js` para la línea y `.series-dot-1` para el punto de la
leyenda, así no se pueden separar. Literal y no `color-mix()`: el
lienzo no entiende funciones de CSS. */
--chart-muted: #aeabb9;
/* Y a dónde llega el trazo de la principal por la derecha: el rosa de
los orbes. Literal por lo mismo. */
--chart-accent: #f05ce4;
/* ── El vidrio de la paleta (Renzo, 2026-09-15) ──────────────────────
La paleta de ⌘K flota SOBRE la pantalla y no dentro de ella: es la
única superficie del ERP que se pinta oscura encima de lo que haya
debajo, así que trae su propio vocabulario en vez de torcer los
tokens claros de las tarjetas. Si el vidrio no queda, se van estos
siete y la paleta vuelve a ser una tarjeta. */
/* 62 % y no 78 (Renzo, 2026-09-15): con más transparencia el desenfoque
de atrás se nota, que es de lo que vive el vidrio. */
--glass-bg: rgb(26 24 40 / 62%);
--glass-line: rgb(255 255 255 / 12%);
--glass-soft: rgb(255 255 255 / 8%);
--glass-hover: rgb(255 255 255 / 6%);
--glass-text: #f4f2ff;
--glass-text-soft: rgb(244 242 255 / 62%);
--glass-activa: rgb(124 92 240 / 42%);
/* Va HACIA ARRIBA: el contenedor del ERP flota sobre el lienzo oscuro y
la sombra tiene que despegarlo de la topbar, no hundirlo. Ninguna de
las dos de arriba sirve, y un literal en el shell dejaría la única
sombra del ERP fuera del sistema. */
--shadow-shell: 0 -2px 40px -20px rgba(0, 0, 0, .5);
/* El aire entre el menú y el contenido, y el radio de las dos tarjetas
del shell. */
--shell-gap: 10px;
--radius-shell: 20px;
/* El fondo del menú. Propio y no `--card-bg` para que el tema oscuro
pueda separarlo del contenido sin tocar las tarjetas. */
--sidebar-bg: var(--card-bg);
/* El fondo de un campo. Blanco en claro; en oscuro, más hundido que la
tarjeta que lo contiene. */
--field-bg: #fff;
/* El vidrio del listón: la banda de sección y `.site-nav` de la landing. */
--bar-glass-top: rgba(255, 255, 255, .46);
--bar-glass-bottom: rgba(255, 255, 255, .22);
--bar-glass-edge: rgba(255, 255, 255, .72);
--bar-glass-shine: rgba(255, 255, 255, .95);
/* La sombra de adentro del canto, que le da grosor al vidrio. */
--bar-glass-depth: rgba(23, 20, 31, .13);
/* La sombra de afuera de la banda: suave, pareja alrededor y sin el
canto (Renzo, 2026-10-10). El oscuro la hereda. */
--bar-glass-shadow: 0 0 15px 0 rgba(0, 0, 0, .11);
/* La LISTA: la tarjeta de una lista con la piel de las tarjetas del
tablero de Tareas —degradado blanco, filo blanco, sombra larga lila—
(Renzo, 2026-10-11). La usan la tabla de cada lista y sus filtros. */
--lista-arriba: rgba(255, 255, 255, .9);
--lista-abajo: rgba(255, 255, 255, .68);
--lista-filo: rgba(255, 255, 255, .95);
--lista-brillo: #fff;
--lista-sombra: 0 1px 2px rgba(60, 40, 120, .05), 0 10px 22px -16px rgba(60, 40, 120, .32);
--lista-encabezado: #77728f;
/* La CÁPSULA de vidrio de las listas —el buscador y «Columnas»—, la del
conmutador Tablero / Tabla / Calendario de Tareas; y su botón puesto,
blanco con sombra lila. */
--lista-vidrio-arriba: rgba(255, 255, 255, .62);
--lista-vidrio-abajo: rgba(255, 255, 255, .36);
--lista-vidrio-filo: rgba(255, 255, 255, .78);
--lista-vidrio-brillo: rgba(255, 255, 255, .95);
--lista-vidrio-sombra: 0 22px 48px -26px rgba(70, 50, 150, .32), 0 2px 8px -3px rgba(70, 50, 150, .08);
--lista-puesto: rgba(255, 255, 255, .92);
--lista-puesto-sombra: inset 0 1px 0 #fff, 0 4px 14px -6px rgba(108, 76, 245, .4);
/* El PANEL de vidrio grande que envuelve una vista entera: el del
tablero de Tareas y la barra del Asistente ancho. Más
transparente que la cápsula; el filo, el brillo y la sombra son los de
la cápsula (`--lista-vidrio-*`). */
--panel-vidrio-arriba: rgba(255, 255, 255, .5);
--panel-vidrio-abajo: rgba(255, 255, 255, .26);
/* El CANTO del vidrio, entero y en un solo sitio: lo usan la banda, la
tira del inicio y las tarjetas de Analíticas (2026-10-04). Un filo de
luz arriba y otro más tenue abajo y a los lados; por dentro una sombra
corta que le da grosor al borde, como una lente; afuera una sombra
pegada y otra larga. */
--glass-rim:
inset 0 1.5px 1px var(--bar-glass-shine),
inset 0 -1.5px 1px color-mix(in srgb, var(--bar-glass-shine) 70%, transparent),
inset 1.5px 0 1px color-mix(in srgb, var(--bar-glass-shine) 60%, transparent),
inset -1.5px 0 1px color-mix(in srgb, var(--bar-glass-shine) 60%, transparent),
inset 0 7px 9px -6px var(--bar-glass-depth),
inset 0 -9px 10px -8px var(--bar-glass-depth),
0 1px 2px rgba(23, 20, 31, .12),
0 16px 28px -18px rgba(23, 20, 31, .45);
/* Semántica: cada estado lleva su par fondo/texto */
/* Fortaleza de contraseña. Son tonos de BARRA, no de texto: sobre blanco
dan entre 1.6 y 3.1 de contraste, suficiente para una forma e ilegible
para una palabra. Por eso el nivel no se escribe, se cuenta.
El nivel 2 interpola entre el rojo y el ámbar para que la rampa de
cuatro pasos no salte. */
--strength-1: #ff5a4c;
--strength-2: #ff823e;
--strength-3: #ffaa30;
--strength-4: #3de775;
--ok-bg: #e8f6ec; --ok-text: #1f7a3d;
/* El verde de «esto ya está» en los medidores (Integrantes, inducciones):
más lima que el `--ok-text` de las pastillas, que Renzo veía «muy
pasto» (2026-09-14). Dos tonos: el claro para la barra y la baldosa,
el oscuro para la cifra, que tiene que leerse sobre blanco. */
--done: #53cf54; --done-text: #2e9a2f;
--warn-bg: #fff6dc; --warn-text: #9a7b00;
--danger-bg: #fdebeb; --danger-text: #ff213e; /* Renzo 2026-10-06 */
--info-bg: #eaf2fd; --info-text: #2c66ad;
/* Los mismos cuatro estados, VIVOS: los de la pastilla (Renzo,
2026-08-14). Son un juego aparte y no un reemplazo porque los de
arriba tiñen superficies grandes —el fondo de un aviso, el de una fila
degradada— y a ese tamaño un tono saturado grita. La pastilla es del
tamaño de una palabra: ahí el tono pálido no se lee como estado, se
lee como texto con un halo.
El texto es más oscuro que el de la familia pálida, y no por gusto: el
fondo vivo sube la luminancia, y con `--ok-text` sobre `#7effa3` el
contraste cae a 4.28 — por debajo del 4.5 que pide un texto de 12px.
Con estos pares queda entre 5.3 y 7.1, medido, los cuatro. Un estado
que no se puede leer no es un estado. */
--ok-vivid: #7effa3; --ok-vivid-text: #0f5527;
--warn-vivid: #ffe27a; --warn-vivid-text: #6b4e00;
--danger-vivid: #ffb3ad; --danger-vivid-text: #8c1f16;
--info-vivid: #a8d4ff; --info-vivid-text: #0f4a8a;
/* La pastilla SIN modificador. Va acá, con las otras cuatro, y no como
un hex suelto dentro de la regla: el día que el tema cambie, se cambia
en un solo sitio junto a sus hermanas. */
--pill-bg: #ece9f6; --pill-text: #514c66;
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── Tema oscuro ───────────────────────────────────────────────────────────
Se pinta desde el servidor con `data-theme` en el `` (cookie `tema`,
`ui:toggle_theme`), en tres valores: `light`, `mixed` y `dark`. Solo
reasigna TOKENS: lo que en la hoja todavía es un
literal claro no se entera, y eso es lo que falta por barrer. */
:root[data-theme="dark"],
/* Mixto: el menú lleva los tokens oscuros y el contenido se queda claro. Las
variables se heredan, así que redefinirlas en `.sidebar` alcanza a todo
lo de adentro. */
/* `.como-menu`: lo que se viste COMO el menú (2026-10-08, la lista del chat
del equipo, spec chat cara §1). Los mismos tokens, no una copia: en mixto
se oscurece con el menú, y en claro y oscuro sigue al tema solo. */
:root[data-theme="mixed"] .sidebar,
:root[data-theme="mixed"] .como-menu {
color-scheme: dark;
--primary-dark: #b7a4ff;
--primary-soft: #2a2248;
--primary-soft-border: #3f3370;
--campos-tinte: #1d1930;
--campos-borde: #4a3d80;
--equipo-tinte-fuerza: 14%;
--checkbox-border: #6f6a88;
--canvas: #07060c;
--bg: #110f1a;
--card-bg: #1b1827;
--chart-muted: #625c7c;
--chart-accent: #ff7af2;
--sidebar-bg: #1c1929;
--field-bg: #13111c;
--bar-glass-top: rgba(40, 36, 58, .88);
--bar-glass-bottom: rgba(27, 24, 39, .8);
--bar-glass-edge: rgba(255, 255, 255, .08);
--bar-glass-shine: rgba(255, 255, 255, .22);
--bar-glass-depth: rgba(0, 0, 0, .45);
--lista-arriba: rgba(48, 43, 70, .95);
--lista-abajo: rgba(38, 34, 58, .9);
--lista-filo: rgba(255, 255, 255, .08);
--lista-brillo: rgba(255, 255, 255, .06);
--lista-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 22px -16px rgba(0, 0, 0, .7);
--lista-encabezado: #a19bbd;
--lista-vidrio-arriba: rgba(52, 46, 78, .62);
--lista-vidrio-abajo: rgba(36, 32, 56, .5);
--lista-vidrio-filo: rgba(255, 255, 255, .1);
--lista-vidrio-brillo: rgba(255, 255, 255, .1);
--lista-vidrio-sombra: 0 22px 48px -26px rgba(0, 0, 0, .7), 0 2px 8px -3px rgba(0, 0, 0, .3);
--lista-puesto: rgba(255, 255, 255, .1);
--lista-puesto-sombra: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 14px -6px rgba(0, 0, 0, .6);
--panel-vidrio-arriba: rgba(40, 36, 58, .55);
--panel-vidrio-abajo: rgba(28, 25, 42, .35);
/* Repetido para que tome el filo y la sombra del tema oscuro. */
--glass-rim:
inset 0 1.5px 1px var(--bar-glass-shine),
inset 0 -1.5px 1px color-mix(in srgb, var(--bar-glass-shine) 70%, transparent),
inset 1.5px 0 1px color-mix(in srgb, var(--bar-glass-shine) 60%, transparent),
inset -1.5px 0 1px color-mix(in srgb, var(--bar-glass-shine) 60%, transparent),
inset 0 7px 9px -6px var(--bar-glass-depth),
inset 0 -9px 10px -8px var(--bar-glass-depth),
0 1px 2px rgba(23, 20, 31, .12),
0 16px 28px -18px rgba(23, 20, 31, .45);
--text: #ece9f7;
--text-light: #aaa5c0;
--text-faint: #7d7894;
--border: #2d2940;
--border-strong: #3d3856;
--table-head-bg: #201d2e;
--table-line: #262337;
--shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
--shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 48px rgba(0, 0, 0, .5);
--shadow-shell: 0 -2px 40px -20px rgba(0, 0, 0, .9);
--ok-bg: #16301f; --ok-text: #7fdc9b;
--done-text: #6fd870;
--warn-bg: #33290d; --warn-text: #f0cf5a;
--danger-bg: #3a1a1a; --danger-text: #ff8f86;
--info-bg: #16263d; --info-text: #8dbcf5;
--pill-bg: #2a2740; --pill-text: #c9c4de;
}
/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--primary-dark); text-decoration: none; }
/* Sin subrayado al pasar por encima. Con la mitad de los enlaces del ERP
pintados como botones —tarjetas, íconos de acción, pastillas— el subrayado
solo aparecía en unos pocos y se leía como un enlace roto entre los demás.
El estado se lo dan el color y el fondo, que ya cambian en `:hover`. */
a:hover { text-decoration: none; }
/* ── Orbes de fondo ────────────────────────────────────────────────────────
`mix-blend-mode: multiply` es lo que los hace funcionar sobre fondo claro:
tiñen el lienzo en vez de flotar encima como manchas. Con `normal` se ven
sucios y con opacidad alta, lavados.
------------------------------------------------------------------------ */
.orbs {
position: fixed;
inset: -10vh -10vw;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
/* Los mismos orbes, DENTRO de la tarjeta de una pantalla (Analíticas,
2026-10-04, de prueba): para que el vidrio de las tarjetas tenga qué dejar
pasar. QUIETOS mientras la pantalla corre y desde el techo de la tarjeta,
sin corte (Renzo): la primera versión arrancaba debajo de la banda y se le
veía el borde.
No puede ser `fixed`: se saldría de la tarjeta y taparía el menú. Es un
`sticky` que nace YA pegado. El marcado va después de la banda, así que el
margen negativo lo sube de sobra —200px, más que cualquier banda— y el
`top` lo deja ahí: empieza por encima del techo de la tarjeta, que recorta
lo que sobra, y no se mueve con el desplazamiento. El margen de abajo le
quita el alto: no empuja nada. Lo que viene después se pinta encima. */
.orbs.orbs-pantalla {
position: sticky; top: -132px; inset-inline: auto; bottom: auto;
height: calc(100vh + 132px);
margin: -200px calc(var(--content-pad) * -1) calc(var(--space-800) - 100vh);
}
.orbs-pantalla ~ * { position: relative; z-index: 1; }
/* El rango abre su menú sobre la rejilla, que viene después. */
.orbs-pantalla ~ .analytics-toolbar { z-index: 5; }
/* Rebotan suave, y se nota: las mismas derivas de la casa, más rápidas —a
20 s detrás de un vidrio esmerilado parecían quietas—, y cada una a su
paso para que no vayan en coro. */
.orbs-pantalla .orb { animation-duration: 11s; }
.orbs-pantalla .orb:nth-child(odd) { animation-duration: 8s; }
/* El rosado sube: pegado al piso de la ventana casi no se veía. */
.orbs-pantalla .orb-violet { bottom: 8%; }
/* En oscuro `multiply` los apaga contra el fondo: ahí suman luz. */
:root[data-theme="dark"] .orbs-pantalla .orb,
:root[data-theme="dark"] .orbs-dentro .orb { mix-blend-mode: screen; opacity: .3; }
/* Los orbes DENTRO de una caja (2026-10-09, el chat sin conversación): la
caja los recorta y lo que viene después se pinta encima. */
.orbs.orbs-dentro { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.orbs-dentro ~ * { position: relative; z-index: 1; }
.orbs-dentro .orb { animation-duration: 11s; }
.orbs-dentro .orb:nth-child(odd) { animation-duration: 8s; }
.orb {
position: absolute;
border-radius: 50%;
filter: blur(58px);
mix-blend-mode: multiply;
will-change: transform;
}
.orb-lavender {
width: 34vmax; height: 34vmax; top: 40%; left: 12%; opacity: .26;
background: radial-gradient(circle, #ded4ff 0%, #bda9ff 48%, transparent 72%);
animation: orb-drift-a 19s ease-in-out infinite;
}
.orb-cyan {
width: 28vmax; height: 28vmax; top: 2%; right: 2%; opacity: .42;
background: radial-gradient(circle, #7ee8f2 0%, #3ec9de 42%, transparent 70%);
animation: orb-drift-b 23s ease-in-out infinite;
}
.orb-yellow {
width: 22vmax; height: 22vmax; top: -14%; left: 4%; opacity: .36;
background: radial-gradient(circle, #fff08a 0%, #ffd84d 50%, transparent 88%);
animation: orb-drift-c 17s ease-in-out infinite;
}
.orb-violet {
width: 26vmax; height: 26vmax; bottom: -8%; right: 18%; opacity: .32;
background: radial-gradient(circle, #ff48f3a6 0%, #f05ce4a8 45%, transparent 70%);
animation: orb-drift-d 21s ease-in-out infinite;
}
.orb-glow {
width: 36vmax; height: 36vmax; top: 0; left: 50%;
transform: translateX(-50%); opacity: .30;
background: radial-gradient(circle, rgba(201, 184, 255, .9) 0%,
rgba(126, 232, 242, .35) 38%, transparent 66%);
filter: blur(70px);
mix-blend-mode: normal;
animation: orb-pulse 9s ease-in-out infinite;
}
@keyframes orb-drift-a {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(5vw, 4vh) scale(1.06); }
66% { transform: translate(-3vw, -3vh) scale(.95); }
}
@keyframes orb-drift-b {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-6vw, 5vh) scale(1.08); }
66% { transform: translate(3vw, -2vh) scale(.94); }
}
@keyframes orb-drift-c {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(4vw, 5vh) scale(1.12); }
}
@keyframes orb-drift-d {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-4vw, -5vh) scale(1.05); }
66% { transform: translate(3vw, 2vh) scale(.97); }
}
@keyframes orb-pulse {
0%, 100% { opacity: .22; transform: translateX(-50%) scale(1); }
50% { opacity: .34; transform: translateX(-50%) scale(1.1); }
}
/* ── Pantallas de autenticación ────────────────────────────────────────── */
.auth-stage {
position: relative;
z-index: 1;
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--space-400) + var(--sat)) var(--space-250) calc(var(--space-400) + var(--sab));
}
.auth-card {
width: 100%;
max-width: 408px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-500) var(--space-400) var(--space-400);
animation: card-rise .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes card-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-brand {
display: flex;
align-items: center;
gap: var(--space-100);
margin-bottom: var(--space-300);
}
/* El logo de verdad, desde el 2026-08-04. Antes había un cuadrado con
degradado y la palabra al lado: un marcador de posición que se quedó
desde que existe la pantalla. */
.auth-brand .brand-logo { height: 30px; }
/* La tienda apagada (`storefront/tienda_cerrada.html`) lleva la marca de la
empresa en vez de la de Agrupa, y a 32 px se perdía en la tarjeta. */
.auth-brand .company-mark { width: 56px; height: 56px; font-size: var(--fs-page); }
.auth-title {
font-size: var(--fs-page);
font-weight: 700;
letter-spacing: -.5px;
margin: 0 0 var(--space-075);
}
.auth-subtitle {
color: var(--text-light);
font-size: var(--fs-body);
margin: 0 0 var(--space-300);
}
/* El correo con el que se está entrando, en los pasos 2 y 3: ya se escribió
en el paso 1 y no se vuelve a pedir, pero tiene que estar A LA VISTA — es
la única forma de darse cuenta de un dedazo antes de pelearse con una
contraseña que sí era la correcta. */
.auth-who {
font-size: var(--fs-small);
color: var(--text-light);
margin: 0 0 var(--space-200);
}
.auth-who a { margin-left: var(--space-100); }
/* Un botón que se lee como enlace. Existe porque «entrar con mi contraseña»
tiene que MANDAR el correo que ya se escribió —y eso es un POST— pero no
es una acción principal: pintarlo de botón compite con «Entrar». */
.btn-link {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--primary);
cursor: pointer;
text-decoration: underline;
}
/* La otra puerta: es un formulario aparte —no se puede anidar uno dentro de
otro— así que sin esto los dos botones quedan pegados. */
.auth-alt { margin-top: var(--space-100); }
.auth-foot {
margin: var(--space-200) 0 0;
text-align: center;
font-size: var(--fs-small);
}
/* Lo que la IA conectada podrá y no podrá (pantalla de autorizar del MCP,
2026-10-28): dos tonos y un glifo en vez de un párrafo, para leerlo de un
vistazo antes de tocar «Autorizar». */
.auth-permisos {
list-style: none; margin: 0 0 var(--space-250); padding: 0;
display: flex; flex-direction: column; gap: var(--space-100);
font-size: var(--fs-small); color: var(--text);
}
.auth-permisos li { display: flex; gap: var(--space-100); align-items: flex-start; }
.auth-permisos svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: var(--space-025); }
.auth-permiso-si svg { color: var(--ok-text); }
.auth-permiso-no svg { color: var(--text-light); }
.auth-permiso-no { color: var(--text-light); }
.auth-vuelta { margin: var(--space-200) 0 0; text-align: center; }
/* Entrar con huella (2026-10-11): el paso de /entrar/ después del correo. */
.auth-huella { text-align: center; }
.auth-huella .huella-glifo { margin: var(--space-075) auto var(--space-200); color: var(--primary); }
/* La huella animada (`identity/_huella_glifo.html`, 2026-10-11): los nueve
trazos del glifo `huella` se dibujan de a uno, después baja una luz de
escaneo y queda un pulso. Todo con `currentColor`, así que la misma pieza
sirve morada sobre blanco (/entrar/) y blanca sobre la banda. Con
`.is-listo` en la pieza que la contiene, el dibujo cede al check. Con
«reducir movimiento» la deja quieta y completa el `*` universal del
bloque de movimiento reducido: los trazos terminan dibujados (`both`) y
la luz termina apagada. */
.huella-glifo {
position: relative;
display: inline-grid;
place-items: center;
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 16px;
overflow: hidden;
background: color-mix(in srgb, currentColor 14%, transparent);
animation: hg-pulso 2.8s ease-in-out 1.4s infinite;
}
.huella-glifo-grande { width: 76px; height: 76px; border-radius: 22px; }
.huella-glifo > svg { grid-area: 1 / 1; width: 62%; height: 62%; }
.huella-glifo-trazos path {
stroke-dasharray: 30;
stroke-dashoffset: 0;
animation: hg-trazo .7s ease-out both;
}
.huella-glifo-trazos path:nth-child(2) { animation-delay: .08s; }
.huella-glifo-trazos path:nth-child(3) { animation-delay: .16s; }
.huella-glifo-trazos path:nth-child(4) { animation-delay: .24s; }
.huella-glifo-trazos path:nth-child(5) { animation-delay: .32s; }
.huella-glifo-trazos path:nth-child(6) { animation-delay: .40s; }
.huella-glifo-trazos path:nth-child(7) { animation-delay: .48s; }
.huella-glifo-trazos path:nth-child(8) { animation-delay: .56s; }
.huella-glifo-trazos path:nth-child(9) { animation-delay: .64s; }
.huella-glifo-escaneo {
position: absolute;
left: 14%;
right: 14%;
top: 12%;
height: 2px;
border-radius: 2px;
background: currentColor;
box-shadow: 0 0 10px 2px currentColor;
opacity: 0;
animation: hg-escaneo 2.8s ease-in-out 1.1s infinite;
}
.huella-glifo-check { opacity: 0; transform: scale(.5); }
.is-listo .huella-glifo { animation: none; }
.is-listo .huella-glifo-trazos,
.is-listo .huella-glifo-escaneo { visibility: hidden; }
.is-listo .huella-glifo-check {
opacity: 1;
transform: none;
transition: opacity .25s ease-out, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes hg-trazo { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes hg-escaneo {
0% { top: 12%; opacity: 0; }
12% { opacity: 1; }
50% { top: 86%; opacity: 0; }
100% { top: 86%; opacity: 0; }
}
@keyframes hg-pulso {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 32%, transparent); }
50% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes hg-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* La lista de huellas del Perfil. */
.huellas { list-style: none; margin: 0; padding: 0; }
.huella {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-050) var(--space-150);
align-items: center;
padding: var(--space-150) 0;
border-bottom: 1px solid var(--border);
}
.huella:last-child { border-bottom: 0; }
.huella .field-hint { grid-column: 1; margin: 0; }
.huella-nombre { display: flex; gap: var(--space-100); align-items: center; }
.huella-nombre input { max-width: 260px; }
.huella-confirmar { margin-bottom: var(--space-150); }
/* La invitación de después de entrar: una banda de la marca y no una
tarjeta blanca (Renzo, 2026-10-11: «tiene que ser un banner más
visible»). Nace con `hidden` hasta que passkey.js confirma que hay
Touch ID / Face ID. */
.huella-invitar {
display: flex;
flex-wrap: wrap;
gap: var(--space-200) var(--space-200);
align-items: center;
margin-bottom: var(--space-200);
padding: var(--space-200) var(--space-300);
border-radius: var(--radius);
color: #fff;
background:
radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--primary) 55%, #fff) 0%, transparent 55%),
linear-gradient(115deg, var(--primary-dark), var(--primary));
box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 32%, transparent);
animation: hg-entra .45s ease-out both;
}
.huella-invitar .huella-glifo { background: rgba(255, 255, 255, .16); }
/* El texto pide 220px antes de dejar que los botones le quiten espacio: con
el Asistente abierto la banda mide la mitad, y entonces los botones bajan a
su propio renglón en vez de apretar la frase palabra por palabra. Mide la
banda, no la pantalla. */
.huella-invitar-texto { flex: 1 1 220px; min-width: 0; }
.huella-invitar-titulo { display: block; font-size: var(--fs-stat); line-height: 1.25; }
.huella-invitar-texto p { margin: var(--space-050) 0 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .86); }
.huella-invitar-texto .huella-invitar-error { color: #fff; font-weight: 600; }
.huella-invitar-botones { display: flex; gap: var(--space-100); flex-shrink: 0; }
.huella-invitar .huella-invitar-activar {
background: #fff;
color: var(--primary-dark);
border-color: transparent;
font-weight: 600;
}
.huella-invitar .huella-invitar-activar:hover:not(:disabled) { background: var(--primary-soft); }
.huella-invitar .huella-invitar-no {
background: transparent;
color: rgba(255, 255, 255, .86);
border-color: rgba(255, 255, 255, .35);
}
.huella-invitar .huella-invitar-no:hover { color: #fff; border-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
/* `hidden` TIENE que ganarle al `display` de estas piezas (ver `.bulkbar`):
passkey.js muestra y esconde con el atributo, y esta hoja no trae un
`[hidden]` global. Lo que se apaga así y declara `display`: la tarjeta de
la invitación (flex), sus botones (flex), el aviso `.alert` del Perfil
(flex: sin esto sale una barra roja vacía) y todo `.btn` (inline-flex:
«Agregar huella» sin soporte). El resto —`.field-error`, `.field-hint`,
`.auth-huella`, `.huella-confirmar`, los formularios de /entrar/— no
declara `display`, pero se cubren igual para que un cambio futuro no los
deje a la vista. */
.huella-invitar[hidden], .huella-invitar [hidden],
#seccion-huellas [hidden], .huella-confirmar[hidden], .huella-confirmar [hidden],
.auth-huella[hidden], .auth-huella [hidden],
form[data-passkey-correo][hidden], form[data-passkey-entrar][hidden] { display: none; }
@media (max-width: 600px) {
.huella-invitar { padding: var(--space-200); }
.huella-invitar-botones { width: 100%; }
.huella-invitar-botones .btn { flex: 1; justify-content: center; }
.huella { grid-template-columns: 1fr; }
}
/* Reveal escalonado: la tarjeta sube, y su contenido aparece detrás. */
.auth-card > * { animation: fade-up .45s ease both; }
.auth-card > *:nth-child(1) { animation-delay: .10s; }
.auth-card > *:nth-child(2) { animation-delay: .16s; }
.auth-card > *:nth-child(3) { animation-delay: .21s; }
.auth-card > *:nth-child(4) { animation-delay: .26s; }
.auth-card > *:nth-child(5) { animation-delay: .30s; }
@keyframes fade-up {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Formularios ───────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-200); }
/* Un grupo de casillas con su rótulo («Enviar a» de la OC, el cambio de
producto de un pedido): `