/* OS_4354 — o painel no padrão da Escala, com a cor da marca ZapZoom Empresa.
   As cores vêm SEMPRE das variáveis de shared/marca/marca.css (var(--zz-...)). */

/* ── Faixa do topo: azul-marinho com a logo, como a faixa verde da Escala ── */
#zz-topo { background: var(--zz-azul) !important; border-bottom: 2px solid var(--zz-ambar) !important; color: #fff; }
#zz-topo #btn-menu { background: rgba(255,255,255,.14) !important; color: #fff; border: 1px solid rgba(255,255,255,.28); }
#zz-topo .zz-topo-logo { display: block; height: 34px; width: auto; flex-shrink: 0; }
#zz-topo #empresa-nome { color: rgba(255,255,255,.78) !important; }
#zz-topo #tb-atualizada { background: rgba(255,255,255,.12) !important; color: #fff !important; border-color: rgba(255,255,255,.28) !important; }
#zz-tema-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
#zz-tema-btn:hover { background: rgba(255,255,255,.14); }
@media (max-width: 640px) { #zz-tema-btn span { display: none; } #zz-topo .zz-topo-logo { height: 28px; } }
/* No celular a faixa tem logo, tema e o carimbo "atualizada": a busca não cabe ao lado e
   virava um quadradinho vazio no canto (visto no print da OS_4354). Ela desce para uma
   linha só dela, na largura toda — a regra antiga (order:3, 100%) só vale com quebra. */
@media (max-width: 640px) {
  #zz-topo > div { flex-wrap: wrap; row-gap: 6px; width: 100%; }
  #zz-topo #busca-box { flex: 1 1 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-top: 0 !important; }
  #zz-topo #busca-global { background: rgba(255,255,255,.95); color: #0C2340; }
}
/* OS_4386 — o menu lateral começa ONDE A FAIXA TERMINA, em qualquer largura. Ele abria a
   58px fixos, mas a faixa passa disso (busca, quebra em duas linhas, letra aumentada) e o
   menu tapava a logo e o ☰. A altura real da faixa vem de app.js em --zz-topo-h.
   O A+ é `zoom` no <body>: vh se divide pelo aumento (lição da Escala, OS_4299). */
#aside-menu {
  top: var(--zz-topo-h, 58px) !important;
  height: calc(100vh / var(--fs, 1) - var(--zz-topo-h, 58px)) !important;
}
/* No computador o menu é "grudado" (sticky) dentro da sua caixa e nunca sai dela. Se a caixa
   termina antes da página, o fim da rolagem empurra o menu para CIMA da faixa (print do dono
   na OS_4386, 2ª volta). Duas coisas resolvem, sem medir nada:
   1) a caixa tem no mínimo a altura que sobra da página (o body e o app-shell têm altura
      mínima de 100vh SEM dividir pelo A+, por isso aqui também não divide);
   2) o menu desconta o pé: 8px de margem embaixo do body + 8px de cima (sem a barra) ou
      a barra de ícones (88px, shared/barra.js) + as duas margens = 104px.
   Testado: 4 telas × 4 rolagens (topo, meio, 400, fim) × letra normal e A+ 1, 2, 3 = 64/64.
   E a faixa fica por cima do menu (z 40): se algo ainda o empurrar, ele passa POR BAIXO. */
@media (min-width: 768px) {
  #app-shell > div:has(> #aside-menu) { min-height: calc(100vh - var(--zz-topo-h, 58px)); }
  #aside-menu { height: calc(100vh / var(--fs, 1) - var(--zz-topo-h, 58px) - 16px) !important; }
  html.dm-com-barra.dm-barra-nova #aside-menu {
    height: calc(100vh / var(--fs, 1) - var(--zz-topo-h, 58px) - 104px - env(safe-area-inset-bottom, 0px)) !important;
  }
}
#zz-topo { z-index: 40 !important; }
@media (max-width: 767.98px) {
  #aside-menu { z-index: 45 !important; }
  #aside-backdrop { top: var(--zz-topo-h, 58px) !important; z-index: 44 !important; }
}

/* A janela de entrar nasceu com o verde da Escala: aqui ela fala a cor deste app. */
:root { --dmauth-primary: var(--zz-azul); --dmauth-primary-dark: var(--zz-azul); }

/* A barra de baixo só existe depois de entrar: antes disso (tela de login) ela seria uma
   faixa vazia no pé da tela. shared/barra.js nasce no modo antigo; DMBarra.itens() a liga. */
html:not(.dm-barra-nova) #dm-barra-inf { display: none !important; }
html.dm-com-barra:not(.dm-barra-nova) body { padding-bottom: 0 !important; }

/* OS_4354 Onda 2 — a barra de baixo (camada 890) ficava POR CIMA das janelas (camada 50+) e
   cobria o pé delas no celular: o fim da tela de temperatura aberta pelo WhatsApp sumia sob
   ela (medido: barra no topo 812, janela até 846 numa tela de 860). Janela aberta é folha
   que cobre o pé da tela, como na Escala: enquanto houver uma, a barra sai de cena. */
html:has(#modal-root:not(.tw-hidden)) #dm-barra-inf,
html:has(.zz-camada) #dm-barra-inf { display: none !important; }

/* O A−/A+ (shared/fonte.js) nasceu para telas sem folha de estilo própria: aqui uma regra
   do painel deixava os dois botões TRANSPARENTES — letra branca sobre a pílula branca,
   só o "100%" aparecia (visto no print da OS_4354). Cores da marca, à força. */
#agfsfab { background: var(--zz-cartao) !important; border-color: var(--zz-borda) !important; }
#agfsfab button { background: var(--zz-azul) !important; color: #fff !important; border: 2px solid var(--zz-ambar) !important; }
#agfsfab button:disabled { background: var(--zz-borda) !important; color: var(--zz-texto-2) !important; border-color: transparent !important; }
#agfsfab .val { color: var(--zz-texto) !important; }

/* A barra de baixo já tem o WhatsApp: o botão verde flutuante seria uma segunda saída. */
html.dm-barra-nova .wa-fab { display: none !important; }
html.dm-barra-nova main.tw-flex-1 { padding-right: 12px !important; }
@media (min-width: 601px) { html.dm-barra-nova main.tw-flex-1 { padding-right: 24px !important; } }

/* ── Página inicial ── */
body.zz-na-inicio { background: var(--zz-fundo) !important; }
.zz-inicio { max-width: 1100px; margin: 0 auto; }
.zz-marca-topo { text-align: center; margin: 4px 0 14px; }
.zz-saudacao { text-align: center; margin-bottom: 18px; }
.zz-saudacao-ola { font-size: 22px; font-weight: 700; color: var(--zz-texto); }
.zz-saudacao-empresa { font-size: 14px; color: var(--zz-texto-2); margin-top: 2px; }
.zz-grupo { margin-bottom: 22px; }
.zz-grupo-titulo {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--zz-ambar-forte); margin: 0 0 10px 2px;
}
.zz-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.zz-cartao {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--zz-cartao); border: 1px solid var(--zz-borda); border-radius: 14px;
  font-family: inherit; color: var(--zz-texto); transition: transform .15s, box-shadow .15s;
}
.zz-cartao:hover { transform: translateY(-2px); box-shadow: 0 6px 16px var(--zz-sombra); }
.zz-cartao:focus-visible { outline: 3px solid var(--zz-ambar); outline-offset: 2px; }
.zz-cartao-topo {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, var(--zz-azul-2) 0%, var(--zz-azul) 100%);
  border-bottom: 3px solid var(--zz-ambar);
}
.zz-cartao-ico {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: var(--zz-ambar);
}
.zz-cartao-nome { font-size: 18px; font-weight: 700; line-height: 1.2; flex: 1; min-width: 0; }
.zz-cartao-alerta {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
  background: #fef3c7; color: #92400e; flex: 0 0 auto;
}
.zz-cartao-corpo { display: flex; flex-direction: column; gap: 8px; padding: 12px 18px 14px; flex: 1; }
.zz-cartao-desc { font-size: 13px; color: var(--zz-texto-2); line-height: 1.35; }
.zz-cartao-entrar { font-size: 13px; font-weight: 700; color: var(--zz-ambar-forte); margin-top: auto; }

/* ── A tela de um departamento SOBE DE BAIXO a partir da página inicial ──
   Não é uma janela por cima (uma rolagem dentro de outra cortava tabela larga e escondia o
   título — lição da Escala, OS_4234): é a própria tela que sobe, com a faixa de cima da
   folha (puxador, nome da tela e ×), e o × volta à página inicial. */
@keyframes zzFolhaSobe { from { transform: translateY(48px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#zz-folha-topo {
  display: none; position: relative; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 14px 52px 10px 14px; border-radius: 16px 16px 0 0;
  background: var(--zz-azul); color: #fff; border-bottom: 3px solid var(--zz-ambar);
}
#zz-folha-topo.zz-ligada { display: flex; animation: zzFolhaSobe .25s ease-out; }
#zz-folha-topo::before {
  content: ''; position: absolute; left: 50%; top: 5px; width: 38px; height: 4px; margin-left: -19px;
  border-radius: 3px; background: rgba(255,255,255,.45);
}
#zz-folha-nome { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; }
#zz-folha-x {
  position: absolute; right: 10px; top: 50%; margin-top: -17px; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12);
  color: #fff; font-size: 21px; line-height: 1; cursor: pointer;
}
.view.zz-sobe { animation: zzFolhaSobe .25s ease-out; }
@media (prefers-reduced-motion: reduce) { #zz-folha-topo.zz-ligada, .view.zz-sobe { animation: none; } }

/* No menu lateral, o item ativo também ganha a cor da marca. */
.nav-btn.active { background: var(--zz-ambar-suave) !important; color: var(--zz-azul) !important; box-shadow: inset 3px 0 0 var(--zz-ambar); }
html[data-tema="escuro"] .nav-btn.active { color: var(--zz-ambar-forte) !important; }
/* OS_4361 — ao tocar em "Buscar" na barra de baixo o cursor ia para o campo do topo, mas
   nada mostrava isso: a borda azul fina some na faixa azul-marinho. Agora o campo ganha um
   anel âmbar grosso (sempre que tiver foco) e, vindo do botão, pisca três vezes. */
#busca-global:focus { outline: none !important; border-color: var(--zz-ambar, #F5A623) !important;
  box-shadow: 0 0 0 3px var(--zz-ambar, #F5A623), 0 0 0 7px rgba(245,166,35,.35); }
#busca-box.zz-busca-chamada #busca-global { animation: zzBuscaPisca .55s ease-in-out 3; }
@keyframes zzBuscaPisca {
  0%, 100% { box-shadow: 0 0 0 3px var(--zz-ambar, #F5A623), 0 0 0 7px rgba(245,166,35,.35); }
  50% { box-shadow: 0 0 0 4px var(--zz-ambar, #F5A623), 0 0 0 14px rgba(245,166,35,.55); }
}
@media (prefers-reduced-motion: reduce) { #busca-box.zz-busca-chamada #busca-global { animation: none; } }