/* ============================================================================
   Almacén — shell "webapp" móvil para las páginas operativas de almacén
   (Picking A1, Ubicar productos, Imprimir etiquetas, Cajas FBA, Trackings wallapop).

   En móvil (<=767px) y SOLO en estas páginas (el master pone la clase
   .almacen-mode en .app-shell) la intranet se comporta como una app
   independiente: se oculta toda la cabecera (logo, menú, hamburguesa,
   "Bienvenido…") y aparece un tab-bar inferior fijo con las 5 opciones, sin
   manera de salir a otros menús (Gestión, Informes…). En escritorio no cambia
   nada: el tab-bar queda oculto y el menú normal sigue visible.

   Los encajes con las barras/toasts propios de cada página se hacen aquí por
   especificidad, así NO hay que tocar esas páginas (.et-printbar, .pa-toast…).
   ============================================================================ */

/* El tab-bar solo se renderiza en páginas de almacén; por defecto (escritorio) oculto. */
.almacen-tabbar { display: none; }

@media (max-width: 767px) {

    .app-shell.almacen-mode { --almacen-tabbar-h: 54px; }

    /* --- Fuera toda la cabecera de la intranet: app independiente --- */
    .app-shell.almacen-mode .app-header { display: none !important; }
    .app-shell.almacen-mode #lblNombreCliente { display: none !important; }
    .app-shell.almacen-mode .app-content > hr { display: none !important; }
    .app-shell.almacen-mode .app-footer { display: none !important; }

    /* El contenido arranca pegado arriba y a ancho completo; deja hueco abajo
       para que nada quede tapado por el tab-bar fijo. */
    .app-shell.almacen-mode .app-content {
        padding: 0 0 calc(env(safe-area-inset-bottom) + var(--almacen-tabbar-h) + 10px) !important;
        max-width: 100% !important;
    }

    /* --- Tab-bar inferior fijo (5 pestañas) --- */
    .app-shell.almacen-mode .almacen-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: rgba(16, 20, 27, .96);
        border-top: 1px solid #272d38;
        -webkit-backdrop-filter: saturate(140%) blur(10px);
        backdrop-filter: saturate(140%) blur(10px);
        padding: 6px 4px calc(env(safe-area-inset-bottom) + 6px);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
    }

    .almacen-tab {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        padding: 4px 2px; border-radius: 12px;
        color: #6b7480; text-decoration: none;
        font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        -webkit-tap-highlight-color: transparent; touch-action: manipulation;
        transition: color .15s, background .15s, transform .08s;
    }
    .almacen-tab:active { transform: scale(.94); }
    .almacen-tab i { font-size: 1.2rem; line-height: 1; }
    .almacen-tab span {
        font-size: .62rem; font-weight: 700; letter-spacing: .01em; line-height: 1;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .almacen-tab:hover, .almacen-tab:focus { color: #9aa3b2; text-decoration: none; }
    .almacen-tab.is-active { color: #6ea8fe; background: rgba(110, 168, 254, .14); }

    /* --- Encaje con las barras/toasts propios de cada página (sin tocarlas) --- */

    /* Imprimir etiquetas: su barra de impresión sube justo encima del tab-bar
       (su safe-area ya lo aporta el tab-bar de debajo). */
    .app-shell.almacen-mode .et-printbar {
        bottom: calc(env(safe-area-inset-bottom) + var(--almacen-tabbar-h)) !important;
        padding-bottom: 11px !important;
    }

    /* Toasts de Picking/Ubicar por encima del tab-bar (los de etiquetas ya van altos). */
    .app-shell.almacen-mode .pa-toast,
    .app-shell.almacen-mode .ub-toast {
        bottom: calc(env(safe-area-inset-bottom) + var(--almacen-tabbar-h) + 16px) !important;
    }
}

/* ============================================================================
   iOS — evitar el AUTO-ZOOM al enfocar un campo de texto
   ----------------------------------------------------------------------------
   Safari de iOS hace zoom automatico (y NO vuelve solo) cuando enfocas un
   input/select/textarea cuyo font-size CALCULADO es < 16px. Forzamos 16px en
   cualquier dispositivo tactil (pointer: coarse) para TODA la app.
     - Se usan px (no rem) para ser inmunes a la base de fuente de cada pagina.
     - !important para ganar a los estilos por-pagina (.et-input, .pa-search,
       .ub-manual .box input...).
     - Se excluyen los controles sin teclado (checkbox/radio/range/boton/color/
       file) para no alterar su aspecto.
     - NO se toca el viewport: el pinch-zoom manual del usuario se conserva.
   Esta regla va FUERA del @media max-width:767px: aplica en cualquier ancho
   mientras el puntero sea tactil (tambien tablets), no solo en movil estrecho.
   ============================================================================ */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not([type="file"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}