/* ============================================================================ SAMAPP 1.14 · DASHBOARD DE FINANZAS ---------------------------------------------------------------------------- Se carga DESPUÉS de base.css: en empates de especificidad gana este archivo. Todo el CSS nuevo de la pantalla principal de Finanzas vive aquí. ┌──────────────────────────────────────────────────────────────────────────┐ │ POLÍTICA DE COLOR DE FINANZAS — LÉELA ANTES DE AÑADIR UN COLOR │ ├──────────────────────────────────────────────────────────────────────────┤ │ REGLA: el color marca la EXCEPCIÓN, no el dato. │ │ │ │ Un importe teñido dice "mírame". Si todos los importes están teñidos, │ │ ninguno dice nada y la pantalla sólo se ve ruidosa — que es la queja │ │ literal del dueño sobre 1.13: "se ven demasiados números verdes y rojos │ │ esto puede confundir". En la captura de referencia se contaron 14 │ │ elementos teñidos por encima del pliegue. │ │ │ │ 1. POR DEFECTO, TINTA NEUTRA. Cualquier cifra de dinero va en │ │ --ink-strong (jerarquía alta) o --ink (cuerpo). El signo lo comunica │ │ el prefijo "+" / "−", que ya es inequívoco y no cuesta color. │ │ │ │ 2. EL COLOR VIVE EN UN ELEMENTO PEQUEÑO, NUNCA EN EL NÚMERO ENTERO. │ │ Punto de 6px (.fin-dot), chip de 15px (.fin-trend), gajo de dona. │ │ Un número grande teñido pesa; un punto de 6px señala sin gritar. │ │ │ │ 3. VERDE Y ROJO SÓLO PARA LO EXCEPCIONAL: │ │ · el signo del saldo del mes (un elemento, .fin-trend); │ │ · un ingreso dentro de una lista mayoritariamente de gastos; │ │ · un saldo de cuenta en negativo o una deuda. │ │ NO para: gastos de la lista (el "−" ya los distingue), saldos de │ │ cuenta positivos, totales de ingresos/gastos del mes, leyendas. │ │ │ │ 4. LOS COLORES DE GRÁFICO (--finance-chart-1..5) NO son semánticos: │ │ identifican categorías dentro de una dona. No los uses como texto. │ │ │ │ 5. PRESUPUESTO: máximo 3 elementos teñidos SUELTOS por encima del │ │ pliegue. Hoy son 3: punto de Ingresos, punto de Gastos y el chip de │ │ tendencia de la frase de comparación. Si añades uno, quita otro. │ │ │ │ 1.31.2 — "Categorías del mes" NO cuenta contra este presupuesto, y │ │ la excepción es deliberada: ahí el color no adorna un dato, ES el │ │ dato. La barra codifica el porcentaje y el interruptor codifica qué │ │ lado se está mirando (coral gasto / verde ingreso). Un componente │ │ entero cuyo trabajo es comparar puede tener su color; lo que la │ │ regla prohíbe son cifras teñidas sueltas, y ahí siguen los importes │ │ de las filas en tinta neutra (regla 1). │ │ │ │ 6. [data-color-mode="sober"] apaga TODO lo anterior a neutros. Cada │ │ regla de color nueva necesita su pareja en el bloque "sobrio" del │ │ final de este archivo. │ └──────────────────────────────────────────────────────────────────────────┘ ========================================================================== */ /* ============================================================================ 1 · TARJETA DE RESUMEN ---------------------------------------------------------------------------- Sustituye a la antigua `finance-balance-card`, que metía el saldo, la barra comparativa y `finance-balance-stats` en el mismo cajón e imprimía Ingresos, Gastos y Saldo TRES veces sin salir de la tarjeta. ========================================================================== */ #screen-finance .finance-balance-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); } #screen-finance .fin-lead { min-width: 0; } #screen-finance .fin-lead .finance-eyebrow { margin-bottom: 4px; } /* El dato que 1.13 nunca mostró: cuánto dinero HAY. Tinta neutra: es el número más grande de la pantalla, teñirlo sería el mayor grito posible. */ #screen-finance .fin-lead-value { display: block; color: var(--ink-strong); font-size: clamp(30px, 6.4vw, 42px); line-height: 1; font-weight: 700; letter-spacing: -.032em; font-variant-numeric: tabular-nums; } /* 2.1.1 — El importe vacío medía 2.52-2.65:1 y, peor, la jerarquía quedaba invertida: el número de 42px se veía MÁS tenue que su propia etiqueta «Disponible» (--ink-muted, 5.87:1). Con el mismo token la cifra recupera el peso que le toca por tamaño y grosor, sin encender ningún color. */ #screen-finance .fin-lead-value[data-empty="1"] { color: var(--ink-muted); font-weight: 600; } #screen-finance .fin-lead-caption { display: block; margin-top: 6px; color: var(--ink-muted); font-size: var(--t-meta); line-height: 1.35; } /* Tira de flujo del mes: Ingresos, Gastos y Saldo, cada uno UNA vez. */ #screen-finance .fin-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding-top: var(--s4); border-top: 1px solid var(--finance-grid, var(--line)); } #screen-finance .fin-flow-item { min-width: 0; padding-inline: var(--s3); } #screen-finance .fin-flow-item:first-child { padding-left: 0; } #screen-finance .fin-flow-item:last-child { padding-right: 0; } #screen-finance .fin-flow-item + .fin-flow-item { box-shadow: -1px 0 0 var(--finance-grid, var(--line)); } #screen-finance .fin-flow-label { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #screen-finance .fin-flow-value { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-strong); font-size: clamp(14px, 1.35vw, 17px); font-weight: 600; letter-spacing: -.012em; font-variant-numeric: tabular-nums; white-space: nowrap; } /* El saldo es la conclusión de la tira: pesa un punto más que sus sumandos. */ #screen-finance .fin-flow-item.is-net .fin-flow-value { font-weight: 600; } /* Punto de 6px: identifica la fila sin teñir la cifra (política, regla 2). */ #screen-finance .fin-dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); } #screen-finance .fin-dot[data-kind="income"] { background: var(--finance-positive); } #screen-finance .fin-dot[data-kind="expense"] { background: var(--finance-negative); } /* Chip de tendencia: el ÚNICO acento fuerte del encabezado. El número del saldo va en tinta neutra con su prefijo "+"/"−"; este chip de 15px carga con todo el color (política, regla 3). */ #screen-finance .fin-trend { flex: 0 0 15px; width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-muted); font-style: normal; font-size: 7px; line-height: 1; } #screen-finance .fin-trend::before { content: "–"; } /* 1.15.0 — El glifo va en la TINTA del matiz, no en el tono de relleno: a 7px sobre su propio tinte el tono daba 1.28-1.36 de contraste, o sea nada. El chip sigue siendo el único elemento teñido que carga con el signo. */ #screen-finance .fin-trend[data-kind="positive"] { background: var(--tint-income); color: var(--finance-positive-ink); } #screen-finance .fin-trend[data-kind="positive"]::before { content: "▲"; } #screen-finance .fin-trend[data-kind="negative"] { background: var(--tint-expense); color: var(--finance-negative-ink); } #screen-finance .fin-trend[data-kind="negative"]::before { content: "▼"; } /* Comparación contra el mes anterior, en frase. Ocupa el sitio que dejó la escala "0% / 50% / 100%", que no medía nada. */ #screen-finance .fin-flow-note { margin: -2px 0 0; color: var(--ink-muted); font-size: 0.75rem; line-height: 1.35; } /* Mes sin movimientos: una frase en lugar de tres ceros en fila. */ #screen-finance .fin-flow-empty { margin: 0; padding-top: var(--s4); border-top: 1px solid var(--finance-grid, var(--line)); color: var(--ink-muted); font-size: var(--t-meta); } /* 1.31.2 — La tira vuelve a ser UNA FILA de tres en el teléfono, con sus divisores verticales, que es como la pide la referencia. En 1.14 se apilaba bajo 560px porque los importes se partían; en vez de apilar, ahora la cifra escala con el ancho (clamp) y la etiqueta se recorta. El apilado se conserva sólo bajo 380px, donde tres columnas dejan 80px por celda y ni escalando caben dos importes largos. */ @media (max-width: 379px) { #screen-finance .fin-flow { grid-template-columns: 1fr; gap: 0; } #screen-finance .fin-flow-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 10px 0; } #screen-finance .fin-flow-item + .fin-flow-item { box-shadow: none; border-top: 1px solid var(--finance-grid, var(--line)); } #screen-finance .fin-flow-value { margin-top: 0; font-size: 0.9375rem; } } /* Entre 380 y 559px la tira es de tres columnas. Las columnas NO son iguales: se dimensionan por CONTENIDO y el sobrante se reparte con space-between. Medido a 390: con tres celdas de 1fr (108px cada una) "+$51,018.00" ya se salía de la suya, y en inglés ("MX$53,500.00") se salían las tres — que es justo por lo que 1.14 acabó apilándolas. Con ancho natural cada cifra ocupa lo suyo y sólo se aprieta si la SUMA no cabe. */ @media (min-width: 380px) and (max-width: 559px) { #screen-finance .fin-flow { grid-template-columns: auto auto auto; justify-content: space-between; } /* El pasillo entre celdas y el cuerpo de la cifra se ajustan a lo que de verdad hay que meter: en inglés el símbolo es "MX$" y las tres cifras juntas pedían 345px sobre 326 disponibles. */ #screen-finance .fin-flow-item { padding-inline: 8px; } #screen-finance .fin-flow-label { font-size: 0.75rem; } #screen-finance .fin-flow-value { margin-top: 6px; /* 1.32.0 — Fijo, no fluido. Un término en vw da un tamaño fraccionario en casi cualquier ancho (a 390px daba 13.65px) y en una geométrica redondeada eso se ve. Medido el desbordamiento a 320, 360 y 390: la fila de tres métricas cabe con 14px fijos, que es para lo que estaba el clamp. */ font-size: 0.875rem; letter-spacing: -.02em; } } /* ============================================================================ 2 · DESGLOSES POR CATEGORÍA ---------------------------------------------------------------------------- Las tarjetas ya NO repiten el total del mes (la de resumen ya lo dijo). Sólo aportan lo que es información nueva: el reparto por categoría. ========================================================================== */ #screen-finance .finance-breakdown-col { display: grid; gap: var(--s3); align-content: start; min-width: 0; } #screen-finance .finance-breakdown-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s4); } /* El `+ .finance-card { margin-top }` de base.css duplicaría el gap del grid. */ #screen-finance .finance-breakdown-col .finance-card + .finance-card { margin-top: 0; } #screen-finance .finance-breakdown-card .finance-card-head { margin-bottom: 0; } #screen-finance .finance-breakdown-card .finance-eyebrow { margin-bottom: 0; } /* Sin total encima, el separador de base.css ya no separaba nada. El `display` se reafirma porque base.css lo cambia a `grid` de dos pistas bajo 430px y ahí la dona de esta tarjeta no cabría en la pista de 46px. */ #screen-finance .finance-breakdown-card .finance-compact-breakdown { display: flex; align-items: center; margin-top: 0; padding-top: var(--s3); border-top: 0; gap: var(--s4); min-height: 0; } #screen-finance .finance-breakdown-card .finance-compact-breakdown .finance-donut { flex: 0 0 76px; width: 76px; height: 76px; } #screen-finance .finance-breakdown-card .finance-compact-breakdown .finance-donut > span { inset: 17px; } #screen-finance .finance-breakdown-card .finance-compact-legend { gap: 6px; } /* Cuatro columnas: punto · categoría · % · importe. El importe por categoría es el dato nuevo que justifica la tarjeta; el % queda como apoyo. Los selectores llevan `.finance-breakdown-card` a propósito: base.css redefine estas filas dentro de media queries de 640px y 430px, y sin ese peso extra la fila volvería a tener tres pistas para cuatro celdas. */ #screen-finance .finance-breakdown-card .finance-compact-legend-row { grid-template-columns: 7px minmax(0, 1fr) auto auto; gap: 8px; } #screen-finance .finance-breakdown-card .finance-compact-legend-row span { color: var(--ink); font-size: var(--t-meta); } /* 1.15.0 — El porcentaje iba en --ink-faint, que es el token de marcador de posición y da 2.52 sobre la tarjeta: no llega a AA en ninguna de las seis combinaciones, tampoco en Sobrio. Es un DATO, no un marcador de posición, así que pasa a --ink-muted (5.87 en claro, 6.67 en oscuro) sin dejar de leerse como secundario frente al nombre en --ink. */ #screen-finance .finance-breakdown-card .finance-compact-legend-row em { color: var(--ink-muted); font-size: 0.75rem; font-style: normal; font-variant-numeric: tabular-nums; } /* Tinta neutra, no verde/rojo: el punto de la izquierda ya dice de qué categoría hablamos y de qué dona viene (política, reglas 1 y 2). */ #screen-finance .finance-breakdown-card .finance-compact-legend-row strong { color: var(--ink-strong); font-size: var(--t-meta); font-weight: 600; font-variant-numeric: tabular-nums; } /* base.css sólo definía tres puntos; ahora la leyenda llega a cinco filas (cuatro categorías + "Otras categorías"), que son los cinco colores de gráfico disponibles. */ #screen-finance .finance-breakdown-card .finance-compact-legend-row i[data-i="3"] { background: var(--finance-chart-4); } #screen-finance .finance-breakdown-card .finance-compact-legend-row i[data-i="4"] { background: var(--finance-chart-5); } @media (max-width: 430px) { #screen-finance .finance-breakdown-card .finance-compact-breakdown { gap: var(--s3); } #screen-finance .finance-breakdown-card .finance-compact-breakdown .finance-donut { flex-basis: 62px; width: 62px; height: 62px; } #screen-finance .finance-breakdown-card .finance-compact-breakdown .finance-donut > span { inset: 14px; } #screen-finance .finance-breakdown-card .finance-compact-legend-row { grid-template-columns: 6px minmax(0, 1fr) auto auto; gap: 6px; } #screen-finance .finance-breakdown-card .finance-compact-legend-row span, #screen-finance .finance-breakdown-card .finance-compact-legend-row strong { font-size: 0.75rem; } #screen-finance .finance-breakdown-card .finance-compact-legend-row em { font-size: 0.6875rem; } } /* ============================================================================ 3 · MOVIMIENTOS Y CUENTAS · APLICACIÓN DE LA POLÍTICA DE COLOR ---------------------------------------------------------------------------- En 1.13 TODOS los importes de la lista iban teñidos: gasto rojo, ingreso verde. En un mes normal 4 de cada 5 filas son gastos, así que el rojo era el color de fondo de la lista y no señalaba nada. Se apaga el gasto y se deja el verde para el ingreso, que sí es la fila excepcional. Se escribe dos veces cada selector a propósito: la lista también se renderiza dentro del sheet "Ver todos", que cuelga de y no de #screen-finance, y ahí la regla con ID no aplicaría. ========================================================================== */ .finance-tx-amount[data-kind="expense"], .finance-tx-amount[data-kind="debt-payment"], #screen-finance .finance-tx-amount[data-kind="expense"], #screen-finance .finance-tx-amount[data-kind="debt-payment"] { color: var(--ink); font-weight: 600; } /* 1.15.0 — La TINTA del verde, no el tono de relleno. El ingreso sigue siendo el único importe teñido de la lista (política, regla 3); lo que cambia es que ahora se lee: 1.44 -> 5.99 en claro. */ .finance-tx-amount[data-kind="income"], #screen-finance .finance-tx-amount[data-kind="income"] { color: var(--finance-positive-ink); } /* El icono de la fila cargaba además un círculo rojo por cada gasto: dos señales rojas por fila. El círculo pasa a neutro y sólo el ingreso conserva su tinte suave. Las filas con categoría propia ya usan el color de la categoría (.is-category en base.css) y no se tocan. */ .finance-tx-icon[data-kind="expense"]:not(.is-category), .finance-tx-icon[data-kind="debt-payment"]:not(.is-category), #screen-finance .finance-tx-icon[data-kind="expense"]:not(.is-category), #screen-finance .finance-tx-icon[data-kind="debt-payment"]:not(.is-category) { color: var(--ink-muted); background: var(--surface-sunken); } /* Un saldo positivo es lo normal: no merece color. El negativo y la deuda sí (política, regla 3). Coincide con lo que ya hacía .account-card-balance. */ .finance-account-balance[data-kind="positive"], #screen-finance .finance-account-balance[data-kind="positive"] { color: var(--ink-strong); } .finance-account-balance[data-kind="negative"], .finance-account-balance[data-kind="debt"], #screen-finance .finance-account-balance[data-kind="negative"], #screen-finance .finance-account-balance[data-kind="debt"] { color: var(--finance-negative-ink); } /* Compromisos: el importe pendiente en tinta neutra; el botón Pagar/Cobrar ya es el elemento que reclama la atención de esa fila. */ .finance-commitment-row > b[data-kind="income"], .finance-commitment-row > b[data-kind="expense"], #screen-finance .finance-commitment-row > b[data-kind="income"], #screen-finance .finance-commitment-row > b[data-kind="expense"] { color: var(--ink-strong); } /* ============================================================================ 4 · REJILLA DEL TABLERO · BANDAS, NO COLUMNAS PAREADAS ---------------------------------------------------------------------------- HISTORIAL DEL PROBLEMA (medido a 1280x860, tablero de 985px): 1.13 ponía la tarjeta de balance en 6 de 12 columnas junto a dos tarjetas de resumen mucho más bajas: ~180px de papel muerto a su derecha. 1.14-lienzo1 lo cambió a `balance(5) | cuentas(7)` en la misma fila. Salió PEOR: la tarjeta de Cuentas mide 577px (en escritorio el carrusel es una rejilla; con pistas de 200px sólo caben 2 columnas en los 546px de la tarjeta, y 5 naipes en 2 columnas son 3 filas). El balance, cuyo contenido real son 196px, se estiraba a esos mismos 577px y enseñaba 381px de vacío con borde alrededor. Un cajón vacío se lee como algo sin terminar. RAÍZ: emparejar por fila obliga a igualar alturas, y estas cinco piezas no tienen alturas comparables dos a dos: balance 196 · cuentas 577 · movimientos 405 · desgloses 405 · deudas 128 ARREGLO: dejar de emparejar. El tablero pasa a BANDAS de ancho completo, y sólo se pone una fila a dos columnas donde las dos piezas ya medían lo mismo por sí solas (movimientos 405 · desgloses 405, medidos arriba): banda 1 · Disponible ancho completo, compuesto en horizontal banda 2 · Cuentas ancho completo — una rejilla de naipes ancha y baja en vez de estrecha y alta banda 3 · Movimientos | Desgloses (7 / 5) — alturas ya parejas banda 4 · Tarjetas y deudas ancho completo Ninguna banda iguala su altura con nadie, así que ninguna tarjeta hereda vacío de su vecina. El orden además sigue la lectura: cuánto tengo → dónde está → qué pasó → qué debo. ========================================================================== */ /* Aire de la banda 1: separa la cifra grande del filete vertical y el filete del primer dato de la tira, así que el filete nunca queda pegado a un texto. Escala con la ventana porque el pasillo entre saldo y flujo también lo hace. */ #screen-finance .finance-dashboard { --fin-hero-gap: clamp(24px, 3.4vw, 52px); } /* --- Escritorio ancho: 12 columnas ---------------------------------------- */ @media (min-width: 1180px) { #screen-finance .finance-dashboard { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; gap: var(--s4); } #screen-finance .finance-balance-card { grid-column: 1 / -1; grid-row: 1; } #screen-finance .finance-accounts-card { grid-column: 1 / -1; grid-row: 2; } #screen-finance .finance-movements-card { grid-column: 1 / span 7; grid-row: 3; } #screen-finance .finance-breakdown-col { grid-column: 8 / span 5; grid-row: 3; } #screen-finance .finance-debts-card { grid-column: 1 / -1; grid-row: 4; } /* Sin desgloses (usuario nuevo, mes sin movimientos) la lista se queda con las doce columnas en vez de dejar cinco en blanco a su derecha. */ #screen-finance .finance-dashboard[data-layout="lean"] .finance-movements-card { grid-column: 1 / -1; } } /* --- Escritorio estrecho / tablet apaisado: 6 columnas -------------------- */ @media (min-width: 900px) and (max-width: 1179px) { #screen-finance .finance-dashboard { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: var(--s3); } #screen-finance .finance-balance-card { grid-column: 1 / -1; grid-row: 1; } #screen-finance .finance-accounts-card { grid-column: 1 / -1; grid-row: 2; } #screen-finance .finance-movements-card { grid-column: 1 / span 3; grid-row: 3; } #screen-finance .finance-breakdown-col { grid-column: 4 / span 3; grid-row: 3; } #screen-finance .finance-debts-card { grid-column: 1 / -1; grid-row: 4; } #screen-finance .finance-dashboard[data-layout="lean"] .finance-movements-card { grid-column: 1 / -1; } } /* ---------------------------------------------------------------------------- BANDA 1 · "DISPONIBLE" EN HORIZONTAL ---------------------------------------------------------------------------- A ancho completo la composición en columna dejaría la cifra arriba a la izquierda y 600px de papel a su derecha: el mismo vacío de antes, girado. En horizontal la banda se llena y además dice algo: a la izquierda el SALDO (lo que hay, un stock), a la derecha el FLUJO del mes (lo que entró y salió). Son dos ideas distintas y el filete lo hace explícito. El corte está en 960 y no en 900 por medida: a 900px de ventana el tablero mide 606 y a la tira le quedaban 337px para pedir 366 — el importe del saldo se salía de su celda. Entre 900 y 959 la tarjeta se queda apilada (cifra arriba, tira debajo a todo lo ancho), que es la misma composición del móvil y tampoco deja hueco: lo que hay bajo la cifra ocupa la banda entera. -------------------------------------------------------------------------- */ @media (min-width: 960px) { #screen-finance .finance-balance-card { display: grid; /* La segunda pista se dimensiona por CONTENIDO, no con 1fr, y el sobrante se reparte con `space-between`. Es lo que mantiene el filete vertical recto: con 1fr, la tira y la frase se anclaban cada una por su cuenta con `margin-left:auto` y, al medir distinto (439px la tira, 274px la frase), sus bordes izquierdos quedaban a 165px de distancia — el filete salía escalonado. Compartiendo pista, las dos se estiran al mismo ancho y el borde arranca en la misma x. */ grid-template-columns: minmax(0, auto) minmax(0, max-content); justify-content: space-between; column-gap: var(--fin-hero-gap); /* Fila 1 la tira, fila 2 la frase de comparación. Sin hueco entre ellas: el filete vertical de la izquierda las atraviesa y tiene que salir continuo, no partido en dos trozos. */ row-gap: 0; align-items: center; padding: var(--s5) var(--s4); } #screen-finance .finance-balance-card .fin-lead { grid-column: 1; /* `span N` y no `1 / -1`: aquí las filas son IMPLÍCITAS (no hay grid-template-rows), y en una rejilla implícita el `-1` apunta al final de la parte explícita, que no existe. Con `span 3` la cifra abarca la tira, la frase y el bloque de categorías pase lo que pase. Las filas que no tengan contenido miden 0 y con `row-gap:0` no añaden ni un píxel. 1.31 — era `span 2`: al entrar "Dónde se concentra tu dinero" la tarjeta creció y el saldo se quedaba centrado sobre las dos primeras filas, con un hueco muerto de ~110px debajo. */ grid-row: 1 / span 3; display: flex; flex-direction: column; justify-content: center; /* Sin tope, una leyenda larga ("En 7 cuentas · $120,000.00 en deudas") empujaría el pasillo hasta comerse la tira de flujo. */ max-width: 380px; } /* La tira se agrupa y se ancla a la DERECHA en vez de estirarse. Medido a 1900px cuando la pista era 1fr: las tres celdas salían a 450px cada una y "Ingresos" quedaba a 900px de "Gastos" — tres cifras sueltas flotando en una banda, el mismo vacío de la tarjeta antigua puesto en horizontal. Con la pista al ancho del contenido, el grupo mide siempre lo mismo y el sobrante se convierte en pasillo entre el saldo y el flujo. El tope de 600px es el freno para un mes de cifras muy largas. */ #screen-finance .finance-balance-card .fin-flow, #screen-finance .finance-balance-card .fin-flow-empty, #screen-finance .finance-balance-card .fin-flow-note { grid-column: 2; align-self: stretch; max-width: 600px; margin: 0; padding-left: var(--fin-hero-gap); border-left: 1px solid var(--finance-grid, var(--line)); } #screen-finance .finance-balance-card .fin-flow, #screen-finance .finance-balance-card .fin-flow-empty { grid-row: 1; padding-top: 0; border-top: 0; } /* `stretch` estira la tira al alto de la cifra (87px contra 49): sin esto las etiquetas quedarían pegadas al borde de arriba. */ #screen-finance .finance-balance-card .fin-flow { align-content: center; } #screen-finance .finance-balance-card .fin-flow-empty { display: flex; align-items: center; } #screen-finance .finance-balance-card .fin-flow-note { grid-row: 2; padding-bottom: 2px; } /* El suelo del clamp se queda en los 14px del original a propósito. Con 16px la tira pedía 366px y sólo tenía 337 a 900px de ventana: los importes se desbordaban de sus celdas. Sólo se deja crecer donde hay sitio de sobra. */ #screen-finance .finance-balance-card .fin-flow-value { font-size: clamp(14px, 1.3vw, 20px); } #screen-finance .finance-balance-card .fin-flow-item { padding-inline: 10px; } } /* ---------------------------------------------------------------------------- TOPE DE MEDIDA · LA PANTALLA NO CRECE SIN LÍMITE ---------------------------------------------------------------------------- Medido en una ventana de 1900px: el tablero se iba a 1660px de ancho y todo se descosía por dentro — el carrusel abría 8 pistas de naipe para 5 cuentas y dejaba 627px de banda vacía a la derecha, y una fila de movimiento ponía el icono y el importe a metro y medio de distancia. Un ancho de lectura tiene tope, igual que una columna de texto. A partir de 1280px la pantalla deja de estirarse y se centra: por encima de ese ancho todo se comporta exactamente como en el 1280 que sí está medido. El tope abarca también el encabezado y el navegador de mes, que son hermanos del tablero: si sólo se topara el tablero, el título "Finanzas" y el botón "+ Movimiento" quedarían desalineados con las tarjetas. -------------------------------------------------------------------------- */ @media (min-width: 1180px) { #screen-finance.active > .finance-head, #screen-finance.active > .finance-month-nav, #screen-finance.active > .finance-dashboard, #screen-finance.active > .finance-panel { max-width: 1280px; margin-inline: auto; } } /* --- Móvil y tablet vertical: una columna --------------------------------- */ @media (max-width: 899px) { #screen-finance .finance-dashboard { grid-template-columns: 1fr; gap: var(--s3); } #screen-finance .finance-balance-card, #screen-finance .finance-accounts-card, #screen-finance .finance-movements-card, #screen-finance .finance-breakdown-col, #screen-finance .finance-debts-card { grid-column: 1 / -1; } /* A media pantalla de un móvil no caben dona + categoría + % + importe: los desgloses van a ancho completo, apilados. */ #screen-finance .finance-breakdown-col { display: grid; grid-template-columns: 1fr; } } /* En escritorio las tarjetas se estiran a la altura de su fila: el contenido se ancla arriba y el aire sobrante queda DENTRO de la tarjeta, no como un escalón entre tarjetas. */ @media (min-width: 900px) { #screen-finance .finance-dashboard > .finance-module { height: auto; align-self: stretch; } #screen-finance .finance-accounts-card, #screen-finance .finance-movements-card, #screen-finance .finance-debts-card { display: flex; flex-direction: column; } /* El carrusel es rejilla en escritorio (base.css:5222). Ahora que Cuentas es una banda de ancho completo el reparto cambia por completo: · antes → tarjeta 568px, carrusel 546, pistas de 200 ⇒ 2 columnas ⇒ 5 naipes en 3 filas ⇒ 505px de carrusel, 577 de tarjeta. · ahora → tarjeta 985px, carrusel 963, pistas de 180 ⇒ 5 columnas ⇒ 5 naipes en 1 fila ⇒ 176px de carrusel, 247 de tarjeta. El 180 está elegido con holgura a propósito: con 184 el cálculo de pistas daba 4 columnas por 5px (5·184+4·12 = 968 > 963) y los naipes volvían a partirse en dos filas. Con 180 caben cinco desde 948px de carrusel y cuatro desde 756: los saltos quedan lejos de los anchos reales, no en el filo. `auto-fit` en vez del `auto-fill` heredado: `auto-fill` deja abiertas las pistas que sobran y con 5 naipes en una banda de 1259px abría SEIS, o sea una pista vacía de 212px al final de la fila. `auto-fit` las cierra y reparte ese ancho entre los naipes, así la fila siempre cierra a ras. El seguro contra el caso degenerado (una sola cuenta estirada a toda la banda, que es lo que `auto-fill` evitaba) es el `max-width` de abajo. */ #screen-finance .finance-accounts-card .account-carousel { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-content: start; } /* Un naipe es una tarjeta, no un panel: pasado cierto ancho deja de leerse como tal. Con una o dos cuentas `auto-fit` daría pistas de 600px+. */ #screen-finance .finance-accounts-card .account-card { max-width: 320px; } /* Cuando la columna de desgloses trae una sola tarjeta (un mes sólo de gastos, por ejemplo) queda más baja que la lista de movimientos que tiene al lado. En vez de dejar el escalón, la tarjeta se estira y su dona y leyenda se centran en el alto sobrante: el aire queda dentro y la fila cierra a ras. */ #screen-finance .finance-breakdown-col { align-content: stretch; } #screen-finance .finance-breakdown-card .finance-compact-breakdown { flex: 1; } } /* ============================================================================ 5 · MODO SOBRIO ---------------------------------------------------------------------------- Sobrio apaga el color decorativo. Los tokens --finance-positive/negative ya resuelven a --ink por tokens.css; aquí se neutraliza lo que lleva color propio (puntos, chip de tendencia, tintes de fondo). ========================================================================== */ [data-color-mode="sober"] #screen-finance .fin-dot, [data-color-mode="sober"] #screen-finance .fin-dot[data-kind="income"], [data-color-mode="sober"] #screen-finance .fin-dot[data-kind="expense"] { background: var(--ink-muted); } [data-color-mode="sober"] #screen-finance .fin-trend, [data-color-mode="sober"] #screen-finance .fin-trend[data-kind="positive"], [data-color-mode="sober"] #screen-finance .fin-trend[data-kind="negative"] { background: var(--surface-sunken); color: var(--ink); } [data-color-mode="sober"] .finance-tx-amount[data-kind="income"], [data-color-mode="sober"] #screen-finance .finance-tx-amount[data-kind="income"], [data-color-mode="sober"] .finance-account-balance[data-kind="negative"], [data-color-mode="sober"] .finance-account-balance[data-kind="debt"], [data-color-mode="sober"] #screen-finance .finance-account-balance[data-kind="negative"], [data-color-mode="sober"] #screen-finance .finance-account-balance[data-kind="debt"] { color: var(--ink); } [data-color-mode="sober"] .finance-tx-icon[data-kind="income"]:not(.is-category), [data-color-mode="sober"] #screen-finance .finance-tx-icon[data-kind="income"]:not(.is-category) { color: var(--ink-muted); background: var(--surface-sunken); } [data-color-mode="sober"] #screen-finance .finance-compact-legend-row i[data-i="3"] { background: color-mix(in srgb, var(--ink-faint) 70%, var(--surface)); } [data-color-mode="sober"] #screen-finance .finance-compact-legend-row i[data-i="4"] { background: color-mix(in srgb, var(--ink-faint) 45%, var(--surface)); } /* ============================================================================ 1.31.2 · CATEGORÍAS DEL MES ---------------------------------------------------------------------------- Sustituye a `.fin-top` (las dos líneas "Más gastas en / Más ingresas de") y a las dos tarjetas de dona. Las tres decían lo mismo en tres sitios. NADA de esto inventa un valor. Todo sale de lo que la pantalla ya usa: · Título de sección → `650 14px/1.2 var(--font-text)` sobre --ink, que es exactamente `#screen-finance .finance-panel-head h2` ("Cuentas", "Últimos movimientos"). No es un título nuevo: es el mismo. · Nombre e importe de la fila → 16px/650 sobre --ink, que es `#screen-finance .finance-tx-title`. Y bajan a 15px bajo 480px, igual que ellos. · Ficha del icono → 40×40, --r-md, 16px y filete de --finance-grid, que es `#screen-finance .finance-tx-icon` al pie de la letra. · Dato secundario (el %) → --finance-muted a --t-meta, como `.finance-tx-meta`. · Separaciones → escala --s1..--s6. Radios → --r-sm/--r-md/--r-full. · Color → --finance-negative / --finance-positive y sus `-soft`, que ya tiñen los iconos de la lista de movimientos. Ni un hex nuevo. Las mezclas van contra --tone-canvas y no contra --surface: mezclar contra el fondo de la tarjeta colapsa la paleta en oscuro. ========================================================================== */ #screen-finance .fin-cats { --fin-cat-accent: var(--finance-negative); --fin-cat-soft: var(--finance-negative-soft); display: grid; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--finance-grid, var(--line)); } #screen-finance .fin-cats[data-kind="income"] { --fin-cat-accent: var(--finance-positive); --fin-cat-soft: var(--finance-positive-soft); } /* --- Cabecera: título + interruptor -------------------------------------- */ #screen-finance .fin-cats-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-width: 0; } #screen-finance .fin-cats-title { min-width: 0; margin: 0; color: var(--ink); font: 600 14px/1.2 var(--font-text); } #screen-finance .fin-seg { display: flex; flex: 0 0 auto; gap: 2px; padding: 4px; border-radius: var(--r-full); background: var(--surface-sunken); } #screen-finance .fin-seg-btn { /* 36px y no 30: a 30 era el ÚNICO objetivo táctil de toda la app por debajo del umbral, y lo detectó el barrido de accesibilidad. Sigue siendo el control compacto que pide la referencia —las píldoras de fecha de la hoja de captura miden 38— pero ya se puede picar con el pulgar. */ /* 2.1.1 — 36 seguía por debajo del umbral (medido 67x36). El token manda. */ min-height: var(--tap); padding: 0 var(--s3); border: 0; border-radius: var(--r-full); background: transparent; color: var(--finance-muted); font: 600 13px/1 var(--font-text); /* 1.32.0 — --t-meta; 12.5 era medio píxel */ white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } /* La pestaña encendida se tiñe del lado que representa: "Gastos" siempre coral e "Ingresos" siempre verde. Así el interruptor dice de qué va cada mitad antes de tocarla. Es el mismo par de tintes de los iconos de movimiento. */ #screen-finance .fin-seg-btn[data-kind="expense"][aria-selected="true"] { background: color-mix(in srgb, var(--finance-negative) 20%, var(--tone-canvas)); color: var(--finance-negative-ink); } #screen-finance .fin-seg-btn[data-kind="income"][aria-selected="true"] { background: color-mix(in srgb, var(--finance-positive) 20%, var(--tone-canvas)); color: var(--finance-positive-ink); } @media (hover: hover) { #screen-finance .fin-seg-btn[aria-selected="false"]:hover { color: var(--ink); } } #screen-finance .fin-seg-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* --- Un renglón por categoría -------------------------------------------- */ /* Rejilla de cuatro columnas y dos filas: arriba icono, nombre, importe y porcentaje; abajo la barra, alineada con el nombre y no bajo el icono, para que se lea como su subrayado y no como una regla suelta. */ #screen-finance .fin-cat-list { display: grid; gap: var(--s3); } #screen-finance .fin-cat-row { --cat-color: var(--fin-cat-accent); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--s3); row-gap: 6px; min-width: 0; } /* Misma ficha que la de un movimiento: 40px, --r-md, 16px y filete. Lo único propio es el tinte, que aquí viene del color que el usuario le puso a SU categoría —el mismo criterio que las fichas del alta de movimiento—. */ #screen-finance .fin-cat-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; grid-row: 1 / span 2; border: 1px solid color-mix(in srgb, var(--finance-grid, var(--line)) 84%, transparent); border-radius: var(--r-md); background: color-mix(in srgb, var(--cat-color) 16%, var(--tone-canvas)); color: var(--ink); font-size: 1rem; } #screen-finance .fin-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.2; } /* Tinta neutra en el dinero: la política de color de este archivo (regla 1) dice que el importe no se tiñe, el color vive en la barra. */ #screen-finance .fin-cat-value { color: var(--ink); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } #screen-finance .fin-cat-pct { min-width: 3.2ch; color: var(--finance-muted); font-size: var(--t-meta); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } #screen-finance .fin-cat-bar { grid-column: 2 / -1; display: block; height: 6px; border-radius: var(--r-full); background: var(--surface-sunken); overflow: hidden; } #screen-finance .fin-cat-bar i { display: block; height: 100%; min-width: 0; border-radius: var(--r-full); background: var(--fin-cat-accent); } /* Una categoría sin movimientos ese mes existe, pero no compite: tinta tenue y ni rastro de color. El renglón informa; no llama la atención. */ #screen-finance .fin-cat-row[data-zero] .fin-cat-name, #screen-finance .fin-cat-row[data-zero] .fin-cat-value { color: var(--finance-muted); font-weight: 600; } #screen-finance .fin-cat-row[data-zero] .fin-cat-icon { background: var(--surface-sunken); color: var(--ink-faint); } /* --- El apunte del pie ---------------------------------------------------- */ #screen-finance .fin-cat-tip { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s3); border-radius: var(--r-md); background: var(--fin-cat-soft); color: var(--ink); font-size: var(--t-meta); line-height: 1.35; } #screen-finance .fin-cat-tip .i { flex: 0 0 auto; font-size: 1rem; color: var(--fin-cat-accent); } #screen-finance .fin-cats-empty { margin: 0; padding-bottom: var(--s1); color: var(--finance-muted); font-size: var(--t-meta); line-height: 1.5; } /* `[hidden]` no está forzado globalmente en esta hoja y la lista es un grid: sin esto, `display:grid` le gana al atributo y se pintaban las dos. */ #screen-finance .fin-cat-list[hidden] { display: none; } /* --- El chip de tendencia de la frase de comparación --------------------- */ /* No se reutiliza `.fin-trend` porque allí arriba=verde y abajo=coral, y aquí "gastaste más" es flecha ARRIBA en coral: el signo lo da la dirección y el color, la métrica. Mismo tamaño (15px) y misma forma que aquél. */ #screen-finance .fin-note-trend { flex: 0 0 15px; width: 15px; height: 15px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--finance-muted); font-style: normal; font-size: 7px; line-height: 1; } #screen-finance .fin-note-trend::before { content: "–"; } #screen-finance .fin-note-trend[data-dir="up"]::before { content: "▲"; } #screen-finance .fin-note-trend[data-dir="down"]::before { content: "▼"; } #screen-finance .fin-note-trend[data-kind="expense"] { background: var(--tint-expense); color: var(--finance-negative-ink); } #screen-finance .fin-note-trend[data-kind="income"] { background: var(--tint-income); color: var(--finance-positive-ink); } #screen-finance .fin-flow-note { display: flex; align-items: center; gap: var(--s2); } /* --- Modo sobrio: sin color, ni en las barras ---------------------------- */ [data-color-mode="sober"] #screen-finance .fin-seg-btn[aria-selected="true"] { background: var(--surface); color: var(--ink-strong); } [data-color-mode="sober"] #screen-finance .fin-cat-icon { background: var(--surface-sunken); color: var(--ink); } [data-color-mode="sober"] #screen-finance .fin-cat-bar i { background: var(--ink-muted); } [data-color-mode="sober"] #screen-finance .fin-cat-tip { background: var(--surface-sunken); color: var(--ink); } [data-color-mode="sober"] #screen-finance .fin-cat-tip .i { color: var(--ink-muted); } [data-color-mode="sober"] #screen-finance .fin-note-trend { background: var(--surface-sunken); color: var(--ink-muted); } /* --- Estrecho: mismas bajadas de tamaño que el resto de Finanzas --------- */ /* La pantalla ya baja `.finance-tx-title` a 15px y `.finance-tx-meta` a 12px bajo 480px. Estas filas siguen la misma escala, no una propia. */ @media (max-width: 480px) { #screen-finance .fin-cat-name, #screen-finance .fin-cat-value { font-size: 0.9375rem; } #screen-finance .fin-cat-pct { font-size: 0.75rem; } } /* Bajo 380px el importe y el porcentaje no caben con el nombre en un renglón: el porcentaje baja a la fila de la barra, que es donde ya se representa. */ @media (max-width: 380px) { #screen-finance .fin-cat-row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s2); } #screen-finance .fin-cat-value { grid-column: 3; grid-row: 1; } #screen-finance .fin-cat-bar { grid-column: 2; grid-row: 2; } #screen-finance .fin-cat-pct { grid-column: 3; grid-row: 2; min-width: 0; } } /* --- Escritorio: el bloque va en la segunda columna de la tarjeta -------- */ /* Mismo sitio y mismo pasillo que la tira de flujo, con la que comparte filete. El corte es 960px, el de la rejilla de la tarjeta. */ @media (min-width: 960px) { #screen-finance .finance-balance-card .fin-cats { grid-column: 2; grid-row: 3; max-width: 600px; margin: 0; padding-left: var(--fin-hero-gap); padding-top: var(--s4); border-left: 1px solid var(--finance-grid, var(--line)); border-top: 1px solid var(--finance-grid, var(--line)); align-self: stretch; } } /* ============================================================================ 2.1.2 · PULIDO DE FINANZAS CON MUCHOS DATOS ---------------------------------------------------------------------------- Todo lo de este bloque se midió en Chrome con cifras largas, en inglés, con letra grande y con el juego de datos masivo. No se quita nada: se reacomoda sólo lo que no cabía. ========================================================================== */ /* 2.1.2 — FIN-01 · Tira Ingresos | Gastos | Saldo entre 380 y 559 px. La fila de tres (1.31.2, la de la referencia) se queda tal cual MIENTRAS QUEPA. Sólo cuando alguna cifra no cabe en su celda (lo marca screens.js con data-apretada, midiendo) el Saldo del mes baja a su propio renglón, a todo lo ancho y con filete superior. Antes el Saldo se salía de la tarjeta (+USD 23,456.79) y con letra al 200 % las cifras se encimaban. `transition-property: none`: la medida quita la marca y mide al instante; con «reducir movimiento» la regla global da 0.01 ms de transición a todo y la medida veía el relleno viejo, así que la tira parpadeaba entre las dos formas. Estos elementos nunca tuvieron transición propia. 2.1.2 — Vale también de 560 px en adelante. screens.js ya marcaba la tira a cualquier ancho, pero la regla sólo existía hasta 559: en la tableta, en el iPad horizontal (1024) y en escritorio hasta ~1180 las tres cifras se encimaban con montos grandes (medido a 960: 26 px entre Ingresos y Gastos, y el Saldo 52 px fuera de la tarjeta; con 9 cifras se leía «$123,456,789.0$234,567,890.1»). Sin marca, nada cambia. */ @media (min-width: 380px) { #screen-finance .fin-flow, #screen-finance .fin-flow-item, #screen-finance .fin-flow-value { transition-property: none; } #screen-finance .fin-flow[data-apretada] { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; } #screen-finance .fin-flow[data-apretada] .fin-flow-item:nth-child(2) { padding-right: 0; } #screen-finance .fin-flow[data-apretada] .fin-flow-item.is-net { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-top: var(--s3); padding: var(--s3) 0 0; box-shadow: none; border-top: 1px solid var(--finance-grid, var(--line)); } #screen-finance .fin-flow[data-apretada] .fin-flow-item.is-net .fin-flow-value { margin-top: 0; } } /* 2.1.2 — Desde 960 px la tira va en la columna derecha de la tarjeta, al lado de «Disponible», y ahí dos celdas por renglón tampoco alcanzan con montos en inglés («MX$13,304,272,475.99» salía 11 px de su celda a 960). Marcada, la tira pasa a una columna: cada fila con su etiqueta a la izquierda y su cifra a la derecha, como en el teléfono de menos de 380 px; el Saldo conserva su filete de arriba. */ @media (min-width: 960px) { #screen-finance .finance-balance-card .fin-flow[data-apretada] { grid-template-columns: minmax(0, 1fr); } #screen-finance .finance-balance-card .fin-flow[data-apretada] .fin-flow-item:not(.is-net) { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 6px 0; box-shadow: none; } #screen-finance .finance-balance-card .fin-flow[data-apretada] .fin-flow-item:not(.is-net) .fin-flow-value { margin-top: 0; } } /* 2.1.2 — FIN-02 · Naipe de cuenta en escritorio (rejilla, >= 900 px). La cifra se partía a mitad del número («MX$23,100.0 / 0») porque medía 25 px fijos en un naipe de 171-186 px. Ahora se ajusta al ancho DEL NAIPE según el largo del importe (--len lo pone screens.js): los importes cortos siguen a 25 px y sólo los largos bajan, con 15 px de suelo. En el teléfono (carrusel) no cambia nada. overflow-wrap:anywhere sigue de último recurso. */ @supports (width: 1cqi) { @media (min-width: 900px) { #screen-finance .account-card { container-type: inline-size; } #screen-finance .account-card-balance { font-size: max(15px, min(25px, calc(100cqi / (var(--len, 10) * 0.62)))); } } } /* 2.1.2 — FIN-11 · Cifra «Disponible» con miles de millones. A 42 px «-$194,529,025,446.23» mide 389 px: en escritorio su columna tiene un tope de 380 px y comparte la tarjeta con la tira, así que cruzaba el filete (82 px fuera de su columna a 960) y en inglés («−MX$…») se partía dejando el «−» solo en un renglón. Ahora la cifra se ajusta al sitio que tiene según su largo (--len lo pone screens.js), como el naipe de FIN-02: 0.52 es el ancho medido por carácter de esta cifra (0.45-0.51 em). En escritorio su sitio es la mitad de la tarjeta sin el pasillo, con el tope de 380 px de .fin-lead; en el teléfono, la tarjeta entera. Los importes de hasta 14 caracteres («$1,234,567.89») siguen igual que siempre; 22 px de suelo. */ @supports (width: 1cqi) { #screen-finance .finance-balance-card { container-type: inline-size; } #screen-finance .fin-lead-value { font-size: max(22px, min(clamp(30px, 6.4vw, 42px), calc(100cqi / (var(--len, 10) * 0.52)))); } @media (min-width: 960px) { #screen-finance .finance-balance-card .fin-lead-value { font-size: max(22px, min(clamp(30px, 6.4vw, 42px), calc(min(380px, (100cqi - var(--fin-hero-gap, 0px)) / 2) / (var(--len, 10) * 0.52)))); } } } /* 2.1.2 — FIN-03 · Filas de movimientos y de deudas por debajo de 360 px: el importe sube arriba a la derecha y «⋯» queda debajo, así el título pasa de 3-7 letras a un renglón legible. A 360 y más la fila no cambia. */ @media (max-width: 359px) { #screen-finance .finance-tx-row, #screen-finance .finance-account-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icono cuerpo importe" "icono cuerpo mas"; column-gap: 10px; row-gap: 0; align-items: center; } #screen-finance .finance-tx-icon, #screen-finance .finance-account-icon { grid-area: icono; } #screen-finance .finance-tx-body, #screen-finance .finance-account-body { grid-area: cuerpo; } #screen-finance .finance-tx-amount, #screen-finance .finance-account-balance { grid-area: importe; justify-self: end; align-self: end; } #screen-finance .finance-tx-row .row-more, #screen-finance .finance-account-row .row-more { grid-area: mas; justify-self: end; align-self: start; margin: 0 -10px 0 0; } } /* 2.1.2 — FIN-03 · «Cuenta · fecha» se cortaba en seco («Tarjeta de c») por el overflow del renglón. Ahora termina en elipsis; el texto completo sigue en el DOM y en el menú del movimiento. */ .finance-tx-meta .tx-meta-date { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* 2.1.2 — FIN-04 · Próximos pagos y cobros: 13/12/13 px (eran 11/10/11, frente a los 15 del resto de filas de Finanzas) y «Pagar»/«Cobrar» del mismo ancho: la columna de importes estaba desalineada 6 px (es) y 20 px (en). Vale para la pantalla y para su hoja «Ver todos», que cuelga de . */ #screen-finance .finance-commitment-row > div:first-child strong, #sheetBody .finance-commitment-row > div:first-child strong { font-size: 0.8125rem; font-weight: 600; } #screen-finance .finance-commitment-row > div:first-child span, #sheetBody .finance-commitment-row > div:first-child span { font-size: 0.75rem; } #screen-finance .finance-commitment-row > b, #sheetBody .finance-commitment-row > b { font-size: 0.8125rem; font-weight: 600; } #screen-finance .finance-commitment-row .btn[data-act="settle-payable"], #sheetBody .finance-commitment-row .btn[data-act="settle-payable"] { min-width: 6.2em; justify-content: center; } /* En el teléfono el título ocupa su renglón y el importe baja bajo la fecha. */ @media (max-width: 559px) { #screen-finance .finance-commitment-row, #sheetBody .finance-commitment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "texto boton mas" "importe boton mas"; column-gap: 8px; row-gap: 2px; } #screen-finance .finance-commitment-row > div:first-child, #sheetBody .finance-commitment-row > div:first-child { grid-area: texto; } #screen-finance .finance-commitment-row > b, #sheetBody .finance-commitment-row > b { grid-area: importe; justify-self: start; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } #screen-finance .finance-commitment-row > .btn, #sheetBody .finance-commitment-row > .btn { grid-area: boton; align-self: center; } #screen-finance .finance-commitment-row > .row-more, #sheetBody .finance-commitment-row > .row-more { grid-area: mas; align-self: center; } } /* Con letra grande (130-200 %) el renglón ya no alcanza para título + «Pagar» + «⋯»: el título se quedaba en 3 letras y el importe se partía en cuatro renglones (medido a 200 %). Si la lista mide menos de 17em (su propia letra: con la normal son 255 px y un teléfono de 320 da 262, así que ahí no cambia nada), el título ocupa el renglón de arriba junto a «⋯» y el importe comparte el de abajo con el botón, que toma su ancho natural. */ #screen-finance .finance-commitment-list, #sheetBody .finance-commitment-list { container-type: inline-size; } @container (max-width: 17em) { #screen-finance .finance-commitment-row, #sheetBody .finance-commitment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "texto texto mas" "importe boton boton"; column-gap: 8px; row-gap: 2px; } #screen-finance .finance-commitment-row > div:first-child, #sheetBody .finance-commitment-row > div:first-child { grid-area: texto; } #screen-finance .finance-commitment-row > b, #sheetBody .finance-commitment-row > b { grid-area: importe; align-self: center; justify-self: start; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; } #screen-finance .finance-commitment-row > .btn[data-act="settle-payable"], #sheetBody .finance-commitment-row > .btn[data-act="settle-payable"] { grid-area: boton; align-self: center; min-width: 0; } #screen-finance .finance-commitment-row > .row-more, #sheetBody .finance-commitment-row > .row-more { grid-area: mas; align-self: start; justify-self: end; margin-top: 0; margin-bottom: 0; } } /* 2.1.2 — FIN-05 · Compromiso vencido: «Venció …» en la tinta de egreso (la excepción lleva el color, política de color regla 3); en Sobrio, tinta fuerte y más peso, sin color. */ .finance-commitment-row > div:first-child span[data-overdue] { color: var(--finance-negative-ink); } [data-color-mode="sober"] .finance-commitment-row > div:first-child span[data-overdue] { color: var(--ink); font-weight: 600; } /* 2.1.2 — FIN-06 · Hojas «Ver todos» (cuelgan de , fuera de #screen-finance): mismas medidas que la pantalla. Antes 11 px el título y 10 px el importe, con la cuenta · fecha a 13 px: el dato secundario era el más grande. */ #sheetBody .finance-tx-title, #sheetBody .finance-account-name { font-size: 0.9375rem; } #sheetBody .finance-tx-amount, #sheetBody .finance-account-balance { font-size: 0.9375rem; } #sheetBody .finance-account-type { font-size: 0.8125rem; } /* Con letra grande (130-200 %) ya no cabe todo en un renglón: el nombre se quedaba en 0-20 px y «⋯» salía de la hoja (medido a 200 %). Si la lista mide menos de 17em (su propia letra: con la normal son 255 px y la hoja de un teléfono de 320 da 278, así que con la letra normal no cambia nada), el nombre ocupa el renglón de arriba y el importe baja al de abajo, a la derecha, junto a «⋯». «⋯» pierde ahí su margen vertical negativo para que el renglón lo contenga entero. */ #sheetBody .finance-tx-list, #sheetBody .finance-account-list { container-type: inline-size; } @container (max-width: 17em) { #sheetBody .finance-tx-row, #sheetBody .finance-account-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icono cuerpo cuerpo" "icono importe mas"; align-items: center; } #sheetBody .finance-tx-icon, #sheetBody .finance-account-icon { grid-area: icono; align-self: start; } #sheetBody .finance-tx-body, #sheetBody .finance-account-body { grid-area: cuerpo; } #sheetBody .finance-tx-amount, #sheetBody .finance-account-balance { grid-area: importe; justify-self: end; } #sheetBody .finance-tx-row .row-more, #sheetBody .finance-account-row .row-more { grid-area: mas; margin-top: 0; margin-bottom: 0; } /* 2.1.2 — A 320 px con letra al 200 % el importe no podía partirse y su columna (1fr) era más angosta que él: desbordaba hacia el inicio y la fila lo recortaba por la izquierda. «-$9,999,999,999.99» se leía «9,999,999,999.99»: un gasto parecía positivo (medido: 19 de 24 saldos y 10 de 185 movimientos). Ahora el importe se parte dentro de su columna, alineado a la derecha, como .finance-commitment-row > b. */ #sheetBody .finance-tx-amount, #sheetBody .finance-account-balance { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: right; } } /* 2.1.2 — Con letra normal, subir título e importe a 15 px (arriba) dejó el nombre en 84-94 px a 360 cuando el importe es largo (antes 130-137): se cortaban «BBVA nómi…» o «Santander…». Dos ajustes, sólo en estas hojas y sólo en la maquetación de un renglón (la de letra grande, arriba, ya es de dos); screens.js envuelve importe y «⋯» en .finance-row-end, que fuera de aquí es `display: contents` (la fila de la pantalla queda idéntica): · En el teléfono (lista de menos de 26em) «⋯» va debajo del importe, como en la pantalla de Finanzas bajo 360 px (FIN-03): el nombre gana ~50 px. · Si aun así el nombre se quedaría por debajo de 8.5rem (importes de miles de millones), el importe baja con su «⋯» a un segundo renglón, a la derecha, y el nombre toma la fila entera. Es por fila: las que caben no bajan. Ahí, con el renglón para ellos solos, van lado a lado. */ .finance-row-end { display: contents; } @container (width > 17em) { #sheetBody .finance-tx-row, #sheetBody .finance-account-row { flex-wrap: wrap; } #sheetBody .finance-tx-body, #sheetBody .finance-account-body { min-width: min(8.5rem, 100%); } #sheetBody .finance-row-end { display: flex; align-items: center; gap: 6px; margin-left: auto; } } /* El grupo mide lo que su parte más ancha (el importe), así «⋯» parte debajo; el nombre se queda con todo el sobrante (1000 contra 1) y el grupo sólo crece cuando va solo en su renglón, donde ya caben lado a lado. «⋯» no sube sobre la cifra (su margen superior negativo montaba sus 44 px de toque sobre ella) y baja sólo hasta el borde de la fila: -6 px, el relleno inferior de la fila, para no salir de ella. */ @container (17em < width < 26em) { #sheetBody .finance-tx-body, #sheetBody .finance-account-body { flex-grow: 1000; } #sheetBody .finance-row-end { flex-grow: 1; width: min-content; flex-wrap: wrap; justify-content: flex-end; row-gap: 0; } #sheetBody .finance-row-end > .row-more { margin-top: 0; margin-bottom: -6px; } } /* 2.1.2 — FIN-08 · Cabecera de panel: «Cuentas» y «Ver todas» centrados entre sí (el título quedaba 11-13.5 px más arriba que el enlace de 40-44 px). */ #screen-finance .finance-panel-head { align-items: center; } /* En «Próximos pagos y cobros» el título lleva rótulo encima: centrar el botón contra los dos renglones lo dejaba 11 px más arriba que el título. Se alinea por la línea base del ÚLTIMO renglón (el título). Si el navegador no conoce `last baseline`, se queda el `center` de arriba. */ #screen-finance .finance-commitments .finance-panel-head { align-items: last baseline; } /* 2.1.2 — FIN-09 · Pestañas Gasto / Ingreso / Transferencia bajo 380 px: cada una mide lo que pide su texto. «Transferencia» se salía 12 px de su pestaña a 320 (con el ⇄ encima de «Ingreso») y 6 px a 360. */ @media (max-width: 379px) { .tx-type-tabs { grid-template-columns: repeat(3, auto); } } /* 2.1.2 — FIN-10 · Registrar movimiento con letra grande. FIN-09 cambia las columnas por ancho de ventana, no por tamaño de letra: al 130-200 % las tres pestañas no caben ni a su ancho natural («Ingreso» se montaba en «Transferencia», 1339 px² a 360 con 200 %) y «Guardar», en su columna fija de 70-82 px, salía hasta 24 px del botón y se montaba en la tecla «−». Se decide por el ancho del formulario y del teclado medido en `rem` (sigue a la escala de letra): con la letra normal ninguno de los dos cortes se alcanza en un teléfono (320 px = 17.5rem de formulario), así que ahí no cambia nada. · Pestañas: por debajo de 17rem van una bajo otra, a todo lo ancho, con el filete entre ellas en horizontal. · Guardar: por debajo de 16rem baja a un renglón completo bajo las teclas, con el avión al lado del texto: lo mismo que ya hace en escritorio. */ .tx-capture, .tx-foot { container-type: inline-size; } @container (max-width: 17rem) { .tx-capture .tx-type-tabs { grid-template-columns: minmax(0, 1fr); border-radius: var(--r-lg); } .tx-capture .tx-type-tabs span { padding-inline: var(--s3); } .tx-capture .tx-type-tabs span b { min-width: 0; overflow-wrap: anywhere; } .tx-capture .tx-type-tabs label + label > span::before { inset-block: -1px auto; inset-inline: var(--s4); width: auto; height: 1px; } } @container (max-width: 16rem) { .tx-foot .tx-keypad { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(var(--tap), auto)) auto; } .tx-foot .tx-save { grid-column: 1 / -1; grid-row: 5; height: auto; min-height: var(--tap); padding-block: var(--s2); flex-direction: row; flex-wrap: wrap; gap: var(--s2); } .tx-foot .tx-save b { min-width: 0; overflow-wrap: anywhere; } } /* 2.1.2 — Las marcas de tendencia (– ▲ ▼) pasan a SVG con la tinta de su chip. */ #screen-finance .fin-trend::before, #screen-finance .fin-note-trend::before { content: ""; display: inline-block; width: 7px; height: 7px; background-color: currentColor; -webkit-mask: var(--glifo) center / contain no-repeat; mask: var(--glifo) center / contain no-repeat; --glifo: var(--glifo-menos); } #screen-finance .fin-trend[data-kind="positive"]::before, #screen-finance .fin-note-trend[data-dir="up"]::before { content: ""; --glifo: var(--glifo-tri-arriba); } #screen-finance .fin-trend[data-kind="negative"]::before, #screen-finance .fin-note-trend[data-dir="down"]::before { content: ""; --glifo: var(--glifo-tri-abajo); }