/* =============================================================================
   ABM DE POLVOS — el ABM de capas de Azúcar, en verde
   docs/RUNBOOK-IDENTIDAD-POLVOS.md, sub-etapa 5a (lámina 21, ganó la A, 04/10/2026)
   =============================================================================
   La pantalla (`abm.js`, `abm-articulos.js`, `abm-insumos.js`, ids `pa-`) se
   viste con las clases del ABM de Azúcar (`abm/abm-ui.css`, `.abm-ui`). El
   acento interactivo de ese módulo es su azure propio (`--azure*`): bajo
   `.ed-ui` pasa a ser la escala verde de la división, que ya redefine el navy
   (`core/shell-ui.css`, `theme-endulzantes`). Acá sólo eso y lo que Polvos
   agrega: el segmento de la línea, la miniatura, la ficha, el pallet, el pie.
   Sin un color a mano: todo sale de un token.
   ============================================================================= */
.abm-ui.ed-ui {
    --azure: var(--navy-500);
    --azure-700: var(--navy);
    --azure-050: var(--navy-050);
}
.ed-ui .abm-in:focus, .ed-ui .abm-txt:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy-500) 16%, transparent); }
.ed-ui .abm-x:hover { border-color: color-mix(in srgb, var(--navy-500) 22%, transparent); }

/* El segmento (la línea, Todo · Materia prima · Packaging): el de la 4a, en abm. */
.ed-ui .pa-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface); border: 1px solid var(--hair-strong); }
.ed-ui .pa-seg button { border: 0; background: none; font: inherit; font-size: .74rem; font-weight: 700; color: var(--muted); padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.ed-ui .pa-seg button.on { background: var(--navy); color: var(--surface); }
.ed-ui .pa-seg button .n { margin-left: 6px; font-weight: 800; opacity: .75; font-variant-numeric: tabular-nums; }
.ed-ui .pa-seg.chico button { font-size: .66rem; padding: 3px 9px; letter-spacing: 0; text-transform: none; }

/* La fila del artículo: miniatura + nombre; la caja con su peso abajo. */
.ed-ui .pa-art { display: flex; align-items: center; gap: 10px; }
.ed-ui .pa-thumb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 7px; border: 1px solid var(--hair); object-fit: cover; background: var(--canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--hair-strong); }
.ed-ui .pa-sub { display: block; font-size: .72rem; color: var(--muted); }
.ed-ui .pa-pie { padding: 9px var(--gutter); border-top: 1px solid var(--hair); font-size: .74rem; color: var(--muted); background: var(--canvas); }
.ed-ui .pa-link { border: 0; background: none; padding: 0; font: inherit; color: var(--navy-500); font-weight: 700; text-decoration: underline; cursor: pointer; }
.ed-ui .pa-izq { margin-right: auto; }

/* La ficha: foto arriba, nombre, estado, renglones etiqueta / valor. */
.ed-ui .pa-foto { display: flex; justify-content: center; padding: 16px; background: var(--navy-050); }
.ed-ui .pa-foto img { max-height: 200px; max-width: 100%; border-radius: 10px; object-fit: contain; }
.ed-ui .pa-ficha { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.ed-ui .pa-ficha-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-ficha-cab b { font-size: 1rem; font-weight: 800; color: var(--ink); }
.ed-ui .pa-completa { align-self: flex-start; }
.ed-ui .pa-fr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-fr > span:last-child { text-align: right; font-weight: 600; }
.ed-ui .pa-fr .abm-lbl { margin: 0; white-space: nowrap; }

/* El formulario: la imagen, el pallet, los chips. */
.ed-ui .pa-img { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.ed-ui .pa-img-box { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--hair-strong); background: var(--canvas); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--hair-strong); }
.ed-ui .pa-img-box img { width: 100%; height: 100%; object-fit: cover; }
.ed-ui .pa-img-acts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ed-ui .pa-ayuda { margin-top: 4px; font-size: .72rem; }
.ed-ui .pa-fp-cab { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.ed-ui .pa-fp { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hair); }
.ed-ui .pa-fp .abm-in { width: 76px; text-align: center; }
.ed-ui .pa-fp-t { flex: 1; font-size: .78rem; color: var(--muted); }
.ed-ui .pa-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 28px; margin-bottom: 8px; }
.ed-ui .pa-chips .abm-tag button { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; color: inherit; }
.ed-ui .pa-fila-in { display: flex; gap: 8px; }
.ed-ui .pa-fila-in .abm-in { flex: 1 1 auto; min-width: 0; }
.ed-ui .pa-err { color: var(--crit); font-size: .74rem; font-weight: 600; margin-top: 4px; }
.ed-ui .abm-btn.chico { padding: 4px 10px; font-size: .74rem; }
.ed-ui .abm-risk { margin-top: 12px; }