/* =============================================================================
IDENTIDAD VISUAL — MÓDULO FACTURACIÓN
=============================================================================
Manual: docs/identidad-visual.md. Implementación hermana: rrhh-ui.css.
TODO va scopeado bajo `.fx-ui` y con prefijo `fx-`. El resto de GS sigue en
Tailwind con su paleta: si los tokens fueran a `:root` o las clases se
llamaran `.card`, se filtrarían y romperían lo que ya funciona (manual §6).
── LA CABECERA YA NO ES DEL MÓDULO ──────────────────────────────────────────
El módulo tenía su propia cabecera (`.fx-hdr.lite`). Se fue a la barra
superior del armazón, que es de todos: el módulo PUBLICA su sección y sus
acciones y el armazón decide cómo se ven (ver src/core/shell.js).
Lo que sí sigue valiendo acá es el porqué de aquella variante blanca, que
ahora gobierna toda la pantalla: la regla del manual §1.2 (dos superficies
azules por pantalla como máximo) llevada a su límite, porque esta es una
pantalla-tabla que se mira 20 minutos seguidos. La única superficie navy
rellena es el botón de acción principal.
========================================================================== */
/* LA PALETA NO ESTÁ ACÁ. Vive en src/core/tokens.css, que la declara una sola
vez para los cuatro módulos con identidad y se carga antes que este archivo.
Facturación no se aparta en nada: usa los tokens tal cual salen. Si alguna
vez hiciera falta un valor propio, se redeclara en este bloque —misma
especificidad, gana el último— y se escribe el porqué al lado.
La trampa §7 del manual (`.hidden` de Tailwind, que tiene una sola clase de
especificidad y pierde contra cualquier `.fx-ui .fx-btn`) también se
resuelve allá. Lo único que queda acá es el caso del ROOT de un modal, que
lleva `.fx-ui` él mismo y por eso nombra una clase propia del módulo. */
.fx-ui.fx-modal.hidden { display: none; }
.fx-ui .material-symbols-outlined { font-variation-settings: 'wght' 400; vertical-align: middle; }
/* =============================================================================
ESTRUCTURA
========================================================================== */
.fx-ui .fx-shell {
background: var(--canvas);
border-radius: var(--r-card);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
min-height: 0;
}
/* La cabecera del módulo (.fx-hdr, con su variante lite) y su botón fantasma
(.fx-ghost) se fueron a la barra superior del armazón: el nombre lo pone el
rail, y la sección y las acciones de sincronización las publica `pintarBarra()`
vía shellSetContexto / shellSetAcciones. Ver src/core/shell.js. */
/* ── Navegación de sección — subrayado que crece desde el centro ───────────── */
.fx-ui .fx-secnav {
background: var(--surface);
border-bottom: 1px solid var(--hair);
display: flex; gap: 2px; padding: 0 14px;
flex-wrap: wrap;
}
.fx-ui .fx-secnav button {
position: relative; background: none; border: 0;
font: inherit; font-size: 12.8px; font-weight: 600; color: var(--muted);
padding: 12px 15px 13px; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
transition: color .15s, background .15s;
}
.fx-ui .fx-secnav button .material-symbols-outlined {
font-size: 18px; transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
/* Un border-bottom no se puede animar (manual §7): va un ::after con scaleX. */
.fx-ui .fx-secnav button::after {
content: ''; position: absolute; left: 10px; right: 10px; bottom: 0;
height: 2.5px; background: var(--navy); border-radius: 2px 2px 0 0;
transform: scaleX(0); transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.fx-ui .fx-secnav button:hover, .fx-ui .fx-secnav button:focus-visible {
color: var(--navy); background: var(--navy-050); outline: none;
}
.fx-ui .fx-secnav button:hover::after, .fx-ui .fx-secnav button:focus-visible::after { transform: scaleX(.55); }
.fx-ui .fx-secnav button:hover .material-symbols-outlined { transform: scale(1.18); }
.fx-ui .fx-secnav button.on { color: var(--navy); font-weight: 700; }
.fx-ui .fx-secnav button.on::after { transform: scaleX(1); }
.fx-ui .fx-secnav .tail { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Barra de pestañas heredada que ya no manda (la reemplaza la secnav). */
.fx-ui .fx-nav-legacy { display: none !important; }
/* Sin padding lateral: las tarjetas y la barra van de borde a borde (ver más
abajo) y son ELLAS las que aplican `--gutter` a su contenido. Así el texto de
la tabla arranca en la misma columna que el título del módulo. */
.fx-ui .fx-view { padding: 16px 0 22px; background: var(--canvas); flex: 1; min-height: 0; }
/* Bloques a ancho completo dentro del área de trabajo. Se les saca el radio y
los bordes laterales porque ya no tienen a los lados nada de qué separarse.
No alcanza a `.fx-pop` (el desplegable del autocompletar) ni a los modales,
que cuelgan del y conservan su forma de tarjeta. */
.fx-ui .fx-view .fx-card,
.fx-ui .fx-view .fx-bar {
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
/* Lo que no es tarjeta se alinea con el mismo canal. */
.fx-ui .fx-view .fx-seg,
.fx-ui .fx-view .fx-ph,
.fx-ui .fx-view .fx-nota,
.fx-ui .fx-view .fx-risk { margin-left: var(--gutter); margin-right: var(--gutter); }
/* ── Encabezado de pantalla ────────────────────────────────────────────────── */
.fx-ui .fx-ph { margin-bottom: 14px; }
.fx-ui .fx-ph h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; }
.fx-ui .fx-ph p { font-size: 12px; color: var(--muted); margin: 2px 0 0; max-width: 78ch; }
/* =============================================================================
CONTADOR ACCIONABLE (lo que pide acción, al lado de la navegación)
========================================================================== */
.fx-ui .fx-alert {
display: inline-flex; align-items: center; gap: 9px;
background: transparent;
border: 1px solid var(--hair-strong);
border-left: 3px solid var(--warn);
border-radius: 8px; padding: 5px 12px;
cursor: pointer; font: inherit;
transition: background .15s, border-color .15s, transform .15s cubic-bezier(.2, .8, .3, 1);
}
.fx-ui .fx-alert:hover, .fx-ui .fx-alert:focus-visible {
background: var(--warn-050); border-color: var(--warn); transform: translateY(-1px); outline: none;
}
.fx-ui .fx-alert .k {
font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
font-weight: 700; color: var(--muted);
}
.fx-ui .fx-alert .v {
font-size: 1.05rem; font-weight: 800; color: var(--warn);
line-height: 1; font-variant-numeric: tabular-nums;
}
/* =============================================================================
SEGMENTO (Vinculados | Otros | Todos) — es un FILTRO, no una sección
========================================================================== */
.fx-ui .fx-seg {
display: inline-flex; background: var(--surface);
border: 1px solid var(--hair-strong); border-radius: 9px;
padding: 3px; gap: 2px; margin-bottom: 14px; flex-wrap: wrap;
}
.fx-ui .fx-seg button {
background: none; border: 0; font: inherit; font-size: 12.4px; font-weight: 600;
color: var(--muted); padding: 7px 15px; border-radius: 6px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: color .15s, background .15s, box-shadow .15s;
}
.fx-ui .fx-seg button .material-symbols-outlined { font-size: 17px; }
.fx-ui .fx-seg button:hover, .fx-ui .fx-seg button:focus-visible {
color: var(--navy); background: var(--navy-050); outline: none;
}
/* Activo por TRAZO (barra interior), no por relleno navy — manual §1.2. */
.fx-ui .fx-seg button.on {
color: var(--navy); font-weight: 700; background: var(--navy-050);
box-shadow: inset 0 -2.5px 0 var(--navy);
}
.fx-ui .fx-seg .n { font-size: 11px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.fx-ui .fx-seg button.on .n { color: var(--navy-500); }
/* =============================================================================
TARJETA
========================================================================== */
.fx-ui .fx-card {
background: var(--surface); border: 1px solid var(--hair);
border-radius: var(--r-card); box-shadow: var(--shadow);
overflow: hidden; margin-bottom: 14px;
}
.fx-ui .fx-card-h {
background: #fafbfc; border-bottom: 1px solid var(--hair);
padding: 10px var(--gutter); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fx-ui .fx-card-h h4 {
font-size: .68rem; text-transform: uppercase; letter-spacing: .11em;
font-weight: 700; color: var(--muted); margin: 0;
}
.fx-ui .fx-card-h .r { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.fx-ui .fx-card-b { padding: 14px var(--gutter); }
.fx-ui .fx-card-f {
padding: 12px var(--gutter); text-align: center;
border-top: 1px solid var(--hair); background: #fafbfc;
}
/* =============================================================================
BARRA DE TRABAJO — una línea con lo que se usa siempre; el resto, plegado
========================================================================== */
.fx-ui .fx-bar {
background: var(--surface); border: 1px solid var(--hair);
border-radius: 10px; box-shadow: var(--shadow);
padding: 10px var(--gutter); display: flex; flex-wrap: wrap;
align-items: center; gap: 8px; margin-bottom: 12px;
}
.fx-ui .fx-bar-more {
border-top: 1px solid var(--hair); margin-top: 9px; padding-top: 11px;
width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px;
}
/* Atajo directo: aparece sólo cuando lo tipeado parece un N° de comprobante. */
.fx-ui .fx-bar-hint {
width: 100%; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 9px 11px; margin-top: 9px;
background: var(--navy-050); border: 1px solid #d3e0f2; border-radius: 8px;
font-size: 12.2px; color: var(--navy);
}
.fx-ui .fx-bar-hint b { font-family: 'Consolas', 'SF Mono', monospace; }
.fx-ui .fx-bar-hint .sp { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.fx-ui .fx-bar-hint .fx-btn { padding: 6px 12px; font-size: 12px; }
/* =============================================================================
CONTROLES
========================================================================== */
.fx-ui .fx-in, .fx-ui .fx-txt {
font: inherit; font-size: 12.8px; color: var(--ink);
background: var(--surface); border: 1px solid var(--hair-strong);
border-radius: 8px; padding: 7px 10px; outline: none;
transition: border-color .15s, box-shadow .15s;
}
.fx-ui .fx-txt { width: 100%; resize: vertical; min-height: 74px; line-height: 1.5; }
.fx-ui .fx-in:focus, .fx-ui .fx-txt:focus {
border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(21, 74, 148, .12);
}
.fx-ui .fx-in:disabled { background: #f6f8fa; color: var(--faint); cursor: not-allowed; }
/* Campo con un valor ELEGIDO del catálogo (vs. texto libre): se marca por trazo. */
.fx-ui .fx-in.elegido { border-color: var(--ok); background: var(--ok-050); font-weight: 700; }
.fx-ui .fx-lbl {
display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
font-weight: 700; color: var(--faint); margin-bottom: 4px;
}
.fx-ui .fx-btn {
background: var(--navy); color: #fff; border: 0; border-radius: 8px;
font: inherit; font-size: 12.8px; font-weight: 700; padding: 8px 17px;
cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
transition: transform .15s cubic-bezier(.2, .8, .3, 1), box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.fx-ui .fx-btn:hover, .fx-ui .fx-btn:focus-visible {
background: var(--navy-700); transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 43, 107, .28); outline: none;
}
.fx-ui .fx-btn:active { transform: translateY(-1px); }
.fx-ui .fx-btn .material-symbols-outlined { font-size: 17px; }
.fx-ui .fx-btn:disabled {
background: #c3ccd9; color: #fff; cursor: not-allowed;
transform: none; box-shadow: none;
}
/* Secundario: texto gris en reposo; navy sólo al apuntarlo (manual §1.2). */
.fx-ui .fx-btn.sec { background: var(--surface); color: var(--muted); border: 1px solid var(--hair-strong); }
.fx-ui .fx-btn.sec:hover, .fx-ui .fx-btn.sec:focus-visible {
background: var(--navy-050); color: var(--navy); border-color: var(--navy-500);
box-shadow: 0 5px 14px rgba(20, 40, 80, .12);
}
.fx-ui .fx-btn.sec:disabled { background: #f6f8fa; color: var(--faint); border-color: var(--hair); }
.fx-ui .fx-btn.ok { background: var(--ok); }
.fx-ui .fx-btn.ok:hover, .fx-ui .fx-btn.ok:focus-visible { background: #0b5c3e; box-shadow: 0 6px 16px rgba(15, 122, 82, .28); }
.fx-ui .fx-btn.ln { background: none; border: 0; color: var(--muted); font-weight: 600; padding: 8px 10px; }
.fx-ui .fx-btn.ln:hover, .fx-ui .fx-btn.ln:focus-visible {
background: var(--navy-050); color: var(--navy); transform: none; box-shadow: none;
}
/* Buscador con lupa embebida */
.fx-ui .fx-search { position: relative; flex: 1; min-width: 230px; }
.fx-ui .fx-search > .material-symbols-outlined {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
color: var(--faint); font-size: 19px; pointer-events: none;
}
.fx-ui .fx-search input { width: 100%; padding-left: 35px; }
/* Desplegable de un autocompletar. Clase propia (no `.fx-card`) porque vive
DENTRO del área de trabajo y no debe perder su forma con la regla de ancho
completo: es una capa flotante, no un bloque de la página. */
.fx-ui .fx-pop {
background: var(--surface); border: 1px solid var(--hair-strong);
border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 40, 80, .16);
overflow: hidden;
}
/* Opción de un autocompletar (lista desplegable) */
.fx-ui .fx-opt { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--hair); transition: background .12s; }
.fx-ui .fx-opt:last-child { border-bottom: 0; }
.fx-ui .fx-opt:hover, .fx-ui .fx-opt:focus-visible { background: var(--navy-050); outline: none; }
/* Chip de filtro — activo por borde + barra interior, nunca por relleno */
.fx-ui .fx-chip {
background: var(--surface); border: 1px solid var(--hair-strong);
color: var(--muted); border-radius: 20px; padding: 5px 13px;
font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
transition: transform .15s cubic-bezier(.2, .8, .3, 1), border-color .15s, color .15s, box-shadow .15s;
}
.fx-ui .fx-chip:hover, .fx-ui .fx-chip:focus-visible {
color: var(--navy); border-color: var(--navy-500); transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(20, 40, 80, .12); outline: none;
}
.fx-ui .fx-chip.on {
color: var(--navy); font-weight: 700; border-color: var(--navy);
box-shadow: inset 3px 0 0 var(--navy);
}
/* Íconos de acción — blanco de clic chico, así que crecen al apuntarlos */
.fx-ui .fx-x {
background: none; border: 0; color: var(--muted);
padding: 4px; border-radius: 6px; cursor: pointer;
transition: transform .15s cubic-bezier(.2, .8, .3, 1), background .15s, color .15s;
}
.fx-ui .fx-x .material-symbols-outlined { font-size: 19px; display: block; }
.fx-ui .fx-x:hover, .fx-ui .fx-x:focus-visible {
color: var(--navy); background: var(--navy-050); transform: scale(1.18); outline: none;
}
.fx-ui .fx-x:active { transform: scale(1.02); }
.fx-ui .fx-x.del:hover, .fx-ui .fx-x.del:focus-visible { color: var(--crit); background: var(--crit-050); }
.fx-ui .fx-x:disabled { opacity: .35; cursor: not-allowed; transform: none; background: none; }
/* Casilla de selección */
.fx-ui .fx-ck { width: 15px; height: 15px; accent-color: var(--navy); cursor: pointer; vertical-align: middle; }
/* Giro de "cargando" */
.fx-ui .fx-spin { animation: fx-spin 1s linear infinite; display: inline-block; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
/* =============================================================================
TABLA
========================================================================== */
.fx-ui .fx-tbl { overflow-x: auto; }
.fx-ui table.fx-g { width: 100%; border-collapse: collapse; font-size: 12.8px; }
/* Encabezado BLANCO con regla de 2px, nunca una franja navy: es lo que más
cansa cuando la tabla se mira 20 minutos (manual §1.2). */
.fx-ui table.fx-g th {
background: var(--surface); color: var(--muted);
font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
text-align: left; padding: 9px 12px;
border-bottom: 2px solid var(--ink); white-space: nowrap;
}
/* NINGÚN valor se parte al medio. Un "FCA" arriba y su número abajo, o un "$"
separado de su importe, no se leen como un dato: se leen como dos. El único
que puede envolver es el nombre del cliente, que es texto de largo variable y
lleva `.wrap` explícito. */
.fx-ui table.fx-g td {
padding: 9px 12px; border-bottom: 1px solid var(--hair);
color: var(--ink); vertical-align: middle; white-space: nowrap;
}
.fx-ui table.fx-g td.wrap, .fx-ui table.fx-g th.wrap {
white-space: normal; min-width: 190px;
}
.fx-ui table.fx-g tbody tr { transition: background .13s; }
.fx-ui table.fx-g tbody tr:hover { background: var(--navy-050); }
.fx-ui table.fx-g .n { text-align: right; font-variant-numeric: tabular-nums; }
.fx-ui table.fx-g .c { text-align: center; }
.fx-ui table.fx-g .mono {
font-family: 'Consolas', 'SF Mono', 'Roboto Mono', monospace;
font-weight: 700; font-variant-numeric: tabular-nums;
}
.fx-ui table.fx-g .vacia { padding: 34px 16px; text-align: center; color: var(--faint); font-style: italic; }
/* FRANJA DE ESTADO a la izquierda de la fila. Es lo que reemplaza a las
pastillas de color: el ojo encuentra lo que pide acción sin leer la fila.
La franja de 3px + 19px de padding suman `--gutter`, así el texto de la
primera columna queda a plomo con el título del módulo. */
.fx-ui table.fx-g td:first-child { border-left: 3px solid transparent; padding-left: calc(var(--gutter) - 3px); }
.fx-ui table.fx-g th:first-child { padding-left: var(--gutter); }
.fx-ui table.fx-g th:last-child,
.fx-ui table.fx-g td:last-child { padding-right: var(--gutter); }
.fx-ui table.fx-g tr.st-ok td:first-child { border-left-color: var(--ok-hair); }
.fx-ui table.fx-g tr.st-wrn td:first-child { border-left-color: var(--warn); }
.fx-ui table.fx-g tr.st-neg td:first-child { border-left-color: var(--crit); }
.fx-ui table.fx-g tr.st-neg { background: rgba(198, 40, 40, .035); }
.fx-ui .dim { color: var(--faint); }
/* Un dato ausente es información: se ve distinto (manual §1.4). */
.fx-ui .vacio { color: var(--faint); font-style: italic; }
/* =============================================================================
ESTADO — badges y marcas de nivel
========================================================================== */
.fx-ui .fx-b {
display: inline-block; font-size: 10.5px; font-weight: 700;
padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; border: 1px solid;
white-space: nowrap;
}
.fx-ui .fx-b.ok { background: var(--ok-050); color: var(--ok); border-color: var(--ok-hair); }
.fx-ui .fx-b.wrn { background: var(--warn-050); color: var(--warn); border-color: var(--warn-hair); }
.fx-ui .fx-b.neg { background: var(--crit-050); color: var(--crit); border-color: var(--crit-hair); }
.fx-ui .fx-b.nav { background: var(--navy-050); color: var(--navy); border-color: #d3e0f2; }
.fx-ui .fx-b.mut { background: #f4f6f9; color: var(--muted); border-color: var(--hair); }
/* Marca de estado en línea (columna "Copia GS"): ícono + texto, sin pastilla */
.fx-ui .fx-mark { font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fx-ui .fx-mark .material-symbols-outlined { font-size: 16px; }
.fx-ui .fx-mark.ok { color: var(--ok); }
.fx-ui .fx-mark.wrn { color: var(--warn); }
.fx-ui .fx-mark.neg { color: var(--crit); }
.fx-ui .fx-mark.mut { color: var(--faint); }
/* Aviso contextual */
.fx-ui .fx-risk {
display: flex; align-items: flex-start; gap: 9px;
padding: 10px 13px; border-radius: 9px; font-size: 12.2px;
border: 1px solid; border-left-width: 3px; margin-bottom: 12px; line-height: 1.5;
}
.fx-ui .fx-risk .material-symbols-outlined { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.fx-ui .fx-risk.info { background: var(--navy-050); border-color: #d3e0f2; border-left-color: var(--navy-500); color: var(--navy); }
.fx-ui .fx-risk.alerta { background: var(--warn-050); border-color: var(--warn-hair); border-left-color: var(--warn); color: #8a4a00; }
.fx-ui .fx-risk.critico { background: var(--crit-050); border-color: var(--crit-hair); border-left-color: var(--crit); color: #9b1f1f; }
.fx-ui .fx-nota { font-size: 11px; color: var(--faint); margin-top: 10px; line-height: 1.55; max-width: 78ch; }
.fx-ui .fx-nota b { color: var(--muted); }
/* =============================================================================
KPIs
========================================================================== */
.fx-ui .fx-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-ui .fx-kpi {
background: var(--surface); border: 1px solid var(--hair);
border-radius: 10px; padding: 10px 14px; min-width: 120px;
box-shadow: var(--shadow);
}
.fx-ui .fx-kpi .k {
font-size: .58rem; text-transform: uppercase; letter-spacing: .1em;
font-weight: 700; color: var(--faint); display: block;
}
.fx-ui .fx-kpi .v {
font-size: 1.25rem; font-weight: 800; color: var(--ink);
line-height: 1.25; font-variant-numeric: tabular-nums;
}
.fx-ui .fx-kpi .v.ok { color: var(--ok); }
.fx-ui .fx-kpi .v.wrn { color: var(--warn); }
.fx-ui .fx-kpi .v.neg { color: var(--crit); }
/* Acento a la IZQUIERDA (fichas y modales) */
.fx-ui .fx-kpi.side { border-left: 3px solid var(--navy); }
.fx-ui .fx-kpi.side.ok { border-left-color: var(--ok); }
.fx-ui .fx-kpi.side.wrn { border-left-color: var(--warn); }
.fx-ui .fx-kpi.side.neg { border-left-color: var(--crit); }
/* Barra de progreso (descarga masiva / envío) */
.fx-ui .fx-meter { height: 7px; background: var(--hair); border-radius: 20px; overflow: hidden; }
.fx-ui .fx-meter .fill { display: block; height: 100%; background: var(--navy); border-radius: 20px; transition: width .25s cubic-bezier(.2, .8, .3, 1); }
.fx-ui .fx-meter .fill.ok { background: var(--ok); }
.fx-ui .fx-meter .fill.wrn { background: var(--warn); }
/* =============================================================================
LISTA DE DEFINICIONES
========================================================================== */
.fx-ui .fx-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; }
.fx-ui .fx-dl dt { color: var(--faint); font-weight: 600; white-space: nowrap; }
.fx-ui .fx-dl dd { color: var(--ink); margin: 0; }
/* =============================================================================
MODAL
========================================================================== */
/* Doble clase para no depender del orden en que cargue Tailwind (manual §7). */
.fx-ui.fx-modal, .fx-ui .fx-modal {
position: fixed; inset: 0; z-index: 70;
background: rgba(20, 28, 44, .55);
display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fx-ui .fx-modal-panel {
background: var(--surface); border-radius: var(--r-card);
box-shadow: 0 20px 60px rgba(10, 20, 40, .35);
width: 100%; max-width: 560px; max-height: 88vh;
display: flex; flex-direction: column; overflow: hidden;
}
.fx-ui .fx-modal-panel.ancho { max-width: 860px; }
.fx-ui .fx-modal-hdr {
display: flex; align-items: center; gap: 12px;
padding: 13px 18px; border-bottom: 1px solid var(--hair); background: #fafbfc;
}
.fx-ui .fx-modal-hdr h3 { font-size: .92rem; font-weight: 700; color: var(--ink); margin: 0; }
.fx-ui .fx-modal-hdr p { font-size: 11.5px; color: var(--muted); margin: 1px 0 0; }
.fx-ui .fx-modal-hdr .x { margin-left: auto; }
.fx-ui .fx-modal-b { padding: 16px 18px; overflow-y: auto; flex: 1; }
.fx-ui .fx-modal-f {
padding: 12px 18px; border-top: 1px solid var(--hair); background: #fafbfc;
display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
/* Fila de lista dentro de un modal / panel */
.fx-ui .fx-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 12px; border: 1px solid var(--hair); border-radius: 10px;
background: var(--surface); margin-bottom: 8px;
border-left: 3px solid transparent;
transition: border-color .15s, background .15s;
}
.fx-ui .fx-row:hover { border-left-color: var(--navy); background: var(--navy-050); }
.fx-ui .fx-row.anulado { background: var(--crit-050); border-left-color: var(--crit); opacity: .75; }
/* =============================================================================
EL TERCER NIVEL — migas y pantalla de documento (Emisión de emergencia)
-----------------------------------------------------------------------------
Un comprobante es un DOCUMENTO: se lee, se completa y se firma. No entra en un
modal, y por eso hay un nivel más de navegación. Las migas son el precio de
esa decisión y también su beneficio: dicen de dónde salió la pantalla y son el
camino de vuelta.
========================================================================== */
.fx-ui .fx-crumb {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
padding: 0 var(--gutter) 12px;
font-size: 12.6px; color: var(--muted);
border-bottom: 1px solid var(--hair); margin-bottom: 16px;
}
.fx-ui .fx-crumb b { color: var(--ink); font-weight: 700; }
.fx-ui .fx-crumb .sep { color: var(--hair-strong); }
.fx-ui .fx-crumb .fx-b { margin-left: auto; }
.fx-ui .fx-crumb-back {
background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 8px;
color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex;
transition: background .15s, color .15s, border-color .15s;
}
.fx-ui .fx-crumb-back .material-symbols-outlined { font-size: 18px; display: block; }
.fx-ui .fx-crumb-back:hover, .fx-ui .fx-crumb-back:focus-visible {
background: var(--navy-050); color: var(--navy); border-color: var(--navy-500); outline: none;
}
.fx-ui .fx-crumb-link {
background: none; border: 0; font: inherit; font-size: 12.6px; color: var(--navy-500);
font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline;
text-underline-offset: 3px; text-decoration-color: transparent; transition: text-decoration-color .15s;
}
.fx-ui .fx-crumb-link:hover, .fx-ui .fx-crumb-link:focus-visible {
text-decoration-color: currentColor; outline: none;
}
.fx-ui .fx-doc-cuerpo { padding: 0 var(--gutter); }
/* Adentro del documento las tarjetas vuelven a ser tarjetas: el borde a sangre
es de las pantallas-lista, que ocupan el ancho entero. Especificidad de 4
clases para ganarle a la regla de `.fx-view` sin `!important`. */
.fx-ui .fx-view .fx-doc-cuerpo .fx-card {
border-radius: var(--r-card); border-left-width: 1px; border-right-width: 1px;
}
.fx-ui .fx-view .fx-doc-cuerpo .fx-risk { margin-left: 0; margin-right: 0; margin-bottom: 12px; }
/* Dos columnas: el comprobante a la izquierda, lo que resume a la derecha.
`min-width:0` en las dos — una columna de grid sin eso no se encoge y la
tabla de renglones estira la página entera. */
.fx-ui .fxe-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.fx-ui .fxe-col { min-width: 0; }
@media (max-width: 1100px) { .fx-ui .fxe-cols { grid-template-columns: minmax(0, 1fr); } }
.fx-ui .fxe-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
@media (max-width: 640px) { .fx-ui .fxe-g2 { grid-template-columns: minmax(0, 1fr); } }
.fx-ui .fxe-g2 .fx-in, .fx-ui .fxe-g2 select.fx-in { width: 100%; }
/* LA FICHA DEL ORIGEN — de dónde salió el dato que GS decidió solo. Es gris y
chica a propósito: acompaña, no compite con el valor.
**NO es flex, y ésa es toda la regla.** Era `display:flex` y el ícono quedaba
perfecto, pero en un contenedor flex **cada hijo es un ítem — y un trozo de
texto suelto también lo es**: la ficha del tipo de comprobante, que dice
«A este cliente se le emitió FCA 0008-00006729 el 11/08/2026. Es
evidencia de lo que pasó, no la regla…», se partía en SIETE columnas
angostas y la oración se leía en zigzag. Ninguna aserción lo ve: el texto
está entero en el HTML. Lo encontró el `--foto`.
`.fxe-nota` sí puede ser flex, y no es una inconsistencia: su texto va
envuelto en un ``, así que el flex ve **dos** ítems. Acá no hay envoltura y
pedirla en los 26 lugares que usan la clase es pedir que el 27 se olvide — y
olvidarse no rompe nada visible hasta que alguien agregue una negrita. Así que
el ícono va al canal con `position:absolute` y el texto fluye como el párrafo
que es. */
.fx-ui .fxe-ficha {
display: block; position: relative; padding-left: 19px;
font-size: 11.2px; line-height: 1.45; color: var(--faint); margin: 5px 0 0;
}
.fx-ui .fxe-ficha .material-symbols-outlined {
position: absolute; left: 0; top: 1px; font-size: 14px;
}
.fx-ui .fxe-ficha.wrn { color: var(--warn); }
.fx-ui .fxe-ficha b { color: var(--muted); }
.fx-ui .fxe-ficha.wrn b { color: var(--warn); }
.fx-ui .fxe-sub { font-size: 11.2px; color: var(--faint); margin: 2px 0 0; line-height: 1.45; white-space: normal; }
/* Un dato ausente ES información: se dice, no se deja vacío. */
.fx-ui .fxe-vacio { color: var(--faint); font-style: italic; }
.fx-ui .fxe-vacio.wrn { color: var(--warn); font-style: normal; font-weight: 700; }
.fx-ui .mono { font-variant-numeric: tabular-nums; }
.fx-ui .fx-in.n { text-align: right; }
/* Renglones */
.fx-ui .fxe-tbl table.fx-g td { vertical-align: top; }
.fx-ui .fxe-tbl .fx-in { width: 100%; padding: 5px 8px; font-size: 12.4px; }
.fx-ui .fxe-tbl tr.fxe-falta td { background: var(--warn-050); }
.fx-ui .fxe-nota { display: flex; gap: 9px; text-align: left; align-items: flex-start; }
.fx-ui .fxe-nota .material-symbols-outlined { font-size: 17px; color: var(--faint); flex-shrink: 0; }
.fx-ui .fxe-nota p { margin: 0; font-size: 11.4px; line-height: 1.55; color: var(--faint); max-width: 86ch; }
.fx-ui .fxe-nota b { color: var(--muted); }
/* PERCEPCIONES — la parte más delicada de la pantalla. Sin contestar lleva
trazo ámbar a la izquierda: es lo único que frena la emisión y que se vea
desde lejos es la mitad del mecanismo. */
.fx-ui .fxe-perc { padding: 13px var(--gutter); border-bottom: 1px solid var(--hair); }
.fx-ui .fxe-perc:last-of-type { border-bottom: 0; }
.fx-ui .fxe-perc.pendiente { background: var(--warn-050); box-shadow: inset 3px 0 0 var(--warn); }
.fx-ui .fxe-perc-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fx-ui .fxe-perc-n { font-size: 13px; font-weight: 700; color: var(--ink); }
.fx-ui .fxe-sw { margin-left: auto; display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 999px; overflow: hidden; }
.fx-ui .fxe-sw button {
background: var(--surface); border: 0; font: inherit; font-size: 11.6px; font-weight: 600;
color: var(--muted); padding: 5px 13px; cursor: pointer; transition: background .15s, color .15s;
}
.fx-ui .fxe-sw button + button { border-left: 1px solid var(--hair-strong); }
.fx-ui .fxe-sw button:hover, .fx-ui .fxe-sw button:focus-visible { background: var(--navy-050); color: var(--navy); outline: none; }
.fx-ui .fxe-sw button.on { background: var(--ok); color: #fff; }
.fx-ui .fxe-sw button.on.neg { background: var(--muted); color: #fff; }
/* base × alícuota = importe, a la vista. Un importe tecleado suelto no se puede
auditar tres meses después. */
.fx-ui .fxe-calc { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.fx-ui .fxe-calc > div { min-width: 0; }
.fx-ui .fxe-calc .fx-in { width: 150px; }
.fx-ui .fxe-op { font-size: 15px; color: var(--faint); font-weight: 700; padding-bottom: 7px; }
.fx-ui .fxe-res {
font-size: 13.4px; font-weight: 700; color: var(--ink); padding: 7px 10px;
background: var(--ok-050); border: 1px solid var(--ok-hair); border-radius: 8px; min-width: 150px; text-align: right;
}
/* El comprobante asociado de una nota suelta. Elegido, es un dato cerrado y se
ve como tal: recuadro propio y un solo botón, que es para CAMBIARLO — no un
campo editable donde un dígito de más asocia la nota a la factura de al lado. */
.fx-ui .fxe-asoc-ok {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 12px; background: var(--ok-050); border: 1px solid var(--ok-hair); border-radius: 8px;
}
.fx-ui .fxe-asoc-ok > div { min-width: 0; flex: 1 1 240px; }
.fx-ui .fxe-asoc-ok b { font-size: 13.4px; color: var(--ink); }
.fx-ui .fxe-asoc-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* Totales: las percepciones DESAGREGADAS, incluida la que no se aplicó. */
.fx-ui .fxe-tot .r { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.6px; color: var(--muted); }
.fx-ui .fxe-tot .r span:last-child { color: var(--ink); }
.fx-ui .fxe-tot .r.perc span:last-child { color: var(--warn); font-weight: 700; }
.fx-ui .fxe-tot .sep { border-top: 2px solid var(--ink); margin: 8px 0; }
.fx-ui .fxe-tot .grand { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; color: var(--ink); }
/* La barra de acción: lo que falta, escrito, al lado del botón que no anda. */
.fx-ui .fxe-barra {
display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card);
box-shadow: var(--shadow); padding: 14px var(--gutter); margin: 4px 0 18px;
}
.fx-ui .fxe-faltan { font-size: 12.4px; color: var(--muted); min-width: 0; flex: 1 1 380px; }
.fx-ui .fxe-faltan b { color: var(--warn); }
.fx-ui .fxe-faltan b.ok { color: var(--ok); }
.fx-ui .fxe-faltan ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
/* Mismo caso que `.fxe-ficha`, y por eso mismo tampoco es flex: esta línea dice
«…el rol, la habilitación de hoy y los importes se vuelven a verificar allá, y
el número lo da AFIP», y como flex el «AFIP» se iba a una columna
propia — la frase terminaba con el sujeto suelto en el medio del renglón. */
.fx-ui .fxe-emisor {
display: block; position: relative; padding-left: 21px; margin: 10px 0 0;
font-size: 11.4px; line-height: 1.5; color: var(--faint); max-width: 78ch;
}
.fx-ui .fxe-emisor .material-symbols-outlined {
position: absolute; left: 0; top: 2px; font-size: 15px;
}
.fx-ui .fxe-emisor b { color: var(--muted); }
.fx-ui .fxe-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-ui .fxe-tarda { margin: 0 6px 0 0; font-size: 11.2px; line-height: 1.5; color: var(--faint); text-align: right; }
.fx-ui .fxe-tarda b { color: var(--muted); }
/* Después de que ARCA contestó, la MISMA barra cambia de estado. El estado va
en el borde y en el título, no en un cartel nuevo: agregar una franja de
color aparte diría dos veces lo mismo y correría el botón de lugar justo
cuando el que mira está buscando el CAE. */
.fx-ui .fxe-barra.ok { border-color: var(--ok-hair); }
.fx-ui .fxe-barra.wrn { border-color: var(--warn-hair); }
.fx-ui .fxe-barra.neg { border-color: var(--crit-hair); }
.fx-ui .fxe-faltan b.wrn { color: var(--warn); }
.fx-ui .fxe-faltan b.neg { color: var(--crit); }
/* =============================================================================
ACCESIBILIDAD — el movimiento se apaga, el destaque NO
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.fx-ui *, .fx-ui *::after, .fx-ui *::before {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.fx-ui .fx-btn:hover, .fx-ui .fx-btn:focus-visible,
.fx-ui .fx-chip:hover, .fx-ui .fx-chip:focus-visible,
.fx-ui .fx-alert:hover, .fx-ui .fx-alert:focus-visible { transform: none; }
.fx-ui .fx-x:hover, .fx-ui .fx-x:focus-visible { transform: none; }
.fx-ui .fx-secnav button:hover .material-symbols-outlined { transform: none; }
}