/* ═══════════════════════════════════════════════════════════════════════════
criticos.css — apartado "Proveedores Críticos" (vista critical)
───────────────────────────────────────────────────────────────────────────
Hasta el 27-08-2026 este era el ÚNICO apartado sin hoja propia: sus estilos
vivían en 61 atributos `style=` dentro de `vistas/criticos.js`, con los
colores escritos a mano. Acá está el marcado que se rediseñó ese día —las
cuatro cards, la barra de filtros y la tabla de ocho columnas—; los `style=`
que quedan en el archivo son de partes que no se tocaron (el paginador, el
modal de "Nueva clasificación") y quedaron fuera de alcance a propósito.
Todo se escribe contra TOKENS, nunca contra un literal: la aplicación tiene
dos temas y un color escrito a mano sirve a uno solo.
⚠ 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.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Las cuatro cards ──────────────────────────────────────────────────────
El acento sale de la CLASE de cada card, no de un `style=` interpolado ni de
un `:nth-child`. Con `nth-child`, reordenar las cards mueve los colores y no
hay error que lo diga. */
.crit-card-prov { --accent-color: var(--blue); }
.crit-card-crit { --accent-color: var(--amber); }
.crit-card-deuda { --accent-color: var(--blue-light); }
.crit-card-venc { --accent-color: var(--red); }
/* Los montos bajan a 22px: `$ 16,192,238.00` a 26px se sale de la card en un
notebook de 1366px. Los conteos se quedan en los 26px de `.kpi-value`. */
.crit-kpi-monto { font-size: 22px; }
.crit-kpi-ambar { color: var(--amber); }
.crit-kpi-azul { color: var(--blue-light-txt, var(--blue-light)); }
.crit-kpi-rojo { color: var(--red-txt, var(--red)); }
/* ── El interruptor de "≥ 10 días de mora" ─────────────────────────────────
Va DENTRO de su card, en el tamaño de un sub-texto: es una pregunta sobre esa
cifra, no un filtro de la pantalla. Si estuviera en la barra de filtros
parecería recortar también la tabla, que es lo único que no hace.
El acento en encendido es el AZUL, el mismo de `.chk`, y no el rojo de la
card: un interruptor rojo dentro de una card roja se lee como una alarma más,
cuando lo único que hace es cambiar el corte. */
.crit-sw {
position: relative; /* el oculto es absoluto: su ancla es este label */
display: inline-flex; align-items: center; gap: 8px;
margin-top: 8px; cursor: pointer; user-select: none;
}
.crit-sw-in { position: absolute; opacity: 0; width: 0; height: 0; }
.crit-sw-riel {
position: relative; flex: none; width: 28px; height: 16px;
background: var(--navy-4); border: 1px solid var(--border-2);
border-radius: 20px; transition: background .18s, border-color .18s;
}
.crit-sw-pomo {
position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
background: var(--text-3); border-radius: 50%;
transition: left .18s, background .18s;
}
.crit-sw-in:checked + .crit-sw-riel {
background: var(--blue); border-color: var(--blue);
}
.crit-sw-in:checked + .crit-sw-riel .crit-sw-pomo { left: 14px; background: #fff; }
/* El foco por teclado tiene que verse: el está oculto, así que el anillo
lo dibuja el riel. Sin esto el control es inalcanzable sin mouse. */
.crit-sw-in:focus-visible + .crit-sw-riel {
outline: 2px solid var(--blue-light); outline-offset: 2px;
}
.crit-sw-txt { font-size: 11.5px; color: var(--text-3); }
.crit-sw-in:checked ~ .crit-sw-txt { color: var(--text-2); }
/* ── Barra de filtros, dentro de la card y sobre la tabla ──────────────── */
.crit-filtros {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 20px; border-bottom: 1px solid var(--border);
}
.crit-buscador {
display: flex; align-items: center; gap: 6px;
flex: 1; min-width: 240px; max-width: 440px;
}
.crit-campo { position: relative; flex: 1; }
.crit-lupa {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
color: var(--text-3); display: inline-flex; line-height: 0;
}
.crit-input {
width: 100%; padding: 7px 12px 7px 30px;
background: var(--navy-4); border: 1px solid var(--border-2);
border-radius: 8px; color: var(--text);
font-size: 12px; font-family: var(--font); outline: none;
}
.crit-input:focus { border-color: var(--blue-light); }
.crit-btn-buscar { padding: 7px 14px; font-size: 12px; white-space: nowrap; }
.crit-btn-limpiar { padding: 7px 12px; font-size: 12px; }
/* Oculta el ✕ mientras no hay búsqueda que limpiar.
⚠ Es una clase con `display: none` y NO el atributo `hidden`: `.btn` declara
`display`, y cualquier regla que lo declare le gana a `hidden`. */
.crit-oculto { display: none; }
.crit-check {
display: flex; align-items: center; gap: 8px;
cursor: pointer; font-size: 13px; color: var(--text-2);
}
.crit-ayuda { margin-left: auto; font-size: 11px; color: var(--text-3); }
/* ── La tabla ──────────────────────────────────────────────────────────── */
.crit-tabla { max-height: calc(100vh - 380px); }
.crit-th-ord { cursor: pointer; }
/* Las tres columnas numéricas se alinean por CLASE, en el encabezado y en la
celda. ⚠ La versión posicional (`nth-child(n+5)`) obliga a corregir el número
cada vez que se agrega o se quita una columna, y olvidarse deja los montos
contra el borde izquierdo sin ningún error — pasó dos veces el mismo día en
la Proyección. Acá se retiraron TRES columnas de golpe, así que un selector
posicional habría quedado mal de entrada. */
.crit-tabla th.crit-num,
.crit-tabla td.crit-num { text-align: right; }
.crit-fila { transition: background .15s; }
/* Realce del crítico.
⚠ Es el tinte al 5%, y el número está MEDIDO, no elegido. La primera versión
usaba `--amber-bg` (12%), con un comentario que afirmaba que "apenas mueve el
fondo". Medido en Chrome: sobre `--navy-3` lo lleva a rgb(52,52,58) y ahí el
código del proveedor (`--text-3`) cae a 4,29:1 y el contador de vencidas a
4,49:1 — los dos por debajo del mínimo de 4,5. Al 5% el fondo queda en
rgb(37,43,61) y los dos vuelven a pasar.
Es el patrón de contraste que más veces falló en esta aplicación: un tinte del
propio acento debajo de su texto. Acá se puede usar porque el texto de la fila
NO es ámbar y el tinte es tenue; con un tinte fuerte habría que ir al otro
camino —acento en la letra y en la línea, fondo neutro—, que es lo que hace el
selector de prioridad más abajo.
⚠ Y el 5% se escribe con `color-mix` sobre el TOKEN, no como un rgba() literal:
en tema claro el ámbar es #9A6100 y no #f59e0b, así que un literal daría un
tinte que no corresponde a ese tema. Es la misma razón por la que `.btn-danger`
usa color-mix en vez de un hex oscurecido a mano. */
.crit-fila-critico { background: color-mix(in srgb, var(--amber) 5%, transparent); }
/* Un crítico SIN facturas en la prenómina vigente. Son 74 de 127 y se muestran
igual: esconderlos ocultaría a un proveedor que mañana factura. La atenuación
es del NOMBRE y del código, no de la fila entera — el selector de prioridad
tiene que quedar plenamente usable, que es a lo que se viene a esta pantalla. */
.crit-fila-muda .crit-prov-nom,
.crit-fila-muda .crit-prov-cod,
.crit-fila-muda .crit-txt { opacity: .62; }
/* El nombre es lo que más ancho aportaba a la tabla —301 px medidos— porque el
`white-space: nowrap` global lo obliga a caber en una línea. Con el tope, el
nombre completo queda en el atributo title de la celda. */
.crit-prov-nom {
font-weight: 500; font-size: 13px;
max-width: 235px; overflow: hidden; text-overflow: ellipsis;
}
.crit-prov-cod { font-size: 11px; color: var(--text-3); font-family: var(--mono); }
/* Insumo / Servicio y Rubro Abast. son texto libre y pueden venir largos.
`td { white-space: nowrap }` es GLOBAL en styles.css, así que sin un tope la
celda estira la tabla entera; con el tope, el valor completo sigue disponible
en el `title` de la celda. */
.crit-txt {
font-size: 12px; color: var(--text-2);
max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
/* Y el drop-down de Clasificación se estrecha SOLO en esta tabla. Su clase es
global (styles.css) pero no la usa nadie más; el override va con scope igual,
porque el día que alguien la reuse no tiene por qué heredar este ancho.
Medido en Chrome con la prenómina real: las ocho columnas medían 1.492 px y
entraban recién a 1.920 de viewport. En un notebook de 1.366 quedaban fuera de
la pantalla las dos que este apartado existe para mirar —Días Promedio y
Prioridad— y había que scrollear a la derecha para llegar a ellas. Con estos
dos topes la tabla baja a un ancho que entra a 1.600 y deja 1.366 a un scroll
corto en vez de 412 px. El valor completo sigue en el atributo title de la celda. */
.crit-tabla .clasif-dd-btn { min-width: 132px; max-width: 170px; }
.crit-monto { font-size: 13px; }
/* Neto NEGATIVO = saldo a favor: el proveedor tiene más notas de crédito que
deuda abierta. Hasta el 27-08-2026 un `Math.abs()` lo mostraba como deuda. */
.crit-favor { color: var(--green); }
.crit-vacio { font-size: 12px; color: var(--text-3); }
.crit-venc-cnt { color: var(--red-txt, var(--red)); font-weight: 600; font-size: 13px; }
.crit-venc-monto { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.crit-dias { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.crit-dias-alto { color: var(--red-txt, var(--red)); }
.crit-dias-medio { color: var(--amber); }
/* ── El selector de prioridad ──────────────────────────────────────────────
Era cuatro ternarios anidados repetidos cinco veces en el JavaScript. Acá
depende de `data-prio`, y el color se aplica a la LETRA y al BORDE con el
fondo en la superficie neutra: un tinte del propio acento debajo de su texto
no gana contraste nunca —los dos se mueven juntos— y es el patrón que ya
falló en cuatro lugares de esta aplicación. Con el borde alcanza para
separar, y el texto mide contra `--navy-4`, que el tema sí invierte. */
/* ── El botón de Prioridad: DOS estados, Ninguna y Alta ─────────────────────
Era un desplegable de cuatro opciones. MEDIA y BAJA no se usan para nada y
"crítico" es criticidad ALTA y nada más, así que ofrecía tres caminos de los
cuales dos no significaban nada. Las reglas de esos dos se fueron con ellos:
dejarlas sería CSS muerto, que este proyecto ya acumuló 45 reglas de una vez.
⚠ El ancho es FIJO y el mismo en los dos estados. Por contenido, «Ninguna» y
«Alta» miden distinto y la columna entera salta en cada clic.
⚠ El acento va en la LETRA, en el BORDE y en el PUNTO, nunca como tinte del
fondo. Un tinte del propio acento debajo de su propio texto es el patrón de
contraste que ya falló CUATRO veces acá: los dos se mueven juntos y el
contraste entre ellos no crece nunca. El fondo se queda en la superficie
neutra, que el tema ya invierte. */
.crit-prio {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
background: var(--navy-4); border: 1px solid var(--border-2);
border-radius: 20px; color: var(--text-3);
font-size: 12px; font-weight: 600; padding: 5px 14px;
font-family: var(--font); cursor: pointer; outline: none;
width: 106px;
}
.crit-prio:hover { border-color: var(--text-3); }
.crit-prio:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 1px; }
/* El punto lo DIBUJA el CSS y hereda `currentColor`, así que sigue al tema y al
estado sin una línea de JavaScript. Hueco en Ninguna, lleno en Alta: el anillo
hace que el control se lea como uno de dos posiciones y no como una etiqueta
a la que a veces le crece un ícono. */
.crit-punto {
width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
border: 1.5px solid currentColor; background: transparent;
}
.crit-prio[data-prio="alta"] { border-color: var(--red); color: var(--red-txt, var(--red)); }
.crit-prio[data-prio="alta"] .crit-punto { background: currentColor; border-color: currentColor; }
/* ── Pie de la card ────────────────────────────────────────────────────── */
.crit-sin-datos { text-align: center; padding: 40px; color: var(--text-3); }
.crit-pager { padding: 6px 20px; }
.crit-pie {
display: flex; gap: 16px; flex-wrap: wrap;
padding: 10px 20px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--text-3);
}
.crit-pie b { color: var(--text-2); font-weight: 600; }
/* ── El indicador de prioridad en SOLO LECTURA (09-09-2026) ─────────────────
Con el apartado en nivel `ver` la prioridad se sigue VIENDO —es el dato al
que se viene a esta pantalla— pero deja de ser un botón: se dibuja un ``
con la misma clase, así el aspecto es idéntico y no hace falta un segundo
juego de reglas que pueda divergir del primero.
⚠ Lo que SÍ hay que apagar es lo que promete interacción: el cursor de mano y
el cambio de borde al pasar el mouse. Un elemento que reacciona al puntero y
no hace nada al hacer clic es peor que uno que se ve inerte — la persona
prueba, no pasa nada, y prueba de nuevo pensando que el clic no registró. */
.crit-prio[data-ro="1"] { cursor: default; }
.crit-prio[data-ro="1"]:hover { border-color: var(--border-2); }
.crit-prio[data-ro="1"][data-prio="alta"]:hover { border-color: var(--red); }
/* La clasificación en SOLO LECTURA: el valor como texto, con el mismo peso y
color que tenía dentro del botón, para que la columna no cambie de aspecto
más de lo necesario. Sin borde ni fondo — no es un control. */
.clasif-ro {
display: inline-block; max-width: 190px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
vertical-align: middle;
font-size: 12px; color: var(--text-2);
}