/* assets/css/impersonation-bar.css
   Faixa de aviso da SESSÃO DE SUPORTE (impersonação) — /parceiro e /driver.
   Regra do dono: quem está acessando a conta de outra pessoa NÃO pode esquecer
   disso. Por isso a faixa é fixa no topo, ocupa a largura toda, tem cor de
   alerta e o z-index mais alto da aplicação — nada a cobre.
   Criada em 11/08/2026 junto com api/impersonate.php. */

:root {
  --imp-bar-h: 46px;
}

.imp-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;                 /* acima de modais, sheets e mapas */
  min-height: var(--imp-bar-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)) 14px;
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
  background: #B42318;                 /* vermelho de alerta, não é cor de marca */
  color: #FFFFFF;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.imp-bar__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD5D2;
  flex: 0 0 auto;
  animation: imp-bar-pulse 1.6s ease-in-out infinite;
}

@keyframes imp-bar-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .imp-bar__dot { animation: none; }
}

.imp-bar__text { max-width: 70ch; }

.imp-bar__name { text-decoration: underline; text-underline-offset: 2px; }

.imp-bar__clock {
  font-variant-numeric: tabular-nums;
  opacity: .9;
  font-weight: 700;
}

.imp-bar__exit {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .85);
  background: #FFFFFF;
  color: #B42318;
  font: inherit;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  flex: 0 0 auto;
}

.imp-bar__exit:hover  { background: #FFE9E7; }
.imp-bar__exit:active { transform: translateY(1px); }
.imp-bar__exit[disabled] { opacity: .6; cursor: default; }

/* ── Deslocamento: UM mecanismo por app, nunca os dois ─────────────────────
   O /parceiro é uma página que rola: empurrar o body é o certo.
   O /driver é um container de tela cheia (#app tem min-height:100dvh e a
   .topbar é absolute DENTRO dele). Empurrar o body ali descia o #app inteiro
   E criava 46px de rolagem numa tela que não deveria rolar — e a .topbar,
   que já tinha descido junto com o pai, ainda ganhava o offset outra vez.
   Por isso a classe por app (impersonation-bar.js). */

html.has-imp-bar.has-imp-bar--merchant body { padding-top: var(--imp-bar-h); }

/* Elementos do painel do lojista que se ancoram no topo por conta própria. */
html.has-imp-bar .desk-sidebar {                  /* sidebar (desktop) */
  top: var(--imp-bar-h);
  height: calc(100% - var(--imp-bar-h));
}

/* Cabeçalho amarelo do /parceiro: position:sticky; top:0; z-index:100.
   Abaixo de 900px a sidebar desktop some e ele vira o ÚNICO cabeçalho — ao
   rolar, grudava em top:0 e ficava inteiro por baixo da faixa, levando junto o
   seletor de loja e os botões do topo. */
html.has-imp-bar .app-header { top: var(--imp-bar-h); }

/* App do motoboy: SÓ a topbar desce (o body não é empurrado — ver acima). */
html.has-imp-bar--driver .topbar {
  top: calc(env(safe-area-inset-top, 0px) + 12px + var(--imp-bar-h));
}

@media (max-width: 480px) {
  :root { --imp-bar-h: 62px; }
  .imp-bar { font-size: 12px; gap: 8px; }
}