/* ═══════════════════════════════════════════════════════
   TROPO DX — Mobile PWA Overrides
   Aplicado só em telas ≤ 768px via media query
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HERO compacto ─────────────────────────────────── */
  .hero {
    min-height: 60vh;
    padding-top: 1rem;
  }
  .hero h1 {
    font-size: 2.2rem;
    margin-bottom: .5rem;
  }
  .hero-sub {
    font-size: .85rem;
    margin-bottom: 1.5rem;
  }
  .hero-badge {
    font-size: .7rem;
    padding: .3rem .9rem;
    margin-bottom: 1.2rem;
  }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .hero-stat {
    min-width: unset;
    padding: .7rem .8rem;
  }
  .hero-stat-val { font-size: 1.4rem; }
  .scroll-indicator { bottom: 1.2rem; }

  /* ── DAY SELECTOR BAR ──────────────────────────────── */
  .day-selector-bar {
    padding: .5rem .75rem;
    gap: .5rem;
  }
  .day-selector-label { display: none; }
  .day-tab {
    min-width: 72px;
    padding: .38rem .6rem;
    border-radius: 8px;
  }
  .day-tab-date { font-size: .68rem; }
  .day-tab-peak { font-size: .58rem; }

  /* ── SECTIONS ──────────────────────────────────────── */
  .section { padding: 2rem .75rem; }
  .section-title { font-size: 1.2rem; }
  .section-sub { font-size: .8rem; margin-bottom: 1.2rem; }

  /* ── DAY OVERVIEW cards ────────────────────────────── */
  .day-overview {
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-bottom: 1.2rem;
  }
  .overview-card { padding: .9rem 1rem; }
  .overview-card-value { font-size: 1.2rem; }
  .overview-card-sub { font-size: .7rem; }

  /* Window banner compacto */
  .window-banner { padding: .8rem 1rem; gap: .7rem; }
  .window-banner-icon { font-size: 1.3rem; }
  .window-banner-title { font-size: .88rem; }
  .window-banner-sub { font-size: .75rem; }
  .window-banner-time .time-big { font-size: 1.1rem; }

  /* ── TIMELINE ──────────────────────────────────────── */
  .timeline-rail {
    gap: .6rem;
    padding-bottom: .75rem;
    /* cards maiores no mobile — mais fáceis de tocar */
    -webkit-overflow-scrolling: touch;
  }
  .tl-card {
    flex: 0 0 140px;
    padding: 1rem .85rem;
    border-radius: 12px;
  }
  .tl-hora { font-size: 1.4rem; }
  .tl-cor  { font-size: .65rem; }
  .tl-indice { font-size: .7rem; margin-top: .6rem; }
  .tl-indice strong { font-size: .9rem; }

  /* ── DETAIL GRID ───────────────────────────────────── */
  .detail-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .detail-card { padding: 1rem; }
  .detail-card h3 { font-size: .7rem; }
  .info-row { font-size: .8rem; }

  /* ── FOOTER ────────────────────────────────────────── */
  .footer { padding: 1.5rem .75rem; font-size: .75rem; }
  .footer-small { font-size: .68rem; }
  #footerDate { display: none; }

  /* ── Oculta seções não-essenciais no mobile ─────────── */
  /* Radar, chart e tabela de chances ficam ocultos;
     o detalhe essencial (sinal + bolsões) permanece */
  #mapSection,
  #chartSection,
  #chanceSection {
    display: none !important;
  }

  /* Narrativa: mostra só se tiver horário selecionado,
     mas colapsa o título para economizar espaço */
  #narrativeSection .section-title { font-size: 1rem; }

  /* ── Botão histórico no footer ─────────────────────── */
  #btnHistoricoNav { display: none !important; }
  #btnHistoricoFooter {
    display: inline-flex !important;
    margin-top: .5rem;
  }

  /* ── Badge horário selecionado ─────────────────────── */
  #selectedTimeBadge {
    font-size: .78rem;
  }

  /* ── PWA safe area (notch / home bar) ──────────────── */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .day-selector-bar {
    padding-top: max(.5rem, env(safe-area-inset-top, .5rem));
  }
}