/* ============================================================================
   Faixa de AMBIENTE DE TESTE.

   Aparece so' quando o banco conectado e' de teste (nome contendo "_test").
   O objetivo e' que ninguem confunda a tela com producao -- por isso a faixa
   e' fixa no topo, atravessa a largura inteira e nao pode ser fechada.

   Nao mexe na paleta do sistema: e' cromo ACRESCENTADO, em cores que nao
   pertencem a nenhuma marca (grafite + ambar), justamente para nao ser lida
   como parte da interface.

   O arquivo e' identico nas duas pilhas (src/ e src-net/). Ao mexer aqui,
   espelhe -- ha' um md5 conferindo isso na verificacao.
   ========================================================================= */

:root {
  --faixa-teste-h: 24px;
}

.faixa-teste {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--faixa-teste-h);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  box-sizing: border-box;
  padding: 0 .6rem;
  background: #1f2430;
  color: #ffd24a;
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  /* A listra vai na BORDA e nao no fundo: atras do texto ela atrapalharia a
     leitura, e o que precisa ser lido aqui e' o nome do banco. */
  border-bottom: 3px solid transparent;
  border-image: repeating-linear-gradient(135deg, #ffd24a 0 8px, #1f2430 8px 16px) 3;
  user-select: none;
}

.faixa-teste .ft-marca {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.faixa-teste .ft-banco {
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border-radius: 3px;
  padding: .1rem .35rem;
  letter-spacing: .04em;
}

/* O detalhe some antes do essencial quando falta largura. */
.faixa-teste .ft-detalhe { color: #b9c0cf; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 860px) { .faixa-teste .ft-detalhe { display: none; } }
@media (max-width: 520px) { .faixa-teste .ft-sep-2 { display: none; } }

/* ---------------------------------------------------------------------------
   O espaco que a faixa ocupa.

   A classe entra no <body> pelo proprio partial. Quem esta' no fluxo normal
   desce com o padding; quem e' `fixed` ou `sticky` ancora na JANELA e ignora
   o padding -- esses precisam ser deslocados um a um, por area.
   ------------------------------------------------------------------------ */
/* O `!important` nao e' preguica: o tema antigo (Content/css/style.css e o
   login-style.css do Pdv) traz `body { padding: 0 !important }`, e sem empatar
   a arma o deslocamento simplesmente nao acontece -- a faixa cobriria os
   primeiros 24px da tela. */
body.env-teste { padding-top: var(--faixa-teste-h) !important; }

/* Ev v2 -- .sidebar e' fixed em top:0; .topbar e' sticky em top:0. */
body.env-teste.ev-v2 .sidebar,
body.env-teste.ev-v2 .topbar { top: var(--faixa-teste-h); }

/* Painel v2 -- a barra comeca abaixo da topbar de 70px. */
body.env-teste.painel-v2 .topbar { top: var(--faixa-teste-h); }
body.env-teste.painel-v2 #sidebar {
  top: calc(70px + var(--faixa-teste-h));
  height: calc(100vh - 70px - var(--faixa-teste-h));
}

/* Loja -- o menu vira fixo ao rolar (classe posta pelo proprio tema). */
body.env-teste .navbar.sticky-nav,
body.env-teste .header_area.sticky,
body.env-teste .main_menu.sticky { top: var(--faixa-teste-h); }

/* Pdv */
body.env-teste .pdv-topbar,
body.env-teste header.fixed-top { top: var(--faixa-teste-h); }

/* No papel a faixa vai junto: um relatorio impresso do ambiente de teste
   precisa dizer isso na folha. Em fluxo normal, para nao cobrir o conteudo. */
@media print {
  body.env-teste { padding-top: 0; }
  .faixa-teste {
    position: static;
    color: #000;
    background: #ffd24a;
    border-bottom-color: #000;
    border-image: none;
  }
  .faixa-teste .ft-banco { color: #000; background: rgba(0, 0, 0, .12); }
  .faixa-teste .ft-detalhe { color: #333; }
}