/* ═══════════════════════════════════════════════════════════════════════════
proyeccion.css — apartado "Proyección a 4 semanas" (solo Admin)
───────────────────────────────────────────────────────────────────────────
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.
═══════════════════════════════════════════════════════════════════════════ */
.pr-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. */
.pr-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;
}
.pr-grupo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pr-grupo > label {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-3); font-weight: 600;
}
.pr-grupo select, .pr-grupo input[type="search"], .pr-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);
}
.pr-grupo input[type="search"] { min-width: 190px; }
.pr-grupo input[type="number"] { width: 108px; }
.pr-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;
}
.pr-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;
}
.pr-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. */
.pr-monedas { display: flex; gap: 6px; margin: 0 0 10px; }
.pr-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;
}
.pr-tab:hover { color: var(--text-2); }
.pr-tab.on {
color: var(--text); background: var(--navy-2);
border-bottom-color: var(--blue-light);
}
/* ── La tabla ─────────────────────────────────────────────────────────────── */
.pr-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 */
}
.pr-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 720px; }
.pr-tabla th, .pr-tabla td { padding: 7px 12px; }
.pr-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;
}
.pr-tabla thead th span {
display: block; font-size: 9.5px; font-weight: 500;
color: var(--text-3); text-transform: none; letter-spacing: 0;
}
.pr-tabla thead th.pr-lbl { text-align: left; font-family: var(--mono); font-size: 13px; color: var(--text); }
.pr-lbl { text-align: left; color: var(--text-2); white-space: nowrap; }
.pr-num { text-align: right; font-family: var(--mono); white-space: nowrap; color: var(--text); }
/* Encabezado de sección dentro de la tabla: separa ingresos, egresos y
resultado sin sacarlos a tres tablas, que perdería la alineación por semana. */
.pr-sep td {
padding-top: 15px; padding-bottom: 5px;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
font-weight: 700; color: var(--text-3);
border-bottom: 1px solid var(--border);
}
.pr-sep .mx-ico { width: 1.25em; height: 1.25em; vertical-align: -.26em; }
/* El BRUTO va apagado y el proyectado destacado: el bruto es el dato de SAP y
el proyectado es la decisión. La jerarquía tiene que decir cuál es cuál. */
.pr-bruto .pr-num, .pr-bruto .pr-lbl { color: var(--text-3); }
.pr-total td { font-weight: 700; border-top: 1px solid var(--border-2); }
.pr-ing .pr-num { color: var(--green); }
.pr-eg .pr-num { color: var(--red-txt, var(--red)); }
.pr-neto .pr-num { color: var(--text); }
.pr-acum td {
color: var(--blue-light-txt, var(--blue-light));
border-top: none; padding-top: 2px;
}
.pr-acum .pr-num { color: var(--blue-light-txt, var(--blue-light)); }
/* ── Las celdas de porcentaje ──────────────────────────────────────────────
Son el control principal del apartado. Van dentro de la tabla, en la columna
de su semana, porque el número que se toca tiene que estar debajo del número
que cambia — con los controles en otro panel hay que ir y volver con la vista
para entender qué movió qué. */
.pr-pct { text-align: right; white-space: nowrap; }
.pr-pct input {
width: 58px; text-align: right;
background: var(--navy-4); color: var(--text);
border: 1px solid var(--border-2); border-radius: 5px;
padding: 4px 6px; font-size: 12px; font-family: var(--mono);
}
.pr-pct input:focus {
outline: none; border-color: var(--blue-light);
box-shadow: 0 0 0 2px var(--blue-glow);
}
.pr-pct span { color: var(--text-3); font-size: 11px; margin-left: 3px; }
/* Las flechas del spinner sobran: se teclea o se usa la rueda, y ocupan la
mitad del ancho útil en un campo de dos dígitos. */
.pr-pct input::-webkit-outer-spin-button,
.pr-pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pr-pct input { -moz-appearance: textfield; appearance: textfield; }
/* ── Pie de "fuera del horizonte" ──────────────────────────────────────────
Existe para que un total bajo se pueda explicar. Sin este dato, una
proyección chica parece un error de carga. */
.pr-fuera {
font-size: 11.5px; color: var(--text-3);
padding: 10px 14px 12px; border-top: 1px solid var(--border);
line-height: 1.6;
}
.pr-fuera b { color: var(--text-2); font-family: var(--mono); }
.pr-fuera .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.24em; }
/* ── Gráfico ──────────────────────────────────────────────────────────────── */
.pr-graf { margin-bottom: 16px; }
.pr-graf-box { height: 300px; position: relative; }
/* ── Panel de orígenes ─────────────────────────────────────────────────────
Va en un cerrado: es la respuesta a "¿de dónde salió este número?",
una pregunta que se hace a veces y no siempre. Cerrado por defecto para que no
compita con la tabla, pero presente para no obligar a leer el código. */
.pr-origenes {
background: var(--navy-2); border: 1px solid var(--border);
border-radius: 10px; padding: 0 14px;
}
.pr-origenes > summary {
cursor: pointer; padding: 12px 0; font-size: 12.5px; font-weight: 600;
color: var(--text-2); list-style: none;
}
.pr-origenes > summary::-webkit-details-marker { display: none; }
.pr-origenes > summary:hover { color: var(--text); }
.pr-origenes > summary .mx-ico { width: 1.25em; height: 1.25em; vertical-align: -.26em; }
.pr-origenes table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin-bottom: 6px; }
.pr-origenes th {
text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-3); padding: 6px 10px; border-bottom: 1px solid var(--border);
}
.pr-origenes td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.pr-url { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.pr-desc { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.pr-est { font-weight: 600; }
.pr-est-ok { color: var(--green); }
.pr-est-cargando { color: var(--amber); }
.pr-est-pendiente { color: var(--text-3); }
.pr-est-error { color: var(--red-txt, var(--red)); }
.pr-nota { font-size: 11px; color: var(--text-3); line-height: 1.6; margin: 8px 0 14px; }
/* ── 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. */
.pr-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;
}
.pr-error b { color: var(--text); }
.pr-error .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.24em; }
@media (max-width: 900px) {
.pr-barra { gap: 12px 16px; }
.pr-grupo input[type="search"] { min-width: 140px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Segunda tanda (18-08-2026): el monto en tiempo real bajo cada porcentaje, las
pestañas de las dos BASES, y la bolsa vencida en una sola línea.
═══════════════════════════════════════════════════════════════════════════ */
/* ── El monto que resulta, debajo de su campo ──────────────────────────────
Es la respuesta a lo que se está tecleando, así que va PEGADO al campo y no en
otra fila: con el número lejos hay que buscarlo con la vista y se pierde la
relación entre lo que se tocó y lo que cambió. */
.pr-pct-fila { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.pr-pct-val {
font-family: var(--mono); font-size: 11px; text-align: right;
color: var(--blue-light-txt, var(--blue-light));
margin-top: 3px; white-space: nowrap;
}
.pr-fila-pct td { padding-top: 5px; padding-bottom: 8px; }
/* ── La bolsa vencida, en una línea ────────────────────────────────────────
Antes era una fila con el mismo total repetido en las cuatro columnas, y se leía
como si la bolsa completa estuviera disponible cada semana. Es UNA bolsa: el
total va una vez, y los montos por semana salen de la fila de % de abajo. */
.pr-bolsa td {
padding-top: 14px; border-top: 1px dashed var(--border-2);
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.pr-bolsa-tit { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pr-bolsa-monto { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
.pr-bolsa-que { font-size: 11px; color: var(--text-3); }
.pr-suma-ok { font-size: 11px; color: var(--text-3); margin-left: auto; }
/* ── 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. */
.pr-vistas { margin-bottom: 4px; }
.pr-vistas .pr-tab { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); }
.pr-vistas .pr-tab .mx-ico { width: 1.2em; height: 1.2em; vertical-align: -.22em; }
.pr-barra-filtros { margin-top: 0; border-radius: 0 10px 0 0; }
/* ── La tabla de una base ──────────────────────────────────────────────────── */
.pr-base { font-size: 12px; min-width: 900px; }
.pr-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. */
.pr-base thead th.pr-num, .pr-base thead th.pr-n { text-align: right; }
.pr-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. */
.pr-th-ord { cursor: pointer; user-select: none; }
.pr-th-ord:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.pr-th-ord.on { color: var(--blue-light-txt, var(--blue-light)); }
.pr-base td { border-bottom: 1px solid var(--border); color: var(--text-2); }
.pr-mono { font-family: var(--mono); white-space: nowrap; color: var(--text-3); }
.pr-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. */
.pr-b-venc { color: var(--red-txt, var(--red)); font-weight: 600; }
.pr-b-sem { color: var(--green); font-weight: 600; font-family: var(--mono); }
.pr-b-fuera { color: var(--text-3); font-style: italic; }
.pr-b-bloq {
font-family: var(--mono); font-size: 10px; font-weight: 700;
color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
border-radius: 4px; padding: 1px 5px;
}
/* ── 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. */
.pr-base-cab {
border-top: none; border-bottom: 1px solid var(--border);
display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.pr-base-cab b { color: var(--text); font-family: var(--mono); }
.pr-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. */
.pr-base-xls { margin-left: auto; order: 9; font-size: 11px; padding: 5px 9px; flex: none; }
.pr-base-xls .mx-ico { width: 1.1em; height: 1.1em; }
/* ═══════════════════════════════════════════════════════════════════════════
Tercera tanda (19-08-2026): la semana configurable, el arrastre de lo no
cobrado, y los filtros completos de las dos bases.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Dónde corta la semana ─────────────────────────────────────────────────
Va en la barra del escenario porque define el eje de TODA la tabla: cambiarlo
mueve los cuatro baldes. No es un filtro, es el marco. */
.pr-grupo-semana { align-items: center; }
.pr-grupo-semana 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);
}
.pr-grupo-semana select:disabled { opacity: .5; cursor: not-allowed; }
.pr-btn-mini { padding: 4px 8px; font-size: 10.5px; }
/* El eco de la semana +1 escrito con día y fecha: es la comprobación de que el
ajuste hizo lo que uno quería, y va al lado del control y no en la tabla. */
.pr-semana-eco { font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.pr-semana-eco b { color: var(--text-2); font-family: var(--mono); }
/* ── Las filas del arrastre ────────────────────────────────────────────────
Tres filas que se leen como una cuenta: lo que vence, más lo que se arrastró,
igual lo disponible. La sangría y el signo lo dicen sin explicarlo. */
.pr-arrastre .pr-lbl { padding-left: 24px; }
.pr-arrastre .pr-num { color: var(--amber); }
.pr-disp .pr-lbl { font-weight: 600; color: var(--text-2); }
.pr-disp td { border-top: 1px solid var(--border); }
.pr-disp .pr-num { color: var(--text-2); }
/* El remanente de la bolsa vencida reemplazó al aviso de "suman más de 100%":
con arrastre eso es imposible, y lo que importa es cuánto queda sin recuperar. */
.pr-resto {
font-size: 11px; color: var(--amber); margin-left: auto; white-space: nowrap;
}
.pr-resto b { font-family: var(--mono); }
/* ── 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. */
.pr-tabla thead th span { line-height: 1.5; white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════════════════════
Cuarta tanda (19-08-2026): COLOR para poder seguir la tabla.
───────────────────────────────────────────────────────────────────────────
El pedido fue literal: "métele más color a la tabla porque me pierdo, y no
tengo buenos conocimientos financieros". Así que el color acá no decora:
codifica de qué lado está cada cifra y si el resultado sobra o falta.
⚠ Tres reglas que se respetan en todo este bloque, y las tres se aprendieron
rompiéndolas en este proyecto:
1. El acento va en la LETRA y en el BORDE, nunca como tinte de fondo del
mismo color debajo de su propio texto — eso no gana contraste nunca.
2. Todo lo que dice algo por color lo dice TAMBIÉN por palabra o forma.
Quien no distingue el rojo del verde tiene que poder leer la tabla.
3. Cada color sale de un token que el tema invierte. Ningún literal.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Los tres bloques, cada uno con su franja ──────────────────────────────
Es el recurso más útil de todos: un borde de color a la izquierda de cada
grupo de filas. La vista encuentra el bloque sin leer el rótulo. */
.pr-sep-ing td { border-left: 3px solid var(--green); color: var(--green); }
.pr-sep-eg td { border-left: 3px solid var(--red-txt, var(--red)); color: var(--red-txt, var(--red)); }
.pr-sep-res td { border-left: 3px solid var(--blue-light-txt, var(--blue-light));
color: var(--blue-light-txt, var(--blue-light)); }
/* 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. */
.pr-tabla tbody tr td:first-child { border-left: 3px solid transparent; }
.pr-bruto .pr-lbl, .pr-fila-pct .pr-lbl, .pr-bolsa .pr-lbl {
border-left-color: var(--border-2);
}
/* ── Las filas de porcentaje, marcadas como lo que se toca ─────────────────
Son los únicos controles de la tabla, así que su fila tiene superficie propia:
deja de haber que adivinar dónde se interviene. */
.pr-fila-pct td { background: var(--navy-3); }
.pr-fila-pct .pr-lbl {
color: var(--text); font-weight: 600;
border-left-color: var(--blue-light-txt, var(--blue-light)) !important;
}
.pr-pct input { border-color: var(--blue-light); }
/* ── La fila del disponible: es la base del cálculo, se destaca ───────────── */
.pr-disp td { background: var(--navy-3); border-top: 1px solid var(--border-2); }
.pr-disp .pr-num { color: var(--text); font-weight: 600; }
/* ── El SUBTOTAL de ingresos, antes del ajuste de cobranza ─────────────────
Lleva `pr-disp` porque cumple el mismo papel —es la base del porcentaje que va
debajo— y una línea propia arriba, más marcada, para que se lea como el cierre de
los dos porcentajes anteriores y no como una fila de insumo más. Sin la fila
visible no hay forma de saber sobre qué se aplica el ajuste. */
.pr-subtotal td { border-top: 2px solid var(--border-2); }
/* ── Los totales de cada lado ──────────────────────────────────────────────
Con superficie propia y el color de su bloque, para que "Ingreso proyectado" y
"Egreso proyectado" se distingan de las filas de insumo que tienen arriba. */
.pr-ing td, .pr-eg td { background: var(--navy-3); }
.pr-ing .pr-lbl { color: var(--green); border-left-color: var(--green) !important; }
.pr-eg .pr-lbl { color: var(--red-txt, var(--red)); border-left-color: var(--red-txt, var(--red)) !important; }
/* ── El resultado: color por SIGNO, más la palabra ─────────────────────────
El dato que un lector no financiero necesita de un vistazo es si esa semana
sobra o falta plata. El color lo dice rápido y la palabra lo dice seguro. */
.pr-neto td, .pr-acum td { background: var(--navy-4); }
.pr-neto .pr-lbl, .pr-acum .pr-lbl {
color: var(--text); font-weight: 700;
border-left-color: var(--blue-light-txt, var(--blue-light)) !important;
}
.pr-num.pr-pos { color: var(--green); }
.pr-num.pr-neg { color: var(--red-txt, var(--red)); }
.pr-num.pr-cero { color: var(--text-3); }
.pr-signo {
display: block; font-family: var(--font); font-size: 9.5px;
font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
opacity: .85; margin-top: 1px;
}
/* La caja acumulada es la línea que más importa: si en alguna semana se da
vuelta, ahí está el problema. Va con un borde arriba que la separa del neto. */
.pr-acum td { border-top: 2px solid var(--border-2); }
.pr-acum .pr-num { font-size: 13.5px; }
/* ── La bolsa vencida, en el color de su bloque ──────────────────────────── */
.pr-bolsa .pr-bolsa-monto { color: var(--amber); }
/* ── La regla de pago, en la barra de configuración ────────────────────────
Va separada de los filtros porque no filtra: cambia CÓMO se reparten los
egresos entre las semanas. Un filtro saca filas; esto las mueve de columna, y
confundirlos lleva a buscar el problema donde no está. */
.pr-grupo-pago { align-items: center; }
.pr-grupo-pago input[type="number"] { width: 74px; }
.pr-grupo-pago input:disabled { opacity: .5; cursor: not-allowed; }
.pr-regla-eco { font-size: 11.5px; color: var(--text-3); line-height: 1.6; max-width: 46ch; }
.pr-regla-eco b { color: var(--amber); font-family: var(--mono); }
/* 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) {
.pr-tabla tbody tr td:first-child,
.pr-sep-ing td, .pr-sep-eg td, .pr-sep-res td { 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.
═══════════════════════════════════════════════════════════════════════════ */
.pr-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. */
.pr-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;
}
.pr-dd-btn:hover { border-color: var(--blue-light); }
.pr-dd-btn.on {
color: var(--blue-light-txt, var(--blue-light));
border-color: var(--blue-light);
font-weight: 600;
}
.pr-dd-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }
.pr-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. */
.pr-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. */
.pr-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. */
.pr-dd-panel[hidden] { display: none; }
.pr-dd-fijo { padding: 8px; border-bottom: 1px solid var(--border-2); flex: none; }
.pr-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);
}
.pr-dd-buscar:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -1px; }
.pr-dd-scroll {
max-height: 260px; overflow-y: auto; padding: 5px; scrollbar-width: thin;
}
.pr-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;
}
.pr-dd-item:hover { background: var(--navy-4); color: var(--text); }
.pr-dd-item input { accent-color: var(--blue); width: 14px; height: 14px; cursor: pointer; flex: none; }
.pr-dd-item input:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.pr-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. */
.pr-dd-cab { color: var(--text); font-weight: 600; padding: 2px 8px; }
/* Las dos sub-pestañas de "Facturas de venta". Reusan `.pr-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. */
.pr-subventa { margin: 2px 0 10px; gap: 3px; }
.pr-subventa .pr-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. */
.pr-subventa { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.pr-sv { display: inline-flex; align-items: center; gap: 5px; }
.pr-sv-chk { display: inline-flex; align-items: center; cursor: pointer; padding: 2px; }
.pr-sv-chk input { width: 14px; height: 14px; accent-color: var(--blue-light); cursor: pointer; }
.pr-subventa .pr-tab { font-size: 12px; padding: 5px 12px; }
/* La tabla está a la vista pero NO suma: el único descalce deliberado entre lo que se ve
y lo que se cuenta, así que se dice con todas las letras. */
.pr-nota-fuera {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 12px; padding: 9px 12px;
background: var(--amber-bg, rgba(245,158,11,.12));
border: 1px solid var(--border-2); border-left: 3px solid var(--amber);
border-radius: 6px; font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.pr-nota-fuera b { color: var(--text); }
.pr-nota-fuera svg { flex: none; margin-top: 2px; color: var(--amber); }
/* El cartel del DOBLE CONTEO (09-09-2026). Hermano del de arriba y con la misma forma,
en tono GRAVE: el otro explica una tabla que se ve y no suma; este avisa que el total
está inflado, que es un número equivocado en pantalla.
⚠ El tinte va al 5% y no al 12% del hermano, y el número está MEDIDO en el trabajo de
Proveedores Críticos: `--red-bg` sobre `--navy-3` empuja el texto neutro por debajo
de 4,5:1. Al 5% los dos temas pasan.
⚠ Y el acento va en la LÍNEA y en el ÍCONO, con el texto en el token neutro. El
patrón que falló cuatro veces en esta aplicación es el acento como texto sobre un
tinte de sí mismo: los dos se mueven juntos y el contraste no crece nunca.
⚠ El tinte se arma con `color-mix` sobre el TOKEN, no con un `rgba()` literal: en
tema claro el rojo es otro, y un literal daría el tinte del tema equivocado. */
.pr-nota-doble {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 12px; padding: 9px 12px;
background: color-mix(in srgb, var(--red) 5%, var(--navy-3));
border: 1px solid var(--border-2); border-left: 3px solid var(--red);
border-radius: 6px; font-size: 12px; color: var(--text-2); line-height: 1.6;
}
.pr-nota-doble b { color: var(--text); }
.pr-nota-doble svg { flex: none; margin-top: 2px; color: var(--red-txt, var(--red)); }
/* 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. */
.pr-dd-acc { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-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;
}
.pr-dd-std:hover { background: var(--navy-4); color: var(--text); }
.pr-dd-std:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }
.pr-dd-vacio { padding: 9px 10px; font-size: 11.5px; color: var(--text-3); font-style: italic; }
.pr-dd-item[hidden] { display: none; }
.pr-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. */
.pr-grupo-rangos { flex-direction: column; align-items: flex-start; gap: 8px; }
.pr-rango { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pr-rango > label {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-3); font-weight: 600; min-width: 82px;
}
.pr-rango-par { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pr-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);
}
.pr-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. */
.pr-rango-mal input[type="date"] { border-color: var(--amber); }
.pr-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;
}
.pr-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) {
.pr-rango { flex-direction: column; align-items: flex-start; gap: 4px; }
.pr-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. */
.pr-base tbody tr.pr-sin-plazo { background: color-mix(in srgb, var(--red) 7%, transparent); }
.pr-base tbody tr.pr-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. */
.pr-base tbody tr.pr-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. */
.pr-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;
}
/* El cartel del pie de la proyección y el número del pie de la tabla: los dos dicen
cuántas quedaron afuera. Es el mismo dato en las dos pantallas, a propósito. */
.pr-sin-plazo-nota { border-top: 1px dashed var(--border-2); }
.pr-sin-plazo-nota .mx-ico { color: var(--red-txt, var(--red)); }
.pr-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. */
.pr-btn-plz { margin-left: auto; }
.pr-btn-plz .mx-ico { width: 1.15em; height: 1.15em; }
.pr-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;
}
.pr-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 } }
.pr-plz-cab {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
}
.pr-plz-tit { font-size: 14px; font-weight: 700; color: var(--text); }
.pr-plz-tit .mx-ico { width: 1.15em; height: 1.15em; vertical-align: -.18em; color: var(--blue-light-txt, var(--blue-light)); }
.pr-plz-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; max-width: 74ch; }
.pr-plz-sub b { color: var(--text-2); }
.pr-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;
}
.pr-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. */
.pr-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);
}
.pr-plz-kpis b { font-family: var(--mono); color: var(--text-2); }
.pr-plz-mal { color: var(--red-txt, var(--red)); }
.pr-plz-mal b { color: var(--red-txt, var(--red)); }
.pr-plz-tools {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.pr-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);
}
.pr-plz-busca::placeholder { color: var(--text-3); }
.pr-plz-chk {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.pr-plz-chk input { width: 14px; height: 14px; accent-color: var(--blue-light); cursor: pointer; }
.pr-plz-cuerpo { overflow: auto; }
.pr-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. */
.pr-plz-tabla th.pr-plz-p8 { color: var(--blue-light-txt, var(--blue-light)); }
.pr-plz-tabla td.pr-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. */
.pr-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;
}
.pr-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. */
.pr-plz-dias.mano {
color: var(--amber); border-color: var(--amber);
}
.pr-plz-mano-n { color: var(--amber); }
.pr-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. */
.pr-plz-dias.prestado {
color: var(--blue-txt, var(--blue)); border-color: var(--blue-txt, var(--blue));
}
.pr-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);
}
.pr-plz-prest-n { color: var(--blue-txt, var(--blue)); }
.pr-plz-prest-n b { color: var(--blue-txt, var(--blue)); font-family: var(--mono); }
.pr-plz-rest, .pr-plz-xls { flex: none; font-size: 11px; padding: 5px 9px; }
.pr-plz-xls .mx-ico { width: 1.1em; height: 1.1em; }
.pr-plz-rest .mx-ico { width: 1.1em; height: 1.1em; }
.pr-plz-tabla th:nth-child(n+4) { text-align: right; } /* el modal tiene sus columnas fijas */
.pr-plz-nom { white-space: normal; min-width: 220px; }
.pr-plz-nd { color: var(--red-txt, var(--red)); }
.pr-plz-recorte { padding: 10px 16px; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.pr-plz-cargando { padding: 12px 16px; font-size: 12px; color: var(--text-3); }
.pr-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. */
.pr-chk-sinfecha { margin-left: 2px; white-space: nowrap; }
.pr-chk-inerte { opacity: .62; }