*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }
:root {
--bg: #f5f6f8;
--surface: #fff;
--border: #e0e3e8;
--text: #1a1d23;
--text-muted: #6b7280;
--accent: #3b82f6;
--green: #16a34a;
--red: #dc2626;
--orange: #d97706;
--blue: #2563eb;
/* Color de MARCA (§12-bis): único punto de recoloreo entre Opi y contabilidad.
Contabilidad lo tiene en ladrillo (var(--brand)); Opi en teal.
⚠️ §33A · EL TEAL ES EL ACENTO DE OPI, no sólo el nav y el botón primario.
Hasta acá `--accent` (azul, herencia de contabilidad) pintaba 58 usos y
`--brand` sólo 7: el azul genérico se veía NUEVE VECES MÁS que el color de
la marca, y un texto en #3b82f6 sin subrayado se lee como un link de
navegador sin estilar. Los 47 usos de identidad/acción pasaron a teal.
LA REGLA, y no es estética — es CONTRASTE MEDIDO sobre blanco:
· `color:` (el texto ES el color) → var(--brand-strong) 5,47 ✅
· background / border / box-shadow → var(--brand) (lleva
texto blanco encima)
`--brand` como TEXTO da 3,74, tan ilegible como el azul que reemplaza
(3,68), los dos por debajo del mínimo 4,5 de WCAG. Aplicarlo sin partir en
dos tokens habría cambiado el color sin arreglar nada.
LO QUE SIGUE EN AZUL, a propósito:
· los anillos de `:focus` (11 usos) — es una affordance de accesibilidad
estandarizada, no identidad, y acá sí vale «que se vea igual que en
contabilidad»;
· los badges semánticos (#dbeafe/#1d4ed8) y `--blue` — ahí el azul
SIGNIFICA algo (manual, transferencia, oficial), no decora;
· `.aviso-fuera` — es informativo: un aviso en teal se confunde con un
elemento activo. */
--brand: #0d9488;
--brand-strong: #0f766e;
}
html, body { height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px; color: var(--text); background: var(--bg); }
/* Header */
.header { display: flex; align-items: center; justify-content: space-between;
padding: 0 20px; height: 52px; background: #1a1d23;
border-bottom: none; position: sticky; top: 0; z-index: 100; }
.app-logo { color: #fff; font-size: 15px; font-weight: 700; }
.header-logo-wrap { display: flex; flex-direction: column; line-height: 1.2; }
.header-perfil-sub { color: #9ca3af; font-size: 11px; }
.nav { display: flex; gap: 2px; align-items: center; }
.nav-link { padding: 6px 9px; border-radius: 6px; text-decoration: none;
color: #9ca3af; transition: background .15s; font-size: 13px; white-space: nowrap; }
.nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-link.active { background: var(--brand); color: #fff; }
/* Separador visual entre grupos del nav (motor | estudio | config) */
.nav-link.nav-sep { margin-left: 7px; border-left: 1px solid #3d4149; padding-left: 12px; }
.selector-group { display: flex; gap: 8px; align-items: center; }
/* Perfil switcher — botones directos */
.perfil-btn { padding: 5px 12px; border-radius: 6px; text-decoration: none;
font-size: 13px; color: var(--text-muted); border: 1px solid transparent;
transition: all .15s; white-space: nowrap; }
.perfil-btn:hover { background: var(--bg); color: var(--text); }
.perfil-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
/* Año — select nativo, clic directo */
.año-select { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); font-size: 13px; cursor: pointer; }
.año-select:focus { outline: 2px solid var(--accent); }
/* §25.1 · Selector de MES (el período global), al lado del de año. Más ancho
porque sus opciones son palabras («Septiembre», «Todo 2026») y no cuatro
dígitos: con el ancho del de año, «Todo 2026» se recorta y el operador no
puede leer en qué período está parado. */
.mes-select { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); font-size: 13px; cursor: pointer; min-width: 118px; }
.mes-select:focus { outline: 2px solid var(--accent); }
/* Selects dentro del header sobre fondo oscuro */
header select { background: #2d3139; color: #fff; border: 1px solid #3d4149;
border-radius: 6px; padding: 4px 10px; font-size: 13px; }
header .año-select { background: #2d3139; color: #fff; border: 1px solid #3d4149; }
header .mes-select { background: #2d3139; color: #fff; border: 1px solid #3d4149; }
/* Botón Nueva entrada */
.btn-nuevo { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px;
background: var(--brand); color: #fff; border: none; border-radius: 6px;
cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; }
.btn-nuevo:hover { background: var(--brand-strong); color: #fff; }
/* §65.6.e · Exportar. SECUNDARIO por diseño: contorno y no relleno, para que no
compita con el `.btn-nuevo` que está al lado — dos botones del color de marca
en el mismo renglón se leen como dos acciones igual de importantes, y no lo
son (una se usa cincuenta veces por sesión y la otra una).
`flex: 0 0 auto` porque `.movs-cabecera` es `nowrap`: sin eso el botón se
encoge antes que los chips y «Exportar» se parte en dos renglones. El que
absorbe el ancho es `.chips-bar`, que para eso tiene `flex: 1 1 auto` con
`min-width: 0` y su propio scroll. */
.btn-export { display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; background: var(--surface);
color: var(--text-muted); border: 1px solid var(--border);
border-radius: 6px; font-size: 13px; font-weight: 600;
text-decoration: none; flex: 0 0 auto; white-space: nowrap; }
.btn-export:hover { border-color: var(--brand); color: var(--brand); }
/* Modal alta manual */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200;
display: flex; align-items: center; justify-content: center; }
.modal-overlay.hidden { display: none; }
/* §38 [a] · ⚠️ EL `max-height` VA ACÁ, EN EL CANON, Y NO EN CADA MODAL.
El de Proyectos mide 618px y NO scrolleaba: `max-height:none`,
`overflow:visible`. En un viewport de menos de ~620px el botón «Guardar»
quedaba fuera del corte y era INALCANZABLE — no hay forma de llegar a él, ni
con rueda ni con teclado, porque la app no scrollea la ventana
(`html,body{overflow:hidden}`).
Sólo `#modal-cli` y `#modal-vincular` lo tenían, cada uno con su propio
override: dos parches puntuales sobre un problema que es de TODOS los modales
—cualquiera que crezca lo suficiente lo tiene—, y que se descubre de a uno,
en producción, cuando ya no se puede guardar. Puesto en `.modal-box` lo
heredan los nueve, incluidos los que todavía no existen. */
.modal-box { background: #fff; border-radius: 12px; padding: 28px; width: 520px;
max-width: 95vw; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
max-height: 92vh; overflow-y: auto; }
.modal-box h2 { font-size: 16px; font-weight: 700; margin-bottom: 20px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-grid .full { grid-column: 1 / -1; }
/* RONDA 2 · Media fila. Un `` de texto largo —un nombre— no necesita
las tres columnas, pero con una sola queda angosto: con dos llena su
renglón junto a un campo corto y no deja el hueco que Dave marcó. */
.modal-grid .span2 { grid-column: span 2; }
/* ── RONDA 1 · EL MODAL ANCHO ────────────────────────────────────────────────
Hallazgo de Dave: los modales de muchos campos quedaban angostos y ALTOS, con
scroll, mientras sobraba pantalla a los costados. Son 520px sobre monitores de
1366 y 1512: dos tercios del ancho sin usar, y a cambio el operador scrollea
para llegar a «Guardar».
La cura NO es subirle el `max-height` —eso deja el scroll donde está— sino
darle COLUMNAS: con tres, los catorce campos de Proyecto entran en cinco
renglones en vez de siete, y el modal deja de tocar el techo.
⚠️ SE APLICA POR CLASE Y NO AL CANON. `.modal-box` de 520px sigue siendo el
default correcto para los modales de cuatro campos (Ítems, Familias): un modal
de 900px para pedir un nombre se lee peor, no mejor. El ancho lo pide el que
tiene los campos.
⚠️ Y BAJA A DOS Y A UNA COLUMNA por breakpoint. Sin esto, tres columnas de
~280px en un viewport de 900 dan campos de 90px donde no entra un importe.
`width:auto` en el último tramo evita que 900px fijos desborden la pantalla. */
.modal-box.modal-ancho { width: 900px; }
.modal-ancho .modal-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px 18px; }
/* ⚠️⚠️ RONDA 2 · EL ANCHO NO ALCANZÓ: EL SCROLL SEGUÍA.
La ronda 1 ensanchó a 900px y dio tres columnas, pero no tocó **una sola de
las medidas verticales**: el modal seguía con 28px de padding, 20px bajo el
título, 12px entre filas, 20px sobre los botones y campos de 7px+13px. A
1080p de alto el viewport útil son ~940px y el modal de Proyecto medía ~1000.
Lo que se compacta acá es TODO lo vertical, y en proporción — no un solo
número grande, que es lo que deja una pantalla desbalanceada:
padding 28 → 18px
h2 margen 20 → 12px
gap de filas 12 → 9px
acciones 20 → 12px
campos 7/13 → 5/12.5px
Suman ~140px sobre un modal de catorce campos: entra sin scroll y sin que
ningún control quede apretado contra otro.
⚠️ Y VA SOBRE `.modal-ancho`, NO SOBRE EL CANON: los modales de cuatro campos
no tienen problema de altura, y apretarlos sería empeorarlos para arreglar
algo que no les pasa. */
.modal-box.modal-ancho { padding: 18px 20px; }
.modal-ancho h2 { margin-bottom: 12px; }
.modal-ancho .modal-grid { gap: 9px 18px; }
.modal-ancho .modal-actions { margin-top: 12px; }
.modal-ancho .form-group { gap: 2px; }
.modal-ancho .form-group input,
.modal-ancho .form-group select,
.modal-ancho .form-group textarea { padding: 5px 9px; font-size: 12.5px; }
.modal-ancho .form-group label { font-size: 10px; }
/* Los `` de ayuda debajo de un campo (la cuota en vivo, el «calculado =
m²×valor») no ganan un renglón entero: se apoyan sobre el input. */
.modal-ancho .form-group small { font-size: 10px; line-height: 1.25; }
/* El separador de grupo, más fino. */
.modal-ancho .modal-grid .grupo-rot { padding-top: 7px; margin-top: 1px; }
/* Un separador con título dentro de la grilla: agrupa los campos que van juntos
(«Honorario fijo», «Honorario variable») sin sacarlos de la misma grilla. */
.modal-grid .grupo-rot { grid-column: 1 / -1; font-size: 11px; font-weight: 700;
color: var(--brand-strong); text-transform: uppercase; letter-spacing: .04em;
border-top: 1px solid #e5e7eb; padding-top: 10px; margin-top: 4px; }
.modal-grid .grupo-rot:first-child { border-top: none; padding-top: 0; margin-top: 0; }
/* El checkbox de «¿cobra?» ocupa su celda como un campo más, alineado con los
de al lado y no colgado al pie del modal (que es donde estaba el del variable,
a cinco campos de distancia del % con el que forma pareja). */
.form-group.chk-campo { justify-content: flex-end; }
.form-group.chk-campo label { display: flex; align-items: center; gap: 8px;
text-transform: none; font-size: 13px; color: #374151; font-weight: 500;
padding-bottom: 7px; }
.form-group.chk-campo input[type="checkbox"] { width: 16px; height: 16px;
accent-color: var(--brand); }
@media (max-width: 1180px) {
.modal-ancho .modal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.modal-box.modal-ancho { width: auto; }
.modal-ancho .modal-grid { grid-template-columns: 1fr; }
}
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group label { font-size: 11px; font-weight: 600; color: #6b7280; text-transform: uppercase; }
.form-group input, .form-group select, .form-group textarea {
padding: 7px 10px; border: 1px solid #e0e3e8; border-radius: 6px; font-size: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.btn-cancel { padding: 7px 16px; background: #f3f4f6; border: none; border-radius: 6px;
cursor: pointer; font-size: 13px; }
/* Importar — step flow */
.step-nav { display: flex; gap: 0; margin-bottom: 24px; }
.step-item { flex: 1; text-align: center; padding: 10px; background: var(--bg);
border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.step-item:first-child { border-radius: 8px 0 0 8px; }
.step-item:last-child { border-radius: 0 8px 8px 0; }
.step-item.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.step-item.done { background: #dcfce7; color: #15803d; border-color: #86efac; }
.dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 40px;
text-align: center; color: var(--text-muted); cursor: pointer;
transition: border-color .2s; }
.dropzone:hover, .dropzone.drag-over { border-color: var(--brand); color: var(--brand); }
.dropzone input[type=file] { display: none; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #e0e3e8;
border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.preview-table { font-size: 12px; }
.preview-table select { font-size: 12px; padding: 2px 6px; border: 1px solid var(--border);
border-radius: 4px; background: var(--surface); max-width: 140px; }
.badge-src-ia { background: #dcfce7; color: #15803d; font-size: 10px; padding: 2px 6px;
border-radius: 8px; font-weight: 600; }
.badge-src-regla { background: #dbeafe; color: #1d4ed8; font-size: 10px; padding: 2px 6px;
border-radius: 8px; font-weight: 600; }
.badge-src-manual { background: #f3f4f6; color: #6b7280; font-size: 10px; padding: 2px 6px;
border-radius: 8px; font-weight: 600; }
.page-header { display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; }
/* Sub-nav de los cuatro estados de cuenta.
⚠️ El rótulo decía «Resumen tabs» y quedó viejo: `.tab-bar`/`.tab-link` viven
HOY sólo en `templates/estudio/_estados_macros.html`, en ninguna otra pantalla
(§45 lo verificó por grep antes de tocarlos). Por eso se pueden ajustar sin
colaterales — si algún día vuelven a otra pantalla, esto deja de ser cierto. */
.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); }
/* §45 · 8px/14px -> 5px/13px: 35px -> 28px. Es una barra de navegación de cuatro
palabras, no un bloque de lectura; el alto que tenía era aire. */
.tab-link { padding: 5px 16px; text-decoration: none; color: var(--text-muted); font-size: 13px;
font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--brand-strong); border-bottom-color: var(--brand); font-weight: 600; }
/* Main — flex column con altura fija y scroll interno */
.main-content { height: calc(100vh - 52px); max-width: 1400px; margin: 0 auto;
width: 100%; padding: 0; display: flex; flex-direction: column;
overflow: hidden; }
.main-content > .flash { margin: 14px 24px 0; }
/* Wrapper estándar: contenido scrolleable de la página */
.page-scroll { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px;
min-height: 0; }
/* Wrapper especial /movimientos: filtros y stats fijos arriba, tabla scroll dentro */
.page-movs { flex: 1 1 auto; display: flex; flex-direction: column;
padding: 20px 24px; min-height: 0; overflow: hidden; }
.page-movs > .table-wrapper { flex: 1 1 auto; overflow-y: auto;
min-height: 0; }
.page-header h1 { font-size: 20px; font-weight: 700; }
/* Stats bar */
.stats-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; align-items: stretch; }
.stat-sep { margin-left: 8px; border-left: 2px solid var(--border); padding-left: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 18px; font-weight: 700; }
.stat-value.green { color: var(--green); }
.stat-value.red { color: var(--red); }
.stat-value.orange { color: var(--orange); }
.stat-value.blue { color: var(--blue); }
/* Filtros */
.filtros-form { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.filtros-form select { padding: 6px 10px; border: 1px solid var(--border);
border-radius: 6px; background: var(--surface); font-size: 13px; }
.btn-clear { padding: 6px 12px; background: #fee2e2; color: var(--red); border-radius: 6px;
text-decoration: none; font-size: 13px; }
.flash { padding: 10px 18px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.flash-ok { background: #dcfce7; color: #15803d; }
.flash-error { background: #fee2e2; color: #b91c1c; }
/* §20 · Aviso blando: ni error ni éxito. Mismo ámbar que los chips de "cerca
del tope" del semáforo (§7.6), que es exactamente el mismo registro. */
.flash-aviso { background: #fef3c7; color: #92400e; }
/* Table */
.table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; }
/* table-card: igual apariencia que table-wrapper pero SIN overflow propio.
Permite que `thead position:sticky` se ancle al ancestro scrolleable
(.page-scroll) en lugar de crear un sticky context interno inútil. */
.table-card { background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* `table-layout: fixed` SOLO donde las columnas declaran todos sus anchos y se
quiere elipsis por celda. Era el default global, y ahí estaba el bug: en los
ABM la columna de acciones no declara ancho, así que recibía apenas el % que
sobraba (en Clientes 16% ≈ 208px) para unos botones que miden ~245px fijos;
como además `td { overflow: hidden }`, en vez de ensancharse los recortaba y
"Eliminar" quedaba cortado. Con el layout automático el ancho lo mide el
navegador a partir del contenido, sin números mágicos.
(.table-codif ya se salía de `fixed` con un table-layout:auto inline.) */
.table-movimientos, .table-resumen { table-layout: fixed; }
thead { position: sticky; top: 0; z-index: 5; }
thead tr { background: var(--bg); }
th { padding: 10px 8px; text-align: left; font-weight: 600; font-size: 11px;
text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
background: var(--bg);
border-bottom: 1px solid var(--border);
box-shadow: inset 0 -1px 0 var(--border);
white-space: nowrap; overflow: hidden; }
td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle;
overflow: hidden; }
tr:last-child td { border-bottom: none; }
th.num, td.num { text-align: right; }
.empty { text-align: center; color: var(--text-muted); padding: 32px; }
/* Column widths — tabla de movimientos
Canal ensanchado (64→128) para mostrar "First Citizens U$S" en línea.
Nueva col F. valor (56) extrae fecha valor desde referencia.
Nota reducida (150→120). Rubro 192. col-actions: 70 con dos íconos.
*/
.table-movimientos .col-fecha { width: 60px; }
.table-movimientos .col-canal { width: 128px; }
.table-movimientos .col-moneda { width: 34px; }
.table-movimientos .col-detalle { width: auto; } /* flex: ocupa el resto */
.table-movimientos .col-fvalor { width: 56px; }
.table-movimientos .col-nota { width: 120px; }
.table-movimientos .col-num { width: 82px; }
.table-movimientos .col-rubro { width: 192px; }
.table-movimientos .col-origen { width: 58px; }
.table-movimientos .col-saldo { width: 82px; }
.table-movimientos .col-actions { width: 70px; }
.table-movimientos td.fvalor { color: var(--text-muted); font-size: 12px;
white-space: nowrap; }
.verde { color: var(--green); font-weight: 600; }
.rojo { color: var(--red); font-weight: 600; }
.detalle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detalle .ref-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref { color: #9ca3af; font-size: 11px; }
td.canal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fecha { white-space: nowrap; color: var(--text-muted); font-size: 12px; }
/* §65.6.b · La PREVISTA, medio tono por debajo de la fecha real: la real es un
hecho contable y la prevista es una intención que ya caducó. Dibujarlas
iguales pondría a competir dos fechas vecinas por la misma lectura. */
td.prev-cell { color: #9ca3af; }
/* El «+N» de la fila que cubre entregas de varias tandas: marca que hay más y
manda al `title`, sin robarle ancho a la fecha. */
.prev-varias { font-size: 9px; color: #92400e; vertical-align: super;
margin-left: 2px; }
.mon-badge { font-size: 10px; background: var(--bg); padding: 1px 4px; border-radius: 3px;
color: var(--text-muted); }
/* Selects inline */
.sel-rubro { font-size: 12px; padding: 2px 4px; border: 1px solid var(--border);
border-radius: 4px; background: transparent; width: 100%; max-width: 100%; }
.sel-rubro:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Input comentario (Nota) */
.nota-cell { padding: 4px 6px; }
.inp-comentario { font-size: 12px; padding: 3px 6px; border: 1px solid #d1d5db;
border-radius: 4px; background: #fff; width: 100%;
color: var(--text); }
.inp-comentario:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Badges */
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.badge-ia { background: #dcfce7; color: #15803d; }
.badge-manual { background: #dbeafe; color: #1d4ed8; }
.badge-pendiente { background: #fef9c3; color: #a16207; }
.badge-regla { background: #ede9fe; color: #6d28d9; }
.badge-dup { background: #fde68a; color: #92400e; font-weight: 700; }
/* Action buttons en filas de tabla — íconos SVG uniformes */
.actions-cell { padding-right: 14px; text-align: right; white-space: nowrap; }
.actions-cell button { background: none; border: none; cursor: pointer;
padding: 4px; border-radius: 4px; line-height: 0;
color: var(--text-muted); transition: all .12s; }
.actions-cell button:hover { background: #f3f4f6; }
.actions-cell button svg { width: 16px; height: 16px; display: block; }
.btn-edit:hover { color: var(--brand); }
.btn-delete:hover { color: var(--red); background: #fee2e2; }
.btn-regla-inline { font-size: 14px !important; line-height: 1 !important; padding: 2px 6px !important; }
/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 20px 24px; margin-bottom: 20px; }
.card h2 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
/* TC grid */
.tc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 14px; }
.tc-item { display: flex; flex-direction: column; gap: 4px; }
.tc-item label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.tc-item input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; width: 100%; }
/* Config table */
.table-config { width: 100%; }
.table-config td, .table-config th { padding: 8px 12px; }
/* Resumen table */
.table-resumen { font-size: 12px; }
.table-resumen th, .table-resumen td { padding: 6px 10px; }
.cel-neg { color: var(--red); }
.cel-pos { color: var(--green); }
.fila-total td { border-top: 2px solid var(--border); background: var(--bg); }
/* Saldo column */
.saldo-cell { color: var(--text); }
/* Buttons */
.btn-primary { padding: 8px 18px; background: var(--brand); color: #fff; border: none;
border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-primary:hover { background: var(--brand-strong); } /* §33A · era #2563eb: el hover de un botón teal no puede ser azul */
.btn-secondary { padding: 8px 18px; background: #f3f4f6; color: #374151; border: 1px solid #e0e3e8;
border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-secondary:hover { background: #e5e7eb; }
/* Filas especiales en resumen */
tr.fila-subtotal td {
background: #1e3a5f;
color: #fff;
font-weight: 700;
}
tr.fila-subtotal td.cel-neg { color: #fca5a5; }
tr.fila-subtotal td.cel-pos { color: #86efac; }
tr.fila-especial td {
background: #f0fdf4;
font-style: italic;
}
tr.fila-no td {
background: #f9fafb;
color: #9ca3af;
font-size: 11px;
}
/* ───────────────────────────────────────────────────────────────────────────
Compartidos /auditoria, /reglas, /mover-a-empresa (tema claro unificado)
─────────────────────────────────────────────────────────────────────── */
/* Stat-chip: pill con conteo + label, fondo blanco con borde */
.stat-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 7px 14px; font-size: 13px; color: var(--text-muted); }
.stat-chip span { font-weight: 700; font-size: 15px; color: var(--text); margin-right: 4px; }
.stat-chip.alta span { color: var(--green); }
.stat-chip.media span { color: #b45309; }
.stat-chip.baja span { color: var(--orange); }
.stat-chip.aprobado span { color: var(--green); }
.stat-chip.rechazado span{ color: var(--red); }
/* Sub-nav tabs (paneles internos: /reglas Sugerencias / Activas) */
.subnav-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 18px; }
.subnav-tab { background: none; border: none; padding: 9px 22px; font-size: 14px; font-weight: 600;
color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: -2px; }
.subnav-tab:hover { color: var(--text); }
.subnav-tab.active { color: var(--brand-strong); border-bottom-color: var(--brand); }
.subnav-tab .count-pill { background: var(--bg); color: var(--text-muted); border-radius: 10px;
padding: 1px 7px; font-size: 11px; margin-left: 6px; font-weight: 600; }
.subnav-tab.active .count-pill { background: var(--brand); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
/* Botones aprobar / rechazar inline (chips suaves) */
.btn-aprobar { background: #dcfce7; color: #15803d; border: 1px solid #86efac;
border-radius: 5px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-aprobar:hover { background: #bbf7d0; }
.btn-rechazar { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca;
border-radius: 5px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-rechazar:hover { background: #fecaca; }
.btn-row { display: flex; gap: 6px; }
.btn-disabled { opacity: 0.4; cursor: default; pointer-events: none; }
/* Botón delete chico (eliminar regla en /reglas) */
.btn-del { background: none; border: 1px solid var(--border); color: var(--red);
border-radius: 5px; padding: 2px 9px; font-size: 12px; cursor: pointer; }
.btn-del:hover { background: #fee2e2; border-color: #fecaca; }
/* Patrón monoespaciado (chip) */
.patron-mono { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px;
background: var(--bg); padding: 2px 7px; border-radius: 4px;
color: var(--blue); border: 1px solid var(--border); }
/* Cobertura bar — barra de progreso fina */
.cob-bar { display: inline-flex; align-items: center; gap: 8px; }
.cob-n { font-weight: 700; color: var(--text); min-width: 24px; }
.cob-bg { width: 80px; height: 6px; background: var(--bg); border: 1px solid var(--border);
border-radius: 3px; overflow: hidden; }
.cob-fill{ height: 100%; background: var(--brand); border-radius: 3px; }
/* Confianza % */
.conf-pct { font-size: 12px; font-weight: 600; }
.conf-hi { color: var(--green); }
.conf-mid { color: #b45309; }
.conf-lo { color: var(--orange); }
/* Badges de tipo (egreso/ingreso/transferencia/neutro/otro) — paleta soft del resto de la app */
.badge-tipo-egreso { background: #fee2e2; color: #b91c1c; }
.badge-tipo-gasto { background: #fee2e2; color: #b91c1c; } /* alias legacy */
.badge-tipo-ingreso { background: #dcfce7; color: #15803d; }
.badge-tipo-transferencia { background: #dbeafe; color: #1d4ed8; }
.badge-tipo-neutro { background: #f3f4f6; color: #6b7280; }
.badge-tipo-otro { background: #fef9c3; color: #a16207; }
/* Badges de confianza (alta/media/baja) */
.badge-confianza-alta { background: #dcfce7; color: #15803d; }
.badge-confianza-media { background: #fef9c3; color: #a16207; }
.badge-confianza-baja { background: #ffedd5; color: #c2410c; }
/* Badge de estado (pendiente/aprobado/rechazado) reusa .badge-pendiente etc. */
.badge-aprobado { background: #dcfce7; color: #15803d; }
.badge-rechazado { background: #fee2e2; color: #b91c1c; }
/* Toggle real / oficial / consolidado de los estados de cuenta.
⚠️ El rótulo decía «/auditoria» y quedó viejo igual que el de `.tab-bar`: hoy
sólo lo usa `_estados_macros.html` (§45, verificado por grep).
§45 · padding 5px -> 3px: 26px -> 22px. Son tres palabras cortas. */
.filter-segmented { display: flex; gap: 4px; }
.filter-segmented a { padding: 3px 11px; border-radius: 6px; font-size: 12px; text-decoration: none;
background: var(--surface); color: var(--text-muted); border: 1px solid var(--border); }
.filter-segmented a.active, .filter-segmented a:hover {
background: var(--brand); color: #fff; border-color: var(--brand); }
/* /auditoria — selector de rubro inline en la celda de acción */
.action-cell { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.action-cell .rubro-select { background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 5px;
padding: 5px 8px; font-size: 12px; width: 100%; }
.action-cell .rubro-select:focus { outline: none; border-color: var(--accent); }
/* Bloque descriptivo (texto explicativo arriba del contenido) */
.desc-block { background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
padding: 14px 18px; margin-bottom: 18px; color: var(--text-muted);
font-size: 13px; line-height: 1.55; max-width: 720px; }
.desc-block strong { color: var(--text); }
.desc-block-compact { padding: 7px 14px; margin-bottom: 12px; line-height: 1.4;
font-size: 12px; max-width: none; }
/* Empty state */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state h3 { color: var(--text); margin-bottom: 8px; font-size: 16px; font-weight: 600; }
/* Inputs / selects sobre fondo claro (auditoria, reglas search bar, etc.) */
.input-light, .select-light {
background: var(--surface); color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 6px 12px; font-size: 13px;
}
.input-light::placeholder { color: var(--text-muted); }
.input-light:focus, .select-light:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
/* Umbral group (input numérico inline) */
.umbral-group { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.umbral-group input { width: 56px; background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 5px;
padding: 4px 8px; font-size: 13px; text-align: center; }
/* /mover-a-empresa — grid de selección de rubros */
.rubro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 8px; margin-bottom: 18px; }
.rubro-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
background: var(--surface); border-radius: 6px; border: 1px solid var(--border);
cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
.rubro-item:hover { border-color: var(--brand); background: #f0fdfa; } /* §33A · teal-50: era #eff6ff (azul-50) y el borde ya es teal */
.rubro-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--brand);
cursor: pointer; flex-shrink: 0; }
.rubro-item .rubro-nombre { font-size: 13px; color: var(--text); flex: 1; }
.rubro-item .rubro-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }
.rubro-item .rubro-count { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.select-all-row { display: flex; gap: 14px; margin-bottom: 12px; font-size: 12px; }
.select-all-row button { background: none; border: none; color: var(--brand-strong); cursor: pointer;
text-decoration: underline; font-size: 12px; padding: 0; }
/* Iconos SVG genéricos */
.icon-btn { background: none; border: none; padding: 4px; border-radius: 4px;
cursor: pointer; color: var(--text-muted); line-height: 0;
transition: all .12s; }
.icon-btn:hover { background: var(--bg); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; display: block; }
/* ───────────────────────────────────────────────────────────────────────────
/dashboard — tema claro
─────────────────────────────────────────────────────────────────────── */
.section-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: .06em; margin: 18px 0 10px; font-weight: 600; }
.summary-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 700px) { .summary-cards { grid-template-columns: 1fr; } }
.summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 16px 20px; }
.summary-card .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase;
letter-spacing: .05em; margin-bottom: 6px; font-weight: 600; }
.summary-card .value { font-size: 26px; font-weight: 700; color: var(--text); }
.summary-card.ing .value { color: var(--green); }
.summary-card.eg .value { color: var(--red); }
.summary-card.net .value.pos { color: var(--green); }
.summary-card.net .value.neg { color: var(--red); }
.summary-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px; margin-bottom: 28px; }
.mini-card { padding: 14px 16px; }
.card-canal { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.card-moneda { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.card-saldo { font-size: 20px; font-weight: 700; margin-top: 5px; color: var(--text); }
.card-saldo.pos { color: var(--green); }
.card-saldo.neg { color: var(--red); }
.card-saldo.na { color: var(--text-muted); font-size: 13px; font-weight: 500; }
.card-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.chart-box { padding: 18px; margin-bottom: 20px; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-title { font-size: 14px; font-weight: 600; color: var(--text); }
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } }
.chart-canvas-wrap { position: relative; height: 280px; }
.evol-canvas-wrap { position: relative; height: 220px; }
.chart-toggle { display: flex; gap: 4px; flex-shrink: 0; }
.btn-toggle { padding: 4px 12px; background: var(--surface); border: 1px solid var(--border);
border-radius: 5px; font-size: 11px; color: var(--text-muted); cursor: pointer; font-weight: 600; }
.btn-toggle:hover { border-color: var(--brand); color: var(--brand-strong); }
.btn-toggle.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.mes-selector { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.btn-mes { padding: 4px 10px; background: var(--surface); border: 1px solid var(--border);
border-radius: 5px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.btn-mes:hover { border-color: var(--brand); color: var(--brand-strong); }
.btn-mes.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
/* ───────────────────────────────────────────────────────────────────────────
Searchable select (searchable-select.js)
─────────────────────────────────────────────────────────────────────── */
.srch { position: relative; display: inline-block; width: 100%; }
/* §27 · En la BARRA DE FILTROS el combo no va a 100%.
`.srch` nace en 100% porque casi siempre vive adentro de algo que ya le fija
el ancho —una celda de tabla, un .form-group de modal— y ahí llenar el hueco
es exactamente lo que se quiere. Pero `.filtros-form` es
`display:flex; flex-wrap:wrap`, y un flex item de ancho 100% FUERZA salto de
línea: los seis filtros de Movimientos se apilaban de a uno por renglón,
1352px cada uno, 245px de barra. Con el input encima vacío (ver §27 en
searchable-select.js) el resultado eran seis renglones en blanco.
Se acota al contenedor y no se toca el default: los .searchable de tablas y
modales siguen igual. El ancho es fijo y no `auto` a propósito — `.srch-i`
mide 100% de su wrap, así que un wrap shrink-to-fit dependería del tamaño
intrínseco del , que varía por navegador. */
.filtros-form .srch { width: 170px; }
.srch select { position: absolute; left: 0; top: 0; width: 1px; height: 1px;
opacity: 0; pointer-events: none; }
.srch-i { width: 100%; padding: 5px 10px; border: 1px solid var(--border);
border-radius: 6px; background: var(--surface); font-size: 13px;
color: var(--text); cursor: text; box-sizing: border-box; }
.srch-i:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.srch-l { position: fixed; max-height: 240px; overflow-y: auto;
background: #fff; border: 1px solid var(--border); border-radius: 6px;
box-shadow: 0 4px 14px rgba(0,0,0,0.10);
list-style: none; padding: 4px 0; margin: 0; z-index: 1000;
display: none; min-width: 140px; }
.srch-l.o { display: block; }
.srch-l li { padding: 5px 12px; font-size: 13px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text); }
.srch-l li:hover, .srch-l li.a { background: var(--bg); }
.srch-l li.s { font-weight: 600; color: var(--brand-strong); }
.srch-l li.srch-empty { color: var(--text-muted); cursor: default;
font-style: italic; }
/* Tabla de codificación: densidad y agrupación visual de dimensiones Estudio */
.table-codif td, .table-codif th { padding: 6px 6px; }
.table-codif .col-est { border-left: 2px solid var(--border); }
.table-codif .sel-dim + .srch-i, .table-codif td .srch-i { font-size: 12px; padding: 3px 6px; }
/* ── §3x-bis · ANCHO FIJO: lo que hay que agregar para que CORTE BIEN ────────
`td { overflow: hidden }` es GLOBAL (arriba), así que con `table-layout:fixed`
todas estas celdas ya recortaban — pero SIN elipsis, o sea cortando el texto a
la mitad de una letra y sin ninguna señal de que falta algo. La elipsis no es
cosmética: es lo único que le dice al operador que tiene que pasar el mouse.
⚠️ TODO SCOPEADO A `.table-codif`, y no es prolijidad: `.num` vive en SIETE
plantillas y `td` en todas. Bajar esto a la hoja global movería una docena de
pantallas que nadie midió — la lección de §45.2, que por eso scopeó su ritmo
vertical a `.est-compacto` en vez de tocar `.stats-bar`.
Lo que NO está acá porque YA estaba y recién ahora funciona: `.detalle` y
`td.canal` traen `text-overflow: ellipsis` desde §22c/§32, y no hacían nada —
en layout automático el navegador ensancha la columna hasta que el texto entre,
así que un `text-overflow` declarado no llega a aplicarse NUNCA (§3x.4). Eran
dos reglas correctas esperando la decisión que las volviera ciertas. */
.table-codif th { text-overflow: ellipsis; }
.table-codif td.tipo-cell { text-overflow: ellipsis; }
.table-codif td .items-aplic { display: block; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
/* ⚠️⚠️ LAS TRES DE PLATA: `nowrap` para que un importe NUNCA envuelva a dos
líneas (subiría el alto de la fila, que es trabajo de otro punto de esta
sesión y no de éste), y elipsis para que un recorte se VEA. Van a la derecha,
así que lo que se pierde son los dígitos de la izquierda: «1.234.567,89»
recortada se lee «234.567,89», un número creíble y diez veces menor. El ancho
está calculado para que no pase; esto y el `title` de la plantilla son la red
por si pasa igual. Es la familia de §21 —un importe mal presentado es
invisible— y de la trampa de `|plata` en ARRANQUE §4. */
.table-codif td.num { white-space: nowrap; text-overflow: ellipsis; }
/* §3x-ter · «(a cobrar)» en la columna Cuenta, que mide 66px con 54 de caja
útil. MEDIDO en navegador: a 13px el texto pide 56,4px, o sea que se cortaba
por 2,4px — «(a cobrar…», que es peor que el «—» que vino a reemplazar,
porque un texto recortado se lee como un dato incompleto y no como un estado.
Se baja a 11px y NO se abrevia, que era la otra salida: «a cobrar» sin
paréntesis entra a 13px, pero los paréntesis son los que dicen que esto es un
ESTADO y no el nombre de una cuenta llamada «a cobrar». Perder el paréntesis
es perder justamente la distinción que §3x-ter vino a hacer; perder 2px de
tipografía no cuesta nada — es el mismo tamaño con el que la grilla ya
escribe los números de comprobante bajo el detalle.
A 11px pide 47,7px contra 54 disponibles: 6px de margen, que aguanta el
redondeo de subpíxel y una fuente de fallback. */
.table-codif td.canal .cta-a-cobrar { color: #9ca3af; font-size: 11px; }
/* §3x-ter · El badge de una descartada, en la columna EST de 40px. `max-width`
al 100% de la celda + elipsis: sin esto un `inline-block` se DESBORDA de su
`
` en vez de recortarse —`overflow:hidden` recorta al hijo en el borde,
pero el badge se dibuja encima de la columna de al lado hasta ahí— y el ancho
fijo dejaría de verse fijo justo en las dos filas que no lo cumplen. */
.table-codif td .badge-descartada { display: inline-block; max-width: 100%;
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; vertical-align: middle; }
/* §3x-ter · El tilde de EST, centrado como los de «Of.» y «Opi»: los tres son
una casilla sola en una columna angosta, y alinearlos distinto los haría ver
como controles distintos. El `gap` se va con el `` que ya no está. */
.table-codif td .tick-estado { gap: 0; justify-content: center; width: 100%; }
/* Semáforo de cotejo contra presupuesto (§7.6) — aviso, nunca bloquea */
.sem-chip { display: inline-block; padding: 1px 8px; border-radius: 10px;
font-size: 11px; font-weight: 600; white-space: nowrap; }
.sem-chip.verde { background: #dcfce7; color: #15803d; }
.sem-chip.amarillo { background: #fef9c3; color: #a16207; }
.sem-chip.rojo { background: #fee2e2; color: #b91c1c; }
/* RONDA 1 · «al tope»: consumió el presupuesto entero. Más fuerte que el
amarillo de «cerca» y más suave que el rojo de «excede» — es el límite
exacto, no una violación. */
.sem-chip.tope { background: #ffedd5; color: #9a3412; font-weight: 600; }
.sem-chip.neutro { background: var(--bg); color: var(--text-muted); }
/* §24.4.c · El VERDE no se pinta. `semaforo()` lo sigue devolviendo —«dentro» es
una respuesta y los tests la verifican— pero la pantalla se calla: sólo se
dibuja el ≥90% y el excede. Silencio = está bien. La regla de §7.6 no cambia
(avisa, nunca bloquea); lo que cambia es que dejar de avisar TAMBIÉN informa,
y una columna con todo pintado de verde no dejaba ver los dos que importaban.
La clase se conserva a propósito, sin color: sacarla del HTML obligaría a que
la plantilla decidiera qué es «suficientemente bien», que es justo lo que vive
en services/cotejo.semaforo. */
td.sem-verde { color: inherit; }
td.sem-amarillo { color: #b45309; }
td.sem-tope { color: #9a3412; font-weight: 600; }
td.sem-rojo { color: var(--red); font-weight: 700; }
/* En filas inline (sel-rubro), input más compacto */
.sel-rubro + .srch-i, .srch .sel-rubro + .srch-i,
.srch .sel-rubro ~ .srch-i { font-size: 12px; padding: 3px 6px; }
td.rubro-cell .srch-i { font-size: 12px; padding: 3px 6px; }
.action-cell .srch-i { font-size: 12px; padding: 4px 8px; }
/* §18.3 · Pago multi-entrega en Movimientos: la fila es UNA, el desglose cuelga.
El chevron abre el panel de aplicaciones; la celda de ítem de una fila-pago no
es editable (el ítem vive en cada aplicación, no en el pago). */
.btn-aplic { background: none; border: 0; padding: 0 2px 0 0; cursor: pointer;
display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.btn-aplic .chev { color: #6b7280; font-size: 10px; width: 10px; }
.btn-aplic:hover .badge { filter: brightness(0.96); }
.items-aplic { font-size: 12px; color: #6b7280; font-style: italic; }
.fila-aplic > td { border-top: 0; }
/* §35 · Acá vivían las reglas de `#modal-nuevo` (max-height:92vh + overflow, y la
grilla de 3 columnas). SE FUERON CON EL MODAL: la carga es la pantalla
`/codificacion/nueva`. Se deja la nota y no el CSS, porque el `92vh` con
`overflow-y:auto` es justamente la prueba de que aquello YA SCROLLEABA — que
es el argumento por el que §35 dejó de ser un modal. */
/* ══════════════════════════════════════════════════════════════════════════
§19 · MOVIMIENTOS: el período, el tipo y las acciones de fila
══════════════════════════════════════════════════════════════════════════ */
/* El período es el TÍTULO de la pantalla, no un filtro escondido: el operador tiene
que ver de un vistazo en qué mes está parado. */
.page-header h1 .per-titulo { font-size: 20px; font-weight: 700; }
.page-header h1 small { display: block; font-size: 12px; font-weight: 400;
color: #6b7280; margin-top: 2px; text-transform: none; }
.periodo-tira { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.periodo-tira .per { position: relative; padding: 5px 11px; border-radius: 7px;
border: 1px solid var(--border); background: #fff; color: #6b7280;
font-size: 12px; font-weight: 600; text-decoration: none; line-height: 1;
display: inline-flex; align-items: center; gap: 5px; }
.periodo-tira .per:hover { border-color: var(--brand); color: var(--brand-strong); }
.periodo-tira .per.activo { background: var(--brand); border-color: var(--brand);
color: #fff; }
/* El PUNTO: ese mes tiene movimientos sin rubro o pendientes. Es lo que deja ver el
trabajo que falta en los meses en los que NO estás parado. */
.periodo-tira .punto { width: 6px; height: 6px; border-radius: 50%;
background: var(--orange); display: inline-block; }
.periodo-tira .per.activo .punto { background: #fff; }
.chips-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
a.stat-chip { text-decoration: none; }
a.stat-chip:hover { border-color: var(--brand); }
.stat-chip.chip-on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
/* §22c · Los chips de LO QUE ESTÁ FILTRADO (distintos de los .stat-chip, que
CUENTAN). Estos declaran por qué la grilla muestra lo que muestra, y cada uno
trae su ✕ para sacarse solo. Van en ámbar, no en el gris del resto: son un
estado activo de la pantalla, no decoración. */
.filtro-activo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
padding: 8px 12px; margin-bottom: 12px; }
.filtro-activo .fa-rotulo { font-size: 11px; text-transform: uppercase;
letter-spacing: .04em; color: #92400e; font-weight: 700; }
.fa-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff;
border: 1px solid #fcd34d; border-radius: 6px; padding: 3px 4px 3px 9px;
font-size: 12px; color: #78350f; }
.fa-chip b { font-weight: 700; color: #92400e; }
.fa-chip a { text-decoration: none; color: #b45309; padding: 0 5px; border-radius: 4px;
font-size: 13px; line-height: 1.4; }
.fa-chip a:hover { background: #fde68a; color: #7c2d12; }
/* El aviso de lo que queda AFUERA del ancla temporal. */
.aviso-fuera { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.aviso-fuera a { color: inherit; font-weight: 600; }
/* §22c · El pie con el total de lo filtrado. `sticky` porque el total de una
grilla que scrollea sirve poco si hay que llegar al fondo para verlo.
⚠️ §3x-ter · EL `sticky` SE ACOTA A LA ÚLTIMA FILA, y es por el pie nuevo: son
TRES renglones ahora (uno por moneda + el consolidado), y `bottom: 0` en los
tres los apilaría a todos en el mismo lugar — tres totales superpuestos, que
es peor que ninguno pegado.
Se elige el consolidado y no los nativos porque es el único que resume la
grilla ENTERA; los de cada moneda son su desglose y se leen al llegar al pie.
✅ LA CONDUCTA REAL, medida en navegador el 15-ago-2026 en los dos viewports:
el consolidado SE PEGA. Su `
` queda clavado —`top` idéntico en las cinco
posiciones de scroll, con el borde inferior contra el del wrapper— mientras el
`
` recorre toda la tabla. Las `.fila-total-nat` son `static` y entran en la
banda visible recién al llegar al final, que es exactamente el reparto que esta
regla busca.
⚠️ EL SELECTOR ES `> td` Y ESO ES LO QUE HAY QUE MEDIR. El sticky vive en las
CELDAS, no en la fila: un `
` cuyos `
` son sticky no refleja el
desplazamiento —las celdas se corren adentro y la fila se queda en el flujo—,
así que `tr.getBoundingClientRect()` devuelve el elemento que NO se mueve.
Acá decía «INERTE, confinado al containing block del tfoot» y era eso: dos
sondas midieron el `
`, dieron la misma serie de números y se leyeron como
confirmación independiente. Ver ARRANQUE §4. */
.table-codif tfoot .fila-total:last-child > td { position: sticky; bottom: 0; }
.table-codif tfoot .fila-total > td { background: #f9fafb; padding: 9px 8px; }
.table-codif tfoot .fila-total-cons > td { border-top: 2px solid var(--border); }
/* §3x-ter · Los nativos son el DESGLOSE del consolidado, y la jerarquía la marca
el SEPARADOR —1px contra los 2px del consolidado—, no el tamaño de los
números.
⚠️ Acá había un `font-size: 12px` que los achicaba, y se saca: con los números
más chicos y menos pesados que los del consolidado, el verde y el rojo de las
nativas se leían como si NO estuvieran (reporte de Dave: «van en negro»).
Medido en navegador, el color SÍ estaba aplicado en las tres filas
—`rgb(22,163,74)` y `rgb(220,38,38)`, idéntico al consolidado—, o sea que el
problema nunca fue el color sino el PESO con el que se lee.
Es la lección de §21 dada vuelta: ahí un importe mal presentado era invisible
por el formato; acá un color correcto era invisible por el tamaño. Una señal
que está en el DOM y no llega al ojo no está puesta. */
.table-codif tfoot .fila-total-nat > td { border-top: 1px solid var(--border); }
.fila-total b { font-size: 14px; }
.fila-total small { display: block; font-size: 11px; color: #6b7280; font-weight: 400; }
/* §22b · La celda U$S de una fila que no suma: se ve, pero se ve que no cuenta. */
.usd-no-suma { opacity: .45; text-decoration: line-through; }
/* La columna TIPO: qué ES esta fila, sin abrir nada. */
.tipo-cell { white-space: nowrap; }
.badge-pago { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-ade { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.tipo-simple { font-size: 11px; color: #9ca3af; }
.ade-saldo { display: block; font-size: 10px; color: #92400e; margin-top: 2px; }
/* El menú de la fila (⋯). Sólo muestra las acciones que esa fila puede hacer. */
.actions-cell { position: relative; }
.btn-mas { font-size: 16px; line-height: 1; color: #9ca3af; padding: 2px 6px;
border-radius: 5px; }
.btn-mas:hover { color: var(--brand); background: #f3f4f6; }
/* El menú abierto NO puede quedarse dentro de la tabla: la tabla es
`border-collapse: collapse`, y con los bordes colapsados Chrome IGNORA el z-index de
las celdas. Da igual cuánto le suba: las celdas de las filas de abajo —con sus