/* 360foods, a casca: um cabeçalho só, e a tela do módulo abaixo dele.
   ══════════════════════════════════════════════════════════════════════════
   O problema que ela resolve: hoje cada módulo é uma página inteira, com
   cabeçalho próprio. Navegando entre eles, a marca muda de tamanho, o
   estabelecimento muda de lugar e cada tela abre numa aba nova.

   Aqui o cabeçalho é um só e não recarrega. O que troca é o conteúdo do
   quadro abaixo. O módulo continua sendo a mesma página de sempre; ele só
   deixa de desenhar a identidade, porque a casca já desenhou.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --c-pri:#087f50; --c-pri2:#065f40;
  --c-tx:#19362b; --c-mu:#687b70;
  --c-line:#dfe8e1; --c-bg:#f4f7f4;
  --c-hdr:68px;
  --c-font:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; display:flex; flex-direction:column;
  background:var(--c-bg); color:var(--c-tx); font-family:var(--c-font);
  overflow:hidden;              /* quem rola é o quadro, não a página */
}

/* ── cabeçalho ────────────────────────────────────────────────────────────── */
.casca-hdr{
  flex:0 0 var(--c-hdr); height:var(--c-hdr);
  display:flex; align-items:center; gap:18px; padding:0 20px;
  background:#fff; border-bottom:1px solid var(--c-line);
  position:relative; z-index:10;
}

.casca-marca{
  flex:0 0 auto; display:flex; align-items:center;
  background:none; border:0; padding:4px 6px; margin:0;
  border-radius:9px; cursor:pointer;
}
.casca-marca img{ width:132px; height:auto; display:block }
.casca-marca:hover{ background:#f1f6f2 }

/* ── navegação entre módulos ──────────────────────────────────────────────── */
.casca-nav{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:4px;
  overflow-x:auto; scrollbar-width:none;
}
.casca-nav::-webkit-scrollbar{ display:none }
/* Ricardo (15/09), olhando a barra: *"melhora este menu, maior, tudo
   maiúsculo"*. Era 13px em caixa normal; passa a 15px, caixa alta, peso 700 e
   um pouco de espaço entre letras, que caixa alta pede. Em janela mais
   estreita que 1360px volta a 13px, senão os onze itens não cabem e a barra
   rola escondida. */
.casca-nav button{
  flex:0 0 auto; border:0; background:none; cursor:pointer;
  font:700 15px var(--c-font); color:#3f5849;
  text-transform:uppercase; letter-spacing:.03em;
  padding:10px 14px; border-radius:9px; white-space:nowrap;
}
.casca-nav button:hover{ background:#f1f6f2 }
.casca-nav button[aria-current="page"]{
  background:#e7f3eb; color:var(--c-pri); font-weight:700;
  box-shadow:inset 0 0 0 1px #bcdcc8;
}
/* módulo sem prévia: aparece, diz que não tem, e não finge que abre */
.casca-nav button[data-sem]{ color:#9aa8a0; cursor:default }
.casca-nav button[data-sem]:hover{ background:none }
.casca-nav button[data-sem]::after{
  content:'sem prévia'; margin-left:7px; font-size:9px; font-weight:800;
  letter-spacing:.04em; color:#b3c0b8;
}

/* ── lado direito ─────────────────────────────────────────────────────────── */
.casca-dir{ flex:0 0 auto; display:flex; align-items:center; gap:14px }
.casca-emp{ display:flex; flex-direction:column; line-height:1.15; text-align:right }
.casca-emp .lbl{ font-size:9px; font-weight:700; letter-spacing:.05em;
                 text-transform:uppercase; color:var(--c-mu) }
.casca-emp .nm{ font-size:12px; font-weight:700 }
.casca-user{
  display:flex; align-items:center; gap:8px;
  background:#f8faf9; border:1px solid var(--c-line);
  border-radius:99px; padding:5px 12px 5px 5px;
}
.casca-user .av{
  width:26px; height:26px; border-radius:50%;
  background:#e7f3eb; color:var(--c-pri);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
}
.casca-user .nm{ font-size:12px; font-weight:600 }

/* ── o quadro do módulo ───────────────────────────────────────────────────── */
.casca-palco{ flex:1 1 auto; min-height:0; position:relative; background:var(--c-bg) }
#casca-quadro{
  width:100%; height:100%; border:0; display:block; background:var(--c-bg);
}
.casca-carregando{
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  background:var(--c-bg); color:var(--c-mu);
  font:600 13px var(--c-font);
}
.casca-carregando.on{ display:flex }

/* ── foco visível ─────────────────────────────────────────────────────────── */
.casca-hdr button:focus-visible{
  outline:3px solid var(--c-pri); outline-offset:2px;
}

/* ── telas estreitas ──────────────────────────────────────────────────────── */
@media (max-width:1360px){
  .casca-nav button{ font-size:13px; padding:9px 11px; letter-spacing:.02em }
}
@media (max-width:860px){
  :root{ --c-hdr:56px }
  .casca-hdr{ padding:0 12px; gap:10px }
  .casca-marca img{ width:104px }
  .casca-emp{ display:none }
  .casca-user .nm{ display:none }
  .casca-user{ padding:5px }
  .casca-nav button{ padding:8px 10px; font-size:12px }
  .casca-nav button[data-sem]::after{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .casca-nav button, .casca-marca{ transition:none }
}


/* ── o celular ────────────────────────────────────────────────────────────
   MEDIDO: no desktop a casca gasta 90px (faixa de 26 e cabeçalho de 64), e
   isso é barato numa tela alta. No telefone é caro: com o Garçom aberto, a
   primeira mesa começava a 425px de uma tela de 830.

   Abaixo de 720px o cabeçalho encolhe, os oito botões dão lugar ao seletor, e
   o nome do estabelecimento sai (ele está na tela do módulo quando importa).
   O logotipo fica: é ele que volta para o início. */
.casca-sel{ display:none }

@media (max-width:720px){
  /* MEDIDO: sobrepor `height` com !important não bastava. A altura da barra
     vem da variável `--c-hdr`, usada tanto em `height` quanto no
     `flex-basis`, e o basis continuava segurando os 64px. Redefinir a
     VARIÁVEL resolve os dois de uma vez, e também acerta quem mais depende
     dela (o palco calcula a própria altura a partir daqui). */
  :root{ --c-hdr:46px }
  .casca-hdr{ padding:5px 10px !important; gap:8px !important }
  .casca-nav{ display:none !important }
  .casca-sel{
    display:block; flex:1 1 auto; min-width:0;
    border:1px solid #cfe0d5; border-radius:9px; background:#fff;
    padding:6px 9px; font:600 12.5px inherit; color:#19362b;
  }
  .casca-sel:focus-visible{ outline:3px solid #087f50; outline-offset:1px }
  .casca-marca img{ height:22px !important }
  .casca-emp{ display:none !important }
  .casca-user .nm{ display:none }
}

/* ── a barra ganha cor (15/09) ─────────────────────────────────────────────
   Ricardo: *"na barra coloca uma cor mais forte, que combine com o layout"*.
   A barra passa a ser o verde do 360 — o mesmo dos botões, dos chips ativos e
   do acento de todas as telas —, e o resto do cabeçalho segue: menu em
   branco, item ativo em pílula branca com texto verde, estabelecimento e
   operador em branco.

   O logotipo é azul-marinho e verde sobre branco: sobre o verde o "360"
   desapareceria. Fica numa placa branca, como se usa marca escura em barra
   escura — a marca não muda, o fundo dela é que vem junto. */
/* "pode ser mais claro" (Ricardo, logo depois): um tom acima do verde do
   acento, ainda com o menu em branco. */
.casca-hdr{
  /* e "ainda mais claro": terceiro tom. Abaixo disto o texto branco deixa
     de ler bem; o passo seguinte seria texto verde-escuro sobre fundo claro. */
  background:linear-gradient(90deg, #25b57a 0%, #2fc286 100%);
  border-bottom:1px solid #1a9a66;
}
/* 15/09: com o logotipo Syn360 (contorno branco próprio) a placa branca saiu —
   "tem como o fundo ser PNG, porque ficou branco". A marca fica direto no verde. */
/* e "deixa fundo transparente com a borda branca": moldura fina, como a pílula do operador */
/* "melhora a borda", "mais grossa": 2px branco cheio, cantos mais redondos, respiro maior */
/* "borda nas letras": o contorno vai na FORMA do logotipo, não numa caixa em
   volta. `drop-shadow` segue a transparência do PNG; quatro sombras brancas
   sem deslocamento e sem desfoque fecham um traço de ~2px ao redor das letras.
   A moldura de caixa saiu. */
.casca-marca{ background:transparent; padding:4px 8px; border-radius:10px; border:0 }
.casca-marca img{
  filter:
    drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 0 1px #fff);
}
.casca-marca:hover{ background:rgba(255,255,255,.12) }
.casca-marca img{ width:150px }

.casca-nav button{ color:#fff }
.casca-nav button:hover{ background:rgba(255,255,255,.18); color:#fff }
.casca-nav button[aria-current="page"]{
  background:#fff; color:#0f7d50; box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.casca-nav button[data-sem]{ color:rgba(255,255,255,.45) }
.casca-nav button[data-sem]:hover{ background:none }
.casca-nav button[data-sem]::after{ color:rgba(255,255,255,.5) }

.casca-emp .lbl{ color:rgba(255,255,255,.7) }
.casca-emp .nm{ color:#fff }
.casca-user{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff }
.casca-user .av{ background:#fff; color:var(--c-pri) }
.casca-user .nm{ color:#fff }
.casca-sel{ color:var(--c-tx) }

.casca-hdr button:focus-visible{ outline-color:#fff }

/* ── a engrenagem da Configuração (15/09) ────────────────────────────────── */
.casca-cfg{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14);
  color:#fff; font-size:19px; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.casca-cfg:hover{ background:#fff; color:#0f7d50 }
.casca-foco-btn{ font-size:17px; margin-right:2px }
/* em foco a casca some; o quadro fica com a tela toda */
body.casca-foco .casca-hdr, body.casca-foco > .casca-faixa{ display:none !important }
.casca-cfg[aria-current="page"]{ background:#fff; color:#0f7d50 }

/* ── AVANÇADO ▾ : o botão de grupo e o menu (15/09) ─────────────────────── */
.casca-grupo{ position:relative; flex:0 0 auto }
.casca-grupo-btn .seta{ font-size:11px; margin-left:2px; opacity:.85 }
.casca-grupo.aberto .casca-grupo-btn{ background:rgba(255,255,255,.18) }
.casca-menu{
  display:none; position:fixed; min-width:290px;
  background:#fff; border:1px solid #cfe0d4; border-radius:12px; padding:6px;
  box-shadow:0 14px 34px rgba(24,54,43,.18); z-index:60;
}
.casca-menu.aberto{ display:block }
.casca-menu-item{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer;
  padding:9px 12px; border-radius:9px; font-family:var(--c-font); color:var(--c-tx);
}
.casca-menu-item b{ display:block; font-size:13px; font-weight:700 }
.casca-menu-item small{ display:block; font-size:11px; color:var(--c-mu); margin-top:2px }
.casca-menu-item:hover{ background:#f1f6f2 }
.casca-menu-item[aria-current="page"]{ background:#e7f3eb }
.casca-menu-item[aria-current="page"] b{ color:var(--c-pri) }

/* ── a barra numa janela de 1366 (15/09, Ricardo: "a tela não é responsiva")
   MEDIDO no staging real: com "ESTABELECIMENTO PÉROLA", o e-mail inteiro do
   usuário, Sair, ⛶ e ⚙ à direita, os onze módulos a 15px não cabiam em 1366px
   e FINANCEIRO/RELATÓRIOS/AVANÇADO sumiam atrás da rolagem escondida. A barra
   encolhe em degraus e o bloco da direita cede primeiro: nome com reticências,
   depois só o avatar, depois o rótulo "Estabelecimento". */
.casca-user .nm{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* MEDIDO no real a 1707px: onze módulos a 15px pedem 1186px e sobram 1049 — o
   15px é para monitor largo (≥1900); abaixo disso a barra já encolhe. */
@media (max-width:1900px){
  .casca-nav button{ font-size:13.5px; padding:9px 11px; letter-spacing:.02em }
  .casca-marca img{ width:132px }
  .casca-dir{ gap:10px }
}
@media (max-width:1680px){
  .casca-nav button{ font-size:13px; padding:9px 10px; letter-spacing:.02em }
  .casca-marca img{ width:126px }
  .casca-dir{ gap:10px }
  .casca-user .nm{ max-width:120px }
}
@media (max-width:1560px){
  .casca-nav button{ font-size:12.5px; padding:8px 9px; letter-spacing:.01em }
  .casca-marca img{ width:112px }
  .casca-emp .lbl{ display:none }
}
@media (max-width:1400px){
  .casca-nav button{ font-size:12px; padding:8px 8px }
  .casca-user .nm{ display:none }
  .casca-user{ padding:4px }
  .casca-sair{ margin-left:2px }
}
@media (max-width:1240px){
  .casca-nav button{ font-size:11.5px; padding:7px 7px; letter-spacing:0 }
  .casca-marca img{ width:100px }
  .casca-emp{ display:none }
}

/* app real: botão sair */
.casca-sair{margin-left:8px;background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:7px;padding:4px 9px;font:600 11px var(--c-font);cursor:pointer}
.casca-sair:hover{background:rgba(255,255,255,.15)}

/* 09/10 · módulo sem permissão: continua na barra, com cadeado, e não abre */
.casca-nav button.bloq360,.casca-menu-item.bloq360,#ir-config.bloq360{opacity:.5!important;cursor:not-allowed!important;filter:grayscale(1)}
.casca-nav button.bloq360::before,.casca-menu-item.bloq360 b::before{content:"🔒 ";font-size:.85em}
.casca-nav button.bloq360:hover{background:none!important;border-color:transparent!important}

/* 09/10 · trocar de estabelecimento: o nome vira botão para quem tem mais de uma loja */
.casca-emp.trocavel360{cursor:pointer;border-radius:4px;padding:2px 6px}
.casca-emp.trocavel360:hover{background:rgba(255,255,255,.55)}
.casca-emp .seta360{font-size:10px}
.casca-emp-menu360{position:fixed;z-index:80;display:none;width:280px;max-height:60vh;overflow:auto;background:#fff;border:1px solid #9fbad0;border-radius:4px;box-shadow:0 10px 30px rgba(24,54,77,.25);padding:8px;font:13px 'Segoe UI',Arial,sans-serif;color:#1d3a55}
.casca-emp-menu360.aberto{display:block}
.casca-emp-menu360 .tit360{font-size:11px;font-weight:700;color:#5f7487;margin:2px 4px 8px;text-transform:uppercase;letter-spacing:.05em}
.casca-emp-menu360 .busca360{width:100%;box-sizing:border-box;margin-bottom:6px;padding:7px 9px;border:1px solid #b9cde0;border-radius:3px;font:13px 'Segoe UI',Arial,sans-serif}
.casca-emp-menu360 .item360{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:8px 10px;border:0;border-radius:3px;background:none;text-align:left;cursor:pointer;color:#1d3a55}
.casca-emp-menu360 .item360:hover{background:#eaf2f9}
.casca-emp-menu360 .item360.atual360{background:linear-gradient(#fff7df,#ffe0a0);border:1px solid #c5a45f}
.casca-emp-menu360 .item360 small{color:#5f7487;font-size:11px}
.casca-emp-menu360 .vazio360{padding:10px;color:#5f7487;text-align:center}