`, así que esas dos reglas
no tenían ningún elemento al que aplicarse. Se recuenta con:
grep -c "coa-editor-fila" app/templates/accounts/gestionar.html → 0
Si algún día se vuelve al anclaje, están en el historial de este archivo. */
/* ══ F6 · LA COLUMNA DE ENTRADA ══════════════════════════════════════════════
El formulario ocupa una columna propia de alto completo pegada al menú, y NO
se mueve. El catálogo entero vive a su derecha y scrollea por detrás.
NO es un modal —sin velo, sin trampa de foco, el catálogo se sigue usando al
lado— y NO es un cajón que tape: el contenido se APARTA con el padding de
`body.con-panel`. Tapar el catálogo con el formulario sería quedarse con lo
peor de las dos formas: perder el sitio Y perder la vista.
══════════════════════════════════════════════════════════════════════════ */
:root { --w-panel-coa: 400px; }
.coa-form.acoplado {
position: fixed; left: 230px; top: 0; bottom: 0; /* 230px = ancho del menú */
width: var(--w-panel-coa); z-index: 40; margin: 0;
border: 0; border-right: 1px solid var(--line-strong); border-radius: 0;
box-shadow: 10px 0 30px rgba(15, 23, 42, .10);
display: flex; flex-direction: column; overflow: auto;
}
.coa-form.acoplado .blk { flex: none; }
/* El pie de acciones se queda pegado abajo: con el formulario largo, "Crear
cuenta" no se va nunca al fondo del scroll de la columna. */
.coa-form.acoplado .actions {
position: sticky; bottom: 0; margin-top: auto;
background: var(--surface-2); border-radius: 0; box-shadow: 0 -1px 0 var(--line);
}
/* El contenido se aparta. Y suelta su corsé de ancho mientras la columna está
puesta: con 400 px menos, mantenerlo dejaría el catálogo en una tira estrecha
con aire a los lados, que es lo contrario de lo que se está pagando. */
.main { transition: padding-left .18s ease; }
body.con-panel .main { padding-left: var(--w-panel-coa); }
body.con-panel .wrap-coa { max-width: none; }
/* La cabecera de la columna: con qué fila trabaja, y el camino de vuelta. */
.panel-cabecera {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 18px; background: var(--blue-soft);
border-bottom: 1px solid var(--blue-line);
font-size: 11.5px; color: var(--blue); font-weight: 600;
}
.panel-cabecera .ver-fila {
border: 1px solid var(--blue); background: var(--surface); color: var(--blue);
border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 700;
cursor: pointer; margin-left: auto; font-family: inherit;
}
.panel-cabecera .ver-fila:hover { background: var(--blue); color: #fff; }
/* Ámbar, no rojo: que el filtro esconda la fila no es un error de nadie. */
.panel-oculta { color: var(--amber); }
/* Botones por fila: discretos, para que la tabla siga siendo una tabla. */
.coa-acc { text-align: right; white-space: nowrap; }
.coa-ico {
border: 1px solid var(--line); background: var(--surface); border-radius: 7px;
padding: 3px 7px; margin-left: 3px; cursor: pointer; font-family: inherit;
font-size: 12px; line-height: 1.4; color: var(--muted);
}
.coa-ico:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.coa-ico-danger:hover { border-color: var(--red-line); color: var(--red); background: var(--red-soft); }
/* Separador entre lo que AÑADE (＋, ✎) y lo que QUITA DE EN MEDIO (apagar,
borrar). Los cuatro iconos iban pegados y desactivar se pulsaba sin querer. */
.coa-sep {
display: inline-block; width: 1px; height: 15px; vertical-align: middle;
margin: 0 5px 0 9px; background: var(--line-strong);
}
/* Confirmación de la desactivación, EN LA PROPIA CELDA — no hay ventanas
flotantes en esta app. Ámbar porque es una alerta suave y reversible: el rojo
está reservado para los rechazos del árbitro contable, y usarlo aquí mentiría
sobre la gravedad. Reactivar no pregunta: no le quita nada a nadie. */
.coa-confirma {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 4px 2px 9px; border-radius: 8px;
background: var(--amber-soft); border: 1px solid var(--line-strong);
color: var(--amber); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.coa-confirma button {
border: 1px solid var(--line-strong); background: var(--surface);
border-radius: 6px; padding: 2px 9px; cursor: pointer;
font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.5;
}
.coa-confirma .coa-si { color: var(--amber); border-color: var(--amber); }
.coa-confirma .coa-si:hover { background: var(--amber); color: var(--surface); }
.coa-confirma .coa-no { color: var(--muted); }
.coa-confirma .coa-no:hover { background: var(--surface-2); }
/* Botón de peligro: mismo acento rojo del ErrorBanner, sin colores nuevos. */
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: var(--red); filter: brightness(.93); }
/* Aviso PREVIO al borrado: enumera lo que se irá. Cuenta lo servido; no predice
ningún veredicto — el veredicto es del servidor. */
.coa-peligro { font-size: 12.5px; color: var(--ink); }
.coa-peligro p { margin: 0 0 8px; }
.coa-peligro-nota { color: var(--muted); font-size: 11.5px; }
.coa-lista {
margin: 0 0 10px; padding: 9px 13px 9px 30px; border-radius: 9px;
background: var(--red-soft); border: 1px solid var(--red-line);
font-variant-numeric: tabular-nums;
}
.coa-lista li { margin: 2px 0; }
/* ═══════════════════════════════════════════════════════════════════════════
TABLERO DE PRESUPUESTO — la casilla editable (FE2)
═══════════════════════════════════════════════════════════════════════════
Bloque AÑADIDO AL FINAL a propósito: es la superficie más pequeña posible en un
archivo que comparten todas las pantallas.
Cero tokens nuevos. Todo sale de los que ya existen (`--line-strong`, `--red*`,
`--amber*`, `--green-soft`). El aviso ámbar se dibuja con una BARRA lateral en
vez de un borde completo.
⚠️ Aquí decía «porque `--amber-line` no existe en esta paleta». Dejó de ser
cierto en F0 del rediseño del COA (2026-07-28): el token ya existe, en el hex
que la hoja usaba a mano (#FDE3C4). La BARRA lateral se conserva tal cual —
este bloque no se rediseña aquí—, pero si algún día se le pone borde completo,
ya hay token con el que hacerlo sin inventar color.
═══════════════════════════════════════════════════════════════════════════ */
.celda { position: relative; }
/* El campo del dinero: angosto, a la derecha y con cifras de ancho fijo, para que
las columnas de miles se alineen entre filas. Hereda del `input` global. */
.budget-in {
max-width: 170px; margin-left: auto; display: block;
text-align: right; font-variant-numeric: tabular-nums;
padding: 6px 10px; font-size: 12.5px;
}
/* ⭐ SIN CELDA vs CELDA EN CERO. Los dos llegan como "0.00" y significan lo
contrario. Con permiso de escritura los separa EL CONTORNO: la caja dice "aquí
se escribe", el punteado dice "todavía no se escribió", el 0 dice "se escribió
cero". Sin campo no hay contorno — por eso en solo lectura se escribe con
palabras, y esas dos formas son EL MISMO ESTADO: no las unifiques. */
.budget-in.vacia { border-style: dashed; }
.budget-in::placeholder { color: var(--line-strong); font-style: italic; }
.budget-in:disabled { opacity: .55; cursor: progress; }
.celda-vuelo { opacity: .7; }
/* El mensaje vive JUNTO A SU CASILLA, nunca en un banner de arriba: con 187 filas,
un banner en la cabecera te arranca de donde estabas. */
.celda-msg {
display: block; margin: 4px 0 2px; padding: 6px 9px; border-radius: 8px;
font-size: 11.5px; text-align: left; max-width: 340px; margin-left: auto;
white-space: normal;
}
.celda-msg.err { background: var(--red-soft); border: 1px solid var(--red-line); color: var(--red); }
.celda-msg.adv { background: var(--amber-soft); border-left: 3px solid var(--amber); color: var(--amber); }
/* La fila que falló SE QUEDA MARCADA hasta que alguien la atienda. No se desvanece
al repintar: el estado vive en JavaScript, no en el HTML. */
.tbl tbody tr.fila-err > td { background-color: var(--red-soft); }
.tbl tbody tr.fila-err > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.pie-sin-guardar { color: var(--red); font-weight: 700; }
/* Éxito: un destello y nada más. Un banner por celda, con cuarenta celdas, es ruido. */
.guardada-flash { animation: budget-flash 1.1s ease; }
@keyframes budget-flash {
0% { background-color: var(--green-soft); }
100% { background-color: transparent; }
}
/* ═══════════════════════════════════════════════════════════════════════════
⭐⭐ `B-2` · EL FOCO SE VE EN LOS BOTONES DE LA TABLA
═══════════════════════════════════════════════════════════════════════════
NO ES COSMÉTICO, y esa es la trampa de este hueco. Los botones de la fila
salieron del recorrido de Tab (`tabindex="-1"`, decisión de `B-2`) y la ÚNICA
ruta de vuelta a ellos son las flechas. Sin señal de foco, el atajo que el pie
del tablero anuncia lleva a un sitio que el usuario no puede ver: **lo
construido dependía de lo que faltaba**.
Hasta hoy no existía en NINGUNA rama — ni Budget ni el COA lo escribieron:
grep -c "focus-visible" app/static/css/estilo-b.css → 0
(los dos aciertos de `grep -rn "focus-visible" app/` eran los dos comentarios
de `budget/tablero.html` que decían que faltaba).
── LAS CUATRO FAMILIAS, y por qué son cuatro ─────────────────────────────
`.coa-chev` · `.coa-ico` (con su `.coa-ico-danger`) · `.coa-si` · `.coa-no`.
Las dos últimas solo aparecen con una confirmación de borrado abierta — que
es justo el momento en que el dedo está en el teclado. Contarlas como dos
familias en vez de cuatro es el error que ya se cometió una vez.
── SIRVE A LAS DOS PANTALLAS, A PROPÓSITO ────────────────────────────────
Las cuatro clases las emiten TANTO `budget/tablero.html` COMO
`accounts/gestionar.html`. La regla no lleva ningún ancestro que la acote a
una de las dos, y eso es la decisión: un `.budget-in ~ .coa-ico` que la
escondiera en la otra pantalla dejaría la mitad del problema sin resolver y
además parecería hecha. Por eso entra en el UAT de LAS DOS.
── POR QUÉ `:focus-visible` Y NO `:focus` ────────────────────────────────
`:focus` pinta el anillo también al pulsar con el ratón, y estos botones se
pulsan con el ratón todo el rato: la pantalla se llenaría de anillos que no
informan de nada. `:focus-visible` lo deja para cuando el navegador cree que
el usuario está navegando con el teclado, que es exactamente el caso que este
arreglo existe para servir.
── EL ANILLO, Y NADA MÁS ─────────────────────────────────────────────────
No se cambia el color del glifo: eso ya lo hace `:hover`, y hacer que foco y
hover se vean igual borra la distinción justo donde hace falta. El anillo va
en `var(--blue)` —el azul de la acción, el mismo del foco de los campos
(`estilo-b.css:215`)— y CERO colores nuevos.
⛔ QUE EL ANILLO SE VEA es del UAT y no lo cierra ninguna prueba: aquí no hay
navegador ni hay ojo. En concreto hay que mirarlo sobre los TRES fondos de la
escalera y sobre la fila apagada rayada, y en las dos pantallas.
═══════════════════════════════════════════════════════════════════════════ */
.coa-chev:focus-visible,
.coa-ico:focus-visible,
.coa-si:focus-visible,
.coa-no:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
/* ── El subtotal de rama SALTA sobre las hojas ──────────────────────────────
El mockup (`disenos/logger-budget-tablero-2026-07-28.html:238`) pide peso
**700**; `.tbl .money` da 600, que se lee bien pero no destaca sobre las
filas de abajo — y el subtotal es la única cifra de la pantalla que resume.
El `padding: 0 10px` es lateral y solo lateral: el vertical subía la fila de
40 a 42 px, medido en el mockup, y el árbol volvía a latir.
Va en un `` DENTRO del `| `, no en el `td`: la clase
`money` sostiene la alineación de la columna y hay pruebas que la buscan
literal. ⛔ Que se VEA el salto es del UAT. */
.subtotal {
display: block; text-align: right; font-variant-numeric: tabular-nums;
padding: 0 10px; font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════════════════
LA CAPA VISUAL PROPIA DEL TABLERO DE PRESUPUESTO
═══════════════════════════════════════════════════════════════════════════
El árbol —riel, escalera de fondos, jerarquía de la fila y el ancho de 1180—
NO se construye aquí: **ya estaba**, y se comprobó antes de escribir nada en
vez de darlo por supuesto. Cuelga de `.coa-n1/.coa-n2/.coa-n3`, que el tablero
ya pinta, y ninguna de esas 13 reglas exige `.coa-tbl` de ancestro. Lo que
falta es lo PROPIO de Budget: la caja del departamento, el aviso de solo
lectura, y las dos puertas.
⛔ AQUÍ NO ENTRA LA CABECERA PEGAJOSA, y no es un olvido. Sus tres causas
—`coa-wrap` en el envoltorio, medir `--h-trabajo` y una capa 2 pegajosa— siguen
SIN copiarse a esta pantalla. El trinquete
`tests/test_trinquete_coa_tbl_en_el_tablero.py` está puesto a propósito, sigue
armado, y su hermano `test_el_tablero_NO_copio_la_costura_de_lo_pegajoso`
vigila las otras dos causas.
⚠️ 2026-07-29, AL FUSIONAR: **la RAZÓN que este bloque daba ya no vale, y la
decisión sí.** Decía *«F5 es una de las fases que todavía no ha pasado por el
UAT. Copiarla antes duplicaría el error si lo hay»*. Las dos mitades cayeron:
la costura del COA pasó por el UAT ese día, y **el error que se temía existía
de verdad** —la cabecera dejaba de pegarse y TAPABA UNA FILA del plan—, se
arregló en `coa/sticky` (`b4103fe`) y Stiven lo miró en pantalla. Así que ya no
se está esperando a nada. Lo que queda en pie es más simple: esta pantalla no
la necesita hoy, coserla es un encargo con su acta, y **cada causa por
separado la deja igual de rota y con el mismo aspecto de estar puesta** — que
es el motivo real por el que los dos guardianes siguen armados.
Cero colores nuevos y cero tokens nuevos: todo sale de la paleta clínica que
ya existe.
═══════════════════════════════════════════════════════════════════════════ */
/* La caja del departamento. NO es adorno: el presupuesto se asigna POR
departamento, y la celda es el cruce (producción · rubro · departamento).
Enseñar los montos de UNO haciéndolos pasar por los de la producción entera
sería el peor error posible en esta pantalla, así que de qué departamento son
las cifras tiene que leerse antes que las cifras. Por eso va en azul y en caja,
y no como un rótulo gris más de la barra de filtros. */
.depto {
display: inline-flex; align-items: center; gap: 7px; flex: none;
background: var(--blue-soft); border: 1px solid var(--blue-line);
border-radius: 9px; padding: 5px 10px;
}
/* ⚠️ ESTA REGLA GANA POR ORDEN, NO POR PESO, y hay que saberlo antes de mover
nada. `.depto .lab` y `.view-toggle .lab` (línea 286) tienen la MISMA
especificidad (0,2,0): quien gane depende de cuál se lea después, y esta se lee
después porque este bloque está al final de la hoja. Subir este bloque de sitio
devolvería el rótulo a gris de 11,5 px sin que nadie tocara una declaración.
Lo vigila `test_la_caja_del_departamento_GANA_a_la_barra_de_filtros`, que
compara las dos posiciones en el archivo — no basta con leer las dos reglas. */
.depto .lab {
font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
color: var(--blue); font-weight: 700; margin-right: 0;
}
.depto select {
width: auto; border: 1px solid var(--blue-line); background: var(--surface);
border-radius: 7px; padding: 4px 8px; font-size: 12.5px; color: var(--ink);
font-weight: 600;
}
/* El aviso de solo lectura, en azul. Es información, no un rechazo: el rojo está
reservado al árbitro contable y usarlo aquí mentiría sobre la gravedad.
Reutiliza la forma del `.errbanner` (mismo `display:flex`, mismo `.et`/`.em`)
con la familia del azul.
⚠️ HOY NO LLEVA TÍTULO (`.et`), y es deliberado: el mockup dibuja dos motivos
distintos —rol y producción archivada— y el endpoint todavía no sirve
`motivo_no_escribe` (encargo `E1`). Inventar aquí un título sería redactar un
motivo que el backend no ha dicho. Cuando `E1` llegue, el título tiene su
hueco ya hecho. */
.infobanner {
display: flex; align-items: flex-start; gap: 10px;
background: var(--blue-soft); border: 1px solid var(--blue-line);
border-radius: 9px; padding: 11px 14px; margin-bottom: 16px;
font-size: 12.5px; color: var(--ink);
}
.infobanner.hide { display: none; }
.infobanner .et { font-weight: 700; color: var(--blue); }
.infobanner .em { color: var(--ink); margin-top: 2px; }
/* Las dos puertas: el 400 que pide elegir departamento y el 403 que dice que ese
departamento no es el tuyo. Van centradas y con aire, porque son la pantalla
ENTERA en ese momento — no un aviso dentro de otra cosa. Sustituyen a cuatro
`style="…"` en línea, que hacían el mismo trabajo escondidos donde ningún
guardián de la paleta los ve. */
.puerta { padding: 40px 26px; text-align: center; }
.puerta h3 { font-size: 17px; margin-bottom: 8px; }
.puerta p { color: var(--muted); font-size: 12.5px; max-width: 520px; margin: 0 auto 16px; }
.puerta .lista {
display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
}
/* La nota del rubro apagado. Va en ámbar y en negrita porque dice algo que hay
que creerse: **su Budget sigue contando**. En gris de 11 px se lee como un
metadato más y el contador la salta — que es justo el malentendido caro.
⚠️ Lo que esta nota NO dice es QUÉ nivel lo apagó: el endpoint sirve
`activo_efectivo` (el resultado), no su origen. Igualar el color es de
frontend; igualar el TEXTO del mockup («apagado por su propio interruptor»)
necesita el backend (`D-3`) y no se inventa aquí. */
.apagada-nota {
display: block; font-size: 10.5px; color: var(--amber); font-weight: 700;
}
|