/* ============================================================================
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;
/* 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;
/* ── Espaciado ───────────────────────────────────────────────────────
Seis pasos sobre una rejilla de 4. Antes había veinticinco valores
distintos, del 1px al 54px, sin relación entre ellos.
tiendapp usa 14 y 18 en varios sitios, que quedan fuera de la rejilla.
Se redondean a 16 y 20: la diferencia no se ve, y una rejilla con dos
excepciones deja de ser una rejilla al tercer componente. */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 32px;
/* El octavo escalón, que llegó con el árbol de la lista de etiquetas
(2026-09-09). La escala es ORDINAL a partir del sexto —`--sp-7` son 32
y no 28—, así que el que sigue es el ocho y no un `--sp-10`: los
números nombran el peldaño, no los píxeles. */
--sp-8: 40px;
/* 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(--sp-3) * 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 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);
/* 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: #b3382e;
--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;
}
/* ── 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;
}
.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(32px + var(--sat)) 20px calc(32px + 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: 40px 36px 32px;
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: 9px;
margin-bottom: 26px;
}
/* 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; }
.auth-title {
font-size: var(--fs-page);
font-weight: 700;
letter-spacing: -.5px;
margin: 0 0 6px;
}
.auth-subtitle {
color: var(--text-light);
font-size: var(--fs-body);
margin: 0 0 26px;
}
/* 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 18px;
}
.auth-who a { margin-left: 8px; }
/* 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: 10px; }
.auth-foot {
margin: 18px 0 0;
text-align: center;
font-size: var(--fs-small);
}
/* 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: 17px; }
.field label {
display: block;
font-size: var(--fs-small);
font-weight: 600;
color: var(--text-light);
margin-bottom: 7px;
}
/* El rótulo y su `(i)` en una fila. El rótulo es `display: block`, así que sin
esto el ícono caía al renglón siguiente y quedaba flotando sobre el control.
El `margin-bottom` se muda del rótulo a la fila, o se sumaban dos. */
.field-label { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.field-label > label { margin-bottom: 0; }
/* Por ELEMENTO y no por `.field`, y es la tercera vez que esta forma aparece.
Estaba como `.field input[...]`, así que un `` que no viviera dentro de
un `.field` caía al control por omisión del navegador — más angosto, con otra
letra y sin el foco del ERP. Ya pasó con el filtro de texto de la F1-b, que
por eso tiene su propia guarda, y volvió a pasar con la casilla de comentario
de la ficha del tercero. Dos veces es casualidad; tres es el selector.
El ancho es lo único que se queda en `.field`: adentro de un campo el control
llena su columna, pero en una fila —la casilla de comentario al lado de su
botón— es el `flex` quien decide, y un `width: 100%` ahí lo empuja fuera. */
/* `number` e `input:not([type])` entran los dos, y llegaron por caminos
distintos a la MISMA forma de defecto: la regla estaba escrita y no alcanzaba
al control.
`number` lo midió la ficha del producto —el monto de una línea de costo salía
con el borde gris del navegador, radio 0 y 22px de alto contra los 34 del
concepto de al lado—. Son once controles en tres pantallas.
`input:not([type])` lo midió el editor de formularios: un `` sin
atributo `type` ES un campo de texto —lo dice el navegador— pero
`input[type="text"]` NO lo selecciona, y hay 24 escritos así. El título del
paso medía 240px al lado de un textarea de ancho completo, sin padding y sin
foco.
Que dos fases lo encontraran por separado es el dato: la lista de selectores
es la que se queda atrás cada vez que alguien escribe un control nuevo. */
input[type="email"],
input[type="text"],
input[type="number"],
input[type="password"],
input[type="datetime-local"],
input:not([type]) {
padding: var(--sp-2) var(--sp-3);
font-family: inherit;
font-size: var(--fs-body);
color: var(--text);
background: #fff;
border: 1px solid var(--border-strong);
border-radius: var(--radius-field);
outline: none;
transition: border-color .16s, box-shadow .16s;
}
/* `number` NO va acá: su `width` ya lo fija el bloque de controles del final,
y repetirlo es exactamente lo que `test_no_selector_sets_the_same_property_in_two_places`
existe para impedir. */
.field input[type="email"],
.field input[type="text"],
.field input[type="password"],
.field input[type="datetime-local"],
.field input:not([type]) { width: 100%; }
input[type="email"]:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus,
input:not([type]):focus {
border-color: var(--primary);
box-shadow: 0 0 0 3.5px var(--primary-soft);
}
input[aria-invalid="true"] {
border-color: var(--danger-text);
}
/* Las reglas de contraseña las emite AUTH_PASSWORD_VALIDATORS como un
ya armado (password_validators_help_text_html), así que el estilo tiene que
apuntar a esa lista y no a un marcado propio. Se muestran como ayuda antes
de escribir, no como reproche después. */
/* La ayuda que escribe la plantilla. `.field-help` es la del `help_text` del
widget —que en la pantalla de contraseña trae una lista dentro— y por eso
siguen siendo dos clases; comparten la tipografía en una sola regla para
que no se separen. `.field-hint` venía de la F1-a sin ninguna. */
/* La etiqueta de un campo con un control a su derecha. Lo estrena la ficha del
artículo: el interruptor «Editar como HTML» tiene que estar PEGADO a lo que
gobierna —el cuerpo— y no perdido al final del formulario, porque la
pregunta que responde es «con qué edito esto». */
/* Dos casillas que son UN filtro: desde/hasta, mínimo/máximo. Lado a lado
porque son los dos extremos de lo mismo — una debajo de la otra las lee
como dos preguntas distintas. En el celular caen a una columna. */
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .field-pair { grid-template-columns: 1fr; } }
.field-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.field-head label { margin-bottom: 0; }
.field-hint, .field-help {
font-size: var(--fs-small); line-height: 1.45; color: var(--text-light);
}
.field-hint { margin: 6px 0 0; }
.field-help { margin-top: 9px; }
.field-help ul {
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-small);
color: var(--text-faint);
line-height: 1.55;
}
.field-help li { padding-left: 15px; position: relative; }
.field-help li::before {
content: '';
position: absolute;
left: 3px; top: 8px;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--border-strong);
}
.field-error {
margin: 7px 0 0;
font-size: var(--fs-small);
font-weight: 500;
color: var(--danger-text);
}
/* ── Fortaleza de contraseña ───────────────────────────────────────────────
El estado lo calcula el servidor (kernel/identity/password_feedback.py) con
los MISMOS validadores que rechazan al enviar. Aquí solo se pinta.
------------------------------------------------------------------------ */
.pw-feedback { margin-top: 10px; }
.pw-feedback:empty { display: none; }
.pw-strength {
display: flex;
gap: 5px;
}
.pw-seg {
flex: 1;
height: 5px;
border-radius: 99px;
background: var(--border);
transition: background .28s ease;
}
/* El nivel llena tantos segmentos como su número. La CANTIDAD es la señal
que sobrevive a la ceguera al color; el tono solo la refuerza. */
.pw-strength[data-level="1"] .pw-seg:nth-child(-n+1) { background: var(--strength-1); }
.pw-strength[data-level="2"] .pw-seg:nth-child(-n+2) { background: var(--strength-2); }
.pw-strength[data-level="3"] .pw-seg:nth-child(-n+3) { background: var(--strength-3); }
.pw-strength[data-level="4"] .pw-seg:nth-child(-n+4) { background: var(--strength-4); }
/* Solo se listan las reglas pendientes: una que se cumple, desaparece. */
.pw-rules {
margin: 11px 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-small);
line-height: 1.45;
color: var(--text-light);
}
.pw-rules li {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 2.5px 0;
animation: rule-in .2s ease both;
}
.pw-rules svg {
width: 13px; height: 13px;
flex-shrink: 0;
margin-top: 3px;
color: var(--danger-text);
}
@keyframes rule-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
.pw-ready {
display: flex;
align-items: center;
gap: 7px;
margin: 11px 0 0;
font-size: var(--fs-small);
font-weight: 600;
color: var(--ok-text);
animation: rule-in .22s ease both;
}
.pw-ready svg { width: 14px; height: 14px; flex-shrink: 0; }
.alert {
display: flex;
gap: 9px;
padding: 11px 13px;
border-radius: var(--radius);
font-size: var(--fs-body);
font-weight: 500;
margin-bottom: 20px;
}
.alert-danger { background: var(--danger-bg); color: var(--danger-text); }
.alert-warn { background: var(--warn-bg); color: var(--warn-text); }
.alert-ok { background: var(--ok-bg); color: var(--ok-text); }
.alert svg { flex-shrink: 0; margin-top: 1px; }
/* ── Botones ───────────────────────────────────────────────────────────── */
/* 12px, decidido mirando la pantalla. El escalón de arriba —14.5— dejaba los
controles pesados al lado del texto de la interfaz.
Los campos de TEXTO no bajaron con ellos, y eso no es una inconsistencia:
iOS Safari hace zoom a la página al enfocar un campo de menos de 16px, así
que ahí el tamaño no es una decisión estética sino una página que salta y
hay que volver a alejar a mano.
El relleno se queda en 12px/20px: bajar la letra sin bajar el relleno es lo
que mantiene el botón por encima de los 40px de alto, que es lo que un
pulgar necesita. */
/* ── El sistema de botones ─────────────────────────────────────────────────
TRES tamaños y UN radio (Renzo, 2026-08-14). Antes había dos tamaños con
ocho píxeles de diferencia y ningún criterio escrito de cuándo usar cuál,
así que la misma acción salía chica en una pantalla y grande en la de al
lado.
.btn 38px la acción de una pantalla o de un formulario
.btn-small 30px dentro de una fila, una banda o una tarjeta
.btn-icon 30px cuadrado, solo glifo, con `aria-label`
El RADIO es `--radius-field` y no `--radius`: aquél es el token de un
CONTROL —el mismo del campo de texto y del `select`— y éste el de una
TARJETA. Un botón al lado de un campo con dos radios distintos se lee
como dos sistemas; con el mismo, como una fila de controles. Es el mismo
argumento que ya está escrito en `--radius-field`.
------------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
padding: 11px var(--sp-5);
font-family: inherit;
font-size: var(--fs-body);
font-weight: 600;
line-height: 1;
border: 1px solid transparent;
border-radius: var(--radius-field);
cursor: pointer;
transition: background .16s, box-shadow .16s, transform .08s;
}
/* El glifo de un botón se dimensiona ACÁ y no en el `