/* ═══════════════════════════════════════════════════════════════════════════
aging-v2.css — apartado «Aging» definitivo (09-10-2026), Frontend/vistas/aging/.
Prefijo PROPIO `agx-`: convive con la hoja del apartado viejo hasta que se borre, y
con los mismos selectores las dos pelearían y ganaría la última del .
Nació como copia de aging.css; solo quedan las reglas que usan sus ocho archivos.
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
proyeccion-lab.css — apartado "Proyección 4 Semanas - Laboratorio" (solo Admin)
COPIA CONGELADA de `proyeccion.css` del 10-09-2026. No editar.
Todo el prefijo paso de `pr-` a `agx-`, y NO es cosmetico: con los mismos
234 selectores las dos hojas pelean y gana la ultima del `` — editar
una cambiaria la otra, o "no haria nada" segun el orden. Es una de las
cuatro formas de romper el sistema de hojas sin un solo error en consola.
───────────────────────────────────────────────────────────────────────────
Todo se escribe contra TOKENS, nunca contra un color literal: la aplicación
tiene dos temas y un valor escrito a mano sirve a uno solo. Es el defecto que
más veces apareció en este proyecto — ver la sección "Contraste" de CLAUDE.md.
⚠ El de este archivo va ÚLTIMO en el , junto a las otras hojas
de apartado. No es cosmético: el orden decide quién gana los empates de
especificidad, y una hoja adelantada deja la pantalla torcida en algunos
elementos y perfecta en el resto — el peor caso para diagnosticar.
═══════════════════════════════════════════════════════════════════════════ */
.agx-cont { padding: 0 0 28px; }
/* ── Barra de configuración ────────────────────────────────────────────────
Es lo que el usuario viene a tocar, así que va arriba y se lee de un vistazo.
`align-items: flex-end` alinea las etiquetas con sus controles sin importar
que unas tengan una línea y otras dos. */
.agx-barra {
display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-end;
background: var(--navy-2); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px; margin: 4px 0 14px;
}
.agx-grupo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.agx-grupo > label {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-3); font-weight: 600;
}
.agx-grupo select, .agx-grupo input[type="search"], .agx-grupo input[type="number"] {
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 6px;
padding: 6px 9px; font-size: 12px; font-family: var(--font);
}
.agx-grupo input[type="search"] { min-width: 190px; }
.agx-grupo input[type="number"] { width: 108px; }
.agx-check {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; color: var(--text-2); cursor: pointer;
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.agx-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--navy-3); color: var(--text-2);
border: 1px solid var(--border-2); border-radius: 6px;
padding: 6px 11px; font-size: 11.5px; font-family: var(--font);
cursor: pointer; transition: background .12s, color .12s;
}
.agx-btn:hover { background: var(--navy-4); color: var(--text); }
/* ── Pestañas de moneda ───────────────────────────────────────────────────
Son dos proyecciones independientes, no dos vistas del mismo número, así que
la pestaña activa se marca con fuerza: confundirlas sería leer pesos como
dólares. */
.agx-monedas { display: flex; gap: 6px; margin: 0 0 10px; }
.agx-tab {
background: transparent; color: var(--text-3);
border: 1px solid var(--border); border-bottom: 2px solid transparent;
border-radius: 6px 6px 0 0; padding: 7px 18px;
font-size: 12.5px; font-weight: 600; font-family: var(--mono);
cursor: pointer; transition: color .12s, border-color .12s;
}
.agx-tab:hover { color: var(--text-2); }
.agx-tab.on {
color: var(--text); background: var(--navy-2);
border-bottom-color: var(--blue-light);
}
/* ── La tabla ─────────────────────────────────────────────────────────────── */
.agx-bloque {
background: var(--navy-2); border: 1px solid var(--border);
border-radius: 0 10px 10px 10px; padding: 4px 0 0; margin-bottom: 16px;
overflow-x: auto; /* la tabla scrollea sola, no la página */
}
.agx-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.agx-tabla th, .agx-tabla td { padding: 7px 12px; }
.agx-tabla thead th {
text-align: right; font-size: 11px; font-weight: 700; color: var(--text-2);
border-bottom: 1px solid var(--border-2); white-space: nowrap;
}
.agx-tabla thead th span {
display: block; font-size: 9.5px; font-weight: 500;
color: var(--text-3); text-transform: none; letter-spacing: 0;
}
.agx-num { text-align: right; font-family: var(--mono); white-space: nowrap; color: var(--text); }
/* ── Aviso de carga incompleta ─────────────────────────────────────────────
Un origen caído deja los totales bajos, y una proyección baja se parece a una
proyección de cero: hay que decirlo arriba, no esconderlo en el panel.
⚠ El acento va en la LETRA y en el BORDE, y el fondo en la superficie: un
tinte del propio rojo debajo de un texto rojo no crece nunca en contraste. */
.agx-error {
background: var(--navy-2);
border: 1px solid color-mix(in srgb, var(--red, #ef4444) 40%, transparent);
border-left: 3px solid var(--red-txt, var(--red));
border-radius: 6px; padding: 11px 14px; margin: 0 0 14px;
font-size: 12px; color: var(--red-txt, var(--red)); line-height: 1.6;
}
.agx-error b { color: var(--text); }
.agx-error .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.24em; }
@media (max-width: 900px) {
.agx-barra { gap: 12px 16px; }
.agx-grupo input[type="search"] { min-width: 140px; }
}
/* ── Las pestañas de vista, separadas de las de moneda ─────────────────────
Son dos preguntas distintas —QUÉ se mira y EN QUÉ MONEDA— y por eso son dos
filas. Con todo en una sola, un clic en "CLP" parece del mismo grupo que uno en
"Facturas de compra" y no lo es. */
.agx-vistas { margin-bottom: 4px; }
.agx-vistas .agx-tab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); }
.agx-vistas .agx-tab .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.22em; }
.agx-barra-filtros { margin-top: 0; border-radius: 0 10px 0 0; }
/* ── La tabla de una base ──────────────────────────────────────────────────── */
.agx-base { font-size: 12px; min-width: 900px; }
.agx-base thead th {
text-align: left; position: sticky; top: 0; z-index: 1;
background: var(--navy-2);
}
/* La alineación se decide por lo que la columna ES, no por dónde quedó: el encabezado
lleva la misma clase que sus celdas. Hasta el 21-08-2026 esto contaba POSICIONES
(`nth-child(n+6)`), y hubo que corregir el número dos veces en un día —al agregar el
numerador y al agregar la cuenta—; olvidarse dejaba los montos alineados a la izquierda
sin ningún error. Un selector que no cuenta no puede quedar viejo. */
.agx-base thead th.agx-num, .agx-base thead th.agx-n { text-align: right; }
.agx-base tbody tr:hover { background: var(--navy-3); }
/* El encabezado que ordena. Tiene que VERSE clicable: un encabezado que ordena y parece
texto no se toca nunca. Y la flecha va dentro del propio
, no en un pseudo-elemento:
asi el ancho de la columna ya la contempla y la tabla no salta al ordenar. */
.agx-th-ord { cursor: pointer; user-select: none; }
.agx-th-ord:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.agx-th-ord.on { color: var(--blue-light-txt, var(--blue-light)); }
.agx-base td { border-bottom: 1px solid var(--border); color: var(--text-2); }
.agx-mono { font-family: var(--mono); white-space: nowrap; color: var(--text-3); }
.agx-vacio { text-align: center; padding: 28px 20px; color: var(--text-3); }
/* El balde: es el dato que conecta la fila con la columna de la proyección, así que
se distingue de un vistazo. Cada uno lleva su PALABRA además del color — el color
solo no alcanza para quien no lo distingue. */
.agx-b-venc { color: var(--red-txt, var(--red)); font-weight: 600; }
.agx-b-sem { color: var(--green); font-weight: 600; font-family: var(--mono); }
.agx-b-fuera { color: var(--text-3); font-style: italic; }
/* ── El pie que dice cuántas pasan el filtro ───────────────────────────────
No es informativo: es la única forma de saber que el filtro hizo lo que uno creía.
Un filtro mal tipeado deja cero filas, y una proyección en cero se parece
demasiado a un error de carga. */
.agx-base-cab {
border-top: none; border-bottom: 1px solid var(--border);
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.agx-base-cab b { color: var(--text); font-family: var(--mono); }
.agx-base-cab .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.22em; }
/* El botón de Excel va a la DERECHA de la línea que cuenta las filas, no al lado del
número: la frase se lee de corrido y el botón es una acción, no parte del dato. Y con
`order` en vez de moverlo en el marcado, porque el orden de lectura para un lector de
pantalla conviene que siga siendo el número primero y la acción después. */
.agx-base-xls { margin-left: auto; order: 9; font-size: 11px; padding: 5px 9px; flex: none; }
.agx-base-xls .mx-ico { width: 1.1em; height: 1.1em; }
.agx-btn-mini { padding: 4px 8px; font-size: 10.5px; }
/* ── El encabezado con el tramo completo ───────────────────────────────────
Dos fechas y dos nombres de día no caben en el ancho de una columna de monto,
así que el subtítulo respira y no se corta. */
.agx-tabla thead th span { line-height: 1.5; white-space: nowrap; }
/* Las filas de cada bloque heredan una franja más tenue, para que el grupo se
lea como un grupo hasta que empieza el siguiente. */
.agx-tabla tbody tr td:first-child { border-left: 3px solid transparent; }
/* En pantallas angostas las franjas de 3px comen ancho útil de la primera
columna, que es la que lleva los rótulos largos. */
@media (max-width: 820px) {
.agx-tabla tbody tr td:first-child{ border-left-width: 2px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Quinta tanda (19-08-2026): los desplegables con CASILLAS y los rangos de
fecha de las dos pestañas de bases.
───────────────────────────────────────────────────────────────────────────
Pedido del usuario, textual: "que todos los drop-down que están en las tabs
de FACTURAS DE COMPRA Y VENTA sean drop-down pero con checkbox", más un
desplegable propio para los bloqueos de pago y el filtro por fecha de emisión
y de vencimiento.
⚠ Tres reglas que se respetan en todo este bloque:
1. Ningún color literal. El acento va en la LETRA y en el BORDE; el fondo
sale de una superficie neutra que el tema invierte. Un tinte del mismo
acento debajo de su propio texto no gana contraste nunca — es el patrón
que más veces falló en este proyecto.
2. Las casillas son `` NATIVOS con `accent-color`.
Una palomita dibujada a mano ya se perdió acá por cascada (Gestión de
Roles, tema claro): la nativa no tiene marca que pisar.
3. El panel se oculta con el atributo `hidden`, así que su `[hidden]` va
explícito: declara `display: flex`, y CUALQUIER regla que declare
`display` pisa a `hidden`. Sin esa línea el panel se vería siempre.
═══════════════════════════════════════════════════════════════════════════ */
.agx-dd { position: relative; display: inline-block; }
/* El disparador: dice qué hay marcado sin abrirse. Cuando hay algo marcado se
enciende —letra y borde del acento— para que se vea de un vistazo cuáles de
los filtros están puestos; el fondo NO se tiñe del acento, por la regla 1. */
.agx-dd-btn {
display: inline-flex; align-items: center; gap: 8px; max-width: 240px;
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 6px;
padding: 6px 9px; font-size: 12px; font-family: var(--font);
cursor: pointer; transition: border-color .12s, color .12s;
}
.agx-dd-btn:hover { border-color: var(--blue-light); }
.agx-dd-btn.on {
color: var(--blue-light-txt, var(--blue-light));
border-color: var(--blue-light);
font-weight: 600;
}
.agx-dd-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }
.agx-dd-lbl {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* La flecha no compite con el rótulo: es la parte que menos información lleva. */
.agx-dd-car { font-size: 9px; color: var(--text-3); margin-left: auto; }
/* El panel. `position: fixed` para poder salir del `overflow` de la barra y de
la tabla; lo ubica `_ddUbicar` después de abrirlo. */
.agx-dd-panel {
position: fixed; z-index: 10050; max-width: 340px;
display: flex; flex-direction: column;
background: var(--navy-2); border: 1px solid var(--border-2); border-radius: 10px;
box-shadow: 0 14px 36px var(--sombra); overflow: hidden;
}
/* ⚠ Sin esta línea el `hidden` del panel no hace nada: lo pisa el `display` de
arriba. Es un defecto que este proyecto ya tuvo, y no da ningún error — se ve
el panel abierto y el DOM dice que está oculto. */
.agx-dd-panel[hidden] { display: none; }
.agx-dd-fijo { padding: 8px; border-bottom: 1px solid var(--border-2); flex: none; }
.agx-dd-buscar {
width: 100%; background: var(--navy-4); border: 1px solid var(--border-2);
border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: 12px;
font-family: var(--font);
}
.agx-dd-buscar:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -1px; }
.agx-dd-scroll {
max-height: 260px; overflow-y: auto; padding: 5px; scrollbar-width: thin;
}
.agx-dd-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 7px;
color: var(--text-2); font-size: 12px; cursor: pointer;
text-transform: none; letter-spacing: 0; font-weight: 500;
}
.agx-dd-item:hover { background: var(--navy-4); color: var(--text); }
.agx-dd-item input { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; flex: none; }
.agx-dd-item input:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.agx-dd-item span { overflow: hidden; text-overflow: ellipsis; }
/* La casilla de encabezado actúa sobre lo que se VE, y su rótulo lo dice cuando
hay un filtro de búsqueda puesto. Va destacada porque no es una opción más. */
.agx-dd-cab { color: var(--text); font-weight: 600; padding: 2px 8px; }
/* Las dos sub-pestañas de "Facturas de venta". Reusan `.agx-tab` —el mismo botón que las
pestañas de arriba— porque son la misma clase de control; lo único propio es que van
un poco más juntas y sin el margen inferior, para que se lean como un segundo nivel y
no como otra fila de pestañas principales. */
.agx-subventa { margin: 2px 0 10px; gap: 3px; }
.agx-subventa .agx-tab { font-size: 12px; padding: 5px 12px; }
/* Cada sub-pestaña con su casilla: la casilla decide si esa tabla SUMA a la proyección,
el botón decide cuál se está mirando. Son dos cosas distintas y por eso son dos
controles — una sola pestaña que hiciera las dos obligaría a mirar una tabla para
poder excluirla. */
.agx-subventa { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.agx-sv { display: inline-flex; align-items: center; gap: 5px; }
/* La casilla de la BASE del Aging (09-10-2026): exclusiva entre las dos sub-pestañas. */
.agx-sv-chk { display: inline-flex; align-items: center; cursor: pointer; padding: 2px; }
.agx-sv-chk input { width: 14px; height: 14px; accent-color: var(--blue-light); cursor: pointer; }
.agx-subventa .agx-tab { font-size: 12px; padding: 5px 12px; }
/* El cartel de los MONTOS CAMBIADOS A MANO (23-09-2026). Es el tercero de la familia y
el tono lo separa de sus dos hermanos a propósito: ámbar = «esta tabla se ve y no
suma», rojo = «el total está inflado», azul = «la proyección está corriendo sobre un
supuesto». Tres carteles con el mismo tono se leen como el mismo aviso.
⚠ Y este NO se puede quitar: retocar un monto es el único mecanismo del apartado que
mueve el total sin que se vea, así que el cartel es la defensa — no un adorno.
⚠ Mismo patrón que los otros dos: tinte al 5% con `color-mix` sobre el TOKEN, acento
en la LÍNEA y en el ÍCONO, y el texto en el token neutro. El acento como texto
sobre un tinte de sí mismo es lo que falló cuatro veces en esta aplicación. */
.agx-nota-mano {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 12px; padding: 9px 12px;
background: color-mix(in srgb, var(--blue) 5%, var(--navy-3));
border: 1px solid var(--border-2); border-left: 3px solid var(--blue);
border-radius: 6px; font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.agx-nota-mano b { color: var(--text); }
.agx-nota-mano svg { flex: none; margin-top: 2px; color: var(--blue-txt, var(--blue)); }
/* El botón de restaurar, dentro del cartel: separado del texto para que no se lea como
parte de la frase. */
.agx-nota-mano .agx-btn { margin-left: 8px; vertical-align: middle; }
/* El campo editable del monto, en la tabla de la base. Hereda la forma del campo de días
del modal de plazos —son el mismo gesto— y solo cambia el ancho: acá entra una cifra
de millones con dos decimales.
⚠ `text-align: right` y `tabular-nums` por lo mismo que el resto de la columna: una
columna de plata se lee comparando las unidades, y sin ancho fijo de dígito los
números no se alinean aunque estén a la derecha.
⚠ Y se le sacan las flechitas de incremento: son 300 filas, ocupan ancho en cada una,
y nadie ajusta un monto de seis cifras de a un centavo por clic. */
.agx-usd-mano {
width: 108px; text-align: right;
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 5px;
padding: 3px 6px; font-family: var(--mono); font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.agx-usd-mano::-webkit-outer-spin-button,
.agx-usd-mano::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.agx-usd-mano { -moz-appearance: textfield; appearance: textfield; }
.agx-usd-mano:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; }
/* Cambiado a mano: acento en la LETRA y en el BORDE, fondo neutro — igual que el campo
de días, y por el mismo motivo de contraste. */
.agx-usd-mano.mano { color: var(--amber); border-color: var(--amber); }
/* La cabecera del panel con un atajo al lado de "Todos" (hoy solo Empresa relacionada).
`flex` en vez de dejar el botón en flujo: sin esto la casilla y el botón caen en dos
renglones y el panel crece de alto sin motivo. */
.agx-dd-acc { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agx-dd-std {
flex: none; background: var(--navy-3); color: var(--text-2);
border: 1px solid var(--border-2); border-radius: 5px;
padding: 3px 9px; font-size: 10.5px; font-weight: 600;
font-family: inherit; cursor: pointer; white-space: nowrap;
transition: background .12s ease, color .12s ease;
}
.agx-dd-std:hover { background: var(--navy-4); color: var(--text); }
.agx-dd-std:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }
.agx-dd-vacio { padding: 9px 10px; font-size: 11.5px; color: var(--text-3); font-style: italic; }
.agx-dd-item[hidden] { display: none; }
.agx-dd-vacio[hidden] { display: none; }
/* ── Los rangos de fecha ───────────────────────────────────────────────────
Dos campos y una flecha entre ellos: la flecha dice que es un rango sin
necesidad de las palabras "desde" y "hasta", que los dos `aria-label` sí
llevan para quien navegue con lector de pantalla. */
.agx-grupo-rangos { flex-direction: column; align-items: flex-start; gap: 8px; }
.agx-rango { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.agx-rango > label {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-3); font-weight: 600; min-width: 82px;
}
.agx-rango-par { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.agx-rango input[type="date"] {
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 6px;
padding: 5px 8px; font-size: 12px; font-family: var(--mono);
}
.agx-rango-sep { color: var(--text-3); font-size: 12px; }
/* El rango invertido: se avisa en vez de corregirlo solo. El ámbar va en la
LETRA y en el BORDE del aviso, no como tinte de fondo bajo su propio texto. */
.agx-rango-mal input[type="date"] { border-color: var(--amber); }
.agx-rango-aviso {
display: block; width: 100%;
font-size: 11.5px; line-height: 1.5; color: var(--amber);
border-left: 3px solid var(--amber); padding-left: 9px;
}
.agx-rango-aviso b { font-family: var(--mono); }
/* En pantallas angostas el rótulo del rango se va arriba: dos campos de fecha
más un rótulo de 82px no caben en una columna de barra estrecha. */
@media (max-width: 900px) {
.agx-rango { flex-direction: column; align-items: flex-start; gap: 4px; }
.agx-rango > label { min-width: 0; }
}
/* ── La factura sin plazo de pago medido ───────────────────────────────────
Se VE en la tabla y NO suma a la proyección. Es la segunda diferencia
deliberada entre lo que se muestra y lo que se cuenta (la primera es la
casilla de las sub-pestañas), así que la fila lo dice sola: sin este color
habría filas que el total ignora y nada que lo explique.
El acento va en la LETRA y en la LÍNEA del borde, y el fondo se queda en un
7% — un tinte del propio rojo debajo de texto rojo es el patrón de contraste
que ya falló cuatro veces en este proyecto, porque los dos se mueven juntos
y la diferencia entre ellos no crece nunca. */
.agx-base tbody tr.agx-sin-plazo { background: color-mix(in srgb, var(--red) 7%, transparent); }
.agx-base tbody tr.agx-sin-plazo:hover { background: color-mix(in srgb, var(--red) 13%, var(--navy-3)); }
/* La línea del borde va como sombra interior de la primera celda: un `border-left`
sobre el
no se dibuja con el modelo de tabla colapsado. */
.agx-base tbody tr.agx-sin-plazo td:first-child { box-shadow: inset 3px 0 0 var(--red-txt, var(--red)); }
/* El numerador de fila. Es contexto, no dato: se lee cuando hace falta y no compite
con lo que importa. Tabular para que las unidades queden en columna. */
.agx-n {
color: var(--text-3); font-family: var(--mono); font-size: 10.5px;
text-align: right; width: 1%; white-space: nowrap;
font-variant-numeric: tabular-nums; user-select: none;
}
.agx-sp-n { color: var(--red-txt, var(--red)); font-family: var(--mono); }
/* ── El modal de plazos de pago ────────────────────────────────────────────
Vive dentro del contenedor de la vista pero se pinta sobre toda la pantalla:
`position: fixed` para que no lo recorte ningún `overflow` de los de arriba. */
.agx-btn-plz { margin-left: auto; }
.agx-btn-plz .mx-ico { width: 1.15em; height: 1.15em; }
.agx-plz-ov {
position: fixed; inset: 0; z-index: 10040;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(2, 6, 23, .62);
animation: prPlzEntra .14s ease-out;
}
.agx-plz {
display: flex; flex-direction: column;
width: min(1040px, 100%); max-height: 100%;
background: var(--navy-2); border: 1px solid var(--border-2);
border-radius: 10px; overflow: hidden;
box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
}
@keyframes prPlzEntra { from { opacity: 0 } to { opacity: 1 } }
.agx-plz-cab {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
}
.agx-plz-tit { font-size: 14px; font-weight: 700; color: var(--text); }
.agx-plz-tit .mx-ico { width: 1.15em; height: 1.15em; vertical-align: -.18em; color: var(--blue-light-txt, var(--blue-light)); }
.agx-plz-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; max-width: 74ch; }
.agx-plz-sub b { color: var(--text-2); }
.agx-plz-x {
flex: none; background: none; border: 1px solid var(--border-2); border-radius: 6px;
color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1;
padding: 6px 9px; transition: color .12s, border-color .12s;
}
.agx-plz-x:hover { color: var(--text); border-color: var(--text-3); }
/* Los dos números que resumen el estado del dato. El del que falta lleva el rojo en la
LETRA y la separación la da el borde, no un tinte del mismo rojo debajo. */
.agx-plz-kpis {
display: flex; flex-wrap: wrap; gap: 8px 20px;
padding: 10px 16px; font-size: 11.5px; color: var(--text-3);
border-bottom: 1px solid var(--border);
}
.agx-plz-kpis b { font-family: var(--mono); color: var(--text-2); }
.agx-plz-mal { color: var(--red-txt, var(--red)); }
.agx-plz-mal b { color: var(--red-txt, var(--red)); }
.agx-plz-tools {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.agx-plz-busca {
flex: 1 1 260px; min-width: 200px;
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 6px;
padding: 7px 10px; font-size: 12px; font-family: var(--font);
}
.agx-plz-busca::placeholder { color: var(--text-3); }
.agx-plz-chk {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.agx-plz-chk input { width: 14px; height: 14px; accent-color: var(--blue-light); cursor: pointer; }
.agx-plz-cuerpo { overflow: auto; }
.agx-plz-tabla { min-width: 760px; }
/* La columna que gobierna la fecha de pago se distingue: es la única de las tres que
entra al cálculo, y sin marcarla las otras dos parecen alternativas equivalentes. */
.agx-plz-tabla th.agx-plz-p8 { color: var(--blue-light-txt, var(--blue-light)); }
.agx-plz-tabla td.agx-plz-p8 { color: var(--text); font-weight: 600; }
/* Los días son editables, y tiene que verse que lo son: un número que se puede cambiar
y parece texto no se toca nunca. De ahí el borde y el fondo propio.
⚠ Y el ancho es fijo: sin él la columna se estira con el control de las flechas del
navegador y corre las tres de la derecha. */
.agx-plz-dias {
width: 64px; text-align: right;
background: var(--navy-3); color: var(--text);
border: 1px solid var(--border-2); border-radius: 5px;
padding: 3px 6px; font-family: var(--mono); font-size: 12px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.agx-plz-dias:focus { outline: 2px solid var(--blue-light); outline-offset: 1px; }
/* Cambiado a mano: el acento va en la LETRA y en el BORDE, y el fondo se queda neutro.
Un tinte del mismo ámbar debajo de texto ámbar no separa nada — es el patrón de
contraste que ya falló cuatro veces en este proyecto. */
.agx-plz-dias.mano {
color: var(--amber); border-color: var(--amber);
}
.agx-plz-mano-n { color: var(--amber); }
.agx-plz-mano-n b { color: var(--amber); font-family: var(--mono); }
/* El plazo PRESTADO de otro código del mismo cliente. Mismo criterio que el ámbar de
arriba: el acento va en la LETRA y en el BORDE y el fondo se queda neutro — un tinte
del mismo azul debajo de texto azul no separa nada, y los dos se mueven juntos. */
.agx-plz-dias.prestado {
color: var(--blue-txt, var(--blue)); border-color: var(--blue-txt, var(--blue));
}
.agx-plz-prest {
display: inline-block; margin-left: 6px; padding: 1px 6px;
border: 1px solid var(--blue-txt, var(--blue)); border-radius: 4px;
color: var(--blue-txt, var(--blue));
font-size: 10px; font-weight: 700; white-space: nowrap; cursor: help;
font-family: var(--mono);
}
.agx-plz-prest-n { color: var(--blue-txt, var(--blue)); }
.agx-plz-prest-n b { color: var(--blue-txt, var(--blue)); font-family: var(--mono); }
.agx-plz-rest, .agx-plz-xls { flex: none; font-size: 11px; padding: 5px 9px; }
.agx-plz-xls .mx-ico { width: 1.1em; height: 1.1em; }
.agx-plz-rest .mx-ico { width: 1.1em; height: 1.1em; }
.agx-plz-tabla th:nth-child(n+4) { text-align: right; } /* el modal tiene sus columnas fijas */
.agx-plz-nom { white-space: normal; min-width: 220px; }
.agx-plz-nd { color: var(--red-txt, var(--red)); }
.agx-plz-recorte { padding: 10px 16px; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.agx-plz-cargando { padding: 12px 16px; font-size: 12px; color: var(--text-3); }
.agx-plz-cargando .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.24em; }
/* La tabla del modal lleva también la clase de la tabla base, así que hereda su regla de
alineación por clase. Las columnas de días no la tienen, y por eso el modal conserva su
propia regla contando posiciones: sus columnas son fijas y no crecen.
⚠ Acá NO se transcribe el selector de la tabla base: hay una invariante que prohíbe que
vuelva a contar posiciones, y busca en el archivo entero. Un comentario que copia lo que
su propio test prohíbe pone el test en rojo sobre código sano — y un test que falla sin
defecto termina "arreglándose" debilitándolo. Se nombra en prosa. */
/* La casilla de las facturas sin fecha de pago: va pegada a su rango, y cuando el rango
está vacío se atenúa porque no cambia nada. Se atenúa y NO se esconde: un control que
aparece y desaparece según el estado de otro se lee como un error de la pantalla.
El atenuado usa opacidad sobre el rótulo y no un color propio — WCAG exime el texto de
los componentes inactivos, y así no hay un token nuevo que mantener en dos temas. */
.agx-chk-sinfecha { margin-left: 2px; white-space: nowrap; }
.agx-chk-inerte { opacity: .62; }
/* ══ El anticipo: el punto de color de la celda «Pagado» y su leyenda ══════════
(16-09-2026)
⚠ El punto lo DIBUJA el CSS y no es un emoji ni un `