/* ── Barra superior común a todas las áreas ──
   Administración, piso y cocina comparten navegación: los mismos iconos, en el
   mismo orden y en el mismo lugar. Lo único que cambia por área es el color,
   para que el operador sepa de un vistazo dónde está parado sin tener que
   reaprender dónde quedó cada cosa. */

.mnu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* en cocina las operaciones son anchas: mejor que la
                          navegación baje de renglón a que se exprima hasta
                          desaparecer, como pasaba sin esto */
    gap: 8px;
    padding: 8px 12px;
    background: var(--mnu-fondo);
    color: var(--mnu-texto);
    position: relative;
    z-index: 50;
}

/* Temas por área */
.mnu-admin  { --mnu-fondo: var(--flux-ink-900); --mnu-texto: #fff; --mnu-activo: var(--flux-lime-500); }
.mnu-piso   { --mnu-fondo: var(--flux-ink-900); --mnu-texto: #fff; --mnu-activo: var(--flux-lime-500); }
.mnu-cocina { --mnu-fondo: #000;                --mnu-texto: #fff; --mnu-activo: var(--flux-lime-400); }

.mnu a, .mnu a:hover, .mnu a:focus, .mnu a:visited { color: var(--mnu-texto); text-decoration: none; }

.mnu-marca { display: flex; align-items: center; gap: 8px; flex: none; font-weight: 700; }
.mnu-marca img { height: 30px; width: 30px; border-radius: 8px; }

/* ── Operaciones de la pantalla (KDS) ──
   No son navegación: son botones de trabajo. Van pegados a la izquierda y con
   un separador, para que nadie los confunda con el mapa del sistema. */
.mnu-ops { display: flex; align-items: center; gap: 6px; flex: none; }
.mnu-ops-info { font-size: .85rem; opacity: .75; white-space: nowrap; }
.mnu-op {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 .8rem; border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, .35);
    font-size: .95rem; font-weight: 600; white-space: nowrap;
}
.mnu-op:active { background: rgba(255, 255, 255, .18); }
.mnu-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: rgba(255, 255, 255, .25); flex: none; }

/* Atajo con estrella: liga directa, antes del mapa. Se distingue de las
   secciones por la estrella y por no desplegar nada — se toca y ya está. En
   pantalla angosta se queda solo el icono: el título completo no cabe y lo
   importante es que el destino siga a un dedo de distancia. */
.mnu-favorita {
    min-height: 44px; display: inline-flex; align-items: center; gap: .4rem;
    padding: 0 .7rem; border-radius: 10px; white-space: nowrap;
    font-size: .95rem; font-weight: 600; color: inherit; text-decoration: none;
}
.mnu-favorita .flux-ico { width: 1.05rem; height: 1.05rem; flex: none; opacity: .95; }
.mnu-favorita:hover { background: rgba(255, 255, 255, .12); }
.mnu-favorita:active { background: rgba(255, 255, 255, .2); }
@media (max-width: 900px) { .mnu-favorita-txt { display: none; } }

/* ── Secciones ── */
.mnu-secciones { display: flex; align-items: center; gap: 4px; flex: 1 1 280px; min-width: 0; overflow-x: auto; }
.mnu-secciones::-webkit-scrollbar { display: none; }
.mnu-seccion { position: relative; flex: none; }

.mnu-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    min-width: 76px; min-height: 56px;
    padding: .3rem .6rem;
    border: none; border-radius: 12px;
    background: none; color: var(--mnu-texto);
    font-size: .78rem; font-weight: 600; line-height: 1.1;
    white-space: nowrap;
}
.mnu-btn .flux-ico { width: 22px; height: 22px; }
.mnu-btn:active, .mnu-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.mnu-btn[aria-expanded="true"] { color: var(--mnu-activo); }

/* ── Panel que cuelga de cada sección ── */
/* Fijo, no absoluto: la tira de secciones puede desplazarse a lo ancho y un
   panel absoluto quedaba recortado por ese mismo scroll. Lo coloca el JS
   debajo de su botón. */
.mnu-panel {
    position: fixed;
    z-index: 60;
    min-width: 260px;
    /* Da para tres bloques de 200 px con sus separaciones: la sección de
       abasto tiene tres y con el ancho anterior el último se caía a un
       segundo renglón, dejando medio panel vacío al lado. */
    max-width: min(92vw, 680px);
    max-height: 70vh; overflow-y: auto;
    padding: 8px;
    background: #fff; color: var(--flux-ink-900);
    border: 1px solid var(--flux-gray-300); border-radius: 16px;
    box-shadow: 0 12px 32px rgba(11, 13, 18, .22);
}
/* Cerrado es cerrado.

   `[hidden]` cuenta como una clase para la especificidad, así que
   `.mnu-panel[hidden]` pesa exactamente lo mismo que `.mnu-panel.con-bloques`
   —dos "clases" cada uno— y desempata el ORDEN: la regla de abajo ganaba y los
   paneles con sub-bloques quedaban dibujados para siempre. En administración no
   se notaba porque Bootstrap trae su propio `[hidden]{display:none!important}`
   que tapaba el estropicio; en la cocina, que no lo carga, la pantalla amanecía
   con cinco menús abiertos encima de los tickets y no había forma de cerrarlos.

   Por eso la disposición de cada variante va condicionada a `:not([hidden])`,
   y no al revés: así ninguna regla que alguien agregue después puede volver a
   revivir un panel cerrado, con Bootstrap o sin él. */
.mnu-panel[hidden] { display: none; }

/* Con sub-bloques (tercer nivel) el panel se abre en columnas: el mapa de la
   sección completo a la vista, sin ir abriendo un submenú por rama.

   Cada bloque ES una columna, y no un trozo de texto que fluye por dos.
   Con `columns` el navegador reparte por altura y `break-inside: avoid` se
   rinde en cuanto un bloque no cabe entero: el último destino de la
   «Configuración de menú» aparecía solo arriba de la segunda columna,
   encima del encabezado del bloque siguiente y sin nada que dijera de cuál
   era. Repartiendo por bloques eso no puede pasar. */
.mnu-panel.con-bloques:not([hidden]) {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: 4px 14px; min-width: 460px;
}
@media (max-width: 640px) {
    .mnu-panel.con-bloques:not([hidden]) { min-width: 0; }
    .mnu-panel { max-width: 92vw; }
}

.mnu-grupo {
    display: block;
    /* Ancho suficiente para «Menú de esta sucursal» sin partirlo, y elástico
       para que dos o tres bloques repartan el panel sin huecos. */
    flex: 1 1 200px; min-width: 200px;
}
.mnu-bloque {
    break-inside: avoid;
    margin: 6px 0 4px 6px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--flux-gray-600);
}
.mnu-item {
    display: flex; align-items: center;
    width: 100%;
    min-height: 48px;
    padding: .55rem .8rem; margin-bottom: 2px;
    border: none; border-radius: 10px;
    background: none;
    color: var(--flux-ink-900) !important;
    font-size: 1rem; font-weight: 500; text-align: left;
    break-inside: avoid;
}
.mnu-item:active { background: var(--flux-lime-100); }
.mnu-item.actual { background: var(--flux-lime-100); font-weight: 700; }
.mnu-panel form { margin: 0; }

/* ── Derecha: organización, sucursal, quién soy y salir ──
   Los cuatro controles miden lo mismo. Antes el nombre era texto suelto: la
   mitad de alto que el botón de al lado y sin superficie que tocar, justo el
   control que más se usa en tableta. */
.mnu-derecha { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.mnu-derecha .mnu-btn,
.mnu-quien,
.mnu-salir {
    min-height: 48px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 .8rem; border-radius: 10px;
    background: none; color: var(--mnu-texto);
    white-space: nowrap;
}
/* El de sucursal deja de apilar icono sobre texto para caber en la misma
   altura que los demás de este lado. */
.mnu-derecha .mnu-btn { flex-direction: row; min-width: 0; font-size: .9rem; font-weight: 600; }
.mnu-quien { font-size: .9rem; font-weight: 600; opacity: .85; border: 1.5px solid transparent; }
.mnu-quien-txt { overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.mnu-salir { border: 1.5px solid rgba(255, 255, 255, .45); font-weight: 600; }
.mnu-salir:active { background: rgba(255, 255, 255, .18); }

/* En teléfono la barra se queda con lo esencial: marca, iconos y salir. */
/* El nombre es lo primero que sobra cuando la barra se aprieta: el punto del
   reloj ya dice lo que hay que saber —dentro, en descanso, con algo por
   revisar— y el botón conserva su superficie para el pulgar. Se repliega
   antes que nada porque las secciones sí hacen falta para navegar. */
@media (max-width: 1100px) {
    .mnu-quien .mnu-quien-txt { display: none; }
    .mnu-quien { padding: 0 .85rem; }
}

@media (max-width: 767px) {
    .mnu-marca-txt, .mnu-salir-txt { display: none; }
    .mnu-btn { min-width: 60px; font-size: .68rem; }
    .mnu-derecha .mnu-btn span:not(.flux-ico) { display: none; }
}

/* El nombre como acceso al reloj, con un punto de estado. Es un botón con la
   misma superficie que «Salir»: en tableta se toca con el pulgar, no se apunta. */
.mnu-reloj {
    gap: .45rem; text-decoration: none; color: inherit; opacity: 1;
    border: 1.5px solid rgba(255, 255, 255, .45);
}
.mnu-reloj:hover { background: rgba(255, 255, 255, .1); }
.mnu-reloj:active { background: rgba(255, 255, 255, .18); }
.mnu-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #9aa3b0; }
.mnu-punto-dentro { background: var(--flux-lime-500); box-shadow: 0 0 0 3px rgba(184,242,58,.25); }
.mnu-punto-descanso { background: #f5a623; box-shadow: 0 0 0 3px rgba(245,166,35,.25); }
.mnu-punto-acustependiente, .mnu-punto-acusependiente { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
.mnu-punto-fuera { background: #9aa3b0; }

/* ══ Menú lateral ═════════════════════════════════════════════════════
   El mismo mapa, en columna. En una tableta apaisada montada en la pared
   sobra ancho y falta alto: una columna deja la pantalla de trabajo más
   alta y pone las secciones al alcance del pulgar. Se elige por
   organización y la sucursal puede llevar la contraria. */

.lat {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 15rem;
    z-index: 45;
    padding: 4.6rem .6rem 1rem;   /* debajo de la barra, que va fija arriba */
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lat-fondo);
    color: var(--lat-texto);
    border-right: 1px solid rgba(255, 255, 255, .1);
}
.lat-admin, .lat-piso { --lat-fondo: #12161f; --lat-texto: #fff; --lat-activo: var(--flux-lime-500); }
.lat-cocina          { --lat-fondo: #08090c; --lat-texto: #fff; --lat-activo: var(--flux-lime-400); }

.lat-lista { display: flex; flex-direction: column; gap: 2px; }
.lat-seccion { flex: none; }

/* El botón de sección: alto de dedo, icono, texto y flecha. */
.lat-btn {
    width: 100%; min-height: 52px;
    display: flex; align-items: center; gap: .6rem;
    padding: 0 .75rem;
    border: none; border-radius: 12px;
    background: none; color: inherit;
    font: inherit; font-size: .95rem; font-weight: 600; text-align: left;
    cursor: pointer;
}
.lat-btn .flux-ico { width: 22px; height: 22px; flex: none; }
.lat-btn-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-flecha { width: 18px !important; height: 18px !important; opacity: .6; transition: transform .15s ease; }
.lat-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--lat-activo); }
.lat-btn[aria-expanded="true"] .lat-flecha { transform: rotate(180deg); }
.lat-btn:active { background: rgba(255, 255, 255, .18); }

/* El acordeón se abre donde está: en una columna hay sitio, y así el dedo no
   persigue un panel que se despliega encima de otra cosa. */
.lat-panel { display: flex; flex-direction: column; padding: 2px 0 8px .5rem; }
.lat-bloque {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .55; padding: .7rem .75rem .25rem;
}
.lat-item {
    min-height: 46px; display: flex; align-items: center;
    padding: 0 .75rem; border-radius: 10px;
    color: inherit; text-decoration: none;
    font-size: .92rem; opacity: .88;
}
.lat-item:hover { background: rgba(255, 255, 255, .08); opacity: 1; }
.lat-item:active { background: rgba(255, 255, 255, .16); }
/* Los atajos del lateral: mismo renglón que el resto, separados por una línea
   para que se lean como «lo tuyo» y no como una sección más. */
.lat-favoritas { padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.lat-favorita { gap: .5rem; font-weight: 600; }
.lat-favorita .flux-ico { width: 1rem; height: 1rem; flex: none; }

/* El hueco donde vive la página cuando la columna está a la izquierda.
   Es PADDING sobre un envoltorio, no margen sobre el contenedor: con margen,
   el contenedor conservaba su ancho máximo, se salía de la pantalla por la
   derecha y su contenido quedaba descentrado. Dentro de un hueco acotado sus
   márgenes automáticos vuelven a centrarlo en el espacio que de verdad queda. */
.lat-hueco.abierto { padding-left: 15rem; }
.mnu-con-lateral { position: sticky; top: 0; }

.mnu-hamburguesa {
    min-height: 48px; min-width: 48px;
    display: none; align-items: center; justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 10px;
    background: none; color: var(--mnu-texto); flex: none;
}
.mnu-hamburguesa:active { background: rgba(255, 255, 255, .18); }
.mnu-con-lateral .mnu-hamburguesa { display: inline-flex; }

/* Escondida a mano en pantalla ancha: el botón la saca y la vuelve a meter. */
.lat[hidden] { display: none; }
body.lat-oculto .lat-hueco.abierto { padding-left: 0; }

/* ── Angosto: la columna se repliega y sale como cajón sobre la página ── */
@media (max-width: 900px) {
    .lat { transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 30px rgba(0,0,0,.4); }
    body.lat-abierto .lat { transform: none; }
    /* En angosto la columna sale por encima: la página no se recorre. */
    .lat-hueco.abierto { padding-left: 0; }
    .lat-velo {
        position: fixed; inset: 0; z-index: 44;
        background: rgba(11, 13, 18, .5);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lat, .lat-flecha { transition: none; }
}