/* =============================================================================
   ABM DE POLVOS · FORMULACIONES Y ESTRUCTURAS PT
   docs/RUNBOOK-IDENTIDAD-POLVOS.md, sub-etapa 5b-1 (lámina 22, ganó la A, 05/10/2026)
   =============================================================================
   Las dos pantallas (`abm-formulas.js`, `abm-estructuras.js`, ids `pa-rec-` y
   `pa-est-`) se visten con las clases del ABM de Azúcar y las de la 5a
   (`abm-polvos-ui.css`). Acá sólo lo que agregan: la barra de la composición,
   «1 cada N», los renglones del editor, el buscador y lo que frena.
   Sin un color a mano: todo sale de un token.
   ============================================================================= */

/* La composición: una barra con el peso de cada insumo, del verde al gris. */
.ed-ui .pa-barra { display: flex; height: 8px; width: 100%; min-width: 140px; border-radius: 4px; overflow: hidden; background: var(--hair); margin: 3px 0 4px; }
.ed-ui .pa-barra span { display: block; height: 100%; }
.ed-ui .pa-barra .s0 { background: var(--navy-700); }
.ed-ui .pa-barra .s1 { background: var(--navy-500); }
.ed-ui .pa-barra .s2 { background: var(--navy-300); }
.ed-ui .pa-barra .s3, .ed-ui .pa-barra .s4 { background: var(--hair-strong); }

/* «1 cada 18», y lo que no cierra en ámbar quieto. */
.ed-ui .pa-cada { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ed-ui .pa-wrn { color: var(--warn); font-weight: 600; }

/* Los renglones del editor: insumo · cantidad · equivalente · quitar. */
.ed-ui .pa-ren { display: grid; grid-template-columns: minmax(0, 1fr) 132px 92px 30px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-ren.pa-ren-e { grid-template-columns: minmax(0, 1fr) 210px 92px 30px; }
.ed-ui .pa-ren.h { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-top: 0; }
.ed-ui .pa-ren.h > span:nth-child(n+2), .ed-ui .pa-eq { text-align: right; }
.ed-ui .pa-ren.tot { border-bottom: 0; font-weight: 800; }
.ed-ui .pa-ren.tot b { text-align: right; }
.ed-ui .pa-ren.tot b.ok { color: var(--ok); }
.ed-ui .pa-ren.tot b.wrn { color: var(--warn); }
.ed-ui .pa-eq { font-size: .78rem; color: var(--muted); }
.ed-ui .pa-num { display: flex; align-items: center; gap: 5px; }
.ed-ui .pa-num .abm-in { min-width: 0; text-align: right; }
.ed-ui .pa-num i { font-style: normal; font-size: .74rem; color: var(--muted); min-width: 22px; }
.ed-ui .pa-num .pa-modo { flex: 0 0 104px; text-align: left; padding-right: 4px; }
.ed-ui #pa-rec-f-mas, .ed-ui #pa-est-f-mas { margin-top: 10px; }

/* Lo que frena, dicho en vivo, antes de «Guardando…». */
.ed-ui .pa-errs { margin: 12px 0 0; padding: 0; list-style: none; }
.ed-ui .pa-errs li { color: var(--crit); font-size: .76rem; font-weight: 600; padding: 2px 0 2px 14px; position: relative; }
.ed-ui .pa-errs li::before { content: '•'; position: absolute; left: 3px; }

/* El buscador: la lista se abre FIJA, para que el cuerpo del modal no la recorte. */
.ed-ui .pa-cb { position: relative; min-width: 0; }
.ed-ui .pa-cb .abm-in { width: 100%; }
.ed-ui .pa-cb-l { position: fixed; z-index: 260; margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 9px; box-shadow: var(--e3); }
.ed-ui .pa-cb-l li { padding: 6px 9px; border-radius: 6px; font-size: .8rem; color: var(--ink); cursor: pointer; }
.ed-ui .pa-cb-l li small { display: block; font-size: .7rem; color: var(--muted); }
.ed-ui .pa-cb-l li.on, .ed-ui .pa-cb-l li:hover { background: var(--navy-050); }
.ed-ui .pa-cb-l li.g { cursor: default; background: none; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 8px 9px 3px; }
.ed-ui .pa-cb-l li.nada { cursor: default; background: none; color: var(--muted); }

@media (max-width: 640px) {
    .ed-ui .pa-ren, .ed-ui .pa-ren.pa-ren-e { grid-template-columns: minmax(0, 1fr) 30px; }
    .ed-ui .pa-ren > .pa-cb { grid-column: 1 / -1; }
    .ed-ui .pa-ren.h { display: none; }
}