/* =============================================================================
   PEDIDOS & VENTAS DE AZÚCAR EN EL TELÉFONO — etapa 3a del teléfono
   docs/movil/lamina-03-azucar-pedidos-ventas.html: ganó la B (06/10/2026), «el
   teléfono mira y hace dos cosas». Debajo de 768 px, el umbral con el que
   `mobile-router.js` elige el mundo; arriba de eso esta hoja no hace nada.

   HOJA APARTE de `ventas-ui.css`, como la de Polvos: esto no agrega nada a la
   pantalla del escritorio.

   QUÉ HACE:
   · La barra de secciones: los tres segmentos de la mesa (Pendientes · En
     carga · Cumplidos) en una píldora; Pre-cargas, Consolidados y el ámbito
     son de escritorio. El indicador blanco que viaja lo pone
     `core/mobile-gestos.js` (`.mv-seg-ind`).
   · La fila se apila (el molde de la lámina 2): quién, qué sale, la logística,
     una debajo de la otra; la columna de botones se va y la fila entera abre
     la ficha (ya lo hacía).
   · La ficha sube desde abajo como hoja y conserva DOS verbos: el chip de
     estado (Pausar / Reanudar, que ya confirma) y Logística (la hoja de la PC,
     con las guardas de tarifa). Lo demás es de escritorio.
   ========================================================================== */
@media (max-width: 767px) {
    /* ── Los tres segmentos, en píldora ─────────────────────────────────── */
    #mobile-data-container #vt-shell .vt-secnav {
        position: relative; display: flex; flex-wrap: nowrap; gap: 0;
        margin: 4px 4px 0; padding: 3px; border: 0; border-radius: 11px;
        background: #e3e7ef; box-shadow: none;
    }
    #mobile-data-container #vt-shell .vt-secnav > button {
        position: relative; z-index: 1; flex: 1 1 0; justify-content: center; gap: 5px;
        min-height: 38px; padding: 0 4px; border-radius: 8px; background: none;
        font-size: 13px; white-space: nowrap; color: var(--muted);
        transition: color .24s ease;
    }
    #mobile-data-container #vt-shell .vt-secnav > button.on { color: var(--navy); }
    #mobile-data-container #vt-shell .vt-secnav > button::after,
    #mobile-data-container #vt-shell .vt-secnav > button > .material-symbols-outlined { display: none; }
    #mobile-data-container #vt-shell .vt-secnav > button .cnt { font-size: 10.5px; min-width: 18px; padding: 0 5px; }
    #mobile-data-container #vt-shell #vt-sec-btn-precargas,
    #mobile-data-container #vt-shell #vt-sec-btn-consolidados,
    #mobile-data-container #vt-shell #vt-ambito { display: none; }
    /* Sin JS (o antes de que llegue el indicador), el elegido se pinta solo. */
    #mobile-data-container #vt-shell .vt-secnav:not(.mv-con-ind) > button.on { background: #fff; box-shadow: var(--e1); }

    /* ── La fila apilada ────────────────────────────────────────────────── */
    #mobile-data-container #vt-shell table.vt-tabla { min-width: 0; table-layout: auto; }
    #mobile-data-container #vt-shell table.vt-tabla,
    #mobile-data-container #vt-shell table.vt-tabla tbody { display: block; width: 100%; }
    #mobile-data-container #vt-shell table.vt-tabla thead,
    #mobile-data-container #vt-shell table.vt-tabla colgroup { display: none; }
    #mobile-data-container #vt-shell table.vt-tabla tbody tr {
        display: block; position: relative; padding: 10px 12px 11px 16px;
        border-bottom: 1px solid var(--hair);
    }
    #mobile-data-container #vt-shell table.vt-tabla tbody tr:last-child { border-bottom: 0; }
    #mobile-data-container #vt-shell table.vt-tabla tbody td {
        display: block; height: auto; padding: 0; border: 0; background: none; overflow: visible;
    }
    #mobile-data-container #vt-shell table.vt-tabla tbody td.fr { position: static; padding: 0; }
    #mobile-data-container #vt-shell table.vt-tabla tbody td + td { margin-top: 5px; }
    #mobile-data-container #vt-shell table.vt-tabla tbody td.vt-acr { display: none; }
    #mobile-data-container #vt-shell table.vt-tabla .vt-sub { height: auto; white-space: normal; }
    #mobile-data-container #vt-shell .vt-grp-b { overflow-x: visible; }

    /* La lista mide lo que tiene: en la PC se estira hasta el pie. */
    #mobile-data-container #vt-shell .vt-lista { flex: none; min-height: 0; overflow: visible; }
    /* Y la mesa y el armazón también. En la PC el armazón mide el alto de la
       pantalla (`height: 100%`) y la mesa RECORTA (`overflow: hidden`) para que
       corra sólo la lista; acá la lista ya no scrollea sola, así que con eso
       las filas quedaban tapadas debajo del borde y el dedo no bajaba (07/10,
       Hernán: «no puedo bajar el listado»). Quien scrollea es el `main`. */
    #mobile-data-container #vt-shell { height: auto; }
    #mobile-data-container #vt-shell .vt-mesa { flex: none; overflow: visible; }

    /* Lo que arma o escribe desde la lista: la Mesa de Control (el aviso de
       En carga vacía) y el pedido nuevo. */
    #mobile-data-container [onclick*="vtMesaControl"],
    #mobile-data-container [onclick*="vtGo('NUEVO')"] { display: none; }

    /* ── La ficha: una hoja que sube desde abajo ────────────────────────── */
    .vt-ui.vt-ficha-velo { align-items: flex-end; padding: 0; backdrop-filter: none; }
    .vt-ui .vt-ficha-panel {
        max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0;
        animation: mvHojaSube .28s var(--curva, cubic-bezier(.2, .8, .2, 1));
        will-change: transform;
    }
    /* El asa: se arrastra hacia abajo para cerrar (`core/mobile-gestos.js`). */
    .vt-ui .vt-ficha-panel::before {
        content: ''; flex: none; align-self: center; width: 40px; height: 5px;
        margin: 8px 0 2px; border-radius: 9px; background: var(--hair-strong);
    }
    .vt-ui .vt-ficha-panel.mv-arrastra { animation: none; transition: none; }
    .vt-ui .vt-ficha-panel.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    .vt-ui .vt-ficha-panel.mv-vuelve { transition: transform .2s var(--curva, ease); }

    /* Los verbos de escritorio. Quedan Cerrar, el chip de Pausar / Reanudar y
       Logística (con sus hojas: chofer, guardar, volver). */
    #vt-ficha-eliminar, #vt-ficha-copiar, #vt-ficha-alerta-btn, #vt-ficha-editar,
    #vt-ficha-despachar, #vt-ficha-np, #vt-ficha-devolucion { display: none; }

    /* El pie: los botones a lo ancho, cómodos para el pulgar. Logística es el
       verbo principal; Pausar, ámbar suave (el chip de arriba hace lo mismo). */
    .vt-ui .vt-ficha-f { gap: 8px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; }
    .vt-ui .vt-ficha-f > .sp { display: none; }
    .vt-ui .vt-ficha-f > .vt-btn { flex: 1 1 0; justify-content: center; min-height: 44px; padding-inline: 8px; }
    .vt-ui #vt-ficha-pausar.warn { background: var(--warn-050); border-color: var(--warn-hair); color: var(--warn); box-shadow: none; }
    .vt-ui #vt-ficha-logistica { background: var(--navy); border-color: var(--navy); color: #fff; }

    /* Una hoja que no es la historia (logística, chofer) tapa lo de la
       izquierda: en una columna, si no, quedaría al fondo de la ficha. */
    .vt-ui .vt-ficha-panel:not([data-hoja="historia"]) #vt-ficha-es,
    .vt-ui .vt-ficha-panel:not([data-hoja="historia"]) #vt-ficha-clave { display: none; }
}
@keyframes mvHojaSube { from { transform: translateY(100%); } to { transform: none; } }