/* ========================================================================== Tokens de diseno — la fuente unica de verdad visual. Gemelo de `residente-movil/lib/core/theme/tokens.dart`: los valores son los MISMOS. Las dos superficies del residente tienen que verse como el mismo producto. La regla del sistema: la interfaz CONSUME estos tokens, no los inventa. Si un componente necesita un valor que no esta aqui, falta un token o el problema esta mal planteado. Ningun archivo fuera de este define un color. Cambiar la piel es cambiar los valores de aqui. Los NOMBRES son el contrato y no se renombran. ========================================================================== */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/jakarta-latin.7660bd9909fb.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/jakarta-latin-ext.341687eeeb6a.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Titulos: Archivo (OFL, variable en peso y anchura) a anchura 118%, en lugar de Seabass, la de la guia de marca, que es de pago (2026-10-19). Si se compra la licencia web de Seabass, se cambia aqui y en `--f-titulo`. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin.de2f1fe81758.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: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("../fonts/archivo-latin-ext.589f7bc0fac4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* --- Lateral del panel y del portal (2026-10-09) ---------------------- Como Notion: en tema claro la lateral es gris muy claro sobre el lienzo, con texto oscuro y el azul solo en lo activo; en tema oscuro, gris oscuro #202020 (bloques oscuros, abajo). Fue oscura en los dos temas un dia; el dueno eligio la de Notion al compararlas lado a lado. Dentro de `.panel__lateral` (y de la lateral del portal) se re-declaran los tokens de texto y superficie con estos valores, asi todas sus reglas toman la paleta sin duplicarse. Contraste sobre #f7f7f7: texto 16.3, secundario 7.3, terciario 6.6, acento 6.4. Solo existe en la web. 2026-10-19 (rediseno del panel): la lateral toma el gris calido del lienzo, asi la ventana es un solo plano y lo blanco son las tarjetas. Sobre #f3f2ef: texto 15.6, secundario 7.6, terciario 6.5, acento 6.1. Lo activo es una PILDORA de Acuario (`--c-lateral-activo` con su contorno `-activo-borde`), con el texto en el acento: 6.0 sobre ella. Antes era un gris translucido, y se confundia con el hover. Nunca una franja lateral de color: al dueno le parecio un recurso «muy IA». */ --c-lateral: #f3f2ef; --c-lateral-texto: #1a1a1a; --c-lateral-secundario: #4d4d4d; --c-lateral-terciario: #575757; --c-lateral-acento: #066187; --c-lateral-hover: rgb(0 0 0 / 0.04); --c-lateral-activo: #e0f2fb; --c-lateral-activo-borde: rgb(6 97 135 / 0.22); --c-lateral-borde: #e2e0db; /* --- Color ------------------------------------------------------------- Marca Apto (guia del 2026-10-19, `docs/marca/`): Rojo Amapola #F21C2F, Acuario #0AAFF2, Anchoa #04C7F2, Rojo Mandarina #F24D29 y Nubes Debiles #F2F2F2. Reemplazo al verde de las dos casas (2026-10-08) y antes al jade. Reparto (decidido con el dueno): el AZUL manda en la interfaz —acciones, enlaces, estado activo— y el naranja/rojo queda para la marca —logo y bloque destacado— y, desde el 2026-10-19, para el estado critico y el saldo vencido (Amapola). Un boton naranja se confundiria con "atencion" y "vencido", y en un panel de cobros eso es un error de lectura. Ningun tono de la guia pasa AA como texto sobre blanco (Acuario 2.5, Mandarina 3.6), asi que el texto y los rellenos usan el MISMO matiz con menos luz; el tono puro vive en `--c-acento-vivo` (superficies grandes, graficos) y en el tema oscuro, donde Acuario da 6.3+ sobre los grises. El color se usa poco a proposito —acciones, estado activo, el dato que la persona vino a ver—. Si todo resalta, nada resalta. Los neutros son grises puros, como Nubes Debiles: la guia no trae un neutro teñido, y un gris con tinte azul junto al naranja del logo se leeria sucio. Los semanticos (positivo / atencion / critico) existen solo para estado, nunca para decorar. Contraste verificado en el navegador, no en la teoria: se recorrieron las pantallas reales midiendo cada texto contra su fondo EFECTIVO. Ahi aparecio lo que la cuenta sobre blanco no ve: el sobretitulo, el pie y los enlaces de accion no se apoyan en la tarjeta sino en el LIENZO, que es mas oscuro, y ahi el mismo color que daba 4.95 daba 4.15. Por eso el lienzo es un punto mas claro y el acento y el terciario un punto mas oscuros de lo que pedirian sobre blanco. Estado: todo el texto pasa AA (>=4.5) sobre lienzo, fondo, fondo sutil y fondo elevado, en los dos temas; los bordes de control pasan 1.4.11. */ /* Lienzo = el fondo de la ventana; fondo = la superficie de la app. Separarlos es lo que hace que la columna se lea como una tarjeta y no como una tira flotando en el vacio. En movil coinciden. */ /* Lienzo (2026-10-09, tercera vuelta): con lienzos casi blancos el dueno seguia viendo fondo, tarjetas, encabezados y campos "del mismo color". #d6d6d6 da 1.45 contra el blanco de las tarjetas, con borde #cccccc y la sombra de `.tarjeta`. Texto sobre el lienzo: secundario 5.9, terciario 5.0, acento 4.7. */ /* Lienzo (2026-10-19, cuarta vuelta): gris calido muy suave, pedido del dueno para el rediseno del panel. La separacion que antes daba el lienzo oscuro (#d6d6d6) la dan ahora la SOMBRA de la tarjeta (`--sombra-sutil`) y un contorno casi invisible (`--c-borde-tarjeta`), no un borde gris duro. Contra blanco da 1.12; verificado con capturas. Texto sobre el lienzo: secundario 7.6, terciario 6.5, acento 6.1, critico 4.7; el borde de control 4.1. */ --c-lienzo: #f3f2ef; --c-fondo: #ffffff; --c-fondo-sutil: #f2f2f2; /* Nubes Debiles, de la guia */ --c-fondo-elevado: #ffffff; --c-borde: #cccccc; /* Borde de control (1.4.11, >=3:1) sobre TODAS las superficies, el lienzo incluido: el panel pone filtros directo sobre el. #767676 da 3.1 sobre el lienzo y 4.5 sobre blanco. Replicar en los gemelos moviles. */ --c-borde-fuerte: #767676; /* Contorno de tarjeta: casi imperceptible, acompana a la sombra para que el borde de la tarjeta no se pierda en pantallas lavadas. Decorativo (no es control: 1.4.11 no aplica). Solo existe en la web. */ --c-borde-tarjeta: rgb(20 20 20 / 0.07); --c-texto: #1a1a1a; --c-texto-secundario: #4d4d4d; --c-texto-terciario: #575757; --c-texto-invertido: #ffffff; /* Acuario con menos luz: 6.9 sobre blanco, 4.7 sobre el lienzo. */ --c-acento: #066187; --c-acento-hover: #05506e; --c-acento-suave: #e7f7fe; /* El relleno de una accion primaria, con su color de texto. Son tokens aparte de `--c-acento` porque los dos casos piden cosas opuestas: el acento tiene que contrastar con el FONDO de la pagina (es texto, un enlace, un icono) y el solido tiene que contrastar con el TEXTO QUE LLEVA ENCIMA. En claro casi coinciden; en oscuro no: con un solo token, el boton primario salia fosforescente y se comia la pantalla. */ /* Acuario con menos luz: 5.3 con texto blanco; el hover baja a 6.7. */ --c-acento-solido: #07739f; --c-acento-solido-hover: #066389; --c-acento-solido-texto: #ffffff; /* Acuario puro. Es el acento SIN la restriccion de contraste de texto: sirve para superficies grandes, degradados y graficos, nunca para texto chico ni para un icono de 16px sobre blanco (2.5). Para eso esta `--c-acento`. */ --c-acento-vivo: #0aaff2; /* Estados (insignias, avisos): paleta pedida el 2026-10-08. Texto sobre su fondo suave: 5.1 / 5.2 / 4.7; sobre el lienzo (#f3f2ef, 2026-10-19): 4.8 / 4.9 / 4.7. El `-punto` es el circulo de la insignia, no lleva texto encima. Critico = Rojo Amapola de la marca (2026-10-19). Antes era #b42318, a proposito distinto del rojo del logo; el dueno ahora quiere el rojo de marca para lo critico y el saldo vencido. El tono puro #f21c2f solo va en puntos e iconos grandes (4.2 sobre blanco); el TEXTO usa el Amapola con menos luz, #d90c1f: 5.2 sobre blanco, 4.7 sobre el lienzo y el fondo sutil, 4.8 sobre su fondo suave, 5.0 sobre la fila en hover. */ --c-positivo: #027a48; --c-positivo-suave: #ecfdf3; --c-positivo-punto: #12b76a; --c-atencion: #b54708; --c-atencion-suave: #fffaeb; --c-atencion-punto: #f79009; --c-critico: #d90c1f; --c-critico-suave: #fef1f2; --c-critico-punto: #f21c2f; /* Tablas: solo divisiones horizontales finas y un fondo leve al pasar. */ --c-borde-tabla: #eaeaea; --c-fila-hover: #f9f9f9; /* Bloque destacado: la tarjeta de marca (el saldo del residente, el indicador principal del panel). Una sola definicion para las dos superficies, en vez de tres degradados que se parecen. Junto con el estado critico (que desde el 2026-10-19 usa el Amapola), es el unico lugar donde va el naranja/rojo de la marca: Rojo Mandarina a Rojo Amapola, como el logo. Los extremos NO son los tonos puros: el degradado lleva texto blanco encima y los dos extremos tienen que sostener 4.5 (dan 4.6 y 4.7). Ese texto no se atenua con opacidad —bajaria del minimo—; la jerarquia de adentro se hace con tamano y peso. */ --degradado-destacado: linear-gradient(135deg, #dd330d, #e80d21); --c-destacado-texto: #ffffff; /* Acento de marca en naranja (2026-10-21): fecha del saludo, marca de los titulos de seccion, numeros de paso e iconos neutros. Decorativo, nunca interactivo (lo interactivo sigue en azul). Texto: 5.9 sobre blanco; en oscuro, 7.0 sobre #202020. */ --c-marca-texto: #b8360f; --c-marca-suave: #fdeee9; /* Portal del residente (propuesta de la disenadora, 2026-10-20): barra inferior del telefono en Rojo Amapola con texto blanco. El Amapola puro (#f21c2f) da 4.21 con blanco y los rotulos de la barra son de 12 px: se usa el mismo matiz con menos luz, #e0182b, que da 4.84 (AA). En escritorio la lateral NO va en rojo: se probo y cansaba. La etiqueta de estado del saldo va en naranja de marca: el Mandarina puro da 3.9 con blanco, asi que se usa el mismo matiz con menos luz, el extremo naranja de `--degradado-destacado` (4.6). Valen IGUAL en los dos temas: son superficies de marca, no del lienzo. */ --c-barra-marca: #e0182b; --c-barra-marca-texto: #ffffff; --c-etiqueta-marca: #dd330d; --c-etiqueta-marca-texto: #ffffff; /* Tokens que valen IGUAL en los dos temas (los bloques oscuros no los redefinen a proposito; se agregaron el 2026-10-08 al sacar los ultimos colores literales de los componentes): - fondo-qr: un QR solo escanea con fondo blanco real, tambien en oscuro. - velo-modal: el fondo detras de un ; negro translucido oscurece por igual una pagina clara y una oscura. */ --c-fondo-qr: #ffffff; --c-velo-modal: rgb(0 0 0 / 0.45); /* --- Tipografia -------------------------------------------------------- Plus Jakarta Sans (OFL, alojada aqui: static/fonts/, 49 KB variable). Pedido del dueno el 2026-10-08 («Inter o Plus Jakarta Sans»): Jakarta, porque Inter es la de cualquier SaaS. Antes fue Figtree y, al principio, la pila del sistema (Segoe UI en Windows, que se leia "tosco"). Las cifras de dinero y fechas usan sus numeros tabulares (`.monto`, `.cifra-tabla`). `font-display: swap`: nunca hay pantalla en blanco esperando la fuente. Las apps moviles siguen con la fuente del sistema (tokens.dart). La guia de marca (2026-10-19) pide Pacaembu para el texto y Seabass para titulos; las dos son de pago. Jakarta queda para el texto y los titulos de pantalla (h1, `.titulo`) usan Archivo ancha, lo mas cercano a Seabass con licencia libre. Las cifras siguen en Jakarta por sus tabulares. */ --f-titulo: "Archivo", var(--f-familia); --f-titulo-anchura: 118%; --f-familia: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --f-tabular: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Escala de tamanos. Pocos escalones y bien separados: una escala con doce tamanos parecidos produce jerarquia ambigua. */ --t-xs: 0.75rem; /* 12px — etiquetas, metadatos */ --t-sm: 0.875rem; /* 14px — texto secundario */ --t-base: 1rem; /* 16px — cuerpo */ --t-lg: 1.125rem; /* 18px — subtitulo */ --t-xl: 1.375rem; /* 22px — titulo de seccion */ --t-2xl: 1.75rem; /* 28px — titulo de pantalla */ --t-3xl: 2.5rem; /* 40px — cifra destacada (saldo, monto) */ --p-normal: 400; --p-medio: 500; --p-semibold: 600; --l-ajustado: 1.2; --l-normal: 1.5; --l-holgado: 1.7; /* Tracking negativo en los tamanos grandes: a 28px y mas, el espaciado por defecto se ve suelto. */ --e-titulo: -0.02em; --e-cifra: -0.03em; /* --- Espaciado --------------------------------------------------------- Escala de 4px. Es el otro instrumento de jerarquia: la distancia entre bloques dice mas sobre que va con que, que cualquier linea divisoria. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; /* --- Forma ------------------------------------------------------------- Esquinas redondeadas de verdad. Un radio de 4px es el valor por defecto de un navegador, no una decision: no se lee como suave ni como cuadrado, se lee como que nadie lo penso. La tarjeta lleva --r-lg y el bloque grande --r-xl; los controles, --r-md, porque un boton con el radio de una tarjeta se ve inflado. */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* La elevacion es difusa y de baja opacidad: separa la tarjeta del lienzo sin dibujarle un contorno gris debajo. */ --sombra-sutil: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.10); --sombra-media: 0 2px 6px rgb(20 20 20 / 0.05), 0 8px 24px rgb(20 20 20 / 0.06); --sombra-elevada: 0 4px 12px rgb(20 20 20 / 0.07), 0 16px 40px rgb(20 20 20 / 0.10); /* --- Medidas ----------------------------------------------------------- */ --ancho-contenido: 44rem; /* ~70 caracteres: linea comoda de leer */ --ancho-app: 28rem; /* columna tipo movil en escritorio */ --alto-toque: 2.75rem; /* 44px: minimo tactil de las guias de Apple */ /* Altura de control en escritorio. El minimo tactil de 44px es para el dedo; con raton y teclado deja las barras de filtros del panel infladas y obliga a rodar una tabla que cabia entera. Por debajo de 48rem los controles vuelven a --alto-toque. No tiene gemelo en tokens.dart: la app movil no tiene el caso de uso. */ --alto-control: 2.25rem; /* 36px: control denso de escritorio */ --ancho-panel: 80rem; /* tope del area de trabajo del panel */ --transicion: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* --- Modo oscuro ---------------------------------------------------------- Se respeta la preferencia del sistema, y el panel ademas deja cambiarlo a mano (`static/js/tema.js` pone `data-tema` en el ). No es la paleta clara invertida. El fondo no es negro puro (#000 sobre OLED produce halos alrededor del texto) ni gris azulado: es gris neutro, como el de Notion; la identidad la sostienen el Acuario de lo activo y el bloque destacado. El texto tampoco es blanco puro: el contraste maximo cansa la vista. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { /* Los neutros oscuros son GRISES, sin tinte de color. La primera version los hizo verdes —el mismo jade llevado al extremo oscuro— y el resultado fue una pantalla de un solo color: fondo, tarjetas, bordes y acento, todo verde. La segunda los hizo carbon con un resto de verde, y seguia tinendo. Estos son grises de verdad, como los de Notion: el color aparece SOLO donde hay que actuar, y por eso se ve. */ /* Grises de Notion (pedido del dueno, 2026-10-08): lienzo #191919 y superficies #202020; la lateral tambien gris —en oscuro el jade se veia como otra app—, y el azul queda solo en lo activo. Contraste medido: sobre #202020 texto 13.3, secundario 6.6, terciario 4.7, acento 6.5 (la lateral de este tema usa #202020); sobre #232323 el terciario da 4.6. Replicar en tokens.dart (oscuro). */ --c-lateral: #202020; --c-lateral-texto: #e8e8e8; --c-lateral-secundario: #a5a5a5; --c-lateral-terciario: #8a8a8a; --c-lateral-acento: #0aaff2; --c-lateral-hover: rgb(255 255 255 / 0.05); --c-lateral-activo: #1d343d; /* Acuario al 14% sobre #202020: acento 5.2 */ --c-lateral-activo-borde: rgb(10 175 242 / 0.28); --c-lateral-borde: rgb(255 255 255 / 0.07); --c-lienzo: #191919; --c-fondo: #202020; --c-fondo-sutil: #1d1d1d; --c-fondo-elevado: #232323; --c-borde: #2f2f2f; /* Era #6b6b6b: 3.02 sobre el fondo elevado y 2.9 sobre los suaves. #727272 da >=3.2 en todas las superficies (2026-10-08). */ --c-borde-fuerte: #727272; --c-borde-tarjeta: rgb(255 255 255 / 0.06); --c-texto: #e8e8e8; --c-texto-secundario: #a5a5a5; --c-texto-terciario: #8a8a8a; --c-texto-invertido: #ffffff; /* Acuario puro para TEXTO, iconos y estado activo: sobre los grises da 6.3 o mas. */ --c-acento: #0aaff2; --c-acento-hover: #38bdf5; /* Azul apenas perceptible: el fondo del destino activo del menu. Un relleno saturado ahi convierte la navegacion en un semaforo. */ --c-acento-suave: #14262f; /* Azul para RELLENO, con texto blanco encima (6.1): medio y mate. El acento claro de arriba con texto oscuro encima daba un boton fosforescente, que es exactamente lo que no debe hacer una accion primaria en una pantalla oscura: llamar tanto que tape lo que hay al lado. */ --c-acento-solido: #07689a; /* Hover MAS OSCURO, no mas claro (2026-10-08): el #37926b anterior daba 3.83:1 con el texto blanco y el boton primario dejaba de leerse justo al apuntarlo. #065a85 da 7.5:1. Replicar en tokens.dart (oscuro). */ --c-acento-solido-hover: #065a85; --c-acento-solido-texto: #ffffff; --c-acento-vivo: #0aaff2; --c-positivo: #7cc466; --c-positivo-suave: #1e2a1b; --c-atencion: #d9a84f; --c-atencion-suave: #2a2317; /* Amapola con mas luz (2026-10-19): 5.2 o mas sobre todas las superficies oscuras, 5.3 sobre su fondo suave. */ --c-critico: #ff5c6a; --c-critico-suave: #2e1a1d; --c-positivo-punto: #12b76a; --c-atencion-punto: #f79009; --c-critico-punto: #f21c2f; --c-borde-tabla: #2a2a2a; --c-fila-hover: #242424; /* En oscuro el bloque destacado no se aclara: se satura. Un naranja vivo de fondo con texto oscuro encima seria el unico parche brillante de la pantalla y quemaria a las once de la noche, que es cuando se usa. */ --degradado-destacado: linear-gradient(135deg, #8a2a12, #7a1220); --c-destacado-texto: #e8e8e8; --c-marca-texto: #ff8a65; --c-marca-suave: #33201a; --sombra-sutil: 0 1px 2px rgb(0 0 0 / 0.5); --sombra-media: 0 2px 6px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4); --sombra-elevada: 0 4px 12px rgb(0 0 0 / 0.55), 0 16px 40px rgb(0 0 0 / 0.5); } } :root[data-tema="oscuro"] { /* Los neutros oscuros son GRISES, sin tinte de color. La primera version los hizo verdes —el mismo jade llevado al extremo oscuro— y el resultado fue una pantalla de un solo color: fondo, tarjetas, bordes y acento, todo verde. La segunda los hizo carbon con un resto de verde, y seguia tinendo. Estos son grises de verdad, como los de Notion: el color aparece SOLO donde hay que actuar, y por eso se ve. */ /* Grises de Notion (pedido del dueno, 2026-10-08): lienzo #191919 y superficies #202020; la lateral tambien gris —en oscuro el jade se veia como otra app—, y el azul queda solo en lo activo. Contraste medido: sobre #202020 texto 13.3, secundario 6.6, terciario 4.7, acento 6.5 (la lateral de este tema usa #202020); sobre #232323 el terciario da 4.6. Replicar en tokens.dart (oscuro). */ --c-lateral: #202020; --c-lateral-texto: #e8e8e8; --c-lateral-secundario: #a5a5a5; --c-lateral-terciario: #8a8a8a; --c-lateral-acento: #0aaff2; --c-lateral-hover: rgb(255 255 255 / 0.05); --c-lateral-activo: #1d343d; /* Acuario al 14% sobre #202020: acento 5.2 */ --c-lateral-activo-borde: rgb(10 175 242 / 0.28); --c-lateral-borde: rgb(255 255 255 / 0.07); --c-lienzo: #191919; --c-fondo: #202020; --c-fondo-sutil: #1d1d1d; --c-fondo-elevado: #232323; --c-borde: #2f2f2f; --c-borde-fuerte: #727272; --c-borde-tarjeta: rgb(255 255 255 / 0.06); --c-texto: #e8e8e8; --c-texto-secundario: #a5a5a5; --c-texto-terciario: #8a8a8a; --c-texto-invertido: #ffffff; /* Acuario puro para TEXTO, iconos y estado activo: sobre los grises da 6.3 o mas. */ --c-acento: #0aaff2; --c-acento-hover: #38bdf5; /* Azul apenas perceptible: el fondo del destino activo del menu. Un relleno saturado ahi convierte la navegacion en un semaforo. */ --c-acento-suave: #14262f; /* Azul para RELLENO, con texto blanco encima (6.1): medio y mate. El acento claro de arriba con texto oscuro encima daba un boton fosforescente, que es exactamente lo que no debe hacer una accion primaria en una pantalla oscura: llamar tanto que tape lo que hay al lado. */ --c-acento-solido: #07689a; --c-acento-solido-hover: #065a85; /* ver el bloque de prefers-color-scheme */ --c-acento-solido-texto: #ffffff; --c-acento-vivo: #0aaff2; --c-positivo: #7cc466; --c-positivo-suave: #1e2a1b; --c-atencion: #d9a84f; --c-atencion-suave: #2a2317; /* Amapola con mas luz (2026-10-19): 5.2 o mas sobre todas las superficies oscuras, 5.3 sobre su fondo suave. */ --c-critico: #ff5c6a; --c-critico-suave: #2e1a1d; --c-positivo-punto: #12b76a; --c-atencion-punto: #f79009; --c-critico-punto: #f21c2f; --c-borde-tabla: #2a2a2a; --c-fila-hover: #242424; --degradado-destacado: linear-gradient(135deg, #8a2a12, #7a1220); --c-destacado-texto: #e8e8e8; --c-marca-texto: #ff8a65; --c-marca-suave: #33201a; --sombra-sutil: 0 1px 2px rgb(0 0 0 / 0.5); --sombra-media: 0 2px 6px rgb(0 0 0 / 0.5), 0 8px 24px rgb(0 0 0 / 0.4); --sombra-elevada: 0 4px 12px rgb(0 0 0 / 0.55), 0 16px 40px rgb(0 0 0 / 0.5); } /* Quien pidio menos movimiento en su sistema lo pidio en serio: hay personas para las que la animacion produce mareo, no deleite. */ @media (prefers-reduced-motion: reduce) { :root { --transicion: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }