/* Opción A de la navegación (Rodrigo, 4 nov 2026), solo celular:
   arriba ☰ (menú lateral con todo) · logo EMIR al centro (lleva a Hoy) · tu foto; abajo atajos: Órdenes · Cotizar · micrófono · Códigos · El Club.
   La computadora se queda con sus menús de arriba y el botón «Hablar». Colores del modo de manejo: se ve en los 11 modos. */

.ng-lat-btn{display:none}
.ng-guardadas{display:none!important}

@media(max-width:900px){
  /* ---------- arriba: ☰ · logo al centro · foto ---------- */
  header.top .in{position:relative}
  .ng-lat-btn{display:grid;place-items:center;position:relative;width:44px;height:44px;margin-left:-6px;border-radius:12px;border:0;background:none;color:var(--texto);cursor:pointer;flex:none}
  .ng-lat-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .ng-lat-btn:active{background:var(--sup)}
  .ng-lat-btn.ng-aviso::after,.ng-lat-btn.ng-nuevo::after{content:'';position:absolute;top:8px;right:7px;width:9px;height:9px;border-radius:50%;background:var(--rojo,#E5484D);box-shadow:0 0 0 2px var(--panel)}
  .ng-lat-btn.ng-nuevo::after{background:var(--ambar,#1B55AD)}
  header.top .in > .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer}
  @media(max-width:360px){header.top .in > .logo{height:26px!important}}   /* celulares angostos: cabe junto al ☰, al botón del Panel (personal) y a tu foto */

  /* ---------- abajo: atajos del mismo ancho; el micrófono al centro, sin nombre ---------- */
  nav.abajo > button.ng-atajo{min-width:0}
}

/* ---------- menú lateral ---------- */
/* con id e !important: el portal pone position:relative y z-index:1 a todo lo que cuelga de <body> */
#ngLat.ng-lat{position:fixed!important;inset:0;z-index:2147482000!important;display:block}
#ngLat.ng-lat.oculto{display:none!important}
.ng-lat-velo{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:ng-lat-velo var(--dur-2,.22s) ease-out}
@keyframes ng-lat-velo{from{opacity:0}}
.ng-lat-panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,340px);display:flex;flex-direction:column;background:var(--panel);color:var(--texto);
  border-right:1px solid var(--linea);box-shadow:12px 0 40px rgba(0,0,0,.28);padding-top:env(safe-area-inset-top,0px);
  animation:ng-lat-entra var(--dur-2,.24s) var(--curva-entra,cubic-bezier(.2,.8,.2,1))}
@keyframes ng-lat-entra{from{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.ng-lat-panel,.ng-lat-velo{animation:none}}
.ng-lat-cab{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 8px 0 18px;border-bottom:1px solid var(--linea)}
.ng-lat-logo{height:24px;width:auto}
html[data-modo="claro"] .ng-lat-logo,html[data-modo="ev"] .ng-lat-logo{filter:brightness(0)}
.ng-lat-x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:12px;background:none;color:var(--texto);cursor:pointer}
.ng-lat-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ng-lat-in{flex:1;overflow:auto;overscroll-behavior:contain;padding:10px 0 calc(24px + env(safe-area-inset-bottom,0px))}
.ng-lat-voz{display:flex;align-items:center;gap:12px;width:calc(100% - 28px);min-height:48px;margin:6px 14px 12px;padding:0 14px;border-radius:14px;
  border:1px solid var(--linea2);background:var(--sup);color:var(--texto);font:600 15px/1.2 var(--f);cursor:pointer;text-align:left}
.ng-lat-voz svg{width:20px;height:20px;flex:none}
.ng-lat-sec{margin-top:6px}
.ng-lat-t,.ng-lat-op{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 18px;border:0;background:none;color:var(--texto);cursor:pointer;text-align:left;position:relative}
.ng-lat-t{margin-top:8px;min-height:44px;font:700 12px/1.2 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.ng-lat-t svg{width:18px;height:18px}
.ng-lat-t i{margin-left:auto;font:400 20px/1 var(--f);font-style:normal}
.ng-lat-op{font:600 15px/1.25 var(--f);padding-left:48px}
.ng-lat-op.ng-lat-hoy{padding-left:18px}
.ng-lat-op svg{width:20px;height:20px;flex:none}
.ng-lat-op.oculto{display:none}
.ng-lat-op.on,.ng-lat-t.on{background:var(--sup);font-weight:700}
.ng-lat-op:active,.ng-lat-t:active,.ng-lat-voz:active{background:var(--sup2)}
.ng-lat-op.ng-aviso::after,.ng-lat-op.ng-nuevo::after{content:'';width:8px;height:8px;margin-left:auto;border-radius:50%;background:var(--rojo,#E5484D)}
.ng-lat-op.ng-nuevo::after{background:var(--ambar,#1B55AD)}
.ng-lat :is(button,.ng-lat-voz):focus-visible{outline:3px solid rgba(var(--menta-rgb),.35);outline-offset:-3px}
.ng-lat .ng-tag-pronto{margin-left:8px}

/* ---------- «‹» junto al ☰ (y en la compu antes del logo): la pantalla anterior o Inicio ---------- */
.ng-atras{display:grid;place-items:center;width:40px;height:40px;margin-right:4px;border-radius:50%;border:1px solid var(--linea2);background:none;color:var(--texto);cursor:pointer;flex:none;padding:0;position:relative}
.ng-atras::after{content:'';position:absolute;inset:-3px}   /* toque de 46 px */
.ng-atras svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ng-atras:active{background:var(--sup)}
.ng-atras.oculto{display:none}
@media(min-width:901px){header.top .in > .ng-atras{margin-right:-12px}}
/* celular: ‹ y ☰ juntos a la izquierda (el encabezado reparte con space-between y gap de 24 px) */
@media(max-width:900px){header.top .in > .ng-atras{margin-right:-18px}header.top .in > .ng-lat-btn{margin-right:auto}}