/* =============================================================================
   MOVIMIENTOS DE POLVOS — lo poco que la planilla de Azúcar no trae
   Sub-etapa 2a de docs/RUNBOOK-IDENTIDAD-POLVOS.md (lámina 11, ganó la A).

   LA PANTALLA SE VISTE CON `movimientos/mw-ui.css` (`.mw-ui`): es la de
   Azúcar, y el verde lo pone la escala del navy redefinida bajo
   `theme-endulzantes` (core/shell-ui.css). Acá van sólo las piezas de Polvos,
   bajo `.ed-ui` y con prefijo `pm-`: `.ed-lote` ya es de Ventas (otra forma).
   ========================================================================== */

/* La caja debajo de los estuches: «23 cajas», «2 cajas + 9 estuches», «kg». */
.ed-ui .pm-cj { display: block; font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 1px; }

/* El lote: dato técnico, mono y apagado, como el ID. */
.ed-ui .pm-lote { font-family: 'Consolas', 'SF Mono', monospace; font-size: 11.5px; color: var(--muted); }

/* El segundo renglón de la Referencia: de qué orden, qué factura. */
.ed-ui .pm-ref { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; white-space: nowrap; }

/* La marca chica de la otra línea («Jugos») en Pendientes. */
.ed-ui .pm-otra {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--faint); border: 1px solid var(--hair-strong); border-radius: 5px; padding: 0 5px; margin-left: 6px;
}

/* La línea, al final del renglón del período. */
.ed-ui .pm-lin { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

/* =============================================================================
   2b · EL FORMULARIO DE PASOS (`pf-`) Y «VER» (`pd-`) — lámina 12, ganó la A.
   La página se viste con las piezas del formulario de MW de Azúcar (cinta,
   espina, ficha, tarjetas, pie); acá va lo que Polvos agrega.
   ========================================================================== */

/* El vencimiento es de lo que ENTRA: en un egreso la columna no existe. */
.ed-ui .pf-tabla.sin-venc .pf-c-venc { display: none; }
.ed-ui .pf-tabla td { vertical-align: top; }
/* La lista del buscador de artículo cuelga FUERA de la tabla: un `overflow-x: auto`
   recorta también en vertical y la escondía detrás de una barrita de scroll.
   La tabla de renglones entra de ancho; no necesita correrse. */
.ed-ui .mw-scroll:has(> #pf-tabla) { overflow: visible; }

/* El rótulo de un tramo dentro de la tarjeta («Factura de Flexxus»). */
.ed-ui .pf-sec {
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--faint); margin: 16px 0 7px;
}

/* La factura del despacho: se elige de Flexxus o queda pendiente. */
.ed-ui .pf-cruce {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    border: 1px solid var(--hair); background: var(--canvas);
    border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
}
.ed-ui .pf-cruce > .material-symbols-outlined { font-size: 19px; color: var(--muted); flex: none; }
.ed-ui .pf-cruce > span:not(.material-symbols-outlined) { flex: 1 1 240px; min-width: 0; }
.ed-ui .pf-cruce.ok { border-color: var(--ok-hair); background: var(--ok-050); }
.ed-ui .pf-cruce.ok > .material-symbols-outlined { color: var(--ok); }
.ed-ui .pf-cruce.warn { border-color: var(--warn-hair); background: var(--warn-050); }
.ed-ui .pf-cruce.warn > .material-symbols-outlined { color: var(--warn); }

/* El texto de un aviso dentro de «Ver» (`.cuerpo` ya es el cuerpo del diálogo). */
.ed-ui .pd-obs { min-width: 0; flex: 1; }

/* =============================================================================
   EN EL TELÉFONO — cada renglón se apila (etapa 2b del teléfono, lámina 2:
   ganó la B, 05/10/2026). Debajo de 768 px, el umbral del `mobile-router`:

       MED000682  02/10  ↙ ING                             18
       DORINKA SRL                                     1 caja
       11001 - EP AZUCEL CLASICO x 100
       L20TCL-01                                     ⚠ Sin NC

   Sin encabezado, sin la columna de Acciones (toda la fila abre «Ver», ver
   `polvos-mobile.js`) y la franja de estado pasa de la celda a la fila.
   ========================================================================== */
@media (max-width: 767px) {
    .ed-ui .mw-view table.mw-g, .ed-ui .mw-view table.mw-g tbody { display: block; width: 100%; }
    .ed-ui .mw-view table.mw-g thead { display: none; }
    .ed-ui .mw-view table.mw-g tbody tr { display: block; border-bottom: 1px solid var(--hair); border-left: 3px solid transparent; }
    .ed-ui .mw-view table.mw-g tbody tr:last-child { border-bottom: 0; }
    .ed-ui .mw-view table.mw-g tbody td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; }
    .ed-ui .mw-view table.mw-g tbody td.vacia { padding: 28px 16px; }
    .ed-ui .mw-view table.mw-g tr.st-ok { border-left-color: var(--ok-hair); }
    .ed-ui .mw-view table.mw-g tr.st-wrn { border-left-color: var(--warn); }
    .ed-ui .mw-view table.mw-g tr.st-neg { border-left-color: var(--crit); }

    /* La planilla: cuatro líneas. */
    .ed-ui #pm-grilla table.mw-g tbody tr[data-id] {
        display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto;
        column-gap: 8px; row-gap: 2px; align-items: baseline; padding: 9px 12px 9px 9px; cursor: pointer;
    }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(1) { grid-area: 1 / 1; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(2) { grid-area: 1 / 2; font-size: 11.5px; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(3) { grid-area: 1 / 3; font-size: 11.5px; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(7) { grid-area: 1 / 5 / 3 / 6; text-align: right; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(7) b { font-size: 13.5px; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(4) { grid-area: 2 / 1 / 3 / 5; font-size: 12px; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(5) { grid-area: 3 / 1 / 4 / 6; font-size: 12px; color: var(--muted); }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(6) { grid-area: 4 / 1 / 5 / 4; align-self: center; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(8) { grid-area: 4 / 4 / 5 / 6; text-align: right; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(8) .pm-ref { display: inline; white-space: normal; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(8) .pm-ref::before { content: ' · '; }
    .ed-ui #pm-grilla tr[data-id] td:nth-child(9) { display: none; }

    /* Pendientes: tres líneas, sin la columna de la acción (vincular es de la PC). */
    .ed-ui #pm-pend table.mw-g tbody tr.st-wrn {
        display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: 8px; row-gap: 2px; align-items: baseline; padding: 9px 12px 9px 9px;
    }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(1) { grid-area: 1 / 1; }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(2) { grid-area: 1 / 2; font-size: 11.5px; }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(3) { grid-area: 1 / 3; }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(6) { grid-area: 1 / 4 / 3 / 5; text-align: right; }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(4) { grid-area: 2 / 1 / 3 / 4; font-size: 12px; }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(5) { grid-area: 3 / 1 / 4 / 5; font-size: 12px; color: var(--muted); }
    .ed-ui #pm-pend tr.st-wrn td:nth-child(7) { display: none; }

    /* La barra: el período queda en lo que trae la pantalla (con «Traer un mes
       más» al pie) y el histórico se ofrece cuando la búsqueda no encuentra. */
    .ed-ui #pm-sec-lista .mw-bar > .mw-btn, .ed-ui #pm-sec-lista .mw-rango > .mw-rango-l, .ed-ui #pm-rango-seg { display: none; }
    .ed-ui #pm-sec-lista .pm-lin { margin-left: 0; }
    .ed-ui #pm-secnav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ed-ui #pm-secnav > button { flex: 0 0 auto; white-space: nowrap; }
    .ed-ui #pm-seg { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .ed-ui #pm-seg > button { flex: 0 0 auto; white-space: nowrap; }

    /* «Ver»: la pastilla del origen baja a su renglón antes que hacerse un círculo. */
    .ed-ui .mw-modal > header { flex-wrap: wrap; row-gap: 6px; }
    .ed-ui .mw-modal > header .mw-chip { white-space: nowrap; }
}