/* ============================================================
   Mobile — responsivo (polido)
   ============================================================ */

/* ---------- Tablet / telas médias ---------- */
@media (max-width: 960px) {
  .app { grid-template-columns: 64px 1fr; }
  .brand { padding: 0 10px 16px; justify-content: center; }
  .brand-text { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
  .nav-label, .build-tag { display: none; }
  .nav-icon { font-size: 18px; }
  .header { padding: 0 18px; }
  .header-stats { gap: 14px; }
  .header-stat-label { font-size: 9px; }
  .header-stat-value { font-size: 12px; }
  .main { padding: 18px 18px 80px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header" "main";
  }
  .sidebar { display: none; }
  .bottom-nav { display: flex; }

  /* Header compacto */
  .header { padding: 0 14px; min-height: 56px; }
  .header-title h1 { font-size: 16px; }
  .header-sub { display: none; }
  .header-stats { gap: 10px; }
  .header-stat-label { font-size: 8.5px; }
  .header-stat-value { font-size: 11px; }
  .btn-refresh { width: 32px; height: 32px; }

  .main { padding: 16px 13px 84px; }

  /* Títulos e cabeçalhos de página */
  .page-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .page-title { font-size: 20px; }

  /* Cards mais justos */
  .card { padding: 16px 14px; }
  .card-title { font-size: 15px; }

  /* Grids de stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 18px; }

  /* Sub-abas do IR: rolagem horizontal em vez de quebrar em várias linhas */
  .ir-subtabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ir-subtabs::-webkit-scrollbar { display: none; }
  .ir-subtabs .btn { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 7px 11px; }

  /* Tabelas mais compactas (continuam rolando via .table-wrap) */
  .table thead th { font-size: 10.5px; padding: 8px 10px; }
  .table tbody td { font-size: 12px; padding: 9px 10px; }
  .main table { font-size: 12px; }

  /* Modais ocupam quase a tela */
  .modal { border-radius: var(--radius-md); max-height: 94vh; width: 96vw; }
  .modal-body { padding: 16px; }
  .op-type-selector { grid-template-columns: 1fr 1fr; }

  /* IR resumos/calendário */
  .ir-summary { grid-template-columns: 1fr 1fr; }
  .ir-calendar { grid-template-columns: 1fr 1fr; }

  /* Gráficos */
  .charts-grid { grid-template-columns: 1fr; }
  .tv-frame { height: 360px; }

  /* Inputs: 16px evita o zoom automático do iOS ao focar */
  input, select, textarea { font-size: 16px !important; }

  /* Botão "Instalar app" acima da barra inferior */
  #pwa-install-btn { bottom: 74px !important; right: 12px !important; padding: 9px 13px !important; font-size: .82rem !important; }

  /* Alvos de toque confortáveis */
  .btn, .nav-item, .bn-item { min-height: 40px; }
}

/* ---------- Celular pequeno ---------- */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
  .ir-summary { grid-template-columns: 1fr; }
  .ir-calendar { grid-template-columns: 1fr; }
  .op-type-selector { grid-template-columns: 1fr; }
  .header-stat:not(:last-child) { display: none; } /* deixa só o stat principal */
  .page-title { font-size: 18px; }
  .main { padding: 14px 11px 84px; }
}