/* ══════════════════════════════════════════════════════════════════════════ mobile.css — Capa responsive opt-in para la plataforma logística -------------------------------------------------------------------------- Reglas scopeadas a @media (max-width: 768px). En desktop NO toca nada. Carga después de logistic.css en base.html. Patrón: · Sidebar lateral → off-canvas (hidden, slide-in via .sb-mobile-open) · Bottom-nav fijo aparece (definido en bottom_nav.html como #bn) · Topbar genérico se compacta + suma botón hamburguesa · Watermark se oculta (no aporta en pantalla pequeña) · Contenido principal recibe padding-bottom para no quedar tapado por el bn · Tabs/tablas modulares migrarán en sesiones siguientes (cards stackeadas) ══════════════════════════════════════════════════════════════════════════ */ /* ─── Variables compartidas entre nav y bottom-nav ─── */ :root { --bn-height: 60px; --bn-fab-size: 54px; --bn-side-margin: 12px; --bn-bottom-margin: 14px; --bn-radius: 28px; --bn-bg: linear-gradient(180deg, rgba(20,28,40,.92) 0%, rgba(13,19,28,.96) 100%); --bn-border: rgba(130,150,180,.14); --bn-icon: rgba(148,163,184,.60); --bn-icon-hover: rgba(255,255,255,.92); --bn-accent: #E63946; --bn-accent-soft: rgba(230,57,70,.14); /* Sombra cálida + halo rojo sutil para el efecto flotante */ --bn-shadow: 0 12px 32px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(230,57,70,.04), inset 0 1px 0 rgba(255,255,255,.03); } /* ══════════════════════════════════════════════════════════════════════════ DESKTOP: bottom-nav, sheet y topbar brand quedan ocultos por defecto ══════════════════════════════════════════════════════════════════════════ */ #bn, #bn-sheet, #bn-sheet-backdrop, .gen-topbar-brand { display: none; } /* ══════════════════════════════════════════════════════════════════════════ MOBILE: hasta 768px ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ─── Layout principal: una sola columna ─── */ /* Background defensivo: si por algún motivo el .flex-grow-1 no cubre todo el viewport en mobile, igual no se ve blanco. */ html, body { overflow-x: hidden; background: #0b1118; } /* En mobile el sidebar desaparece por completo. Toda la navegación se hace via bottom-nav + sheet "Más". El sheet replica las secciones completas del sidebar para que no se pierda acceso a nada. IMPORTANTE: !important porque el