/* ========================================================================== OBI · AURORA — el sistema visual ========================================================================== Esta hoja MANDA. Se carga la última a propósito: reescribe las fichas de styles.css y vuelve a vestir cada componente de sistema.css. Por qué una hoja aparte y no un parche dentro de las otras dos: Las otras dos suman 365 KB y describen el sistema ANTERIOR (Modernist: radio 0, cero sombras, dos azules, nada de color). Reescribirlas a mano habría dejado durante días una app medio vestida de cada cosa. Aurora entra de una pieza: mientras exista este archivo la app es Aurora, y si se quita vuelve entera a lo de antes. Un solo interruptor. Lo que queda de las hojas viejas es ANDAMIO — la maquetación, las rejillas, los @media. Eso no se toca porque funciona. Las tres decisiones que explican el resto: 1. PROFUNDIDAD, NO REGLAS. Antes, dos bloques se separaban con una raya de 2px. Ahora se separan porque uno está más cerca: capa, borde de vidrio, sombra. Es como se lee una app de banco en un teléfono a pleno sol. 2. EL COLOR SIGNIFICA. Verde entra, coral se pasó, ámbar corre, violeta aún no pasó. El sistema viejo lo prohibía —«el dinero no es un semáforo»— y tenía razón para un informe impreso. En una pantalla que se mira diez segundos, obligar a leer el signo menos antes de saber si la noticia es buena cuesta esos diez segundos. 3. EL DEGRADADO ES CARO. Solo lo llevan la cifra héroe, el logotipo, el botón principal, los anillos y las tarjetas de cuenta. Si lo llevara todo no destacaría nada, que es lo que le pasaba al azul de antes. ========================================================================== */ /* ========================================================================== 1 · FICHAS — modo claro ========================================================================== Van en :root sin más. El oscuro llega después por tres caminos (§2), y el orden importa: gana el último que case. */ :root { color-scheme: light; /* ---------- Los tres colores de marca ---------- No cambian entre modos: son la marca. Lo que cambia alrededor es el fondo, y por eso hacen falta las variantes -txt de más abajo. */ --au-cyan: #00E5FF; --au-blue: #3D7BFF; --au-violet: #8B5CF6; /* ---------- Terreno y capas ---------- En claro una tarjeta ES blanca y se levanta con sombra. En oscuro (§2) es un vidrio translúcido y se levanta con borde. Misma jerarquía, dos idiomas: el componente escribe var(--capa-1) y no se entera. */ --bg: #F5F8FD; --bg-2: #E9EFF9; /* hundido: pistas de barra, celdas vacías */ --capa-1: #FFFFFF; --capa-2: #FFFFFF; --capa-3: #FFFFFF; --capa-hover: #F2F6FD; /* El fondo de un menú flotante es OPACO, no de vidrio. Por qué, en §6. */ --menu-fondo: #FFFFFF; /* Los iconos que dibuja el navegador —el calendario de un campo de fecha— vienen en negro y no se pueden recolorear: solo invertir. En claro, tal cual. */ --invertir-icono: none; --linea: rgba(11,18,32,.09); --linea-fuerte: rgba(11,18,32,.16); /* Los tres grises van más oscuros de lo que pide el ojo. * * El primer intento tenía --txt-3 en #8290A8, que sobre papel claro da 3.03:1 * — se lee precioso en un monitor bueno y desaparece en un teléfono a pleno * sol, que es donde se mira esta app. DESIGN.md §9 no da rebaja por ser texto * pequeño, y precisamente lo pequeño es lo que más la necesita. * * Lo cazó pruebas/aurora.mjs midiendo, no mirando. */ --txt: #0B1220; --txt-2: #4C5A70; --txt-3: #5F6C82; /* ---------- Semántica del dinero ---------- Dos fichas por estado a propósito: --ok el color pleno: rellenos, barras, puntos, iconos. --ok-txt el mismo tono BAJADO hasta pasar 4.5:1 sobre --bg. Sin la segunda, «entró 28,800» en verde menta sobre papel claro da 1.9:1 y no se lee. Con una sola ficha, o el relleno queda apagado o el texto queda ilegible; no hay un verde que valga para las dos cosas. */ --ok: #00A870; --ok-txt: #04724F; --ok-suave: rgba(0,168,112,.12); --alerta: #E08A00; --alerta-txt: #8A5300; --alerta-suave: rgba(224,138,0,.13); --peligro: #E0304F; --peligro-txt: #B41E3A; --peligro-suave: rgba(224,48,79,.11); --futuro: #7038D8; --futuro-txt: #5B21B6; --futuro-suave: rgba(112,56,216,.11); --marca: #2A63E8; --marca-txt: #1E4BC0; --marca-suave: rgba(42,99,232,.10); /* ---------- Degradados ---------- El de la cifra se define en dos versiones porque en claro tiene que ir de tinta a azul (sobre papel) y en oscuro de blanco a celeste (sobre tinta). Es el único degradado que cambia entre modos. */ --grad-marca: linear-gradient(135deg, #00B8D4 0%, #2A63E8 48%, #7038D8 100%); --grad-cifra: linear-gradient(115deg, #0B1220 0%, #17408F 46%, #2A63E8 100%); --grad-accion: linear-gradient(135deg, #2A63E8 0%, #5B3FE0 100%); --grad-ok: linear-gradient(90deg, #00A870 0%, #00C98A 100%); --grad-alerta: linear-gradient(90deg, #E08A00 0%, #F5B23D 100%); --grad-peligro:linear-gradient(90deg, #E0304F 0%, #FF6B84 100%); --grad-futuro: linear-gradient(90deg, #7038D8 0%, #A78BFA 100%); --grad-vidrio: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55)); /* La malla de luz del fondo. Dos manchas enormes y quietas. Sin esto el terreno se lee como un folio, y la app parece un formulario. */ --malla-1: radial-gradient(1200px 780px at 8% -12%, rgba(0,181,212,.16), transparent 62%); --malla-2: radial-gradient(1000px 700px at 104% 8%, rgba(112,56,216,.13), transparent 60%); --malla-3: radial-gradient(900px 900px at 50% 118%, rgba(42,99,232,.10), transparent 62%); /* ---------- Sombras ---------- En claro hacen todo el trabajo de elevación. En oscuro (§2) se rebajan y entra el borde de vidrio. */ --sombra-1: 0 1px 2px rgba(11,18,32,.05), 0 2px 8px rgba(11,18,32,.05); --sombra-2: 0 2px 6px rgba(11,18,32,.06), 0 12px 28px rgba(11,18,32,.08); --sombra-3: 0 8px 24px rgba(11,18,32,.10), 0 32px 64px rgba(11,18,32,.12); --brillo-accion: 0 6px 20px rgba(42,99,232,.28); --brillo-ok: 0 6px 20px rgba(0,168,112,.24); --brillo-peligro: 0 6px 20px rgba(224,48,79,.24); /* El filo de luz de arriba de cada tarjeta. En claro casi no existe; en oscuro es lo que hace que una tarjeta parezca una tarjeta. */ --filo: inset 0 1px 0 rgba(255,255,255,.6); /* ---------- Forma ---------- Radio 0 se acabó. Estas seis fichas son las únicas: si un componente pide un radio que no está aquí, es que el componente está mal medido. */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-full: 999px; /* ---------- Espacio ---------- */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 56px; --e-10: 72px; --ancho-max: 1240px; --canal: 24px; --alto-topbar: 64px; --alto-tabbar: 64px; /* ---------- La paleta de datos ---------- * * OCHO tonos, y no son los de la marca. Es deliberado: la marca significa * «acción» y el semáforo significa «esto va bien o mal». Si las barras de * categoría usaran esos mismos colores, una barra verde diría «vas bien» en * vez de «esto es Supermercado». * * Dos condiciones, y las dos las mide pruebas/aurora.mjs: * * · Al menos 25° de separación de TONO entre cualquier par. Es lo que hace * falta para distinguirlos con deuteranopía y protanopía. Se mide el * tono y no la luz porque dos colores con la misma luz y tonos opuestos * se distinguen bien, y dos con tonos vecinos no se distinguen aunque uno * sea más claro. * · 3:1 contra el terreno (WCAG 1.4.11, elemento gráfico con significado). * * El primer intento tenía verde azulado (#0D9488) y cian (#0891B2) a 17°: dos * nombres distintos y la misma barra a la vista. El d-2 se movió a verde * franco para abrirle sitio al cian. * * Van aquí, con la paleta, y NO en la capa del puente de abajo: son fichas * con valor propio, no traducciones. */ --d-1: #2563EB; /* azul · 221° */ --d-2: #15803D; /* verde · 142° */ --d-3: #B45309; /* ámbar · 26° */ --d-4: #DC2626; /* rojo · 0° */ --d-5: #7C3AED; /* violeta· 262° */ --d-6: #DB2777; /* rosa · 333° */ --d-7: #0891B2; /* cian · 192° */ --d-8: #4D7C0F; /* lima · 86° */ /* ---------- Movimiento ---------- */ --curva: cubic-bezier(.22,.61,.36,1); --curva-out: cubic-bezier(.16,1,.3,1); --muelle: cubic-bezier(.34,1.56,.64,1); } /* ========================================================================== 2 · FICHAS — modo oscuro ========================================================================== El modo de origen: OBI se diseñó a oscuras y el claro es la traducción. Se escribe TRES veces, y no es duplicación por descuido: .dark — la clase del sistema de diseño :root[data-theme="oscuro"] — cómo lo marca esta app en el @media + :root:not([data-theme]) — nadie ha elegido: manda el sistema La tercera lleva :not([data-theme]) para que en cuanto alguien elija, su elección gane. Sin esa condición, quien tenga el sistema en oscuro no podría ponerse en claro nunca: el media query se lo devolvería en cada pintado. */ .dark, :root[data-theme="oscuro"] { color-scheme: dark; --bg: #070B16; --bg-2: #0C1322; --capa-1: rgba(255,255,255,.045); --capa-2: rgba(255,255,255,.075); --capa-3: rgba(20,28,46,.92); --capa-hover: rgba(255,255,255,.085); /* El mismo 20,28,46 de --capa-3, pero entero. Por qué, en §6. */ --menu-fondo: #141C2E; /* En oscuro el calendario del navegador viene negro sobre fondo oscuro y no se ve dónde pulsar. Invertirlo es lo único que se puede hacer con él. */ --invertir-icono: invert(1) brightness(1.6); --linea: rgba(255,255,255,.09); --linea-fuerte: rgba(255,255,255,.17); --txt: #EEF3FA; --txt-2: #9BA9BF; /* Sube de #6B7A93: sobre el HUNDIDO (--bg-2, que es más claro que el terreno) daba 4.27:1 y hacía falta 4.5. El terreno lo pasaba; el hundido no, y el hundido es justo donde van las cabeceras de tabla. */ --txt-3: #75849D; /* A oscuras el relleno y el texto pueden ser el MISMO tono: sobre tinta un menta claro da 9:1. Es en claro donde hacían falta dos. */ --ok: #00E5A0; --ok-txt: #34EBB2; --ok-suave: rgba(0,229,160,.14); --alerta: #FFB020; --alerta-txt: #FFC152; --alerta-suave: rgba(255,176,32,.14); --peligro: #FF5C7C; --peligro-txt: #FF849B; --peligro-suave: rgba(255,92,124,.14); --futuro: #A78BFA; --futuro-txt: #C4B5FD; --futuro-suave: rgba(167,139,250,.15); --marca: #4F8CFF; --marca-txt: #7CACFF; --marca-suave: rgba(79,140,255,.14); --grad-marca: linear-gradient(135deg, #00E5FF 0%, #3D7BFF 48%, #8B5CF6 100%); --grad-cifra: linear-gradient(115deg, #FFFFFF 0%, #CFE6FF 42%, #7CC5FF 100%); --grad-accion: linear-gradient(135deg, #3D7BFF 0%, #6D5CFF 100%); --grad-ok: linear-gradient(90deg, #00E5A0 0%, #5EEAD4 100%); --grad-alerta: linear-gradient(90deg, #FFB020 0%, #FFD37A 100%); --grad-peligro:linear-gradient(90deg, #FF5C7C 0%, #FF9BAE 100%); --grad-futuro: linear-gradient(90deg, #8B5CF6 0%, #C4B5FD 100%); --grad-vidrio: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); --malla-1: radial-gradient(1200px 780px at 8% -12%, rgba(0,229,255,.13), transparent 62%); --malla-2: radial-gradient(1000px 700px at 104% 8%, rgba(139,92,246,.15), transparent 60%); --malla-3: radial-gradient(900px 900px at 50% 118%, rgba(61,123,255,.11), transparent 62%); --sombra-1: 0 1px 2px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.24); --sombra-2: 0 4px 12px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.30); --sombra-3: 0 12px 28px rgba(0,0,0,.50),0 32px 72px rgba(0,0,0,.42); --brillo-accion: 0 6px 22px rgba(61,123,255,.42); --brillo-ok: 0 6px 22px rgba(0,229,160,.30); --brillo-peligro: 0 6px 22px rgba(255,92,124,.34); --filo: inset 0 1px 0 rgba(255,255,255,.07); /* Los mismos ocho tonos, subidos de luz para leerse sobre la tinta. El TONO no cambia entre modos —d-2 es verde en los dos, d-7 cian en los dos— o una categoría cambiaría de color al cambiar de modo y dejaría de reconocerse. */ --d-1: #60A5FA; --d-2: #4ADE80; --d-3: #FBBF24; --d-4: #F87171; --d-5: #A78BFA; --d-6: #F472B6; --d-7: #22D3EE; --d-8: #A3E635; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg:#070B16; --bg-2:#0C1322; --capa-1:rgba(255,255,255,.045); --capa-2:rgba(255,255,255,.075); --capa-3:rgba(20,28,46,.92); --capa-hover:rgba(255,255,255,.085); --menu-fondo:#141C2E; --invertir-icono:invert(1) brightness(1.6); --linea:rgba(255,255,255,.09); --linea-fuerte:rgba(255,255,255,.17); --txt:#EEF3FA; --txt-2:#9BA9BF; --txt-3:#6B7A93; --ok:#00E5A0; --ok-txt:#34EBB2; --ok-suave:rgba(0,229,160,.14); --alerta:#FFB020; --alerta-txt:#FFC152; --alerta-suave:rgba(255,176,32,.14); --peligro:#FF5C7C; --peligro-txt:#FF849B; --peligro-suave:rgba(255,92,124,.14); --futuro:#A78BFA; --futuro-txt:#C4B5FD; --futuro-suave:rgba(167,139,250,.15); --marca:#4F8CFF; --marca-txt:#7CACFF; --marca-suave:rgba(79,140,255,.14); --grad-marca:linear-gradient(135deg,#00E5FF 0%,#3D7BFF 48%,#8B5CF6 100%); --grad-cifra:linear-gradient(115deg,#FFFFFF 0%,#CFE6FF 42%,#7CC5FF 100%); --grad-accion:linear-gradient(135deg,#3D7BFF 0%,#6D5CFF 100%); --grad-ok:linear-gradient(90deg,#00E5A0 0%,#5EEAD4 100%); --grad-alerta:linear-gradient(90deg,#FFB020 0%,#FFD37A 100%); --grad-peligro:linear-gradient(90deg,#FF5C7C 0%,#FF9BAE 100%); --grad-futuro:linear-gradient(90deg,#8B5CF6 0%,#C4B5FD 100%); --grad-vidrio:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); --malla-1:radial-gradient(1200px 780px at 8% -12%,rgba(0,229,255,.13),transparent 62%); --malla-2:radial-gradient(1000px 700px at 104% 8%,rgba(139,92,246,.15),transparent 60%); --malla-3:radial-gradient(900px 900px at 50% 118%,rgba(61,123,255,.11),transparent 62%); --sombra-1:0 1px 2px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.24); --sombra-2:0 4px 12px rgba(0,0,0,.40),0 12px 32px rgba(0,0,0,.30); --sombra-3:0 12px 28px rgba(0,0,0,.50),0 32px 72px rgba(0,0,0,.42); --brillo-accion:0 6px 22px rgba(61,123,255,.42); --brillo-ok:0 6px 22px rgba(0,229,160,.30); --brillo-peligro:0 6px 22px rgba(255,92,124,.34); --filo:inset 0 1px 0 rgba(255,255,255,.07); --d-1:#60A5FA; --d-2:#4ADE80; --d-3:#FBBF24; --d-4:#F87171; --d-5:#A78BFA; --d-6:#F472B6; --d-7:#22D3EE; --d-8:#A3E635; } } /* ========================================================================== 3 · EL PUENTE — las fichas viejas, colgadas de Aurora ========================================================================== Hay ~2 MB de JavaScript y 365 KB de CSS nombrando --page, --surface-1, --accent, --radius, --n-500. Renombrarlos sería tocar miles de sitios a cambio de nada. Ninguna ficha de aquí lleva un valor: todas APUNTAN. Es la capa que hace que las 70 vistas que no he reescrito ya se vean Aurora. */ :root { /* Superficies */ --page: var(--bg); --surface-1: var(--capa-1); --surface-2: var(--capa-2); --apagado: var(--bg-2); --surface-sunken: var(--bg-2); --text-primary: var(--txt); --text-secondary: var(--txt-2); --text-muted: var(--txt-3); --border: var(--linea); --border-strong: var(--linea-fuerte); --grid: var(--linea); --axis: var(--txt-3); /* La acción. --accent-ink es blanco SIEMPRE porque el relleno del botón principal es el degradado --grad-accion en los dos modos: el azul no se aclara a oscuras como hacía el del sistema viejo, así que la tinta encima tampoco tiene que invertirse. Era el fallo que aquel sistema arrastraba. */ --accent: var(--marca); --accent-hover: var(--marca); --accent-activo: var(--marca-txt); --accent-ink: #FFFFFF; --accent-relleno: var(--marca); --accent-soft: var(--marca-suave); --accent-suave: var(--marca-suave); --accent-border: var(--linea-fuerte); --color-bg: var(--bg); --color-surface: var(--bg-2); --color-text: var(--txt); --color-divider: var(--linea-fuerte); --color-hair-1: var(--linea); --color-hair-2: var(--linea-fuerte); --color-fill: var(--marca); --color-on-fill: #FFFFFF; --color-accent: var(--marca); --color-on-accent: #FFFFFF; --color-accent-100: var(--marca-suave); --color-accent-400: var(--marca); --color-accent-700: var(--marca-txt); --color-neutral-300: var(--linea); --color-neutral-500: var(--txt-3); --color-neutral-800: var(--txt-2); --disabled-bg: var(--bg-2); --disabled-ink: var(--txt-3); --disabled-borde: var(--linea); --n-0: var(--capa-1); --n-25: var(--capa-1); --n-50: var(--bg); --n-100: var(--bg-2); --n-200: var(--bg-2); --n-300: var(--linea); --n-400: var(--txt-3); --n-500: var(--txt-3); --n-600: var(--txt-2); --n-700: var(--txt-2); --n-800: var(--txt); --n-900: var(--txt); --tinta-fondo: var(--bg); --tinta-alza: var(--capa-1); --tinta-alza-2: var(--capa-2); --tinta-hondo: var(--bg-2); --tinta-ink: var(--txt); --tinta-ink-2: var(--txt-2); --tinta-ink-3: var(--txt-3); --tinta-linea: var(--linea); --tinta-linea-2: var(--linea-fuerte); --tinta-marca: var(--marca); --tinta-marca-ink: #FFFFFF; --tinta-mal: var(--peligro-txt); /* Estado. Aurora SÍ es un semáforo, al revés que el sistema viejo. */ --good: var(--ok-txt); --warning: var(--alerta-txt); --serious: var(--alerta-txt); --critical: var(--peligro-txt); --success-text: var(--ok-txt); /* Los nombres viejos de la serie apuntan a la paleta de datos de arriba. */ --series-1: var(--d-1); --series-2: var(--d-2); --series-3: var(--d-3); --series-4: var(--d-4); --series-5: var(--d-5); --series-6: var(--d-6); --series-7: var(--d-7); --series-8: var(--d-8); --seq-250: color-mix(in oklab, var(--marca) 26%, transparent); --seq-350: color-mix(in oklab, var(--marca) 48%, transparent); --seq-450: color-mix(in oklab, var(--marca) 72%, transparent); --seq-600: var(--marca); --div-pos: var(--ok); --div-neg: var(--peligro); --div-neutro: var(--linea); /* Forma: aquí es donde muere el radio 0. Hay 176 reglas escribiendo border-radius: var(--radius*) y solo tres con un cero literal. */ --radius: var(--r-md); --radius-lg: var(--r-lg); --radius-sm: var(--r-sm); --radius-xs: var(--r-xs); --radius-pill: var(--r-full); --shadow: var(--sombra-1); --shadow-alta: var(--sombra-2); --shadow-modal: var(--sombra-3); --sp-1: var(--e-1); --sp-2: var(--e-2); --sp-3: var(--e-3); --sp-4: var(--e-4); --sp-5: var(--e-6); --sp-6: var(--e-7); --sp-7: var(--e-9); --card-pad: var(--e-5); --celda-y: 12px; --control-alto: 46px; --tactil: 48px; --rapido: 160ms; --normal: 280ms; --lento: 520ms; --curva-salida: var(--curva); /* Tipografía. Archivo sigue: está empaquetada, y nada llega por la red. */ --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: var(--sans); --font-heading: var(--sans); --texto-base: 0.9375rem; --t-pagina: clamp(1.55rem, 1.15rem + 1.6vw, 2.05rem); --t-seccion: 1.0rem; --t-tarjeta: 1.0625rem; --t-cifra: clamp(1.65rem, 1.35rem + 1.1vw, 2.05rem); --t-cifra-media: 1.3rem; --t-cifra-alta: clamp(2.6rem, 1.4rem + 7vw, 5.2rem); --t-cuerpo: 0.9375rem; --t-secundario: 0.875rem; --t-etiqueta: 0.8125rem; --t-meta: 0.8125rem; --t-rotulo: 0.6875rem; /* La escala menuda, y por qué está en rem y no en px. * * Un `font-size: var(--t-mini)` no crece cuando alguien sube el tamaño de letra en los * ajustes de su teléfono: se queda en once píxeles para siempre. Quien * necesita letra grande no la necesita solo en los párrafos — la necesita * también en el rótulo del chip y en el texto de la barra de abajo, que son * justo los que se escriben pequeños. * * En rem todo sigue a la letra del sistema. pruebas/escala-texto.mjs falla si * aparece un píxel suelto en un font-size, y hace bien. */ --t-micro: 0.625rem; /* 10px · SOLO rótulos en caja alta */ --t-mini: 0.6875rem; /* 11px */ --t-chip: 0.72rem; /* 11.5px · chips y píldoras */ --t-nano: 0.75rem; /* 12px */ /* Los tres de abajo no son texto: son el glifo dentro de un avatar, de un icono redondo o de un estado vacío. Van en rem por lo mismo — si el resto de la pieza crece con la letra y el glifo no, se descentra. */ --t-glifo-sm: 0.8125rem; /* 13px */ --t-glifo-md: 1.0625rem; /* 17px */ --t-glifo-lg: 1.5rem; /* 24px */ --track-cifra: -.04em; --track-titulo: -.03em; --track-cifra-2: -.028em; --track-bloque: -.018em; /* Con minúsculas, el tracking de caja alta sobra: .10em separaba las letras para que «TUS CUENTAS» respirara, y en «Tus cuentas» solo la desarma. */ --track-rotulo: .01em; /* ── La CAJA de los rótulos, en un solo sitio ── * * Los rótulos iban en CAJA ALTA: «TUS CUENTAS», «PUEDES GASTAR HOY», «LO QUE * NOTAMOS», «PERIODO», «CUENTA», «TIENES». En una sola pantalla de Inicio * había siete, y siete mayúsculas seguidas no se leen: se oyen. La pantalla * gritaba antes de decir nada. * * La caja alta es una herencia de los paneles de control, donde sirve para * separar el cromo del dato. Aquí no hace falta: los rótulos ya se distinguen * por tamaño, peso y color (--txt-3), y en minúsculas se leen de un vistazo en * vez de deletrearse. * * Va como ficha y no escrito en cada regla —eran veinticinco— para que la * decisión viva en un sitio: quien quiera volver a las versalitas cambia esta * línea y vuelven todas a la vez, sin buscar ninguna. */ --caja-rotulo: none; --peso-normal: 400; --peso-medio: 600; --peso-fuerte: 800; } @media (pointer: coarse) { :root { --control-alto: 50px; } } @media (max-width: 720px) { :root { --canal: 16px; } } /* ========================================================================== 4 · BASE ========================================================================== */ /* El lleva el mismo terreno que el body, y no es repetirse: lo que se ve por debajo del contenido —el rebote del desplazamiento en un iPhone, y la franja bajo la barra del pulgar— lo pinta el , no el body. Sin esto salía una banda BLANCA al final de cada pantalla en el teléfono. */ html { background: var(--bg); } body { background: var(--bg); color: var(--txt); font-family: var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* La malla de luz. Va en un pseudoelemento fijo y no en `background` del body porque tiene que quedarse quieta cuando la página se desplaza: si se moviera con el contenido, un scroll largo la sacaría de pantalla y la mitad de abajo de la app se vería de otro color. Son gradientes QUIETOS: no hay nada que apagar con prefers-reduced-motion, y no cuesta un solo cuadro por segundo después del primer pintado. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--malla-1), var(--malla-2), var(--malla-3), var(--bg); pointer-events: none; } /* El papel rayado del libro de cuentas: dos rejillas de 1px muy tenues. Se ve apenas, y es lo que impide que las zonas vacías se lean como un hueco. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, var(--linea) 1px, transparent 1px), linear-gradient(to bottom, var(--linea) 1px, transparent 1px); background-size: 72px 72px; /* Se desvanece hacia abajo: arriba da textura, abajo estorbaría a las tablas largas. */ -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 620px); mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 620px); } ::selection { background: var(--marca); color: #fff; } /* Barras de desplazamiento a juego. Sin esto, en oscuro sale una barra gris del sistema pegada a una app azul casi negra. */ * { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--txt-3); background-clip: content-box; } :focus-visible { outline: 2px solid var(--au-blue); outline-offset: 3px; border-radius: var(--r-sm); } /* ========================================================================== 5 · TIPOGRAFÍA ========================================================================== */ h1, h2, h3, h4 { letter-spacing: var(--track-bloque); } .topbar__head h1, .titulo-pagina { font-size: var(--t-pagina); font-weight: 800; letter-spacing: var(--track-titulo); line-height: 1.08; } /* El rótulo que encabeza una SECCIÓN de la pantalla —«Tus cuentas», «Lo que notamos»— es un título, no una etiqueta. * * Iba a 11px en caja alta y gris apagado, o sea con el mismo aspecto que los * rotulitos que van dentro de una tarjeta. El resultado es que las secciones no * se veían: la pantalla era una lista de tarjetas sin nada que las agrupara, y * había que leerlas para saber de qué iba cada zona. * * Ahora tiene el tamaño y el color de lo que es. Los rotulitos de dentro de una * tarjeta siguen como estaban —esa distinción es la que hace que se entienda la * jerarquía de un vistazo—. */ .rotulo, .seccion__rotulo { font-size: var(--t-seccion); font-weight: 800; letter-spacing: var(--track-bloque); text-transform: var(--caja-rotulo); color: var(--txt); } /* La cifra con degradado. Se usa en la héroe y en los totales de tarjeta. El `color` de reserva NO es decorativo: si el navegador no aplica background-clip:text —o si alguien fuerza los colores del sistema— el texto se queda con `transparent` y desaparece la única cifra de la pantalla. Con la reserva se queda en tinta, que es fea pero legible. */ .cifra-grad { color: var(--txt); background: var(--grad-cifra); -webkit-background-clip: text; background-clip: text; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .cifra-grad { -webkit-text-fill-color: transparent; } } /* Con los colores forzados (alto contraste de Windows) el degradado se pierde y quedaría un hueco. Se devuelve la tinta. */ @media (forced-colors: active) { .cifra-grad { -webkit-text-fill-color: currentColor; background: none; } } .tnum, .num, .monto { font-variant-numeric: tabular-nums; } /* ========================================================================== 6 · LA CARCASA ========================================================================== Barra superior de vidrio · carril lateral en escritorio · barra inferior en móvil · contenido centrado a 1240. */ .app { /* vh primero como reserva: un WebView viejo que no entienda dvh se queda con el 100vh de arriba en vez de sin alto ninguno. */ min-height: 100vh; min-height: 100dvh; background: transparent; } /* ---------- Barra superior ---------- Pegajosa y de vidrio: al desplazar, el contenido pasa POR DEBAJO y se ve borroso. Es el gesto que más dice «app moderna» y cuesta una regla. */ .topbar { position: sticky; top: 0; z-index: 40; min-height: var(--alto-topbar); padding: var(--e-3) var(--canal); padding-top: calc(var(--e-3) + env(safe-area-inset-top, 0px)); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); border-bottom: 1px solid var(--linea); border-radius: 0; box-shadow: none; transition: box-shadow var(--normal) var(--curva), background var(--normal) var(--curva); } /* Al despegarse del tope aparece la sombra. Lo marca el JS con una clase (js/ds.js → vigilarScroll) porque no hay forma de detectar «sticky pegado» solo con CSS sin un sentinel, y el sentinel obliga a tocar el HTML de todas las vistas. */ .topbar[data-pegada="si"] { box-shadow: var(--sombra-2); background: color-mix(in srgb, var(--bg) 88%, transparent); } .topbar__head h1 { margin: 0; } .topbar__head p { color: var(--txt-2); font-size: var(--t-secundario); } /* ---------- Carril lateral ---------- Ya no es un panel de color distinto: es el mismo terreno con una regla y, dentro, píldoras que se encienden. Un bloque sólido de otro tono a la izquierda de la pantalla pesaba tanto como el contenido. */ .sidebar__panel { background: transparent; border-right: 1px solid var(--linea); padding: var(--e-5) var(--e-4); } .nav__grupo-rotulo { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: var(--track-rotulo); text-transform: var(--caja-rotulo); color: var(--txt-3); padding: 0 var(--e-3); margin-bottom: var(--e-2); } .nav__item { position: relative; display: flex; align-items: center; gap: var(--e-3); width: 100%; min-height: 44px; padding: 10px var(--e-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--txt-2); font-size: var(--t-cuerpo); font-weight: 600; text-align: left; cursor: pointer; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--muelle); } .nav__item:hover { background: var(--capa-2); color: var(--txt); } .nav__item:active { transform: scale(.98); } /* La activa: relleno tintado, texto de marca y una barrita luminosa a la izquierda. Tres señales, y ninguna es solo el color (§9). */ .nav__item[aria-current="page"] { background: var(--marca-suave); color: var(--marca-txt); font-weight: 700; } .nav__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 20px; transform: translateY(-50%); border-radius: var(--r-full); background: var(--grad-marca); box-shadow: var(--brillo-accion); } .nav__badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--capa-2); border: 1px solid var(--linea); color: var(--txt-2); font-size: var(--t-mini); font-weight: 800; } .nav__item[aria-current="page"] .nav__badge { background: var(--marca); border-color: transparent; color: #fff; } /* ---------- Selector de espacio ---------- */ .espacio-sel { width: 100%; display: flex; align-items: center; gap: var(--e-3); padding: 10px var(--e-3); border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--capa-1); box-shadow: var(--filo); cursor: pointer; transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); } .espacio-sel:hover { border-color: var(--linea-fuerte); background: var(--capa-2); } .espacio-sel__icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--marca-suave); font-size: var(--t-glifo-md); } .espacio-sel__texto { display: grid; text-align: left; min-width: 0; } .espacio-sel__texto strong { font-size: var(--t-cuerpo); font-weight: 700; } .espacio-sel__texto span { font-size: var(--t-nano); color: var(--txt-3); } .espacio-sel__flecha { margin-left: auto; color: var(--txt-3); } /* ---------- Menús flotantes ---------- */ /* Un menú flotante lleva fondo OPACO, y eso no es una excepción al vidrio: * es lo único que funciona donde está. * * Los tres cuelgan de .topbar, que sí es de vidrio. Y ahí está el detalle que * cuesta dos horas encontrar: un ancestro con `backdrop-filter` se convierte en * la RAÍZ del fondo de todo lo que lleva dentro. El desenfoque de este menú deja * de ver la página —que es lo que tenía que difuminar— y solo ve el trozo de * barra sobre el que se apoya. El filtro se aplica, no da error, y no hace * nada. * * Lo que queda entonces es el 8% de transparencia de --capa-3 sin difuminar * nada debajo. Con una tarjeta de cuenta detrás —un degradado a todo color— se * leían las palabras del fondo entre las del menú. Medido: «Anotar un gasto» * se distinguía a través del panel del avatar. * * Así que el fondo va entero. El desenfoque se queda por si algún día el menú * deja de colgar de la barra, pero ya no se depende de él para poder leer. */ .espacio-menu, .usuario-menu, .avisos-panel { background: var(--menu-fondo); border: 1px solid var(--linea-fuerte); border-radius: var(--r-lg); box-shadow: var(--sombra-3); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); padding: var(--e-2); overflow: hidden; } .usuario-menu__item, .espacio-menu__item, .avisos-panel button { border-radius: var(--r-sm); transition: background var(--rapido) var(--curva); } .usuario-menu__item:hover, .espacio-menu__item:hover { background: var(--capa-2); } /* ---------- Avatar y botón de usuario ---------- */ .usuario { display: flex; align-items: center; gap: var(--e-2); padding: 6px 10px 6px 6px; border: 1px solid var(--linea); border-radius: var(--r-full); background: var(--capa-1); cursor: pointer; transition: border-color var(--rapido) var(--curva), background var(--rapido) var(--curva); } .usuario:hover { border-color: var(--linea-fuerte); background: var(--capa-2); } .usuario__avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--grad-marca); color: #fff; font-weight: 800; font-size: var(--t-glifo-sm); box-shadow: var(--brillo-accion); } .usuario__texto strong { font-size: var(--t-glifo-sm); font-weight: 700; } .usuario__texto span { font-size: var(--t-mini); color: var(--txt-3); } .icono-btn, .avisos-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linea); border-radius: var(--r-full); background: var(--capa-1); color: var(--txt-2); cursor: pointer; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--muelle); } .icono-btn:hover, .avisos-btn:hover { background: var(--capa-2); color: var(--txt); } .icono-btn:active, .avisos-btn:active { transform: scale(.94); } .avisos-btn__cuenta { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--r-full); background: var(--peligro); color: #fff; font-size: var(--t-micro); font-weight: 800; border: 2px solid var(--bg); } /* ---------- Buscador ---------- */ .buscador { display: flex; align-items: center; gap: var(--e-2); height: 40px; padding: 0 var(--e-3); border: 1px solid var(--linea); border-radius: var(--r-full); background: var(--capa-1); transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background var(--rapido) var(--curva); } .buscador:focus-within { border-color: var(--marca); background: var(--capa-2); box-shadow: 0 0 0 4px var(--marca-suave); } .buscador input { border: 0; background: transparent; outline: none; min-width: 0; } .buscador__atajo { font-size: var(--t-micro); font-weight: 700; padding: 3px 6px; border: 1px solid var(--linea); border-radius: var(--r-xs); color: var(--txt-3); background: var(--bg-2); } /* ---------- Barra inferior (móvil) ---------- Vidrio, cinco destinos, y el activo con una gota de luz encima. El centro es el botón de acción y sobresale. */ .pulgar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 2px; padding: 6px var(--e-2); padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid var(--linea); border-radius: 0; } .pulgar__btn { position: relative; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 7px 2px 5px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--txt-3); cursor: pointer; transition: color var(--rapido) var(--curva), transform var(--rapido) var(--muelle); } .pulgar__btn:active { transform: scale(.93); } .pulgar__txt { font-size: var(--t-micro); font-weight: 700; letter-spacing: .01em; } .pulgar__btn--aqui { color: var(--marca-txt); } /* La gota de luz sobre la pestaña activa. */ .pulgar__btn--aqui::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 3px; transform: translateX(-50%); border-radius: var(--r-full); background: var(--grad-marca); box-shadow: var(--brillo-accion); } /* El centro: sobresale y lleva el degradado. Es el botón de subir/anotar. */ .pulgar__btn--centro { color: #fff; margin-top: -18px; } .pulgar__btn--centro::after { content: ""; position: absolute; top: 2px; left: 50%; width: 46px; height: 46px; transform: translateX(-50%); border-radius: var(--r-full); background: var(--grad-accion); box-shadow: var(--brillo-accion); z-index: -1; } .pulgar__btn--centro .pulgar__txt { color: var(--txt-2); margin-top: 24px; } .pulgar__btn--centro::before { display: none; } /* De lado, lo que falta es ALTO. El teléfono sigue siendo teléfono girado (la barra existe por `esTelefono()`, no por un ancho), pero entre la cabecera, los filtros y 64px de barra quedaban unos 160px de 390 para el contenido. Aquí la barra baja a 48: sin rótulo a la vista —sigue ahí para el lector de pantalla— y el centro sin sobresalir. La app instalada no gira; esto es el navegador. */ @media (max-height: 500px) { body.con-pulgar { --alto-tabbar: 48px; } .pulgar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); padding-left: calc(var(--e-2) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--e-2) + env(safe-area-inset-right, 0px)); } .pulgar__btn { min-height: 44px; padding: 4px 2px; align-content: center; } .pulgar__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pulgar__btn--centro { margin-top: 0; } .pulgar__btn--centro::after { top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); } } body.con-pulgar .main { padding-bottom: calc(var(--alto-tabbar) + env(safe-area-inset-bottom, 0px) + var(--e-6)); } /* ---------- Botón flotante (escritorio) ---------- */ .fab { position: fixed; right: var(--e-6); bottom: var(--e-6); z-index: 44; width: 58px; height: 58px; display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: var(--grad-accion); color: #fff; box-shadow: var(--brillo-accion), var(--sombra-2); cursor: pointer; transition: transform var(--normal) var(--muelle), box-shadow var(--normal) var(--curva); } .fab:hover { transform: translateY(-3px) scale(1.04); } .fab:active { transform: scale(.94); } @media (max-width: 900px) { .fab { display: none; } } /* ---------- Filtros ---------- */ .filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-3); padding: var(--e-4) var(--canal); border-bottom: 1px solid var(--linea); background: transparent; } /* ---------- Pie ---------- */ .pie { padding: var(--e-7) var(--canal); border-top: 1px solid var(--linea); color: var(--txt-3); font-size: var(--t-meta); } .pie__enlaces button { border: 0; background: transparent; color: var(--txt-2); padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva); } .pie__enlaces button:hover { background: var(--capa-2); color: var(--txt); } /* ---------- La zona de contenido ---------- */ .view { max-width: var(--ancho-max); margin: 0 auto; padding: var(--e-6) var(--canal) var(--e-9); } /* ========================================================================== 7 · TARJETAS ========================================================================== La pieza que más cambia respecto al sistema viejo. Allí una tarjeta era del color de la página con una regla de 2px alrededor. Aquí es una CAPA: fondo propio, borde fino y sombra. */ .card, .seccion > .card, section.card { position: relative; background: var(--capa-1); border: 1px solid var(--linea); border-radius: var(--r-lg); box-shadow: var(--sombra-1), var(--filo); padding: var(--card-pad); overflow: hidden; transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva), transform var(--normal) var(--curva); } /* Tarjeta pulsable: se levanta. Solo la que de verdad hace algo — un hover que promete y no cumple es peor que ninguno. */ .card--accion { cursor: pointer; } .card--accion:hover { transform: translateY(-2px); border-color: var(--linea-fuerte); box-shadow: var(--sombra-2), var(--filo); } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); } .card__head h2, .card > h2 { font-size: var(--t-tarjeta); font-weight: 700; letter-spacing: var(--track-bloque); } .card__head p { font-size: var(--t-meta); color: var(--txt-3); line-height: 1.45; } .seccion__titulo { font-size: var(--t-seccion); font-weight: 800; letter-spacing: var(--track-rotulo); text-transform: var(--caja-rotulo); color: var(--txt-3); } .seccion__pista { font-size: var(--t-meta); color: var(--txt-3); } .grid { display: grid; gap: var(--e-4); } /* ========================================================================== 8 · BOTONES ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--control-alto); padding: 0 var(--e-5); border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); background: var(--capa-1); color: var(--txt); font-size: var(--t-cuerpo); font-weight: 700; letter-spacing: -.005em; cursor: pointer; white-space: nowrap; transition: background var(--rapido) var(--curva), border-color var(--rapido) var(--curva), transform 120ms var(--muelle), box-shadow var(--rapido) var(--curva); } .btn:hover { background: var(--capa-2); border-color: var(--txt-3); } .btn:active { transform: scale(.97); } .btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* El principal. Degradado + brillo: es lo que hace que se vea el botón antes que el texto de al lado. Uno por pantalla. */ .btn--primary, .btn-primary { background: var(--grad-accion); border-color: transparent; color: #fff; box-shadow: var(--brillo-accion); } .btn--primary:hover, .btn-primary:hover { background: var(--grad-accion); border-color: transparent; filter: brightness(1.08); box-shadow: var(--brillo-accion), var(--sombra-2); } .btn--ghost, .btn-ghost { background: transparent; border-color: transparent; color: var(--txt-2); } .btn--ghost:hover, .btn-ghost:hover { background: var(--capa-2); color: var(--txt); } .btn--danger { background: var(--peligro); border-color: transparent; color: #fff; box-shadow: var(--brillo-peligro); } .btn--danger:hover { filter: brightness(1.08); } .btn--sm { min-height: 34px; padding: 0 var(--e-3); font-size: var(--t-meta); border-radius: var(--r-xs); } .btn--block, .btn-block { width: 100%; } /* ========================================================================== 9 · CAMPOS ========================================================================== */ /* `align-content: start` no es cosmético. * * Un campo es una rejilla de dos o tres filas —rótulo, control y a veces una * pista debajo— y en una fila de cuatro campos todos se estiran a la altura del * más alto. Con las filas en `auto`, `align-content` vale `normal`, que en una * rejilla se comporta como `stretch`: el hueco sobrante se REPARTE entre las * filas, así que el campo sin pista baja su control medio dedo y el que tiene * cuatro líneas de pista lo sube. Los cuatro selectores de una fila salían a * cuatro alturas distintas. * * No se veía como un fallo de CSS: se veía como si los márgenes se hubieran * puesto a ojo. Se cazó en Configuración → Avisos, que es la fila más larga. */ .field { display: grid; gap: 6px; align-content: start; } .field > span { font-size: var(--t-rotulo); font-weight: 700; letter-spacing: var(--track-rotulo); text-transform: var(--caja-rotulo); color: var(--txt-3); } .input, input[type=text], input[type=search], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea { min-height: var(--control-alto); padding: 0 var(--e-3); border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); background: var(--capa-1); color: var(--txt); font-size: var(--t-cuerpo); transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), background var(--rapido) var(--curva); } textarea { padding: var(--e-3); min-height: 92px; line-height: 1.5; } /* LAS OPCIONES DEL DESPLEGABLE, PINTADAS A MANO ------------------------------------------------------------------ Esto no es un detalle: sin estas dos líneas, el desplegable de un mes es ILEGIBLE en modo oscuro, y no en un navegador raro — en Chrome sobre Windows, que es donde más se usa esta aplicación. La lista que se despliega NO la dibuja la página: la dibuja el sistema operativo. Y Chrome hace una cosa a medias: le pasa el «color» del con «background» propio deja de consultarlo para el popup. La única forma de arreglarlo es decirle a cada