/* LA PASADA DE DISEÑO: EL COLOR DA ESTRUCTURA — aceptada por el usuario el
2026-08-27 sobre pares antes/después de la app real (ficha A44; el registro
visual del recorrido vive en el lienzo de la sesión). El encabezado que vivió
acá desde el arranque —«deliberately minimal», la paleta pospuesta para no
adelantarse a la decisión del usuario— cumplió: ésta ES esa decisión.
La arquitectura: BANDA PIZARRA = la máquina (la barra superior; la tira de la
corrida contrasta en tinte claro — corrección del usuario); BLANCO = el
trabajo, con sus bordes negros y su densidad intactos; TINTES FRÍOS CLAROS =
las zonas de apoyo (cabeceras de tabla, rótulos, panel de resumen, lo ya
resuelto, el pie — donde las píldoras van sobre blanco, segunda corrección).
La acción primaria es sólida en el color de la banda. La letra sigue siendo
la del sistema. Rojo/ámbar/verde no cambian: significan lo de siempre. */
/* EL FONDO DEJA DE SER BLANCO — elegido por el usuario el 2026-08-27 sobre tres
fondos fotografiados en tres pantallas representativas (opción B: papel
cálido). El pedido, en sus palabras: «me gustaría que el fondo de la pantalla
no sea blanco». Lo que cambia es EL SUELO y los tintes de apoyo, que pasan de
la familia fría a la cálida; lo que NO cambia es nada de lo que A44 decidió:
la banda pizarra sigue siendo la máquina, el trabajo sigue siendo la
superficie clara con sus bordes firmes y su densidad, y rojo/ámbar/verde
siguen significando lo de siempre.
POR QUÉ EL TRABAJO NO ES «BLANCO» SINO UN BLANCO PROPIO: sobre papel cálido,
un `#fff` puro se lee como un recorte pegado encima. `--panel` es apenas más
claro y más cálido que el suelo, así que las tablas y los paneles flotan sin
cortarse. */
:root { color-scheme: light; --gap: 1rem;
/* LAS DOS RAYAS SALEN DE ACÁ Y POR ESO NO SE PUEDEN DESALINEAR (pedido del
usuario, 2026-08-27): la de abajo de la banda y la de abajo del rótulo del
riel. Antes caían a 68,4 px y 68,0 px — se veían casi iguales y no lo eran,
y cualquier cambio de relleno las habría separado. */
/* SUBIERON JUNTOS AL PASAR LA BANDA A DOS RENGLONES (usuario, 2026-08-27,
R46). Que estén atados es justamente lo que hace que subir uno no descuadre
nada: la raya de la banda y la del riel siguen cayendo en el mismo píxel. */
--alto-cabecera: 5.5rem;
--riel-aire: 1.7rem; /* el aire sobre el rótulo del riel */
--aire-riel: 2.4rem; /* el aire ENTRE el riel y el contenido */
--banda: #2f4858; /* la máquina */
--banda-tinta: #eef3f6; /* texto sobre la banda */
--papel: #f7f6f2; /* el suelo de toda la aplicación */
--panel: #f1efe8; /* la superficie de los datos, y desde A51 queda HUNDIDA.
Era #fffefb —por encima del papel— y el usuario lo rechazó
mirando las 37 pantallas: «no debería haber tablas con fondo
blanco, ni áreas de operación con fondo blanco». Sigue habiendo
dos niveles, que es lo que separa una tabla de la página; lo que
cambió es hacia dónde. Opción B sobre tres renderizadas. */
--tinta-tenue: #5a554a; /* rótulos y glosas sobre papel */
--borde-tenue: #ddd8ca; /* un canto que separa sin afirmar */
--tinte: #eeece5; /* rótulos de sección, cabeceras de tabla */
--tinte-cabecera: #e7e4da; /* zonas de apoyo con algo más de cuerpo */
--enlace: #35637f; /* azul pizarra apagado — nunca el azul del navegador */
--ambar: #755518; /* precaución: tinta ámbar apagada */
--ambar-borde: #b5924f; /* el canto de un aviso de precaución */
--ambar-fondo: #f6f1e4; /* fondo de precaución, crema agrisada */
--verde: #2e5f47; /* éxito: verde agrisado */
--verde-fondo: #edf3ef;
--rojo: #8c3b36; /* el único rojo, y desde A51 se escribe UNA vez.
Era var(--rojo) en diecisiete lugares a mano: el usuario
midió la pantalla 10 —nueve rojos a la vez— y eligió
bajar el tono sin mover ninguno de lugar (opción C),
que sólo es posible si el color vive en un solo sitio.
La luminancia es prácticamente la misma que la del
anterior, así que el contraste no se movió. */
--rojo-fondo: #f8efef;
--enlace-oscuro: #26495e;
--tinte-suave: #f2f1ec; /* panel de resumen, zonas resueltas, pie */
}
* { box-sizing: border-box; }
/* EL AZUL DEL NAVEGADOR NO ENTRA (usuario, 2026-08-27): los enlaces sueltos
—«Abrirla», «Abrir su informe»— heredaban el azul de fábrica, demasiado
brillante para el esquema. Un azul pizarra apagado de la misma familia.
`a:hover` TIENE ESPECIFICIDAD (0,1,1), Y ESO LE GANA A CUALQUIER REGLA DE UNA
SOLA CLASE (0,1,0) — incluidas las que ponen `color: inherit` a propósito
(`.hallazgos-acceso`, `.elegir`, `.deshacer-min`, `.quitar`). Hasta A61 este
comentario afirmaba lo contrario —«le siguen ganando»— y era falso desde que
se escribió. En esas cuatro no produce defecto: viven sobre papel claro, así
que oscurecerse las deja legibles. Donde sí lo produjo fue en `.primario`
puesto sobre un ``, que es texto BLANCO sobre la banda oscura: el botón de
la configuración se quedaba en 1,00:1 de contraste — invisible. Lo vio el
usuario, no la suite, porque `axe` mide el reposo y nadie medía el cursor.
Por eso `.primario` ahora defiende su propio color, abajo, y por eso existe
`tests/e2e/bajo_el_cursor.spec.ts`. Al agregar acá una propiedad nueva,
preguntar contra qué reglas de una sola clase se va a imponer. */
a { color: var(--enlace); }
a:hover { color: var(--enlace-oscuro); }
/* EL SUELO CAMBIA Y LA TINTA NO, y la asimetría está medida (2026-08-27, sobre
las 35 pantallas de `axe`). La versión de esta pasada que suavizaba la tinta a
`#16202a` —el gris azulado del boceto— reprobó **20 pantallas** de una sola
vez, y no por el fondo: sobre papel `#f7f6f2` una atenuación al 62 % con tinta
negra da 6,08:1 contra los 6,19:1 que daba sobre blanco puro —pierde 0,11— y
con `#16202a` da **4,56:1**. Toda la pérdida era de la tinta.
POR QUÉ IMPORTA MÁS ACÁ QUE EN OTRA APP: el presupuesto de atenuación de este
proyecto está calibrado contra tinta negra. R11 midió `.68`, R20 y R31 fijaron
`.62` como piso — todos elegidos con `axe` en la mano, y todos con dos décimas
de margen. Aclarar la tinta un poco se los come enteros de golpe, en veinte
pantallas que nadie tocó. Es la regla de R20 aplicada al otro extremo: la
atenuación tiene piso, y el piso lo fija la tinta.
Así que `body` NO declara color: hereda el negro del navegador, exactamente
como antes de esta pasada. Lo que cambió es el suelo y los tintes de apoyo. */
body { margin: 0; font: 15px/1.5 ui-sans-serif, system-ui, sans-serif;
background: var(--papel); }
/* ── EL RIEL ───────────────────────────────────────────────────────────────
Elegido por el usuario el 2026-08-27 sobre cuatro arquitecturas ENTERAS de
encabezado (A · el riel · B · la portada · C · una sola línea · D · el
encabezado dentro de la grilla). Reemplaza a la barra superior de A44 y al
primer renglón del encabezado integrado de R9.
QUÉ GANA LA APP CON ESTO, y es lo que decidió la elección: la máquina —quién
es esta app, en qué capítulo va la corrida, qué paso se está trabajando— deja
de ser una pila de bandas encima del trabajo y pasa a una columna al costado.
El ancho de la página queda entero para lo que se está mirando, y las tres
cosas que orientan quedan juntas en un solo lugar en vez de repartidas entre
la barra, la tira y el título.
152 px NO ES UN NÚMERO REDONDO: es lo que mide «Conciliación» sin partirse en
dos renglones a 0,86 rem, que es el ancho mínimo por debajo del cual el riel
empieza a mentir sobre lo que puede contener. */
/* LA COLUMNA OCUPA TODO EL ALTO Y SU CONTENIDO SE QUEDA A LA VISTA, y son dos
cosas distintas que hacen falta las dos. Un riel `sticky` a secas pinta su
pizarra sólo hasta donde llega su contenido, y una pantalla de cien filas
queda con una lengua oscura arriba y papel debajo. Un riel estirado a secas
se va con el desplazamiento, que es perder exactamente lo que el riel existe
para dar. Así que la columna se estira y lo de adentro se pega. */
/* `div.marco` Y NO `.marco` A SECAS — es la MISMA colisión que este archivo ya
documenta dos veces (`.paneles:not(body)` de la pantalla 8, `span.desenlace` del
desenlace), y ésta estuvo rota desde que A50 dibujó el riel: la pantalla 8 tiene
una `` desde R17 —la celda invisible contra la que se centra lo
que asoma en una fila archivada— y un selector pelado le daba `display: grid` y
`min-height: 100vh`. Medido en el navegador el 2026-08-28: cada operación
archivada ocupaba **900 px de alto**, o sea una pantalla entera por renglón, en
las dos tablas de abajo (lo resuelto y los descartes). Lo encontró fotografiar,
por tercera vez en este archivo. */
div.marco { display: grid; grid-template-columns: 152px minmax(0, 1fr);
min-height: 100vh; }
.riel { background: var(--banda); color: var(--banda-tinta); }
.riel-fijo { position: sticky; top: 0; padding: 0 0 1.2rem; }
.riel-marca { height: var(--alto-cabecera); padding: var(--riel-aire) .8rem 0;
font-weight: 600; font-size: .86rem; line-height: 1.25; }
.riel-marca span { opacity: .68; font-weight: 400; }
.riel-corte { height: 1px; background: rgba(255, 255, 255, .18); margin: 1rem .8rem; }
/* `.riel-corte:first-of-type` NO MATCHEABA NADA, y por eso hay que escribirlo:
`:first-of-type` cuenta hermanos del mismo ELEMENTO, y el primer `div` de esta
columna es `.riel-marca`, no la raya. El selector existía, se leía correcto y
dejaba las dos líneas separadas exactamente el `margin-top` de 1rem que creía
estar anulando. Lo encontró fotografiar y medir la foto, no leer la hoja.
El hermano adyacente sí nombra a la raya que sigue al rótulo. */
.riel-marca + .riel-corte { margin-top: 0; }
/* EL PASO ES TEXTO Y NADA MÁS (usuario, 2026-08-27): «para los pasos no quiero
usar ninguna representación visual de avance». Ninguna barra, ningún punto,
ninguna regla — ni acá ni en ninguna pantalla. */
.riel-paso { padding: 0 .8rem; }
.riel-paso-n { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
opacity: .68; }
.riel-paso-nombre { font-size: 1rem; font-weight: 700; margin-top: .15rem;
line-height: 1.25; }
.lienzo { min-width: 0; }
/* EL AIRE A LA DERECHA DEL RIEL es propio y no `--gap` (pedido del usuario,
2026-08-27): el contenido no puede arrancar pegado a la columna pizarra. Sólo
a la izquierda — el borde derecho de la página no tiene riel del que separarse. */
main { padding: 2.25rem var(--gap) var(--gap) var(--aire-riel); display: grid;
gap: var(--gap); max-width: 70rem; }
.card { border: 1px solid; border-radius: 6px; padding: var(--gap); }
/* LAS SUPERFICIES DE TRABAJO, SOBRE EL SUELO DE PAPEL. Hasta el 2026-08-27 el
fondo del documento era blanco y estas piezas no declaraban ninguno: eran
blancas por omisión. Al oscurecer el suelo hay que decirlo, y va acá ARRIBA a
propósito — cualquier regla posterior que le dé un fondo propio a una de estas
piezas (las zonas de apoyo en tinte, el pie, lo ya resuelto) le sigue ganando
por orden, que es exactamente lo que se quiere. */
.card, .tarjeta, .panel, .panel-cartola, .carta-fallo, .aviso-fallo,
.ficha-imposible, .cabecera-trabajo, .borrador, .corrida-bloque,
table { background: var(--panel); }
.muted { opacity: .75; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.kv dt { font-weight: 600; }
.kv dd { margin: 0; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .3rem .6rem; border-bottom: 1px solid; }
/* La cabecera se afirma un tono al hundirse el panel: contra #f1efe8, el `--tinte`
de antes quedaba a un paso de distancia y la fila de títulos se perdía. */
th { background: var(--tinte-cabecera); }
/* ── La tarjeta sola en el medio ───────────────────────────────────────────
Disposición elegida por el usuario el 2026-08-04 sobre tres opciones
renderizadas por la app real: TARJETA CENTRADA en una página por lo demás
vacía · adentro del armazón de la app · dos columnas. Estrenada por el inicio
de sesión y el rechazo.
LA CLASE NOMBRA EL PATRÓN, NO LA FASE. Se llamó `gate-page` mientras la puerta
fue su única consumidora; la pantalla del fallo sin candidato es la segunda
(ronda R3, usuario, 2026-08-08), y un nombre de etapa en la clase que
comparten invita a la próxima pantalla a copiar el bloque en vez de heredarlo
— la misma corrección que `carga` → `paneles` en la ronda R2.
PARA QUÉ SIRVE, Y PARA QUÉ NO. Las dos pantallas de la puerta ganaron por una
razón que NO generaliza: todavía no se cargó nada, así que no hay información
con la cual ser denso. La del fallo entra por otra puerta y el usuario la
eligió sabiendo el costo: la corrida terminó, no hay nada que operar, y la
evidencia se despliega adentro del mismo aviso. Las dos comparten que no hay
trabajo en curso en esa pantalla. Seguir sin ser: una pantalla CON datos que
operar vuelve a los dos paneles. */
.centrada { display: grid; place-items: center; min-height: 100vh; }
/* La puerta y las páginas de fallo no llevan riel: no hay corrida en la que
orientarse todavía, y una columna con el nombre de la app y nada más es
exactamente la banda vacía que R1 sacó de estas dos pantallas. */
.centrada .riel { display: none; }
.centrada div.marco, .centrada .lienzo { display: contents; }
.centrada main { max-width: none; width: 100%; place-items: center; padding: var(--gap); }
.tarjeta { width: 24rem; border: 1px solid; border-radius: 8px; padding: 2rem; text-align: center; }
.tarjeta h1 { margin: 0 0 .25rem; font-size: 1.35rem; }
.tarjeta .sub { margin: 0 0 1.75rem; opacity: .7; font-size: .9rem; }
.tarjeta .button { display: block; padding: .7rem 1rem; border: 1px solid var(--banda);
border-radius: 6px; text-decoration: none; background: var(--banda);
color: #fff; font-weight: 600; }
.tarjeta .warn { margin: 0 0 1rem; padding: .5rem .7rem; border: 1px solid; border-radius: 4px;
font-size: .85rem; text-align: left; }
.tarjeta .foot { margin: 1.25rem 0 0; font-size: .8rem; opacity: .6; }
/* ── Los dos paneles ───────────────────────────────────────────────────────
Disposición elegida por el usuario el 2026-08-06 sobre tres opciones
renderizadas por la app real y fotografiadas: paso a paso · DOS PANELES ·
tablero denso. Estrenada en las pantallas 1 y 2 (§7.1).
LA CLASE NOMBRA EL PATRÓN, NO LA FASE. Se llamó `carga` mientras fue de una
sola etapa; la pantalla 4 es la segunda que la adopta, y un nombre de fase en
la clase que comparten habría invitado a la siguiente pantalla a copiar el
bloque en vez de heredarlo — que es exactamente cómo dos pantallas hermanas
empiezan a divergir.
Es la primera pantalla densa del proyecto y fija el patrón que las
siguientes adoptan: un panel angosto a la izquierda con lo que no cambia
—el estado de las comprobaciones, el archivo, la pregunta pendiente— y el
ancho restante a la derecha para lo que la corrida trajo. La barra del
invariante va arriba, desde la pantalla 5 ([AC-bar-not-before-screen-5]).
La opción que ganó no es la más limpia: la que mostraba menos (paso a paso)
es la única que no se parece a las pantallas que vienen, y perdía de vista
el archivo subido en cuanto avanzabas. */
/* LOS DOS PANELES SE SEPARAN 36 px, no 16 (usuario, 2026-08-27): «me gustaría
aumentar la separación horizontal entre el panel izquierdo y el derecho, que
están casi pegados». El `gap` de `main` sigue gobernando el vertical. */
body.paneles main { max-width: 76rem; grid-template-columns: 21rem 1fr;
column-gap: 2.25rem; align-items: start; }
body.paneles .panel { border: 1px solid; border-radius: 6px; padding: .9rem 1rem;
background: var(--tinte-suave); }
body.paneles h2.rotulo, body.paneles .panel h2 { margin: 0 0 .7rem; font-size: .8rem;
text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
body.paneles h2.rotulo { margin-bottom: .4rem; }
.chequeos { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: .82rem; }
.chequeos li { display: flex; gap: .45rem; padding: .12rem 0; }
.chequeos .mark { width: 1rem; font-weight: 700; }
.chequeos li[data-estado="FALLA"], .chequeos li[data-estado="NO_COMPROBADA"] { font-weight: 600; }
.campo { display: block; margin: 0 0 .8rem; }
.campo span { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
.campo input { width: 100%; padding: .45rem .55rem; border: 1px solid; border-radius: 5px;
background: transparent; color: inherit; font: inherit; }
.primario { width: 100%; padding: .55rem; font: inherit; font-weight: 600;
border: 1px solid var(--banda); border-radius: 5px; background: var(--banda);
color: #fff; cursor: pointer; }
/* EL BOTÓN SÓLIDO DEFIENDE SU PROPIO BLANCO (A61, decisión del usuario del
2026-09-02 sobre tres fotografías de la app real). El `color: #fff` de arriba
tiene especificidad (0,1,0) y `a:hover` tiene (0,1,1), así que un
`` perdía su texto bajo el cursor. Tres anclas llevan la
clase; dos se salvaban POR CASUALIDAD —`.corrida-bloque .primario` repite el
blanco como parte de un bloque de disposición, no para defenderse— y la
tercera, la de la configuración, no tenía quién la repitiera.
(0,2,0) le gana a (0,1,1), así que este renglón cierra la clase entera en vez
del caso: las tres anclas de hoy y cualquiera que se escriba mañana. NO es un
estado de cursor — el botón se ve exactamente igual con el cursor encima que
sin él, que es como se ven todos los botones sólidos de esta app. Darles una
respuesta al cursor se ofreció y el usuario no la eligió; si alguna vez se
decide, es una vuelta de tres pantallas fotografiadas y toca los TRECE
botones sólidos de la app —repartidos en diez plantillas, una de ellas la
puerta que se repite en varias pantallas—, no sólo éste. */
.primario:hover { color: #fff; }
.primario:focus-visible, .campo input:focus-visible { outline: 2px solid; outline-offset: 1px; }
/* LA BANDEJA DONDE SE SUELTA LA CARTOLA (A74, 2026-09-29). El estilo 2 de la
segunda vuelta: hundida —sombra interior sobre el tinte de apoyo—, con una hoja
dibujada, y sus tres caras. El botón propio es claro para no competirle a «Leer
la cartola», que sigue siendo el único botón oscuro de la pantalla (R50).
TODA PIEZA LLEVA EL PREFIJO `soltar-`, y no es gusto: `.nota` y `.elegir` ya
nombran otras cosas en esta hoja, y un nombre pelado para una pieza chica choca
con el patrón que lleva el mismo nombre (R52).
EL CAMPO NATIVO SE ESCONDE A LA VISTA, NO AL TECLADO: sin `display: none`, así
sigue recibiendo el foco y la barra espaciadora abre el diálogo. El anillo de
foco lo dibuja la bandeja entera.
LA CARA «ELEGIDO» TIENE DOS DISPARADORES y es a propósito: la clase la pone el
guion, y `:has(input:valid)` la pone sin guion — el campo es `required`, así que
pasa a válido exactamente cuando tiene un archivo. */
.soltar { position: relative; display: block; margin: 0 0 .8rem; padding: 1.3rem 1rem 1.2rem;
text-align: center; cursor: pointer; border: 1px solid var(--borde-tenue);
border-radius: 8px; background: var(--tinte-cabecera);
box-shadow: inset 0 2px 5px rgba(47, 72, 88, .12); }
.soltar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0;
pointer-events: none; }
.soltar:focus-within { outline: 2px solid; outline-offset: 2px; }
.soltar-hoja { display: block; width: 2.3rem; height: 2.3rem; margin: 0 auto .5rem;
color: var(--tinta-tenue); }
.soltar strong { display: block; font-size: .95rem; }
.soltar-nota { display: block; font-size: .8rem; color: var(--tinta-tenue); }
.soltar-nombre { display: block; font-size: .9rem; font-weight: 600; word-break: break-all; }
.soltar-boton { display: inline-block; margin-top: .75rem; padding: .38rem 1.1rem;
font-size: .85rem; font-weight: 600; border: 1px solid var(--borde-tenue);
border-radius: 5px; background: var(--papel); color: var(--enlace-oscuro);
box-shadow: 0 1px 2px rgba(47, 72, 88, .18); }
.soltar-aviso { display: block; margin-top: .6rem; font-size: .8rem; font-weight: 600;
color: var(--rojo); }
.soltar-aviso[hidden] { display: none; }
/* LAS TRES CARAS EN UNA CELDA: se esconden con `visibility` y no con `display`, así
la celda mide lo que la más alta y el botón de abajo no se mueve al cambiar de
cara. Medido en el Step 11 de A74: con `display` bajaba ~21 px al arrastrar. */
.soltar-caras { display: grid; }
.soltar-caras > * { grid-area: 1 / 1; align-self: center; }
.soltar .soltar-encima, .soltar .soltar-listo { visibility: hidden; }
.soltar .soltar-otro { display: none; }
.soltar.arrastrando { border: 2px solid var(--enlace); background: #dde8ee;
box-shadow: inset 0 2px 8px rgba(53, 99, 127, .25);
/* el borde engrosa 1 px por lado; el relleno lo devuelve */
padding: calc(1.3rem - 1px) calc(1rem - 1px) calc(1.2rem - 1px); }
.soltar.arrastrando .soltar-hoja { color: var(--enlace); transform: translateY(-3px); }
.soltar.arrastrando .soltar-reposo, .soltar.arrastrando .soltar-listo { visibility: hidden; }
.soltar.arrastrando .soltar-encima { visibility: visible; }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) { border-color: var(--verde);
background: var(--verde-fondo); box-shadow: none; }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) .soltar-hoja { color: var(--verde); }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) .soltar-reposo { visibility: hidden; }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) .soltar-uno { display: none; }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) .soltar-listo { visibility: visible; }
.soltar:is(.elegido, :has(input:valid)):not(.arrastrando) .soltar-otro { display: inline-block; }
/* La acción que sigue, al pie del panel izquierdo — opción A de la ronda R1,
decisión del usuario del 2026-08-08 sobre tres ubicaciones renderizadas por la
app real y fotografiadas. Comparte `.primario` con el botón de la pantalla 1 a
propósito: es la misma clase de cosa en el mismo lugar, y las dos pantallas de
esta etapa se manejan igual. */
body.paneles .continuar { margin: .9rem 0 0; }
/* El panel derecho antes de que exista una cartola: reservado y dicho, no vacío
y sin explicación.
`:not(body)` ES LA MISMA COLISIÓN REAL QUE `.paneles` ya tuvo (ver abajo, en la
pantalla 8), y ésta estuvo rota desde que la pantalla 9 nació: esa pantalla se
llama «la espera» y lleva `espera` como clase del BODY, así que un `.espera` a
secas le ponía a la página entera el borde punteado, el `text-align: center`, el
relleno de 3rem y la opacidad .55 del recuadro-fantasma. Lo encontró fotografiar
la pantalla para la vuelta de tres, no leer la plantilla. */
.espera:not(body) { border: 1px dashed; border-radius: 6px; padding: 3rem 1rem;
text-align: center; opacity: .55; }
.espera:not(body) h2 { font-size: 1rem; margin: 0 0 .3rem; }
.fantasma { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.5rem; }
.fantasma div { border: 1px dashed; border-radius: 4px; height: 3.2rem; }
.leido { border: 1px solid; border-radius: 5px; padding: .6rem .7rem; font-size: .85rem; }
.leido strong { display: block; font-size: 1rem; }
.titulo { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 .8rem; }
.titulo h1 { margin: 0; font-size: 1.2rem; }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0 0 1.1rem; }
.cifra { border: 1px solid; border-radius: 5px; padding: .55rem .7rem; }
.cifra dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }
.cifra dd { margin: .1rem 0 0; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
table.subt { font-size: .85rem; font-variant-numeric: tabular-nums; margin-bottom: 1.1rem; }
table.subt th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
opacity: .65; font-weight: 600; }
table.subt td, table.subt th { padding: .3rem .55rem; }
table.subt .num { text-align: right; white-space: nowrap; }
table.subt .letra { font-weight: 700; width: 1.4rem; }
table.subt .desc { opacity: .8; }
/* .62 with the .desc dim cancelled inside it: the two opacities used to
compound to ~.36, which fails WCAG contrast — found by the axe gate, T10. */
table.subt .vacia { opacity: .62; }
table.subt .vacia .desc { opacity: 1; }
.aviso { border: 1px solid; border-radius: 5px; padding: .55rem .7rem; margin: 0 0 .5rem; font-size: .85rem; }
.confirmar { border: 1px solid; border-radius: 5px; padding: .7rem; margin-top: .8rem; font-size: .88rem; }
.confirmar input { padding: .4rem .5rem; border: 1px solid; border-radius: 4px;
background: transparent; color: inherit; font: inherit; width: 100%; margin: .3rem 0; }
.confirmar button { padding: .4rem .8rem; font: inherit; font-weight: 600;
border: 1px solid; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
/* ── La franja ─────────────────────────────────────────────────────────────
The unfolded breakdown PUSHES content down in two columns — it never covers
what the user is working on (kept from option A2, 2026-08-06). SINCE
2026-08-10 (ronda del commit 13) the bar's own full-width band is gone: the
bar lives inside the second row of `.cabecera-corrida`, screens 5-11 only.
The pending count is the primary figure; the zero-auto span keeps its layout
box hidden (visibility, not display) so the primary count never moves (p2-8).
El cuadre calla cuando está bien: «detalle ▾» despliega la cuenta, y el rojo
de «necesita tu mano» aparece sólo con las cuentas rotas. */
.franja { display: flex; align-items: baseline; gap: .9rem; font-size: .85rem; }
.franja-pendientes strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* LA BARRA DE AVANCE del conteo principal (usuario, 2026-08-27). Es lo único de
la aplicación que dibuja un avance, y la contracara de la regla que prohíbe
dibujarlo para los pasos: el paso es una coordenada, esto es una tarea que se
termina. `7/66` va adentro del mismo grupo, chico y atenuado, como leyenda de
la barra — el grupo entero es UNA imagen para quien lee con asistencia. */
.avance { display: inline-flex; align-items: center; gap: .5rem;
vertical-align: middle; margin-right: .7rem; }
.avance-riel { display: inline-block; width: 120px; height: 6px;
background: var(--borde-tenue); border-radius: 3px; overflow: hidden; }
.avance-hecho { display: block; height: 100%; background: var(--banda); border-radius: 3px; }
.avance-cuenta { font-size: .74rem; font-variant-numeric: tabular-nums;
color: var(--tinta-tenue); }
/* La cifra subordinada bajó al desglose el 2026-08-27 (usuario): acá adentro no
compite con nada y no necesita el hueco reservado que la sostenía arriba. */
.franja-auto { margin: 0 0 .6rem; font-size: .8rem; color: var(--tinta-tenue); }
.franja-auto strong { font-variant-numeric: tabular-nums; }
.franja-detalle { flex: 1; }
.franja-detalle summary { cursor: pointer; list-style: none; }
.franja-detalle summary::-webkit-details-marker { display: none; }
/* EL ESTADO YA NO TIENE MÁS QUE UN HOGAR, así que sus reglas dejan de ser tres.
Hasta el 2026-08-27 este fragmento vivía en la banda de arriba y las tres
caras se pintaban distinto según dónde cayeran: atenuada la que cuadra,
desatenuada en el pie, roja y en negrita la rota. Con la cuenta mudada al pie
y el aviso rojo mudado a la banda, las tres caras son UN control entre otros
dos y se escriben como ellos — mismo cuerpo, mismo color, mismo subrayado.
El rojo se fue de acá porque se fue a `.franja-aviso`, no porque se perdiera. */
.franja-estado { white-space: nowrap; }
/* EL AVISO DE LA BANDA — el rojo de «necesita tu mano» (R7), y el único lugar
donde esta franja lo usa. Vacío cuando las cuentas cuadran: el nodo existe
siempre para que el intercambio fuera de banda lo encuentre, y un `` sin
texto no dibuja nada ni ocupa lugar. */
.franja-aviso { color: var(--rojo); font-weight: 700; font-size: .9rem; }
.franja-aviso:empty { display: none; }
.franja-desglose { border-top: 1px dashed; margin-top: .45rem; padding: .55rem 0 .1rem; }
/* `gap` ES ATAJO DE LOS DOS, así que el `gap: .15rem` que venía DESPUÉS pisaba
el `column-gap: 4rem` de arriba y las dos columnas quedaban a 2,4 px: el monto
de la izquierda terminaba pegado al rótulo de la derecha («91.400 Σ missing»).
Estaba desde que el desglose tiene dos columnas y no se veía porque el bloque
era angosto; lo destapó ensancharlo. Un solo `gap` con sus dos valores. */
.franja-terminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .15rem 4rem; margin: 0; }
.franja-terminos div { display: flex; justify-content: space-between; gap: 1.2rem; }
.franja-terminos dt { opacity: .75; }
.franja-terminos dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.franja-facturado { border-top: 1px solid; margin-top: .3rem; padding-top: .3rem; font-weight: 650; }
.franja-anomalia, .franja-cuadra-pendiente { margin: 0 0 .6rem; font-size: .8rem; }
/* ── Las vistas del armazón ────────────────────────────────────────────────
Pending lines, reversion, terminal, and the phase hulls T12-T21 fill in.
Long descriptions wrap inside their cell; amounts never do (p2-6). */
.casco p { margin: 0; opacity: .8; }
.pendientes td.descripcion, .reversion td.descripcion { overflow-wrap: anywhere; }
.pendientes td.monto, .pendientes th.monto { text-align: right; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.hallazgos-acceso { font-size: .85rem; background: #fff; border: 1px solid; border-radius: 999px;
padding: .12rem .65rem; text-decoration: none; color: inherit; }
/* Option B2 (user decision 2026-08-06): the access carries the count, and goes
bold when the worst finding is a risk. */
.hallazgos-acceso[data-gravedad="riesgo"] { font-weight: 700; }
.filtros { display: flex; gap: .7rem; margin: 0 0 .8rem; font-size: .85rem; }
.filtros a[aria-current="true"] { font-weight: 700; text-decoration: none; }
.hallazgos td.descripcion { overflow-wrap: anywhere; }
/* R28 (A31, 2026-08-23): la clase de la observación es el titular del renglón y el
mensaje su explicación, dentro de la misma celda. Elegida por el usuario sobre tres
opciones renderizadas. La misma forma en la vista de reversión, para que las dos
vistas de consulta se lean igual. */
.hallazgos td .titular, .reversion td .titular { display: block; font-weight: 600; }
.hallazgos td .detalle { display: block; }
.reversion td .idexterno { display: block; opacity: .55;
font-variant-numeric: tabular-nums; }
/* ── La configuración en dos paneles ───────────────────────────────────────
Option C2, user decision 2026-08-06: the same layout the statement-load
screens fixed — what does not change while you work (the preflight) on the
narrow left panel, the editable form on the right. */
.config-panels { display: grid; grid-template-columns: 21rem 1fr; gap: var(--gap);
align-items: start; }
.config-panels aside .primario { display: block; text-align: center; text-decoration: none;
margin: .6rem 0; }
/* ── La pantalla del corte (pantalla 4, §7.3) ──────────────────────────────
Hereda los dos paneles con el angosto a la izquierda. Lo que la ronda R2
decidió (usuario, 2026-08-08, sobre tres plantillas reales fotografiadas) es
dónde vive la lista de descartadas por categoría: DEBAJO DEL CONJUNTO, como
tabla propia con sus columnas alineadas. Las otras dos —en el panel angosto ·
mezcladas en la misma tabla, en su fecha— quedaron afuera con sus costos
escritos en el working file del ítem T12. */
/* Un rótulo del panel que no es el primero necesita aire arriba: el bloque de
`body.paneles .panel h2` sólo trae margen abajo, que alcanzaba mientras el
panel tuvo un solo rótulo. */
body.paneles .panel h2:not(:first-child) { margin-top: 1.2rem; }
.corte-adoptado { border: 1px solid; border-radius: 5px; padding: .55rem .7rem; }
.corte-adoptado strong { display: block; font-size: 1.4rem; font-variant-numeric: tabular-nums;
line-height: 1.2; }
.corte-adoptado span { font-size: .78rem; opacity: .75; }
.nota { font-size: .78rem; opacity: .7; margin: .55rem 0 1.1rem; }
/* A68 — el límite de la espera va DEBAJO del botón, en su propia línea (usuario,
2026-09-06, opción 2 sobre tres pantallas enteras fotografiadas de la app real).
En reposo NO EXISTE: la pantalla queda idéntica a como estaba, y la línea
aparece al apretar. La regla de `[hidden]` es explícita porque el `display`
de arriba le ganaría al del navegador y el aviso se vería siempre. */
.espera-limite { display: block; font-size: .74rem; opacity: .62; margin: .45rem 0 0; }
.espera-limite[hidden] { display: none; }
.conteos { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.conteos li { display: flex; justify-content: space-between; gap: .6rem; padding: .22rem 0;
border-bottom: 1px dashed; }
.conteos li:last-child { border-bottom: 0; }
.conteos .n { font-variant-numeric: tabular-nums; font-weight: 650; }
table.lm { font-size: .85rem; font-variant-numeric: tabular-nums; margin-bottom: 1.1rem; }
table.lm th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
opacity: .65; font-weight: 600; }
table.lm td, table.lm th { padding: .3rem .55rem; }
table.lm .num { text-align: right; white-space: nowrap; }
table.lm .fecha { white-space: nowrap; width: 6rem; }
table.lm .rev { text-align: center; width: 3.2rem; }
table.lm td.comercio { overflow-wrap: anywhere; }
table.lm .cat { opacity: .8; }
.otras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.otras h2.rotulo { margin-top: 0; }
/* ── El aviso del fallo sin candidato (§7.3, C9) ───────────────────────────
Hereda la tarjeta centrada de arriba y la ensancha: 24rem sirven para un
botón de inicio de sesión y no para cinco renglones de evidencia. Ronda R3,
elegida por el usuario el 2026-08-08 sobre tres plantillas reales
fotografiadas — las otras dos, todo en la página de la corrida en dos paneles
y una página breve con la evidencia en Hallazgos, quedaron afuera con sus
costos escritos en el working file de T12.
LA EVIDENCIA LLEGA PLEGADA, y es la parte que el usuario eligió sabiendo lo
que cuesta: quien abre esta página lee primero que la corrida terminó y por
qué, y despliega los cinco días si va a ir a arreglarlos. */
.aviso-fallo { width: 40rem; max-width: 100%; text-align: left; padding: 2rem 2.2rem; }
.aviso-fallo h1, .aviso-fallo .sub, .aviso-fallo .button, .aviso-fallo .foot { text-align: center; }
.aviso-fallo .sub { margin-bottom: 1.5rem; }
.aviso-fallo .warn { font-size: .88rem; line-height: 1.55; }
.evidencia { border: 1px solid; border-radius: 4px; padding: .5rem .7rem; margin: 0 0 1.25rem;
font-size: .85rem; }
.evidencia summary { cursor: pointer; font-weight: 600; }
.evidencia summary:focus-visible { outline: 2px solid; outline-offset: 2px; }
.evidencia ol { margin: .6rem 0 .1rem; padding-left: 1.3rem; }
.evidencia li { padding: .3rem 0; border-bottom: 1px dashed; }
.evidencia li:last-child { border-bottom: 0; }
/* El movimiento que la página del estado imposible muestra (A24, C6): una fila,
como el usuario lo conoce — fecha, descripción, monto como plata. EL MONTO DE
LA TABLA NO LLEVA ROJO (decisión del usuario, tercera vuelta): el defecto
puede estar en el signo o en el destino, y pintar el monto acusaría a un
campo que quizá no falló — la regla de la décima ronda, aplicada acá. */
.movimiento-imposible { width: 100%; border-collapse: collapse; margin: 0 0 1rem;
font-size: .85rem; }
.movimiento-imposible th, .movimiento-imposible td { border-bottom: 1px solid;
padding: .35rem .5rem; text-align: left; }
.movimiento-imposible th { font-size: .72rem; text-transform: uppercase;
letter-spacing: .05em; }
.movimiento-imposible .monto { text-align: right; font-variant-numeric: tabular-nums; }
/* La ficha rotulada bajo el movimiento (elegida sobre tres opciones, tercera
vuelta): tres renglones cuyo rótulo cambia por cara. El rojo de «necesita tu
mano» cae en el renglón del dato que efectivamente falló, y sólo ahí. */
.ficha-imposible { display: grid; grid-template-columns: max-content 1fr;
gap: .3rem .9rem; font-size: .85rem; margin: 0 0 1rem; }
.ficha-imposible dt { font-size: .72rem; text-transform: uppercase;
letter-spacing: .05em; padding-top: .12rem; }
.ficha-imposible dd { margin: 0; }
.ficha-imposible .malo { color: var(--rojo); font-weight: 700; }
.aviso-fallo h2 { font-size: .8rem; text-transform: uppercase;
letter-spacing: .05em; margin: 1.1rem 0 .4rem; }
.aviso-fallo ul.acciones { font-size: .88rem; line-height: 1.55;
margin: 0 0 1.25rem; padding-left: 1.2rem; }
.aviso-fallo ul.acciones li { margin: .3rem 0; }
/* ── La pantalla de los pagos declarados (pantalla 3, §7.2) ────────────────
Hereda `body.paneles` de la ronda R2 y `table.lm` de la R5. Lo de acá es lo
que decidieron las rondas R7 (cómo se aprueba de a uno, cómo se muestran
varias candidatas, dónde vive la carga a mano) y R10 (los tres montos
apilados, el aviso junto al comentario, y el rojo sólo en la etiqueta). */
.pagos .texto { font-size: .82rem; opacity: .85; overflow-wrap: anywhere; }
.pagos tr.aprobada { font-weight: 650; }
.pagos .accion { width: 7.5rem; text-align: right; white-space: nowrap; }
.pagos button { font-size: .78rem; padding: .18rem .6rem; cursor: pointer; }
/* EL BOTÓN APARECE CUANDO LA FILA ESTÁ COMPLETA, y lo decide el navegador solo:
`:has()` mira si algún campo obligatorio de la fila sigue vacío. Sin una línea
de JavaScript y sin un viaje al servidor — se actualiza mientras se escribe.
Escondido, tampoco recibe foco, así que la fila incompleta no ofrece por
teclado una acción que no puede completarse; lo que falta lo dicen el rojo y
la etiqueta, que es donde el usuario ya está mirando. */
.pagos tr:has(input:required:invalid) .accion button { visibility: hidden; }
.pagos .grupo td { border-top: 2px solid; }
.pagos .continua td { border-top: 0; }
.pagos .comentario-col { width: 40%; }
.a-mano { font-size: .8rem; }
.a-mano input { font-size: .8rem; padding: .15rem .3rem; }
.a-mano input.monto { width: 7rem; text-align: right; }
.a-mano input.fecha { width: 8rem; }
/* El aviso del cambio de año, una vez al año (diciembre/enero).
El recuadro completo con el borde izquierdo más grueso NO es un descuido: la
ronda R22 del 2026-08-18 lo fotografió contra una línea al costado y contra una
banda con fondo tenue, y el usuario eligió éste. El revisor de diseño va a
seguir marcando la mezcla de bordes — está contestado. Cambiarlo es departir de
un patrón registrado: ronda de tres y decisión del usuario, no arreglo local.
Sin color propio a propósito: la paleta de estado es para lo que pide tu mano. */
.aviso-ano { font-size: .8rem; border: 1px solid; border-left-width: 3px; border-radius: 4px;
padding: .5rem .7rem; margin: 0 0 1rem; }
/* Los pagos contra los que se compara cada comentario: el monto manda, así que va
primero y en negrita, y el origen lo acompaña. Es al revés que `.conteos`, donde
la etiqueta manda y el número es el dato. */
.conteos.conocidos li { justify-content: flex-start; gap: .5rem; }
.conteos.conocidos .n { min-width: 5.5rem; text-align: right; }
.conteos.conocidos li span:last-child { opacity: .7; font-size: .74rem; }
/* Una lista vacía dice qué significa estar vacía, no sólo que lo está. */
td.vacio { opacity: .7; font-style: italic; }
/* La lista negra vacía se encoge a un renglón — sigue diciendo que se miró. */
.nota.apenas { margin: 1.4rem 0 0; }
/* Monto y fecha son campos en toda fila detectada, así que la celda no aporta su
propio padding y los campos se alinean con las columnas de arriba. */
table.lm td.a-mano { padding-top: .15rem; padding-bottom: .15rem; }
table.lm td.num.a-mano { text-align: right; }
/* EL AVISO VIVE JUNTO AL COMENTARIO Y SÓLO CUANDO HAY UN PROBLEMA, y EL ROJO
VIVE ACÁ Y EN NINGÚN CAMPO (usuario, 2026-08-10, ronda R10).
POR QUÉ NINGÚN CAMPO: que un monto leído no coincida con ninguno de los pagos
conocidos puede deberse al monto O A LA FECHA, así que pintar uno de los dos
afirma más de lo que la app puede saber. Hasta esta ronda el monto sin
coincidencia y la fecha faltante iban en rojo dentro del recuadro; lo que
impide aprobar una fila incompleta sigue siendo `required`, que es la mitad
que sí sabe de qué habla.
LA FORMA ES LA ÚNICA DE TODA ETIQUETA (usuario, 2026-08-27): la de `matched`
y `missing` —`.etiqueta-lm`, monoespaciada, canto de 3px y borde derivado del
color del texto al 35%—, que superseda la pastilla redonda del mismo día. El
color sigue siendo el rojo de «necesita tu mano» (R7): con el borde derivado,
el canto sale solo en su rosa apagado.
Y explica al pasar por encima, así que se ve que se puede pasar. */
.pagos .aviso { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .74rem; padding: 0 .25rem; border: 1px solid; border-radius: 3px;
border-color: color-mix(in srgb, currentColor 35%, transparent);
white-space: nowrap; display: inline-block; margin: .06rem .12rem .06rem 0;
cursor: help; color: var(--rojo); }
/* LOS TRES MONTOS DE UN PREPAGO PARCIAL, APILADOS EN LA COLUMNA QUE YA ERA DE
ELLOS (usuario, 2026-08-10). Ganó sobre escribir la resta bajo la fila y sobre
darle una columna a cada monto: las dos rivales le cobraban algo a las filas
que NO tienen el caso —un renglón la primera, dos columnas vacías la segunda—.
El rótulo va al lado del número y el orden es el de la resta que los une, así
que se lee de arriba abajo sin escribir la operación. */
.pagos .monto-apilado { display: flex; align-items: baseline; justify-content: flex-end;
gap: .4rem; white-space: nowrap; }
.pagos .monto-apilado + .monto-apilado { margin-top: .12rem; }
.pagos .etiqueta-monto { font-size: .66rem; text-transform: uppercase;
letter-spacing: .04em; opacity: .6; }
/* EL AVISO DEL PREPAGO DECLARADO CUELGA FUERA DEL FLUJO DEL RENGLÓN (usuario,
2026-08-31, sobre tres plantillas reales fotografiadas). El renglón es
`justify-content: flex-end`, así que cualquier elemento agregado adentro —a un
lado o al otro del campo— corre el rótulo y el campo y desalinea los tres
montos apilados. Absoluto, cae en el espacio libre que deja la columna de la
fecha y los tres campos quedan a plomo. */
.pagos .monto-apilado.con-aviso { position: relative; }
.pagos .monto-apilado.con-aviso .aviso { position: absolute; left: 100%;
margin: 0 0 0 .45rem; top: 50%; transform: translateY(-50%); }
/* ── El encabezado integrado de la corrida (ronda del commit 13, T14) ──────
Elegido por el usuario el 2026-08-10 sobre seis vueltas de opciones
renderizadas por la app real: UN solo bloque bajo el encabezado, dos
renglones, un solo borde — nunca bandas apiladas. Renglón 1: la tira de
capítulos — Cartola · Lecturas · Conciliación · Cierre — con hecho ✓ y
enlace de sólo lectura, el actual en negrita y lo pendiente atenuado
(reemplaza al «Pantalla N · ESTADO»; regla 3 de navegación). Renglón 2
(pantallas 5-11): los números de la corrida, denominados en la unidad de la
cartola. A la derecha, centrado sobre los dos renglones, el botón «Ir al
próximo paso» — sólido, el único elemento relleno de la pantalla, y con el
mismo mensaje en todas. */
/* EL RENGLÓN DE LA TIRA SE FUE AL RIEL el 2026-08-27; lo que queda acá son los
números de la corrida y el botón que avanza. El botón sigue ARRIBA por
instrucción explícita del usuario en la misma elección: «el botón de Ir al
próximo paso tiene que estar arriba (no abajo o en el riel)».
Y el fondo deja de ser un tinte: sobre papel cálido, la banda de apoyo que
antes separaba la tira de la pantalla ya no separa nada — separa el riel. */
/* `+ 1px` Y NO `var(--alto-cabecera)` A SECAS, y esto es exactamente el píxel
que separaba las dos rayas después de atarlas al mismo valor. Con
`box-sizing: border-box` el borde vive ADENTRO de la altura declarada, así que
una banda de 88 px pinta su raya en 87 y el corte del riel —que no lleva
borde, y por lo tanto empieza donde termina el rótulo— la pinta en 88. Medido
sobre la foto a 2x: 174 contra 176. Se le suma el ancho del borde a la banda
para que las dos rayas ocupen el mismo píxel, y sigue habiendo UN solo valor. */
.cabecera-corrida { border-bottom: 1px solid var(--borde-tenue);
height: calc(var(--alto-cabecera) + 1px); align-content: center;
padding: 0 var(--gap) 0 var(--aire-riel);
/* TRES COLUMNAS, Y LA DEL MEDIO ES `auto` ENTRE DOS `1fr`
IGUALES: así el bloque de la cuenta queda centrado en la
banda sin depender de cuánto midan el conteo ni el botón.
Centrarlo con márgenes lo habría dejado corriéndose cada
vez que el conteo cambia de dígitos. */
display: grid; grid-template-columns: 1fr auto 1fr;
column-gap: 1.5rem; row-gap: .25rem; align-items: center;
/* EL FONDO DE LA TIRA — opción 1 de tres fotografiadas
(usuario, 2026-08-27): «un fondo un poco más oscuro, para
darle más estructura». Es el tinte que la app YA usa en
sus zonas de apoyo, así que la tira se despega del papel
sin estrenar una superficie nueva. Se descartaron un tinte
con más cuerpo y pintar la tira de pizarra como el riel —
ésta última resolvía lo de las dos rayas de raíz (dejaba
de haber dos superficies) al precio de invertir la cifra
principal y el botón que avanza. */
background: var(--tinte-suave); }
.cabecera-corrida .fila-numeros { grid-column: 1; display: flex; align-items: baseline;
gap: 1.5rem; }
/* SIN FRANJA Y SIN BOTÓN, LA BANDA NO DIBUJA NADA. Con la tira mudada al riel,
una pantalla consultada de las 3-4 —sin franja, y sin puerta porque ese paso
ya pasó— dejaba acá 50 px de banda vacía con su raya, encima del trabajo.
Se apaga el MARCO y no el nodo: `#ranura-puerta` sigue en la página, que es
lo que R12 pide para que un intercambio fuera de banda la encuentre, y en
cuanto la puerta llegue el selector deja de aplicar y la banda vuelve sola. */
.cabecera-corrida:not(:has(.fila-numeros)):not(:has(.puerta-avance)) {
padding: 0; border-bottom: none; }
.cabecera-corrida .fila-numeros .franja { flex: 1; }
.cabecera-corrida .franja { font-size: .95rem; }
/* EL HIJO DE LA GRILLA ES LA RANURA, NO EL FORMULARIO DE ADENTRO (medido
2026-08-27, pedido del usuario: el botón no quedaba centrado). La regla vivía
sobre `.puerta-avance`, que va DENTRO de `#ranura-puerta` (R12: la ranura
existe siempre para que el intercambio la encuentre) — así que la colocación
no aplicaba a nadie y la ranura caía donde el flujo automático la pusiera.
La ranura toma la columna derecha a lo alto de las dos filas y centra lo que
tenga adentro; el formulario ya no declara colocación propia. */
/* VUELVE A `center` PORQUE LA RAZÓN DE `start` SE MUDÓ. `start` estaba para que
el botón no se fuera al medio de la pantalla cuando el desglose se desplegaba
dentro de esta banda y la estiraba a 400 px. El 2026-08-27 el usuario bajó la
cuenta al pie: la banda ya no crece, tiene alto fijo, y un botón anclado al
borde de arriba de dos renglones se lee descolgado. Se borra la excepción en
vez de arrastrarla — el botón sigue arriba, que es lo que se pidió. */
.cabecera-corrida .ranura-puerta { grid-column: 3; grid-row: 1; align-self: center;
justify-self: end; display: flex; align-items: center; }
/* EL CENTRO DE LA TIRA ES EL VEREDICTO — el aviso rojo o la cartola conciliada,
nunca los dos, y nada cuando la corrida simplemente sigue (usuario,
2026-08-27). Centrado en vertical y en horizontal. */
.cabecera-corrida .franja-cuenta { grid-column: 2; grid-row: 1; align-self: center;
text-align: center; line-height: 1.35; }
.cabecera-corrida .franja-cuenta .franja-aviso { display: block; }
/* «CARTOLA CONCILIADA» — el tilde grande arriba y la frase chica debajo, elegido
por el usuario sobre tres composiciones fotografiadas: un sello enmarcado, un
disco relleno con la frase al lado, y ésta. Es la única sin recuadro ni
relleno, y por eso convive con el botón sólido que tiene a la derecha en vez
de competirle — el botón sigue siendo el único elemento lleno de la pantalla.
El verde es el que la app YA tiene para «salió bien»: no estrena color. */
.franja-estado[data-estado="conciliado"] { display: block; color: var(--verde);
font-size: .66rem; letter-spacing: .17em; text-transform: uppercase;
font-weight: 700; line-height: 1.15; }
.franja-estado[data-estado="conciliado"] .marca-estado { display: block;
font-size: 1.6rem; letter-spacing: 0; }
.franja-estado:empty { display: none; }
/* LA «i» QUE ABRE LA CUENTA DEL MES — círculo de contorno, elegido por el
usuario sobre tres pesos fotografiados (contorno · disco relleno tenue · la
letra sola en itálica). Reemplaza al signo de sumatoria que se le ofreció
antes, y sus palabras fueron «me parece asqueroso»: Σ nombra bien lo que abre
—los diez términos se llaman «Σ matched», «Σ abonos»— y eso no lo vuelve un
ícono. La «i» sí se lee sin que nadie la explique.
SE ALINEA CON EL FINAL DE «destino», pedido del usuario en la misma vuelta, y
por eso está colocada en vez de estar en el flujo: `right: 0` se mide contra
`.fila-numeros`, cuyo ancho es el de la línea del conteo — la más larga de las
dos. Ponerla a continuación de la leyenda la habría dejado flotando a mitad de
camino, que es como se veía en la primera foto de esa vuelta. */
/* `justify-self: start` NO ES DECORATIVO: sin él la celda se estira a lo ancho
de su columna `1fr` y el `right: 0` de abajo mide contra el borde de la
COLUMNA, no contra el final de «destino» — la «i» quedaba flotando a media
pantalla. Medido sobre la foto. Encogida al contenido, el ancla es el texto. */
.cabecera-corrida .fila-numeros { position: relative; justify-self: start; }
.cabecera-corrida .franja-detalle { position: absolute; right: 0; top: .1rem; }
.franja-icono { font-size: .68rem; font-weight: 700; width: 15px; height: 15px;
border-radius: 50%; border: 1px solid var(--tinta-tenue); color: var(--tinta-tenue);
display: grid; place-items: center; opacity: .75; }
.franja-detalle > summary:hover .franja-icono { opacity: 1; }
/* LA ZONA DEL DESGLOSE, DEBAJO DE LA BANDA Y FUERA DE ELLA. Se muestra cuando el
`` de arriba está abierto, y por eso el selector mira al ancestro:
`:has()` es lo único que deja que un control gobierne a un hermano sin una
línea de JavaScript. Empuja el contenido hacia abajo y no tapa nada, que es lo
que `[AC-bar-full-breakdown]` pide desde A2; y deja la banda del alto de
siempre, así que ni el conteo ni el botón se mueven al abrirla. */
.franja-zona-cuenta { display: none; }
.lienzo:has(.franja-detalle[open]) .franja-zona-cuenta { display: block;
border-bottom: 1px solid var(--borde-tenue); background: var(--tinte-suave);
padding: .85rem var(--gap) 1rem var(--aire-riel); }
.franja-zona-cuenta .franja-desglose { border-top: none; margin: 0; padding: 0;
max-width: 46rem; }
.cabecera-corrida .puerta-avance { margin: 0; }
.cabecera-corrida .primario { width: auto; padding: .6rem 1.4rem; font-size: .9rem;
background: var(--banda); color: #fff; border-color: var(--banda); }
/* LA TIRA, ACOSTADA. Los cuatro capítulos son los mismos y los datos también:
lo único que cambió con el riel es que corren en vertical, así que el chevron
que los separaba a lo ancho se va —en una columna, el orden lo dice la
columna— y el capítulo actual se marca con un canto encendido a la izquierda.
La plantilla no cambió una letra. */
.tira ol { list-style: none; display: grid; gap: .1rem;
margin: 0; padding: 0 .25rem; font-size: .86rem; }
.tira li { display: flex; align-items: center; gap: .35rem;
padding: .32rem .55rem; border-left: 2px solid transparent; }
.tira .marca { font-weight: 700; }
.tira a { color: inherit; }
.tira li[data-estado="actual"] { font-weight: 700; background: rgba(255, 255, 255, .12);
border-left-color: var(--banda-tinta); }
/* EL PISO DE LA ATENUACIÓN SOBRE LA PIZARRA ES .64, MEDIDO Y NO SUPUESTO. El
texto claro sobre `--banda` arranca en 8,58:1, y atenuarlo lo baja rápido:
.45 da 3,11:1 y .60 da 4,27:1 — las dos por debajo del mínimo. `axe` reprobó
las 35 pantallas de una, incluida la portada, que sólo lleva el nombre de la
app. Acá estaba escrito lo contrario, afirmado sin medir.
Y LA CONSECUENCIA NO ES SUBIR .45 A .68 Y LISTO: con el piso tan cerca del
techo, «hecha» y «pendiente» ya no se pueden distinguir por gris. No hace
falta — el ✓ es lo que las separa, y el capítulo actual tiene su fondo y su
canto. Es R20 otra vez: cuando «más gris» se acaba, lo que distingue es
quitar o poner un elemento, nunca bajar la opacidad un poco más. */
.tira li[data-estado="hecha"],
.tira li[data-estado="pendiente"] { opacity: .68; }
/* ── La cara del fallo de lectura externa (C14, ronda R8) ──────────────────
El anuncio Y su reintento viven juntos, en una tarjeta al tope de la columna
de contenido — elegida por el usuario (2026-08-09) sobre el panel izquierdo y
la franja a lo ancho: el fallo ocupa el lugar del contenido que falta, y el
botón que lo resuelve no se separa del anuncio. La usan la cartola (fallo de
Lunch Money) y la pantalla 3 (fallo de Todoist).
El tono ya NO es el rojo de «necesita tu mano» (R7): la ronda del 2026-08-18
le dio color propio (R21). Un fallo de lectura no es un dato que el usuario
tenga que corregir — es la app diciendo que no pudo, y su botón lo reintenta.
Compartir el rojo hacía que las dos cosas se leyeran como la misma. */
.carta-fallo { border: 1px solid; border-left: 3px solid var(--ambar-borde); border-radius: 5px;
padding: 1rem 1.2rem; margin: 0 0 .9rem; }
.carta-fallo h2 { margin: 0 0 .5rem; font-size: .95rem; }
.carta-fallo p { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.5; }
.carta-fallo .primario { width: auto; padding: .5rem 1.4rem; }
/* ── La pantalla de la validación (pantalla 5, §7.4) ───────────────────────
Hereda `body.paneles` (R2), `table.lm` (R5), la tarjeta de fallo `.carta-fallo`
(R8) y la forma del aviso redondo de la pantalla 3 (R10). Lo de acá es lo que
decidió la ronda R11 del 2026-08-12, sobre tres plantillas reales servidas por
esta app y fotografiadas: UNA sola tabla en orden de fecha, la pista de Todoist
como etiqueta pegada al comercio, los dos botones en la columna de acción, y la
fila dejada afuera quedándose en su lugar. */
/* EL SELECTOR ES `table.lm` Y NO `.validacion`, DESDE T15. R11 registró estas
cuatro decisiones como PATRONES —la columna de acción a la derecha, la pista
pegada al comercio, la fila respondida quedándose en su lugar—, y un patrón
escrito contra el nombre de una pantalla es un patrón que la próxima pantalla
sólo puede COPIAR. Es la misma lección que `body.carga` → `body.paneles` en R2
y `body.gate-page` → `body.centrada` en R6, un nivel más adentro: la clase
nombra el patrón, nunca la fase. La pantalla 6 lo hereda sin una línea nueva. */
table.lm .accion { width: 13rem; text-align: right; white-space: nowrap; }
table.lm .accion form { display: inline-block; margin-left: .35rem; }
table.lm .accion button { font: inherit; font-size: .78rem; padding: .18rem .6rem;
cursor: pointer; }
/* EL ANILLO DE FOCO, QUE FALTABA. La hoja tenía `:focus-visible` para `.primario`,
los campos y el resumen de la evidencia, y estos botones no son ninguno de los
tres — así que quien recorre la tabla con el teclado no veía dónde estaba, en
la única pantalla donde hay dos botones por fila y veinte filas. Mismo trazo y
mismo desplazamiento que los otros tres: es el patrón de la hoja, aplicado
donde no llegaba. */
table.lm .accion button:focus-visible { outline: 2px solid; outline-offset: 1px; }
/* LA ETIQUETA QUE INFORMA — en la columna del objeto, nunca en columna propia
(usuario, 2026-08-12). Es contexto que decide nada: una columna afirmaría que
la pregunta se le hace a todas las filas, y en un mes normal la responde una.
Comparte la forma del aviso de la pantalla 3 y NO su color: aquel rojo
significa «necesita tu mano» (R7) y esto no lo necesita.
CHICA Y ALINEADA A LA DERECHA, EN TODOS SUS CONSUMIDORES (usuario, 2026-08-16).
Nació en la pantalla 5 grande y arrancando donde terminara cada nombre; la
pantalla 8 la estrenó chica y pegada al borde derecho de su columna, y el
usuario decidió adoptar esa forma en las dos. Un mismo control con dos tamaños
es lo que hace que cada pantalla nueva vuelva a decidir algo ya decidido.
`float` Y NO `flex`: hacer flex la celda partiría el nombre del comercio en
cajas y le rompería el ajuste de línea.
EL COSTO ESTÁ MEDIDO Y ACEPTADO. Alinear a la derecha acerca la etiqueta al
objeto donde la columna es angosta (pantalla 8) y la ALEJA donde es ancha
(pantalla 5: cruza casi media tabla y termina más cerca del monto que del
comercio que califica). Se fotografiaron las dos antes de decidir y el usuario
eligió la forma única a sabiendas — la consistencia por encima del acercamiento
local. Escrito acá para que un lector futuro sepa que no es un descuido.
Y LA FORMA DEL RECUADRO ES LA ÚNICA DE TODA ETIQUETA (usuario, 2026-08-27):
la de `matched` y `missing` —`.etiqueta-lm`— en lugar de la pastilla redonda
en mayúsculas de antes. La posición (a la derecha, con `float`) y la
atenuación de pista quedan; lo que se unifica es el traje. */
table.lm .pista { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .74rem; padding: 0 .25rem; border: 1px solid; border-radius: 3px;
border-color: color-mix(in srgb, currentColor 35%, transparent);
white-space: nowrap; display: inline-block; float: right; margin-left: .6rem;
cursor: help; opacity: .7; }
/* LA FILA YA RESPONDIDA SE QUEDA EN SU FECHA (usuario, 2026-08-12), y las dos
respuestas se distinguen sin leer la palabra: la preservada en negrita, la
que quedó afuera atenuada y con el monto tachado.
.68 Y NO MENOS, Y ESO ES UNA MEDICIÓN. Dos atenuaciones encimadas en
`table.subt` dieron ~.36 y el chequeo `axe` las rechazó por contraste (T10);
acá la celda es la única capa que atenúa y el tachado es lo que carga el
significado, así que la opacidad no tiene que llegar a decirlo sola. */
table.lm tr.decidida.preservada { font-weight: 650; }
table.lm tr.decidida.fuera td { opacity: .68; }
table.lm tr.decidida.fuera .num { text-decoration: line-through; }
/* Y LA ATENUACIÓN DEL VEREDICTO NO SE ENCIMA A LA DE SU FILA (A51). El párrafo
de arriba afirma que «la celda es la única capa que atenúa» y era falso: en una
fila `fuera` el `.68` del `td` y el `.8` de esta palabra se multiplicaban a
~.54, que es la misma clase de defecto que T10 midió en `table.subt`. Estaba
desde entonces y pasaba `axe` sólo porque la superficie de abajo era casi
blanca; al hundir `--panel` a #f1efe8 el chequeo lo rechazó — la regresión no
lo creó, lo destapó. `:not(.fuera)` deja UNA sola capa en los dos casos. */
table.lm .veredicto { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
table.lm tr:not(.fuera) .veredicto { opacity: .8; }
/* ══ PANTALLA 7 · EL CRUCE — «el emparejamiento es la fila» ════════════════
Elegida por el usuario el 2026-08-14 (ronda R16) sobre nueve propuestas
renderizadas por la app real, en cinco vueltas. Lo que ganó, en una línea: la
unidad de la pantalla es el PAR y no la fuente — una transacción de Lunch
Money a la izquierda, los movimientos de la cartola que la suman a la
derecha, en el mismo renglón y con el signo igual en el medio.
LA MITAD DE LAS PERDEDORAS SE FUE CON ELLAS. Las propuestas G (una tarjeta
por pregunta) y H (el extracto anotado) tuvieron su CSS acá mientras la
ronda estuvo abierta; queda en el registro de la ronda, no en la hoja que
sirve la app. */
body.cruce main { max-width: 74rem; }
/* El renglón de estado del paso: una sola cosa que llevar a cero. */
.estado-paso { font-size: 1.05rem; margin: 0 0 1.6rem; max-width: 46rem; }
.estado-paso strong { font-variant-numeric: tabular-nums; }
.estado-paso .listo { display: block; font-size: .82rem; opacity: .7; margin-top: .25rem; }
.elegir { font: inherit; font-weight: 600; padding: .45rem 1rem; border: 1px solid;
border-radius: 5px; background: transparent; color: inherit; cursor: pointer;
white-space: nowrap; }
.deshacer-min { font: inherit; font-size: .78rem; padding: .15rem .55rem; border: 1px solid;
border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: .75; }
.elegir:focus-visible, .deshacer-min:focus-visible { outline: 2px solid; outline-offset: 1px; }
/* ── El renglón-par ─────────────────────────────────────────────────────── */
.pares { border-top: 2px solid; }
.par { display: grid; grid-template-columns: 1fr 2.4rem 1fr; gap: .4rem;
border-bottom: 1px solid; padding: .6rem 0; align-items: center; }
.par .signo { text-align: center; opacity: .45; font-size: 1.05rem; }
.par .lado { min-width: 0; }
/* LA MISMA FILA DE TRES COLUMNAS PARA LAS DOS FUENTES. El ancho de la columna
del monto es FIJO, no `auto`: con `auto` cada recuadro la dimensionaba según
su propio contenido y las cifras de dos opciones vecinas terminaban en
verticales distintas — que es exactamente lo que hay que poder comparar. */
.par .lado ul { list-style: none; margin: 0; padding: 0; }
.par .lado ul li { display: grid; grid-template-columns: 5.4rem 1fr 6.4rem; gap: .5rem;
padding: .1rem 0; align-items: baseline; font-size: .88rem; }
.par .lado ul .f { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.par .lado ul .m { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.par .lado ul li.suma { border-top: 1px solid; margin-top: .25rem; padding-top: .25rem; }
.par .lado ul li.suma .d { font-size: .78rem; opacity: .7; }
/* UN LADO SUELTO SE SANGRA COMO SI TUVIERA BOTÓN. Sin esto, las filas que no
viven dentro de un recuadro con acción llegan hasta el borde y sus montos caen
en una vertical distinta de los que sí lo tienen — la mitad de la columna
alineada con la otra mitad no. 7.4rem de columna + .6rem de separación. */
.par > .lado { padding-right: 8rem; }
/* El renglón sin pareja: no es una fila de datos, así que no finge serlo. */
.par .lado.sin .q { font-size: .88rem; }
.par .lado.sin .f { display: block; font-size: .78rem; opacity: .7; }
/* LAS OPACIDADES SE MULTIPLICAN, y eso es lo que hay que impedir acá. Un cruce
hecho se atenúa una vez, al 62 %; adentro la fecha ya venía al 70 % y el botón
al 75 %, así que anidados daban 43 % y 47 % efectivos — reprobado por contraste
en `axe.spec.ts`, y no como detalle: 43 % de la tinta sobre el fondo es texto
que no se lee. Adentro de un cruce hecho, la atenuación es UNA. */
.par.hecho { opacity: .62; }
/* Los selectores repiten `.lado ul` no por gusto: tienen que GANARLE en
especificidad a las reglas de la fila de arriba, que ya llevan tres clases y
un elemento. Escritos más cortos no se aplican y el defecto vuelve callado. */
.par.hecho .lado ul .f,
.par.hecho .lado ul li.suma .d,
.par.hecho .deshacer-min { opacity: 1; }
.par.hecho:hover { opacity: 1; }
.par .candidatas { display: grid; gap: .45rem; }
/* Columna de acción de ancho fijo: es lo que mantiene la vertical de los montos
igual entre un recuadro con «Es éste» y otro con «Son estos 3». */
.par .candidata { border: 1px solid; border-radius: 6px; padding: .45rem .6rem;
display: grid; grid-template-columns: 1fr 7.4rem; gap: .6rem; align-items: center; }
.par .candidata .elegir, .par .candidata .deshacer-min { width: 100%; padding-left: .3rem;
padding-right: .3rem; }
/* ── La confirmación expresa de un prepago declarado (F2, usuario 2026-08-31) ──
ADENTRO DEL RECUADRO Y DEBAJO DE LOS OBJETOS: el recuadro encierra lo que la
decisión consume, y ésta es la única de las tres cifras que no está en ninguna
parte salvo en la palabra del usuario.
LA RAYA DE ARRIBA ES EL ÚNICO ROJO DE LA TARJETA, Y ES DE 1px. Salió a 2px, el
usuario pidió «o más fina, o más clara», y se eligió bajar el grosor y no la
saturación para que el rojo se siga leyendo de un vistazo — sobre dos
alternativas que él mismo declaró equivalentes. */
.par .confirmar-declarado { display: flex; gap: .45rem; align-items: flex-start;
margin: .55rem 0 0; padding: .6rem .6rem 0; font-size: .8rem; line-height: 1.4;
border-top: 1px solid var(--rojo); }
.par .confirmar-declarado input { margin: .2rem 0 0; flex: 0 0 auto; }
/* ── Una negativa contestada adentro del renglón que se apretó (R29) ────────
LA BARRA ES LA MISMA DE LA PANTALLA 8 —es el mismo objeto, y dos formas para
lo mismo es cómo dos pantallas hermanas empiezan a separarse—, pero acá el
recuadro es una grilla de dos columnas, así que hay que decirle que ocupe las
dos. Sin esta línea el aviso cae en la columna de acción, que mide 7,4rem, y
la oración sale como una cinta vertical de una palabra por renglón. Medido
sobre la app real, no deducido.
VA ARRIBA DE TODO Y NO AL PIE, que es lo más cerca del botón que se puede
estar en un recuadro cuyo botón está a la derecha y no debajo: explica por qué
lo que se apretó no hizo nada, y se lee antes de volver a apretarlo. */
.par .candidata > .rechazo-aviso { grid-column: 1 / -1; margin: 0; }
/* Y NO SE ATENÚA CON SU FILA. Un cruce hecho y un descarte van al 62 %, y el
rojo del aviso multiplicado por eso es la misma pérdida de contraste que `axe`
ya reprobó dos veces en esta pantalla. La atenuación dice «esto ya está
resuelto»; el aviso dice justamente lo contrario. */
.par.hecho .rechazo-aviso,
.par.descartado .rechazo-aviso { opacity: 1; }
/* ── La zona de los descartes (R20, usuario 2026-08-18) ──────────────────
AL FINAL DE LA PÁGINA Y FUERA DE `.pares`. La lista de arriba es el trabajo del
paso; un descarte no compite con eso. Raya fina y un respiro grande, no la de
2px que abre `.pares`. */
.zona-descartes, .bloques-decididos { border-top: 1px solid;
margin-top: 2.4rem; background: var(--tinte-suave); padding: 0 .6rem .5rem; }
.zona-descartes .par { border-bottom: none; }
.rotulo-zona { font-size: .82rem; opacity: .7; margin: .55rem 0 .1rem; }
/* LA ATENUACIÓN ES UNA SOLA, y por eso el contenedor NO lleva opacidad: apilarla
sobre el .62 de la fila daría ~.53 efectivo, que es la multiplicación que `axe`
ya reprobó dos veces acá (A10 en `table.subt`, A18 en el grupo secundario). El
gris lo pone la fila, al mismo nivel que un cruce hecho — más claro que eso cae
bajo el contraste mínimo y la fila deja de leerse. */
.par.descartado { opacity: .62; }
.par.descartado .lado ul .f,
.par.descartado .lado ul li.suma .d,
.par.descartado .deshacer-min { opacity: 1; }
.par.descartado:hover { opacity: 1; }
/* MENOS PROTAGONISMO SIN MOVER UNA VERTICAL. Lo que le daba peso de fila operable
eran el recuadro —el mismo que usan los controles activos— y la negrita del
monto. El recuadro se vuelve TRANSPARENTE en vez de desaparecer: quitarlo
correría el contenido .6rem y sacaría los montos del descarte de la vertical que
comparten con cada fila de arriba, que es lo que R16 eligió y con lo que esta
pantalla se lee. */
.zona-descartes .par.descartado .candidata { border-color: transparent; }
.zona-descartes .par.descartado .lado ul .m { font-weight: 400; }
/* El encabezado de columna es lo ÚNICO que nombra la fuente en esta pantalla
—decisión del usuario, 2026-08-14— así que acompaña al desplazar en vez de
perderse arriba. `Canvas` es el fondo del sistema, el mismo que pinta `body`
bajo `color-scheme: light dark`. */
.cabecera-pares { display: grid; grid-template-columns: 1fr 2.4rem 1fr; gap: .4rem;
font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: #44606f;
font-weight: 600; padding: .4rem .5rem; position: sticky; top: 0; background: var(--tinte);
z-index: 1; }
/* ── Pantalla 8 · página 1 de §7.7, «resolvés los sobrantes de tu cartola» ──────
LA DISPOSICIÓN YA ESTÁ ELEGIDA (usuario, 2026-08-15): el trabajo en la cabecera
del panel de la cartola, y Lunch Money en gris sin recuadro. Las otras dos
candidatas —una tercera columna a la derecha, y la fila que se abre en el
lugar— se borraron con sus reglas al cerrar esa ronda.
LA FORMA DE LOS DESTINOS TAMBIÉN ESTÁ ELEGIDA (mismo día): el borrador de lo
que va a quedar en Lunch Money. Las otras dos formas —un botón por destino, y
elegir-y-confirmar— se borraron con sus reglas.
EL ESTADO VA EN EL ENCABEZADO DEL CUADRO Y LA ACCIÓN EN SU BOTÓN, así que dos
de los tres cuadros comparten encabezado a propósito: el estado es el mismo
(«no está en Lunch Money») y las acciones posibles son dos.
La app es deliberadamente blanco y negro hasta la pasada de diseño: el único
color es el rojo de «necesita tu mano» (R7). */
body.sobrantes main { max-width: 84rem; }
.cardinalidad { font-size: .82rem; opacity: .75; margin: .2rem 0 .8rem; max-width: 62rem; }
/* `:not(body)` NO ES DEFENSIVO — ES UNA COLISIÓN REAL, y estuvo rota mientras
nadie miró las otras pantallas. Las pantallas 4, 5 y 6 llevan el patrón de los
dos paneles como CLASE DEL BODY (`body.paneles main`, arriba), y ésta lo lleva
como clase de un div adentro de `main`. Un selector `.paneles` a secas alcanza
las dos cosas: en aquellas convertía el BODY entero en una grilla de dos
columnas, con el encabezado de la app metido en la columna angosta y la tabla
estrujada. Lo encontró fotografiar la pantalla 5 para compararla con ésta.
Que el mismo patrón tenga dos mecanismos es la deuda de fondo —la clase nombra
el patrón, y acá el patrón está escrito dos veces (R2, R13)— y unificarlos es
trabajo del commit que termine esta pantalla, no de este parche. */
.paneles:not(body) { display: grid; gap: 1.1rem; column-gap: 2.25rem; align-items: start;
grid-template-columns: 21rem 1fr; }
.panel-cartola { border: 1px solid; border-radius: 6px; padding: .8rem .9rem; }
.paneles:not(body) h2 { margin: 0 0 .3rem; font-size: .8rem;
text-transform: uppercase; letter-spacing: .06em; line-height: 1.35; }
.paneles:not(body) h2 .conteo { font-weight: 400;
opacity: .6; margin-left: .35rem; text-transform: none; letter-spacing: 0; }
.ayuda { font-size: .74rem; opacity: .72; margin: 0 0 .5rem; line-height: 1.45; }
/* El renglón que declara lo que va a pasar. No es un aviso: es la cuenta de los
desenlaces que la pantalla tiene escritos ahora mismo. */
.manifiesto { font-size: .74rem; margin: 0 0 .6rem; padding: .3rem .5rem;
border: 1px solid; border-radius: 4px;
border-color: color-mix(in srgb, currentColor 30%, transparent); }
.manifiesto b { font-variant-numeric: tabular-nums; }
table.lm { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.lm td { padding: .22rem .3rem; border-bottom: 1px solid;
border-color: color-mix(in srgb, currentColor 12%, transparent); vertical-align: top; }
td.sel { width: 1.4rem; text-align: center; }
td.fecha { width: 3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* LA FECHA ATENUADA ES DE ESTA PANTALLA Y NO DE LA HOJA, y la diferencia la
encontró `axe`. Escrita sin acotar, la regla alcanzaba a `td.fecha` de las
pantallas 3, 4, 5 y 6 —que ya existían y que nadie estaba mirando— y en la 6
se multiplicaba por la de `.fuente-mini`, la fuente escrita bajo la fecha de
una tripleta, hasta caer debajo del contraste mínimo. Es la misma lección que
R17 ya había registrado con `.paneles`: un selector sin acotar choca con lo
que ya está construido, y la suite afirma QUÉ dice una pantalla, jamás cómo se
ve. El cuerpo de la clase es el de la pantalla 8, que es de donde salió. */
body.sobrantes td.fecha { opacity: .7; }
td.monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
width: 6.4rem; }
tr.en-grupo { background: color-mix(in srgb, currentColor 9%, transparent); font-weight: 600; }
tr.coincide { background: color-mix(in srgb, currentColor 9%, transparent); font-weight: 600; }
/* El desenlace habla SÓLO en las excepciones (R10). Escrito en las 60 filas era un
muro que tapaba justo las tres que decían otra cosa — lo encontró la foto de la
ronda anterior, no el razonamiento. */
td.desenlace { width: 11.5rem; font-size: .72rem; opacity: .68; text-align: right;
white-space: nowrap; }
tr.en-grupo td.desenlace { opacity: .85; }
.pide-mano { color: var(--rojo); font-weight: 700; opacity: 1; }
/* LA NEGATIVA — `[AC-refusal-answers-in-place]`, R29 (dónde) y R30 (con qué forma).
UNA SOLA FORMA PARA LOS DOS LUGARES donde puede caer —pegada al control que se
apretó, o al tope del panel cuando ese control desapareció en el mismo
repintado—, porque es el mismo objeto y dos formas para lo mismo es cómo dos
pantallas hermanas empiezan a separarse.
LA BARRA AL COSTADO Y NO EL RECUADRO, elegido por el usuario el 2026-08-23
sobre las tres formas de aviso que esta app ya tenía, renderizadas y
fotografiadas con el mismo encuadre: marca sin meter un borde adentro del
borde del panel, no empuja la lista hacia abajo en una pantalla que vive de la
densidad, y agrupa bien un mensaje de dos renglones — que es lo que varias de
las diez negativas de «la página quedó vieja» van a ocupar.
El rojo es el de «necesita tu mano» (R7) y ningún otro color: toda negativa de
éstas se contesta haciendo algo distinto, que es lo que ese rojo significa. */
.rechazo-aviso { color: var(--rojo); font-weight: 600; font-size: .85rem;
border-left: 3px solid var(--rojo); padding: .45rem 0 .45rem .7rem;
margin: .4rem 0 .7rem; line-height: 1.5; }
/* EL AVISO DE UNA FILA DE TABLA ES UNA FILA (pantallas 5 y 6, A33 commit 6). En
la pantalla 7 el recuadro de una opción es una grilla y el aviso cruza sus dos
columnas; en una tabla el equivalente es un renglón propio a lo ancho,
inmediatamente debajo de la fila que se apretó. Puesto en la columna de acción
—que mide lo que miden sus botones— la oración sale como una cinta vertical de
una palabra por renglón, que es lo que el commit 5 midió sobre la app real.
SIN RAYA PROPIA Y PEGADO ARRIBA: el aviso pertenece a la fila anterior, y el
borde inferior que `table.lm td` le da a cada celda lo separaría de ella
dibujando una fila más. Es la misma decisión que `tr.total td` de R16. */
tr.fila-aviso > td { border-bottom: none; padding-top: 0; }
tr.fila-aviso .rechazo-aviso { margin: 0 0 .3rem; }
/* Y NO HACE FALTA DESATENUARLO, a diferencia de la pantalla 7, y la razón vale
la línea: allá el aviso vive ADENTRO del recuadro atenuado y hereda su
opacidad; acá es un HERMANO de la fila decidida, y `tr.decidida.fuera td` sólo
alcanza a las celdas de esa fila. La forma eligió sola el problema que la
pantalla 7 tuvo que arreglar. */
/* La suma bajo sus sumandos (R16). Común a las tres formas. */
tr.total td { border-bottom: none; padding-top: .45rem; }
tr.total .monto { font-size: 1rem; }
.armado-rotulo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
opacity: .65; margin: .9rem 0 .4rem; font-weight: 600; }
.pie-bloque { font-size: .72rem; opacity: .7; margin: .5rem 0 0; }
/* LOS ENLACES DE ESTA PANTALLA NO SON AZULES, y no es cosmética: la app es blanco
y negro hasta la pasada de diseño, y su único color es el rojo de «necesita tu
mano» (R7). Un azul del navegador mete un segundo color que no significa nada.
Mismo trato que `.tira a`. */
.pie-bloque a, .pie-bloque .enlace, .quitar { color: inherit; }
/* LOS DOS SON BOTONES DESDE QUE MANDAN A ALGÚN LADO, y siguen leyéndose igual:
sacar un movimiento del grupo y deshacer el grupo entero SON escrituras, así
que van en un formulario y no en un enlace — un `href` que muta es la cosa que
un pre-fetch dispara sin que nadie haga clic. Lo que se conserva es la forma
que la ronda eligió: la cruz sin recuadro y la palabra subrayada, que es la
misma decisión que R17 tomó para el deshacer de la tabla de abajo. */
.pie-bloque .enlace, .quitar { font: inherit; background: none; border: 0; padding: 0;
cursor: pointer; }
.pie-bloque .enlace { font-size: inherit; text-decoration: underline;
text-underline-offset: 2px; }
.quitar { text-decoration: none; opacity: .55; line-height: 1; }
.quitar:hover, .quitar:focus-visible { opacity: 1; }
.primario { font-weight: 700; }
.tenue { opacity: .7; }
/* ── LO ELEGIDO · Lunch Money se subordina por MARCO ──────────────────────────
Conserva el ancho, pierde el recuadro y queda sobre un fondo hundido — una nota
al margen, no un panel gemelo. Elegida por el usuario el 2026-08-15 sobre las
otras dos (achicar la columna · atenuarla hasta que sirva), y combinada con la
cabecera de trabajo de más abajo.
EL RESALTADO NECESITA MÁS QUE FONDO ACÁ: el panel ya tiene uno, así que la
transacción cuyo monto coincide se marca con un contorno, que es lo único que
sigue leyéndose sobre un gris. */
.nota-lm { background: color-mix(in srgb, currentColor 5%, transparent);
border-radius: 6px; padding: .8rem .9rem; }
.nota-lm table.lm { font-size: .76rem; }
.nota-lm table.lm td { border-color: color-mix(in srgb, currentColor 9%, transparent); }
/* UNA SOLA SEÑAL PARA UN SOLO HECHO (A51). El contorno decía «esta transacción
tiene el monto de tu grupo» y la negrita y el fondo blanco lo repetían: tres
portadoras para un dato. El usuario lo señaló —«¿por qué ese texto está en
negrita? No debería ir en negrita»— y la plantilla ya había aceptado el caso
que lo vuelve inútil: «resaltaría dos si dos empataran», y con dos resaltadas
el énfasis marca todo y no distingue nada. Queda el contorno, que es el único
que sigue leyéndose sobre el gris del panel. */
.nota-lm tr.coincide { outline: 1px solid currentColor; }
/* ── LO ELEGIDO · el trabajo en la cabecera del panel de la cartola ───────────
Elegida por el usuario el 2026-08-15 sobre las otras dos (una columna propia a
la derecha · la fila que se abre en el lugar). Se queda pegada al tope del panel
al desplazar, así que lo marcado en la fila 3 y lo marcado en la fila 58 se ven
en el mismo lugar. */
.cabecera-trabajo { position: sticky; top: .8rem; z-index: 1; background: var(--papel);
border: 1px solid; border-radius: 6px; padding: .6rem .7rem; margin: 0 0 .6rem;
display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.cabecera-trabajo.vacia { grid-template-columns: 1fr; border-style: dashed;
border-color: color-mix(in srgb, currentColor 35%, transparent); }
.cabecera-trabajo .armado-rotulo { margin-top: 0; }
.cabecera-trabajo .ayuda.sin-marcar { margin: 0; }
.cabecera-trabajo table.sumandos td { border-color: color-mix(in srgb, currentColor 14%, transparent); }
/* ── EL BORRADOR de lo que va a quedar en Lunch Money ─────────────────
Cada destino se muestra como el objeto que produce, con los campos que Lunch
Money va a guardar — o dice que no crea nada. Contesta la causa 3 del
diagnóstico: «crear» era ambiguo porque el objeto creado no aparecía nunca.
LA CATEGORÍA VACÍA SE MUESTRA VACÍA, no con un «la ponés vos» en cada fila:
es la segunda corrección que encontró fotografiar la ronda anterior. */
.destinos-borrador { display: grid; gap: .55rem; }
/* EL RELIEVE, Y EL BOTÓN QUE LO REMATA (A51, opción D sobre tres renderizadas).
El usuario aceptó el fondo claro del área pero pidió lo que ninguna de las tres
primeras opciones traía: «tiene que haber algo de relieve/superficie en los
distintos recuadros sobre los cuales uno se hace la elección. Y el botón dentro
de cada uno de estos recuadros también, de alguna manera, tiene que estar
resaltado». La sombra es corta a propósito: levanta el recuadro del área sin
convertirlo en una tarjeta flotante, que es lo contrario de una pantalla densa.
EL COSTO, ACEPTADO Y ANOTADO: con cuatro o cinco recuadros abiertos son cuatro o
cinco botones sólidos a la vez. Se acepta porque cada uno vive DENTRO de su
recuadro y ninguno compite con la puerta del encabezado, que está en otra
franja — que era el defecto del botón de la tripleta. */
.ficha-destino { border: 1px solid; border-radius: 5px; padding: .55rem .65rem .65rem;
border-color: color-mix(in srgb, currentColor 34%, transparent);
background: var(--papel);
box-shadow: 0 1px 2px rgba(47, 72, 88, .13), 0 3px 8px rgba(47, 72, 88, .07); }
.ficha-destino .armado-rotulo { margin: 0 0 .3rem; }
.ficha-destino table.borrador { width: 100%; border-collapse: collapse; font-size: .76rem;
margin-bottom: .4rem; }
.ficha-destino table.borrador td { padding: .2rem .3rem; vertical-align: top; }
.ficha-destino td.cat { width: 9rem; font-size: .72rem; opacity: .75; }
.ficha-destino .nada { font-size: .74rem; opacity: .7; margin: 0 0 .4rem; font-style: italic; }
.ficha-destino button { width: 100%; text-align: left; background: var(--banda);
color: #fff; border: 1px solid var(--banda); border-radius: 4px;
padding: .42rem .6rem; font-weight: 600; cursor: pointer; }
.ficha-destino button:focus-visible { outline: 2px solid; outline-offset: 1px; }
/* ── ELEGIDO · quién aporta el comercio y la fecha de una fusión ──────────────
El BORRADOR EDITABLE: sus celdas son los controles, así que se elige sobre el
objeto que se va a crear y no en una lista aparte. Elegido por el usuario
sobre tres opciones renderizadas (dos columnas sobre los movimientos · el
borrador editable · dos preguntas escritas); las otras dos se borraron.
`[AC-merge-pick-merchant]` pregunta el comercio SIEMPRE; `[AC-merge-pick-date]`
pregunta la fecha SÓLO si las del grupo difieren, y por eso el `select` de la
fecha existe o no según `pide_fecha`. */
table.borrador.editable select { font: inherit; font-size: .76rem; padding: .05rem .2rem;
background: transparent; color: inherit; border: 1px solid;
border-color: color-mix(in srgb, currentColor 35%, transparent); border-radius: 3px;
max-width: 100%; }
/* ── LO ELEGIDO · el motivo de una exclusión, siempre a la vista ──────────────
Decisión del usuario del 2026-08-16 sobre tres lugares renderizados por la app
real y fotografiados en uno y en dos movimientos: ACÁ · el campo que abre el
botón · el motivo como celda del borrador. El motivo es OBLIGATORIO
—`[AC-exclusion-reason]`, y el CHECK de `linea_cartola` rechaza uno vacío o de
puro espacio—, así que esconderlo detrás de un clic convierte una negativa en
una sorpresa. Y no muere en la base: el reporte durable del cierre publica las
exclusiones con su motivo (`[AC-run-report]`).
EN SU PROPIO RENGLÓN, y eso NO es una preferencia: como cuarta columna el campo
quedaba en dos letras apenas el cuadro se angostaba, y un campo obligatorio que
no se puede leer no es un campo. Lo encontró fotografiar. */
table.borrador.motivos tr.movimiento td { border-bottom: none; padding-bottom: .05rem; }
table.borrador.motivos tr.su-motivo td { padding-top: 0; padding-bottom: .35rem; }
table.borrador.motivos tr.su-motivo input { width: 100%; font: inherit; font-size: .74rem;
padding: .12rem .3rem; background: transparent; color: inherit; border: 1px solid;
border-color: color-mix(in srgb, currentColor 35%, transparent); border-radius: 3px; }
/* ── LO ELEGIDO · el «marcar todos», en el encabezado de su columna ───────────
Decisión del usuario del 2026-08-16 sobre tres lugares renderizados por la app
real y fotografiados: ACÁ · en el renglón que ya cuenta · en la cabecera de
trabajo. Gana el único donde el control está encima de lo que gobierna. El
encabezado no existía y existe sólo para esto — las otras cuatro columnas se
leen solas. */
table.lm.con-encabezado thead th { font-size: .7rem; text-transform: uppercase;
letter-spacing: .06em; font-weight: 600; opacity: .7; padding: .2rem .4rem .3rem; }
table.lm.con-encabezado thead th.sel { width: 1.6rem; }
/* El anillo de foco de los campos del motivo. Sin esto es el AZUL del navegador,
que mete un segundo color en una app que es blanco y negro hasta la pasada de
diseño y cuyo único color es el rojo de «necesita tu mano» (R7). Mismo trato
que `.campo input`, que ya lo tenía. */
table.borrador.motivos .su-motivo input:focus-visible { outline: 2px solid;
outline-offset: 1px; }
/* ── LO ELEGIDO · los que resolviste acá bajan a su propia tabla ──────────────
Decisión del usuario del 2026-08-16 sobre tres lugares renderizados por la app
real y fotografiados a mitad del trabajo: desaparecen (lo de hoy) · se quedan
en su fecha en gris · ACÁ. Departe a sabiendas de R11 —donde la fila
respondida se queda en su fecha— porque el trabajo es distinto: en la pantalla
5 cada fila se contesta sola y no hay nada que recorrer, y acá el trabajo ES
recorrer y marcar para armar un grupo, así que filas resueltas intercaladas
estorban la operación misma. Palabras del usuario sobre la foto: «hace muy
confusa la exploración para identificar qué me falta procesar y qué está ya
procesado». */
h3.rotulo-resueltas { font-size: .82rem; font-weight: 600; margin: 1.1rem 0 .3rem;
display: flex; align-items: baseline; gap: .4rem; }
table.lm.resueltas { opacity: .78; }
/* La celda vacía de la izquierda tiene que MEDIR lo mismo que la columna de las
casillas de arriba: sin esto las dos tablas arrancan en verticales distintas y
las fechas de una no se leen contra las de la otra. Lo encontró la foto, dos
veces — el ancho lo daba el `thead` que esta tabla no tiene. */
table.lm.resueltas td.sel { width: 1.6rem; }
/* ── LO ELEGIDO · lo ya resuelto pesa menos POR TAMAÑO ────────────────────────
Decisión del usuario del 2026-08-16 sobre tres maneras renderizadas y
fotografiadas: ACÁ (achicarla) · plegarla · sacarla del recuadro de trabajo.
Lo que las separó no fue cuánto ocupan sino qué le cobran a DESHACER — esa
tabla es el único lugar de la pantalla desde donde se puede volver atrás una
decisión, así que plegarla escondía también la manera de corregirse. Y la
jerarquía queda dicha por el tamaño, que es lo primero que el ojo mide. */
h3.rotulo-resueltas.menor { font-size: .72rem; font-weight: 500; opacity: .6;
margin-top: .9rem; }
table.lm.resueltas.menor { font-size: .68rem; opacity: .55; }
table.lm.resueltas.menor td { padding-top: .12rem; padding-bottom: .12rem; }
/* LA FECHA NO SE ATENÚA DOS VECES, y esto lo encontró `axe` en el commit que
puso la pantalla viva. La columna de la fecha lleva su propio `opacity: .7`
para toda tabla de la app, pensada para una tabla a opacidad plena; acá se
multiplica por el .55 de la tabla entera y da .385, que sobre este cuerpo de
letra queda por debajo del contraste mínimo. La decisión de la ronda es que
ESTA TABLA pese menos —una sola atenuación, la de la tabla—, así que la que
sobra es la de la celda. Ninguna otra pantalla cambia. */
table.lm.resueltas.menor td.fecha { opacity: 1; }
/* ── LO ELEGIDO · el abono y el pago se dicen con una etiqueta al comercio ────
Decisión del usuario del 2026-08-16 sobre tres maneras renderizadas: ACÁ ·
una oración arriba y el signo del monto · la tabla cortada por grupos.
NO HAY REGLA PROPIA, y eso es el punto: usa `table.lm .pista` tal cual, que es
el control que R11 registró para la pista de Todoist de la pantalla 5. Los dos
ajustes que esta pantalla pidió —más chica, alineada a la derecha— se
promovieron al control mismo por decisión del usuario, así que las dos
pantallas se leen igual y no queda ningún modificador que aprender. */
/* ── LO ELEGIDO · lo que hiciste con una fila resuelta asoma al acercarte ─────
Decisión del usuario del 2026-08-16 sobre tres maneras renderizadas por la app
real y fotografiadas: la frase al lado en columna propia · la frase debajo en
su propio renglón · ACÁ. Las reglas de las dos descartadas se borraron con la
ronda, como las de la ronda del peso.
LO QUE GANA ES LA TABLA QUIETA: la lista de lo resuelto queda idéntica a la de
trabajo —mismas cuatro columnas, mismos anchos, monto bajo monto— y no crece
ni de ancho ni de alto por decir lo que dice. Las otras dos pagaban una de las
dos: la de al lado corría los montos, la de abajo casi duplicaba los renglones.
FUERA DEL FLUJO, Y NO ES UN TRUCO: si lo que asoma ocupara lugar mientras está
escondido, la columna del monto se correría igual que en la opción descartada y
esta manera perdería justamente lo que la distingue.
Y LO QUE CUESTA ESTÁ ACEPTADO: el motivo escrito de una exclusión NO entra acá
—lo que asoma tiene que caber en un renglón sin tapar el comercio— y sigue
viviendo en el cuadro de la izquierda mientras se escribe y en el informe del
cierre (`[AC-run-report]`). */
table.lm.resueltas .accion { width: 6rem; }
/* UNA OPERACIÓN ES UN `tbody`, Y ESO ES LO QUE HACE POSIBLE LA FUSIÓN. Sus dos
filas son UNA decisión —`[AC-merge-effects]` prohíbe darle destino a una sola
de las fusionadas, así que deshacer media fusión no quiere decir nada—, y
`tbody:hover` es lo único que enciende las dos acercándose a cualquiera de
ellas. Con `tr:hover` haría falta JavaScript para lo mismo, y la regla de la
casa es que el cliente tenga un solo archivo escrito a mano. */
table.lm.resueltas tbody.varias tr:not(:last-child) td { border-bottom: 0; }
table.lm.resueltas tbody:hover td, table.lm.resueltas tbody.encima td {
background: color-mix(in srgb, currentColor 7%, Canvas); }
/* LO QUE ASOMA SE CENTRA EN EL GRUPO ENTERO, Y ESO EXIGIÓ DOS COSAS (usuario,
2026-08-16, sobre la primera versión, que lo dejaba al pie del bloque).
· UNA CELDA PROPIA QUE ABARCA EL GRUPO. Es una celda sin ancho ni relleno,
entre el comercio y el monto, con `rowspan` de tantas filas como movimientos
archivó la operación. Centrar contra ella es exacto para dos filas y para
cinco; centrar contra la primera fila, o contra el borde entre dos, sólo
acertaba con exactamente dos. No agrega columna visible: mide cero.
· `border-collapse: separate`. Con los bordes colapsados —lo que hereda de la
hoja— una celda RECORTA lo que se le sale, y la frase salía partida al
medio; lo encontró fotografiar. Con `border-spacing: 0` el dibujo es el
mismo, cada celda dibuja su propio borde de abajo y quedan pegadas. */
table.lm.resueltas { border-collapse: separate; border-spacing: 0; }
table.lm.resueltas td.marco { width: 0; padding: 0; position: relative; }
table.lm.resueltas .asoma { position: absolute; right: 0; top: 50%;
transform: translateY(-50%); display: flex; align-items: center; gap: .55rem;
white-space: nowrap; padding-left: 1.4rem; opacity: 0; pointer-events: none;
background: linear-gradient(to right, transparent,
color-mix(in srgb, currentColor 7%, Canvas) 1.4rem); }
table.lm.resueltas tbody:hover .asoma, table.lm.resueltas tbody:focus-within .asoma,
table.lm.resueltas tbody.encima .asoma { opacity: 1; pointer-events: auto; }
/* ── LO ELEGIDO · el deshacer es la palabra sola, subrayada y sin recuadro ─────
Decisión del usuario del 2026-08-16 sobre tres formas renderizadas: ACÁ · sólo
una flecha de volver, sin palabra · la palabra que se recuadra al apuntarla.
Lo invasivo era el recuadro y no la palabra: seis recuadros permanentes en una
tabla que la ronda anterior decidió que pesara MENOS la volvían a cargar. */
table.lm.resueltas .volver { font: inherit; color: inherit; cursor: pointer;
background: none; border: 0; padding: 0; opacity: .8;
text-decoration: underline; text-underline-offset: 2px; }
table.lm.resueltas .volver:focus-visible { outline: 2px solid; outline-offset: 2px; }
/* ── §7.7.a · «Lo que quedó en Lunch Money» — la página 2 de la resolución ────
Elegida por el usuario el 2026-08-16 sobre DOS vueltas de tres plantillas
reales servidas por esta app y fotografiadas sobre corridas sembradas: la
instrucción vive en un panel angosto FIJO a la izquierda —contra ponerla
arriba en una columna sola y contra plegarla en la cabecera de la lista—, y
ese panel NO lleva botones, porque el que avanza estuvo siempre arriba a la
derecha (R9) y ahí se queda.
ES UNA GRILLA PROPIA Y NO `.paneles`, y la diferencia no es cosmética: aquel
patrón significa «acá se comparan las dos fuentes» (R2, `[AC-two-panes-fixed-order]`)
y esta pantalla no compara nada — la columna angosta es instrucción. Reusar la
clase habría hecho que la próxima pantalla heredara el significado equivocado,
que es exactamente lo que R17 pagó con `.paneles` sin acotar. */
body.sobrantes-lm main { max-width: 84rem; }
.lm-dos-columnas { display: grid; gap: 1.1rem; align-items: start;
grid-template-columns: 23rem 1fr; }
.guia-lm { position: sticky; top: .8rem; border: 1px solid; border-radius: 6px;
padding: .85rem .95rem;
border-color: color-mix(in srgb, currentColor 30%, transparent); }
.guia-lm h2 { margin: 0 0 .5rem; font-size: .74rem; text-transform: uppercase;
letter-spacing: .06em; opacity: .7; }
.guia-lm p { margin: 0 0 .5rem; font-size: .78rem; line-height: 1.5; }
/* Las tres formas del problema van EN EL RENGLÓN y no en viñetas: como lista
ocupaban cuatro renglones y un margen propio para tres frases de cuatro
palabras, y acortar este panel fue una corrección explícita del usuario. */
.guia-lm .formas { opacity: .85; }
.guia-lm .ante-la-duda { border-left: 2px solid; padding-left: .6rem;
border-color: color-mix(in srgb, currentColor 35%, transparent); }
/* El nombre de la etiqueta se muestra COMO SE VE EN LUNCH MONEY —en su tipografía
de dato, no traducido—, que es la regla de nombrar cada objeto con su fuente.
Y NO SE ACOTA A NINGÚN CONTENEDOR, medido: mientras esta regla decía
`.guia-lm .etiqueta-lm`, la misma frase mudada a un rótulo de tabla salía en
tipografía de prosa, y eso pasó en DOS de las tres candidatas de R19 sin que
ninguna prueba lo dijera. Cómo se ve un objeto es del objeto y no del lugar
donde se lo nombra. Tercer selector acotado que muerde en este proyecto
(R17 con `.paneles`, R18 con el encabezado de tabla, R19 con éste). */
.etiqueta-lm { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .74rem; padding: 0 .25rem; border: 1px solid; border-radius: 3px;
border-color: color-mix(in srgb, currentColor 35%, transparent); }
.cuenta-lm { margin: .9rem 0 0; padding: .6rem 0 0; border-top: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent); }
.cuenta-lm dl { margin: 0; display: grid; grid-template-columns: 2.6rem 1fr;
gap: .15rem .5rem; font-size: .78rem; }
.cuenta-lm dt { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right;
font-size: .95rem; }
.cuenta-lm dd { margin: 0; opacity: .8; align-self: center; }
.cuenta-lm .salieron { font-size: .72rem; opacity: .65; margin: .55rem 0 0; }
.guia-lm .al-seguir { font-size: .76rem; margin: .6rem 0 0; padding: .4rem .5rem;
border: 1px solid; border-radius: 4px;
border-color: color-mix(in srgb, currentColor 30%, transparent); }
.guia-lm .al-seguir b { font-variant-numeric: tabular-nums; }
.lista-lm { border: 1px solid; border-radius: 6px; padding: .7rem .9rem;
border-color: color-mix(in srgb, currentColor 30%, transparent); }
.lista-lm table.lm { font-size: .8rem; }
/* EL ENCABEZADO SE ALINEA CON SU COLUMNA, Y ESO SE MIDE, NO SE DEDUCE.
Corrección del usuario sobre la ronda: el rótulo no coincidía con lo de abajo.
La causa medida —cajas de la app real, no una lectura de la foto— fue de
ESPECIFICIDAD y no de valores: `table.lm th` de la pantalla 5 vale (0,1,2) y
`.lista-lm th` vale (0,1,1), así que la hoja vieja ganaba y dejaba el
encabezado con 8,8 px de relleno contra los 4,8 de la fila. Cuatro píxeles
exactos, en cada columna, en la dirección de su alineación. Por eso cada regla
de celda nombra `.lista-lm table.lm`: la columna se alinea entera o no se
alinea. Es la lección de R17 sobre `.paneles` en el sentido inverso — un
selector viejo sin acotar que le gana al nuevo.
Y EL RÓTULO DE LA DERECHA NO LLEVA COMPENSACIÓN, medido también. `letter-spacing`
agrega el espacio después de la última letra, así que la corrección obvia es
descontarlo del relleno — y descontarlo empeoró el borde en 0,65 px, porque el
navegador ya no cuenta ese espacio al medir el texto. Queda escrito para que
nadie lo vuelva a agregar de memoria. */
.lista-lm table.lm .sel { width: 1.8rem; text-align: center; padding-right: 0; }
.lista-lm table.lm .fecha { width: 4rem; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.lista-lm table.lm .cat { width: 12rem; }
.lista-lm table.lm .monto { width: 7rem; text-align: right; white-space: nowrap;
font-variant-numeric: tabular-nums; }
.lista-lm table.lm th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
opacity: .6; font-weight: 600; padding: 0 .35rem .3rem; border-bottom: 1px solid;
border-color: color-mix(in srgb, currentColor 25%, transparent); }
.lista-lm table.lm td { padding: .26rem .35rem; border-bottom: 1px solid;
border-color: color-mix(in srgb, currentColor 12%, transparent); }
.lista-lm table.lm td.cat { opacity: .72; }
.lista-lm table.lm tr.senalada { background: color-mix(in srgb, currentColor 9%, transparent);
font-weight: 600; }
/* La casilla de un paso ya hecho se ve apagada y no desaparece: la consulta de
sólo lectura tiene que mostrar QUÉ se contestó (regla 4 de navegación). */
.lista-lm input[disabled] { opacity: .55; }
.lista-lm input:focus-visible { outline: 2px solid; outline-offset: 1px; }
/* El rótulo que sólo existe para quien no ve la tabla: la columna de casillas no
puede llevar un encabezado escrito sin agregar una palabra que nadie necesita
leer, y no puede quedar sin nombre sin dejar la columna anónima. */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; }
/* ── §7.7.a YA CONTESTADA · la consulta de sólo lectura ───────────────────────
Elegida por el usuario el 2026-08-17 (R19) sobre una vuelta de tres
plantillas reales, contra conservar el mismo orden con el panel hablando en
pasado y contra retirar el panel. LA RESPUESTA ES LO QUE ORDENA LA PÁGINA:
las señaladas suben a su tabla rotulada y contada, las del próximo período
quedan abajo en la suya. Es R17 —lo resuelto va a su propia tabla— aplicada a
una consulta, y por eso sube en vez de bajar: allá estorbaba el recorrido,
acá es lo que se vino a ver.
ES LA PRIMERA VARIANTE DE SÓLO LECTURA DE LA APP. Por qué recién ahora, y por
qué la regla 4 no la había pedido en dieciocho pantallas, está en R19. */
body.sobrantes-lm.consultada .lm-dos-columnas { grid-template-columns: 20rem 1fr; }
/* EL PANEL DE UNA PANTALLA CONSULTADA NO SE PEGA, y la causa se midió antes de
escribir esto: el vacío que el usuario marcó no era del panel corto, era de
`position: sticky`. Un bloque de tres renglones pinchado arriba deja ~700 px
de nada A LA VISTA durante todo el recorrido de la lista; suelto, se va con
el scroll y el vacío se va con él. Pegarlo existía para que el criterio y la
cuenta no se fueran de pantalla MIENTRAS SE MARCA fila por fila — acá no se
marca nada. */
body.sobrantes-lm.consultada .guia-lm { position: static; }
.guia-lm .contestado-en { font-size: .72rem; opacity: .65; margin: .6rem 0 0; }
/* LA CUENTA VIVE EN EL RÓTULO DE SU GRUPO, no en el panel: es donde está lo que
cuenta, y el mismo número en dos lugares es uno que puede quedar viejo. */
.grupo-lm + .grupo-lm { margin-top: 1.1rem; }
.grupo-lm > h3 { margin: 0 0 .45rem; font-size: .74rem; font-weight: 600; line-height: 1.45; }
.grupo-lm > h3 .n { font-variant-numeric: tabular-nums; font-size: .95rem; }
.grupo-lm > h3 .porque { display: block; font-weight: 400; opacity: .7; font-size: .72rem; }
/* EL GRUPO QUE NO SE VINO A VER NO SE ATENÚA, y esto es una corrección medida,
no una omisión. La primera versión le puso `opacity: .78` al grupo entero —la
idea de R17 de que lo secundario pesa menos— y `axe` lo rechazó: el
encabezado de tabla YA vale .6, así que el grupo lo multiplicaba a .468 y el
contraste de las cuatro columnas caía bajo el umbral. Es la segunda vez que
una atenuación doble muerde en esta misma pantalla (la primera fue la fecha,
también encontrada por `axe`).
Y AL SACARLA NO SE PERDIÓ LA DISTINCIÓN, que es por qué la corrección es
quitar y no ajustar: las señaladas ya se leen más pesadas solas —todas sus
filas llevan fondo y negrita, ninguna de éstas lo lleva— y cada grupo dice su
cuenta en su rótulo. La atenuación era redundante antes de ser inaccesible. */
/* §7.7.c · los descartes de la última revisión — R20 ADOPTADA (ver la plantilla).
Reusa `.zona-descartes` y `.rotulo-zona` de la pantalla 7, que es el punto: la
regla dice «raya fina y un respiro grande», y escribir una segunda declaración
con los mismos valores es cómo dos pantallas hermanas empiezan a separarse.
Lo único propio es el signo, porque allá vive en una columna de 2,4rem y acá en
la de las casillas. EL PESO SALE DE LA NEGRITA, NUNCA DEL COLOR, y la
atenuación es la misma .62 que ya pasó `axe` — más claro cae bajo 4,5:1. */
/* LA ATENUACIÓN ES UNA SOLA, Y ACÁ SE APRENDIÓ COBRÁNDOLO. El primer intento
puso .62 sobre `table.lm.resueltas.menor`, que ya trae .55: el producto da .34
y `axe` lo reprobó por contraste — que es la MISMA multiplicación que R20
documenta haber pagado dos veces (A10 en `table.subt`, A18 en el grupo
secundario) y que igual se volvió a cometer leyendo la regla. Queda una sola
declaración, al valor que R20 fijó, y las filas no llevan la suya encima. */
table.lm.resueltas.descartes { opacity: .62; font-size: .68rem; }
table.lm.resueltas.descartes tbody { opacity: 1; }
table.lm.resueltas.descartes td { padding-top: .12rem; padding-bottom: .12rem; }
/* Y LA CELDA DE LA FECHA TAMBIÉN SUELTA LA SUYA, por lo mismo y por segunda vez
en este archivo: `body.sobrantes td.fecha` trae .7, que multiplicado por la
atenuación de la tabla vuelve a caer bajo el mínimo. La tabla hermana lo
resolvió así tres reglas más arriba; ésta lo repite porque el selector de allá
nombra `.menor`, que ésta deliberadamente no lleva. */
table.lm.resueltas.descartes td.fecha { opacity: 1; }
table.lm.resueltas.descartes tbody:hover, table.lm.resueltas.descartes tbody:focus-within {
opacity: 1; }
table.descartes .signo { text-align: center; }
/* El peso se saca de la NEGRITA, nunca del color (R20). */
table.descartes .monto { font-weight: 400; }
/* ── La espera y la verificación (§7.8 y §7.9, A20) ────────────────────────
HEREDA Y NO REDECLARA: `body.paneles` es R2 —el panel angosto a la izquierda
con lo que no cambia mientras trabajás, la columna ancha con el trabajo—,
`table.lm` es R5, `.conteos` y `.nota` vienen del panel de la pantalla 5,
`.carta-fallo` es R8 con el color de R21, y `.aviso` es la forma que R10 le
dio a un aviso pegado al texto que lo explica. Lo de acá es sólo lo que estas
dos pantallas agregan.
LA FORMA DEL PLEGADO DE COINCIDENCIAS TODAVÍA NO SE VOTÓ. Ninguna de las 23
rondas decidió cómo se ve una comprobación plegada que conserva su lugar
aunque no encuentre nada; esto es el plegado nativo que la franja ya usa para
su desglose, puesto para que haya una pantalla terminada que fotografiar. */
/* EL RÓTULO DE LA FRANJA (disposición B5). Va adentro del desglose, no en la
banda: la banda plegada no admite una tercera cifra ni un renglón más. Pesa
menos que los términos porque no es un dato, es de qué hablan los datos. */
.franja-fuente { margin: 0 0 .5rem; font-size: .74rem; opacity: .7; }
/* Los dos veredictos del panel: una fila por comprobación, y NUNCA una sola
fila que las resuma (AC-verify-granular-report). La marca lleva el peso; el
rojo es el de «necesita tu mano» (R7) y el verde no tiene color propio —
que algo esté bien no necesita gritar. */
.veredictos { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .84rem; }
.veredictos li { display: flex; justify-content: space-between; gap: .6rem;
align-items: baseline; padding: .3rem 0; border-bottom: 1px solid; }
.veredictos li:last-child { border-bottom: 0; }
.veredictos .marca { font-weight: 700; font-size: 1rem; }
.veredictos li[data-veredicto="rojo"] { color: var(--rojo); font-weight: 650; }
/* Cada resultado es un bloque con su propio aire: separados de verdad, porque
dos resultados pegados se leen como uno con dos renglones. */
.resultado { margin: 0 0 1.6rem; }
.resultado h2.rotulo { margin-top: 0; }
.resultado[data-veredicto="rojo"] > h2.rotulo { color: var(--rojo); }
/* EL AVISO DE ÉXITO NO USA EL ROJO NI FINGE URGENCIA: es el desenlace bueno, y
lo único que tiene que hacer es decir que ya se puede pagar. */
.aviso-exito, .aviso-vuelta { display: block; margin-bottom: 1.1rem;
padding: .7rem .85rem; font-size: .85rem; line-height: 1.5; }
.aviso-exito p, .aviso-vuelta p { margin: 0; }
/* `.aviso-nada-revertido` SE FUE CON SU RECUADRO (usuario, 2026-08-20): la
verificación ya no declara que no revirtió nada. El aviso de la vuelta a la
espera sí sobrevive —ahí la frase tiene destinatario: llegaste rebotado— y
conserva el borde lateral con el tono de R21, la app contando qué pasó, no el
rojo de corregir: lo que hay que corregir está listado abajo, fila por fila. */
.aviso-vuelta { border-left-width: 3px; border-left-color: var(--ambar-borde); }
/* El plegado de coincidencias. `` nativo, cero listeners, igual que el
desglose de la franja — y el total en el resumen, que es lo que
AC-verify-candidates-complete obliga a declarar sin abrirlo. */
.coincidencias { margin: .4rem 0 0; font-size: .85rem; }
.coincidencias > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.coincidencias > summary:focus-visible { outline: 2px solid; outline-offset: 1px; }
.coincidencias table.lm { margin-top: .5rem; }
/* Qué le falta a una fila, en la fila. Sin recuadro y sin color: el rojo del
resultado ya dijo que hay trabajo, y repetirlo por celda acusa a un campo. */
table.lm .falta { font-size: .78rem; opacity: .85; white-space: nowrap; }
/* Lo ya completo pesa menos, con UNA sola atenuación (R20: dos encimadas caen
bajo el mínimo de contraste, y este archivo ya lo pagó dos veces). */
table.lm.hechas { opacity: .68; }
table.lm.hechas tbody:hover, table.lm.hechas tbody:focus-within { opacity: 1; }
/* ── §7.9 · la verificación, diseño base elegido por el usuario el 2026-08-20 ── */
body.verificacion .ficha { border: 1px solid; border-radius: 6px; margin: 0 0 1.1rem;
overflow: hidden; }
body.verificacion .ficha-cab { display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem; padding: .5rem .8rem; border-bottom: 1px solid;
background: color-mix(in srgb, currentColor 5%, transparent); }
body.verificacion .ficha-cab h2 { margin: 0; font-size: .8rem; text-transform: uppercase;
letter-spacing: .07em; opacity: .8; }
body.verificacion .ficha-cab .estado { font-size: .85rem; font-weight: 650; white-space: nowrap; }
body.verificacion .ficha-cab .marca { font-size: 1rem; margin-left: .35rem; }
body.verificacion .ficha-cuerpo { padding: .7rem .8rem .2rem; }
body.verificacion .ficha-cuerpo .nota:first-child { margin-top: 0; }
body.verificacion .ficha[data-veredicto="rojo"] { border-left: 3px solid var(--rojo); }
body.verificacion .ficha[data-veredicto="rojo"] .ficha-cab .estado { color: var(--rojo); }
body.verificacion .ficha table.lm { width: 100%; margin-bottom: .7rem; }
/* El conjunto de coincidencias ya no se pliega: su rótulo se lee como los de
las fichas, no como un control que se abre. */
body.verificacion .rotulo-coincidencias { margin: .9rem 0 .35rem; font-size: .8rem;
text-transform: uppercase; letter-spacing: .07em; opacity: .7; font-weight: 600; }
body.verificacion .coincidencias.abierta { margin: 0; font-size: .85rem; }
.bajada { font-size: .9rem; line-height: 1.6; margin: 0 0 1.1rem; max-width: 88ch; }
body.verificacion .linea-diferencia { font-size: .9rem; line-height: 1.6; margin: 0 0 .6rem; }
/* De qué está hecha la cifra: pesa menos que la cifra, porque no es el dato. */
body.verificacion .de-que { opacity: .72; font-size: .84em; }
/* Las dos columnas de valor: a la izquierda bajo su encabezado, y con ancho
propio para que «se guardó» y «dice ahora» queden una al lado de la otra en
vez de repartidas por todo el ancho de la ficha. */
body.verificacion table.lm td.valor, body.verificacion table.lm th.valor {
text-align: left; width: 9rem; }
/* La palabra sola, subrayada y sin recuadro: la misma forma que el usuario
eligió para el deshacer el 2026-08-16. */
/* ── el panel resume las DOS comprobaciones ─────────────────────── */
body.verificacion .resumen-cuenta { list-style: none; margin: 0; padding: 0;
font-size: .82rem; font-variant-numeric: tabular-nums; }
body.verificacion .resumen-cuenta li { display: flex; justify-content: space-between;
align-items: baseline; gap: .5rem; padding: .3rem 0;
border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
body.verificacion .resumen-cuenta li:last-child { border-bottom: 0; }
body.verificacion .resumen-cuenta .que { flex: 1; }
body.verificacion .resumen-cuenta .cuanto { white-space: nowrap; font-weight: 600; }
body.verificacion .resumen-cuenta .remate { border-top: 1px solid; border-bottom: 0;
margin-top: .15rem; padding-top: .45rem; }
/* R54 · una cifra que EXPLICA a otra se subordina a ella: sangrada, más chica
y atenuada, con su signo. Un renglón del mismo peso afirmaría que es un
término más de la suma, y el monto ya está adentro del renglón de arriba.
La última regla le saca la raya al renglón padre para que las dos se lean
como una sola cuenta. */
body.verificacion .resumen-cuenta li.renglon-hijo { padding: .15rem 0 .3rem 1rem;
font-size: .76rem; opacity: .72; border-bottom: 1px solid
color-mix(in srgb, currentColor 12%, transparent); }
body.verificacion .resumen-cuenta li.renglon-hijo .cuanto { font-weight: 500; }
body.verificacion .resumen-cuenta li:has(+ li.renglon-hijo) { border-bottom: 0; padding-bottom: .1rem; }
body.verificacion .resumen-cuenta li.renglon-hijo .entero { white-space: nowrap; }
body.verificacion .resumen-cuenta .remate .cuanto { font-size: .95rem; font-weight: 700; }
body.verificacion .rojo .cuanto, body.verificacion .cuanto.rojo { color: var(--rojo); }
body.verificacion .verde .cuanto { color: var(--verde); }
body.verificacion .sello { font-size: .72rem; opacity: .6; margin: .9rem 0 0; }
/* el marcador */
body.verificacion .marcador { margin: 0; font-size: 1.75rem; line-height: 1.1; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
body.verificacion .marcador.rojo { color: var(--rojo); }
body.verificacion .marcador.verde { color: var(--verde); }
body.verificacion .marcador .de { font-size: .95rem; font-weight: 500; opacity: .65;
margin-left: .35rem; letter-spacing: 0; }
body.verificacion .marcador-pie { margin: .1rem 0 .45rem; font-size: .8rem; opacity: .75; }
body.verificacion .marcador-apoyo { margin: 0; font-size: .76rem; opacity: .7; line-height: 1.5; }
body.verificacion .marcador-apoyo.rojo { color: var(--rojo); opacity: 1; }
/* la barra */
body.verificacion .barra-cifra { margin: 0 0 .35rem; font-size: .95rem; font-weight: 650;
font-variant-numeric: tabular-nums; }
body.verificacion .barra { height: .5rem; border-radius: 3px; overflow: hidden;
background: color-mix(in srgb, currentColor 14%, transparent); }
body.verificacion .barra span { display: block; height: 100%; background: var(--verde); }
body.verificacion .barra-pie { margin: .35rem 0 0; font-size: .78rem; opacity: .75; }
body.verificacion .barra-pie.rojo { color: var(--rojo); opacity: 1; }
body.verificacion .reverificar.apenas { gap: .45rem; margin-top: 1rem; }
body.verificacion .reverificar.apenas .volver { font: inherit; color: inherit; cursor: pointer;
background: none; border: 0; padding: 0; opacity: .8;
text-decoration: underline; text-underline-offset: 2px; }
body.verificacion .reverificar.apenas .volver:focus-visible { outline: 2px solid; outline-offset: 2px; }
/* La causa es el hallazgo de la pantalla, así que se lee como texto y no como
nota al pie. Sin recuadro propio: ya está adentro de la ficha del cuadre. */
body.verificacion .causa { font-size: .85rem; line-height: 1.55; margin: 0 0 .5rem; }
body.verificacion .causa p { margin: 0 0 .5rem; }
body.verificacion .causa .que-hacer { opacity: .8; }
body.verificacion .causa ul { margin: .35rem 0 .5rem; padding-left: 1.1rem; }
body.verificacion .causa li { margin: 0 0 .25rem; }
/* SE LEE CON EL CUERPO DE SU PÁRRAFO (A51). Estaba a 1.25rem dentro de un
párrafo de .9rem —139 % del texto que la rodea— y el usuario lo midió a ojo:
«es demasiado grande». La negrita y el color siguen: lo que sobraba era el
tamaño, no el énfasis. */
body.verificacion .dif-grande { font-size: inherit; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--rojo); }
/* Volver a verificar no es la puerta del encabezado: no avanza, repite. Por eso
vive al pie de los resultados que re-corre y no lleva el ancho completo. */
.reverificar { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 0; }
.reverificar .primario { width: auto; padding: .5rem 1.4rem; }
.reverificar .nota { margin: 0; }
/* El recuadro de advertencia de §7.8, en la columna de trabajo: la forma de
`.aviso` con el canto lateral del tono de R21 —la app contando algo que
conviene saber— y no el rojo de «corregí esto», que está en la lista de abajo. */
.aviso-etiquetas-caja { border-left-width: 3px; border-left-color: var(--ambar-borde);
margin: 0 0 1.1rem; padding: .7rem .85rem; line-height: 1.5; }
.aviso-etiquetas-caja p { margin: 0; }
.aviso-etiquetas-caja p + p { margin-top: .45rem; }
/* ── §7.10 · la pantalla del cierre ─────────────────────────────────────────
La forma la eligió el usuario el 2026-08-21 sobre tres pantallas enteras
fotografiadas (R26): los cuatro pasos a la vista, cada uno en su ficha. Nada
de acá inventa un componente nuevo — la ficha es la de la verificación y
`button.continuar` ya existía. Las reglas de las dos formas descartadas se
fueron con ellas. */
/* La ficha apagada de la forma A: puesta, legible y visiblemente inerte. Una
sola atenuación (R20), y el botón deshabilitado no la duplica. */
body.cierre .ficha { border: 1px solid; border-radius: 6px; margin: 0 0 1.1rem; overflow: hidden; }
/* LA BANDA DE TÍTULO LLEVA TINTE, y es la MISMA receta de `body.verificacion
.ficha-cab` — no una parecida. Las dos pantallas usan la misma palabra para la
misma cosa (`.ficha` con su `.ficha-cab`) y se ven una detrás de la otra en el
recorrido; que una tuviera fondo y la otra no era una divergencia entre
hermanas de las que A38 cataloga. Corrección del usuario sobre la galería del
2026-08-27: «que tengan fondo gris como en la pantalla anterior». */
body.cierre .ficha-cab { display: flex; align-items: baseline; justify-content: space-between;
gap: .8rem; padding: .5rem .8rem; border-bottom: 1px solid;
background: color-mix(in srgb, currentColor 5%, transparent); }
body.cierre .ficha-cab h2 { margin: 0; font-size: .8rem; text-transform: uppercase;
letter-spacing: .05em; }
body.cierre .ficha-cab .estado { font-size: .85rem; font-weight: 650; white-space: nowrap; }
body.cierre .ficha-cuerpo { padding: .7rem .8rem .8rem; }
body.cierre .ficha-cuerpo p { margin: 0 0 .55rem; font-size: .88rem; line-height: 1.55; }
body.cierre .ficha-cuerpo table.lm { width: 100%; margin-bottom: .7rem; }
/* UN PASO QUE TODAVÍA NO TOCA SE ATENÚA UNA SOLA VEZ, y al piso medido.
Estaba en `.55` y los hijos que traen la suya —`.nota`, en `.7`— la
multiplicaban: `.55 × .7` da `.385` y `axe` lo reprueba por contraste. Es la
TERCERA vez que este defecto aparece acá (R19 con la fecha, R31 con la zona de
lo decidido), y la salida es la misma de las otras dos: la atenuación se
aplica una vez, al recuadro, con los hijos que ya traían la suya puestos en 1.
El piso es `.62`; por debajo un glifo negro sobre blanco cae bajo 4,5:1. */
body.cierre .ficha[data-paso="espera"] { opacity: .62; }
body.cierre .ficha[data-paso="espera"] .nota,
body.cierre .ficha[data-paso="espera"] .muted { opacity: 1; }
body.cierre .ficha[data-paso="abierto"] { border-left: 3px solid var(--banda); }
body.cierre .ficha[data-paso="hecho"] .ficha-cab .estado { color: var(--verde); }
/* Todoist es lo más caro de deshacer, y el canto lo dice sin usar el rojo de
«corregí esto» (R21): es el tono de «conviene saber». */
body.cierre .ficha[data-cuidado="sí"][data-paso="abierto"] { border-left-color: var(--ambar-borde); }
body.cierre .ficha .continuar { width: auto; padding: .5rem 1.4rem; }
/* Lo que NO se borra, plegado (usuario, 2026-08-21). Mismo `` nativo
que el desglose de la franja y las coincidencias de la verificación, y con la
misma regla: la cuenta vive en el ``, así que el número se lee sin
abrir. Pesa menos que lo que sí se borra, que es lo que la asimetría dice. */
body.cierre details.sobreviven { margin: 0 0 .8rem; font-size: .85rem; }
body.cierre details.sobreviven > summary { cursor: pointer; padding: .3rem 0; opacity: .78; }
body.cierre details.sobreviven > summary:hover { opacity: 1; }
body.cierre details.sobreviven > summary:focus-visible { outline: 2px solid; outline-offset: 1px; }
body.cierre details.sobreviven table.lm { width: 100%; margin: .35rem 0 0; }
/* Los dos avisos que la pantalla puede mostrar dentro de un paso, y son dos
cosas distintas: `aviso-lectura` es la app contando algo que salió mal o quedó
a medias —el tono de «conviene saber» de R21, nunca el rojo de «corregí
esto»—; `aviso-pregunta` es la app DETENIDA pidiéndole al usuario que vaya a
mirar afuera (R23), y lleva el canto del paso caro porque de eso habla. */
body.cierre .aviso-lectura, body.cierre .aviso-pregunta {
border-left-width: 3px; margin: 0 0 .7rem; padding: .65rem .8rem; line-height: 1.5; }
body.cierre .aviso-lectura { border-left-color: var(--ambar-borde); }
body.cierre .aviso-pregunta { border-left-color: var(--ambar-borde); background: var(--ambar-fondo); }
body.cierre .aviso-lectura p, body.cierre .aviso-pregunta p { margin: 0; }
body.cierre .aviso-lectura p + p, body.cierre .aviso-pregunta p + p { margin-top: .4rem; }
/* ══ LA PÁGINA DEL DESENLACE (§7.10 · A21) ═══════════════════════════════
HEREDA Y NO REDECLARA: `body.paneles` es R2 —el angosto de 21rem a la
izquierda, la columna ancha con lo que la corrida trajo, y con él que el panel
arranque arriba de todo—; `table.lm` es R5; `.card` y `.descarga` vienen de la
tarjeta sola en el medio. Lo de acá es sólo lo que esta página agrega.
EL PANEL NO ES PEGAJOSO, y es R19 aplicada: se pega el panel de una pantalla
donde se marca fila por fila y el criterio no se puede ir de la vista. Ésta no
se opera, se lee.
LA CONSECUENCIA ACEPTADA, medida y elegida por el usuario: con la evidencia al
ancho de la columna derecha y el respiro grande sobre ella, la columna
izquierda queda en blanco desde que el panel termina —unos 800 px sobre la
cartola de mayo—. Se ofreció llenarla alargando el panel y se descartó. */
body.desenlace .titulo { display: flex; align-items: baseline; justify-content: space-between;
gap: 1.5rem; }
body.desenlace .titulo h1 { margin: 0; font-size: 1.35rem; }
body.desenlace h2.rotulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
opacity: .7; margin: 0 0 .9rem; }
body.desenlace .vacia { font-size: .82rem; opacity: .7; margin: 0; }
body.desenlace .descarga { display: inline-block; padding: .5rem .9rem;
border: 1px solid var(--banda); border-radius: 6px; text-decoration: none;
background: var(--banda); color: #fff; font-weight: 600;
font-size: .85rem; white-space: nowrap; }
body.desenlace .columna { display: grid; gap: var(--gap); align-content: start;
min-width: 0; }
/* ── El panel ───────────────────────────────────────────────────────────── */
/* Rótulo arriba y dato abajo, y no uno al lado del otro: en 21rem «Período de la
cartola» y su valor no entran en la misma línea. Es la ficha rotulada de R14. */
body.desenlace .ficha-doc { margin: 0; font-size: .84rem; }
body.desenlace .ficha-doc dt { font-size: .7rem; text-transform: uppercase;
letter-spacing: .06em; opacity: .65; }
body.desenlace .ficha-doc dd { margin: .05rem 0 .7rem; }
body.desenlace .ficha-doc dd:last-child { margin-bottom: 0; }
/* La próxima facturación se escribe como cualquier otra fecha del panel: mismo
cuerpo y mismo peso que el período de arriba, del que es hermana. Nació grande
y en negrita, y dos fechas de período escritas distinto se leen como dos
clases de dato. */
body.desenlace .proxima { margin: 0; font-size: .84rem; }
body.desenlace .proxima.ausente { opacity: .6; }
body.desenlace .sello { margin: .35rem 0 0; font-size: .74rem; opacity: .65; line-height: 1.5; }
/* ── Las cuatro tarjetas, en dos grupos ─────────────────────────────────── */
body.desenlace .grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem;
align-items: start; }
body.desenlace .grupo { display: grid; gap: 1rem; align-content: start; }
body.desenlace .rotulo-grupo { margin: 0; font-size: .8rem; text-transform: uppercase;
letter-spacing: .07em; opacity: .7; font-weight: 600; }
/* LA CIFRA Y SU DESGLOSE, SEPARADOS POR UNA BANDA DE TINTE — pedido del usuario
sobre la galería del 2026-08-27: «a la parte de arriba de estas fichas, fondo
de algún color para darle más estructura». El tinte es el MISMO de
`body.verificacion .ficha-cab` y ahora también el del cierre: en una pantalla
que se lee después de esas dos, estrenar un gris propio sería una divergencia
entre hermanas de las que A38 cataloga.
LA CUARTA TARJETA NO TIENE DESGLOSE y por eso queda entera de tinte, lo cual
es correcto y no una excepción: la banda es «la cifra», no «el encabezado». La
que no tiene nada más que la cifra ES toda cifra. */
body.desenlace .tarjeta-cifra { border: 1px solid; border-radius: 6px;
padding: 0; display: grid; align-content: start; overflow: hidden; }
body.desenlace .cifra-cab { padding: 1rem 1.1rem; display: grid; gap: .2rem;
background: color-mix(in srgb, currentColor 5%, transparent); }
body.desenlace .tarjeta-cifra .rot { font-size: .72rem; text-transform: uppercase;
letter-spacing: .07em; opacity: .7; }
body.desenlace .tarjeta-cifra strong { font-size: 1.75rem;
font-variant-numeric: tabular-nums; line-height: 1.1; }
body.desenlace .cifra-cab .pie { font-size: .78rem; opacity: .7; }
body.desenlace .tarjeta-cifra ul { list-style: none; margin: 0;
padding: .8rem 1.1rem 1rem; border-top: 1px solid; font-size: .82rem;
display: grid; gap: .35rem; }
body.desenlace .tarjeta-cifra li { display: flex; align-items: baseline; gap: .45rem; }
body.desenlace .tarjeta-cifra li em { font-style: normal; margin-left: auto;
font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* A70 · EL DESGLOSE DE LO YA PAGADO DESPUÉS DEL CIERRE. El renglón padre lleva la
suma de los dos términos, así que la resta de la tarjeta cierra ESTANDO PLEGADA
y el pliegue sólo explica de qué se compone.
ES LA HERMANA DE `.conteos li.plegable`, DE LA PANTALLA 11, Y NO LA MISMA REGLA:
dos pantallas, dos contenedores, un cursor compartido. `.pliegue-rot` ya es
global y trae el cursor con sus dos glifos; lo que se declara acá es sólo cómo
se acomoda el pliegue dentro de ESTA tarjeta, y `.conteos` no se toca. Escribir
una sola regla para las dos habría atado el desenlace al cierre por el estilo,
que es como dos pantallas hermanas empiezan a arrastrarse una a la otra.
EL `` PLEGABLE VUELVE A `display: block` porque su hermano es `flex`, y un
`` adentro de una caja flexible no reparte sus dos partes; el reparto
lo hace el ``, que es el renglón que se ve cerrado. */
body.desenlace .tarjeta-cifra li.plegable { display: block; }
body.desenlace .tarjeta-cifra li.plegable > details > summary { display: flex;
justify-content: space-between; align-items: baseline; gap: .45rem;
cursor: pointer; list-style: none; }
body.desenlace .tarjeta-cifra li.plegable > details > summary::-webkit-details-marker { display: none; }
body.desenlace .tarjeta-cifra li.plegable ul { list-style: none; margin: .25rem 0 0;
padding: 0; border-top: 0; display: grid; gap: .3rem; }
body.desenlace .tarjeta-cifra li.sub { padding-left: 1.1rem; font-size: .76rem; opacity: .72; }
/* EL DESGLOSE DE LA CARTOLA, EN TRES COLUMNAS DE ANCHO COMPARTIDO: la cuenta de
movimientos · el destino · el monto. Las columnas son de la LISTA y no del
renglón, y eso es todo el arreglo — con una rejilla por renglón cada fila
vuelve a elegir su propio ancho, el destino largo llega a besar su cifra y el
corto corta mucho antes.
`1fr` PARA EL TEXTO Y `max-content` PARA EL MONTO: la columna de las cifras se
dimensiona por la más ancha y las demás se alinean contra ella, así que el
texto recibe lo que sobra — y recibe lo MISMO en las cuatro filas.
SÓLO EN ESTA LISTA. Las otras dos tarjetas con desglose no llevan cuenta de
movimientos, y la misma rejilla les abriría una primera columna vacía que
correría su texto a la derecha sin decir nada. */
body.desenlace .tarjeta-cifra ul.destinos { grid-template-columns: 1.6rem 1fr max-content;
column-gap: .5rem; align-items: baseline; }
body.desenlace .tarjeta-cifra ul.destinos > li { display: contents; }
body.desenlace .tarjeta-cifra ul.destinos b { font-variant-numeric: tabular-nums;
text-align: right; }
body.desenlace .tarjeta-cifra ul.destinos em { margin-left: 0; text-align: right; }
/* UN `` SIN CAJA NO PUEDE LLEVAR OPACIDAD — `display: contents` no genera
caja, así que la atenuación del apartado va en sus tres hijos. Son hermanos y
no anidados, de modo que no se multiplica: la advertencia de R19 sobre las
atenuaciones encimadas no aplica acá, y conviene decirlo para que nadie la
«arregle» de vuelta al contenedor. */
body.desenlace .tarjeta-cifra ul.destinos > li.tenue > * { opacity: .65; }
/* ── La evidencia ───────────────────────────────────────────────────────── */
/* EL RESPIRO SOBRE LA EVIDENCIA es un margen de la evidencia y no el hueco de la
columna: como hueco se repartía por igual entre TODOS los hijos de la columna
ancha, y con el título adentro —que es donde va— la pantalla arrancaba con un
agujero entre el título y las tarjetas. */
body.desenlace .plegados { margin-top: 6rem; }
body.desenlace .bloque-evidencia + .bloque-evidencia { margin-top: 2rem;
padding-top: 1.6rem; border-top: 1px solid
color-mix(in srgb, currentColor 18%, transparent); }
body.desenlace .bloque-evidencia h3 { margin: 0; font-size: .95rem; font-weight: 650; }
body.desenlace .bloque-evidencia .glosa { margin: .2rem 0 .8rem; font-size: .8rem;
opacity: .7; }
body.desenlace .bloque-evidencia .cajas { display: grid; gap: .5rem; }
body.desenlace .plegados details { border: 1px solid; border-radius: 6px;
padding: .55rem .9rem; }
body.desenlace .plegados details[open] > table,
body.desenlace .plegados details[open] > p { margin-top: .8rem; }
body.desenlace .plegados details[open] table.lm { margin-bottom: .2rem; }
/* CUATRO COLUMNAS FIJAS EN EL RÓTULO, y la cuenta SIEMPRE en la última. Con
`flex` y un margen automático el monto quedaba DESPUÉS de la cuenta, así que
la misma vertical del extremo derecho decía un número de movimientos en los
renglones sin monto y un peso en los que sí lo tienen. Fijas en `rem` y no
compartidas por rejilla: cada recuadro es su propio `` y necesita su
caja, así que no pueden ser columnas de un contenedor común. */
body.desenlace .plegados summary { cursor: pointer; font-size: .88rem; display: grid;
grid-template-columns: auto 1fr 6.5rem 2.5rem; gap: .5rem; align-items: baseline; }
body.desenlace .plegados summary .cuanto { grid-column: 3; font-style: normal; opacity: .7;
font-size: .82rem; font-variant-numeric: tabular-nums; text-align: right; }
body.desenlace .plegados summary .cuantos { grid-column: 4;
font-variant-numeric: tabular-nums; text-align: right; }
/* EL TRIANGULITO ES NUESTRO PORQUE `summary` DEJA DE SER `list-item`: cambiarle
el `display` borra el marcador nativo en WebKit y en Blink, y los recuadros
quedaban siendo `` de verdad sin parecerlo. */
body.desenlace .plegados summary::before { content: "▸"; flex: none; opacity: .55;
transition: transform .12s ease; display: inline-block; }
body.desenlace .plegados details[open] > summary::before { transform: rotate(90deg); }
body.desenlace .plegados summary:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
body.desenlace .plegados summary::before { transition: none; }
}
body.desenlace .plegados .nota { margin: 1.2rem 0 0; font-size: .78rem; opacity: .65; }
/* ── A30 · lo ya decidido del paso de cancelación (R31, usuario 2026-08-23) ──
UN RECUADRO PLEGADO POR DECISIÓN, ATENUADO MIENTRAS ESTÁ PLEGADO Y A PESO
PLENO AL ABRIRSE. Elegido sobre cuatro vueltas de plantillas reales
fotografiadas —la tabla propia al final, la fila que se queda en su lugar, el
gris fijo de R20 y una mezcla compacta—; las otras cuatro se fueron en el
mismo commit, porque dejarlas sería cinco maneras de dibujar lo mismo, que es
lo que este archivo entero existe para evitar.
EL TRIANGULITO ES NUESTRO, por el mismo motivo que en los plegados del
desenlace: cambiarle el `display` a un `summary` borra el marcador nativo en
WebKit y en Blink. */
/* EL CONTROL NO CUELGA DEL `summary`, y eso es accesibilidad y no maquetación.
Un `summary` ya es interactivo, así que un botón adentro es un control anidado
dentro de otro — `axe` lo reprueba como `nested-interactive` (grave) y los dos
se pisan con teclado y con lector de pantalla. Lo encontró el barrido de
accesibilidad en la verificación de A30, sobre esta región.
LO QUE SE VE NO CAMBIA, que es lo que importa porque la forma la eligió el
usuario. El recuadro es un `div` en grilla; el `details` lo ocupa entero y el
control se APOYA ENCIMA, en la misma cuarta columna de 7rem que el renglón ya
reservaba y que ahora queda vacía. Superponer dos ítems de grilla en la misma
celda es lo que deja la tabla abierta a todo el ancho: si el control ocupara
una columna propia, el `details` perdería 7rem y la tabla se angostaría. */
.decision-hecha { border: 1px solid; border-radius: 6px; padding: .5rem .7rem;
margin: .55rem 0; display: grid; grid-template-columns: 1fr 7rem; }
.decision-hecha > details { grid-column: 1 / -1; grid-row: 1; }
.decision-hecha > .control { grid-column: 2; grid-row: 1; text-align: right;
align-self: start; font-size: .86rem; }
.decision-hecha > .control form { display: inline; }
.decision-hecha summary { cursor: pointer; display: grid; align-items: baseline;
grid-template-columns: auto 1fr 7rem 7rem; gap: .5rem; font-size: .86rem; }
.decision-hecha summary::before { content: "▸"; opacity: .55; display: inline-block;
transition: transform .12s ease; }
.decision-hecha details[open] > summary::before { transform: rotate(90deg); }
.decision-hecha summary .cuantos { text-align: right; opacity: .65; font-size: .78rem; }
.decision-hecha table.lm { margin-top: .5rem; }
.decision-hecha table.lm .fuente-mini { display: block; font-size: .7rem;
text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.decision-hecha table.lm .glosa { display: block; font-size: .76rem; opacity: .72; }
/* EL PESO SE SACA DEL RECUADRO Y DE LA NEGRITA, NUNCA DEL COLOR (R20): el monto
pierde su negrita y «Retirar» deja de ser botón para ser la palabra subrayada
(R17). La atenuación se aplica UNA SOLA VEZ, al recuadro, con los hijos que ya
traían la suya puestos en 1 para que no se multiplique — `.62 × .65` da `.40`
y `axe` lo reprueba, que es la lección de R19 y que esta app ya pagó dos
veces. `.62` es el piso: más claro cae bajo el contraste mínimo. */
.decision-hecha.apagada { opacity: .62; border-color: currentColor; }
.decision-hecha.apagada summary .cuantos,
.decision-hecha.apagada .glosa,
.decision-hecha.apagada .fuente-mini,
.decision-hecha.apagada summary::before { opacity: 1; }
.decision-hecha.apagada .num { font-weight: 400; }
.decision-hecha.apagada .volver { font: inherit; color: inherit; cursor: pointer;
background: none; border: 0; padding: 0; text-decoration: underline;
text-underline-offset: 2px; }
.decision-hecha.apagada .volver:focus-visible { outline: 2px solid; outline-offset: 2px; }
/* Y SE ENCIENDE AL ABRIRSE, que es lo que la ronda agregó. El motivo para
atenuar y el motivo para abrir son el mismo mirado desde los dos lados: la
zona se apaga para que lo ya resuelto no le compita al trabajo que falta, y
abrir un recuadro es decir que eso pasó a ser el trabajo.
SÓLO VIAJA EL COLOR. El monto NO recupera la negrita y «Retirar» no vuelve a
ser botón: las dos cosas cambian el ancho del texto, y un renglón que se corre
solo mientras lo mirás es peor que uno pálido. El borde vuelve gratis, porque
es `currentColor`. Y nunca baja el contraste — va de gris a negro. */
.decision-hecha.apagada.despierta { transition: opacity .14s ease-out; }
/* `:has()` PORQUE LA ATENUACIÓN VIVE EN EL RECUADRO Y EL `open` EN SU `details`,
desde que el control salió del `summary`. Es el segundo uso del selector en
este archivo — el primero lo tiene la fila de un pago con un campo obligatorio
vacío — así que no estrena dependencia. Y sigue aplicándose UNA SOLA VEZ, al
recuadro: los hijos con opacidad propia siguen puestos en 1 más abajo. */
.decision-hecha.apagada.despierta:has(details[open]) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.decision-hecha summary::before,
.decision-hecha.apagada.despierta { transition: none; }
}
/* EL AIRE ANTES DE LA ZONA, al doble de lo que trae `.zona-descartes` — pedido
del usuario mirando las fotos: la zona de lo ya decidido tiene que empezar
claramente después del trabajo, no a continuación de él. */
.bloques-decididos.aire { margin-top: 4.8rem; }
/* EL AVISO DE UNA NEGATIVA VIVE ADENTRO DEL RECUADRO DE SU DECISIÓN (R29 · R30),
inmediatamente debajo del renglón donde está el botón que se apretó — y si el
mismo repintado se llevó ese recuadro, al tope de la zona, que es la segunda
mitad de R29 corrida un nivel hacia afuera.
Y EL RECUADRO QUE LO LLEVA SE ABRE, lo cual no es sólo coherencia con R31:
es lo único que le devuelve el contraste al rojo. `opacity` sobre el recuadro
atenúa al GRUPO, así que un `opacity: 1` en el hijo no lo recupera — la
pantalla 7 tuvo que desatenuar la fila entera por esto mismo, y acá la forma
que el usuario eligió lo resuelve sola. */
.decision-hecha > .rechazo-aviso { margin: .35rem 0 0; }
.bloques-decididos > .rechazo-aviso { margin: .2rem 0 .6rem; }
/* ── Las dos listas de meses terminados (§10, A39 R33 · A40 R35) ──────────
UN SOLO BLOQUE PARA LAS DOS, y eso es maquinaria de `[AC-terminal-lists-alike]`
y no orden: el contrato obliga al par a tener una forma, y dos bloques que hoy
se parecen son dos bloques que en tres meses no. Hereda `table.lm` de *La
pantalla del corte* (R5): una lista se lee como tabla.
LA FORMA LA ELIGIÓ EL USUARIO DOS VECES. R33 (2026-08-24) eligió la tabla sobre
dos paneles y sobre una ficha por mes; R35 (2026-08-25) eligió, sobre tres
formas enteras fotografiadas, que sean DOS PÁGINAS con una tabla cada una —
sobre apilarlas en una página y sobre enfrentarlas. */
.lista-meses { padding: 1.5rem 2rem; max-width: 78rem; }
.lista-meses h1 { margin: 0 0 .2rem; font-size: 1.35rem; }
.lista-meses .sub { margin: 0 0 1.4rem; color: #555; font-size: .85rem; }
.lista-meses .vacio { color: #666; font-style: italic; }
.lista-meses .volver { margin: 0 0 1rem; font-size: .85rem; }
/* LOS ANCHOS SE DECLARAN, no se dejan medir a cada tabla. Las dos listas viven en
páginas distintas, así que nada en pantalla las compara — y ésa es justamente
la razón: sin anchos fijos, cada una acomoda sus columnas a su propio contenido
y las hermanas se separan sin que nadie lo vea. Las cinco columnas son las
mismas de las dos salvo la tercera, que es lo propio de cada una. */
table.lm.meses { width: 100%; table-layout: fixed; }
/* LA COLUMNA PROPIA VA TERCERA EN LAS DOS LISTAS —lo obliga
`[AC-terminal-lists-alike]`: las cuatro compartidas tienen que caer en el mismo
sitio— y en el historial esa columna es un monto alineado a la derecha, así que
queda pegada a la fecha de al lado. El respiro es de la columna, no del número:
sin él las dos se leen como un solo bloque. Lo encontró la foto. */
table.lm.meses td.num, table.lm.meses th.num { text-align: right; white-space: nowrap;
padding-right: 1.6rem; }
/* LA COLUMNA DE LA TARJETA MURIÓ EL 2026-08-27 (usuario: la tarjeta no se
muestra en ninguna pantalla) — y R24 ya lo decía: una columna cuyas filas
dicen todas lo mismo no existe. Quedan cuatro anchos. */
table.lm.meses th:nth-child(1) { width: 24rem; }
table.lm.meses th:nth-child(2) { width: 21rem; }
table.lm.meses th:nth-child(3) { width: 16rem; }
table.lm.meses th:nth-child(4) { width: 7rem; }
table.lm.arreglos { width: 100%; margin-top: .6rem; font-size: .84rem; }
table.lm.arreglos td.ir { white-space: nowrap; }
/* El desenlace es UNA palabra, y el color separa las dos maneras de terminar:
gris cuando no dejó nada que hacer, ámbar cuando sí. EL ROJO NO SE USA — está
reservado para «necesita tu mano» adentro de una corrida viva (R7), y acá no
hay ninguna corrida viva. */
/* `span.desenlace` Y NO `.desenlace` A SECAS: la página del desenlace lleva
`desenlace` como clase del BODY, y la forma pelada se lo tragaba — un body
`inline-block` encogido al contenido, medido en vivo el 2026-08-27 cuando la
banda pizarra hizo visible lo que la barra transparente escondía. Es la misma
colisión que este archivo ya documenta en `:not(body)` de la pantalla 8. */
span.desenlace { display: inline-block; font-size: .78rem; letter-spacing: .02em;
padding: .05rem .45rem; border-radius: .2rem; white-space: nowrap; }
span.desenlace.entera { background: #eceff1; color: #37474f; }
span.desenlace.a-medias { background: var(--ambar-fondo); color: var(--ambar); }
/* EL DESENLACE Y CUÁNTO NO SE LOGRÓ DESHACER, EN UNA CELDA (R35, propuesta del
usuario). El cero no se imprime nunca —mismo criterio que la cifra subordinada
de la franja—, y el enlace cuelga del desenlace y no del número, para que una
corrida anulada por completo llegue igual a su detalle. */
.desenlace-enlace { text-decoration: none; display: inline-flex; align-items: baseline; gap: .4rem; }
.desenlace-enlace:hover span.desenlace { text-decoration: underline; }
.desenlace-enlace .cuantas { font-size: .72rem; color: var(--ambar); white-space: nowrap; }
/* ── La anulación de una corrida entera (§8.2, A39, ronda R34) ─────────────
TRES FORMAS SERVIDAS A LA VEZ mientras la ronda corre; las que no ganen se
van con la decisión, igual que las tres del desenlace. */
/* LA ZONA DE CONTROLES AL PIE (R34). Zona propia, separada del trabajo del paso
por una línea y un respiro grande: anular es la operación más cara que la app
sabe hacer, y la distancia es la única defensa que no depende de leer un
cartel.
LOS DOS ANCLADOS A BORDES OPUESTOS, y eso es la decisión y no una estética. El
control de anular aparece recién en la pantalla 5 —antes la corrida no escribió
nada—, así que el de hallazgos vive cuatro pantallas sin él; puestos juntos,
el que llegaba empujaba al que estaba 172 px, medido sobre la app. Con
`space-between` cada uno depende de SU borde y de nada más. */
/* SIN MARGEN LATERAL, y es una corrección del usuario sobre la galería del
2026-08-27: los `2rem` de cada lado hacían que la tira terminara 32 px ANTES
del borde derecho del contenido —medido, 1167 contra 1200— y arrancara 32 px
después del panel izquierdo. Una tira que no se alinea con nada se lee como un
descuido; ahora ocupa exactamente el ancho de la grilla, que es el ancho de la
región derecha en todas las pantallas. El aire de arriba queda: era del margen
superior, no de los laterales. */
.controles-pie { margin: 3.4rem 0 1.6rem; padding: .8rem 1rem;
border-top: 1px solid; background: var(--tinte-suave); display: flex; align-items: center;
justify-content: space-between; }
/* LA ZONA OCUPA EL ANCHO DE LA PÁGINA, y esta línea repara un defecto que R34 no
podía ver. `.controles-pie` es hija directa de `main`, que en `body.paneles`
es una grilla de `21rem 1fr`: sin esto la zona cae en la COLUMNA ANGOSTA.
Medido el 2026-08-26 sirviendo la app sobre nueve estados sembrados: 272 px en
seis de las nueve pantallas —contra 1088 y 1248 en las tres que arman su
propia grilla—, con el control anclado «al borde derecho» cayendo en x=157.
NO ES UN DEFECTO QUE A41 INTRODUZCA: es uno que A41 hace visible. Con un solo
control no se notaba; con la pregunta de la confirmación al lado, los dos
quedaban a 25 px. Que las tres pantallas restantes tengan tres anchos
distintos es otra cosa —cada una arma su grilla— y es materia de A38.
`grid-column: 1 / -1` se lee de la grilla en vez de repetir sus medidas, así
que una pantalla que cambie sus columnas mañana no deja esto viejo. */
main > .controles-pie { grid-column: 1 / -1; }
.controles-pie form { margin: 0; }
/* LA SALIDA DE LA CORRIDA — su propio bloque, y por eso puede viajar sola.
Alineada a la derecha, que es el borde al que R34 la ancló, y con un techo de
ancho para que la pregunta de la confirmación envuelva en dos renglones en vez
de estirar la zona. La píldora de hallazgos no se mueve igual: con
`space-between` cada uno depende de SU borde, así que lo que crece crece hacia
adentro. */
.salida-corrida { max-width: 32rem; text-align: right; }
/* EL RENGLÓN QUE DICE QUÉ SE PIERDE, y es una excepción declarada a R34 («ningún
texto alrededor de un botón»). La levantó el propio usuario el 2026-08-26 al
elegir preguntar una vez antes de terminar, sobre el contraste explícito de
terminar de un apretón: acá el texto no explica lo que el botón hace — dice lo
que se pierde, que es lo único sobre lo que hay que decidir. */
.salida-pregunta { margin: 0 0 .5rem; font-size: .85rem; color: #4c5a63;
line-height: 1.45; }
/* LA NEGATIVA DEL TERCER TERRITORIO conserva la barra de R30 y por lo tanto su
lectura de izquierda a derecha, aunque el bloque esté alineado a la derecha:
una barra al costado con el texto alineado al otro lado deja de marcar nada. */
.salida-corrida .rechazo-aviso { margin: 0; text-align: left; }
/* LO QUE SE PUEDE HACER CON LA CORRIDA QUE OCUPA EL MES — un renglón de acciones
debajo del motivo, en la página del rechazo. Hasta A41 el motivo nombraba una
acción y la página no traía forma de hacerla.
ES LA PÁGINA DEL RECHAZO Y NO EL PIE DE UNA CORRIDA, así que la salida vuelve a
alinearse a la izquierda: acá no hay nada a lo que anclarse por el otro borde
—no existe la píldora de hallazgos— y la lectura sigue el orden del renglón. */
.acciones-corrida-ocupada { display: flex; align-items: center; gap: 1rem;
flex-wrap: wrap; margin: .9rem 0 0; }
.acciones-corrida-ocupada .salida-corrida { max-width: none; text-align: left; }
.anular-pastilla { font: inherit; font-size: .85rem; background: #fff; border: 1px solid #d3a5a5;
border-radius: 999px; padding: .12rem .65rem; color: var(--rojo);
cursor: pointer; }
.anular-pastilla:hover { background: #f8eeee; border-color: #a3524d; }
.controles-pie :focus-visible { outline: 2px solid #2f4858; outline-offset: 2px; }
.anulacion-estado h2 { font-size: 1rem; margin: 0 0 .6rem; }
.anular-aviso { background: #eef3f8; border-left: 3px solid #2f4858; padding: .5rem .8rem;
border-radius: .2rem; font-size: .88rem; }
.anular-aviso.sin-efecto { background: #eef2f5; border-left-color: #93a3ad; }
.anular-rechazo { background: var(--rojo-fondo); border-left: 3px solid var(--rojo); padding: .5rem .8rem;
border-radius: .2rem; font-size: .88rem; }
/* El cuadro de qué conservar, y el botón que dispara el recorrido. */
.conservar h3 { margin: 0 0 .5rem; font-size: .95rem; }
.conservar p { margin: 0 0 .6rem; font-size: .88rem; }
.conservar .creaciones { list-style: none; margin: 0 0 .8rem; padding: 0;
max-height: 16rem; overflow-y: auto; }
.conservar .creaciones li { margin: 0 0 .15rem; }
.conservar .creaciones label { display: flex; gap: .5rem; align-items: baseline;
font-size: .84rem; padding: .15rem .3rem; border-radius: .2rem; }
.conservar .creaciones label:hover { background: #e9eff3; }
/* EL TERCER ESTADO DE LA VISTA: lo que la app releyó, campo por campo. */
.reversion .releido { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .7rem;
margin: .35rem 0 0; font-size: .82rem; }
.reversion .releido dt { color: #5c6870; }
.reversion .releido dd { margin: 0; }
.reversion tr[data-clasificacion] td .dice { margin: 0; }
.anular-pregunta { border: 1px solid var(--ambar-borde); background: var(--ambar-fondo); border-radius: .3rem;
padding: .8rem 1rem; margin-top: .8rem; }
.anular-pregunta h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--ambar); }
.anular-pregunta p { margin: 0 0 .5rem; font-size: .88rem; }
.anular-pregunta .dice q { font-style: italic; }
/* LOS CANDIDATOS SON UNA ELECCIÓN, no un campo de texto: son los comentarios que
la app vio con el texto que se debe, y lo único que los distingue es la hora en
que se publicaron — el texto es idéntico en todos por definición. */
.anular-pregunta .candidatos { list-style: none; margin: .2rem 0 .6rem; padding: 0; }
.anular-pregunta .candidatos li { margin: 0 0 .2rem; }
.anular-pregunta .candidatos label { display: flex; gap: .5rem; align-items: baseline;
font-size: .84rem; padding: .2rem .3rem; border-radius: .2rem; }
.anular-pregunta .candidatos label:hover { background: #efe8d6; }
.anular-pregunta .candidatos .cuando { font-variant-numeric: tabular-nums; }
.anular-pregunta .quedan { margin: .5rem 0 0; font-size: .78rem; color: #5c6870; }
.dos-respuestas { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
margin-top: .6rem; }
.dos-respuestas button { font: inherit; font-size: .84rem; padding: .3rem .7rem;
border: 1px solid #c3ccd2; border-radius: .2rem; background: #fff; cursor: pointer; }
.dos-respuestas button[disabled] { opacity: .5; cursor: not-allowed; }
/* ── Las dos salidas de una anulación a medias (A39, commit 8) ─────────────
ADOPTA LA COLUMNA DE R34 y no vota de nuevo: es una tarjeta más de la misma
columna, entre el estado y la tabla de lo repuesto.
LOS DOS GRUPOS DE LA ENUMERACIÓN VAN LADO A LADO porque el usuario los compara
—lo que podría volver contra lo que no— y una lista debajo de la otra obliga a
recordar la primera para leer la segunda. */
.anulacion-salidas h3 { margin: 0 0 .6rem; font-size: .95rem; }
.anulacion-salidas .enumeracion { display: grid; grid-template-columns: 1fr 1fr;
gap: .8rem 1.6rem; margin-bottom: .9rem; }
.anulacion-salidas .grupo h4 { margin: 0 0 .35rem; font-size: .82rem; font-weight: 600;
color: #44535c; text-transform: none; }
.anulacion-salidas .grupo.no-puede h4 { color: var(--rojo); }
.anulacion-salidas .grupo ul { list-style: none; margin: 0; padding: 0;
max-height: 14rem; overflow-y: auto; }
.anulacion-salidas .grupo li { margin: 0 0 .3rem; font-size: .84rem;
border-left: 2px solid #d5dde2; padding-left: .5rem; }
.anulacion-salidas .grupo.no-puede li { border-left-color: #d3aeae; }
/* R28, ADOPTADO Y NO REDECIDIDO: la clase de la observación es el TITULAR del
renglón y el identificador externo va debajo, atenuado. Es la misma forma que
la tabla de abajo, para que el mismo objeto no se lea de dos maneras en la
misma pantalla. */
.anulacion-salidas .grupo .titular { display: block; font-weight: 600; }
.anulacion-salidas .grupo .idexterno { display: block; opacity: .55;
font-variant-numeric: tabular-nums; }
.anulacion-salidas .grupo .porque { display: block; color: #5c6870; font-size: .78rem; }
.anulacion-salidas .grupo .muted { margin: 0; font-size: .82rem; }
/* LAS DOS SALIDAS SE VEN JUNTAS Y AL MISMO NIVEL: el criterio pide ofrecer
retomar «junto a ella y nunca en su lugar», y una salida escondida bajo la
otra es una manera de ofrecerla sin ofrecerla. */
/* LOS DOS BOTONES APOYAN EN LA MISMA LÍNEA (`align-items: end`), y por eso la
advertencia crece hacia arriba en vez de empujar a su botón hacia abajo. Sin
esto los dos quedaban a alturas distintas —uno arriba, el otro debajo de cuatro
renglones de advertencia— y dejaban de leerse como dos caminos del mismo rango,
que es lo único que el criterio pide de su forma. La foto lo mostró; ninguna
prueba podía. */
.dos-salidas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem;
align-items: end; border-top: 1px solid #d5dde2; padding-top: .8rem; }
.dos-salidas form { margin: 0; }
/* Y NINGUNO SE ESTIRA A SU CELDA: un botón del ancho de media pantalla al lado de
uno del ancho de su texto es una jerarquía dibujada sin decidirla (R11 — dos
respuestas excluyentes, ninguna predeterminada). */
.dos-salidas button { font: inherit; font-size: .84rem; padding: .3rem .7rem;
border: 1px solid #c3ccd2; border-radius: .2rem; background: #fff; cursor: pointer; }
/* LA ADVERTENCIA VIVE EN LA PÁGINA Y ARRIBA DEL BOTÓN (A32): el usuario la lee
antes de apretar, no después de que un diálogo lo interrumpa. */
.dos-salidas .advertencia { margin: 0 0 .5rem; font-size: .8rem; color: var(--ambar);
background: var(--ambar-fondo); border-left: 3px solid var(--ambar-borde); padding: .4rem .6rem;
border-radius: .2rem; }
.ir-a-anuladas { margin: .7rem 0 0; font-size: .88rem; }
/* ── La portada (§10, `[AC-terminal-lists-entry]` · A40 R36) ──────────────────
LA FORMA LA ELIGIÓ EL USUARIO el 2026-08-25 sobre TRES portadas enteras
fotografiadas dos veces cada una: ganó la corrida en un bloque solo, con las
tres puertas en un renglón al pie. Se fueron *los últimos meses de cada lista
asomados debajo* —que era la más densa, y su costo era volver tres las
pantallas que tienen que seguir pareciéndose— y *cuatro puertas del mismo
tamaño*, que le sacaba peso a lo único que se mira once de cada doce veces.
Hereda `.primario` de la pantalla 1: el botón sólido, con su texto fijo. */
/* EL ANCHO ES EL DE LAS DOS LISTAS y no uno propio: las cinco columnas declaradas
de `table.lm.meses` suman 74rem, y una portada más angosta que el resto de la app
sería una inconsistencia que nadie eligió. Lo midió la ronda: con 62rem la opción
que asomaba las listas se salía de su propia página. */
body.portada main { max-width: 76rem; padding: 2rem var(--gap); gap: 1.75rem; }
/* EL AVISO DE UNA SOLA LECTURA — arriba de todo, elegido por el usuario el
2026-08-26 sobre tres portadas enteras fotografiadas (A41). Es la única
evidencia que queda de que la corrida se borró, así que ocupa el lugar donde
el ojo aterriza al volver, no el margen.
HEREDA LA FORMA DE R30 —la barra al costado— y le cambia el color: el rojo de
R7 significa «necesita tu mano», y acá no hay nada que hacer. El verde dice lo
contrario, que es lo que pasó. Es el único aviso de la app que afirma un buen
desenlace, así que estrena tono en vez de tomar prestado uno que miente. */
.aviso-portada { margin: 0; padding: .7rem 1rem; border-left: 3px solid var(--verde);
background: var(--verde-fondo); color: var(--verde); font-size: .9rem; border-radius: .2rem; }
.corrida-bloque { border: 1px solid; border-radius: 8px; padding: 1.6rem 1.8rem; }
.corrida-bloque .rotulo { margin: 0 0 .35rem; font-size: .72rem; text-transform: uppercase;
letter-spacing: .08em; opacity: .65; }
.corrida-bloque h1 { margin: 0 0 .35rem; font-size: 1.6rem; }
.corrida-bloque .detalle { margin: 0 0 1.4rem; font-size: .88rem; color: #555; }
.corrida-bloque .primario { display: inline-block; width: auto; padding: .55rem 1.5rem;
text-decoration: none; color: #fff; border: 1px solid var(--banda); border-radius: 6px; }
/* SIN CORRIDA NO HAY MENOS PANTALLA, hay la misma con otra cosa adentro: el
bloque conserva su tamaño para que la portada no cambie de forma según si hay
un mes empezado — que es la mitad de las veces que se la mira. */
.corrida-bloque.vacia { border-style: dashed; }
/* LAS TRES PUERTAS, en un renglón al pie y separadas del bloque de la corrida por
una línea fina: son de otra clase de cosa —a dónde ir— y no compiten con el
mes que está a medio conciliar, que es lo que esta forma ganó por hacer. */
.puertas { display: flex; gap: 2rem; align-items: baseline;
padding-top: 1.1rem; border-top: 1px solid #ddd; font-size: .9rem; }
.puertas a { color: inherit; }
.puertas .cuenta { display: inline-block; margin-left: .15rem; padding: .02rem .4rem;
border-radius: .8rem; background: #eceff1; color: #37474f; font-size: .75rem;
font-variant-numeric: tabular-nums; }
/* La evidencia del despliegue, en el panel angosto de la configuración (A40).
Tres columnas en 21rem: el tipo baja y la fecha no se parte. */
.despliegue h3 { margin: 1.2rem 0 .3rem; font-size: .8rem; text-transform: uppercase;
letter-spacing: .07em; opacity: .7; }
.despliegue .muted { font-size: .78rem; margin: 0 0 .5rem; }
.despliegue .kv { font-size: .82rem; }
table.arranques { font-size: .74rem; font-variant-numeric: tabular-nums; }
table.arranques th { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
opacity: .7; }
table.arranques td, table.arranques th { padding: .22rem .35rem; }
table.arranques td:first-child { white-space: nowrap; }
/* PLEGADA ADENTRO DE LA TARJETA DE LA COMPROBACIÓN PREVIA — elegido por el usuario
el 2026-08-25 sobre tres lugares fotografiados (R37). Hereda R31: lo que no pide
atención vive plegado y atenuado hasta que lo abrís. Se fueron *dos tarjetas en
esta columna* y *una tarjeta al pie de la columna ancha*, que era la única en la
que la tabla respiraba y la única que quedaba bajo el pliegue. */
details.despliegue.plegado { margin-top: 1rem; padding-top: .8rem;
border-top: 1px solid; border-color: color-mix(in srgb, currentColor 18%, transparent); }
details.despliegue.plegado > summary { font-size: .8rem; opacity: .72; cursor: pointer; }
details.despliegue.plegado[open] > summary { opacity: 1; margin-bottom: .4rem; }
/* ── El orden de las tablas ────────────────────────────────────────────────
TODA COLUMNA QUE ORDENA LO DICE, y la que está ordenando lo dice más fuerte.
Decisión del usuario del 2026-08-27, tomada sobre tres cabeceras renderizadas
y fotografiadas, y es la SEGUNDA vuelta sobre esta misma cosa: la primera
había elegido «la flecha sólo en la que está ordenando», y mirar la pantalla
de verdad mostró el costo — Fecha llevaba flecha y Comercio y Monto ordenaban
igual sin que nada lo dijera, así que parecían muertas. El usuario lo marcó
con esas palabras: «la pantalla debe permitirme ordenar por cualquiera de las
tres columnas».
POR QUÉ UNA FLECHA Y NO DOS. La forma del par ▲▼ en cada columna también se
fotografió y perdió por segunda vez: son seis flechas por tabla en pantallas
que ya son densas a propósito. Con una sola por columna el anuncio es el
mismo y el adorno es la mitad; lo que separa a la que ordena no es la
cantidad de signos sino el peso — la suya va entera y apuntando al sentido,
las otras atenuadas.
NO CAMBIA A QUÉ TABLAS ALCANZA, y eso sigue siendo de la primera vuelta:
ordenan las tres columnas de datos (fecha · monto · comercio/payee) y ninguna
de estado —ordenar por una columna de dos valores es partir la tabla en dos
bloques, la vista que R10/R11 ya descartaron—, en tablas de al menos TRES
filas y de filas independientes. Por eso el botón lo crea el guion al armar
la tabla, no la plantilla: un th sin armar es texto plano, no un control que
miente. */
th .orden-control { font: inherit; letter-spacing: inherit; text-transform: inherit;
color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
th .orden-control:hover { text-decoration: underline; }
th[data-orden] .orden-control::after { font-size: .55rem; margin-left: .3rem;
vertical-align: .08em; display: inline-block; content: "▲"; }
/* LA QUE NO ESTÁ ORDENANDO SE ATENÚA — nunca desaparece: que se pueda tocar es
justamente lo que esta vuelta vino a decir. */
th[data-orden]:not([aria-sort]) .orden-control::after { opacity: .3; }
th[aria-sort="descending"] .orden-control::after { content: "▼"; }
/* R44 · LA CUENTA SE DESPEGA DEL CONTEO Y SE ANCLA AL BORDE DERECHO, elegido por
el usuario el 2026-08-27 sobre tres formas fotografiadas de la app real, cada
una plegada y abierta. Lo que decidió la vuelta: la banda queda partida por
SIGNIFICADO —a la izquierda lo que la app te informa (la barra de avance y los
movimientos sin destino), a la derecha lo que podés tocar (esta cuenta y el
botón que avanza)—. Pegada al conteo, la palabra se leía como «el detalle de
esos 59», que es de lo que NO habla.
SE MUEVE EL RÓTULO Y NO LA CAJA: el `` conserva su ancho, así que el
desglose sigue empujando el contenido hacia abajo a lo ancho y nunca lo tapa
(`[AC-bar-full-breakdown]`). Anclar la caja entera a la derecha habría dejado
la cuenta abierta en una columna angosta.
R44 QUEDÓ SIN OBJETO EL MISMO DÍA y la regla que la aplicaba se borró de acá:
el usuario bajó la cuenta al pie unas horas después, así que en esta banda ya
no hay nada que anclar a la derecha. El registro se queda escrito porque el
pie hereda lo que la vuelta decidió —la cuenta es de la clase «mirar», no de
la clase «tocar»—; lo que se fue es la línea de CSS, que no aplicaba a nadie. */
/* R46 · LA BANDA SE LLENA EN DOS RENGLONES, elegido por el usuario el 2026-08-27
sobre tres formas fotografiadas de la app real. La vuelta anterior le había
ofrecido tres maneras de SACAR el aire y las rechazó las tres: «de alguna
manera quiero hacer más alto la barra de progreso y el mensaje de la derecha».
El aire no sobraba — faltaba contenido que lo ocupara.
ARRIBA LA BARRA CON SU LEYENDA, ABAJO LA CIFRA. Los dos renglones dicen dos
cosas de la misma tarea: cuánto va hecho (la proporción) y cuánto falta (el
número). La barra crece a 190 px y la cifra a 1,5 rem, así que el conteo es lo
primero que se ve de toda la pantalla — que es lo que tiene que llegar a cero.
LA BANDA SUBE A 5,5 REM Y EL RIEL SUBE CON ELLA, sin escribirlo dos veces:
las dos alturas salen de `--alto-cabecera`. */
.cabecera-corrida .franja-pendientes { display: block; line-height: 1.3; }
.cabecera-corrida .avance { display: flex; margin: 0 0 .25rem; }
.cabecera-corrida .avance-riel { width: 190px; height: 7px; }
.cabecera-corrida .avance-hecho { border-radius: 3px; }
.cabecera-corrida .franja-pendientes strong { font-size: 1.5rem; }
/* R45 · EL PIE SON PALABRAS SUBRAYADAS, SIN RECUADRO — elegido por el usuario el
2026-08-27 sobre tres formas fotografiadas de la app real. Sus dos objeciones,
textuales: la pastilla redondeada «no se usa en ninguna otra parte de la app»,
y «el rojo del Anular esta corrida no pega demasiado con el resto». Una tercera
apareció al mirarlo sobre el papel cálido y no la había visto nadie: las dos
pastillas traían `background: #fff` escrito a mano, así que sobre el papel se
leían como dos parches encendidos.
ADOPTA UN PATRÓN QUE YA ESTABA ELEGIDO — R17: «una acción sobre algo ya hecho
es la PALABRA, subrayada y sin recuadro». Es lo que la app ya hace con
«Deshacer» y «Retirar». Sin recuadro, las tres objeciones se van juntas: no
hay pastilla, no hay fondo blanco y no hay rojo.
LO QUE ESTO CUESTA, dicho porque se eligió a sabiendas: anular pierde toda
señal de ser lo más grave que se puede apretar acá. El aviso queda entero en
la pregunta de confirmación, un paso después — que es donde R38 ya lo había
puesto, y donde el rojo sí significa lo que R7 dice.
Y EL ACCESO A HALLAZGOS GANA SU SUJETO: «Hallazgos de la corrida», para que
los tres controles del pie nombren la misma cosa. Pedido del usuario en la
misma vuelta. */
.controles-pie { background: transparent; border-top: 1px solid var(--borde-tenue);
padding: .85rem 0; }
.controles-pie .hallazgos-acceso,
.controles-pie .anular-pastilla { border: none; border-radius: 0; padding: 0;
background: none; color: inherit; font-size: .88rem;
text-decoration: underline; text-underline-offset: 3px; }
.controles-pie .anular-pastilla:hover { background: none; }
/* EL PIE VOLVIÓ A SUS DOS CONTROLES el 2026-08-27, unas horas después de tener
tres. La cuenta subió a la banda con el aviso que explica; lo que queda acá
son las dos cosas que R34 puso: mirar los hallazgos y botar el mes.
LA FLECHITA NO SE SUBRAYA, y la regla se queda escrita aunque su consumidor se
haya mudado arriba: el subrayado se propaga a los hijos en línea, y una
flechita subrayada se lee como una errata. */
.franja-chevron { display: inline-block; margin-left: .3rem; }
/* R47 · EL RIEL SE PLIEGA, Y LA FLECHA VIVE ADENTRO — elegido por el usuario el
2026-08-27 sobre tres lugares fotografiados, cada uno abierto y plegado. La
vuelta anterior la había puesto a caballo del canto derecho, como una perilla
pegada al borde; la corrección fue textual: «la flecha debería vivir dentro
del riel, no en el canto», y después «debería tener más protagonismo, por
ejemplo dentro de una caja blanca (pequeñita)».
LA CAJA BLANCA ES LO QUE LA HACE VISIBLE, y no es un capricho de estilo: sobre
pizarra, una flecha del mismo color que el texto del riel es un carácter más
de la columna. Invertida —tinta pizarra sobre el blanco de las superficies de
trabajo— es lo único claro y sólido del riel, así que se encuentra sin
buscarla. Toma el blanco de `--panel`, que es el de los paneles: la única
cosa tocable del riel está pintada del color de las cosas donde se trabaja.
PLEGADO SIGUE ORIENTANDO. Se van el nombre de la app y los nombres de los
capítulos; queda lo que contesta «¿dónde estoy?» — el tilde de lo hecho, el
punto de lo que falta, el capítulo actual encendido y el paso en chico. Un
riel plegado que no dijera nada sería una columna de color, y entonces
convendría plegarlo del todo. */
.riel-marca { position: relative; }
/* EL RINCÓN DE ARRIBA, Y MÁS CHICA — opción 1 de tres fotografiadas (usuario,
2026-08-27): «la caja con la flecha queda muy pegada a la "o" de Crédito».
Era cierto y el motivo es de espacio medido: el riel tiene 152 px y «Tarjeta
de Crédito» ocupa 117, así que a la derecha del rótulo quedan 22 — menos que
la caja. Achicarla sola no alcanzaba: la dejaba rozando igual. Sube ENCIMA del
rótulo, donde el aire ya existía, y baja a 16 px. Se descartaron ponerla
debajo del rótulo y montarla sobre la raya. */
.riel-tirador { position: absolute; right: .5rem; top: .5rem;
width: 16px; height: 16px; padding: 0; border: none; border-radius: 3px;
background: var(--panel); color: var(--banda); font: inherit; font-size: .62rem;
line-height: 1; display: grid; place-items: center; cursor: pointer; }
.riel-tirador:hover { background: #fff; }
.riel-tirador:focus-visible { outline: 2px solid var(--panel); outline-offset: 2px; }
body.riel-plegado div.marco { grid-template-columns: 44px minmax(0, 1fr); }
body.riel-plegado .riel-marca { height: auto; padding: .9rem 0 0; font-size: 0; }
body.riel-plegado .riel-tirador { position: static; margin: 0 auto; }
body.riel-plegado .riel-marca + .riel-corte { margin-top: .9rem; }
body.riel-plegado .riel-corte { margin: .75rem .3rem; }
body.riel-plegado .tira a,
body.riel-plegado .tira li > span:not(.marca) { display: none; }
body.riel-plegado .tira ol { padding: 0; gap: .15rem; }
body.riel-plegado .tira li { justify-content: center; padding: .34rem 0; gap: 0; }
body.riel-plegado .tira li:not([data-estado="hecha"])::before { content: "\2022"; opacity: .7; }
body.riel-plegado .tira li[data-estado="actual"] { opacity: 1; }
body.riel-plegado .riel-paso { padding: 0 .15rem; text-align: center; }
body.riel-plegado .riel-paso-n { font-size: .58rem; letter-spacing: .02em; line-height: 1.25; }
body.riel-plegado .riel-paso-nombre { display: none; }
/* ══ PANTALLA 6 · LOS TRES ORÍGENES — «el par es el renglón, a lo ancho» ═══
Elegida por el usuario el 2026-08-28 (ronda R51) sobre plantillas reales
servidas por esta app y fotografiadas, en doce vueltas. Lo que ganó, en una
línea: la pantalla se parte en TRES FAMILIAS por el origen de la pregunta, y
cada pregunta es un renglón-par con el signo en el medio — la unidad de R16,
traída desde la pantalla 7.
R2/R24/R40 NO SE HEREDAN Y ESO ES DELIBERADO: se fue el panel angosto, y la
cuenta del paso pasó a la oración de estado de arriba. La pantalla lo dice en
su comentario de cabecera, y una prueba lo exige.
HEREDA `.par`, `.lado`, `.candidatas`, `.candidata`, `.signo` y `.elegir` DE
LA PANTALLA 7, sin redeclararlas: son de R16 y viven arriba, bajo *Pantalla 7
· el cruce*. Lo de acá es sólo lo que esta pantalla necesita ADEMÁS, y cada
bloque dice por qué. */
body.paso6 main { max-width: 74rem; gap: 2rem; }
body.paso6 .familia { display: block; }
body.paso6 .familia > h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
body.paso6 .familia > p.nota { margin: 0 0 .9rem; max-width: 62rem; font-size: .92rem; }
/* LA FAMILIA QUE ESPERA SE ATENÚA CON UN COLOR Y NO CON `opacity`, y es la
lección de A51 aplicada antes de que doliera: `opacity` atenúa TODA la capa, así
que multiplica con cualquier atenuación de adentro y `axe` rechaza el texto —lo
hizo, sobre `.nota` y su ``, en las cinco pantallas 6 del chequeo—. Un
color atenúa UNA vez y es medible. `--tinta-tenue` es el mismo gris con el que
la app escribe rótulos y glosas sobre papel, así que la familia dormida se lee
como se lee todo lo secundario de la aplicación. */
body.paso6 .familia.esperando { color: var(--tinta-tenue); }
body.paso6 .familia.esperando > h2 { color: var(--tinta-tenue); }
/* Y UNA SOLA CAPA ATENÚA, que es la mitad que hace falta decir en voz alta:
`.nota` ya viene con su propio `opacity: .7` de la hoja general, así que el
color de arriba se le multiplicaba encima y el chequeo lo rechazó igual que
antes. Adentro de la familia dormida la atenuación la pone el color y nada
más. */
body.paso6 .familia.esperando > p.nota { opacity: 1; }
body.paso6 .pares p.vacio { font-size: .88rem; opacity: .7; padding: .75rem 0;
border-bottom: 1px solid; margin: 0; }
/* LOS DOS LADOS NO SON SIMÉTRICOS y la grilla lo dice: a la izquierda va SIEMPRE
un objeto y NUNCA un control, así que se lleva un ancho fijo y la derecha
—donde viven las tarjetas con su respuesta— se queda con todo el resto. Con
mitades iguales, el comercio de una tarjeta cabía en 11rem y una tarjeta de un
solo objeto salía en cuatro renglones. */
body.paso6 .par, body.paso6 .cabecera-familia { grid-template-columns: 26rem 2.4rem 1fr; }
body.paso6 .par { padding: .8rem 0; }
body.paso6 .par > .lado { padding-right: 0; }
.cabecera-familia { display: grid; gap: .4rem; font-size: .7rem; text-transform: uppercase;
letter-spacing: .07em; color: #44606f; font-weight: 600; padding: .4rem .5rem .3rem; }
/* LA FUENTE ES UNA PALABRA Y VIAJA EN EL RENGLÓN DEL OBJETO (usuario,
2026-08-28). Escrita entera y en su propia línea gastaba un renglón por
objeto; acá cada fila enfrenta las dos fuentes con el signo en el medio, que
es la condición con la que la pantalla del cruce ya se ahorra el nombre largo. */
body.paso6 .par .lado ul .d .src { display: block; font-size: .7rem; text-transform: uppercase;
letter-spacing: .05em; opacity: .6; line-height: 1.45; }
/* EL BOTÓN AFUERA DE SU TARJETA, a la derecha (usuario, 2026-08-28): el recuadro
encierra el objeto y lo que Lunch Money sabe de él, y la respuesta vive al
costado en su propia columna. La columna es angosta porque los botones son
cortos, y lo que gana el comercio es la diferencia. */
body.paso6 .par .candidata { display: grid; grid-template-columns: 1fr 10.5rem; gap: .6rem;
align-items: center; border: 0; border-radius: 0; padding: 0; }
/* EL RECUADRO SE LLAMA `.recuadro` Y NO `.tarjeta`, medido: `.tarjeta` es un
patrón del proyecto —la tarjeta centrada de la puerta, elegida en 2026-08-04—
y trae su propio ancho, así que el recuadro no se estiraba en su columna y el
comercio partía igual. Reusar el nombre de un patrón no es heredarlo. */
body.paso6 .par .candidata .recuadro { border: 1px solid; border-radius: 6px;
padding: .5rem .65rem; min-width: 0; background: var(--panel); }
/* `1fr` es `minmax(auto,1fr)` y no baja del ancho mínimo de su contenido: sin
esto la fila del objeto desbordaba la tarjeta y el monto salía por afuera del
recuadro. Medido sobre la app, no deducido. */
body.paso6 .par .lado ul li { grid-template-columns: 5.4rem minmax(0,1fr) 6.4rem; }
body.paso6 .par .candidata.propuesta .recuadro { border-width: 2px; }
body.paso6 .par .candidata.otra .recuadro { border-style: dashed; }
/* Y ARRANCAN ARRIBA, no centradas: el primer botón cae a la altura del primer
renglón de SU tarjeta, que es lo que dice de cuál tarjeta son. Centradas, dos
pilas vecinas quedaban a la misma distancia entre sí que los dos botones de
una misma tarjeta. */
body.paso6 .par .candidata .acciones { display: grid; gap: .25rem; align-self: start; }
/* LAS PILAS DE BOTONES SE SEPARAN ENTRE TARJETAS Y NO ADENTRO DE UNA. Con la
grilla de `.candidatas` el espacio entre dos botones de la misma tarjeta y el
que había entre dos tarjetas era casi el mismo, y las respuestas se leían como
una columna sola sin dueño. Bloque en vez de grilla: adentro .3rem, entre
tarjetas 1.1rem. */
body.paso6 .par .candidatas { display: block; }
body.paso6 .par .candidatas > .candidata + .candidata { margin-top: 1.1rem; }
body.paso6 .par .candidatas > p.empate + .candidata { margin-top: 0; }
body.paso6 .par .candidata .acciones form { margin: 0; }
body.paso6 .par .elegir { width: 100%; font-size: .8rem; padding: .3rem .55rem;
white-space: normal; }
/* LO QUE LUNCH MONEY SABE DEL OBJETO VIAJA EN EL RENGLÓN DE SU FUENTE, adentro
de la tarjeta que habla de ese objeto — nunca en el texto de arriba, que sólo
cuenta cuántas alternativas hay (usuario, 2026-08-28). La forma es la única
etiqueta de la app (R42), así que no hereda las mayúsculas de la fuente. */
body.paso6 .par .lado ul .d .etiqueta-lm { text-transform: none; letter-spacing: 0;
margin-left: .45rem; white-space: nowrap; }
/* LA RECOMENDACIÓN ES LA ÚNICA ETIQUETA CON COLOR PROPIO, y es el verde de la
hoja — no un tono nuevo. Dice «esto es lo que la app cree», y ninguna otra
etiqueta de la tarjeta afirma nada parecido. */
body.paso6 .par .lado ul .d .etiqueta-lm.reco { font-weight: 600; color: var(--verde);
background: var(--verde-fondo); }
/* La consecuencia de cancelar una compra que Lunch Money ya tiene registrada
(`[AC-prepaid-contradiction-warn]`): adentro de la tarjeta de esa compra, en
el rojo de «necesita tu mano» apagado a texto, y nunca en el texto de arriba. */
body.paso6 .par .candidata .consecuencia { font-size: .74rem; margin: .25rem 0 0;
color: var(--rojo); }
/* LA RESPUESTA DE UN PAGO QUE LA LIQUIDACIÓN APLICARÍA, en el renglón del pago
(usuario, 2026-08-28, opción A sobre tres fotografiadas). Es la única celda de
control del lado izquierdo de un renglón-par, y la excepción está declarada
donde se dibuja: el grupo entero es UNA tarjeta con UNA respuesta —«Saldar
así»— y el desacuerdo es de a un pago, así que no hay tarjeta propia donde
ponerlo sin partir la del grupo. El control es MENOR que la respuesta del
grupo a propósito: aceptar la propuesta es lo normal (R11 no rige acá — no son
dos respuestas excluyentes del mismo peso, son una propuesta y su desacuerdo). */
body.paso6 .par .candidata .recuadro .lado ul li {
grid-template-columns: 5.4rem minmax(0,1fr) 6.4rem 3.6rem; }
body.paso6 .respuesta-fila { text-align: right; }
body.paso6 .respuesta-fila form { margin: 0; }
body.paso6 .respuesta-fila button { font-size: .68rem; padding: .05rem .35rem; }
/* ── A67 · el desglose del monto a pagar ────────────────────────────────────
El panel tenía tres renglones que no cerraban a la vista porque le faltaba un
término (ver `cierre.MontoAPagar`). El renglón padre lleva ahora el total de
los dos pagos posteriores al cierre, así que la resta visible cierra SIEMPRE;
el pliegue explica de qué se compone, y por eso puede arrancar cerrado sin
devolver el defecto. `` nativo, cero listeners, el mismo patrón que
el plegado de coincidencias.
`.limpia` retira las líneas de trazo entre renglones — decisión del usuario sobre
las DOS listas de esa tarjeta, dejando una sola línea continua arriba de «A pagar». */
.conteos.limpia li { border-bottom: 0; }
.conteos li.plegable { display: block; padding: 0; }
.conteos li.plegable > details > summary { display: flex; justify-content: space-between;
gap: .6rem; padding: .22rem 0; cursor: pointer; list-style: none; }
.conteos li.plegable > details > summary::-webkit-details-marker { display: none; }
.conteos li.plegable > details > summary:focus-visible { outline: 1px solid currentColor;
outline-offset: 2px; }
.conteos li.sub { padding-left: 1.1rem; font-size: .76rem; opacity: .72;
border-bottom: 0; padding-top: .1rem; padding-bottom: .1rem; }
.conteos li.total { border-bottom: 0; border-top: 1px solid currentColor;
margin-top: .2rem; padding-top: .35rem; }
.conteos li.total .n { font-weight: 750; }
.conteos li.plegable ul { list-style: none; margin: .1rem 0 .25rem; padding: 0; }
/* EL CURSOR VA JUNTO AL RÓTULO, y las otras dos posiciones se descartaron por una
razón medida en las fotos y no por gusto: antes del rótulo corre el texto y rompe
la alineación IZQUIERDA de la columna; después de la cifra empuja el monto y rompe
la alineación DERECHA. En un panel que existe para que unos números se lean como
una columna, la columna desalineada es lo primero que salta. */
.pliegue-rot .cursor { opacity: .5; margin-left: .4rem; font-size: .9em; }
.pliegue-rot .cursor::after { content: "\2304"; }
.pliegue-rot[open] .cursor::after { content: "\2303"; }
|