/* Faixa de aviso comum a todos os protótipos.
   Altura fixa por largura de tela, exposta em --faixa-total para cada página
   afastar dela os elementos fixos/sticky (cabeçalhos, menus laterais, folhas). */
:root {
  --faixa-h: 36px; /* duas linhas no celular */
  --faixa-total: calc(var(--faixa-h) + env(safe-area-inset-top, 0px));
}
@media (min-width: 720px) {
  :root { --faixa-h: 24px; } /* uma linha */
}

.faixa-aviso {
  position: sticky; top: 0; z-index: 90;
  box-sizing: border-box;
  height: var(--faixa-total);
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 12px 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #2a2a2a; color: #ececec;
  font: 400 11px/14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
}
@media (min-width: 720px) {
  .faixa-aviso { font-size: 12px; line-height: 16px; }
}
@media print {
  .faixa-aviso { position: static; }
}
@media (forced-colors: active) {
  .faixa-aviso { border-bottom: 1px solid CanvasText; }
}