/* GDV — hoja de estilo única, escrita a mano. * * Sin framework, sin preprocesador y sin paso de compilación: lo que se lee acá * es lo que sirve el servidor. Un cambio de estilo es un cambio de este archivo, * revisable en el diff y sin un artefacto intermedio que pueda quedar viejo. * * Los **tokens de color** son la paleta GDV de `docs/GDV_DESIGN.md` (§4), en * dos temas: oscuro —el de siempre, y el que rige sin elección en un sistema * oscuro— y claro. La elección viaja en la cookie `tema`, que el servidor lee y * convierte en `data-tema` sobre `` (ver `base.html`): la página llega ya * pintada del tema correcto. Sin cookie decide `prefers-color-scheme`, acá. * Están escritos como tripletes HSL sin la función alrededor —`210 11% 7%` y no * `hsl(210 11% 7%)`— justamente para poder pedirle una versión translúcida al * mismo token: `hsl(var(--destructive) / .12)` es el tinte del rojo sin declarar * un segundo color que pueda desincronizarse del primero. Cada triplete lleva al * lado el hex del documento del que sale. * * El criterio de fondo no cambió: esto es una herramienta de trabajo, no una * landing. Densidad antes que aire. No hay animaciones, ni degradados, ni * sombras que no sean la del panel desplegado, ni un solo icono que no diga algo * que el texto no diga. * * =========================================================================== * LOS CUATRO ANCHOS * =========================================================================== * * La hoja es **mobile-first**: la regla base es la del celular y las `@media` * agregan columnas hacia arriba. Hay exactamente tres cortes: * * base ≥ 640px ≥ 1024px ≥ 1440px * celular tablet notebook monitor * * CSS no admite `var()` adentro de una `@media`, así que esos tres números se * escriben literales. **En toda la hoja no hay otro ancho de corte**, con una * sola excepción anotada donde aparece: `@media (min-width: 1900px)`, para los * dos cheques por fila del formulario de carga. * * No hay ninguna `@media (max-width: …)` de layout. Las dos únicas `max-width` * de la hoja son de preferencia —`prefers-color-scheme` y * `prefers-reduced-motion`— y no hablan de ancho. * * **Los tokens no se redefinen adentro de una `@media`.** Es una restricción de * la suite y no una preferencia: `tests/test_pantallas_diseno.py` lee los * bloques `:root` con una expresión sobre el archivo entero, y un segundo * `:root` adentro de una `@media` pisaría al de arriba y dejaría la paleta * medio leída. Lo que cambia con el ancho —el relleno del contenido, el ancho * del panel— se escribe en la regla que lo usa, no en el token. * * =========================================================================== * LAS OCHO REGLAS QUE NO SON COSMÉTICAS * =========================================================================== * * 1. **Densidad primero.** Se tienen que ver muchas filas sin scrollear. La fila * de datos ronda los 28px: tipografía de 15px con interlineado corto y 4px de * padding vertical, sin márgenes decorativos en la página. El «espacio * negativo generoso» del documento de diseño aplica a márgenes y tarjetas, * nunca a meter menos filas por pantalla: esa decisión ya estaba tomada. * 2. **Objetivos táctiles de 44px** en botones y campos, sin excepciones en las * acciones que están solas. La única que queda —la cruz que saca un alias de * un chip— está explicada donde aparece. * 3. **Los importes van en Space Mono, alineados a la derecha y con * `tabular-nums`.** Con ancho de dígito fijo, la longitud de la cifra *es* su * magnitud: un importe grande se distingue de uno chico sin leerlo, y dos * columnas de números se comparan renglón contra renglón. **Y van al cuerpo * del texto que acompañan**: la mono no se achica para que entre una columna * de más. Lo que decide qué columnas entran es la prioridad, no el cuerpo. * 4. **Los negativos van entre paréntesis** —los pone `formato.importe`— **y** en * rojo. Dos señales independientes: el color solo no alcanza para quien no lo * distingue. * 5. **Los estados se distinguen sin color**: además del tinte, el relleno, el * trazo punteado y el tachado dicen lo mismo que la palabra que llevan dentro. * 6. **El dato pesa más que su rótulo.** El saldo domina sobre la palabra * «Saldo», y el encabezado de una tabla es más tenue que los datos que * encabeza, nunca al revés. * 7. **El texto tiene largo de línea y los datos no.** Todo lo que se lee de * corrido lleva `--linea` (70ch); una tabla, una grilla de tarjetas o un * formulario de asiento usan todo el ancho que haya. Una tabla de operaciones * no es un párrafo, y en un monitor esa diferencia es un tercio de la * pantalla. * 8. **Nada en versales.** La jerarquía la dan el peso y el color. Lo que está * en mayúsculas es porque **es** un dato que se guarda así —un nombre del * padrón, un código de cuenta, el «NO TOMAR» que escribe Nosis—, nunca porque * lo pinte esta hoja. */ /* --- Tipografía: las dos familias, autoalojadas ------------------------- */ /* Servidas desde `static/fuentes/` y no desde fonts.googleapis.com. Una llamada * a un tercero en cada carga es una dependencia de red que no hace falta: en una * oficina con conexión mala se nota, y el día que Google no conteste la interfaz * tiene que verse igual. Es la misma razón por la que htmx está vendorizado. * * `font-display: swap`: mientras el archivo viaja se lee en la fuente del * sistema. Una pantalla en blanco esperando una tipografía es exactamente lo * contrario de lo que esta interfaz necesita. * * Los `unicode-range` son los de Google: el archivo «latin» alcanza para todo el * castellano y el «latin-ext» sólo se descarga si aparece un carácter que lo * pida. Son dos pedidos posibles, no dos seguros. */ @font-face { font-family: "DM Sans"; src: url("fuentes/dm-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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: "DM Sans"; src: url("fuentes/dm-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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: "Space Mono"; src: url("fuentes/space-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Space Mono"; src: url("fuentes/space-mono-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; 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: "Space Mono"; src: url("fuentes/space-mono-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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: "Space Mono"; src: url("fuentes/space-mono-700-latin-ext.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; 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; } /* --- Tokens -------------------------------------------------------------- */ :root { /* El tema oscuro, que es el de base: el de siempre, el del login —que no * conmuta— y el que rige cuando no hay cookie y el sistema es oscuro. Los * valores son los de GDV_DESIGN §4 tal cual (el hex va al lado); si hay que * cambiar la paleta se cambia acá y en ningún otro lado del archivo hay un * color escrito. */ color-scheme: dark; --background: 210 10.5% 7.5%; /* #111315 fondo general */ --foreground: 220 14.3% 95.9%; /* #F3F4F6 texto principal */ --card: 214 12.7% 10.8%; /* #181B1F superficie / tarjeta */ --card-border: var(--border); --border: 215 11.1% 21.2%; /* #30353C bordes */ --sidebar: var(--card); --sidebar-border: var(--border); --popover: 216 13.5% 14.5%; /* #20242A superficie elevada */ /* El azul del documento es #2477D2 (48,2% de luminosidad): con blanco encima * queda en 4,52:1, sin margen. Mismo tono y saturación, un punto más oscuro, * y el botón principal pasa con 4,7. El hover, un punto más claro que el * primario: se enciende, y el blanco sigue llegando. */ --primary: 211.4 70.7% 47%; /* #2477D2, oscurecido hasta contrastar */ --primary-hover: 212 77.5% 48%; /* #3287E5, ídem */ --primary-foreground: 0 0% 100%; --secondary: 215 12% 17%; --secondary-foreground: var(--foreground); --muted: var(--popover); --muted-foreground: 217 10.8% 67.5%; /* #A3AAB5 texto secundario */ --accent: 216 13% 15.5%; --accent-foreground: var(--foreground); --destructive: 0 78.4% 63.7%; /* #EB5A5A error */ --success: 153 48.7% 44.3%; /* #3AA877 éxito */ --warning: 40 72.7% 55.5%; /* #E0A83B advertencia */ --enfasis: 39 86.6% 64.9%; /* #F3BE58 amarillo de énfasis */ --marca: var(--foreground); --input: 215 11% 30%; --ring: var(--primary-hover); --sombra: 220 40% 2%; /* El filo que dice «esta tabla sigue a la derecha». **No es `--sombra`**, y * por eso es un token propio: en el tema claro una sombra es más oscura que la * superficie, y en el oscuro no hay adónde bajar —la superficie está en 10,8 % * de luminosidad y la sombra en 2 %—. Medido sobre las capturas: en claro el * borde va de 255 a 179 (76 niveles) y en oscuro de 24 a 17, **siete niveles**, * o sea ninguna señal; y desde §12.12 la barra de scroll se apaga a partir de * 640, así que en oscuro no quedaba **nada** que dijera que la cartera tiene * seis columnas más. Acá el filo es más claro que la superficie, que es la * única dirección que queda: la señal es el contraste, no el color. */ --sombra-borde: 215 11% 50%; /* Los `-text`: el mismo color usado como **texto sobre el fondo**, no como * relleno. Un azul o un rojo que rinde bien de relleno no siempre llega a * 4,5:1 como letra chica, así que estas variantes suben (acá) o bajan (en el * tema claro) la luminosidad del mismo tono hasta que contrasta, también * sobre los tintes translúcidos donde se usan —el chip azul, el badge verde—. * Los valores salen de calcular el contraste, no del ojo: hay un test que los * verifica en los dos temas. */ --primary-text: 212 78% 62%; --destructive-text: 0 78% 72%; --success-text: 153 49% 53%; --warning-text: var(--warning); /* en oscuro el ámbar ya contrasta */ --enfasis-text: var(--enfasis); /* --- Medidas. No son colores y no salen del documento: salen de la mano y * del dedo que usan esto. --- */ /* La unidad de aire. Todo margen y todo hueco de la hoja es un múltiplo. */ --paso: 8px; /* Alto mínimo de un objetivo táctil, y el de la acción principal. Están acá y * no repetidos en cada regla para que subirlos sea una línea. 44px es el * mínimo que pide GDV_DESIGN §10. */ --toque: 44px; --toque-grande: 48px; /* **Dos radios y no más.** El grande es de las cajas —tarjeta, marco, panel, * la hoja de «Más»— y el chico es de lo que se toca y de lo que se lee como * etiqueta —control, badge, chip, marca—. No hay píldoras: un badge es un * rectángulo redondeado, y lo que lo distingue de un botón es que no tiene * borde de control ni cursor. Si dos elementos se ven distintos, es porque * SON distintos. */ --radio: 8px; --radio-chico: 4px; /* El largo de línea máximo del texto que se lee de corrido. Es la mitad de la * regla 7 del encabezado: lo lleva `.texto` y `.nota`, y **nada más**. Antes * había veintidós topes de ancho repartidos por el archivo —92ch, 68ch, 60ch, * 52ch, 46ch, 44ch, 40ch, 34ch, 24ch y un 480px— puestos pantalla por * pantalla, y varios caían sobre datos, que no son texto. */ --linea: 70ch; /* El esqueleto. El alto de la cabecera está escrito porque lo necesitan dos * reglas que no se ven entre sí: la propia cabecera y la marca del panel * lateral, que tiene que quedar en su mismo renglón. Antes era implícito —44 * del control más el relleno— y estaba escrito dos veces. * * **Eran tres**: el tercer uso era el `top` del `sticky` de la propuesta del * diálogo, que se fue con el panel fijo (ver el bloque del monitor, «EL * DIÁLOGO»). El token se queda igual y el contrato §12.1 lo justifica con ese * tercer uso, que ya no existe: hay que corregirlo ahí. */ --cabecera: 56px; --barra: 56px; /* la barra inferior de navegación, sólo celular */ --lateral: 256px; /* el panel de navegación expandido */ --lateral-angosta: 64px; /* el panel colapsado */ /* La escala tipográfica. **Cinco pasos**, no ocho: cada uno tiene un trabajo y * se nombra por lo que hace, no por su tamaño. Los rangos son los de * GDV_DESIGN §5. * * Los tres que se fueron: `--t-menor` (12px) era `--t-rotulo` con otro * nombre; `--t-secundario` (13px) era un paso entre 12 y 15 que obligaba a * decidir de a un caso; `--t-cifra` (28px) era `--t-titulo` con otro nombre. * Con cinco, elegir es leer la lista. */ --t-rotulo: 12px; /* etiqueta de campo, encabezado de columna, pista, pie, badge */ --t-dato: 15px; /* celda de tabla, botón, navegación, nota */ --t-cuerpo: 16px; /* texto de corrido, y **todo campo de formulario**: por * debajo de 16, iOS hace zoom al enfocar, y el zoom en la * pantalla de carga deja media conversación fuera de cuadro */ --t-seccion: 18px; /* h2, la frase de la propuesta, el título de una tarjeta */ --t-titulo: 28px; /* h1, y la cifra de una tarjeta: 28 contra 12 es más del * doble, y es lo que hace que el número domine al rótulo */ --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* §14.F — los colores oficiales de Nosis, extraídos del HTML del propio * correo (`.h-pref.hAm/.hAz/.hRo/.hVe/.hNeu` en un adjunto real, y los cinco * de la situación del BCRA de un envío de CI). Son de Nosis y no del sistema * de diseño de GDV: **fijos en los dos temas, a propósito** —es lo que la * oficina ya tiene aprendido de mirar el correo, y un verde o un amarillo * que cambiara con el tema dejaría de ser reconocible—. Se documentan acá y * en el README, «Densidad y formato». * * El fondo es el que Nosis publica, tal cual, y no se toca nunca —es lo que * la gente reconoce—. El texto es el que Nosis declara, salvo donde no * llega a 4,5:1: ahí se ajustó **sólo el texto**, y se anota por qué en el * mismo renglón. `--situacion-4-texto` es el único caso: blanco sobre * `#FF0000` da 4,0:1, abajo del mínimo; negro da 5,25:1. */ --situacion-1-fondo: 120 100% 25.1%; /* #008000 */ --situacion-1-texto: 0 0% 100%; /* #FFFFFF */ --situacion-2-fondo: 60 100% 50%; /* #FFFF00 */ --situacion-2-texto: 0 0% 0%; /* negro */ --situacion-3-fondo: 300 100% 50%; /* #FF00FF */ --situacion-3-texto: 0 0% 0%; /* negro */ --situacion-4-fondo: 0 100% 50%; /* #FF0000 */ --situacion-4-texto: 0 0% 0%; /* negro y no blanco: ver la nota de arriba */ --situacion-5-fondo: 0 100% 25.1%; /* #800000 */ --situacion-5-texto: 0 0% 100%; /* #FFFFFF */ /* La columna `SC` —Boletines Oficiales, cambios societarios— en el azul de * Nosis: `.h-pref.hAz` de un adjunto real (`background:#99f`, * `border-color:#009`), el mismo `#009` que usa `.cAz` como color de texto * en ese HTML. */ --sc-fondo: 240 100% 80%; /* #9999FF */ --sc-texto: 240 100% 30%; /* #000099 */ } /* El tema claro (GDV_DESIGN §4), elegido con la cookie. Redefine sólo colores: * las medidas y la tipografía son las mismas en los dos temas. Los alias * —`--card-border`, `--ring` y compañía— no se repiten: un `var()` se resuelve * con el valor vigente, así que siguen al tema solos. * * **Este bloque tiene un gemelo** en el `@media (prefers-color-scheme: light)` * de abajo, para el que no eligió tema y usa un sistema claro. Tienen que * declarar exactamente lo mismo —hay un test que compara los dos bloques * token por token— porque son el mismo tema por dos puertas distintas. */ :root[data-tema="claro"] { color-scheme: light; --background: 43 30.4% 95.5%; /* #F7F5F0 fondo general */ --foreground: 215 29.3% 16.1%; /* #1D2735 texto principal */ --card: 0 0% 100%; /* #FFFFFF superficie / tarjeta */ --border: 39 21.9% 87.5%; /* #E6E1D8 bordes */ --popover: 0 0% 100%; --primary: 210 79.5% 43.9%; /* #176FC9 azul GDV interactivo */ --primary-hover: 210 82.7% 36.3%; /* #105CA9 azul GDV hover */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 100%; --muted: 40 22% 90%; --muted-foreground: 220 9% 41%; /* #6B7280 oscurecido hasta 4,5:1 */ --accent: 43 25% 91%; --destructive: 0 57.3% 49.6%; /* #C73636 error */ --success: 154 58.1% 32.7%; /* #23845A éxito */ --warning: 37 74.6% 44.7%; /* #C7851D advertencia */ --enfasis: 39 87% 60.8%; /* #F2B544 amarillo de énfasis */ --marca: 213 62.2% 24.9%; /* #183B67 azul GDV principal */ --input: 39 15% 72%; --sombra: 220 30% 15%; /* En claro el filo del desbordamiento **sí** es una sombra: hay adónde bajar. */ --sombra-borde: var(--sombra); --primary-text: 210 79.5% 36%; --destructive-text: 0 57.3% 41%; --success-text: 154 58.1% 24%; --warning-text: 37 74.6% 31%; --enfasis-text: 39 87% 31%; } /* Sin cookie manda el sistema. El `:not([data-tema])` es lo que hace que la * elección explícita —incluido el login, que fija oscuro— le gane al sistema. * Es el gemelo textual del bloque de arriba: mismos tokens, mismos valores. */ @media (prefers-color-scheme: light) { :root:not([data-tema]) { color-scheme: light; --background: 43 30.4% 95.5%; /* #F7F5F0 fondo general */ --foreground: 215 29.3% 16.1%; /* #1D2735 texto principal */ --card: 0 0% 100%; /* #FFFFFF superficie / tarjeta */ --border: 39 21.9% 87.5%; /* #E6E1D8 bordes */ --popover: 0 0% 100%; --primary: 210 79.5% 43.9%; /* #176FC9 azul GDV interactivo */ --primary-hover: 210 82.7% 36.3%; /* #105CA9 azul GDV hover */ --primary-foreground: 0 0% 100%; --secondary: 0 0% 100%; --muted: 40 22% 90%; --muted-foreground: 220 9% 41%; /* #6B7280 oscurecido hasta 4,5:1 */ --accent: 43 25% 91%; --destructive: 0 57.3% 49.6%; /* #C73636 error */ --success: 154 58.1% 32.7%; /* #23845A éxito */ --warning: 37 74.6% 44.7%; /* #C7851D advertencia */ --enfasis: 39 87% 60.8%; /* #F2B544 amarillo de énfasis */ --marca: 213 62.2% 24.9%; /* #183B67 azul GDV principal */ --input: 39 15% 72%; --sombra: 220 30% 15%; /* En claro el filo del desbordamiento **sí** es una sombra: hay adónde bajar. */ --sombra-borde: var(--sombra); --primary-text: 210 79.5% 36%; --destructive-text: 0 57.3% 41%; --success-text: 154 58.1% 24%; --warning-text: 37 74.6% 31%; --enfasis-text: 39 87% 31%; } } /* --- Base --------------------------------------------------------------- */ * { box-sizing: border-box; } /* El `color-scheme` —que pinta los controles nativos: el desplegable abierto, * la barra de scroll, el calendario de un `date`— vive en los bloques de tokens * de arriba: es del tema, no de la base. */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); /* 16px de base. Menos que esto se lee con esfuerzo en una notebook, y el * esfuerzo se paga en errores de lectura sobre columnas de números. Las tablas * bajan a 15px, que es donde se compra la densidad. */ font: var(--t-cuerpo)/1.45 var(--sans); /* Las dos familias vienen con `tabular-nums` disponible; acá se pide de una * vez para todo el documento, así ninguna cifra queda con dígitos de ancho * variable por haberse olvidado una clase. */ font-variant-numeric: tabular-nums; } a { color: hsl(var(--primary-text)); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: var(--t-titulo); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--paso); /* Un título largo —«Cuentas corrientes», el nombre de un cliente— tiene que * poder cortar en un celular en vez de estirar la página. */ overflow-wrap: break-word; } /* El título de una sección adentro de una pantalla: bastante más chico que el * `h1` y con aire arriba, que es lo que separa dos tablas seguidas sin dibujar * una línea. */ h2 { font-size: var(--t-seccion); font-weight: 600; letter-spacing: 0; margin: calc(var(--paso) * 2) 0 var(--paso); } /* El título de un bloque adentro de una sección —cada bloque del asiento, cada * sección del detalle de Nosis—. Es el escalón que faltaba: hasta acá esos * títulos se dibujaban con el cuerpo de un rótulo y en versales, y se leían * como etiquetas de campo en vez de como encabezados. */ h3, h4 { font-size: var(--t-dato); font-weight: 600; letter-spacing: 0; margin: var(--paso) 0 6px; } /* Lo monoespaciado que no es un importe: un código de cuenta, un número de * operación, un CUIT. **Sin `font-size`**: se dibuja al cuerpo del texto que lo * rodea. Achicarlo un 12% era lo que hacía que un código de cuenta adentro de * una celda se leyera más chico que el resto de la celda. */ code, .codigo, .num-plano { font-family: var(--mono); } /* --- El esqueleto: la aplicación, el panel y la columna ------------------ */ /* Tres piezas y un orden que no cambia nunca: el panel de navegación, la * cabecera y el contenido. Lo que cambia con el ancho es **dónde está el * panel** —abajo y fuera de pantalla en un celular, al costado desde una * tablet—, y eso se escribe todo junto en «Los tres anchos», al final de esta * sección. Lo que sigue hasta ahí es la regla del celular, que es la base. * * Las dos áreas del contrato §3 son una grilla y no un `flex` porque una grilla * dice el ancho del panel **en el contenedor** —una pista— y no en el panel: el * riel de 64px, el panel de 256 y el celular sin panel son tres valores de la * misma declaración, y el `