/* ⚠️ TODO color del sistema sale de una ficha, y las fichas se definen SOLO aca. Mas abajo no hay ni un hex suelto: si aparece uno, esa regla se queda igual cuando alguien cambia de paleta y la pantalla sale con dos temas encima. Lo vigila `tests/test_estilos.py`. La paleta viaja en `data-paleta` sobre el , que pone el context processor con lo que eligio quien entro (`app/apariencia.py`). Un valor desconocido --o ninguno-- cae en `:root`, que es la clara: la pantalla nunca se queda sin colores. Las dos pasan 4.5:1 de contraste en texto normal. El acento es INDIGO y no el verde-azulado de Incentivos: es lo que hace que los tres sistemas dejen de parecerse. Y los semanticos van separados del acento -- si el color de marca tambien significa "urgente", deja de significar las dos cosas. Los dos selectores juntos NO son un descuido: `:root` es la paleta por defecto y `[data-paleta="dia"]` es lo que hace que la MUESTRA de la pantalla de apariencia se pinte sola aunque la puesta ya sea esa. */ :root, [data-paleta="dia"] { color-scheme: light; /* Neutros con sesgo indigo: un gris puro al lado de un acento cromatico se ve sucio. */ --tinta: #1a1c2b; --suave: #5a5f78; --linea: #dcdde8; --fondo: #f5f5fa; --papel: #ffffff; --papel2: #edeef6; --acento: #3a3f8f; --sobre-acento: #ffffff; --acento-suave: #eeeffa; --acento-linea: #c3c6ea; --vencida: #a3262c; --vencida-fondo: #fceceb; --hoy: #8a5a10; --hoy-fondo: #fdf5e6; --ok: #1f6b45; --ok-fondo: #e9f4ed; --quieto: #5f6478; --quieto-fondo: #eeeff3; --sombra: rgba(26, 28, 43, .13); /* El velo de la ventanita de confirmacion. Ficha propia porque cambia entre paletas: un velo claro sobre la paleta de noche no tapa nada. */ --velo: rgba(26, 28, 43, .5); /* Lo que entro de mas. No es urgencia ni exito: es un renglon que se mira distinto, y por eso no se cuelga de un semantico. */ --bonificada-fondo: #f7f4ec; /* El unico color que NO cambia entre paletas: es el fondo del video de la camara, y detras de una imagen en vivo lo que va es negro en los dos temas. Tiene ficha igual, para que no quede un hex suelto. */ --negro-camara: #000000; } [data-paleta="noche"] { color-scheme: dark; /* El jefe revisa la deuda desde el telefono, de noche. */ --tinta: #e7e8f2; --suave: #9aa0ba; --linea: #343850; --fondo: #14161f; --papel: #1c1f2b; --papel2: #252938; --acento: #8b91e8; --sobre-acento: #14161f; --acento-suave: #232741; --acento-linea: #444a7c; --vencida: #f2909a; --vencida-fondo: #331e24; --hoy: #e8bf72; --hoy-fondo: #322818; --ok: #7fd3a4; --ok-fondo: #16301f; --quieto: #9aa0ba; --quieto-fondo: #262a38; --sombra: rgba(0, 0, 0, .45); --velo: rgba(0, 0, 0, .65); --bonificada-fondo: #2b2a20; --negro-camara: #000000; } * { box-sizing: border-box; } /* EL RELLENO DE LOS CONTROLES NATIVOS. `color-scheme` --que esta en cada ficha-- arregla el fondo, el borde y las barras de desplazamiento, pero NO el color con que el navegador rellena un radio o un casillero marcado: eso es `accent-color`, que es otra propiedad. Sin esto, el circulito de la paleta elegida salia con el azul de Chromium --0, 120, 212, que no es ninguna ficha-- en las DOS paletas, justo en la pantalla donde se elige la paleta. Se vio mirando, el 2026-08-20; ninguna prueba podia agarrarlo porque el HTML estaba bien. */ html { accent-color: var(--acento); } /* La raiz fija el tamano de los rem: asi bajar la escala general es un solo numero y todos los paddings/margenes/h1/h2 que estan en rem se achican en la misma proporcion, en vez de tener que retocar cada uno a mano. Antes no habia font-size en la raiz, asi que los rem quedaban pegados al 16px por defecto del navegador aunque el body bajara a 15px: con escalado de Windows al 125% eso se veia enorme. */ html { font-size: 13px; } body { margin: 0; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; color: var(--tinta); background: var(--fondo); } /* LA BARRA DEL RECORRIDO. Los cinco destinos en el orden en que ocurre el trabajo, y el de la pantalla en que estoy parado MARCADO. La marca se achica --el sistema no necesita gritar su nombre en cada pantalla-- para que el recorrido sea lo primero que se lee. */ .barra { display: flex; align-items: center; gap: 1.5rem; padding: .55rem 1.25rem; background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linea); } /* EL LOGO (12-09-2026, maqueta aprobada, variante B): cuadro lleno con el acento y la caja de un pedido. Dos clics abren «Ir a otro sistema» (`js/cambio_sistema.js`). Es un