/* =============================================================================
   EL PASE DE DEPÓSITO EN EL TELÉFONO — etapa 3i del teléfono
   docs/movil/lamina-11-azucar-pase-deposito.html: ganó la B (08/10/2026),
   «el lote primero»; las estibas cerradas, apagadas al final.

   La pantalla la arma ENTERA `pase-movil.js` (el pase de la PC es un diálogo,
   no una página que se pueda montar): sólo vive en el teléfono. Scope por id
   `#mobile-data-container #pz-ui`, como las demás del teléfono.

         Paso 1 de 2: qué se lleva
         ┌─────────────────────────────────┐
         │ [QR]  Escanear el lote        › │   navy, grande
         └─────────────────────────────────┘
         O ELEGILO DE LA LISTA
         [ Sale de · Azucel 1        ⌄ ]
         [ Artículo · 12101 …        ⌄ ]
         LOTES CON SALDO LIBRE (16)
         ◉ 12101-260909-M-04     27.600 kg
            ⚑ Cartel A9 · 09/09/2026
            se lleva 27.600 kg  ✓ completo   ✎ cambiar
         CERRADAS (13 estibas)                 apagadas
         ──────────────────────────────────────
         55.200 kg · 2 lotes        [Siguiente →]   pegado abajo
   ========================================================================== */
@media (max-width: 767px) {
    #mobile-data-container #pz-ui {
        display: flex; flex-direction: column; min-height: 100%;
        background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.45;
    }
    #mobile-data-container #pz-ui .pz-ctx { margin: 10px 16px 2px; font-size: 12px; color: var(--muted); }
    #mobile-data-container #pz-ui .pz-ctx b { color: var(--ink); }
    #mobile-data-container #pz-ui .pz-cuerpo { flex: 1; padding-bottom: 18px; }

    /* ── Escanear: lo primero, lo más grande ───────────────────────────── */
    #mobile-data-container #pz-ui .pz-scan {
        display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 8px 12px 0;
        padding: 14px 12px; border: 0; border-radius: 16px; background: var(--navy); color: #fff;
        text-align: left; font: inherit; cursor: pointer; box-shadow: var(--e2);
        transition: transform .12s ease;
    }
    #mobile-data-container #pz-ui .pz-scan:active { transform: scale(.98); }
    #mobile-data-container #pz-ui .pz-scan .ic2 {
        width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .12);
        display: flex; align-items: center; justify-content: center; flex: none;
    }
    #mobile-data-container #pz-ui .pz-scan .ic2 .material-symbols-outlined { font-size: 26px; }
    #mobile-data-container #pz-ui .pz-scan .tx { flex: 1; min-width: 0; }
    #mobile-data-container #pz-ui .pz-scan b { display: block; font-size: 15.5px; }
    #mobile-data-container #pz-ui .pz-scan small { display: block; font-size: 12px; color: #c4d3ec; line-height: 1.35; margin-top: 2px; }
    #mobile-data-container #pz-ui .pz-scan > .material-symbols-outlined { color: #9fb6dc; }

    /* ── Los rótulos de sección ────────────────────────────────────────── */
    #mobile-data-container #pz-ui .pz-hh {
        display: flex; align-items: center; gap: 8px; padding: 16px 16px 6px;
        font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 700;
    }
    #mobile-data-container #pz-ui .pz-hh .der { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
    #mobile-data-container #pz-ui .pz-cnt {
        text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--faint);
        background: #f4f5f8; border: 1px solid var(--hair-strong); border-radius: 999px; padding: 0 8px; line-height: 1.6;
    }

    /* ── Sale de / Artículo ────────────────────────────────────────────── */
    #mobile-data-container #pz-ui .pz-preg { display: grid; gap: 8px; padding: 0 12px; }
    #mobile-data-container #pz-ui .pz-pk {
        display: flex; align-items: center; gap: 6px; width: 100%; min-height: 48px; min-width: 0;
        background: #fff; border: 1px solid var(--hair-strong); border-radius: 11px; padding: 6px 10px 6px 12px;
        text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform .12s ease;
    }
    #mobile-data-container #pz-ui .pz-pk:active { transform: scale(.985); }
    #mobile-data-container #pz-ui .pz-pk .tx { flex: 1; min-width: 0; }
    #mobile-data-container #pz-ui .pz-pk .k { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
    #mobile-data-container #pz-ui .pz-pk .v { display: block; font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mobile-data-container #pz-ui .pz-pk .v.opc { color: var(--faint); font-weight: 400; }
    #mobile-data-container #pz-ui .pz-pk > .material-symbols-outlined { color: var(--faint); flex: none; }

    /* ── Los lotes en renglones ────────────────────────────────────────── */
    #mobile-data-container #pz-ui .pz-lista {
        margin: 0 12px 4px; background: #fff; border: 1px solid var(--hair); border-radius: 14px;
        box-shadow: var(--e1); overflow: hidden;
    }
    #mobile-data-container #pz-ui .pz-r {
        display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 1px 8px; padding: 10px 12px;
        border-bottom: 1px solid var(--hair); cursor: pointer;
        transition: background .12s ease, transform .12s ease;
        animation: pzEntra .3s cubic-bezier(.2, .8, .2, 1) both;
    }
    #mobile-data-container #pz-ui .pz-r:last-child { border-bottom: 0; }
    #mobile-data-container #pz-ui .pz-r:active, #mobile-data-container #pz-ui .pz-r.pz-toc { background: var(--navy-050); transform: scale(.985); }
    #mobile-data-container #pz-ui .pz-r .ck { grid-row: 1 / 3; align-self: center; color: var(--hair-strong); }
    #mobile-data-container #pz-ui .pz-r .ck .material-symbols-outlined { font-size: 22px; }
    #mobile-data-container #pz-ui .pz-r .nm { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mobile-data-container #pz-ui .pz-r .val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
    #mobile-data-container #pz-ui .pz-r .val small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
    #mobile-data-container #pz-ui .pz-r .l2 { grid-column: 2 / -1; display: flex; gap: 2px 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
    #mobile-data-container #pz-ui .pz-r .l2 span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
    #mobile-data-container #pz-ui .pz-r .l2 .material-symbols-outlined { font-size: 14px; }
    #mobile-data-container #pz-ui .pz-r .l3 { grid-column: 2 / -1; display: flex; gap: 6px 8px; align-items: center; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--muted); }
    #mobile-data-container #pz-ui .pz-r .l3 b { color: var(--ink); font-variant-numeric: tabular-nums; }
    #mobile-data-container #pz-ui .pz-r .l3 .ed { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--navy-500); font-weight: 600; }
    #mobile-data-container #pz-ui .pz-r .l3 .ed .material-symbols-outlined { font-size: 15px; }
    #mobile-data-container #pz-ui .pz-r.elegido { background: var(--navy-050); }
    #mobile-data-container #pz-ui .pz-r.elegido .ck { color: var(--navy); }
    /* Las estibas cerradas: a la vista, apagadas (pregunta 2 de la lámina). */
    #mobile-data-container #pz-ui .pz-r.cerrada { opacity: .55; cursor: default; }
    #mobile-data-container #pz-ui .pz-r.cerrada:active { transform: none; background: none; }
    #mobile-data-container #pz-ui .pz-r.cerrada .ck { color: var(--faint); }
    #mobile-data-container #pz-ui .pz-r.cerrada .ck .material-symbols-outlined { font-size: 18px; }
    #mobile-data-container #pz-ui .pz-vacio {
        margin: 10px 12px; padding: 20px 18px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45;
        background: #fff; border: 1px solid var(--hair); border-radius: 14px;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    #mobile-data-container #pz-ui .pz-vacio b { color: var(--ink); font-size: 14.5px; }
    #mobile-data-container #pz-ui .pz-vacio.mal { color: var(--crit); }

    /* ── Las consecuencias ─────────────────────────────────────────────── */
    #mobile-data-container #pz-ui .pz-chip {
        display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; line-height: 1.4;
        padding: 2px 8px; border-radius: 9px; border: 1px solid var(--hair-strong); background: #fff; color: var(--muted);
    }
    #mobile-data-container #pz-ui .pz-chip .material-symbols-outlined { font-size: 14px; }
    #mobile-data-container #pz-ui .pz-chip.ok { color: var(--ok); background: var(--ok-050); border-color: var(--ok-hair); }
    #mobile-data-container #pz-ui .pz-chip.warn { color: var(--warn); background: var(--warn-050); border-color: var(--warn-hair); }
    #mobile-data-container #pz-ui .pz-chip.mal { color: var(--crit); background: var(--crit-050); border-color: var(--crit-hair); }

    /* ── El pie: pegado abajo, la cuenta y Siguiente ───────────────────── */
    #mobile-data-container #pz-ui .pz-pie {
        position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; align-items: center;
        padding: 10px 12px 14px; background: var(--surface); border-top: 1px solid var(--hair);
        box-shadow: 0 -4px 14px rgba(16, 32, 64, .05);
    }
    #mobile-data-container #pz-ui .pz-pie .cuenta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    #mobile-data-container #pz-ui .pz-pie .cuenta b { font-size: 17px; color: var(--navy); font-variant-numeric: tabular-nums; }
    #mobile-data-container #pz-ui .pz-pie .cuenta small { font-size: 12px; color: var(--muted); }
    #mobile-data-container #pz-ui .pz-pie .cuenta.vac { font-size: 12.5px; color: var(--faint); }

    #mobile-data-container #pz-ui .pz-btn {
        min-height: 44px; padding: 0 18px; border-radius: 11px; border: 1px solid var(--navy);
        background: var(--navy); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        transition: transform .12s ease, background .12s ease;
    }
    #mobile-data-container #pz-ui .pz-btn:active { transform: scale(.96); background: var(--navy-700); }
    #mobile-data-container #pz-ui .pz-btn[disabled] { opacity: .45; pointer-events: none; }
    #mobile-data-container #pz-ui .pz-btn.sec { background: #fff; color: var(--ink); border-color: var(--hair-strong); }
    #mobile-data-container #pz-ui .pz-btn .material-symbols-outlined { font-size: 18px; }
    #mobile-data-container #pz-ui .pz-btn .gs-spin { width: 14px; height: 14px; }

    /* ── El velo y las hojas ───────────────────────────────────────────── */
    #mobile-data-container #pz-ui .pz-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 #pz-ui.pz-con-hoja .pz-velo { opacity: 1; pointer-events: auto; }
    #mobile-data-container #pz-ui .pz-hoja[hidden] { display: none; }
    #mobile-data-container #pz-ui .pz-hoja {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 185; max-height: 88vh;
        display: flex; flex-direction: column; background: var(--surface);
        border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(16, 32, 64, .18);
        animation: mvHojaSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform;
    }
    #mobile-data-container #pz-ui .pz-hoja .asa { flex: none; align-self: center; width: 40px; height: 5px; margin: 8px 0 4px; border-radius: 9px; background: var(--hair-strong); }
    #mobile-data-container #pz-ui .pz-hoja .h-cab { padding: 4px 18px 10px; border-bottom: 1px solid var(--hair); flex: none; }
    #mobile-data-container #pz-ui .pz-hoja .h-cab .lb { font-size: 12px; color: var(--muted); }
    #mobile-data-container #pz-ui .pz-hoja .h-cab h4 { margin: 2px 0 2px; font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; }
    #mobile-data-container #pz-ui .pz-hoja .h-cab .sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
    #mobile-data-container #pz-ui .pz-hoja .h-cab .sub .material-symbols-outlined { font-size: 15px; }
    #mobile-data-container #pz-ui .pz-hoja .h-cab .mono { font-family: Consolas, "SF Mono", monospace; color: var(--navy); }
    #mobile-data-container #pz-ui .pz-hoja .h-cuerpo { padding: 4px 18px 14px; overflow: auto; overscroll-behavior: contain; flex: 1; font-size: 13.5px; }
    #mobile-data-container #pz-ui .pz-hoja .h-pie { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 16px; border-top: 1px solid var(--hair); }
    #mobile-data-container #pz-ui .pz-hoja .h-pie .pz-btn { flex: 1 1 30%; padding: 0 10px; }
    #mobile-data-container #pz-ui .pz-hoja .h-pie .pz-btn.ancho { flex: 1 1 100%; }
    #mobile-data-container #pz-ui .pz-hoja.mv-arrastra { animation: none; transition: none; }
    #mobile-data-container #pz-ui .pz-hoja.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    #mobile-data-container #pz-ui .pz-hoja.mv-vuelve { transition: transform .2s ease; }
    #mobile-data-container #pz-ui .nota { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }

    /* las listas de las hojas (depósitos, artículos) */
    #mobile-data-container #pz-ui .pz-hl {
        display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 0;
        border-bottom: 1px solid var(--hair); cursor: pointer; font-size: 14px; transition: transform .12s ease;
    }
    #mobile-data-container #pz-ui .pz-hl:last-child { border-bottom: 0; }
    #mobile-data-container #pz-ui .pz-hl:active { transform: scale(.985); }
    #mobile-data-container #pz-ui .pz-hl .nm { font-weight: 600; min-width: 0; }
    #mobile-data-container #pz-ui .pz-hl .nm small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
    #mobile-data-container #pz-ui .pz-hl > .material-symbols-outlined { color: var(--faint); flex: none; }
    #mobile-data-container #pz-ui .pz-hl.marcada .nm, #mobile-data-container #pz-ui .pz-hl.marcada > .material-symbols-outlined { color: var(--navy); }

    /* la hoja de los kilos */
    #mobile-data-container #pz-ui .pz-kgin {
        display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 6px 14px;
        border: 1px solid var(--hair-strong); border-radius: 12px; background: #fff;
    }
    #mobile-data-container #pz-ui .pz-kgin:focus-within { border-color: var(--navy-300); outline: 2px solid var(--navy-300); }
    #mobile-data-container #pz-ui .pz-kgin input {
        flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit;
        font-size: 30px; font-weight: 800; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums;
    }
    #mobile-data-container #pz-ui .pz-kgin span { font-size: 15px; color: var(--muted); font-weight: 600; }
    #mobile-data-container #pz-ui .pz-kgbs { display: flex; gap: 8px; margin-top: 10px; }
    #mobile-data-container #pz-ui .pz-kgbs .pz-btn { flex: 1; }
    #mobile-data-container #pz-ui .pz-qq { margin-top: 12px; }

    /* el paso 2 */
    #mobile-data-container #pz-ui .pz-sec { margin-top: 14px; }
    #mobile-data-container #pz-ui .pz-sec > b { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
    #mobile-data-container #pz-ui .pz-sec > b i { color: var(--crit); font-style: normal; }
    #mobile-data-container #pz-ui .pz-cps { display: flex; flex-wrap: wrap; gap: 6px; }
    #mobile-data-container #pz-ui .pz-cp {
        border: 1px solid var(--hair-strong); background: #fff; border-radius: 999px; padding: 7px 12px;
        font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: transform .12s ease;
    }
    #mobile-data-container #pz-ui .pz-cp:active { transform: scale(.95); }
    #mobile-data-container #pz-ui .pz-cp[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
    #mobile-data-container #pz-ui .pz-fecha {
        position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 9px 0; border-bottom: 1px solid var(--hair); font-weight: 600;
    }
    /* El calendario nativo, invisible encima de la línea: tocarla lo abre. */
    #mobile-data-container #pz-ui .pz-fecha input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
    #mobile-data-container #pz-ui .pz-fecha .lnk { color: var(--navy); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
    #mobile-data-container #pz-ui .pz-obs {
        display: block; width: 100%; min-height: 60px; padding: 10px 12px; border: 1px solid var(--hair-strong); border-radius: 11px;
        font: inherit; font-size: 14px; color: var(--ink); background: #fff; resize: vertical;
    }
    #mobile-data-container #pz-ui .pz-p2l { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
    #mobile-data-container #pz-ui .pz-p2l:last-child { border-bottom: 0; }
    #mobile-data-container #pz-ui .pz-p2l b, #mobile-data-container #pz-ui .pz-p2l .k2 { font-variant-numeric: tabular-nums; }
    #mobile-data-container #pz-ui .pz-p2l .k2 { font-weight: 700; }
    #mobile-data-container #pz-ui .pz-p2l .pz-chip { grid-column: 1 / -1; justify-self: start; }
    #mobile-data-container #pz-ui .pz-av, #mobile-data-container #pz-ui .pz-nota, #mobile-data-container #pz-ui .pz-prob {
        display: flex; gap: 9px; border: 1px solid; border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.45; margin-top: 12px;
    }
    #mobile-data-container #pz-ui .pz-av .material-symbols-outlined, #mobile-data-container #pz-ui .pz-nota .material-symbols-outlined,
    #mobile-data-container #pz-ui .pz-prob > .material-symbols-outlined { font-size: 18px; flex: none; }
    #mobile-data-container #pz-ui .pz-av { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4100; }
    #mobile-data-container #pz-ui .pz-nota { background: var(--navy-050); border-color: #cfdcf1; color: var(--navy-500); }
    #mobile-data-container #pz-ui .pz-nota b { color: var(--navy); }
    #mobile-data-container #pz-ui .pz-prob { background: var(--crit-050); border-color: var(--crit-hair); color: var(--crit); margin: 8px 0 2px; }
    #mobile-data-container #pz-ui .pz-prob ul { margin: 4px 0 0; padding-left: 16px; }
    #mobile-data-container #pz-ui .pz-prob li { margin: 2px 0; color: #8f1d1d; }

    /* el resultado */
    #mobile-data-container #pz-ui .pz-ok { display: flex; justify-content: center; padding: 10px 0 2px; }
    #mobile-data-container #pz-ui .pz-ok .material-symbols-outlined { font-size: 52px; }
    #mobile-data-container #pz-ui .pz-ok.ok { color: var(--ok); }
    #mobile-data-container #pz-ui .pz-ok.warn { color: var(--warn); }
    #mobile-data-container #pz-ui .pz-ok.mal { color: var(--crit); }
    #mobile-data-container #pz-ui .pz-rl { display: flex; gap: 6px; align-items: flex-start; padding: 6px 0; border-bottom: 1px dashed var(--hair); font-size: 13px; }
    #mobile-data-container #pz-ui .pz-rl:last-child { border-bottom: 0; }
    #mobile-data-container #pz-ui .pz-rl .material-symbols-outlined { font-size: 17px; color: var(--ok); flex: none; }
    #mobile-data-container #pz-ui .pz-rl.mal .material-symbols-outlined { color: var(--crit); }

    /* Los avisos del sistema salen abajo a la derecha: acá taparían «Siguiente»
       y el pie de la hoja (y un aviso se toca para cerrarlo: se comía el toque).
       Encima del pie; con una hoja abierta, arriba. */
    body:has(#mobile-data-container #pz-ui) #gs-toasts { left: 12px; right: 12px; bottom: 84px; align-items: center; }
    body:has(#mobile-data-container #pz-ui.pz-con-hoja) #gs-toasts { bottom: auto; top: 70px; flex-direction: column; }
}
/* Sólo `from`: el final es el valor propio del renglón. Con un `to { opacity: 1 }`
   y `both`, la animación le pisaba la opacidad a las estibas cerradas. */
@keyframes pzEntra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
    #mobile-data-container #pz-ui .pz-r, #mobile-data-container #pz-ui .pz-hoja { animation: none; }
}