/* =========================================================================
   Layout — onde cada região fica na tela (topo, filtros, legenda, painel)
   ========================================================================= */

/* Topo: marca | busca | ações */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr minmax(260px, 460px) 1fr; align-items: start; gap: 16px;
  padding: 18px 22px; pointer-events: none;
}
.topo > * { pointer-events: auto; }
.acoes { justify-self: end; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* Filtros: canto superior esquerdo */
.filtros { position: fixed; left: 22px; top: 96px; z-index: 4; max-width: 300px; display: grid; gap: 10px; }

/* Legenda: canto inferior esquerdo */
.legenda { position: fixed; left: 22px; bottom: 20px; z-index: 4; }

/* Painel de detalhes: lateral direita */
.painel { position: fixed; top: 82px; right: 18px; bottom: 18px; width: min(420px, calc(100vw - 36px)); z-index: 6; overflow: auto; }

/* Avisos: faixa no rodapé (não bloqueia, some ao abrir o painel) e caixa central (erro) */
body.painel-aberto .faixa { display: none; }
.faixa { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 7; }
.aviso { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; max-width: 460px; }

/* ---------- Telas médias (tablet, notebook pequeno) ---------- */
@media (min-width: 761px) and (max-width: 1180px) {
  .topo { grid-template-columns: 1fr auto; }
  .busca { grid-column: 1 / -1; grid-row: 2; max-width: 520px; }
  .filtros { top: 150px; }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .topo { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
  .acoes { grid-row: 2; justify-self: stretch; justify-content: flex-start; gap: 6px; }
  .busca { grid-row: 3; }
  #btn-atualizar { display: none; }

  .filtros { top: auto; bottom: 12px; left: 12px; right: 12px; max-width: none; }
  .filtros .filtros-linha { display: none; }
  .filtros .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }

  .legenda { display: none; }
  .faixa { bottom: 62px; width: calc(100vw - 24px); }

  .painel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 70vh; border-radius: 18px 18px 0 0; }
}