/* =============================================================================
   index_celular.css — BARRA DE CIMA do sistema (index.html) NO CELULAR (Daniel, 29/09/2026:
   "o index da para ajustar para celular sem mexer no pc e tablet" / "ajustar").

   So' carregado com media="(max-width: 600px)" (link no <head> do index.html). PC, notebook e tablet NAO carregam.
   Nada de menu, permissoes ou login: so' posicao/tamanho.
   Layout (29/09, 2a versao): barra de 1 linha (46px): menu (hamburguer) | atalhos das telas (deslizam) | tema | usuario.
   A pilula "CAIXA - NOME" e a chave Aberto/Fechado ficam DENTRO do menu do usuario (index_celular.js), acima do Sair.
   Sino, marca FacilApp, tempos de entrega/retirada e alguns atalhos saem da barra no celular (continuam no PC).
   ============================================================================= */

.GOURMET-topbar {
  height: 46px !important; flex-wrap: nowrap !important; align-items: center !important;
  padding: 0 8px 0 0 !important; gap: 4px !important;
}

/* Linha 1 — esquerda (Daniel 29/09: "retirar FacilApp; o arredondado vai ate o fim dos 3 tracos; o tema so' o botao"):
   a pilula clara fica SO' em volta do menu (hamburguer); a marca FacilApp sai; o tema vira um botao redondo so' com o icone. */
.top-left-cluster {
  height: 38px !important; margin-top: 4px !important; padding: 0 !important; gap: 8px !important;
  background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}
/* Curva clara (Daniel 29/09: "segue com a curva ate o sino" / "e os icones dentro"): uma pilula so' na linha 1,
   do menu ate o sino; menu, tema, status, caixa e sino ficam DENTRO dela; o usuario fica na ponta, fora. */
.GOURMET-topbar::before {
  content: ''; position: absolute; top: 4px; left: 0; right: 80px; height: 38px; z-index: 0; pointer-events: none;
  background: var(--fa-panel, #f2ebe0); border-radius: 0 20px 20px 0; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.18);
}
.top-left-cluster, .top-right-cluster, .channel-shortcuts { position: relative; z-index: 1; }
.btn-hamburguer { height: 38px !important; padding: 0 8px 0 10px !important; background: transparent !important; box-shadow: none !important; }
.top-right-cluster > .topbar-icon-action { color: var(--fa-text, #333) !important; }        /* sino: escuro sobre a curva clara */
.top-right-cluster > .topbar-icon-action svg { fill: currentColor !important; }
.switch-aberto { color: var(--fa-text, #333) !important; }
.facilapp-brand-box { display: none !important; }
.unit-selector {
  width: 34px !important; height: 34px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important;
  background: var(--fa-panel-alt, #e8e2d2) !important;
}
.unit-selector > *:not(.icone-tema-celular) { display: none !important; }
.unit-selector::before { content: 'palette'; font-family: 'Material Icons'; font-size: 20px; color: var(--fa-primary, #566719); line-height: 1; -webkit-font-smoothing: antialiased; }
.tema-selector-popover { left: 0 !important; max-width: calc(100vw - 16px) !important; }

/* Linha 1 — direita: status (so a chave), caixa (nome curto), sino e usuario */
.top-right-cluster { margin-top: 4px !important; height: 38px !important; gap: 6px !important; margin-left: auto !important; }
.time-selector-group, .time-separator { display: none !important; }
.switch-aberto .lbl-status-text { display: none !important; }
.user-pill-btn { padding: 0 8px !important; max-width: 110px; }
#txtNomeCaixaTopbar { font-size: 10px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: 92px; }

/* Atalhos das telas (Daniel 29/09: "muda os icones logo a frente do botao menu"): na MESMA linha, logo depois do menu;
   se nao couberem todos, a faixa desliza com o dedo sem empurrar o tema e o usuario. */
.channel-shortcuts {
  order: 2 !important; flex: 1 1 auto !important; min-width: 0 !important; height: 40px !important; justify-content: flex-start !important;
  overflow-x: auto !important; overflow-y: hidden !important; padding: 0 8px !important; gap: 4px !important;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.channel-shortcuts::-webkit-scrollbar { display: none; }
.channel-shortcuts .channel-btn { flex: 0 0 auto !important; }
/* No celular saem os atalhos da Loja Online (delivery do cliente) e do Cardapio Digital de mesa (Daniel 29/09) */
#btnCanalLoja, #btnCanalCardapioDigital { display: none !important; }

/* Barra de 1 linha (46px): palco, mega menu e janelas logo abaixo dela */
.stage-container { margin-top: 46px !important; height: calc(100dvh - 46px) !important; }
.mega-menu-backdrop { inset: 46px 0 0 0 !important; }
.mega-menu-overlay { top: 46px !important; max-height: calc(100dvh - 46px) !important; width: 100vw !important; }
[class*="browse-"][class$="-overlay"] { inset: 46px 0 0 !important; }

/* Popovers do caixa e do usuario nao podem sair da tela */
.caixa-popover-menu { max-width: calc(100vw - 16px) !important; }

/* Daniel 29/09: "retirar no celular" — atalhos de hotel Mapa de Reservas (calendario), Recepcao Hoje (prancheta) e Contas dos Hospedes (chave).
   O id vem do banco (button_id) ou "btnCanal_<codigo>"; casa pelo id e, por garantia, pelo title (rotulo). */
#atalhosMenuSuperior .channel-btn[id*="reserva" i],
#atalhosMenuSuperior .channel-btn[title*="reserva" i],
#atalhosMenuSuperior .channel-btn[id*="recepcao" i],
#atalhosMenuSuperior .channel-btn[title*="recep" i],
#atalhosMenuSuperior .channel-btn[id*="contashospedes" i],
#atalhosMenuSuperior .channel-btn[id*="contas-hospedes" i],
#atalhosMenuSuperior .channel-btn[title*="hóspede" i],
#atalhosMenuSuperior .channel-btn[title*="hospede" i] { display: none !important; }

/* Daniel 29/09: "retira" o sino (Notificacoes de Pedidos, abria o Kanban) no celular. O usuario continua na ponta. */
.top-right-cluster > .topbar-icon-action[title^="Notifica"] { display: none !important; }

/* Daniel 29/09: "excluir do celular" o atalho Sair (porta com seta) da faixa de atalhos. */
#atalhosMenuSuperior .channel-btn[id*="sair" i],
#atalhosMenuSuperior .channel-btn[title*="sair" i] { display: none !important; }

/* ---------- Barra de 1 linha (Daniel 29/09): menu | atalhos | tema | usuario ----------
   O grupo da esquerda "se desfaz" (display: contents) so' para o menu ficar antes dos atalhos e o tema depois deles;
   o botao de tema e o popover dele continuam os mesmos (nada do seletor de tema muda). */
.top-left-cluster { display: contents !important; }
.btn-hamburguer { order: 1 !important; flex: 0 0 auto !important; position: relative; z-index: 1; }   /* por cima da curva clara */
.top-left-cluster > div[style*="relative"] { order: 3 !important; flex: 0 0 auto !important; position: relative; z-index: 1; }
.top-right-cluster { order: 4 !important; flex: 0 0 auto !important; margin-top: 0 !important; margin-left: 0 !important; }
.channel-shortcuts { padding: 0 2px !important; }
.channel-shortcuts .channel-btn { width: 36px !important; height: 36px !important; }

/* ---------- Menu do usuario (bonequinho) no celular: CAIXA - NOME, chave Aberto/Fechado e Sair ----------
   index_celular.js move a pilula do caixa e a chave para dentro dele (acima do Sair). */
#popoverUsuario { width: 230px !important; padding: 6px !important; gap: 6px; }
#popoverUsuario .menu-usuario-caixa { position: static !important; }
#popoverUsuario .menu-usuario-caixa .user-pill-btn { width: 100% !important; max-width: none !important; height: 32px !important; justify-content: center !important; }
#popoverUsuario .menu-usuario-caixa #txtNomeCaixaTopbar { max-width: none !important; font-size: 12px !important; }
#popoverUsuario .menu-usuario-caixa .caixa-popover-menu {
  position: static !important; width: 100% !important; margin-top: 6px; box-shadow: none !important;
}
#popoverUsuario .menu-usuario-chave {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 8px;
  border-radius: 8px; background: var(--fa-panel-alt, #f1f5f9); color: #333 !important; font-size: 12px; font-weight: 700;
}
#popoverUsuario .menu-usuario-chave .lbl-status-text { display: inline !important; color: #333 !important; }

/* Daniel 29/09: "botao de temas vai la do lado do usuario no verde escuro": a curva clara termina nos atalhos;
   tema e usuario ficam juntos na ponta, sobre o verde escuro da barra. */
.top-left-cluster > div[style*="relative"] { margin-left: 6px !important; }

/* Daniel 29/09: "menu no celular deve retirar a parte favoritos e historico" — a coluna da esquerda do mega menu
   (Favoritos, Historico, rodape) sai no celular e a lista de telas ocupa a largura toda. So' layout. */
.mega-menu-overlay .mega-sidebar-left { display: none !important; }
.mega-menu-overlay { grid-template-columns: minmax(0, 1fr) !important; }

/* Daniel 29/09: "diminui o botao 26 x 26" — botao do menu (hamburguer) no celular com 26x26, icone centralizado. */
.GOURMET-topbar .btn-hamburguer {
  width: 26px !important; height: 26px !important; min-width: 26px !important; padding: 0 !important; margin-left: 7px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important;
}
.GOURMET-topbar .btn-hamburguer svg { width: 18px !important; height: 18px !important; }

/* Daniel 29/09: "ao atualizar aparece a helen e botao desligar la em cima" — enquanto o index_celular.js ainda nao
   levou a pilula do caixa e a chave para o menu do usuario, elas ficam escondidas NA BARRA (so' os filhos diretos
   da barra; dentro do menu do usuario continuam aparecendo). */
.top-right-cluster > .switch-aberto,
.top-right-cluster > div > .user-pill-btn { display: none !important; }

/* Daniel 29/09: "na frente da cama pode por o botao liga desliga" — a chave Aberto/Fechado sai do menu do usuario e fica
   na barra, logo depois do ultimo atalho (index_celular.js a coloca ali); os atalhos nao esticam mais ate o tema. */
.GOURMET-topbar > .switch-aberto.barra-chave-celular {
  order: 2 !important; flex: 0 0 auto !important; position: relative; z-index: 1; margin: 0 6px 0 2px !important;
  display: flex !important; align-items: center !important;
}
.channel-shortcuts { flex: 0 1 auto !important; }
.top-left-cluster > div[style*="relative"] { margin-left: auto !important; }

/* Daniel 29/09: "em todos os botoes 27x27" e depois "28 x 28" — menu, atalhos, tema e usuario da barra do celular com 28x28. */
.GOURMET-topbar .btn-hamburguer { width: 28px !important; height: 28px !important; min-width: 28px !important; }
.GOURMET-topbar .channel-shortcuts .channel-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 1px !important; }
.GOURMET-topbar .channel-shortcuts .channel-btn svg,
.GOURMET-topbar .channel-shortcuts .channel-btn img { width: 26px !important; height: 26px !important; }
.GOURMET-topbar .unit-selector { width: 28px !important; height: 28px !important; }
.GOURMET-topbar .unit-selector::before { font-size: 17px !important; }
.GOURMET-topbar .top-right-cluster .topbar-icon-action:not([title^="Notifica"]) { width: 28px !important; height: 28px !important; min-width: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.GOURMET-topbar .top-right-cluster .topbar-icon-action svg { width: 20px !important; height: 20px !important; }

/* Daniel 29/09: "ajustar o botao tema" — no verde escuro, igual ao botao do usuario: 28x28, sem o circulo claro,
   so' o icone da paleta na mesma cor do icone do usuario. */
.GOURMET-topbar .unit-selector {
  background: transparent !important; border: none !important; box-shadow: none !important;
}
.GOURMET-topbar .unit-selector::before { font-size: 22px !important; color: #fff !important; }

/* Daniel 29/09: "29x29 nos icones" — os icones dos atalhos (PDV, delivery, mesas, quartos) com 29x29. */
.GOURMET-topbar .channel-shortcuts .channel-btn { width: 29px !important; height: 29px !important; min-width: 29px !important; }
.GOURMET-topbar .channel-shortcuts .channel-btn svg,
.GOURMET-topbar .channel-shortcuts .channel-btn img { width: 27px !important; height: 27px !important; }

/* Mega menu no celular (Daniel 29/09, print do menu espremido): as 4 colunas viram 2 (duas em cima, duas embaixo),
   com espaco menor, para o nome da tela caber numa linha e a estrela ficar ao lado. So' layout; montagem intacta. */
.mega-menu-overlay .mega-content-right { padding: 7px 7px 20px !important; gap: 7px !important; }
.mega-menu-overlay .mega-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 10px !important; }
.mega-menu-overlay .mega-links-grid > * { min-width: 0 !important; }
.mega-menu-overlay .mega-group-title { font-size: 14px !important; line-height: 1.2 !important; }
.mega-menu-overlay .mega-item-link { padding: 2px 0 2px 4px !important; font-size: 13px !important; line-height: 1.3 !important; overflow-wrap: anywhere; }
.mega-menu-overlay .mega-fav-star { margin-left: 3px !important; }

/* Daniel 29/09: "precisa jogar a lista para dentro da tela e colocar scroll" — com o botao de tema na ponta direita,
   a lista de temas abre presa a direita da tela, logo abaixo da barra, com rolagem. So' posicao; temas intactos. */
.GOURMET-topbar .tema-selector-popover {
  position: fixed !important; top: 50px !important; right: 8px !important; left: auto !important;
  width: 220px !important; max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 120px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
}

/* Daniel 29/09: "preciso que o botao fique do mesmo tamanho e alinhamento de todos" — o menu (hamburguer) igual aos
   atalhos: 29x29, mesmo canto arredondado (9px), mesma linha e o mesmo espaco (4px) ate o primeiro atalho. */
.GOURMET-topbar .btn-hamburguer { width: 29px !important; height: 29px !important; min-width: 29px !important; border-radius: 9px !important; }
.GOURMET-topbar .channel-shortcuts { padding-left: 0 !important; }

/* SEM PISCAR O MENU (Daniel, 01/10/2026): no celular a página nasce escondida (só a cor de fundo) até o index_celular.js
   decidir — garçom vai direto para a tela dele; os outros ganham "celular-decidido" e a página aparece. Garantia: aparece
   sozinha em 2,5 s se o JS falhar (nunca prende ninguém fora do sistema). */
/* opacidade (não visibility): elemento com visibility:visible forçado pelo tema furava o esconder (01/10/2026) */
html:not(.celular-decidido) body { opacity: 0; animation: celularRevela 0s linear 20s forwards; }   /* 20 s (garantia; o JS revela antes): celular lento passava de 6 s e mostrava o menu */
@keyframes celularRevela { to { opacity: 1; } }