/* =============================================================================
   EL TARIFARIO EN EL TELÉFONO — etapa 3h del teléfono
   docs/movil/lamina-10-azucar-tarifario.html: ganó la B (08/10/2026), «el módulo
   entero: Destino · Padrón · Cotización», y el teléfono carga tarifas. Debajo
   de 768 px, el umbral con el que `mobile-router.js` elige el mundo.

   HOJA APARTE de `tarifario-ui.css`: no agrega nada al escritorio. Va DESPUÉS
   de ella en index.html. Scope `#mobile-data-container #tf-ui` — POR ID (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). Las dos excepciones, al final, son
   lo que cuelga del <body>: los modales de la PC (`.tf-ui.tf-modal`) y la
   lista de localidades (`.tf-locpop`), que acá suben como hoja. Debajo de 768
   px no hay escritorio, así que no hay a quién pegarle.

   QUÉ HACE:
   · La barra de pantallas es la PÍLDORA (`#tf-secnav`; el indicador lo pone
     `core/mobile-gestos.js`); su cola (Tabla · Dispersión · Mapa) no se dibuja.
   · Debajo, la línea de contexto y las acciones (las arma `tarifario-movil.js`).
   · La pregunta: «¿Adónde?» a lo ancho, «¿Con quién?» y la operación en un
     renglón; sin Provincia, sin «Ver el destino» ni «Limpiar».
   · La ficha apilada: la banda y la franja con la cifra arriba y los datos en
     dos columnas; la tira en dos columnas; las tablas en renglones.
   · El Padrón: los cuatro contadores en 2 × 2, el filtro, los renglones.
     Sin dispersión, sin mapa, sin mantenimiento.
   · Cotización: contadores, la franja de cobertura, los renglones.
   · Las tablas `.tf-g`: cada fila es un renglón —el nombre y la cifra en la
     primera línea, el resto en la segunda— (nth-child: cada tabla tiene sus
     columnas fijas, se cuentan).
   ========================================================================== */
@media (max-width: 767px) {
    /* ── La cadena de alto: el que scrollea es el `main` del teléfono ───── */
    #mobile-data-container #tf-ui { display: block; height: auto; min-height: 0; background: var(--canvas); }
    #mobile-data-container #tf-ui .tf-work { flex: none; position: static; }
    #mobile-data-container #tf-ui .tf-view { height: auto; overflow: visible; padding: 0 0 24px; }
    #mobile-data-container #tf-ui .tf-view.pleno { display: block; overflow: visible; }
    #mobile-data-container #tf-ui .tf-zres, #mobile-data-container #tf-ui .tf-vista { display: block; flex: none; min-height: 0; padding-bottom: 0; }
    #mobile-data-container #tf-ui .tf-vista.hidden { display: none; }
    #mobile-data-container #tf-ui .tf-tw { overflow: visible; }
    #mobile-data-container #tf-ui .tf-pad { padding-left: 8px; padding-right: 8px; }

    /* ── La píldora: las tres pantallas ─────────────────────────────────── */
    #mobile-data-container #tf-ui #tf-secnav {
        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 #tf-ui #tf-secnav > 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 #tf-ui #tf-secnav > button::after { display: none; }
    #mobile-data-container #tf-ui #tf-secnav > button > .material-symbols-outlined { display: none; }
    #mobile-data-container #tf-ui #tf-secnav > button[aria-current="true"] { color: var(--navy); background: none; }
    #mobile-data-container #tf-ui #tf-secnav:not(.mv-con-ind) > button[aria-current="true"] { background: #fff; box-shadow: var(--e1); }
    #mobile-data-container #tf-ui #tf-secnav .tf-cola { display: none; }

    /* ── La línea de contexto y las acciones ────────────────────────────── */
    #mobile-data-container #tf-ui .tf-mv-ctx { margin: 8px 16px 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
    #mobile-data-container #tf-ui .tf-mv-ctx:empty { display: none; }
    #mobile-data-container #tf-ui .tf-mv-acts { display: flex; gap: 8px; margin: 8px 8px 0; }
    #mobile-data-container #tf-ui .tf-mv-acts:empty { display: none; }
    #mobile-data-container #tf-ui .tf-mv-acts .tf-btn { flex: 1; justify-content: center; min-height: 40px; border-radius: 11px; font-size: 13px; }

    /* ── Los controles: altos de dedo ───────────────────────────────────── */
    #mobile-data-container #tf-ui .tf-in, #mobile-data-container #tf-ui .tf-sel { min-height: 44px; border-radius: 11px; font-size: 14px; }
    #mobile-data-container #tf-ui .tf-btn { min-height: 40px; border-radius: 11px; font-size: 13px; }
    #mobile-data-container #tf-ui .tf-btn:hover:not(:disabled) { transform: none; box-shadow: none; }

    /* ── La pregunta (Destino) ──────────────────────────────────────────── */
    #mobile-data-container #tf-ui .tf-bar {
        margin: 10px 8px 0; padding: 0; border: 0; background: none; box-shadow: none;
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; overflow: visible;
    }
    #mobile-data-container #tf-ui .tf-bar .tf-f { width: auto !important; min-width: 0; }
    #mobile-data-container #tf-ui .tf-bar .tf-empuja { margin-left: 0; }
    #mobile-data-container #tf-ui #tf-destino-view .tf-bar .tf-f:nth-child(1) { display: none; }   /* Provincia: filtra la lista, que ya tiene buscador */
    #mobile-data-container #tf-ui #tf-destino-view .tf-bar .tf-f:nth-child(2) { grid-column: 1 / -1; }   /* ¿Adónde? */
    #mobile-data-container #tf-ui #tf-destino-view .tf-bar .tf-f:nth-child(5) { display: none; }   /* Ver el destino · Limpiar */
    #mobile-data-container #tf-ui .tf-sel { padding: 8px 10px; }
    #mobile-data-container #tf-ui .tf-sel .txt { font-size: 14px; }
    #mobile-data-container #tf-ui .tf-sel .txt .p { font-size: 12px; }
    #mobile-data-container #tf-ui #tf-destino-view .tf-vacio { padding: 36px 24px; }

    /* ── La ficha del Destino, apilada ──────────────────────────────────── */
    #mobile-data-container #tf-ui .tf-ficha-h { display: block; padding: 14px 14px 10px; margin-top: 10px; }
    #mobile-data-container #tf-ui .tf-ficha-h h2 { font-size: 22px; }
    #mobile-data-container #tf-ui .tf-ficha-h .sub { font-size: 12.5px; margin-top: 2px; }
    #mobile-data-container #tf-ui .tf-ficha-sig { margin: 8px 0 0; gap: 6px; }
    #mobile-data-container #tf-ui .tf-resp, #mobile-data-container #tf-ui .tf-cot {
        display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px; align-items: start;
    }
    #mobile-data-container #tf-ui .tf-resp > div:first-child, #mobile-data-container #tf-ui .tf-cot > div:first-child { grid-column: 1 / -1; }
    #mobile-data-container #tf-ui .tf-resp .corte, #mobile-data-container #tf-ui .tf-cot .corte { display: none; }
    #mobile-data-container #tf-ui .tf-resp .cifra, #mobile-data-container #tf-ui .tf-cot .cifra { font-size: 30px; margin: 2px 0; }
    #mobile-data-container #tf-ui .tf-resp .k, #mobile-data-container #tf-ui .tf-cot .k { font-size: 10px; }
    #mobile-data-container #tf-ui .tf-resp .dato .d, #mobile-data-container #tf-ui .tf-cot .dato .d { font-size: 14px; }
    #mobile-data-container #tf-ui .tf-resp .dato .x, #mobile-data-container #tf-ui .tf-cot .dato .x { font-size: 11.5px; line-height: 1.35; }
    #mobile-data-container #tf-ui .tf-resp .tf-btn, #mobile-data-container #tf-ui .tf-resp > .tf-empuja,
    #mobile-data-container #tf-ui .tf-cot .tf-btn { grid-column: 1 / -1; margin: 2px 0 0; width: 100%; justify-content: center; min-height: 42px; }
    #mobile-data-container #tf-ui .tf-cot-pie { padding: 10px 14px; font-size: 12px; }
    #mobile-data-container #tf-ui .tf-tira { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
    #mobile-data-container #tf-ui .tf-tira > div { padding: 9px 14px; margin: 0; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
    #mobile-data-container #tf-ui .tf-tira > div:nth-child(2n), #mobile-data-container #tf-ui .tf-tira > div:last-child { border-right: 0; }
    #mobile-data-container #tf-ui .tf-tira .k, #mobile-data-container #tf-ui .tf-tira .v { white-space: normal; }
    #mobile-data-container #tf-ui .tf-tira .v { font-size: 14px; }
    #mobile-data-container #tf-ui .tf-tira-pie { padding: 8px 14px; font-size: 12px; }
    #mobile-data-container #tf-ui .tf-hilo { padding: 0 8px 14px; max-width: none; }
    #mobile-data-container #tf-ui .tf-hilo-h { padding: 16px 6px 6px; }
    #mobile-data-container #tf-ui .tf-card { margin-bottom: 10px; }
    #mobile-data-container #tf-ui .tf-card-h, #mobile-data-container #tf-ui .tf-card-f { padding: 10px 14px; }
    #mobile-data-container #tf-ui .tf-card-h .r { margin-left: 0; flex: 1 1 100%; }
    #mobile-data-container #tf-ui .tf-card-f .tf-btn { width: 100%; justify-content: center; }

    /* ── Las tablas: cada fila es un renglón ────────────────────────────── */
    #mobile-data-container #tf-ui table.tf-g, #mobile-data-container #tf-ui table.tf-g tbody { display: block; width: 100%; min-width: 0; }
    #mobile-data-container #tf-ui table.tf-g thead { display: none; }
    #mobile-data-container #tf-ui table.tf-g tbody tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
        padding: 10px 12px; border-bottom: 1px solid var(--hair); cursor: pointer;
    }
    #mobile-data-container #tf-ui table.tf-g tbody tr:last-child { border-bottom: 0; }
    #mobile-data-container #tf-ui table.tf-g tbody tr:hover td { background: none; }
    #mobile-data-container #tf-ui table.tf-g tbody td {
        display: block; padding: 0; border: 0; min-width: 0; white-space: nowrap; text-align: left;
        font-size: 11.5px; color: var(--muted);
    }
    /* La primera columna es el nombre; la cifra va a la derecha en la misma
       línea, con ancho fijo para que el resto baje a la segunda. */
    #mobile-data-container #tf-ui table.tf-g tbody td:nth-child(1) {
        flex: 1 0 calc(100% - 132px); order: 1; font-size: 14px; font-weight: 600; color: var(--ink);
        white-space: normal; overflow: hidden; text-overflow: ellipsis;
    }
    #mobile-data-container #tf-ui table.tf-g tbody td:nth-child(1) .dim { display: inline; margin-left: 5px; font-weight: 400; }
    #mobile-data-container #tf-ui table.tf-g tbody td:nth-child(1) .tf-enlace.nm { font-size: 14px; pointer-events: none; }
    #mobile-data-container #tf-ui table.tf-g tbody td .dim { font-size: inherit; }
    #mobile-data-container #tf-ui table.tf-g tbody td:has(> .tf-nada:only-child) { display: none; }
    #mobile-data-container #tf-ui table.tf-g tbody td .tf-b { font-size: 10.5px; padding: 2px 7px; }
    #mobile-data-container #tf-ui table.tf-g tbody td .tf-acc { gap: 6px; }
    #mobile-data-container #tf-ui table.tf-g tbody td .tf-ico { width: 34px; height: 34px; }
    #mobile-data-container #tf-ui table.tf-g tbody td.vacia, #mobile-data-container #tf-ui table.tf-g tbody td[colspan] { flex: 1 1 100%; white-space: normal; }
    /* La ficha · Quién más llega (7): empresa · operación · vigencia · modalidad · tarifa · contra la que se usa · editar */
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(5) { flex: 0 0 120px; order: 2; text-align: right; font-size: 14px; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(3) { order: 3; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(4) { order: 4; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(2) { order: 5; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(6) { order: 6; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(6):not(:has(.tf-nada))::after { content: ' contra la que se usa'; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(7) { order: 7; margin-left: auto; }
    #mobile-data-container #tf-ui #tf-dest-ficha table.tf-g:not(.tf-prox) tbody td:nth-child(7):empty { display: none; }
    /* La ficha · Destinos más próximos (6): destino · de acá · km desde Arcadia · vigencia · $/Tn · contra ésta */
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(5) { flex: 0 0 120px; order: 2; text-align: right; font-size: 14px; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(2) { order: 3; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(2)::before { content: 'a '; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(3) { order: 4; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(3)::after { content: ' desde Arcadia'; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(4) { order: 5; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(6) { order: 6; }
    #mobile-data-container #tf-ui table.tf-prox tbody td:nth-child(6):not(:has(.tf-nada))::before { content: 'contra ésta '; }
    /* El Padrón (8): localidad · km · zona · $/Tn · edad · $/Tn·km · estado · acciones */
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(1) .tf-enlace.nm { color: var(--navy); }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(4) { flex: 0 0 120px; order: 2; text-align: right; font-size: 14px; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(4) .dim { display: block; font-size: 11px; }
    /* La raya de «sin $/Tn» se queda: así todos los renglones tienen la misma
       forma (el nombre a la izquierda, la cifra o su ausencia a la derecha). */
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(4):has(> .tf-nada:only-child) { display: block; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(2) { order: 3; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(2):not(:has(.tf-nada))::after { content: ' km'; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(3) { order: 4; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(7) { order: 5; display: flex; gap: 6px; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(5) { order: 6; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(6) { order: 7; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(6):not(:has(.tf-nada))::after { content: ' $/Tn·km'; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(8) { order: 8; margin-left: auto; }
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(8) .tf-ico[title^="Abrir"] { display: none; }   /* toda la fila abre la ficha */
    #mobile-data-container #tf-ui #tf-pad-tbody td:nth-child(8):not(:has(.tf-ico:not([title^="Abrir"]))) { display: none; }
    /* Cotización (7): grupo · localidades · precio · costo · vigencia · actualizado · acciones */
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(1) .nm { font-size: 15px; font-weight: 700; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(1) .dim { display: block; margin: 0; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(3) { flex: 0 0 120px; order: 2; text-align: right; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(3) .tf-plata.big { font-size: 17px; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(2) { order: 3; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(2) .tf-enlace { font-size: 11.5px; pointer-events: none; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(2)::after { content: ' localidades'; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(4) { order: 4; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(4):not(:has(.tf-nada))::before { content: 'costo medio '; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(5) { order: 5; display: flex; gap: 5px; align-items: center; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(6) { order: 6; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(6) .dim { display: inline; margin-left: 4px; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(7) { order: 7; margin-left: auto; }
    #mobile-data-container #tf-ui #tf-cot-tbody td:nth-child(7):not(:has(.tf-ico)) { display: none; }
    /* Las que faltan (4): localidad · provincia · costo · ponerle precio */
    #mobile-data-container #tf-ui #tf-cot-faltan table.tf-g tbody td:nth-child(3) { flex: 0 0 120px; order: 2; text-align: right; font-size: 14px; }
    #mobile-data-container #tf-ui #tf-cot-faltan table.tf-g tbody td:nth-child(2) { order: 3; }
    #mobile-data-container #tf-ui #tf-cot-faltan table.tf-g tbody td:nth-child(4) { order: 4; margin-left: auto; }

    /* ── El Padrón: contadores, filtro; sin dispersión, mapa ni mantenimiento */
    #mobile-data-container #tf-ui .tf-kpis { grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
    #mobile-data-container #tf-ui .tf-kpi { padding: 8px 11px; border-radius: 11px; }
    #mobile-data-container #tf-ui .tf-kpi:hover { transform: none; box-shadow: var(--shadow); }
    #mobile-data-container #tf-ui .tf-kpi .v { font-size: 22px; }
    #mobile-data-container #tf-ui .tf-kpi .x { font-size: 11px; }
    #mobile-data-container #tf-ui #tf-padron-view .tf-bar .tf-f:nth-child(1) { display: none; }   /* Provincia */
    #mobile-data-container #tf-ui #tf-padron-view .tf-bar .tf-f:nth-child(4) { display: none; }   /* Limpiar */
    #mobile-data-container #tf-ui #tf-pad-mant, #mobile-data-container #tf-ui #tf-pad-v-disp, #mobile-data-container #tf-ui #tf-pad-v-mapa { display: none !important; }
    #mobile-data-container #tf-ui .tf-zres { position: relative; }
    #mobile-data-container #tf-ui .tf-velo { position: absolute; min-height: 120px; }

    /* ── Cotización: la franja y el filtro ──────────────────────────────── */
    #mobile-data-container #tf-ui .tf-aviso { padding: 10px 12px; margin: 10px 0 0; font-size: 12.5px; gap: 8px 10px; }
    #mobile-data-container #tf-ui .tf-aviso .tf-empuja { margin: 2px 0 0; flex: 1 1 100%; justify-content: center; }
    #mobile-data-container #tf-ui #tf-cotizacion-view .tf-bar { grid-template-columns: 1fr 1fr 1fr; }
    #mobile-data-container #tf-ui #tf-cotizacion-view .tf-bar .tf-f:nth-child(1) { grid-column: 1 / -1; }   /* Buscar */
    #mobile-data-container #tf-ui #tf-cotizacion-view .tf-bar .tf-f:nth-child(5) { display: none; }   /* Limpiar */
    #mobile-data-container #tf-ui #tf-cotizacion-view .tf-bar .tf-in { font-size: 12.5px; padding-left: 8px; padding-right: 4px; }
    #mobile-data-container #tf-ui #tf-cot-faltan { margin-top: 10px; }
}

/* ── Lo que cuelga del <body>: los modales de la PC y la lista, como hoja ──
   Sin scope de contenedor —no lo tienen—, con el umbral del teléfono como único
   candado: debajo de 768 px el mundo es el teléfono, siempre. */
@media (max-width: 767px) {
    .tf-ui.tf-modal { padding: 0; align-items: flex-end; }
    .tf-ui.tf-modal .tf-modal-p {
        max-width: none !important; max-height: 92vh; border-radius: 20px 20px 0 0;
        animation: mvHojaSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform;
    }
    .tf-ui.tf-modal .tf-modal-p::before { content: ''; display: block; flex: none; align-self: center; width: 40px; height: 5px; margin: 8px 0 0; border-radius: 9px; background: var(--hair-strong); }
    .tf-ui.tf-modal .tf-modal-h { padding: 6px 16px 10px; }
    .tf-ui.tf-modal .tf-modal-h h3 { font-size: 16px; }
    .tf-ui.tf-modal .tf-modal-b .tf-pad { padding-left: 10px; padding-right: 10px; }
    .tf-ui.tf-modal .tf-card-h { flex-wrap: wrap; padding: 10px 14px; }
    .tf-ui.tf-modal .tf-card-h .r { margin-left: 0; flex: 1 1 100%; }
    .tf-ui.tf-modal .tf-card-b { padding: 12px 14px; }
    .tf-ui.tf-modal .tf-campos > * { grid-column: span 12; }
    .tf-ui.tf-modal .tf-in, .tf-ui.tf-modal .tf-sel { min-height: 44px; font-size: 15px; border-radius: 11px; }
    .tf-ui.tf-modal .tf-seg { display: flex; width: 100%; }
    .tf-ui.tf-modal .tf-seg button { flex: 1; justify-content: center; min-height: 38px; }
    .tf-ui.tf-modal .tf-modal-f { padding: 10px 14px 16px; gap: 8px; }
    .tf-ui.tf-modal .tf-modal-f > .tf-dim, .tf-ui.tf-modal .tf-modal-f > .tf-enlace { flex: 1 1 100%; order: -1; }
    .tf-ui.tf-modal .tf-modal-f > span:last-child { flex: 1 1 100%; display: flex; gap: 8px; }
    .tf-ui.tf-modal .tf-modal-f .tf-btn { flex: 1; justify-content: center; min-height: 44px; border-radius: 11px; font-size: 14px; }
    .tf-ui.tf-modal .tf-modal-f .tf-btn:hover:not(:disabled) { transform: none; box-shadow: none; }
    .tf-ui.tf-modal .tf-modal-p.mv-arrastra { animation: none; transition: none; }
    .tf-ui.tf-modal .tf-modal-p.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    .tf-ui.tf-modal .tf-modal-p.mv-vuelve { transition: transform .2s ease; }

    /* La lista de localidades («¿Adónde?»). El velo es la sombra: un
       pseudo-elemento fijo quedaría arriba del propio fondo de la hoja. */
    .tf-locpop {
        left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto !important;
        max-height: 80vh; min-width: 0; border: 0; border-radius: 20px 20px 0 0;
        box-shadow: 0 0 0 100vmax rgba(10, 20, 40, .38), 0 -10px 30px rgba(16, 32, 64, .18);
        animation: mvHojaSube .28s cubic-bezier(.2, .8, .2, 1) both; will-change: transform;
    }
    .tf-locpop .tf-locpop-b { padding: 14px 16px 10px; border-radius: 20px 20px 0 0; }
    .tf-locpop .tf-locpop-b input { font-size: 15px; min-height: 28px; }
    .tf-locpop .tf-locpop-i { padding: 10px 16px; }
    .tf-locpop .tf-locpop-i .n { font-size: 14px; }
    .tf-locpop .tf-locpop-i .s { font-size: 12px; }
    .tf-locpop .tf-locpop-p { padding: 8px 16px 14px; }
    .tf-locpop.mv-arrastra { animation: none; transition: none; }
    .tf-locpop.mv-baja { transition: transform .22s ease-in; transform: translateY(105%) !important; }
    .tf-locpop.mv-vuelve { transition: transform .2s ease; }
}