/* Topo, área de tela, barra de abas e áreas seguras (iPhone) */
.appbar {
  position: sticky; top: 0; z-index: 20;
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.appbar.scrolled { border-bottom-color: var(--line); }
/* Faixa com as cores das três companhias, só na paleta "todas". */
.appbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--trio-faixa); opacity: .9; pointer-events: none; }
.appbar-in { max-width: var(--content-max); margin: 0 auto; height: var(--appbar-h); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { --marca-h: 80px; display: flex; align-items: center; gap: 0; text-decoration: none; min-height: var(--touch); padding-right: 4px; border-radius: 12px; min-width: 0; flex: 1 1 auto; }
.brand .marca { height: var(--marca-h); }
/* Nome em duas linhas encaixado na marca: o avião fica sobre o "EM" e o cartão de embarque à esquerda, entre "EMBARQUE" e "CERTO" */
.brand b {
  display: grid; font-size: 17px; line-height: 1.1; font-weight: 800; letter-spacing: .06em; white-space: nowrap;
  margin-left: calc(var(--marca-h) * -.2); margin-top: calc(var(--marca-h) * .16);
}
.appbar-actions { display: flex; gap: 0; flex: none; }
.offline-pill { flex: none; }

.icon-btn {
  width: var(--touch); height: var(--touch); display: grid; place-items: center; border-radius: 999px;
  border: 0; background: transparent; color: var(--text); text-decoration: none; position: relative;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.94); }
.icon-btn[aria-current="page"] { background: var(--surface-2); color: var(--primary); }

.offline-pill {
  display: none; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700;
  background: var(--warn-bg); color: var(--warn-fg); padding: 4px 10px; border-radius: 999px;
}
.is-offline .offline-pill { display: inline-flex; }

#view {
  max-width: var(--content-max); margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right)) calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: grid; gap: 24px; align-content: start; min-height: calc(100vh - var(--appbar-h));
}
#view.enter { animation: enter .26s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Troca de tela em sequência: o conteúdo antigo some rápido (js/app.js, FADE_SAIDA) e o novo entra logo depois, sem sobrepor. */
#view.saindo { opacity: 0; transition: opacity .11s ease-in; }

/* Camada da transição "cartão que expande" (js/lib/transicao.js). Fica abaixo do topo (z 20) e da barra de abas (z 30). */
.transicao-camada { position: fixed; z-index: 10; margin: 0; overflow: hidden; pointer-events: none; border: 1px solid transparent; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--tabbar-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
}
.tabbar-in { position: relative; max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); }
.tabbar a {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 4px 0;
  text-decoration: none; color: var(--text-muted); font-size: min(.6875rem, 11.5px); font-weight: 700; border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  transition: color .2s var(--ease);
}
.tabbar a svg { width: 48px; height: 28px; padding: 2px 12px; border-radius: 999px; transition: background .2s var(--ease); }
.tabbar a[aria-current="page"] { color: var(--primary); }
.tabbar a { position: relative; z-index: 1; }
/* Destaque da aba ativa: uma pílula só, que desliza de uma aba para a outra (js/ui/abas.js). */
.tabbar-pill {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; background: var(--surface-2);
  opacity: 0; pointer-events: none; transition: transform .38s var(--ease), width .38s var(--ease), height .38s var(--ease), opacity .2s;
}
.tabbar a[aria-current="page"] svg { background: transparent; }
/* Paleta "todas": a pílula usa o mesmo degradê tricolor dos cards e do botão "Todas", e o ícone da aba ativa fica branco. */
[data-cia="todas"] .tabbar-pill { background: var(--todas-degrade); }
[data-cia="todas"] .tabbar a[aria-current="page"] svg { color: #FFFFFF; }
/* Durante a troca de abas o conteúdo desliza para o lado; sem isso a página ganharia rolagem horizontal. */
html.em-aba { overflow-x: clip; }

/* Telas em tela cheia (onboarding) escondem topo e abas */
body.fullscreen .appbar, body.fullscreen .tabbar { display: none; }
body.fullscreen #view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); min-height: 100vh; }

/* Cabeçalho de tela interna */
.page-head { display: flex; align-items: center; gap: 8px; margin: 0 -8px; }
.page-head h1 { font-size: 1.5rem; flex: 1; }
.page-head .icon-btn { flex: none; }

.section { display: grid; gap: 12px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

@media (max-width: 359px) {
  .brand b { display: none; }
}
.is-offline .brand b { display: none; }
@media (min-width: 480px) {
  .brand { --marca-h: 84px; }
  .brand b { font-size: 19px; }
  .appbar-actions { gap: 4px; }
}
@media (min-width: 720px) {
  .tabbar a { font-size: min(.75rem, 13px); }
}