/* =============================================================================
   FACTURACIÓN DE AZÚCAR EN EL TELÉFONO — etapa 3g del teléfono
   docs/movil/lamina-09-azucar-facturacion.html: ganó la B (08/10/2026),
   «tocar sube la ficha, y desde ahí se comparte». Debajo de 768 px, el umbral
   con el que `mobile-router.js` elige el mundo.

   HOJA APARTE de `facturas-ui.css`: no agrega nada al escritorio. Va DESPUÉS
   de ella en index.html. Scope `#mobile-data-container #fc-ui` — POR ID, no
   por `.fx-ui` (la lección del 07/10: una hoja del teléfono sobre una clase
   compartida le armó la grilla de Azúcar a Stock de Polvos).

   QUÉ HACE:
   · La barra de secciones se apaga (sólo Comprobantes); la PÍLDORA es `#fc-seg`
     (Vinculados · Otros · Todos; el indicador lo pone `core/mobile-gestos.js`).
   · Debajo, la línea de contexto y la cola «N sin descargar» en una línea
     (las dos las arma `facturas-movil.js`).
   · La barra de trabajo queda en el buscador: fechas, Buscar, Más filtros y el
     acceso directo son de la PC.
   · El comprobante en un renglón (las columnas son fijas, siete: acá sí se
     puede contar):
         FCA 0008-00006852                  $ 30.695.280,00
         SUPERIMPERIO SA                         17/09/2026
         🧾 00001-00016449                           ✓ En GS
     La franja de la izquierda es el estado, como en la PC.
   · La ficha del comprobante y la hoja de «sin descargar» suben desde abajo.
   ========================================================================== */
@media (max-width: 767px) {
    /* ── La cadena de alto: el que scrollea es el `main` del teléfono ───── */
    #mobile-data-container #fc-ui .fx-shell { border-radius: 0; box-shadow: none; overflow: visible; display: block; background: var(--canvas); }
    #mobile-data-container #fc-ui .fx-view { padding: 0 0 24px; overflow: visible; display: block; }
    #mobile-data-container #fc-ui .fx-tbl { overflow: visible; }
    #mobile-data-container #fc-ui #fc-secnav { display: none; }

    /* ── La píldora: el alcance ─────────────────────────────────────────── */
    #mobile-data-container #fc-ui #fc-seg {
        position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
        margin: 8px 8px 0; padding: 3px; border: 0; border-radius: 11px;
        background: #e3e7ef; box-shadow: none; overflow: visible;
    }
    #mobile-data-container #fc-ui #fc-seg > button {
        position: relative; z-index: 1; justify-content: center; gap: 5px;
        min-height: 38px; padding: 0 2px; border-radius: 8px; background: none; box-shadow: none;
        font-size: 12.5px; white-space: nowrap; color: var(--muted); transition: color .24s ease;
    }
    #mobile-data-container #fc-ui #fc-seg > button.on { color: var(--navy); background: none; box-shadow: none; }
    #mobile-data-container #fc-ui #fc-seg > button > .material-symbols-outlined { display: none; }
    #mobile-data-container #fc-ui #fc-seg:not(.mv-con-ind) > button.on { background: #fff; box-shadow: var(--e1); }
    #mobile-data-container #fc-ui #fc-seg .n {
        font-size: 10.5px; line-height: 16px; padding: 0 5px; min-width: 18px; border-radius: 999px; text-align: center;
        background: #fff; color: var(--muted); border: 1px solid var(--hair-strong);
    }
    #mobile-data-container #fc-ui #fc-seg > button.on .n { background: var(--navy); color: #fff; border-color: var(--navy); }
    #mobile-data-container #fc-ui #fc-seg .n:empty { display: none; }

    /* ── La línea de contexto y la cola ─────────────────────────────────── */
    #mobile-data-container #fc-ui .fx-mv-ctx { margin: 8px 16px 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
    #mobile-data-container #fc-ui .fx-mv-ctx b { color: var(--ink); }
    #mobile-data-container #fc-ui .fx-mv-ctx:empty { display: none; }
    #mobile-data-container #fc-ui .fx-mv-ln { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--navy-500); cursor: pointer; }
    #mobile-data-container #fc-ui #fc-alerta { margin: 0; display: block; }
    #mobile-data-container #fc-ui #fc-alerta:empty { display: none; }
    #mobile-data-container #fc-ui .fx-alert {
        display: flex; align-items: center; gap: 6px; width: 100%; margin: 4px 0 0; padding: 4px 16px;
        background: none; border: 0; border-radius: 0; box-shadow: none; transform: none; font-size: 11.5px; color: var(--warn);
    }
    #mobile-data-container #fc-ui .fx-alert::before {
        content: 'cloud_off'; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
        font-size: 15px; line-height: 1; -webkit-font-smoothing: antialiased; order: -2;
    }
    #mobile-data-container #fc-ui .fx-alert .v { order: -1; font-size: 12.5px; }
    #mobile-data-container #fc-ui .fx-alert .k { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
    #mobile-data-container #fc-ui .fx-alert::after { content: '· sin copia en GS'; color: var(--muted); font-weight: 500; }

    /* ── La barra de trabajo: sólo el buscador ──────────────────────────── */
    #mobile-data-container #fc-ui .fx-bar { margin: 10px 8px 0; padding: 0; border: 0; box-shadow: none; background: none; display: block; }
    #mobile-data-container #fc-ui .fx-bar > *:not(.fx-search) { display: none; }
    #mobile-data-container #fc-ui .fx-search { min-width: 0; }
    #mobile-data-container #fc-ui .fx-search input { min-height: 40px; border-radius: 11px; font-size: 13.5px; }
    #mobile-data-container #fc-ui .fx-bar-hint, #mobile-data-container #fc-ui .fx-bar-more { display: none; }
    #mobile-data-container #fc-ui #fc-aviso { margin: 8px 8px 0; }
    #mobile-data-container #fc-ui #fc-pie-ayuda { display: none; }

    /* ── La tarjeta y la tabla: cada fila se apila ──────────────────────── */
    #mobile-data-container #fc-ui .fx-card { margin: 8px 8px 0; }
    #mobile-data-container #fc-ui .fx-card-h { display: none; }
    #mobile-data-container #fc-ui table.fx-g, #mobile-data-container #fc-ui table.fx-g tbody { display: block; width: 100%; min-width: 0; }
    #mobile-data-container #fc-ui table.fx-g thead { display: none; }
    #mobile-data-container #fc-ui table.fx-g tbody tr { display: block; border-bottom: 1px solid var(--hair); border-left: 3px solid var(--hair-strong); }
    #mobile-data-container #fc-ui table.fx-g tbody tr:last-child { border-bottom: 0; }
    #mobile-data-container #fc-ui table.fx-g tbody tr:hover { background: none; }
    #mobile-data-container #fc-ui table.fx-g tbody td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; text-align: left; font-size: 12.5px; }
    #mobile-data-container #fc-ui table.fx-g td.vacia { padding: 28px 16px; text-align: center; }
    #mobile-data-container #fc-ui table.fx-g tr.st-ok  { border-left-color: var(--ok-hair); }
    #mobile-data-container #fc-ui table.fx-g tr.st-wrn { border-left-color: var(--warn); }
    #mobile-data-container #fc-ui table.fx-g tr.st-neg { border-left-color: var(--crit); background: rgba(198, 40, 40, .035); }
    #mobile-data-container #fc-ui table.fx-g tbody tr[data-id] {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px;
        align-items: baseline; padding: 10px 12px 10px 9px; cursor: pointer;
    }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(1) { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(1).mono { font-size: 13px; font-weight: 700; color: var(--navy); }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(4) { grid-area: 1 / 2; text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(3) { grid-area: 2 / 1; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(2) { grid-area: 2 / 2; text-align: right; font-size: 11.5px; white-space: nowrap; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(5) { grid-area: 3 / 1; font-size: 11.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(5) button { pointer-events: none; padding: 0 !important; font-size: 11.5px !important; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(6) { grid-area: 3 / 2; text-align: right; margin-top: 2px; white-space: nowrap; }
    #mobile-data-container #fc-ui table.fx-g tr[data-id] td:nth-child(7) { display: none; }
    #mobile-data-container #fc-ui .fx-card-f { padding: 10px 14px; }
    #mobile-data-container #fc-ui .fx-card-f .fx-btn { min-height: 40px; width: 100%; justify-content: center; }

    /* ── El velo y las hojas ────────────────────────────────────────────── */
    #mobile-data-container #fc-ui .fx-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 #fc-ui.fx-mv-con-hoja .fx-mv-velo { opacity: 1; pointer-events: auto; }
    #mobile-data-container #fc-ui .fx-mv-hoja[hidden] { display: none; }
    #mobile-data-container #fc-ui .fx-mv-hoja {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 185;
        max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
        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 #fc-ui .fx-mv-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 #fc-ui .fx-mv-hoja .h-cab { padding: 4px 18px 10px; border-bottom: 1px solid var(--hair); flex: none; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cab .lb { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cab h4 { margin: 2px 0 0; font-size: 18px; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cab h4.mono { font-family: Consolas, "SF Mono", monospace; letter-spacing: -.01em; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cab .sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cab .sub .material-symbols-outlined { font-size: 15px; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-cuerpo { padding: 6px 18px 12px; overflow: auto; font-size: 13.5px; line-height: 1.5; }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-pie { flex: none; display: flex; gap: 8px; padding: 10px 14px 16px; border-top: 1px solid var(--hair); }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-pie .fx-btn {
        flex: 1; min-height: 44px; border-radius: 11px; font-size: 13.5px; justify-content: center; transform: none; box-shadow: none;
    }
    #mobile-data-container #fc-ui .fx-mv-hoja .h-pie .fx-btn.ancho { flex: 1 1 100%; }
    #mobile-data-container #fc-ui .fx-mv-hoja.mv-arrastra { animation: none; transition: none; }
    #mobile-data-container #fc-ui .fx-mv-hoja.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    #mobile-data-container #fc-ui .fx-mv-hoja.mv-vuelve { transition: transform .2s ease; }
    /* La ficha: lo que importa, apilado. */
    #mobile-data-container #fc-ui .fdl { display: flex; flex-direction: column; margin-top: 6px; }
    #mobile-data-container #fc-ui .fdl > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--hair); padding: 7px 0; }
    #mobile-data-container #fc-ui .fdl > div:last-child { border-bottom: 0; }
    #mobile-data-container #fc-ui .fdl .k { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
    #mobile-data-container #fc-ui .fdl .v { font-weight: 600; text-align: right; min-width: 0; }
    #mobile-data-container #fc-ui .fdl .v small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
    #mobile-data-container #fc-ui .fdl .v.big { font-size: 18px; font-variant-numeric: tabular-nums; }
    #mobile-data-container #fc-ui .fdl .v.big.neg { color: var(--crit); }
    #mobile-data-container #fc-ui .fsec { margin-top: 14px; }
    #mobile-data-container #fc-ui .fsec > b { display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
    #mobile-data-container #fc-ui .art { padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
    #mobile-data-container #fc-ui .art:last-child { border-bottom: 0; }
    #mobile-data-container #fc-ui .rem {
        display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 9px 12px; text-align: left;
        border: 1px solid var(--hair-strong); border-radius: 11px; background: #fff; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
    }
    #mobile-data-container #fc-ui .rem.quieto { cursor: default; color: var(--muted); }
    #mobile-data-container #fc-ui .rem .material-symbols-outlined { color: var(--navy-500); font-size: 19px; }
    #mobile-data-container #fc-ui .rem .material-symbols-outlined:last-child { margin-left: auto; color: var(--faint); }
    #mobile-data-container #fc-ui .rem .t { flex: 1; min-width: 0; }
    #mobile-data-container #fc-ui .rem .mono { font-family: Consolas, "SF Mono", monospace; font-weight: 700; color: var(--navy); }
    #mobile-data-container #fc-ui .nota { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
    #mobile-data-container #fc-ui .faviso { 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 #fc-ui .faviso .material-symbols-outlined { font-size: 18px; flex: none; }
    #mobile-data-container #fc-ui .faviso.ok { background: var(--ok-050); border-color: var(--ok-hair); color: var(--ok); }
    #mobile-data-container #fc-ui .faviso.wrn { background: var(--warn-050); border-color: var(--warn-hair); color: #7a4300; }
    /* La hoja de «sin descargar». */
    #mobile-data-container #fc-ui .cu { padding: 10px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; font-size: 13px; }
    #mobile-data-container #fc-ui .cu:last-child { border-bottom: 0; }
    #mobile-data-container #fc-ui .cu .material-symbols-outlined { font-size: 20px; grid-column: 1; grid-row: 1 / 3; }
    #mobile-data-container #fc-ui .cu b { grid-column: 2; font-size: 14px; }
    #mobile-data-container #fc-ui .cu span { grid-column: 2; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
    #mobile-data-container #fc-ui .cu.amb .material-symbols-outlined, #mobile-data-container #fc-ui .cu.amb b { color: var(--warn); }
    #mobile-data-container #fc-ui .cu.neu .material-symbols-outlined { color: var(--faint); }
}