/* ══════════════════════════════════════════════════════════════════════════════════════════════ FRENTE D · LA TERCERA HOJA DE LA CAPA VISUAL — plata y avisos de vencimiento Diseño aprobado por el dueño el 05/09/2026. Bloques 05 y 06 del rediseño. ▸ Bloque 05 · Panel de Finanzas · UY$ y USD separados. Hoy: tres tarjetas (RESULTADO OPERATIVO · FINANCIAMIENTO · CAJA) con etiquetas de 10 px, el verde de marca (#00c98d) sobre la superficie clara a 2,01:1 y las dos monedas apretadas en una sola línea cuando el total viene partido (fmtTotalSplit). Aprobado: UNA FILA POR MONEDA, etiquetas legibles, y los colores corregidos — #00694f (6,26:1) para lo positivo y #b91c1c (6,04:1) para lo negativo. ▸ Bloque 06 · Avisos de vencimiento. Hoy la alerta empuja la lista hacia abajo y la × comparte espacio con el texto. Aprobado: COLUMNA PROPIA de avisos, fila de 48 px y el cierre «×» de 44 px. ═══ LO QUE ESTA HOJA NO PUEDE HACER, Y NO HACE ═══ Es CSS. No toca un importe, ni una moneda, ni una fecha, ni un cálculo, ni un filtro, ni el aislamiento por país, ni un permiso, ni la visibilidad de un error. En particular: · NUNCA convierte ni mezcla monedas: los pesos siguen viniendo de `Monto UY$` y los dólares de `Monto USD`, y esta hoja solo decide en qué RENGLÓN se dibuja cada uno. · No esconde ningún importe, ningún aviso y ningún control. Lo único que oculta es el «·» decorativo que separaba las dos monedas cuando estaban en la misma línea — y lo oculta justamente porque ya no están en la misma línea. Está medido en negativo. ═══ CABLEADO ═══ Al cerrar el PR esta hoja NO está enlazada: el del cascarón, la entrada del SHELL del service worker y el bump de versión los pone el integrador (hay otro frente tocando esos archivos hoy). El contrato no exige el cableado, pero exige que —cuando ocurra— ocurra ENTERO. El alcance de esta hoja está declarado en tests/_lib-hojas-capa.mjs. Toda regla cuelga del interruptor y arranca en una de sus cuatro raíces; ninguna nombra una raíz de otra hoja. ══════════════════════════════════════════════════════════════════════════════════════════════ */ html[data-base-visual='on'] { /* ── LOS DOS COLORES QUE EL DISEÑO NOMBRA ────────────────────────────────────────────────── Medidos contra la superficie de tarjeta de la app (--card: #f4f8f6), que es el fondo real donde se dibujan estos importes. El verde de MARCA (#00c98d) da 2,01:1 ahí: sirve para un borde o un fondo, no para un número que hay que leer. Estos dos son sus reemplazos para TEXTO, y no reemplazan al verde de marca en ningún otro rol. */ --fv-pos: #00694f; /* 6,26:1 sobre #f4f8f6 · 6,70:1 sobre #ffffff */ --fv-neg: #b91c1c; /* 6,04:1 sobre #f4f8f6 · 6,47:1 sobre #ffffff */ /* La etiqueta de las tarjetas de plata. Hoy es --text3 (#8aada3): 2,45:1 sobre blanco, o sea ilegible para el ojo de la norma. --text2 (#456b5e) da 5,57:1 sobre la tarjeta. */ --fv-etiqueta: #456b5e; --fv-etiqueta-tam: 0.75rem; /* 12px en rem: escala con el texto ampliado del sistema */ --fv-nota-tam: 0.75rem; /* Los dos números del bloque 06. Se declaran una vez y los usa todo lo que se toca. */ --fv-fila-aviso: 48px; --fv-cierre: 44px; /* La separación entre las dos monedas cuando dejan de estar apretadas. */ --fv-moneda-gap: 3px; /* ── EL RIEL DE ESCRITORIO (24/09) ──────────────────────────────────────────────────────── Se declaran ACÁ y no se toman de public/base-visual.css, aunque esa hoja tenga los mismos números con otro nombre. El motivo se midió: la vista previa de esta hoja —el banco donde se miden los contrastes y las cajas— NO carga esa otra hoja, así que el token llegaba VACÍO: el ancho caía a `auto` (77px en vez de 236) y el `padding-left` se descartaba entero, dejando el riel flotando ENCIMA del contenido. En la app las dos hojas se cargan juntas y no se habría visto nunca. Una hoja que depende de tokens de otra se rompe en silencio el día que la otra los renombra. */ --fv-riel: 236px; --fv-riel-fondo: #f4f8f6; /* el mismo --card de public/styles.css, escrito para no depender */ --fv-riel-borde: #d5e5df; --fv-riel-marca: #00694a; /* 6,7:1 sobre el fondo del riel: la barra de «acá estás» */ /* La columna de lectura del escritorio. 860px es lo medido: una fila de «Por cobrar» entra entera con el importe a una sacudida de ojo del nombre, y a 1400 caben dos de estas columnas con su separación dentro de los 1164px que deja el riel. */ --fv-medida: 860px; --fv-columna-gap: 16px; /* El ANCHO MÁXIMO del contenido: 1400 − el riel, que es con lo que se aprobó el diseño de dos columnas. Hasta el 25/09 lo ponía el tope global del `body` (1400px); desde que Finanzas usa el ancho completo (para que el riel quede pegado al costado), lo pone esto — si no, en un monitor ancho las dos columnas se estiraban y el importe quedaba a 800px de su rótulo. */ --fv-ancho-max: 1164px; } /* ══ BLOQUE 05 · PANEL DE FINANZAS ═════════════════════════════════════════════════════════════ La corrección de color se hace REDEFINIENDO --green y --red DENTRO de las cajas de plata, no pisando `color` con !important. Motivo: el módulo escribe el color en línea (`style="color:var(--green)"` / `var(--red)`) y el SIGNO lo decide él. Si esta hoja forzara un color, un saldo negativo podría quedar pintado de verde. Redefiniendo el token, cada importe sigue eligiendo su color según su signo —la lógica no se toca— y solo cambia el tono. Y se redefine SOLO en estas cajas: el verde de marca sigue intacto en botones, bordes y chips. */ html[data-base-visual='on'] #finanzas-content .estado-cuenta, html[data-base-visual='on'] #finanzas-content .ec-section-total, html[data-base-visual='on'] #finanzas-content .fin-detail-row, html[data-base-visual='on'] #finanzas-content .fin-group-head, html[data-base-visual='on'] #finanzas-content .finanzas-summary, html[data-base-visual='on'] #screen-finanzas .gasto-monto-val { --green: var(--fv-pos); --red: var(--fv-neg); } /* ── Etiquetas legibles ─────────────────────────────────────────────────────────────────────── 10px → 0.75rem, y el gris de 2,45:1 → 5,57:1. No cambia una sola palabra del texto. */ html[data-base-visual='on'] #finanzas-content .ec-title { font-size: var(--fv-etiqueta-tam); color: var(--fv-etiqueta); letter-spacing: 0.3px; line-height: 1.4; } html[data-base-visual='on'] #finanzas-content .ec-counts { font-size: var(--fv-nota-tam); color: var(--fv-etiqueta); line-height: 1.45; } html[data-base-visual='on'] #finanzas-content .ec-section-total { font-size: var(--fv-etiqueta-tam); color: var(--fv-etiqueta); } /* ── UNA FILA POR MONEDA ────────────────────────────────────────────────────────────────────── `fmtTotalSplit()` (src/calculos.js) emite «UY$ … · USD …»: dos monedas en la MISMA línea, separadas por un punto. A 390 px eso se parte por donde caiga y se lee como un solo número largo. Acá la celda de importes pasa a ser una COLUMNA: cada moneda en su renglón, alineadas a la derecha. Ni un carácter del importe cambia — cambia el renglón. El «·» que las separaba se apaga porque ya no separa nada (es el único display:none de la hoja, y solo alcanza a un separador decorativo, nunca a un importe ni a un control). */ html[data-base-visual='on'] #finanzas-content .ec-row > span:last-child, html[data-base-visual='on'] #finanzas-content .ec-saldo > span:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: var(--fv-moneda-gap); text-align: right; } html[data-base-visual='on'] #finanzas-content .ec-row > span:last-child > strong, html[data-base-visual='on'] #finanzas-content .ec-saldo > span:last-child > strong { display: block; white-space: nowrap; } html[data-base-visual='on'] #finanzas-content .ec-row > span:last-child > span:has(+ strong), html[data-base-visual='on'] #finanzas-content .ec-saldo > span:last-child > span:has(+ strong) { display: none; } /* El encabezado de las listas de gastos e ingresos: mismo criterio, misma razón. */ html[data-base-visual='on'] #finanzas-content .finanzas-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--fv-moneda-gap) 6px; font-size: 0.8125rem; } html[data-base-visual='on'] #finanzas-content .finanzas-summary > strong { flex: 1 0 100%; white-space: nowrap; } html[data-base-visual='on'] #finanzas-content .finanzas-summary > span:has(+ strong) { display: none; } /* ── La fila de plata a lo ancho ────────────────────────────────────────────────────────────── Con la celda de importes en columna, la etiqueta de la izquierda no puede quedar aplastada: se le da un mínimo y se permite que la fila crezca en alto en vez de recortar el número. */ html[data-base-visual='on'] #finanzas-content .ec-row, html[data-base-visual='on'] #finanzas-content .ec-saldo { align-items: flex-start; gap: 12px; } html[data-base-visual='on'] #finanzas-content .ec-row > span:first-child, html[data-base-visual='on'] #finanzas-content .ec-saldo > span:first-child { min-width: 0; overflow-wrap: anywhere; } /* ══ BLOQUE 06 · AVISOS DE VENCIMIENTO ═════════════════════════════════════════════════════════ Las dos raíces son los contenedores de banner del panel del Administrador/Coordinador y del CEO. El banner que vive DENTRO del inicio del CRM (#coord-content) lo pinta la otra hoja: son superficies distintas y ninguna regla de acá la alcanza. COLUMNA PROPIA: hoy `.alert-item` es un flex donde el texto empuja a la × (margin-left:auto). Con un mensaje largo la × se corre y queda pegada al borde. Acá la fila pasa a ser una GRILLA de tres columnas fijas —icono · mensaje · cierre—, así el cierre tiene SU columna y ni el mensaje más largo se la come. */ html[data-base-visual='on'] #alerts-banner-coord .alert-item, html[data-base-visual='on'] #alerts-banner-ceo .alert-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: var(--fv-fila-aviso); padding: 5px 12px; font-size: 0.8125rem; line-height: 1.4; color: var(--fv-etiqueta); } html[data-base-visual='on'] #alerts-banner-coord .alert-icon, html[data-base-visual='on'] #alerts-banner-ceo .alert-icon { margin-top: 0; font-size: 1rem; } /* El cierre: 44 px de lado, centrado, y con su propio foco visible. Antes era un `` de ~15 px de alto con 4 px de padding lateral: por debajo del piso de la norma y difícil de acertar con el pulgar. Lo que hace NO cambia: sigue posponiendo, no resolviendo. */ html[data-base-visual='on'] #alerts-banner-coord .alert-dismiss, html[data-base-visual='on'] #alerts-banner-ceo .alert-dismiss { display: flex; align-items: center; justify-content: center; min-width: var(--fv-cierre); min-height: var(--fv-cierre); margin-left: 0; padding: 0; color: var(--fv-etiqueta); font-size: 1.25rem; line-height: 1; border-radius: 8px; } html[data-base-visual='on'] #alerts-banner-coord .alert-dismiss:focus-visible, html[data-base-visual='on'] #alerts-banner-ceo .alert-dismiss:focus-visible { outline: 2px solid var(--fv-pos); outline-offset: 2px; } /* La cabecera del banner también se toca (abre y cierra la lista): piso táctil de la norma. */ html[data-base-visual='on'] #alerts-banner-coord .alerts-header, html[data-base-visual='on'] #alerts-banner-ceo .alerts-header { min-height: var(--fv-cierre); } html[data-base-visual='on'] #alerts-banner-coord .alerts-toggle, html[data-base-visual='on'] #alerts-banner-ceo .alerts-toggle { font-size: var(--fv-etiqueta-tam); color: var(--fv-etiqueta); } /* ── Desde escritorio: la lista de avisos en DOS columnas ───────────────────────────────────── El aviso empuja la lista hacia abajo, y con cinco vencimientos abiertos el contenido arrancaba fuera de la pantalla. Desde 1024 px los avisos se reparten en dos columnas: la misma información ocupa la mitad del alto y la lista vuelve a verse. En teléfono y tablet la lista sigue siendo una sola columna, exactamente como hoy. ⚠️ SE USA `column-count`, NO una grilla, y el motivo es de fondo: `renderAlertsBanner()` (src/alertas.js) escribe el `display` de esta lista EN LÍNEA —`display:none` cerrada, `display:block` abierta— porque `toggleAlertsList()` la abre y la cierra desde JavaScript. Un `display:grid` desde la hoja NUNCA ganaría, y ponerle `!important` la dejaría abierta para siempre: rompería el botón de abrir/cerrar. `column-count` reparte el contenido sin tocar el `display`, así que la lista sigue abriéndose y cerrándose exactamente igual. Lo encontró el contrato de navegador: el hermético veía la regla y la daba por aplicada. */ @media (min-width: 1024px) { html[data-base-visual='on'] #alerts-banner-coord .alerts-list, html[data-base-visual='on'] #alerts-banner-ceo .alerts-list { column-count: 2; column-gap: 0; } html[data-base-visual='on'] #alerts-banner-coord .alerts-list > .alert-item, html[data-base-visual='on'] #alerts-banner-ceo .alerts-list > .alert-item { break-inside: avoid; border-bottom: 1px solid var(--border); } } /* ── Desde escritorio: las 7 pestañas de Finanzas, de pie en un riel ────────────────────────── La tira horizontal de 7 pestañas se come ~46px del alto —lo escaso en un portátil— y a 1024px desbordaba: «📊 Reportes» quedaba fuera de vista y había que deslizar de costado para llegar. De pie, en un riel de 236px, entran las siete y el alto vuelve al contenido. ESTE PATRÓN NO SE INVENTA ACÁ: es el mismo riel del coordinador (bloque 10.5 de public/base-visual.css, aprobado el 05/09) con su misma mecánica —riel `position:absolute` dentro de la pantalla, que es `position:relative` cuando está activa, y la pantalla le abre el lugar con `padding-left`—. Se reusa en vez de reconstruirse justamente porque ese layout ya está medido: el resto de la columna (cabecera y contenido) se acomoda solo, sin reescribir nada del marcado ni una línea de JavaScript. Los NÚMEROS son los mismos, pero los tokens son propios y están declarados arriba: el porqué está en su comentario. LO QUE SIGUE SIENDO CIERTO: es CSS. `setFinanzasTab` es el mismo, las pestañas son las mismas 7 y en ningún ancho se esconde ninguna. ⚠️ 25/09 · ES LA ÚNICA ESTRUCTURA DE ESCRITORIO con la base visual puesta, y arranca en 900px —el mismo corte donde termina la barra inferior del teléfono (public/styles.css)—, no en 1024. Había DOS estructuras a la vez: este riel (con `padding-left`) y una rejilla de dos columnas de styles.css (#579). El riel absoluto, hijo de la rejilla, tomaba su celda como referencia: las dos le reservaban el mismo lugar y quedaba una franja VACÍA de 236px a la izquierda, con la barra corrida al centro (medido en el banco a 1024, 1280, 1440 y 1920). La rejilla ahora sólo aplica con `?base-visual=0`. Y entre 900 y 1023 no aplicaba ninguna: volvía la tira horizontal que desbordaba. */ @media (min-width: 900px) { html[data-base-visual='on'] #screen-finanzas.active { padding-left: var(--fv-riel); /* ANULA la rejilla de la estructura base (public/styles.css, la de `?base-visual=0`): el riel es absoluto y la pantalla le abre lugar con el `padding-left`; con la rejilla encima, el riel tomaba su celda como referencia y quedaba una franja vacía de 236px. Vuelve al `flex` de `.screen.active`. */ display: flex; } /* El ancho de lectura lo ponen los HIJOS (más abajo) y, desde 1400, el tope de dos columnas: el tope de 860px que la base le pone al contenedor lo dejaría corrido a la izquierda. */ html[data-base-visual='on'] #screen-finanzas > .ceo-content { max-width: none; } html[data-base-visual='on'] #screen-finanzas .ceo-tab-bar { position: absolute; top: 0; left: 0; bottom: 0; width: var(--fv-riel); flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 8px 24px; overflow-x: hidden; overflow-y: auto; background: var(--fv-riel-fondo); border-bottom: none; border-right: 1px solid var(--fv-riel-borde); /* La pista de «hay más» GIRADA, no apagada: la barra hereda `scrollbar-width: none`, así que sin el degradado vertical un riel más alto que la ventana se desliza en silencio. */ -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); } html[data-base-visual='on'] #screen-finanzas .ceo-tab { /* `flex: 1 0 auto` en columna estira las 7 pestañas hasta llenar el alto del riel: cada una mediría ~120px y el rótulo quedaría flotando en el medio. En el riel NO crecen. */ flex: 0 0 auto; /* Anula el redondeo de la estructura base: la marca de «acá estás» es una barra recta al costado. */ border-radius: 0; justify-content: flex-start; text-align: left; min-height: 44px; padding: 10px 12px; font-size: var(--fv-nota-tam); border-bottom: 3px solid transparent; /* styles.css le pone `white-space: nowrap` y el riel es `overflow-x: hidden`: sin esto un rótulo más largo que el riel se cortaría a la mitad de una palabra. */ overflow: hidden; text-overflow: ellipsis; } /* El asistente, al pie de las secciones del riel (25/09): en Finanzas no flota sobre el contenido. Separado por una línea porque no es una sección; mismo alto y misma letra que ellas. */ html[data-base-visual='on'] #screen-finanzas .fin-riel-asistente { display: flex; align-items: center; min-height: 44px; margin-top: 12px; padding: 10px 12px; border-top: 1px solid var(--fv-riel-borde); font-size: var(--fv-nota-tam); color: var(--fv-etiqueta); cursor: pointer; } /* La señal de «acá estás» pasa de abajo al costado, que es donde se lee de pie, y sigue sin depender del color: barra de 3px + la letra más oscura que ya le pone styles.css. */ html[data-base-visual='on'] #screen-finanzas .ceo-tab.active { /* Anula el fondo de la estructura base: en el riel la señal es la barra del costado. */ background: none; border-bottom-color: transparent; border-left: 3px solid var(--fv-riel-marca); padding-left: 8px; } } /* ── Desde escritorio: la COLUMNA DE LECTURA y la segunda columna de tarjetas ───────────────── MEDIDO EN LA APP REAL el 24/09, entrando como Finanzas en un servidor local contra la base de verdad, a 1440px: con el riel puesto el contenido queda en 1164px y TODO se estiraba hasta ahí. Una fila de «Por cobrar» medía 1114px con el nombre del cliente pegado al borde izquierdo y el importe al derecho: para saber cuánto debe un cliente había que barrer la vista un palmo entero, con ~700px de blanco en el medio. Lo mismo en el Resumen (`.fin-detail-row`, 1116px). Ensanchar no es aprovechar. Las dos reglas de abajo son las dos caras del mismo arreglo: 1 · MEDIDA DE LECTURA (desde 1024). Todo lo que cuelga del contenido se acota y se centra. El importe vuelve a quedar a una sacudida de ojo del nombre. Se aplica a los hijos DIRECTOS, que es lo único estable: cada pestaña arma su interior distinto —`.acct` con sus bloques en Por cobrar y Resumen, tarjetas sueltas en Gastos e Ingresos— y una regla por estructura interna se rompería con la próxima pestaña. 2 · SEGUNDA COLUMNA (desde 1400). Acotar y nada más dejaría 300px de desierto a la derecha. Las listas largas —Gastos e Ingresos, que emiten sus tarjetas como hijos directos— pasan a dos columnas: se ve el doble de información sin estirar una sola fila. Todo lo que NO es una tarjeta de esas listas (los filtros, el total, el encabezado, el «ver más») cruza las dos columnas con `1 / -1`, así que ninguna pestaña cambia de forma por esto. Es la única manera de hacerlo sin tocar el marcado: esas tarjetas no tienen contenedor propio. */ @media (min-width: 900px) { html[data-base-visual='on'] #screen-finanzas #finanzas-content > * { max-width: var(--fv-medida); margin-inline: auto; } /* P1 (27/09/2026): el Resumen plegado de Inicio se alinea con las tarjetas, que llevan 16px de margen dentro de la columna de lectura (medido en R19 a 1024 y 1440). */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > .fin-caja-plegada { width: calc(100% - 32px); max-width: calc(var(--fv-medida) - 32px); } /* P2 (27/09/2026): la tabla de Cobros, alineada con sus filtros (la misma medida, sus 16px de margen). */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > .fin-cobros-tabla { width: calc(100% - 32px); max-width: calc(var(--fv-medida) - 32px); } } @media (min-width: 1400px) { html[data-base-visual='on'] #screen-finanzas #finanzas-content { max-width: var(--fv-ancho-max); margin-inline: auto; /* La pantalla es flex: con `margin: auto` y sin ancho, el bloque se ENCOGE a su contenido (medido: 733px en vez de 1164). `width: 100%` lo lleva al tope y el `max-width` lo acota. */ width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 0 var(--fv-columna-gap); } /* Todo lo que no es una tarjeta de la lista cruza las dos columnas y conserva su medida. */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > *:not(.gasto-card) { grid-column: 1 / -1; } /* La tarjeta llena su celda: acá la medida la pone la columna, no el tope de lectura. */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > .gasto-card { max-width: none; margin-inline: 0; } } /* ── Desde escritorio: el RESUMEN en dos columnas ──────────────────────────────────────────── Autorizado por el dueño el 24/09. El resumen era una columna de 860px con 300px de desierto a la derecha, y sus bloques —a diferencia de las tarjetas de Gastos e Ingresos— no tenían contenedor propio, así que repartirlos pedía marcado. Se agregó el mínimo: DOS envoltorios en `renderCEOFinanzas` que no pintan nada por sí solos. EL REPARTO TIENE UN CRITERIO, no es «la mitad y la mitad»: a la izquierda las cifras de CIERRE (resultado del período, financiamiento, caja) y a la derecha el DESGLOSE (de dónde sale cada una). El gráfico anual y el botón de cargar gasto quedan fuera de las dos columnas y cruzan el ancho entero, porque no pertenecen a ninguna de las dos mitades. ⚠️ SE PIDE `:has()`, y esa es la degradación: un navegador sin `:has()` ignora la regla y deja el resumen en UNA columna, que es exactamente lo de hoy. Se ata a `:has(.fin-col)` y no a `.acct` a secas porque «Por cobrar» usa el MISMO `.acct` con otro contenido: partirlo en dos columnas ahí mezclaría la lista de trabajos con los totales. Y no entra ni un indicador ni un cálculo nuevo: es el mismo contenido, repartido. */ /* ⚠️ EL SELECTOR LLEVA LAS DOS RAÍCES (#screen-finanzas Y #finanzas-content) a propósito. La primera versión nombraba sólo `#finanzas-content` y NO PINTABA: la regla de la columna de lectura, de más arriba, usa las dos y gana por especificidad (dos ids contra uno), así que el `max-width: 860px` seguía mandando y el resumen quedaba en una columna de 355px. Se vio midiendo los estilos computados en el navegador; a ojo la regla «estaba ahí» y parecía correcta. */ @media (min-width: 1400px) { html[data-base-visual='on'] #screen-finanzas #finanzas-content > .acct:has(.fin-col) { max-width: none; /* ⚠️ Los dos de abajo hacen falta y no son decoración: la regla de la columna de lectura le pone `margin-inline: auto`, y un `margin: auto` lateral en un elemento de grilla lo CENTRA en vez de estirarlo — la grilla interna se dimensionaba entonces contra su propio contenido y el bloque quedaba en 726px de los 1.148 disponibles, con las dos columnas en 355. Medido en el navegador; el `max-width: none` por sí solo no alcanzaba. */ margin-inline: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 var(--fv-columna-gap); } /* Lo que no es una de las dos columnas cruza el ancho entero y conserva la medida de lectura. */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > .acct:has(.fin-col) > *:not(.fin-col) { grid-column: 1 / -1; max-width: var(--fv-medida); margin-inline: auto; width: 100%; } /* P1 (27/09/2026): en Finanzas el mismo resumen vive PLEGADO debajo de las tarjetas de Inicio. Cerrado conserva la medida de lectura (alineado con las tarjetas); abierto, se reparte igual que antes: el plegado toma el ancho entero y su resumen, las dos columnas. */ html[data-base-visual='on'] #screen-finanzas #finanzas-content > .fin-caja-plegada[open] { max-width: none; margin-inline: 0; width: 100%; } html[data-base-visual='on'] #screen-finanzas #finanzas-content > .fin-caja-plegada > .acct:has(.fin-col) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 var(--fv-columna-gap); } html[data-base-visual='on'] #screen-finanzas #finanzas-content > .fin-caja-plegada > .acct:has(.fin-col) > *:not(.fin-col) { grid-column: 1 / -1; } } /* ── FOCO DE TECLADO EN ESCRITORIO (26/09/2026) ───────────────────────────────────────────────── Las pestañas del riel ahora se alcanzan con Tab (role="button" tabindex="0"). El foco se VE, sólo cuando llega por teclado (:focus-visible), y sólo dentro de Finanzas. */ html[data-base-visual='on'] #screen-finanzas .ceo-tab:focus-visible, html[data-base-visual='on'] #screen-finanzas .fin-riel-asistente:focus-visible, html[data-base-visual='on'] #screen-finanzas button:focus-visible { outline: 2px solid var(--accent, #00c98d); outline-offset: 2px; }