/* ============================================================ Bodega VF · Móvil — navegación (menú hamburguesa) Dueño: tarea D. NO editar desde otras tareas. Se carga DESPUÉS de app.css. Idea general ------------ · Escritorio (>=701px): esta hoja no cambia nada. La barra lateral sigue siendo la columna fija de siempre y la barra superior móvil queda oculta. · Móvil (<=700px): aparece una barra superior compacta con el logo y un botón hamburguesa. La barra lateral deja de ser una fila horizontal deslizable (lo que hacía app.css) y pasa a ser un panel lateral que entra desde la izquierda, cerrado por omisión y SIN ocupar espacio (position:fixed + visibility). · La clase .menu-abierto la pone y saca nav.js sobre . ============================================================ */ /* ---------- piezas que solo existen en móvil ---------- */ /* Ocultas por omisión: en escritorio no deben verse nunca. */ .barra-movil, .velo-menu{ display:none } @media (max-width:700px){ /* ---------- barra superior compacta ---------- */ /* Pegada arriba y por encima del velo (z-index 80 > 60) para que la hamburguesa siga siendo tocable con el menú abierto. */ .barra-movil{ display:flex;align-items:center;justify-content:space-between;gap:10px; position:sticky;top:0;z-index:80; height:56px;flex-shrink:0; padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); background:rgba(13,21,35,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--borde); } .bm-marca{ display:flex;align-items:center;gap:9px; text-decoration:none;color:var(--tinta);min-width:0; } .bm-logo{ width:34px;height:34px;flex-shrink:0;display:grid;place-items:center; font-size:19px;border-radius:10px;background:var(--degrade); box-shadow:0 4px 12px rgba(56,189,248,.30); } .bm-titulo{ font-weight:800;font-size:16px;letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ---------- botón hamburguesa (>=44px de toque) ---------- */ .bm-boton{ width:46px;height:46px;flex-shrink:0; display:grid;place-items:center; background:none;border:1px solid transparent;border-radius:12px; color:var(--tinta);cursor:pointer;padding:0; -webkit-tap-highlight-color:transparent; transition:background .15s,border-color .15s; } .bm-boton:hover{ background:rgba(56,189,248,.08) } .bm-boton:active{ background:rgba(56,189,248,.16) } .bm-boton:focus-visible{ outline:none;border-color:var(--acento); box-shadow:0 0 0 3px rgba(56,189,248,.20); } /* tres rayas que se cruzan en X al abrir */ .bm-rayas{ position:relative;display:block;width:22px;height:16px } .bm-rayas i{ position:absolute;left:0;right:0;height:2px;border-radius:2px; background:currentColor; transition:transform .25s ease,opacity .18s ease; } .bm-rayas i:nth-child(1){ top:0 } .bm-rayas i:nth-child(2){ top:7px } .bm-rayas i:nth-child(3){ top:14px } .menu-abierto .bm-rayas i:nth-child(1){ transform:translateY(7px) rotate(45deg) } .menu-abierto .bm-rayas i:nth-child(2){ opacity:0 } .menu-abierto .bm-rayas i:nth-child(3){ transform:translateY(-7px) rotate(-45deg) } /* ---------- velo (tocar fuera cierra) ---------- */ .velo-menu{ display:block;position:fixed;inset:0;z-index:60; background:rgba(4,10,20,.62);backdrop-filter:blur(2px); opacity:0;visibility:hidden; transition:opacity .25s ease,visibility .25s ease; } .menu-abierto .velo-menu{ opacity:1;visibility:visible } /* ---------- panel lateral desplegable ---------- Deshace la fila horizontal deslizable de app.css y lo convierte en panel fijo bajo la barra superior. Cerrado: fuera de pantalla y visibility:hidden, así no ocupa alto, no provoca desborde horizontal y queda fuera del orden de tabulación. */ .lateral{ position:fixed;top:56px;left:0; width:min(86vw,300px); height:calc(100vh - 56px); height:calc(100dvh - 56px); z-index:70; display:flex;flex-direction:column;align-items:stretch; overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; padding:14px max(12px,env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:rgba(11,18,30,.98);backdrop-filter:blur(10px); border-right:1px solid var(--borde); box-shadow:14px 0 34px rgba(2,8,20,.5); transform:translateX(-100%); visibility:hidden; transition:transform .26s cubic-bezier(.3,.8,.35,1),visibility .26s; } .menu-abierto .lateral{ transform:none;visibility:visible } /* La marca ya se ve en la barra superior: dentro del panel sobra. */ .lateral .marca{ display:none } /* Enlaces otra vez en columna (app.css los ponía en fila). */ .lateral nav{ flex-direction:column;margin:0;gap:4px } /* ---------- pie del panel: vuelve a estar disponible ---------- En app.css el pie se esconde en móvil, dejando sin acceso los otros sistemas GEP y el enlace "salir". Dentro del panel sí cabe, así que se muestra de nuevo, empujado al fondo. */ .lateral .lateral-pie{ display:block;margin-top:auto;padding:12px 4px 4px; border-top:1px solid var(--borde); } .lateral .fila-sistemas a{ font-size:12px;padding:8px 6px } /* El sello GEP grande no aporta en pantalla chica y roba alto. */ .lateral .gep-sello{ padding:8px;margin-bottom:8px } .lateral .gep-sello .gep-marca{ font-size:19px } .lateral #pie-corte{ font-size:10.5px;line-height:1.4 } /* "salir" con área de toque cómoda */ .lateral .lateral-pie a[href="/logout"]{ display:inline-block;padding:6px 4px;min-height:24px;font-weight:700; } /* Bloquea el desplazamiento del fondo mientras el menú está abierto. */ .menu-abierto, .menu-abierto body{ overflow:hidden } } /* Respeta a quien pide menos animación. */ @media (prefers-reduced-motion:reduce){ .lateral,.velo-menu,.bm-rayas i{ transition:none !important } } /* Al imprimir no debe salir ni la barra superior ni el velo. */ @media print{ .barra-movil,.velo-menu{ display:none !important } }