/* =============================================================================
   STOCK GENERAL DE AZÚCAR EN EL TELÉFONO — etapa 3e del teléfono
   docs/movil/lamina-07-azucar-stock.html: ganó la B (07/10/2026), «plegada en
   renglones». Debajo de 768 px, el umbral con el que `mobile-router.js` elige
   el mundo.

   HOJA APARTE de `stock-ui.css`: no agrega nada al escritorio. Va DESPUÉS de
   su §7 (el bloque del teléfono de la etapa 6 de Stock General, que desarma la
   cadena de alto y apila las cuentas y la ficha): acá se pisa lo que esa etapa
   dibujó antes de que existiera la identidad móvil — la barra de secciones en
   dos renglones, la cola en dos más, las tablas de la PC y las tarjetas enteras.
   Scope `#mobile-data-container :is(#stock-hub, #stock-detail-view)` (la
   pantalla y la ficha de una cuenta) y `#stk-composicion` (el diálogo de lotes,
   que vive en <body>). POR ID Y NO POR `.stk-ui`: Stock de POLVOS (`#ps-ui`,
   stock-lista.js) también lleva `.stk-ui` y `table.stk-d`, y el 07/10 esta hoja
   le colgó «kg · lotes · bultos» a sus celdas y le armó la grilla de Azúcar —
   Hernán lo vio en su teléfono. Lo vigila `ejecutar-movil-polvos-vivo.js`.

   QUÉ HACE:
   · La píldora de cuatro (tres sin Cuentas), como Movimientos y Carga del Día:
     el indicador lo pone `core/mobile-gestos.js`; la cola baja a UNA línea.
   · «Cuentas» queda como la dejó la etapa 6 (apilada); la ficha entra deslizando.
   · «Producto»: cada fila de la tabla es un renglón (nombre y depósitos a la
     izquierda; kilos grandes, lotes y bultos a la derecha).
   · «Depósitos»: cada tarjeta es un renglón plegado (`.stk-mv-abierto` la abre).
   · «Playa»: la tarjeta del cartel compacta (cartel, artículo, kilos, barra) y
     la misma tarjeta ENTERA como hoja cuando lleva `.stk-mv-abierta`.
   · Los diálogos de lotes suben como hoja, con el lote apilado.
   ========================================================================== */
@media (max-width: 767px) {
    /* ── La píldora ─────────────────────────────────────────────────────── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav {
        position: relative; top: auto; z-index: auto; isolation: isolate;
        display: flex; flex-wrap: wrap; gap: 0;
        margin: 6px 8px 0; padding: 3px; border: 0; border-radius: 11px;
        background: none; box-shadow: none; overflow: visible;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav::before {
        content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 44px;
        border-radius: 11px; background: #e3e7ef;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button {
        position: relative; z-index: 1; flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px;
        min-height: 38px; padding: 0 2px; border-radius: 8px; background: none;
        font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--muted);
        transition: color .24s ease;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button[aria-current="true"] { color: var(--navy); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button::after,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button > .material-symbols-outlined { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button:hover,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button:focus-visible { background: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav:not(.mv-con-ind) > button[aria-current="true"] { background: #fff; box-shadow: var(--e1); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .cnt {
        font-size: 10.5px; line-height: 16px; min-width: 18px; padding: 0 5px; text-align: center;
        background: #fff; color: var(--muted); border: 1px solid var(--hair-strong);
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav > button[aria-current="true"] .cnt { background: var(--navy); color: #fff; border-color: var(--navy); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .cnt.esperando { color: transparent; }

    /* La cola, en UNA línea que se toca: En vivo · No cuadra · sin ubicar. La
       nota neutra («en depósitos sin posiciones») se lee en la hoja. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail {
        flex: 1 1 100%; width: auto; margin: 8px 6px 0; padding: 0;
        display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px;
        overflow: hidden; cursor: pointer; font-size: 11.5px; transition: transform .12s ease;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail:empty { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail:active { transform: scale(.985); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail > * { flex: 0 0 auto; min-width: 0; margin: 0; white-space: nowrap; }
    /* Sin los íconos (están en la hoja) y sin la hora de la frescura — es un
       nodo de texto suelto al lado del <b>, y a tamaño cero desaparece —: con
       los tres, «En vivo · 09:16:18 · No cuadra · +49.264 kg · 13 sin ubicar»
       no entra en 366 px. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .material-symbols-outlined { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-fresc { order: 1; padding: 0; gap: 0; font-size: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-fresc b { font-size: 11.5px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-cuadre { order: 2; padding: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-alert {
        order: 3; background: none; border: 0; padding: 0; gap: 4px; box-shadow: none; transform: none;
        color: var(--warn); font-weight: 600; font-size: inherit; cursor: pointer;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-alert .v { font-size: inherit; font-weight: 700; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-alert .k { text-transform: none; letter-spacing: 0; font-weight: 600; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-alert .material-symbols-outlined { color: var(--warn); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail .stk-nota { display: none; }
    /* Y dice que se abre: la flecha al final. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-secnav .tail::after {
        content: 'expand_more'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
        font-size: 18px; line-height: 1; color: var(--faint); margin-left: auto; flex: none; order: 9;
        -webkit-font-smoothing: antialiased;
    }

    /* La línea de contexto: lo que la sección contesta (el renglón de la barra de la PC). */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-view { padding-top: 8px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-ctx { font-size: 12px; color: var(--muted); padding: 2px 16px 8px; line-height: 1.4; min-height: 18px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-ctx:empty { display: none; }
    /* El «Actualizar» de adentro no va: está en la barra del teléfono. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-ph { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-bar { padding: 0 12px 8px; gap: 6px 10px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-search input { font-size: 16px; padding: 9px 12px 9px 36px; border-radius: 11px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-ambito { font-size: 12px; }

    /* ── El toque hunde; lo que entra, entra escalonado ──────────────────── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr[role="button"],
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr[role="button"],
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard { transition: background .12s ease, transform .12s ease; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr[role="button"]:active,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr[role="button"]:active,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h:active,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta):not(.aviso):not(.info):active { background: var(--navy-050); transform: scale(.985); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr[role="button"],
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard { animation: mvCae .3s cubic-bezier(.2, .8, .2, 1) both; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr:nth-child(2), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr:nth-child(2),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:nth-child(2), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:nth-child(2) { animation-delay: 40ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr:nth-child(3), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr:nth-child(3),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:nth-child(3), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:nth-child(3) { animation-delay: 80ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr:nth-child(4), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr:nth-child(4),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:nth-child(4), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:nth-child(4) { animation-delay: 120ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr:nth-child(5), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr:nth-child(5),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:nth-child(5), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:nth-child(5) { animation-delay: 160ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr:nth-child(n+6), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d tbody tr:nth-child(n+6),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:nth-child(n+6), #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:nth-child(n+6) { animation-delay: 200ms; }

    /* ── «Cuentas»: como la dejó la etapa 6; la ficha entra deslizando ──── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr { cursor: pointer; }
    #mobile-data-container #stock-detail-view:not(.hidden) { animation: mvEntraAdelante .24s cubic-bezier(.2, .8, .2, 1) both; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-fcab { padding: 10px 12px 12px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-fid h3 { white-space: normal; font-size: 18px; line-height: 1.25; }

    /* ── Las tablas de la PC, en renglones (Producto y lo de adentro de un depósito) ── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt { padding: 0 8px 12px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pt table.stk-d {
        background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--e1); overflow: hidden;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody { display: block; width: 100%; min-width: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d thead { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto auto 16px; grid-template-rows: auto auto;
        column-gap: 8px; row-gap: 1px; align-items: center;
        padding: 9px 6px 9px 10px; border-bottom: 1px solid var(--hair);
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr:last-child { border-bottom: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr:hover { background: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td { display: block; padding: 0; border-bottom: 0; white-space: normal; font-size: 12.5px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td.art { grid-area: 1 / 1 / 3 / 2; padding-left: 8px; font-size: 13.5px; line-height: 1.3; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td .sub { font-size: 11.5px; line-height: 1.35; margin-top: 1px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(4) { grid-area: 1 / 2 / 2 / 4; text-align: right; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(4) .kg { font-size: 16px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(4)::after { content: ' kg'; font-size: 11px; font-weight: 500; color: var(--muted); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(2),
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(3) { font-size: 11.5px; color: var(--muted); text-align: right; white-space: nowrap; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(2) { grid-area: 2 / 2; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(2)::after { content: ' lotes'; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(3) { grid-area: 2 / 3; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(3)::after { content: ' bultos'; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d td:nth-child(5) { display: block; grid-area: 1 / 4 / 3 / 5; padding: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d .chev { color: var(--faint); font-size: 18px; transform: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pie { padding: 8px 14px 0; gap: 2px; font-size: 11.5px; }

    /* ── «Depósitos»: un renglón por depósito, plegado ───────────────────── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-deps { display: block; padding: 0 8px 12px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep { margin-top: 8px; border-radius: var(--r-card); box-shadow: var(--e1); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h {
        cursor: pointer; padding: 12px 10px 12px 14px; border-bottom: 0; background: var(--surface); gap: 10px; user-select: none;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep.stk-mv-abierto .stk-dep-h { border-bottom: 1px solid var(--hair); background: #fafbfd; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h .material-symbols-outlined { font-size: 20px; color: var(--navy-500); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h .nm { font-size: 14px; white-space: normal; flex: 1; line-height: 1.25; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h .tot {
        margin-left: 0; display: block; text-align: right; white-space: nowrap;
        font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h .tot .u { font-size: 11px; font-weight: 500; color: var(--muted); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h .tot small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep-h::after {
        content: 'chevron_right'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
        font-size: 18px; line-height: 1; color: var(--faint); flex: none; transition: transform .24s cubic-bezier(.2, .8, .2, 1);
        -webkit-font-smoothing: antialiased;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep.stk-mv-abierto .stk-dep-h::after { transform: rotate(90deg); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:not(.stk-mv-abierto) > table.stk-d,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep:not(.stk-mv-abierto) > .aviso { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep .aviso { font-size: 12px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep table.stk-d tbody tr { padding-left: 14px; animation: mvCae .3s cubic-bezier(.2, .8, .2, 1) both; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep table.stk-d tbody tr:nth-child(2) { animation-delay: 40ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep table.stk-d tbody tr:nth-child(3) { animation-delay: 80ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep table.stk-d tbody tr:nth-child(n+4) { animation-delay: 120ms; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep table.stk-d td.art { font-size: 13px; font-weight: 500; }

    /* ── «Playa»: el cartel en renglón; tocarlo sube la tarjeta entera ───── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-posgrid { display: block; padding: 0 8px 12px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard {
        position: relative; margin-top: 8px; padding: 9px 30px 9px 12px; gap: 2px;
        border: 1px solid var(--hair); border-left: 3px solid var(--navy-300); border-radius: var(--r-card); box-shadow: var(--e1);
        cursor: pointer;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok   { border-left-color: var(--ok); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.trab { border-left-color: var(--crit); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.vacia { border-left-color: var(--hair-strong); background: #fafbfd; opacity: 1; cursor: default; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.aviso,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.info { padding-right: 12px; cursor: default; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.aviso):not(.info):not(.vacia):not(.stk-mv-abierta)::after {
        content: 'chevron_right'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
        position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
        font-size: 18px; line-height: 1; color: var(--faint); -webkit-font-smoothing: antialiased;
    }
    /* Compacta: sin la foto, sin los lotes, sin las notas. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .cuerpo img,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .cuerpo .noimg,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .lotes,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .nota { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok:not(.stk-mv-abierta) .fila1 { margin: 0; padding: 0; background: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok:not(.stk-mv-abierta) .fila1 .pn { color: var(--navy); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok:not(.stk-mv-abierta) .fila1 .st { color: var(--ok); opacity: 1; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok:not(.stk-mv-abierta) .fila1 .stk-b { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .fila1 { gap: 8px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .pn { font-size: 19px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .cuerpo .id {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .art { grid-column: 1 / 3; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .lote { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .kg { grid-column: 2; margin: 0; font-size: 14px; text-align: right; white-space: nowrap; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .kg small { font-size: 11px; font-weight: 500; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard:not(.stk-mv-abierta) .stk-barra { height: 5px; margin-top: 3px; border: 0; background: var(--navy-050); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.vacia:not(.stk-mv-abierta) .nota { display: block; }

    /* La hoja: la tarjeta de la PC entera, pegada abajo. */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.stk-mv-abierta {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 185; margin: 0;
        max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
        padding: 6px 16px 22px; gap: 8px; cursor: default;
        border: 0; border-top: 4px solid var(--navy-300); border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 30px rgba(16, 32, 64, .18); background: var(--surface);
        animation: stkMvSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok.stk-mv-abierta   { border-top-color: var(--ok); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.trab.stk-mv-abierta { border-top-color: var(--crit); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.stk-mv-abierta::before {
        content: ''; flex: none; align-self: center; width: 40px; height: 5px; margin: 2px 0 6px;
        border-radius: 9px; background: var(--hair-strong);
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.ok.stk-mv-abierta .fila1 { margin: 0 -16px; padding: 11px 16px; border-radius: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.stk-mv-abierta .lotes li { padding: 4px 0; }

    /* ── El velo y la hoja de control («De dónde salen los números») ────── */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-velo {
        position: fixed; inset: 0; z-index: 184; background: rgba(10, 20, 40, .38);
        opacity: 0; pointer-events: none; transition: opacity .25s ease;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view).stk-mv-con-hoja .stk-mv-velo { opacity: 1; pointer-events: auto; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja[hidden] { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 185;
        max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
        background: var(--surface); border-radius: 20px 20px 0 0; padding: 8px 16px 22px;
        box-shadow: 0 -10px 30px rgba(16, 32, 64, .18);
        animation: stkMvSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .asa { width: 40px; height: 5px; margin: 0 auto 10px; border-radius: 9px; background: var(--hair-strong); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .h-cab { padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .lb { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja h4 { margin: 2px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu {
        display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 13px;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu:last-child { border-bottom: 0; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu > .material-symbols-outlined { grid-column: 1; grid-row: 1 / 3; font-size: 20px; color: var(--faint); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu b { grid-column: 2; font-size: 14px; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu span { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu span:empty { display: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.ok > .material-symbols-outlined,  #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.ok b  { color: var(--ok); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.mal > .material-symbols-outlined, #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.mal b { color: var(--crit); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.amb > .material-symbols-outlined, #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu.amb b { color: var(--warn); }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .cu .ln {
        grid-column: 2; justify-self: start; margin-top: 4px; background: none; border: 0; padding: 0;
        font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer;
    }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja .vacio { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

    /* Arrastrar la hoja (core/mobile-gestos.js). */
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-abierta.mv-arrastra { animation: none; transition: none; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-abierta.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-abierta.mv-vuelve { transition: transform .2s ease; }

    /* ── Los dos diálogos de lotes: una hoja que sube, con el lote apilado ── */
    #stk-composicion.stk-ui.stk-velo { align-items: flex-end; padding: 0; backdrop-filter: none; }
    #stk-composicion .stk-dlg {
        width: 100%; max-width: none; max-height: 90vh; border-radius: 20px 20px 0 0;
        animation: stkMvSube .28s cubic-bezier(.2, .8, .2, 1); will-change: transform;
    }
    #stk-composicion .stk-dlg::before {
        content: ''; flex: none; align-self: center; width: 40px; height: 5px; margin: 8px 0 0;
        border-radius: 9px; background: var(--hair-strong);
    }
    #stk-composicion .stk-dlg.mv-arrastra { animation: none; transition: none; }
    #stk-composicion .stk-dlg.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    #stk-composicion .stk-dlg.mv-vuelve { transition: transform .2s ease; }
    /* La cabecera, clara: la hoja no lleva superficie navy. */
    #stk-composicion .stk-dlg-h { background: var(--surface); color: var(--ink); padding: 8px 16px 10px; border-bottom: 1px solid var(--hair); }
    #stk-composicion .stk-dlg-h .lb { color: var(--faint); }
    #stk-composicion .stk-dlg-h h4 { white-space: normal; font-size: 16px; line-height: 1.25; }
    #stk-composicion .stk-dlg-h .dep { color: var(--muted); }
    #stk-composicion .stk-dlg-h .cerrar { color: var(--muted); }
    /* La franja «En la playa» mide 700 px en la PC (§5, para que la tabla
       scrollee de costado): acá la tabla se apila y la franja va a lo ancho. */
    #stk-composicion .stk-pos { min-width: 0; padding: 9px 16px; font-size: 12px; }
    /* El lote, apilado: código y origen arriba con los kilos a la derecha;
       formato · hecho · depósito (o a nombre de quién) debajo con los bultos;
       la calidad, si no es la normal, en su línea. */
    #stk-composicion table.stk-l, #stk-composicion table.stk-l tbody { display: block; width: 100%; min-width: 0; }
    #stk-composicion table.stk-l thead { display: none; }
    #stk-composicion table.stk-l tbody tr {
        display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 2px; align-items: baseline;
        padding: 9px 16px 9px 13px; border-bottom: 1px solid var(--hair); border-left: 3px solid transparent;
    }
    #stk-composicion table.stk-l tr.cal-wrn { border-left-color: var(--warn); }
    #stk-composicion table.stk-l tr.cal-neg { border-left-color: var(--crit); }
    #stk-composicion table.stk-l td { display: block; padding: 0; border: 0; white-space: normal; overflow: visible; font-size: 12px; color: var(--muted); }
    #stk-composicion table.stk-l td:first-child { grid-area: 1 / 1 / 2 / 4; padding-left: 0; border-left: 0; color: var(--ink); }
    #stk-composicion table.stk-l td:first-child .sub { display: inline; margin-left: 6px; font-size: 10.5px; letter-spacing: .04em; }
    /* El código no es un enlace en el teléfono: la ficha del lote es de la PC. */
    #stk-composicion table.stk-l .lote { pointer-events: none; color: var(--navy); font-size: 13px; }
    #stk-composicion table.stk-l td:nth-child(7) { grid-area: 1 / 4 / 3 / 5; align-self: center; text-align: right; color: var(--ink); }
    #stk-composicion table.stk-l td:nth-child(7) .kg { font-size: 14.5px; }
    #stk-composicion table.stk-l td:nth-child(7)::after { content: ' kg'; font-size: 11px; font-weight: 500; color: var(--muted); }
    #stk-composicion table.stk-l td:nth-child(2) { grid-area: 2 / 1; white-space: nowrap; }
    #stk-composicion table.stk-l td:nth-child(3) { grid-area: 2 / 2; white-space: nowrap; }
    #stk-composicion table.stk-l td:nth-child(3)::before { content: '· '; }
    #stk-composicion table.stk-l td:nth-child(4) { grid-area: 2 / 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #stk-composicion table.stk-l td:nth-child(4)::before { content: '· '; }
    #stk-composicion table.stk-l td:nth-child(6) { grid-area: 3 / 4; text-align: right; font-size: 11px; white-space: nowrap; }
    #stk-composicion table.stk-l td:nth-child(6)::after { content: ' bultos'; }
    #stk-composicion table.stk-l td:nth-child(5) { grid-area: 3 / 1 / 4 / 4; }
    #stk-composicion table.stk-l td:nth-child(5) .dim { font-size: 11px; }
    #stk-composicion .stk-dlg-f { padding: 10px 16px 12px; font-size: 11.5px; gap: 4px 10px; }
    #stk-composicion .stk-dlg-f .tot { flex: 1 0 100%; order: 2; font-size: 13.5px; }
    #stk-composicion .stk-dlg-f .nota { order: 1; }
    #stk-composicion .stk-dlg-f .stk-btn { order: 3; flex: 1 0 100%; text-align: center; padding: 9px; }
}
@keyframes stkMvSube { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-dep,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-d tbody tr,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) table.stk-g tbody tr,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-mv-hoja,
    #mobile-data-container :is(#stock-hub, #stock-detail-view) .stk-pcard.stk-mv-abierta,
    #mobile-data-container #stock-detail-view:not(.hidden),
    #stk-composicion .stk-dlg { animation: none; }
}