/* =============================================================================
   ABM DE POLVOS · PROVEEDORES Y CATÁLOGOS
   docs/RUNBOOK-IDENTIDAD-POLVOS.md, sub-etapa 5b-2 (lámina 23, ganó la A, 05/10/2026)
   =============================================================================
   Las dos pantallas (`abm-proveedores.js`, `abm-catalogos.js`, ids `pa-prv-` y
   `pa-cat-`) se visten con las clases del ABM de Azúcar, las de la 5a y las de
   la 5b-1. Acá sólo lo que agregan: los escritos a mano, el bloque Flexxus de
   la ficha, la lista del vínculo y las tarjetas de catálogo con su uso.
   Sin un color a mano: todo sale de un token.
   ============================================================================= */

/* Los escritos a mano: una tarjeta aparte, debajo de la tabla. */
.ed-ui .pa-amano { margin-top: 14px; }
.ed-ui .pa-amano .abm-bar b { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); white-space: nowrap; }

/* El bloque Flexxus de la ficha y la sugerencia: ícono · texto · botón. */
.ed-ui .pa-flx { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; margin-top: 8px; border: 1px solid var(--hair); border-radius: 9px; background: var(--canvas); }
.ed-ui .pa-flx > div { flex: 1; min-width: 0; }
.ed-ui .pa-flx > .material-symbols-outlined { color: var(--navy-500); margin-top: 1px; }
.ed-ui .pa-flx.ok { border-color: var(--ok-hair); background: var(--ok-050); margin-top: 0; }
.ed-ui .pa-flx.ok > .material-symbols-outlined { color: var(--ok); }

/* Vincular con Flexxus: un renglón por proveedor, tildable. */
.ed-ui .pa-vinc { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-vinc input { margin-top: 3px; accent-color: var(--navy-500); }
.ed-ui .pa-vinc label { flex: 1; min-width: 0; cursor: pointer; }
.ed-ui .pa-vinc.nada { color: var(--muted); }
.ed-ui .pa-vinc.nada > .material-symbols-outlined { color: var(--faint); }
.ed-ui .pa-vinc s { color: var(--faint); }

/* Catálogos: cuatro tarjetas, cada valor con cuántos lo usan. */
.ed-ui .pa-cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 14px var(--gutter) 18px; }
.ed-ui .pa-cat { border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); min-width: 0; }
.ed-ui .pa-cat-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-cat-h b { font-size: .86rem; color: var(--ink); }
.ed-ui .pa-cat-h span { font-size: .72rem; color: var(--muted); }
.ed-ui .pa-cat-h .pa-chip-n { margin-left: auto; font-weight: 800; color: var(--navy); background: var(--navy-050); border-radius: 99px; padding: 0 9px; }
.ed-ui .pa-cat-c { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.ed-ui .pa-cat-c .abm-risk { width: 100%; margin: 0 0 8px; }
.ed-ui .pa-vchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hair-strong); border-radius: 99px; padding: 2px 10px; font-size: .76rem; font-weight: 700; color: var(--ink); background: var(--surface); white-space: nowrap; }
.ed-ui .pa-vchip .n { font-size: .68rem; font-weight: 800; color: var(--navy); background: var(--navy-050); border-radius: 99px; padding: 0 7px; }
.ed-ui .pa-vchip.cero { border-style: dashed; color: var(--muted); padding-right: 2px; }
.ed-ui .pa-vchip.cero .n { color: var(--muted); background: var(--canvas); }
.ed-ui .pa-vchip .abm-x { padding: 1px; }
.ed-ui .pa-vchip .abm-x .material-symbols-outlined { font-size: 15px; }
.ed-ui .pa-cat-fuera { margin: 0 14px 10px; padding: 7px 10px; border-radius: 8px; font-size: .74rem; color: var(--warn); background: var(--warn-050); border: 1px solid var(--warn-hair); }
.ed-ui .pa-cat-fuera .material-symbols-outlined { font-size: 15px; vertical-align: -3px; }
.ed-ui .pa-cat-a { display: flex; gap: 8px; padding: 0 14px 12px; }
.ed-ui .pa-cat-a .abm-in { flex: 1; min-width: 0; }
.ed-ui .pa-cat .pa-errs { margin: 0 14px 10px; }

@media (max-width: 760px) {
    .ed-ui .pa-cat-grid { grid-template-columns: minmax(0, 1fr); }
}