/*
 * Mission Control / cockpit aesthetic. Dark default + light variant via
 * data-theme="light". Toggle persistido em localStorage (offvoos.theme).
 *
 * Tipografia: Inter (sans) + JetBrains Mono (dados, KPIs, mono).
 * Paleta: bg #07090c (preto cockpit), accent cyan #38bdf8, green pouso,
 * amber transferido/observação.
 *
 * Princípios mantidos do CLAUDE.md contrato 17:
 *   - Isolamento físico app/public ↔ app/admin
 *   - Whitelist DTO PublicFlightRow
 *   - "Informa, não julga" — sem badges go/no-go
 *   - Sem mensão a fonte interna ("via SITAER", etc)
 */

/* ===== Tokens ============================================== */
:root {
  /* Mission Control — DARK (default) */
  --bg: #07090c;
  --bg-1: #0c1015;
  --bg-2: #11161d;
  --bg-3: #161c25;
  --line: #1c2230;
  --line-2: #2a3142;

  --ink: #e6edf5;
  --ink-2: #9aa6b9;
  --ink-3: #5d6878;

  --cyan: #38bdf8;
  --cyan-2: #0ea5e9;
  --green: #4ade80;
  --green-2: #22c55e;
  --amber: #fbbf24;
  --amber-2: #f59e0b;
  --red: #f87171;

  /* Aliases pra compatibilidade com classes legadas — gradualmente
     reescritas nas waves Voos/Tempo/Padrões. */
  --primary: var(--cyan);
  --primary-2: var(--cyan-2);
  --surface: var(--bg-1);
  --surface-2: var(--bg-2);
  --border: var(--line);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-dim: var(--ink-3);

  --ok-bg: rgba(74, 222, 128, 0.12);
  --ok-fg: var(--green);
  --warn-bg: rgba(251, 191, 36, 0.12);
  --warn-fg: var(--amber);
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-fg: var(--red);
  --info-bg: rgba(56, 189, 248, 0.12);
  --info-fg: var(--cyan);
  --neutral-bg: rgba(154, 166, 185, 0.08);
  --neutral-fg: var(--ink-2);

  --primary-soft: rgba(56, 189, 248, 0.10);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --radius: 4px;
  --radius-sm: 3px;

  --topbar-h: 56px;
  --bottom-nav-h: 60px;

  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Light variant — opcional via toggle */
:root[data-theme="light"] {
  --bg: #f5f7fa;
  --bg-1: #ffffff;
  --bg-2: #eef2f6;
  --bg-3: #e2e8ed;
  --line: #d8dee5;
  --line-2: #b8c2cf;

  --ink: #0c1015;
  --ink-2: #475569;
  --ink-3: #94a3b8;

  --cyan: #0891b2;
  --cyan-2: #0e7490;
  --green: #16a34a;
  --green-2: #15803d;
  --amber: #d97706;
  --amber-2: #b45309;
  --red: #dc2626;

  --primary: var(--cyan);
  --primary-2: var(--cyan-2);
  --surface: var(--bg-1);
  --surface-2: var(--bg-2);
  --border: var(--line);
  --text: var(--ink);
  --text-muted: var(--ink-2);
  --text-dim: var(--ink-3);

  --ok-bg: #d1fae5;
  --ok-fg: #065f46;
  --warn-bg: #fef3c7;
  --warn-fg: #92400e;
  --danger-bg: #fee2e2;
  --danger-fg: #991b1b;
  --info-bg: #dbeafe;
  --info-fg: #075985;
  --neutral-bg: #f1f5f9;
  --neutral-fg: #475569;

  --primary-soft: #cffafe;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }

body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Espaço pro bottom nav no mobile */
  padding-bottom: 0;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.mc-mono { font-family: var(--mono); font-feature-settings: 'tnum'; }
.mc-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ===== Topbar ============================================== */
.mc-topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.mc-topbar-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 0 18px;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 24px;
}

.mc-logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink);
}
.mc-logo:hover { text-decoration: none; }
.mc-logo-mark {
  width: 28px; height: 28px;
  background: var(--bg-2);
  border-radius: 4px;
  display: grid; place-items: center;
  position: relative;
  color: var(--cyan);
  flex-shrink: 0;
}
.mc-logo-mark::before {
  content: ''; position: absolute; inset: 4px;
  background: radial-gradient(circle at 30% 30%, var(--cyan), transparent 70%);
  opacity: 0.5; border-radius: 2px;
}
.mc-logo-mark svg { position: relative; z-index: 1; }
.mc-logo-text {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.mc-logo-text > span { color: var(--cyan); }

.mc-tabs {
  display: flex; gap: 2px;
  margin-left: 8px;
}
.mc-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink-2);
  background: none;
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.mc-tab:hover { color: var(--ink); text-decoration: none; }
.mc-tab.is-active {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--ink);
}

.mc-clock {
  margin-left: auto;
  display: flex; gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.mc-clock-block {
  display: flex; flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  gap: 2px;
}
.mc-clock-block b {
  color: var(--ink);
  font-weight: 500;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mc-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: mc-pulse 1.6s ease-in-out infinite;
}
@keyframes mc-pulse { 50% { opacity: 0.3; } }

.mc-live {
  color: var(--green);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.mc-live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.mc-theme-toggle {
  width: 32px; height: 32px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--ink-2);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color 0.12s, border-color 0.12s;
}
.mc-theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.mc-theme-icon { display: none; }
:root[data-theme="dark"] .mc-theme-moon { display: block; }
:root:not([data-theme="light"]) .mc-theme-moon { display: block; }
:root[data-theme="light"] .mc-theme-sun { display: block; }

/* ===== Main + footer ===================================== */
.mc-main {
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - var(--topbar-h) - 40px);
}

/* Disclaimer banner (Felipe 30/04). Estilo cookie-consent,
   slide-in inferior, dismissable, opt-out via localStorage. */
.mc-disclaimer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--surface-1, rgba(15, 19, 26, 0.98));
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}
.mc-disclaimer.is-visible {
  transform: translateY(0);
}
.mc-disclaimer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mc-disclaimer-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted, #b0bbcc);
}
.mc-disclaimer-text strong {
  color: var(--ink, #f5f7fa);
  font-weight: 600;
}
.mc-disclaimer-text a {
  color: var(--cyan, #38bdf8);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.mc-disclaimer-text a:hover {
  opacity: 0.8;
}
.mc-disclaimer-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.mc-disclaimer-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-muted, #8c98a8);
  cursor: pointer;
  user-select: none;
}
.mc-disclaimer-check input {
  margin: 0;
  accent-color: var(--cyan, #38bdf8);
}
.mc-disclaimer-btn {
  background: var(--cyan, #38bdf8);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mc-disclaimer-btn:hover {
  opacity: 0.85;
}
@media (max-width: 600px) {
  .mc-disclaimer-inner {
    padding: 12px 16px;
    gap: 12px;
  }
  .mc-disclaimer-text {
    font-size: 12px;
  }
  .mc-disclaimer-actions {
    width: 100%;
    justify-content: space-between;
  }
}

/* Página /sobre — disclaimer formal (Felipe 30/04). Tipografia
   confortável de leitura, max-width estreito pra fluência. */
.mc-about {
  max-width: 720px;
  margin: 32px auto 80px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink, #f5f7fa);
}
.mc-about h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.mc-about h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 8px;
  color: var(--ink, #f5f7fa);
  letter-spacing: -0.01em;
}
.mc-about-lede {
  font-size: 17px;
  color: var(--ink-muted, #8c98a8);
  margin: 0 0 8px;
  line-height: 1.55;
}
.mc-about p {
  margin: 0 0 12px;
}
.mc-about code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  padding: 1px 6px;
  border-radius: 4px;
}
.mc-about a {
  color: var(--cyan, #38bdf8);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.mc-about a:hover {
  text-decoration: none;
  opacity: 0.8;
}
.mc-about abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.mc-about-contact {
  font-size: 16px;
  padding: 12px 16px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  border-left: 3px solid var(--cyan, #38bdf8);
  border-radius: 4px;
}
.mc-about-meta {
  font-size: 13px;
  color: var(--ink-muted, #8c98a8);
}
.mc-about-nav {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.mc-about-nav a {
  font-size: 14px;
  color: var(--ink-muted, #8c98a8);
  border-bottom: none;
}
.mc-about-nav a:hover {
  color: var(--ink, #f5f7fa);
}
@media (max-width: 600px) {
  .mc-about {
    font-size: 14px;
    margin: 20px auto 60px;
  }
  .mc-about h1 {
    font-size: 24px;
  }
  .mc-about h2 {
    font-size: 16px;
    margin-top: 24px;
  }
}

/* Guias (/guias, 26/09/2026). Tabela ocupa 100% da coluna e QUEBRA linha
   (contrato 21: sem nowrap em conteúdo variável); o wrapper rola sozinho só
   se um dia uma tabela não couber — a página nunca ganha scroll lateral. */
.mc-guide ul { margin: 0 0 12px; padding-left: 20px; }
.mc-guide li { margin-bottom: 6px; }
.mc-guide-table { overflow-x: auto; margin: 4px 0 16px; }
.mc-guide-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mc-guide-table th,
.mc-guide-table td {
  text-align: left;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  vertical-align: top;
  white-space: normal;
}
.mc-guide-table th { font-weight: 600; font-size: 12.5px; color: var(--ink-muted, #8c98a8); }
.mc-guide-table td:not(:first-child),
.mc-guide-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
/* Tabela de TEXTO (colunas com frase, não número): tudo à esquerda — a regra
   acima alinha à direita pensando em número, e prosa à direita fica ilegível. */
.mc-guide-table.mc-guide-table--text td:not(:first-child),
.mc-guide-table.mc-guide-table--text th:not(:first-child) { text-align: left; font-variant-numeric: normal; }
@media (max-width: 360px) {
  .mc-guide-table.mc-guide-table--text th,
  .mc-guide-table.mc-guide-table--text td { padding-right: 8px; }
}
.mc-guide-method { margin-top: 24px; }
.mc-guide-item h2 a { border-bottom: none; }
/* "Leia também" no fim do guia (03/10/2026) — lista simples, títulos quebram
   linha normalmente (contrato 21). */
.mc-guide-related { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
.mc-guide-related h2 { margin-top: 0; }

/* Página /voos — intro SEO discreto (Felipe 30/04 Google Ads).
   Tipografia menor que o resto pra não competir com tabela. */
/* Header descritivo / SEO — texto presente pra crawlers + leitores
   curiosos, mas discreto visualmente. Tamanho reduzido + cor atenuada
   garantem que conteúdo segue indexável (font-size/color CSS não
   afetam SEO; só hidden/display:none afetariam) sem dominar a tela. */
.mc-page-intro {
  max-width: 760px;
  margin: 12px auto 6px;
  padding: 0 18px;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.5;
}
.mc-page-intro h1 {
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 3px;
  color: var(--ink-2);
  letter-spacing: 0;
}
.mc-page-intro p {
  margin: 0;
}
.mc-page-intro abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
@media (max-width: 720px) {
  .mc-page-intro {
    font-size: 10px;
    margin-top: 10px;
  }
  .mc-page-intro h1 {
    font-size: 12px;
  }
}

/* City hero — identidade visual das páginas /<slug> (Maricá, Macaé etc).
   Diferenciado do `mc-page-intro` (h1 13px) porque a cidade É a página:
   nome em display grande + ICAO em badge mono cyan reforçam que o user
   está vendo voos DAQUELE aeroporto, não o /voos genérico. */
.city-hero {
  max-width: 980px;
  margin: 18px auto 10px;
  padding: 0 18px;
}
.city-hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.city-hero-icao {
  font-family: var(--mono);
  font-feature-settings: 'tnum';
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--cyan);
  padding: 10px 14px;
  border: 1.5px solid var(--cyan);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  line-height: 1;
  white-space: nowrap;
}
.city-hero-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.city-hero-name {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.city-hero-tagline {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.city-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--cyan);
  font-weight: 600;
}
.city-hero-live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* Descrição estática colapsável ("Sobre <cidade>", 29/05). Tira o
   paredão de texto do topo mas mantém o conteúdo no HTML pro Google
   (keywords + profundidade, crítico nos hubs esparsos). Marcador
   nativo do <details>, coerente com .week-units. */
.city-hero-about {
  margin: 12px 0 0;
}
.city-hero-about > summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  user-select: none;
}
.city-hero-about > summary:hover {
  color: var(--cyan);
}
.city-hero-desc {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}
/* Links do hub como pílulas bordadas centralizadas — mesmo look dos
   botões do /tempo/<code> (.back-link). Felipe 29/05: "botões mais
   bonitos e visíveis a exemplo do tempo, centralizados PC + mobile".
   Só os botões centralizam; o resto do header segue à esquerda. */
.city-hero-links {
  margin: 14px 0 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.city-hero-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.city-hero-links a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  text-decoration: none;
}

/* Hubs por origem no /voos — pílulas centralizadas (mesmo look dos
   botões do hub). Bloco próprio fora da intro pra centralizar à
   largura da página. */
.voos-hubs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* margem inferior maior = respiro entre a grade de hubs e a barra de
     troca de dias (Felipe 09/06, dev board). date-nav é sticky no desktop;
     a folga vem deste elemento não-sticky pra não afetar o offset. */
  margin: 10px auto 20px;
  padding: 0 18px;
}
.voos-hubs-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.voos-hubs-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.voos-hubs-list a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.voos-hubs-list a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  text-decoration: none;
}
/* Status REDEMET 🟡/🔴 do aeroporto (só hoje) — ponto colorido antes do
   nome. Cor oficial DECEA via METAR; tooltip (desktop) cita viz/teto. */
.hub-wx {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
  flex: none;
}
.hub-wx--yellow { background: var(--amber); }
.hub-wx--red    { background: var(--red); }

@media (max-width: 720px) {
  .city-hero {
    margin: 12px auto 8px;
    padding: 0 14px;
  }
  .city-hero-head {
    align-items: flex-start;
    gap: 12px;
  }
  .city-hero-icao {
    font-size: 16px;
    padding: 7px 10px;
    border-radius: 6px;
  }
  .city-hero-name {
    font-size: 30px;
    letter-spacing: -0.015em;
  }
  .city-hero-tagline {
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }
  .city-hero-desc {
    font-size: 12px;
    margin-top: 10px;
  }
  .city-hero-links a,
  .voos-hubs-list a {
    font-size: 12px;
    padding: 6px 11px;
  }
}

/* Footer: cross-links pra internal SEO + tagline com keywords. */
.mc-footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 6px;
  font-size: 12px;
  flex-wrap: wrap;
}
.mc-footer-links a {
  color: var(--ink-muted, #8c98a8);
  text-decoration: none;
}
.mc-footer-links a:hover {
  color: var(--ink, #f5f7fa);
  text-decoration: underline;
}
.mc-footer-primary {
  font-size: 12px;
  margin-bottom: 4px;
}
.mc-footer-legal {
  font-size: 11px;
  margin-bottom: 8px;
  opacity: 0.75;
}
.mc-footer-legal a {
  color: var(--ink-3, #6c7689);
}
@media (max-width: 480px) {
  .mc-footer-links {
    gap: 10px;
  }
  .mc-footer-primary { font-size: 11px; }
  .mc-footer-legal { font-size: 10px; }
}
.mc-footer-tagline {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.mc-footer-tagline abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.mc-footer {
  border-top: 1px solid var(--line);
  padding: 14px 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  background: var(--bg-1);
}

/* ===== Bottom nav (mobile) =============================== */
.mc-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--bg);
  border-top: 1px solid var(--line);
  height: var(--bottom-nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mc-bn-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.mc-bn-item.is-active {
  color: var(--cyan);
  border-top-color: var(--cyan);
}
.mc-bn-item:hover { color: var(--ink); text-decoration: none; }

/* ===== Back link ========================================= */
.back-link { padding: 14px 18px 0; }
.back-link a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.back-link a:hover { color: var(--cyan); text-decoration: none; }

/* ===== Container legacy ================================== */
.container {
  max-width: 1400px; margin: 0 auto;
  padding: 18px;
}

/* ===== Date nav ========================================== */
.date-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 6px 0 16px;
  flex-wrap: wrap;
}
.date-nav .nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.date-nav .nav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(56, 189, 248, 0.06);
  text-decoration: none;
}
.date-nav .nav-btn[aria-disabled="true"] { opacity: 0.3; pointer-events: none; }
.date-nav .current {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--mono);
  font-weight: 500;
  padding: 0 8px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.date-nav .current .label {
  font-family: var(--mono);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.date-nav .current .label::before { content: "· "; }
.date-nav .today {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px;
  border: 1px solid var(--cyan);
  border-radius: 8px;
  color: var(--cyan);
  background: transparent;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.date-nav .today:hover { background: rgba(56, 189, 248, 0.1); text-decoration: none; }

/* ===== KPI strip (aba Voos) ============================== */
.mc-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mc-kpi {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mc-kpi:last-child { border-right: 0; }
.mc-kpi-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.mc-kpi-val {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mc-kpi-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-kpi-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
}
.mc-dot-cyan  { background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }
.mc-dot-green { background: var(--green); box-shadow: 0 0 4px var(--green); }
.mc-dot-amber { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.mc-dot-ink   { background: var(--ink-3); }

/* Status REDEMET tag inline (operacional/atenção/restrito) ao lado do emoji */
.mc-kpi-status-tag {
  font-size: 8px;
  letter-spacing: 0.10em;
  color: var(--ink-2);
  margin-left: 2px;
}
/* 4ª linha qualitativa ⚠ no card Tempo agora (amarelo/vermelho) */
.mc-kpi-trigger {
  font-size: 9px;
  letter-spacing: 0.06em;
}
.mc-kpi-trigger-yellow { color: var(--amber); }
.mc-kpi-trigger-red    { color: var(--red); }

/* ===== Toolbar (search + chips) =========================== */
.mc-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  flex-wrap: wrap;
}
.mc-search {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  max-width: 360px;
  color: var(--ink-3);
  transition: border-color 0.12s;
}
.mc-search:focus-within { border-color: var(--cyan); color: var(--cyan); }
.mc-search input {
  flex: 1;
  background: none;
  border: 0;
  color: var(--ink);
  outline: none;
  font: inherit;
  letter-spacing: 0.02em;
}
.mc-search input::placeholder { color: var(--ink-3); }

.mc-chips {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.mc-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink-2);
  cursor: pointer;
  background: none;
  display: inline-flex; align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.mc-chip:hover { color: var(--ink); border-color: var(--ink-3); }
.mc-chip.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.mc-chip-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  display: inline-block;
}

/* Label responsivo do chip 'Transferidos e cancelados' — completo em
   PC, compacto 'Transf. + Canc.' em mobile pra caber no chip apertado. */
.mc-chip-label-compact { display: none; }
.mc-chip-label-full { display: inline; }
@media (max-width: 720px) {
  .mc-chip-label-full { display: none; }
  .mc-chip-label-compact { display: inline; }
}

/* Estado "linha escondida pelo filtro" */
.flight-row.is-hidden { display: none !important; }
.flight-expand.is-hidden { display: none !important; }

/* ===== Tabela voos (legacy — Wave 2 vai reescrever) ======= */
.flights-table {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* overflow: hidden bloqueia position:sticky no thead; usamos clip
     em desktop (que não bloqueia sticky) e voltamos pra hidden no
     mobile (sem sticky lá pra preocupar). */
  overflow: clip;
}
.flights-table table {
  width: 100%;
  border-collapse: collapse;
  /* table-layout: auto (default) — browser distribui pelas
     larguras dos conteúdos. Cols nowrap pegam o min necessário,
     col-route fica fluida no meio sem gap forçado. */
}
/* Shrink-to-fit: width:1% + nowrap faz cada coluna ocupar APENAS o
   conteúdo necessário. col-route precisa width:100% (NÃO auto) pra
   ESTICAR e ocupar o restante — sem isso fica do tamanho do
   conteúdo e gera gap visível entre rota e status (Felipe 04/05).
   Funciona em qualquer viewport sem corte de pílula ou gap. */
.col-time     { width: 1%; white-space: nowrap; }
.col-flight   { width: 1%; white-space: nowrap; }
.col-aircraft { width: 1%; white-space: nowrap; }
.col-route    { width: 100%; }
.col-status   { width: 1%; white-space: nowrap; text-align: right; padding-right: 20px !important; }
.flights-table thead th.col-status { text-align: right; padding-right: 20px; }
.col-route .origin-code { display: none; } /* só ativa no mobile */
.flights-table thead th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-3);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
}
.flights-table tbody tr.flight-row {
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background .1s;
}
.flights-table tbody tr.flight-row:first-child { border-top: 0; }
.flights-table tbody tr.flight-row:hover { background: var(--bg-2); }
.flights-table td { padding: 14px 16px; vertical-align: top; }

.col-time {
  white-space: nowrap;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.col-time .time-main { line-height: 1.1; }
.col-time .time-actual {
  /* Linha 2 (só quando voo decolou): hora real em verde, menor que a
     linha principal pra não competir visualmente com a hora esperada. */
  margin-top: 2px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  color: var(--green, #4ade80);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.col-time .time-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-weight: 400;
}
/* `time-sub` só aparece no mobile — desktop usa col-flight separada */
.mobile-only { display: none; }
.col-flight {
  white-space: nowrap;
  color: var(--ink-3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.col-aircraft { white-space: nowrap; font-family: var(--mono); }
.col-aircraft .reg { color: var(--ink); font-weight: 500; letter-spacing: 0.04em; font-size: 14px; }
.col-aircraft .model { color: var(--ink-3); font-size: 11px; letter-spacing: 0.08em; margin-top: 3px; }
.col-aircraft .company {
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0;
  margin-top: 2px;
  text-transform: none;
}

.col-route { font-size: 14px; }
.col-route .arrow { color: var(--ink-3); margin: 0 6px; }
.col-route .origin { color: var(--ink-2); }
.col-route .dest { color: var(--ink); font-weight: 500; }

.unit-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  margin-right: 8px;
}
.unit-pill .code-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.unit-pill .code {
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.unit-pill .alias { color: var(--ink-3); font-weight: 400; font-size: 13px; }

/* Status pill — desktop tamanho legível (Felipe 29/04) */
.status-pill {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.status-pill.is-airborne   { color: var(--cyan); background: rgba(56, 189, 248, 0.06); }
.status-pill.is-landed     { color: var(--green); background: rgba(74, 222, 128, 0.06); }
.status-pill.is-cancelled,
.status-pill.is-transferred,
.status-pill.is-interrupted { color: var(--amber); background: rgba(251, 191, 36, 0.06); }
.status-pill.is-progress,
.status-pill.is-scheduled  { color: var(--ink-2); background: rgba(154, 166, 185, 0.06); }
.status-pill.is-default    { color: var(--ink-2); background: rgba(154, 166, 185, 0.04); }

/* Hora de quando o status atual passou a valer — 2ª linha abaixo da pill,
   herda a cor da variante correspondente pra leitura visual coerente.
   code 0 (Previsto) nunca aparece aqui — voo nasceu nesse estado, sem
   transição registrada → linha some via {% if %} no template.

   Sem padding-left: a hora começa no mesmo X da borda esquerda da pill
   (não do texto interno) — fica visualmente sob a tag. */
.col-status .status-time {
  margin-top: 3px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.85;
}
/* Pouso por INTERVALO ("antes de HH:MM", Felipe 17/08 — ~4-8% dos pousados
   não têm hora real). `normal` de propósito, não nowrap: em tela estreita
   quebra em duas linhas e o min-content da coluna continua sendo a maior
   PALAVRA ("antes"), não a frase — contrato 21. */
.col-status .status-time--approx { white-space: normal; }
.col-status .status-time.is-airborne   { color: var(--cyan); }
.col-status .status-time.is-landed     { color: var(--green); }
.col-status .status-time.is-cancelled,
.col-status .status-time.is-transferred,
.col-status .status-time.is-interrupted { color: var(--amber); }
.col-status .status-time.is-progress,
.col-status .status-time.is-scheduled  { color: var(--ink-2); }
.col-status .status-time.is-default    { color: var(--ink-2); }

/* Diversão: voo pousou em aeroporto ≠ origem (alternou por meteo etc).
   Cor âmbar — mesma família visual de cancelado/transferido pra sinalizar
   evento atípico sem julgar como ruim (Contrato Inegociável #15: INFORMA,
   não JULGA). Renderiza embaixo do status-time. */
.col-status .arrival-diverted {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.1;
  color: var(--amber);
  opacity: 0.95;
  letter-spacing: -0.01em;
}

/* Timeline do collapse: aeroporto de pouso em destaque âmbar quando
   ≠ origem (diversão). E sufixo "por condições meteorológicas" em
   itálico cinza quando origem estava em REDEMET=red T-1h..T0 do pouso.
   Patch 22/05 tarde — Felipe. */
.timeline-list .timeline-airport-diverted {
  color: var(--amber);
  font-weight: 500;
}
.timeline-list .timeline-diversion-reason {
  font-style: italic;
  opacity: 0.7;
}

/* Expandable row */
.flights-table tbody tr.flight-row.is-expanded { background: rgba(56, 189, 248, 0.04); }
.flights-table tbody tr.flight-expand td {
  background: var(--bg-1);
  padding: 0;
  border-top: 0;
}
.timeline-block {
  padding: 16px 20px;
  border-left: 2px solid var(--cyan);
  background: var(--bg);
  margin: 0 12px 12px 36px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--mono);
}
.timeline-header .hdr-line {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-size: 13px; color: var(--ink);
  margin-bottom: 4px;
}
.timeline-header .hdr-flight { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.timeline-header .hdr-sep { color: var(--ink-3); }
.timeline-header .hdr-meta {
  color: var(--ink-2);
  font-size: 12px;
}
.timeline-header .hdr-meta span {
  display: inline-flex; align-items: center; gap: 4px;
  margin-right: 12px;
}
.timeline-list {
  list-style: none;
  padding: 8px 0 0 0;
  margin: 8px 0 0 0;
  border-top: 1px dashed var(--line);
}
.timeline-list li {
  padding: 4px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: 0.02em;
}
/* Compartilhar este voo (Felipe 29/10) — fim do bloco expandido, fora da
   grade (não infla coluna, contrato 21). Alvo de toque ≥40px no celular. */
.timeline-share {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.tl-share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--green-2); border-radius: var(--radius-sm);
  color: var(--green); background: transparent;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  text-decoration: none; white-space: normal; max-width: 100%;
}
.tl-share-btn:hover, .tl-share-btn:focus-visible { background: rgba(34, 197, 94, 0.08); }
.timeline-empty, .timeline-error {
  padding: 12px 0;
  font-size: 11px; color: var(--ink-3); font-style: italic;
}
.flight-expand .loading {
  padding: 16px 20px; color: var(--ink-3); font-size: 11px;
  font-family: var(--mono);
}

/* ===== Aba Tempo — Mission Control =====================
 * Header com pulse + ATUALIZADO HH:MMZ.
 * Grid de cards 3 colunas (auto-responsivo); cada card: nome
 * grande + código IATA + ícone WMO grande + 3 métricas mono.
 * Hover destaca card. */
.tempo-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  gap: 12px;
  flex-shrink: 0;
}
.tempo-toolbar-status {
  display: flex; align-items: center; gap: 8px;
}
.tempo-toolbar-time {
  font-size: 10px;
  color: var(--green);
  letter-spacing: 0.14em;
  font-weight: 500;
}

.tempo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Sem background-trick aqui — antes usava 'gap: 1px + background:
     var(--line)' pra simular linhas separadoras, mas cell vazia em
     grid não-cheio (11 cards em 3 cols = 1 vaga) mostrava o
     background como retângulo claro. Cards agora têm border próprio. */
  gap: 0;
  background: transparent;
}
.tempo-card {
  background: var(--bg-1);
  padding: 16px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
  min-height: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* Última coluna não tem border-right (3 cols por default) */
.tempo-card:nth-child(3n) { border-right: none; }
/* Última linha (cards) não tem border-bottom — pega só os últimos
   1, 2 ou 3 dependendo de quantos sobraram */
.tempo-card:last-child,
.tempo-card:nth-last-child(2):nth-child(3n+1),
.tempo-card:nth-last-child(3):nth-child(3n+1) { border-bottom: none; }
.tempo-card:hover {
  background: var(--bg-2);
  text-decoration: none;
}
.tempo-card.is-selected {
  background: var(--bg-2);
  outline: 1px solid var(--cyan);
  outline-offset: -1px;
}
.tempo-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.tempo-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.tempo-code {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 4px;
  text-transform: uppercase;
}
.tempo-flights {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cyan);
  margin-top: 3px;
  letter-spacing: 0.04em;
}
.tempo-status {
  display: inline-block;
  margin-right: 4px;
  font-size: 13px;
  vertical-align: middle;
  line-height: 1;
}
.tempo-status-trigger {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.weather-status {
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  vertical-align: middle;
  line-height: 1;
}
.weather-status-trigger {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
  margin-bottom: 0;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.tempo-icon {
  font-size: 32px;
  line-height: 1;
  /* Força fonte emoji colorida pra renderizar chars unicode antigos
     (☀️ ☁️ ⛅️ ⛈️) consistentes em qualquer browser/OS. Sem isso,
     Chrome no Windows/Linux pode escolher fonte system serif/sans
     que renderiza outline preto. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji", system-ui, sans-serif;
}
.tempo-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-family: var(--mono);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.tempo-metric { min-width: 0; }
.tempo-metric .l {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
  font-weight: 500;
}
.tempo-metric .v {
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.tempo-metric .u {
  font-size: 9px;
  color: var(--ink-3);
  margin-left: 2px;
  letter-spacing: 0;
}

/* Compatibilidade com classes legadas (caso outro template use) */
.airport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  padding: 1px;
}
.airport-card {
  display: block;
  background: var(--bg-1);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s;
}
.airport-card:hover { background: var(--bg-2); text-decoration: none; }

/* ===== Page intro / empty ============================== */
.page-intro {
  padding: 14px 18px;
  font-size: 13px; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.page-intro p { margin: 0; }
.legend-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 2px;
  border: 1px solid;
}
.pred-verde { color: var(--cyan); border-color: var(--cyan); background: rgba(56, 189, 248, 0.08); }
.pred-amarelo { color: var(--ink-2); border-color: var(--ink-2); background: rgba(154, 166, 185, 0.08); }
.pred-vermelho { color: var(--ink-3); border-color: var(--ink-3); background: transparent; }

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-3);
}
.empty .icon { font-size: 48px; margin-bottom: 14px; line-height: 1; }

/* ===== Padrões — tabela cockpit ======================== */
.pad-info {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 24px; align-items: center;
  flex-wrap: wrap;
}
.pad-info-item { display: flex; flex-direction: column; gap: 3px; }
.pad-info-item .l {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
}
.pad-info-item .v {
  font-family: var(--mono);
  font-size: 13px; color: var(--ink);
  letter-spacing: 0.02em;
}
.pad-legend {
  margin-left: auto;
  display: flex; gap: 14px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.pad-legend-item {
  display: flex; align-items: center; gap: 5px;
}
.pad-legend-cell {
  width: 22px; height: 14px;
  border: 1px solid var(--line-2);
  display: inline-block;
}

/* Search box pra filtrar unidades — segue padrão do filtro /voos */
.pad-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: sticky;
  /* Gruda logo abaixo da topbar fixa (.mc-topbar sticky top:0 z-50) em
     desktop E mobile. Era top:0 → escondia atrás da topbar quando a página
     rola (no desktop só passou a rolar com o scroll unificado de 08/06). */
  top: var(--topbar-h);
  z-index: 5;
}
.pad-search-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  font-family: inherit;
}
.pad-search-input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15);
}
.pad-search-input::placeholder { color: var(--ink-3); }
.pad-search-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Paleta híbrida — 3/3 firme em verde (sinal forte 'vai acontecer'),
   2/3 frequente em azul/ciano (mantém marca), 1/3 esporádico cinza
   (raro/fantasma). Verde só aparece em chip dentro da tabela/card —
   conflito com bolinhas 🟢🟡🔴 do REDEMET é mínimo (telas diferentes,
   contextos distintos). */
.pad-legend-cell.f3 {
  background: rgba(74, 222, 128, 0.42);  /* verde firme */
  border-color: rgba(74, 222, 128, 0.70);
}
.pad-legend-cell.f2 {
  background: rgba(251, 191, 36, 0.22);  /* amarelo dourado frequente */
  border-color: rgba(251, 191, 36, 0.40);
}
.pad-legend-cell.f1 {
  background: rgba(248, 113, 113, 0.14); /* vermelho coral esporádico */
  border-color: rgba(248, 113, 113, 0.32);
}

.pad-legend-hint {
  margin-left: 6px;
  opacity: 0.65;
  font-size: 10px;
  font-style: italic;
}

.pred-scroll {
  /* Scroll unificado (Felipe 08/06): a PÁGINA inteira rola — uma barra só.
     Antes era `overflow:auto; max-height: calc(100vh - 240px)` (scroll
     interno da tabela), o que, somado ao rodapé abaixo, criava DUAS barras
     verticais (interna da tabela + externa da página até o footer).
     `overflow: visible` deixa o thead e a coluna Unidade grudarem no
     VIEWPORT durante o scroll da página (com overflow:auto isso não
     funciona — o elemento vira container e o thead rola junto). Tabela
     larga em janela estreita transborda → scroll horizontal da página
     (raro em monitor desktop normal; some quando a tabela cabe). */
  overflow: visible;
  border-top: 1px solid var(--line);
  width: 100%;
}
.pred-cal {
  /* sticky requer border-collapse: separate (com collapse, sticky cells
     ficam sem fundo cobrindo o que passa por baixo). Bordas reduzidas
     pra evitar duplicação: só border-bottom/right em cada cell. */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--mono);
  font-size: 11px;
  /* width: max-content garante tabela com largura natural pelo
     conteúdo (não sofre colapso quando filho .pred-scroll é
     overflow:auto). Sem isso, alguns containers parent comprimiam
     a tabela fazendo todas as cols menos a primeira sumirem. */
  width: max-content;
  min-width: 100%;
}
.pred-cal th, .pred-cal td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.pred-cal th:first-child, .pred-cal td:first-child { border-left: 1px solid var(--line); }
.pred-cal thead th { border-top: 1px solid var(--line); }

/* Sticky thead — cola ao rolar a PÁGINA (scroll unificado 08/06). Offset =
   topbar (56px) + barra de busca sticky (~55px) pra parar logo abaixo dela,
   não atrás. Antes era top:0 (colava no topo do container interno da tabela,
   que não existe mais). */
.pred-cal thead th {
  position: sticky;
  top: calc(var(--topbar-h) + 55px);
  z-index: 2;
  background: var(--bg-1);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.pred-cal thead th.pred-day { min-width: 100px; }
.pred-cal thead th:first-child { min-width: 200px; }

/* Sticky primeira coluna — cola à esquerda ao rolar horizontalmente */
.pred-cal tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-1);
  color: var(--ink);
  font-weight: 500;
  min-width: 200px;
}
/* Canto superior-esquerdo (intersect dos 2 sticky) precisa vencer ambos */
.pred-cal thead th:first-child {
  left: 0;
  z-index: 3;
}
.pred-cal tbody tr:hover td { background: var(--bg-2); }
.pred-cal tbody tr:hover td:first-child { background: var(--bg-2); }

.pred-unit .code {
  color: var(--ink);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 500;
}
.pred-unit .alias {
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
  letter-spacing: 0;
}

/* `.pred-cell` é o <td> — não usar display:flex aqui (alguns browsers
   tratam td.flex de forma errática, quebrando o layout da tabela e
   fazendo só a 1ª coluna aparecer). Chips empilham via display:block. */
.pred-cell { /* sem override — mantém display: table-cell default */ }
.pred-chip {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  padding: 1px 0 1px 0;
  font-weight: 500;
  line-height: 1.4;
}
.pred-chip-airport {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-left: 4px;
  opacity: 0.65;
}

/* ===== Mobile collapse (≤720px) — cards expansíveis ===== */
/* Em PC/tablet escondemos a versão mobile; em mobile (rule específica
   abaixo) escondemos a tabela e mostramos os cards. */
.pred-mobile { display: none; }

.pred-mcard {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.pred-mcard[open] { border-color: rgba(56, 189, 248, 0.35); }

.pred-mcard-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.pred-mcard-head::-webkit-details-marker { display: none; }
.pred-mcard-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pred-mcard-name .code {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.pred-mcard-name .alias {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.pred-mcard-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pred-mcard-arrow {
  font-size: 14px;
  color: var(--ink-3);
  transition: transform 0.15s;
}
.pred-mcard[open] .pred-mcard-arrow { transform: rotate(180deg); }

.pred-mcard-body {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.pred-mcard-day {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pred-mcard-wd {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 36px;
  padding-top: 4px;
}
.pred-mcard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.pred-mchip {
  display: inline-flex;
  align-items: baseline;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  background: rgba(154, 166, 185, 0.08);
  border: 1px solid rgba(154, 166, 185, 0.25);
}
.pred-mchip.pred-verde {
  background: rgba(74, 222, 128, 0.30);
  border-color: rgba(74, 222, 128, 0.55);
  color: #4ade80;
  font-weight: 700;
}
.pred-mchip.pred-amarelo {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.32);
  color: #fbbf24;
  font-weight: 500;
}
.pred-mchip.pred-vermelho {
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.25);
  color: #f87171;
  font-weight: 400;
  opacity: 0.85;
  font-style: italic;
}

/* Background da célula por confiança — paleta híbrida.
   Cascata: se há chip pred-verde, célula vira firme (verde); senão
   amarelo → 2/3 (azul). Cor do CHIP segue a classe própria de cada um
   (regras .pred-chip.pred-* abaixo) — célula com mix verde+vermelho
   precisa renderizar cada chip pela sua confiança real, não pintar
   tudo da cor dominante da célula. */
.pred-cal td:has(.pred-verde)   { background: rgba(74, 222, 128, 0.22); }
.pred-cal td:has(.pred-amarelo):not(:has(.pred-verde)) { background: rgba(251, 191, 36, 0.10); }

/* Cor do chip por classe própria — paleta semafórica clássica.
   Antes era verde/cyan/cinza, mas o cinza esporádico (#5d6878) ficava
   indistinguível do fundo verde tênue da célula firme em mix verde+
   vermelho (caso SS75/SS83 quarta reportado por Felipe 06/05). 3 cores
   distintas + saturação decrescente pra hierarquia ficar óbvia. */
.pred-chip.pred-verde    { color: #4ade80; font-weight: 700; }
.pred-chip.pred-amarelo  { color: #fbbf24; font-weight: 500; }
.pred-chip.pred-vermelho { color: #f87171; font-weight: 400; opacity: 0.7; font-style: italic; }

/* ===== Aba Tempo — legacy detail (Wave 3 vai redo) ===== */
.weather-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}
.weather-head { margin-bottom: 0; }
.weather-head .page-title {
  font-family: var(--sans);
  font-size: 18px; font-weight: 600;
  margin: 0; color: var(--ink);
  letter-spacing: -0.01em;
}
.page-sub-inline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
  margin-left: 8px;
  letter-spacing: 0.16em;
}
.weather-head .page-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin: 4px 0 0;
  letter-spacing: 0.04em;
}

.current-banner {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 4px;
  margin-bottom: -4px;
}
.current-banner-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 500;
}
.current-banner-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cyan);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.current-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  padding: 12px 16px;
}
.cg-cell { text-align: center; }
.cg-temp .cg-num { font-size: 26px; }
.cg-num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  display: block;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cg-unit {
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 2px;
  font-weight: 400;
}
.cg-cap {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 4px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
}

.chart-section {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}
.section-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.chart-title-block {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
.day-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.day-nav-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: var(--mono);
  min-width: 130px;
}
.day-nav-btn:hover:not(:disabled) {
  border-color: var(--cyan);
  color: var(--cyan);
}
.day-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.day-nav-arrow {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--cyan);
}
.day-nav-meta {
  display: flex; flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  flex: 1;
}
.day-nav-next .day-nav-meta { align-items: flex-end; }
.day-nav-cap {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}
.day-nav-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
}

.chart-with-markers {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.chart-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  width: 100%;
}
.chart-wrapper canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
.sun-markers-overlay {
  position: relative;
  height: 48px;
  margin-top: 4px;
}
.sun-marker {
  position: absolute;
  bottom: 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  white-space: nowrap;
}
.sun-marker-emoji { font-size: 20px; line-height: 1; }
.sun-marker-cap {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-top: 1px;
}
.sun-marker-time {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sun-rise .sun-marker-time { color: var(--amber); }
.sun-set .sun-marker-time { color: #fb923c; }

.forecast-7d { margin-top: 4px; }
.forecast-7d .section-title { margin-bottom: 8px; }
.daily-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.day-card {
  /* <button> reset (08/06: card vira botão que troca o gráfico) */
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  cursor: pointer;
  color: inherit;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  transition: border-color 0.15s, background 0.15s;
}
.day-card:hover { border-color: var(--cyan); }
.day-card.is-active {
  border-color: var(--cyan);
  background: rgba(56, 189, 248, 0.08);
}
.dc-date {
  font-weight: 500;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.dc-emoji { font-size: 20px; margin: 2px 0; line-height: 1; }
.dc-temp { font-size: 12px; }
.dc-max { font-weight: 600; color: var(--ink); }
.dc-min { color: var(--ink-3); margin-left: 4px; }
.dc-wind, .dc-rain, .dc-prob {
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.weather-foot {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ===== Mobile breakpoints ============================ */
@media (max-width: 1024px) {
  .current-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .mc-clock-date { display: none; }
}

@media (max-width: 768px) {
  body { padding-bottom: var(--bottom-nav-h); }

  /* Topbar mobile compacta — esconde clock UTC, mantém BRT + LIVE */
  .mc-clock { gap: 8px; font-size: 10px; }
  .mc-clock-block:nth-child(2) { display: none; } /* esconde UTC */
  .mc-tabs { display: none; } /* tabs viram bottom nav */
  .mc-bottom-nav { display: flex; }
  .mc-topbar-inner { gap: 12px; padding: 0 14px; }
  .mc-logo-text { font-size: 12px; }
  .mc-theme-toggle { width: 30px; height: 30px; }

  .container { padding: 12px; }

  /* Aba Tempo: grid 2 cols no mobile (3 cols ficam apertadas) */
  .tempo-grid { grid-template-columns: repeat(2, 1fr); }
  .tempo-card { padding: 12px 14px; gap: 10px; }
  .tempo-name { font-size: 14px; }
  .tempo-icon { font-size: 28px; }
  .tempo-metric .v { font-size: 13px; }
  .tempo-toolbar { padding: 8px 14px; }

  /* KPI strip: 6 colunas espremidas em 412px ficam ilegíveis (labels
     colidiam, valores cortados). Vira grid 3×2 — 3 KPIs por linha. */
  .mc-kpis { grid-template-columns: repeat(3, 1fr); }
  .mc-kpi {
    padding: 10px 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .mc-kpi:nth-child(3n) { border-right: 0; }
  .mc-kpi:nth-last-child(-n+3) { border-bottom: 0; }
  .mc-kpi-label { font-size: 8px; letter-spacing: 0.14em; }
  .mc-kpi-val { font-size: 22px; }
  .mc-kpi-sub { font-size: 9px; letter-spacing: 0.02em; }

  /* Toolbar: search bar usa largura cheia, chips na linha de baixo */
  .mc-toolbar { padding: 10px 12px; gap: 8px; }
  .mc-search { max-width: none; flex: 1 1 100%; padding: 6px 10px; font-size: 12px; }
  .mc-chips { flex: 1 1 100%; gap: 5px; }
  .mc-chip { padding: 5px 8px; font-size: 9px; letter-spacing: 0.05em; }

  /* Mobile: tabela com 4 colunas — Hora · Aeronave · Rota · Status.
     Coluna #voo escondida (info no expand). Origem aparece como código
     IATA curto (SBVT) acima dos destinos. */
  .flights-table thead th.col-flight,
  .flights-table tbody td.col-flight { display: none; }
  .flights-table td { padding: 12px 8px; vertical-align: middle; }
  .flights-table thead th { padding: 10px 8px; }

  /* CORTE NUNCA MAIS: rolagem em vez de clip (Felipe 30/08, contrato 21).
     O `overflow: clip` do wrapper (base, linha ~1057) cortava em SILÊNCIO
     o que não coubesse — e o que não cabe é sempre a ÚLTIMA coluna, o
     STATUS, que é a informação pela qual a pessoa abre o site. Medido ao
     vivo em 30/08 (CDP, 183 linhas, fonte real): min-content da tabela =
     353px, então a 320px sobrava 33px de STATUS comido sem nenhum aviso;
     a 360px a folga era de só 7px — qualquer conteúdo novo (badge, label
     mais longo, bloco de anúncio in-page) reabria o corte, como já houve
     em 22/06 (badge 🆕 inflou a HORA e derrubou o STATUS).
     Agora: o WRAPPER rola no eixo X e a tabela não encolhe abaixo do seu
     min-content — a informação fica alcançável em vez de sumir. A PÁGINA
     nunca ganha scroll lateral (medido: overflow da página = 0 em 320 e
     360); só a tabela rola, e só quando precisa (a 360px o scroll é 0).
     `overflow-y: clip` preserva o comportamento vertical; thead não é
     sticky no mobile (medido: position static), então nada quebra. */
  /* REVERTIDO 30/08 (flagrante do Felipe, print do /jacarepagua): o
     `overflow-x: auto` transformava o wrapper em SCROLL CONTAINER e o
     `thead` sticky passou a se ancorar NELE — o cabeçalho descolava e
     flutuava no meio da tabela, sobrepondo a 2ª linha. Minha verificação
     de "thead position: static" foi feita no /voos com CDP e NÃO
     representou o aparelho real do Felipe (Chrome Android no hub) —
     lição: medir a MESMA página e, quando houver sticky no jogo, medir
     com rolagem vertical de verdade, não só larguras.
     Volta ao `overflow: clip` da base (o corte silencioso do STATUS a
     320px volta a existir — problema conhecido, tratado em outra
     iteração SEM tocar no sticky). */

  /* Slot de anúncio nunca mais largo que a tela (30/08). O `position:
     sticky` que acompanhava esta regra saiu junto com a reversão acima —
     só fazia sentido dentro de contêiner rolável, e sticky é justamente
     o que quebrou o cabeçalho. `max-width` é inócuo e útil: impede o
     slot de herdar largura maior que o viewport. Display-only. */
  .ad-slot { max-width: 100vw; }

  /* Status mobile alinhado à ESQUERDA (Felipe 04/05): pílula
     encosta na col-route, sai da borda direita da viewport. Resolve
     percepção de corte em iPhones reais (sub-pixel rendering encostava
     pílula 5px da borda; agora sobra 10-15px de ar à direita).
     min-width:100px continua defendendo contra col-route invadir. */
  .col-status {
    min-width: 100px;
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 4px !important;
    /* Felipe 22/06: libera quebra de linha (a base é nowrap) — sem isso
       labels longos ('Parcialmente Atendido' 21ch, 'Check In Concluído'
       18ch) eram CORTADOS na borda direita pelo overflow:clip da tabela
       em telas estreitas. Ver .status-pill abaixo. */
    white-space: normal;
  }
  .flights-table thead th.col-status {
    min-width: 100px;
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 4px;
  }
  /* col-route quebra palavras agressivamente em mobile pra liberar
     espaço pras cols vizinhas. 'Jacarepaguá' + 'Plataforma' não
     cortam outras cols. */
  .col-route {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mobile-only  { display: block; }

  /* Status pill compacto em mobile. Labels curtos de 1 palavra
     ('DECOLAGEM', 'TRANSFERIDO', 'POUSO') ficam em 1 linha; os longos
     de 2+ palavras ('Check In Concluído', 'Parcialmente Atendido',
     'Esperando Embarque') QUEBRAM em 2 linhas em vez de serem cortados
     (Felipe 22/06, Opção A). `white-space: normal` quebra só no espaço —
     NÃO uso `overflow-wrap: anywhere` de propósito, pra não fatiar
     palavra única feio ('ACIONAMEN/TO'). A pílula cresce em ALTURA, não
     largura, e a 2ª linha cabe na altura que a coluna AERONAVE/HORA já
     impõe (medido: linha não engrossa; só rota composta engrossa). */
  .status-pill {
    padding: 4px 6px;
    font-size: 10px;
    letter-spacing: 0.03em;
    white-space: normal;
    /* Felipe 22/06: centraliza o texto DENTRO da pílula quando quebra em
       2 linhas (a 2ª linha mais curta — 'EMBARQUE' sob 'ESPERANDO' — não
       fica mais encostada à esquerda). A pílula segue à esquerda na coluna
       (`col-status` text-align:left, fix 04/05); isto centraliza só o
       conteúdo interno. `justify-content` é o eixo do inline-flex. */
    text-align: center;
    justify-content: center;
  }

  /* Layout vertical da rota: origem (nome do aeroporto) acima do destino */
  /* font-size 11px (era 12) pra caber palavras longas tipo
     'Jacarepaguá' em mobile sem quebrar feio quando col-route
     é comprimida pelo shrink-to-fit das outras cols. */
  .col-route { font-size: 11px; line-height: 1.4; }
  .col-route .route-line { display: flex; flex-direction: column; gap: 2px; }
  .col-route .origin {
    display: inline-block;
    color: var(--ink-2);
    font-size: 12px;
    line-height: 1.2;
    /* `overflow-wrap: break-word` (moderno) só quebra se a palavra não
       couber. `word-break: break-word` (legado) quebrava no meio até
       quando havia espaço — gerava "Jacarepag\nuá" feio. */
    overflow-wrap: break-word;
    word-break: normal;
  }
  .col-route .origin-code { display: none; } /* desktop usa nome; mobile também */
  .col-route .arrow { display: none; } /* seta omitida — ordem vertical indica direção */
  .unit-pill { display: block; margin: 0; }
  .unit-pill .code {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
  }
  .unit-pill .alias {
    display: block;
    font-size: 10px;
    margin-top: 1px;
    line-height: 1.3;
  }

  .col-aircraft { font-size: 12px; }
  .col-aircraft .reg { font-size: 13px; }
  .col-aircraft .model { display: block; font-size: 10px; margin-top: 2px; }
  .col-aircraft .company { font-size: 10px; margin-top: 1px; }

  .col-time { font-size: 15px; }
  /* Felipe 22/06: a linha do badge 🆕 ("🆕 adicionado HH:MM", commit
     7337935 de 10/06) era nowrap (herdado de .col-time) e ~134px de
     largura. Como largura de coluna de tabela é UNIFORME (= a célula
     mais larga), bastavam 1-2 voos intraday pra inflar a HORA de ~86px
     pra ~150px em TODAS as linhas → min-content da tabela 360→424px →
     transbordava o viewport e o overflow:clip cortava o STATUS (regressão
     do fix de corte de 04/05). `white-space: normal` deixa o badge
     quebrar (vira 2 linhas só nas poucas linhas com badge); o número do
     voo (sem espaços) NÃO quebra. Restaura a HORA pra ~86px. Ver
     contrato 21 (largura uniforme de coluna). */
  .col-time .time-sub { white-space: normal; }
  /* .status-pill mobile: regra única em linha 1839 (padding 4px 6px,
     font 10px, lspacing 0.03em). Antes havia regra duplicada aqui que
     vencia por ordem de cascata e estourava 100px no iPhone — Felipe
     04/05. */
  .timeline-block { margin: 0 0 8px 0; padding: 12px 14px; }

  .pad-info { gap: 12px; padding: 12px 14px; }
  .pad-legend { width: 100%; margin-left: 0; gap: 10px; flex-wrap: wrap; }
  /* Mobile: troca tabela full por cards expansíveis (1 por unidade).
     Tabela com 8 colunas + sticky vira difícil de usar em <720px;
     cards mostram 7 dias dentro do <details> de cada unit. */
  .pred-scroll { display: none; }
  .pred-mobile { display: block; }

  /* Freeze panel mobile: quando o card está aberto e o user rola pra
     ver os 7 dias, o header (NS54 · 8 horários · ▾) cola no topo da
     viewport até o final do card sair da tela. Ajuda a manter contexto
     "qual unidade estou olhando" em listas longas de chips. */
  .pred-mcard[open] .pred-mcard-head {
    position: sticky;
    top: 0;
    z-index: 4;
    background: var(--bg-1);
    /* Border-bottom sutil pra dar separação visual do conteúdo
       que rola por baixo */
    border-bottom: 1px solid var(--line);
  }
  /* Search box mobile fica acima do header de card sticky (.pred-mcard-head,
     z-4) — só precisa do z-index maior; o `top: var(--topbar-h)` vem da
     regra base (unificado em 08/06 pra desktop também). */
  .pad-search { z-index: 6; }

  .daily-grid { grid-template-columns: repeat(3, 1fr); }
  .chart-wrapper { min-height: 260px; }
  .day-nav-btn { min-width: 0; padding: 6px 10px; }
  .day-nav-cap { display: none; }
}

@media (max-width: 480px) {
  .mc-topbar-inner { padding: 0 12px; gap: 8px; }
  .mc-clock-block:first-child { display: none; } /* esconde pulse + restante */
  /* Mantém só LIVE + theme toggle no header mobile compacto */

  /* Aba Tempo em telas muito pequenas: 1 card por linha */
  .tempo-grid { grid-template-columns: 1fr; }

  /* KPI grid 2×3 em telas muito pequenas (~360px) — 3 colunas
     ficam apertadas e "TRANSFERIDOS" cortaria. */
  .mc-kpis { grid-template-columns: repeat(2, 1fr); }
  .mc-kpi:nth-child(3n) { border-right: 1px solid var(--line); }
  .mc-kpi:nth-child(2n) { border-right: 0; }
  .mc-kpi:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .mc-kpi:nth-last-child(-n+2) { border-bottom: 0; }
  .mc-kpi-val { font-size: 20px; }
}

/* Modal de aviso (Felipe 01/05). Popup central com backdrop na 1ª
   visita. Substituiu o banner inferior anterior. */
.mc-aviso-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.mc-aviso-overlay[hidden] {
  display: none;
}
.mc-aviso-overlay.is-visible {
  opacity: 1;
}
.mc-aviso-modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 24px;
  color: var(--ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.5;
}
.mc-aviso-title {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--ink);
  font-weight: 600;
}
.mc-aviso-modal p {
  margin: 0 0 8px;
  color: var(--ink-2);
}
.mc-aviso-modal p strong {
  color: var(--ink);
}
.mc-aviso-section-title {
  margin-top: 14px !important;
  margin-bottom: 4px !important;
  color: var(--ink) !important;
}
.mc-aviso-list {
  margin: 6px 0 12px;
  padding-left: 20px;
  color: var(--ink-2);
}
.mc-aviso-list li {
  margin-bottom: 4px;
}
.mc-aviso-list strong {
  color: var(--ink);
}
.mc-aviso-modal a {
  color: var(--cyan, #38bdf8);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.mc-aviso-modal a:hover {
  opacity: 0.8;
}
.mc-aviso-modal a.mc-aviso-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 4px;
  padding: 7px 14px;
  background: transparent;
  color: var(--cyan, #38bdf8);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--cyan, #38bdf8);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.mc-aviso-modal a.mc-aviso-cta svg {
  flex-shrink: 0;
}
.mc-aviso-modal a.mc-aviso-cta:hover {
  background: var(--primary-soft, rgba(56, 189, 248, 0.10));
  opacity: 1;
}
.mc-aviso-cta-sub {
  margin: 0 0 14px !important;
  font-size: 12px !important;
  color: var(--ink-3) !important;
  text-align: left;
}
.mc-aviso-meta {
  font-size: 12px !important;
  color: var(--ink-3) !important;
  margin-top: 14px !important;
}
.mc-aviso-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mc-aviso-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.mc-aviso-check input {
  margin: 0;
  accent-color: var(--cyan, #38bdf8);
}
.mc-aviso-btn {
  background: var(--cyan, #38bdf8);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.mc-aviso-btn:hover {
  background: var(--cyan-2, #0ea5e9);
}
@media (max-width: 480px) {
  .mc-aviso-modal {
    padding: 16px 18px;
    font-size: 13px;
  }
  .mc-aviso-title {
    font-size: 16px;
  }
  .mc-aviso-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mc-aviso-btn {
    width: 100%;
  }
}

/* ===========================================================
   Freeze panel — desktop only (>= 720px)
   ===========================================================
   Felipe 01/05 — quando user scrolla pra baixo na lista de voos,
   header descritivo + date-nav + KPIs + toolbar + linha de colunas
   da tabela ficam fixos no topo (abaixo da topbar). Permite navegar
   voos sem perder contexto (data, filtros, totais).

   Mobile NÃO usa freeze (já tem topbar+bottom-nav fixos; mais
   sticky comeria viewport). Cada elemento recebe position:sticky
   individualmente; o `top` cumulativo é setado por JS pra cada
   um colar embaixo do anterior. Background opaco em todos pra
   esconder o conteúdo que passa por baixo. */
/* ── Freeze panel ─────────────────────────────────────────────────
   Felipe 01/05 — comportamento balanceado por breakpoint:

   Mobile (<720px): só toolbar (search + chips) + thead grudam no
   topo ao rolar. KPIs e date-nav rolam normalmente — economiza
   viewport em telas pequenas. KPIs voltam a aparecer quando user
   rola de volta pra cima (não estão "perdidos", só fora do topo
   travado).

   Desktop (>=720px): adiciona header SEO + date-nav + KPIs ao
   sticky stack. Espaço sobra pra acomodar todo o resumo no topo.

   Full-bleed via box-shadow + clip-path pra background cobrir as
   laterais durante scroll. */
#voos-live > .mc-toolbar,
#voos-live .flights-table thead {
  position: sticky;
  background: var(--bg-1);
  z-index: 5;
  box-shadow: 0 0 0 100vmax var(--bg-1);
  clip-path: inset(0 -100vmax);
}
#voos-live > .mc-toolbar { z-index: 6; }
#voos-live .flights-table thead { z-index: 5; }

@media (min-width: 720px) {
  /* `.mc-page-intro` saiu da pilha sticky (06/06) — o intro do /voos
     (H1 + "Sobre offvoos" colapsável) agora rola e some ao scroll, igual
     ao `.city-hero` dos hubs de aeroporto. date-nav + KPIs continuam
     grudando no topo. O voos.js (updateStickyTops) pula quem não é sticky,
     então a date-nav vira o 1º da pilha automaticamente — sem mudança JS. */
  .date-nav,
  #voos-live > .mc-kpis {
    position: sticky;
    background: var(--bg);
    z-index: 7;
    box-shadow: 0 0 0 100vmax var(--bg);
    clip-path: inset(0 -100vmax);
  }
  #voos-live > .mc-kpis {
    background: var(--bg-1);
    box-shadow: 0 0 0 100vmax var(--bg-1);
  }
  .date-nav          { z-index: 8; }
  #voos-live > .mc-kpis    { z-index: 7; }
}

/* ── Página /telegram ───────────────────────────────────────────────
   Landing pra o bot offshore. Mobile-first: QR escondido (user já
   está no celular, não serve), botão grande. Desktop: QR visível
   ao lado pra escanear com outro device.

   Cores Telegram (#229ED9 primário) misturadas com paleta do site
   pra coerência. Estrutura compatível com tema dark/light. */

.mc-tg {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 80px;
  color: var(--fg);
}

.mc-tg-hero {
  text-align: center;
  padding: 16px 0 24px;
}
.mc-tg-hero-icon {
  display: inline-flex;
  margin-bottom: 12px;
}
.mc-tg-title {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.mc-tg-unit-mark {
  color: #229ED9;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95em;
  background: rgba(34, 158, 217, 0.12);
  padding: 2px 10px;
  border-radius: 6px;
}
.mc-tg-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-2, var(--fg));
  opacity: 0.85;
  margin: 0 auto;
  max-width: 540px;
}

.mc-tg-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 24px 0 40px;
  padding: 24px 16px;
  background: var(--bg-1, rgba(255,255,255,0.03));
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
}

.mc-tg-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #229ED9;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  min-height: 48px;
  min-width: 240px;
  transition: background 0.15s, transform 0.05s;
  box-shadow: 0 2px 12px rgba(34, 158, 217, 0.3);
}
.mc-tg-btn-primary:hover { background: #1a8bc0; }
.mc-tg-btn-primary:active { transform: translateY(1px); }

.mc-tg-qr-wrap { display: none; }
.mc-tg-qr-card { text-align: center; max-width: 220px; }
.mc-tg-qr-svg {
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  width: 180px;
  height: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mc-tg-qr-svg svg { width: 100%; height: 100%; display: block; }
.mc-tg-qr-cap {
  font-size: 13px;
  color: var(--fg-2, var(--fg));
  opacity: 0.85;
  margin: 10px 0 0;
  line-height: 1.4;
}

@media (min-width: 720px) {
  .mc-tg-cta-row {
    flex-direction: row;
    justify-content: center;
    gap: 36px;
    padding: 28px 24px;
  }
  .mc-tg-qr-wrap { display: block; }
}

.mc-tg-h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}

.mc-tg-explainer,
.mc-tg-demo,
.mc-tg-steps,
.mc-tg-faq { margin: 0 0 36px; }

.mc-tg-explainer p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}
.mc-tg-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.mc-tg-bullets li {
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 0 8px 26px;
  position: relative;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}
.mc-tg-bullets li:first-child { border-top: none; }
.mc-tg-bullets li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 8px;
  color: #229ED9;
  font-weight: 700;
}

/* "Ainda não tem Telegram?" — botão pré-filtrado por device do user
   (detecção User-Agent em routes/telegram.py). Visual menos chamativo
   que o CTA principal (.mc-tg-btn-primary) pra não competir, mas
   claramente clicável e identificável como "instalação". */
.mc-tg-install {
  margin: 0 0 36px;
  padding: 20px 16px;
  background: var(--bg-1, rgba(255,255,255,0.03));
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
  text-align: center;
}
.mc-tg-install .mc-tg-h2 { text-align: center; }
.mc-tg-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: var(--bg, #fff);
  color: var(--fg);
  border: 1px solid rgba(34, 158, 217, 0.4);
  border-radius: 10px;
  text-decoration: none;
  min-height: 56px;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.mc-tg-install-btn:hover {
  background: rgba(34, 158, 217, 0.08);
  border-color: rgba(34, 158, 217, 0.7);
}
.mc-tg-install-btn:active { transform: translateY(1px); }
.mc-tg-install-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.mc-tg-install-btn strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 2px;
}
.mc-tg-install-sub {
  display: block;
  font-size: 12px;
  color: var(--fg-2, var(--fg));
  opacity: 0.7;
  line-height: 1.2;
}
.mc-tg-install-alt {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--fg-2, var(--fg));
  opacity: 0.85;
  line-height: 1.5;
}
.mc-tg-install-alt a {
  color: #229ED9;
  font-weight: 500;
  text-decoration: none;
}
.mc-tg-install-alt a:hover { text-decoration: underline; }

.mc-tg-chat {
  background: var(--bg-1, rgba(255,255,255,0.03));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.mc-tg-msg {
  background: var(--bg, #fff);
  border-radius: 10px 10px 10px 2px;
  padding: 8px 12px;
  max-width: 92%;
  align-self: flex-start;
  border: 1px solid var(--border, rgba(255,255,255,0.05));
  font-size: 14px;
  line-height: 1.4;
}
.mc-tg-msg-author {
  font-size: 12px;
  color: #229ED9;
  font-weight: 600;
  margin-bottom: 2px;
}
.mc-tg-msg-body { color: var(--fg); }
.mc-tg-msg-time {
  font-size: 11px;
  color: var(--fg-2, var(--fg));
  opacity: 0.65;
  text-align: right;
  margin-top: 4px;
}
.mc-tg-demo-foot {
  font-size: 13px;
  color: var(--fg-2, var(--fg));
  opacity: 0.75;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

.mc-tg-steps-list {
  padding-left: 0;
  list-style: none;
  counter-reset: tg-step;
}
.mc-tg-steps-list li {
  position: relative;
  padding: 12px 12px 12px 48px;
  margin-bottom: 8px;
  background: var(--bg-1, rgba(255,255,255,0.03));
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  counter-increment: tg-step;
}
.mc-tg-steps-list li::before {
  content: counter(tg-step);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: #229ED9;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.mc-tg-faq details {
  border-top: 1px solid var(--border, rgba(255,255,255,0.07));
  padding: 12px 0;
}
.mc-tg-faq details:last-child {
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.mc-tg-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  padding: 6px 8px;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.mc-tg-faq summary::-webkit-details-marker { display: none; }
.mc-tg-faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: #229ED9;
  transition: transform 0.15s;
}
.mc-tg-faq details[open] summary::after { content: "−"; }
.mc-tg-faq details p {
  margin: 8px 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2, var(--fg));
  opacity: 0.92;
}

.mc-tg-back {
  text-align: center;
  margin-top: 36px;
  font-size: 14px;
}
.mc-tg-back a {
  color: var(--fg-2, var(--fg));
  opacity: 0.7;
  text-decoration: none;
}
.mc-tg-back a:hover { opacity: 1; text-decoration: underline; }

/* ── CTA inline 📲 na tabela de voos ────────────────────────────────
   Botão visivelmente clicável ao lado de cada pílula de unidade —
   cor Telegram já em repouso + fundo + borda sutis = leitura
   imediata "isso é botão". Hover intensifica. Link pra
   /telegram?unit=<CODE>. */
.unit-pill { position: relative; }
.unit-tg-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 6px;
  color: #229ED9;
  background: rgba(34, 158, 217, 0.14);
  border: 1px solid rgba(34, 158, 217, 0.32);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  vertical-align: middle;
}
.unit-tg-cta:hover {
  background: rgba(34, 158, 217, 0.28);
  border-color: rgba(34, 158, 217, 0.6);
}
.unit-tg-cta:active { transform: translateY(1px); }
.unit-tg-cta svg { width: 14px; height: 14px; }

/* Link "Saiba mais sobre o bot" no footer */
.mc-footer-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #229ED9;
  text-decoration: none;
  font-weight: 500;
}
.mc-footer-tg:hover { text-decoration: underline; }

/* Tab "Telegram" no header — cor própria pra diferenciar de tabs
   principais (não compete visualmente, mas é reconhecível). */
.mc-tab.mc-tab-tg {
  color: #229ED9;
}
.mc-tab.mc-tab-tg:hover {
  background: rgba(34, 158, 217, 0.1);
}
.mc-tab.mc-tab-tg.is-active {
  color: #fff;
  background: #229ED9;
}

/* Item Telegram no bottom-nav mobile — mesma diferenciação */
.mc-bn-item.mc-bn-tg {
  color: #229ED9;
}
.mc-bn-item.mc-bn-tg.is-active {
  color: #fff;
  background: rgba(34, 158, 217, 0.18);
}

/* ─── Bases próximas (city.html, 28/05) ──────────────────────────
 * Bloco de internal linking entre hubs vizinhos da mesma região.
 * Destrava indexação no GSC e UX permite descoberta de cidades
 * próximas que o user pode também consultar.
 * Estilo: card visual coerente com .mc-kpi (mesma família visual). */
/* ─── Resumo da semana (M1, 29/05) ───────────────────────────────────
 * Bloco de conteúdo único por hub acima da tabela. Tokens espelham
 * .city-neighbors / .city-hero. */
.week-summary {
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.week-summary-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 10px;
}
.week-summary-range {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.week-summary-lead {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.week-summary-block {
  margin-top: 12px;
}
.week-summary-h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 6px;
}
.week-summary-sub {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.week-aircraft {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}
.week-aircraft strong {
  color: var(--cyan);
}
.week-model {
  white-space: nowrap;
}
.week-units > summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  padding: 2px 0;
  user-select: none;
}
.week-units > summary:hover {
  color: var(--cyan);
}
.week-units-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 0 0;
  margin: 0;
}
.week-units-list li {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2, var(--bg-2));
  color: var(--ink-muted);
}
.week-units-inline {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0;
}

.city-neighbors {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.city-neighbors-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.city-neighbors-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.city-neighbors-item {
  margin: 0;
}
.city-neighbors-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.city-neighbors-link:hover {
  border-color: var(--cyan);
  background: var(--surface-hover, var(--surface));
  text-decoration: none;
}
.city-neighbors-name {
  font-size: 15px;
}
.city-neighbors-code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ─── Back-link reformulado em tempo_detail.html (28/05) ──────────
 * Antes: 2 links texto puros com inline style margin-left. Agora:
 * bloco com chips, visualmente coerente com .city-neighbors. Link
 * pro hub mantém o destaque (texto âncora "Voos offshore de X"). */
.back-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}
.back-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.back-link a:hover {
  border-color: var(--cyan);
  text-decoration: none;
}
.back-link a.back-link-hub {
  font-weight: 600;
  color: var(--cyan);
}
/* Texto responsivo dos chips (Opção B, 08/06): no PC mostra a versão
   cheia; .bl-short só aparece no mobile (ver @media abaixo). */
.back-link .bl-short { display: none; }

/* Mobile: chips do .back-link menores + texto curto, pra os 2 caberem
   numa linha só em vez de empilhar gordos (Felipe 08/06). PC intocado. */
@media (max-width: 720px) {
  .back-link { gap: 6px; margin: 0 0 12px; }
  .back-link a {
    font-size: 11px;
    padding: 4px 10px;
    gap: 4px;
    letter-spacing: 0.03em;
  }
  .back-link .bl-full { display: none; }
  .back-link .bl-short { display: inline; }
}

/* ── Ad in-feed (patrocinado) ──────────────────────────────────────
   Slot patrocinado injetado client-side (voos.js). NÃO é flight-row →
   fora dos KPIs/filtros/contagem de voos (contrato dos ads). Tamanho de
   um voo colapsado; clica → "dobra". Contrato 21: full-width via colspan,
   white-space normal (nunca nowrap de largura variável), testado em 360px. */
.ad-row { cursor: pointer; }
.ad-row > td { padding: 0 !important; }

.ad-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  box-sizing: border-box;
  transition: background 0.12s ease;
}
/* min-height casa com a altura de um slot de voo (Felipe 26/06: estava menor) */
.ad-slot--collapsed { min-height: 84px; position: relative; }
.ad-row:hover .ad-slot--collapsed { background: rgba(56, 189, 248, 0.16); }

/* Variante com ACENTO (teste A/B, Felipe 01/08): um degrau acima do acento
   base do slot (border-left primary + primary-soft) — gradiente mais vivo à
   esquerda + manchete semibold. SÓ cor/peso de fonte: nenhuma dimensão muda
   (contrato 21). */
.ad-slot--collapsed.ad-accent {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.05) 70%);
  border-left-color: var(--primary-2);
}
.ad-slot--collapsed.ad-accent .ad-headline { font-weight: 600; }
.ad-row:hover .ad-slot--collapsed.ad-accent {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.08) 70%);
}

/* Microanimação da variante (toggle por criativo): shimmer que cruza o slot
   2× e PARA — nada de loop infinito numa grade consultada várias vezes ao dia.
   Overlay absolute + transform-only = zero impacto de layout (contrato 21);
   o voos.js só aplica a classe na 1ª injeção do pageload (poll re-injeta).
   prefers-reduced-motion desliga. */
.ad-slot--collapsed.ad-animate { overflow: hidden; }
.ad-slot--collapsed.ad-animate::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%);
  transform: translateX(-110%);
  animation: ad-shimmer 1.7s ease-in-out 0.8s 2 both;
  pointer-events: none;
}
@keyframes ad-shimmer {
  to { transform: translateX(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-slot--collapsed.ad-animate::after { animation: none; }
}

/* Foto de FUNDO do slot (por criativo, Felipe 13/08 — colab OffshoreWorks):
   camada absoluta atrás do conteúdo nos DOIS estados + véu degradê (mais
   denso à esquerda, onde vivem selo/manchete) pro texto seguir legível.
   Ken Burns lentíssimo (~55s/ciclo, ida-e-volta CONTÍNUA — decisão Felipe
   13/08, exceção consciente ao "sem loop infinito" do shimmer: transform-only
   em camada composta, imperceptível de tão lento, zero relayout/repaint;
   contrato 21: inset negativo dá folga pro zoom não expor borda; nenhuma
   dimensão do slot muda). prefers-reduced-motion desliga o movimento
   (a foto fica, parada). */
.ad-slot--hasbg { position: relative; overflow: hidden; }
.ad-slot--hasbg > :not(.ad-bg-layer):not(.ad-bg-shade) { position: relative; }
/* A regra acima (3 classes de especificidade) tirava o "Anuncie aqui" do canto
   nos slots com foto: virava item do flex, no meio da linha, colado no ▾ e em
   cima da foto (achado 27/09). Devolve o absolute; sobre foto, letra clara +
   sombra dupla (o cinza sumia sobre o heliponto verde). Pílula com fundo foi
   testada e REPROVADA: +12px de largura encostava na manchete em 320px. */
.ad-slot--hasbg > .ad-create-link:not(.ad-create-link--exp) {
  position: absolute;
  z-index: 1;
  color: var(--text);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.ad-bg-layer {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  animation: ad-bg-pan 55s ease-in-out infinite alternate;
  will-change: transform;
}
.ad-bg-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 16, 21, 0.92) 0%, rgba(12, 16, 21, 0.55) 45%, rgba(12, 16, 21, 0.35) 75%, rgba(12, 16, 21, 0.6) 100%);
}
/* acento A/B continua visível sobre a foto: o gradiente do .ad-accent fica
   ABAIXO da bg-layer (background do container) — reforça só a borda-left. */
.ad-slot--hasbg.ad-accent { border-left-color: var(--primary-2); }
@keyframes ad-bg-pan {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.05) translateX(-1.2%); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-bg-layer { animation: none; }
}
/* Link auto-serve "Anuncie aqui" no canto inferior direito do colapsado
   (Felipe 27/06, toggle por anúncio); absolute no canto pra não empurrar
   layout (contrato 21). 27/09 (Felipe: "mais legível e maior"): 10px/dim/0.8
   → 12px/500/muted. Medido ao vivo com as 4 manchetes ativas, com e sem o
   rótulo: ≥17px até a última linha da manchete em 320/360/393; slot segue 84px. */
.ad-create-link {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.ad-create-link:hover { opacity: 1; color: var(--primary); text-decoration: underline; }
/* No EXPANDIDO o link fica EM FLUXO (right-aligned no fim do corpo) em vez de
   absolute, pra não sobrepor o botão CTA (Felipe 28/06). */
.ad-create-link--exp { position: static; align-self: flex-end; margin-top: 4px; }

.ad-thumb {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-3);
}
.ad-slot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ad-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.ad-headline { font-size: 14px; color: var(--text); line-height: 1.3; white-space: normal; }
.ad-chevron { flex: 0 0 auto; font-size: 11px; color: var(--text-dim); transition: transform 0.15s ease; }
.ad-row.is-expanded .ad-chevron { transform: rotate(180deg); }

/* Expandido — "dobra": card mais DESTACADO (fundo elevado + bordas + fonte
   maior) vs o colapsado discreto (Felipe 26/06). */
.ad-slot--expanded {
  align-items: flex-start;
  gap: 16px;
  padding: 18px 16px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.ad-expand-media {
  width: 100%; max-width: 200px; max-height: 160px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.ad-expand-body { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; min-width: 0; }
.ad-advertiser { font-size: 12px; color: var(--primary); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.ad-expand-headline { font-size: 19px; color: var(--text); margin: 0; line-height: 1.25; white-space: normal; letter-spacing: -0.01em; }
.ad-expand-text { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.45; white-space: normal; }
.ad-cta {
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 18px;
  background: var(--primary);
  color: #04141d;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.12s ease;
}
.ad-cta:hover { background: var(--primary-2); }

@media (max-width: 768px) {
  .ad-slot { padding: 10px 12px; }
  .ad-thumb { width: 40px; height: 40px; }
  /* Expandido COMPACTO no mobile (Felipe 28/06): (1) flex:0 0 auto MATA o
     flex-basis 240px que, no eixo column, virava ALTURA morta abaixo do botão
     (= o "espaço morto"); (2) fontes/padding/gap menores tiram a altura
     exagerada. A media também encolhe (200→140) pra não dominar a tela. */
  .ad-slot--expanded { flex-direction: column; gap: 10px; padding: 13px 14px; }
  .ad-expand-media { max-width: 100%; max-height: 140px; }
  .ad-expand-body { flex: 0 0 auto; gap: 6px; }
  .ad-expand-headline { font-size: 16px; line-height: 1.2; }
  .ad-expand-text { font-size: 13px; line-height: 1.38; }
  .ad-cta { padding: 8px 15px; font-size: 13px; }
}

/* --- /anuncie — landing de venda (Felipe 08/08) ---------------------------
   Demo interativo do slot (os cards de audiência saíram em 08/10). O demo REUSA as classes
   reais .ad-slot* acima (mesma cara do slot em produção); o wrapper zera
   padding porque .ad-slot assume célula de tabela com padding 0. */
.anuncie-demo {
  padding: 0;
  margin: 12px 0 6px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius, 6px);
  overflow: hidden;
  cursor: pointer;
}
.anuncie-demo:focus-visible { outline: 2px solid var(--primary, #38bdf8); }
.anuncie-demo.is-expanded .ad-chevron { transform: rotate(180deg); }
.anuncie-demo-hint {
  font-size: 12px;
  color: var(--text-dim, #64748b);
}
.anuncie-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--primary, #38bdf8);
  color: #04141d;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius, 6px);
  text-decoration: none;
  border-bottom: none;
}
.mc-about a.anuncie-cta { color: #04141d; border-bottom: none; }
.anuncie-cta:hover { background: var(--primary-2, #7dd3fc); opacity: 1; }

/* Fixes do flagrante 360px (08/08): (1) display:flex do .ad-slot vencia o
   atributo hidden → estado expandido do demo aparecia junto do colapsado;
   (2) .mc-about a (ciano) vencia .ad-cta → texto do botão sumia
   (ciano sobre ciano). */
.anuncie .ad-slot[hidden] { display: none; }
.mc-about a.ad-cta { color: #04141d; border-bottom: none; }

/* --- /anuncie v2 (Felipe 08/10): contador 24 h, gráficos, celular animado,
   "para quem faz sentido", botão fixo no celular. Movimento só transform/
   opacity/clip-path; prefers-reduced-motion desliga tudo (contrato 21:
   validado em 360px). Gráficos: SVG 0-100 esticado (preserveAspectRatio
   none) só pras marcas; texto, pontos e eixos em HTML posicionado em % —
   assim o texto não encolhe junto com o SVG no celular. */
.mc-about.anuncie { max-width: 820px; }
.anc-hero { margin-bottom: 8px; }
.anc-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 6px;
}
.mc-about.anuncie h1 { font-size: 30px; line-height: 1.2; }
.anc-live {
  margin: 18px 0 14px;
  padding: 14px 16px 12px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.anc-live-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2);
  margin: 0 0 8px;
}
.anc-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  animation: anc-pulse 2s ease-out infinite;
}
@keyframes anc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.anc-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}
.anc-live-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.anc-live-num {
  font-size: 44px; font-weight: 700; line-height: 1.05;
  letter-spacing: -0.03em; color: var(--ink);
}
.anc-live-label { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.anc-live-note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0 !important; }
.anc-hero-cta { margin-top: 4px; }
.anc-note { font-size: 13px; color: var(--ink-2); }

/* Gráficos */
.anc-chart { margin: 14px 0 6px; }
.anc-plot {
  position: relative;
  height: 220px;
  margin-left: 52px;
}
.anc-plot--bars { height: 190px; }
.anc-grid {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--line);
}
.anc-grid span {
  position: absolute; right: calc(100% + 8px); top: -8px;
  font-family: var(--mono); font-size: 11px; line-height: 16px;
  color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.anc-reveal { position: absolute; inset: 0; }
.anc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anc-area { fill: var(--cyan); opacity: 0.1; }
.anc-line {
  fill: none; stroke: var(--cyan); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
}
.anc-dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 2px var(--bg);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.anc-dot--end { width: 11px; height: 11px; }
.anc-endlabel {
  position: absolute; right: 0;
  transform: translateY(12px);
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; pointer-events: none;
}
.anc-cross {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px solid var(--line-2);
  pointer-events: none;
}
.anc-hits { position: absolute; inset: 0; }
.anc-hit {
  position: absolute; top: 0; bottom: 0;
  transform: translateX(-50%);
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
.anc-hit:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.anc-tip {
  position: absolute; z-index: 3;
  max-width: 240px;
  padding: 6px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  font-size: 12px; line-height: 1.35; color: var(--ink);
  pointer-events: none;
}
.anc-bars {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2px;
}
.anc-bar {
  flex: 1 1 0; max-width: 24px; height: 100%;
  display: flex; align-items: flex-end;
  background: transparent; border: 0; padding: 0; margin: 0;
  cursor: pointer;
}
.anc-bar span {
  display: block; width: 100%; height: var(--h);
  background: var(--cyan);
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
}
.anc-bar.is-active span, .anc-bar:hover span { background: var(--cyan-2); }
.anc-bar:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.anc-xaxis {
  position: relative; height: 22px;
  margin-left: 52px; margin-top: 6px;
}
.anc-xl {
  position: absolute; top: 0;
  transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  white-space: nowrap;
}
.anc-xaxis .anc-xl:first-child { transform: none; }
.anc-xaxis .anc-xl:last-child { transform: translateX(-100%); }
.anc-chart figcaption { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.anc-table { margin-top: 6px; font-size: 13px; }
.anc-table summary { cursor: pointer; color: var(--ink-2); font-size: 12px; }
.anc-table table { border-collapse: collapse; margin-top: 6px; }
.anc-table th, .anc-table td {
  text-align: left; padding: 3px 14px 3px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.anc-table th { font-weight: 600; color: var(--ink-2); }

/* Revelação ao rolar: só quando o JS marcou .anc-anim (sem JS = estático) */
.anc-anim .anc-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(.2,.7,.2,1); }
.anc-anim.is-visible .anc-reveal { clip-path: inset(-20px -60px -20px -20px); }
.anc-anim .anc-bar span {
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i) * 22ms);
}
.anc-anim.is-visible .anc-bar span { transform: scaleY(1); }

/* Celular animado: a grade rola até o anúncio, ele abre, fecha e volta. */
.anc-show {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 12px;
}
.anc-phone {
  position: relative;
  width: 260px; height: 480px;
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 34px;
  box-shadow: var(--shadow-md);
}
.anc-phone-notch {
  position: absolute; top: 18px; left: 50%;
  width: 70px; height: 6px; margin-left: -35px;
  border-radius: 4px; background: var(--line-2);
  z-index: 2;
}
.anc-phone-screen {
  position: relative; height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background: var(--bg);
  border: 1px solid var(--line);
}
.anc-phone-bar {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 12px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.anc-phone-logo { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.anc-phone-live { font-family: var(--mono); font-size: 9px; color: var(--green); }
.anc-feed {
  position: relative;
  animation: anc-feed-scroll 11s ease-in-out infinite;
}
.anc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px; line-height: 1.25;
}
.anc-row-t { font-family: var(--mono); color: var(--ink); flex: 0 0 auto; }
.anc-row-r { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.anc-row-r b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anc-row-r small { color: var(--ink-3); font-size: 10px; }
.anc-row .status-pill { font-size: 9px; padding: 2px 6px; flex: 0 0 auto; }
.anc-row--ad {
  position: relative;
  min-height: 52px;
  background: rgba(56, 189, 248, 0.10);
  border-left: 3px solid var(--cyan);
  animation: anc-ad-glow 11s ease-in-out infinite;
}
.anc-row--ad .ad-label { font-size: 8px; }
.anc-row--ad b { white-space: normal; }
.anc-row-chev { color: var(--ink-3); font-size: 10px; }
.anc-row-exp {
  position: absolute; left: -3px; right: 0; z-index: 1;
  top: 100%;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 12px 14px;
  background: var(--bg-1);
  border-left: 3px solid var(--cyan);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  font-size: 11px; line-height: 1.3; color: var(--ink);
  clip-path: inset(0 0 100% 0);
  animation: anc-exp 11s ease-in-out infinite;
}
.anc-row-exp .ad-label { font-size: 8px; }
.anc-row-exp .ad-advertiser { font-size: 9px; }
.anc-row-exp b { font-size: 13px; }
.anc-row-exp small { color: var(--ink-2); font-size: 10px; }
.anc-row-cta {
  align-self: flex-start; margin-top: 4px;
  padding: 5px 10px; border-radius: 4px;
  background: var(--cyan); color: #04141d;
  font-weight: 700; font-size: 10px;
}
@keyframes anc-feed-scroll {
  0%, 8% { transform: translateY(0); }
  28%, 82% { transform: translateY(-96px); }
  96%, 100% { transform: translateY(0); }
}
@keyframes anc-ad-glow {
  0%, 26% { background: rgba(56, 189, 248, 0.10); }
  32%, 78% { background: rgba(56, 189, 248, 0.22); }
  86%, 100% { background: rgba(56, 189, 248, 0.10); }
}
/* abre de cima pra baixo com o cartão OPACO (opacity deixava as linhas de
   baixo aparecerem por trás no meio da transição) */
@keyframes anc-exp {
  0%, 36% { clip-path: inset(0 0 100% 0); }
  42%, 74% { clip-path: inset(0 0 -20px 0); }
  80%, 100% { clip-path: inset(0 0 100% 0); }
}
.anc-show-text p:first-child { margin-top: 0; }

/* Para quem faz sentido */
.anc-fit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0 10px;
}
.anc-fit-card {
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.anc-fit-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.anc-fit-icon { font-size: 22px; line-height: 1; }
.mc-about .anc-fit-card h3 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; line-height: 1.3; }
.mc-about .anc-fit-card p { font-size: 13px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* Botão fixo no celular (acima da barra de navegação de baixo) */
.anc-sticky { display: none; }
@media (max-width: 768px) {
  .anc-sticky {
    display: block;
    position: fixed; z-index: 49;
    left: 16px; right: 16px;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 10px);
    padding: 12px 16px;
    text-align: center;
    background: var(--cyan); color: #04141d;
    font-weight: 700; font-size: 15px;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    opacity: 0; transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .anc-sticky.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .mc-about.anuncie { padding-bottom: 64px; }
}

@media (max-width: 640px) {
  .mc-about.anuncie h1 { font-size: 24px; }
  .anc-live-num { font-size: 34px; }
  .anc-show { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .anc-show-text { justify-self: stretch; }
  .anc-plot, .anc-xaxis { margin-left: 44px; }
  .anc-xl--opt { display: none; }
}
@media (max-width: 640px) {
  .anc-fit-card {
    display: grid; grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 10px; align-items: start;
  }
  .anc-fit-icon { grid-row: 1 / span 2; padding-top: 2px; }
  .mc-about .anc-fit-card h3 { margin-top: 0; }
}
@media (max-width: 400px) {
  .anc-live-grid { grid-template-columns: 1fr; }
  .anc-plot { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .anc-live-dot, .anc-feed, .anc-row--ad { animation: none; }
  .anc-row-exp { animation: none; clip-path: none; }
  .anc-feed { transform: translateY(-96px); }
  .anc-anim .anc-reveal, .anc-anim .anc-bar span { transition: none; }
  .anc-fit-card, .anc-sticky { transition: none; }
}

/* ── Rotação da aeronave (plano "rotação visível" C2, 13/08) ─────────────
   Chip Nº/N na col-aircraft + pílula flutuante do filtro. Contrato 21:
   chip curto no mobile (texto longo some) pra não inflar a coluna. */
.rotation-chip {
  display: inline-block; margin-top: 5px; padding: 1px 6px;
  font: inherit; font-size: 10px; color: var(--text-dim);
  background: none; border: 1px dashed var(--text-dim); border-radius: 5px;
  white-space: nowrap; cursor: pointer;
}
.rotation-chip b { color: var(--text-muted); font-weight: 600; }
.rotation-chip:hover, .rotation-chip:focus-visible {
  border-color: var(--primary); color: var(--primary);
}
.rotation-pill {
  display: none; position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%); z-index: 300;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--primary);
  border-radius: 999px; padding: 8px 14px;
  font-size: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
  white-space: nowrap; max-width: 94vw; text-align: center;
}
.rotation-pill.is-visible { display: block; }
.rotation-pill .rp-curfew { color: var(--text-muted); }
.rotation-pill button {
  margin-left: 10px; background: none; font: inherit; cursor: pointer;
  color: var(--primary); border: 1px solid var(--primary);
  border-radius: 999px; padding: 2px 10px;
}
@media (max-width: 720px) {
  .rotation-chip { font-size: 9px; margin-top: 4px; }
  .rotation-chip-x { display: none; }
  /* Quebra em linhas em vez de estourar; acima da tab bar do site. */
  .rotation-pill {
    white-space: normal; border-radius: 14px; line-height: 1.7;
    bottom: 64px; width: max-content; max-width: 92vw; font-size: 11px;
  }
}

/* C1 (13/08): "aguardando registro do pouso" — discreto, sem alerta */
.awaiting-landing {
  color: var(--text-muted); font-size: 11px; margin-top: 5px;
  max-width: 180px; white-space: normal;
}
@media (max-width: 720px) {
  .awaiting-landing { font-size: 10px; max-width: 130px; }
}

/* Curfew no Resumo da Semana (C5, 13/08) */
.week-curfew { color: var(--text-muted); font-size: 13px; margin-top: 8px; }
.week-curfew b { color: var(--text); }

/* ─── Resumo da semana colapsável + Performance do dia (15/08) ────────
 * Fold: <details> nativo (iOS/Android ok, zero JS), padrão
 * .city-hero-about. Performance: mesma família visual do preview
 * /admin/performance (classes perf-* duplicadas lá inline até a
 * consolidação — mudou aqui, conferir lá). Contrato 21: larguras em %,
 * flex-wrap em tudo, nada de nowrap em conteúdo variável. */
.city-perf {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.city-perf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}
.city-perf-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.city-perf-sun {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--mono);
}

.perf-strip {
  position: relative;
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.perf-seg { min-width: 2px; }
.perf-seg + .perf-seg { border-left: 2px solid var(--bg-1); }
.perf-seg-green   { background: rgba(74, 222, 128, 0.55); }
.perf-seg-yellow  { background: rgba(251, 191, 36, 0.75); }
.perf-seg-red     { background: rgba(248, 113, 113, 0.8); }
.perf-seg-unknown { background: rgba(154, 166, 185, 0.25); }
.perf-seg-future  {
  background: repeating-linear-gradient(
    135deg, transparent, transparent 4px,
    rgba(154, 166, 185, 0.12) 4px, rgba(154, 166, 185, 0.12) 8px);
}
.perf-curfew-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--bg-1);
  pointer-events: none;
  z-index: 1;
}
.perf-strip-axis {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
  margin-top: 3px;
}
.perf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.perf-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg-2);
}
.perf-chip.is-yellow { color: var(--amber); background: var(--warn-bg); border-color: transparent; }
.perf-chip.is-red    { color: var(--red); background: var(--danger-bg); border-color: transparent; }

.perf-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.perf-facts b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.perf-empty { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; }

/* Explicação do curfew sob a faixa (Felipe 15/08 noite) */
.perf-curfew-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-2);
}
.perf-curfew-note b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.perf-curfew-sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-3);
}

/* Frase do curfew ancorada no marcador (rodada 3, 15/08 noite) */
.perf-curfew-line { margin-top: 6px; }
.perf-curfew-anchor {
  display: block;
  text-align: right;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-2);
}
.perf-curfew-anchor b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  display: inline-block;
  transform: translateX(50%);
}

/* Rodada 4 (15/08 noite): chips+fatos centrados SÓ no card do hub
 * (admin /performance segue à esquerda); gap "após ~HH:MM" fechado —
 * margin -3ch (metade dos 6 chars mono do horário) compensa o
 * translateX(50%): texto contínuo, horário segue centrado sob a linha. */
.city-perf .perf-chips,
.city-perf .perf-facts { justify-content: center; }
@media (min-width: 720px) {
  /* PC: chips+fatos à esquerda como antes (rodada 5) */
  .city-perf .perf-chips,
  .city-perf .perf-facts { justify-content: flex-start; }
}
/* -3.5ch = metade dos 7 chars mono de "~ HH:MM" (rodada 5 adicionou o
 * espaço) — compensa o translateX(50%): horário centrado sob a linha. */
.perf-curfew-anchor b { margin-left: -3.5ch; }


/* "?" do Atraso mediano (rodada 5): tooltip CSS puro — hover no PC,
 * toque/focus no mobile (button é focável no iOS). Bolha absoluta =
 * zero layout shift (contrato 21). */
.perf-help {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 9px;
  line-height: 1;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  vertical-align: 1px;
  position: relative;
}
/* Ancoragem pela DIREITA é a regra BASE (19/08), não exceção do curfew.
 * A rodada 5 (15/08) nasceu com `left:50%; translateX(-50%)` e o comentário
 * "bolha absoluta = zero layout shift (contrato 21)". Meia verdade: absoluto
 * não empurra os irmãos, mas SEGUE contando na largura rolável do documento
 * enquanto os ancestrais forem `overflow: visible`. Como `opacity:0` esconde
 * o balão sem tirá-lo do layout, o "?" do Atraso mediano estourava o viewport
 * de forma INVISÍVEL: +36px a 393px, +53px a 360px (medido 19/08 via CDP;
 * pseudo-elemento não aparece em querySelectorAll — só em
 * getComputedStyle(el,'::after')). A rodada 6 já tinha diagnosticado e
 * corrigido isso 8min depois, mas só dentro de `.perf-curfew-anchor`.
 * Crescer pra esquerda é seguro aqui porque os dois "?" ficam à direita do
 * centro; se um "?" novo nascer perto da borda ESQUERDA, medir antes. */
.perf-help::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: auto;
  right: -4px;
  transform: none;
  width: min(220px, 72vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}
.perf-help:hover::after,
.perf-help:focus::after { opacity: 1; }

/* Bolha dos FATOS ancorada na LINHA inteira, não no botão (19/08, 2ª
 * rodada). Ancorar pela direita resolveu o Jacarepaguá mas quebrou Macaé
 * e Maricá: lá o flex-wrap deixa o "?" mais à esquerda e a bolha de 242px
 * nascia em -67px, cortada pela borda esquerda (medido: sem scroll, porque
 * o navegador não estende a área rolável pra esquerda — some calado, que é
 * pior). Como a posição do botão dentro de `.perf-facts` depende do hub e
 * do dia, NENHUMA ancoragem presa ao botão é segura. Tirando o botão de
 * `position: relative`, o containing block da bolha passa a ser a própria
 * `.perf-facts` (largura total da linha) e ela fica imune ao wrap. */
.perf-facts { position: relative; }
.perf-facts .perf-help { position: static; }
.perf-facts .perf-help::after {
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  transform: none;
}

/* "?" do curfew (rodada 6): absoluto pendurado no horário — fora do
 * fluxo, não desloca o centramento sob o marcador. A ancoragem pela
 * DIREITA da bolha, que nasceu aqui, virou regra base em 19/08 — o
 * override específico saiu por ficar redundante. */
.perf-curfew-anchor b { position: relative; }
.perf-curfew-anchor .perf-help {
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
}

/* Rodada 7 (15/08): Resumo da semana dentro do "Sobre <cidade>" (v2) +
 * fix de empilhamento do marcador: o transform do horário cria stacking
 * context que ficava ABAIXO do mark z-index:1 — a bolha do "?" era
 * atravessada pelo tracinho (flagrante do Felipe). Mark volta pro fluxo
 * (já pinta acima dos segmentos por ordem no DOM) e o horário sobe. */
.perf-curfew-mark { z-index: auto; }
.perf-curfew-anchor b { z-index: 6; }

/* Resumo da semana dentro do "Sobre <cidade>" (decisão final 15/08) */
.city-hero-week { margin-top: 14px; }
.city-hero-week .week-summary-title { margin-bottom: 8px; }

/* Badge "a confirmar" — par operadora×aeronave fora do perfil (25/08).
   Marcador mínimo na grade (célula empilhada, contrato 21: nada de texto
   largo em coluna); wording completo no expandido + title. */
.col-aircraft .unconf { font-size: 0.8em; opacity: 0.75; cursor: help; }
.timeline-header .unconf { color: var(--warning, #f59e0b); cursor: help; }

/* ===== AdSense — contenção mínima (30/08, revisada após análise) ====
   Felipe 30/08: "quero auto ads, quero que o google abuse pra arrecadar
   o máximo". NENHUM formato é bloqueado aqui — in-page, âncora e
   vinheta ficam a cargo do painel do AdSense.

   ANÁLISE (30/08) que definiu esta regra final:
   - `overflow: hidden` foi REMOVIDO. Ele evitaria scroll horizontal,
     mas CORTA o criativo quando o bloco é maior que o espaço — e
     anúncio cortado/obscurecido é risco de POLÍTICA (o Google exige o
     anúncio inteiro visível) além de derrubar viewability, que é
     justamente o que paga. Trocar receita+conta por 15px de layout é
     mau negócio.
   - `100vw` virou `100%`: `vw` inclui a barra de rolagem no desktop, ou
     seja, a própria regra poderia provocar ~15px de estouro. `100%` se
     mede pelo contêiner, que é o que queremos.
   - Efeito prático: como o Auto Ads dimensiona os blocos pelo contêiner
     (formatos responsivos), o estouro é improvável; esta regra é rede,
     não gaiola. Se algum criativo de tamanho fixo passar do espaço, ele
     transborda visualmente (sem corte) e a gente trata o caso concreto
     em vez de cortar todos preventivamente. */
ins.adsbygoogle { max-width: 100%; }

/* Âncora do AdSense no topo (15/10/2026, print do Felipe): recolhida, ela
   deixa uma aba fixa (~50×24px) no canto superior esquerdo da tela —
   exatamente em cima do logo da topbar sticky. Com âncora na página, o logo
   anda 44px pra direita (14px de padding + 44 = começa em ~58px, fora da aba).
   `data-anchor-status` é o atributo que o Auto Ads põe no <ins> da âncora;
   sem âncora (adblock, sem anúncio) o logo fica onde sempre esteve.
   No mobile a topbar só tem logo + relógio + tema — sobra largura a 360px. */
@media (max-width: 768px) {
  html:has(ins.adsbygoogle[data-anchor-status]) .mc-logo { margin-left: 44px; }
}

/* Espaço de anúncio que veio VAZIO some (16/10/2026, prints do Felipe no PC
   e no celular). Com a conta em avaliação ("Account being assessed", limite
   de veiculação desde 16/10) só ~50% dos pedidos recebem anúncio, e o Auto
   Ads deixava o bloco do topo aberto (~300px de buraco entre o título e os
   voos). O Google marca o <ins> com `data-ad-status="unfilled"` quando não
   tem anúncio — esconder nesse caso é a receita da própria ajuda do AdSense
   e não altera o pedido nem a medição. Some também o invólucro que o Auto
   Ads cria em volta (`.google-auto-placed`), que carrega a margem.
   Anúncio preenchido (`filled`) segue intocado. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.google-auto-placed:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────
 * Conteúdo editorial (07/09/2026) — blocos de texto próprio ABAIXO das
 * grades (/voos, hubs, /tempo, /rotina). Motivo: recusa do AdSense por
 * "low value content"; a política exige publisher-content na tela e
 * "commentary, curation" junto do dado replicado. Regras de layout
 * (contrato 21): sempre FORA de tabela, `white-space: normal`, largura
 * 100% do container — não toca coluna nem linha da grade.
 * ──────────────────────────────────────────────────────────────────── */
.editorial {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  max-width: 72ch;
  white-space: normal;
}
.editorial h2 {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
  text-wrap: balance;
}
.editorial h3 {
  font-size: 14.5px;
  font-weight: 650;
  margin: 22px 0 8px;
  color: var(--ink);
}
.editorial p,
.editorial li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.editorial ul { margin: 0 0 12px; padding-left: 20px; }
.editorial li { margin-bottom: 6px; }
.editorial strong { color: var(--ink); font-weight: 600; }
.editorial a { color: var(--cyan); }
.editorial-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}
.editorial-fact {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 0;
}
.editorial-fact-n {
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.editorial-fact-l {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.35;
}
.editorial-note {
  background: var(--bg-2);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 16px;
}
.editorial-note strong { color: var(--ink); }
/* Descrição longa dentro do "▸ Sobre <cidade>" (já colapsado). */
.city-hero-desc-long p { margin: 0 0 10px; }
.city-hero-desc-long p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .editorial { margin-top: 22px; padding-top: 18px; }
  .editorial h2 { font-size: 17px; }
}