/* Lenguaje visual de la app. * * Se carga DESPUÉS de Bootstrap 5.3.3 y lo redefine sobreescribiendo sus * variables CSS (--bs-*), que es lo que permite cambiar el aspecto de botones, * tablas y campos sin tocar ni un template. * * Lo cargan base.html y las cuatro pantallas que arman su propio * (los tres auth/ y publico/privacidad). tests/test_estaticos_en_templates.py * garantiza que no se olvide ninguna. */ /* --- Tipografía ------------------------------------------------------------ Inter, self-hosteada. `swap` y la pila del sistema como fallback: si el archivo no carga, la app degrada a lo que se veía antes en vez de quedarse sin texto. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; /* variable: un archivo cubre todos los pesos */ font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); } :root { --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } body { letter-spacing: -.005em; } /* --- Paleta ---------------------------------------------------------------- UN SOLO ACENTO. Antes convivían tres colores haciendo el mismo trabajo: el botón primario en grafito (--app-accion), los links y lo activo en celeste (--app-senal), y el celeste crudo del logo (--app-marca) de filete. Encima se filtraban cinco lugares con el #0d6efd de Bootstrap que nadie había elegido (ver "Fugas del azul de Bootstrap" más abajo). Ahora la acción principal, lo que señala y lo que se puede tocar salen del mismo tono. --app-acento es #0C6F9F: el celeste del isotipo bajado hasta 5.54:1 sobre blanco. Se prefirió a un #0E7DAF más cercano al logo porque ese da 4.59:1 —pasa AA raspando— y el botón primario lleva texto de 14px, donde 4.5:1 es el piso y no la meta. Mismo criterio con el que se eligió --app-exito (ver abajo). Los dos celestes son indistinguibles a ojo; el margen no. Lo que se perdió a propósito: el color ya no distingue "esto ejecuta algo" de "esto te lleva a otro lado". Eso ahora lo dicen la sombra y el peso de .btn-primary. Era el precio de tener un solo acento y se pagó a sabiendas. Ver tests/test_paleta_contraste.py. */ :root { /* La familia completa del acento: pleno, hover, fondo teñido y filete. */ --app-acento: #0C6F9F; --app-acento-hover: #0B6690; --app-acento-suave: #E6F3FA; --app-acento-borde: #9FD3EE; /* Los dos plenos otra vez, en decimal. Hace falta aparte porque `rgba()` no puede componerse a partir de un color hex, y hay dos consumidores que lo necesitan: el anillo de foco de los campos (que lleva canal alpha) y las utilidades de Bootstrap, que leen las variables *-rgb y no el hex. Si cambia un hex de acá arriba, cambia su decimal acá abajo. */ --app-acento-rgb: 12, 111, 159; --app-acento-hover-rgb: 11, 102, 144; /* Los nombres viejos siguen vivos como alias. Se conservan porque los usa medio archivo y renombrarlos no movería un píxel; lo que cambió es que ahora los siete salen de la misma familia. Leídos hoy son la historia de la paleta: --app-accion era el grafito de la acción, --app-senal el celeste de lo activo, y eran dos colores distintos. */ --app-accion: var(--app-acento); --app-accion-hover: var(--app-acento-hover); --app-senal: var(--app-acento); --app-senal-rgb: var(--app-acento-rgb); --app-senal-osc: var(--app-acento-hover); --app-senal-bg: var(--app-acento-suave); --app-senal-borde: var(--app-acento-borde); /* Gris carbón, sin cambios. No compite con el acento: #0C6F9F y #171B22 son dos colores distintos, no dos pasos del mismo, y se separan 3.12:1 — lo vigila test_el_boton_primario_no_se_pierde_contra_el_navbar. */ --app-navbar: #171B22; /* El celeste crudo del isotipo, 1.9:1 sobre blanco. NO lo usa ninguna regla: el logo es logo.png y ya lo trae pintado, y el filete del sidebar —su último consumidor— directamente dejó de existir cuando el menú perdió las cajas (el activo se marca solo con el fondo). Queda declarado como referencia, que es lo que hay que mirar si alguna vez se rehace el isotipo o hace falta un acento sobre el navbar oscuro. Nunca como color de texto. */ --app-marca: #3EBEFF; --app-texto: #1A2230; --app-texto-2: #5A6474; /* --app-rotulo da 3.06:1 sobre blanco: alcanza para 3:1 de componente no textual (WCAG), como el ícono de los botones fantasma de fila. NO sirve como color de texto (hace falta 4.5:1) — para eso está --app-rotulo-texto, un poco más oscuro, mismo tono gris azulado. Si estás por escribir `color: var(--app-rotulo)` sobre texto, es --app-rotulo-texto. */ --app-rotulo: #8A94A4; /* Escala proporcional de --app-rotulo (mismo matiz, R/G/B en la misma razón) hasta el gris más claro de esa familia que sigue dando ≥4.6:1 sobre blanco: da 4.649:1. Un paso más claro (#6E7683) cae a 4.583:1, por debajo del margen pedido. Ver tests/test_paleta_contraste.py. */ --app-rotulo-texto: #6D7582; --app-borde: #DFE3E9; /* El mismo borde, un paso más marcado, para cuando el mouse está encima. Estaba escrito tres veces como literal en botones y cápsulas. */ --app-borde-fuerte: #C9CFD8; --app-borde-suave: #EEF1F4; --app-fondo: #F5F7F9; /* Botón neutro y hover de las acciones de fila. Van acá y no como literales sueltos en la regla de botones porque tests/test_paleta_contraste.py solo vigila tokens: un color que vive únicamente dentro de una regla puede bajar de AA sin que nada se entere (pasó con --app-exito, ver abajo). */ --app-neutro-texto: #3D4757; --app-peligro: #C92A2A; --app-peligro-bg: #FDECEC; --app-peligro-borde: #F5CCCC; --app-alerta: #B45309; --app-alerta-bg: #FEF6E7; /* #15803D original daba 4.496:1 sobre --app-exito-bg — por debajo del 4.5:1 de AA. #147D3B dobla la apuesta a 4.68:1, con margen real y no al raspar. No se tocó el fondo. */ --app-exito: #147D3B; --app-exito-bg: #E8F6EC; --app-exito-borde: #BFE3CD; /* El ámbar no tenía borde propio y las plantillas escribían `border-warning-subtle` de Bootstrap, que no está afinado para esta paleta. Mismo criterio que --app-exito-borde y --app-peligro-borde. */ --app-alerta-borde: #F3DFB8; /* Las mismas dos señales, atenuadas, para RELLENOS grandes: las barras del gráfico de Posición. El rojo y el verde plenos están calibrados para texto y botones, donde ocupan pocos píxeles; en una barra de doscientos píxeles de ancho gritan y le ganan al número que tienen al lado, que es lo que hay que leer. Los dos se aclaran en la MISMA medida (25 % de blanco) para no desbalancear uno contra el otro, que es lo que importa cuando conviven en el mismo gráfico. El piso acá no es 4,5:1 sino 3:1 —son elementos gráficos, no texto (WCAG 1.4.11)—. Medido: el rojo aguanta hasta 35 % de blanco y el verde hasta 30 % antes de caer del piso. Se para un paso más acá, con 3,71:1 y 3,26:1, por el mismo criterio con el que se eligió --app-acento: el piso es el piso, no la meta. Ver tests/test_paleta_contraste.py. */ --app-peligro-suave: #D65F5F; --app-exito-suave: #4F9E6C; } /* --- Escala tipográfica ---------------------------------------------------- Siete pasos y ninguno más. En rem y no en px: el navegador tiene que poder escalar el texto, y el archivo entero ya estaba en rem. Antes había diez tamaños. Cuatro caían en fracciones —11.2, 14.4 y 18.4px— que no salían de ninguna decisión sino de haber escrito .7, .9 y 1.15rem a ojo; el quinto, 10.8px, era el contador del menú heredando el .75em del badge de Bootstrap desde un ítem de 14.4. Cada uno se movió al paso entero más cercano, así que el que más se corrió lo hizo 0.4px. El único tamaño que queda afuera a propósito es el .72rem de .celda, que es la grilla del cronograma. */ :root { --fs-micro: .625rem; /* 10 — solo donde el espacio manda: la grilla */ --fs-rotulo: .6875rem; /* 11 — versalitas, encabezados de tabla, contadores */ --fs-ayuda: .75rem; /* 12 — etiquetas y textos de ayuda */ --fs-menor: .8125rem; /* 13 — rótulos de campo, botones de fila */ --fs-ui: .875rem; /* 14 — el tamaño de la interfaz: campos, botones, celdas */ --fs-texto: 1rem; /* 16 — texto corrido y títulos de tarjeta */ --fs-titulo: 1.375rem; /* 22 — el título de la pantalla */ /* SIETE pasos y no seis, y el que sobra es el 12. Se evaluó sacarlo y no se puede: de sus 22 consumidores, 13 son las grillas del tablero y de Mercado, cuyos anchos en `rem` están MEDIDOS contra ese cuerpo (ver .tab-div-fila, .tab-casc-fila, .pos-fila). Subirlos a 13 los desborda, y bajarlos a 11 manda metadatos que hay que leer al tamaño reservado para versalitas. El 12 es «metadato dentro de un componente denso», y es un paso legítimo. */ /* El ícono de las pantallas vacías. Existe porque `.fs-1` de Bootstrap es FLUIDO y va al revés: `calc(1.625rem + 4.5vw)` da 72px en un iPad de 1024 y 40px en un monitor de 1440, o sea que el ícono se ACHICA cuando la pantalla crece. 40px es lo que se ve hoy en escritorio, así que fijarlo ahí no cambia nada arriba y arregla tablet y teléfono. */ --fs-icono-vacio: 2.5rem; /* 40 */ /* Las CIFRAS: los números grandes de los tableros y los mosaicos de resumen. Arriba de 22px la app no usaba tokens sino las utilidades `fs-*` de Bootstrap, en unos cuarenta lugares — o sea, una segunda escala, de otro sistema, para el texto más grande de la pantalla. Y no es solo que sea otra escala: `.fs-1` a `.fs-4` de Bootstrap son FLUIDAS (`calc(1.275rem + .3vw)` para fs-4, verificado en el bootstrap.min.css 5.3.3 del CDN). Recién a partir de 1200px se vuelven fijas. Es decir que los números más grandes de la app eran lo ÚNICO cuyo tamaño dependía del ancho de la ventana: un `fs-4` medía 21,5px en un teléfono de 360px y 24 en un monitor. Nadie decidió eso, viene de fábrica. Se fijan en los valores que Bootstrap usa arriba de 1200px, que son los que uno espera cuando lee "fs-4". Efecto visible: en un teléfono las cifras de los tableros quedan un par de píxeles más grandes que antes. */ --fs-cifra-sm: 1.25rem; /* 20 — fs-5 */ --fs-cifra: 1.5rem; /* 24 — fs-4, la más usada */ --fs-cifra-lg: 1.75rem; /* 28 — fs-3 */ --fs-cifra-xl: 2rem; /* 32 — fs-2 */ } /* El `!important` no es negociable: las utilidades de Bootstrap lo traen, así que sin él no se pisan. `.fs-6` ya valía 1rem y se ata igual, para que las cinco salgan del mismo lugar. */ /* `.fs-1` no estaba atada y era la única medida de la app que dependía del ancho de ventana. Sus 14 usos son todos el ícono de una pantalla vacía. */ .fs-1 { font-size: var(--fs-icono-vacio) !important; } .fs-2 { font-size: var(--fs-cifra-xl) !important; } .fs-3 { font-size: var(--fs-cifra-lg) !important; } .fs-4 { font-size: var(--fs-cifra) !important; } .fs-5 { font-size: var(--fs-cifra-sm) !important; } .fs-6 { font-size: var(--fs-texto) !important; } /* --- Escala de forma ------------------------------------------------------- Cuatro radios. Los valores de antes eran 6, 7.2, 8, 9.6 y 999px: la diferencia entre 7.2 y 8, o entre 8 y 9.6, no la ve nadie, pero obligaba a elegir cada vez que se escribía una regla. */ :root { --r-chip: .375rem; /* 6 — badges, etiquetas, ítems de menú */ --r-control: .5rem; /* 8 — botones y campos */ --r-card: .75rem; /* 12 — tarjetas */ --r-pill: 999px; /* cápsulas de filtro */ } /* --- Los colores de la grilla ---------------------------------------------- Los grises de la hoja de calculo. Salian como hex sueltos del