/* App mobile (M31) — leiaute de TELA LARGA (PC), 10/09/2026.
 * Pedido do usuário: "só nas abas com gráficos e resultados (Relatório/Inteligência)
 * fazer css dinâmico para PC, onde os relatórios ficam mais com cara de
 * ppt/presentation/dash... gráficos grandes e coisas assim."
 *
 * Como funciona: app.js (setTab) grava data-aba="rel|ctrl|intel|ajuda" no #corpo.
 * Tudo aqui está atrás de @media (min-width: 900px) E do seletor
 * .corpo[data-aba="rel"] / .corpo[data-aba="intel"] — no celular e nas abas
 * Controle/Ajuda NADA muda. O markup é o mesmo do celular: os cartões viram
 * células de uma grade de 12 colunas e os gráficos crescem. Nenhum dado, nenhuma regra de negócio: só forma.
 */
@media (min-width: 900px) {

  /* ---- o corpo vira uma grade de 12 colunas; appbar e tabbar ficam como estão ---- */
  .corpo[data-aba="rel"], .corpo[data-aba="intel"] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
    padding: 18px clamp(20px, 4vw, 56px) 40px;
    font-size: 14px;
  }
  /* o indicador do "puxar para atualizar" é absoluto — fora da grade, intacto */

  /* ---- ocupação padrão: tudo em linha inteira; abaixo o que vira coluna ---- */
  .corpo[data-aba="rel"] > *, .corpo[data-aba="intel"] > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  .corpo[data-aba="rel"] > .rcard, .corpo[data-aba="intel"] > .rcard { margin: 0 !important; }

  /* chips = a barra de filtros do dashboard */
  .corpo[data-aba="rel"] > .chips, .corpo[data-aba="intel"] > .chips {
    border: 1px solid var(--linha); border-radius: 13px; padding: 12px 16px; box-shadow: var(--sombra);
  }
  .corpo[data-aba="rel"] .chip, .corpo[data-aba="intel"] .chip { font-size: 13.5px; padding: 7px 16px; }
  .corpo[data-aba="rel"] .chips .rot, .corpo[data-aba="intel"] .chips .rot { font-size: 11px; }

  /* títulos de seção: maiores, como um slide */
  .corpo[data-aba="rel"] > .secao-tit, .corpo[data-aba="intel"] > .secao-tit {
    padding: 10px 4px 0; font-size: 13px; letter-spacing: .08em;
  }
  .corpo[data-aba="rel"] > .secao-tit small, .corpo[data-aba="intel"] > .secao-tit small { font-size: 12.5px; }

  /* cartões: mais respiro, títulos maiores */
  .corpo[data-aba="rel"] .rcard, .corpo[data-aba="intel"] .rcard { padding: 20px 22px; border-radius: 16px; }
  .corpo[data-aba="rel"] .rcard h3, .corpo[data-aba="intel"] .rcard h3 { font-size: 17px; margin-bottom: 4px; }
  .corpo[data-aba="rel"] .rcard .dica, .corpo[data-aba="intel"] .rcard .dica { font-size: 12.5px; margin-bottom: 16px; }

  /* ===================== RELATÓRIO ===================== */

  /* linha 1: donut da meta (esquerda, alto) + KPIs 2×2 (direita) */
  .corpo[data-aba="rel"] > .card-meta-mes { grid-column: span 4; grid-row: span 2; justify-content: center; }
  .corpo[data-aba="rel"] > .kpis-m { grid-column: span 8; grid-row: span 2; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }

  .corpo[data-aba="rel"] .donut-meta { width: 260px; height: 260px; margin: 10px auto 16px; }
  .corpo[data-aba="rel"] .donut-meta svg { width: 100%; height: 100%; }
  .corpo[data-aba="rel"] .donut-meta .pc b { font-size: 62px; }
  .corpo[data-aba="rel"] .donut-meta .pc b i { font-size: 26px; }
  .corpo[data-aba="rel"] .card-meta-mes .valor { font-size: 28px; }
  .corpo[data-aba="rel"] .card-meta-mes .valrot { font-size: 11.5px; }

  .corpo[data-aba="rel"] .kpi-m { padding: 20px 22px; border-radius: 16px; justify-content: center; gap: 6px; }
  .corpo[data-aba="rel"] .kpi-m .rot { font-size: 11.5px; }
  .corpo[data-aba="rel"] .kpi-m b { font-size: 34px; }
  .corpo[data-aba="rel"] .kpi-m .sub { font-size: 12px; }

  /* meta por mês: os cards de mês lado a lado, 4 por linha; os dois totais ocupam 6 cada */
  .corpo[data-aba="rel"] > .mescard { grid-column: span 3; padding: 14px 16px; border-radius: 14px; align-items: center; }
  /* os dois totais fecham numa linha própria (colunas fixas: 1–6 e 7–12) */
  .corpo[data-aba="rel"] > .mescard.tgm { grid-column: 1 / span 6; }
  .corpo[data-aba="rel"] > .mescard.saldom { grid-column: 7 / span 6; }
  .corpo[data-aba="rel"] .mescard .m { font-size: 16px; }
  .corpo[data-aba="rel"] .mescard .tot { font-size: 18px; }
  .corpo[data-aba="rel"] .mescard .bk { font-size: 11.5px; }
  .corpo[data-aba="rel"] .anelcell { width: 56px; height: 56px; }
  .corpo[data-aba="rel"] .anelcell svg { width: 56px; height: 56px; }
  .corpo[data-aba="rel"] .anelcell .p { font-size: 13px; }

  /* gráfico de linha (8 colunas) + donut de andamento (4) na mesma fileira.
     O SVG da linha é preserveAspectRatio="none" (viewBox 336×170): a altura
     segue a largura pela proporção do viewBox, senão o texto estica. */
  .corpo[data-aba="rel"] > .card-linha { grid-column: 1 / span 8; }
  .corpo[data-aba="rel"] .linha { height: auto; aspect-ratio: 336 / 170; }
  .corpo[data-aba="rel"] .legchart { font-size: 12.5px; gap: 20px; margin-top: 12px; }

  .corpo[data-aba="rel"] > .card-andamento { grid-column: span 4; }
  .corpo[data-aba="rel"] > .card-andamento .donut-wrap { flex-direction: column; align-items: center; }
  .corpo[data-aba="rel"] > .card-andamento .leg-and { width: 100%; }
  .corpo[data-aba="rel"] > .card-categoria { grid-column: 1 / -1; }
  .corpo[data-aba="rel"] .donut-wrap { gap: 28px; }
  .corpo[data-aba="rel"] .donut { width: 220px; height: 220px; }
  .corpo[data-aba="rel"] .donut .centro { width: 140px; height: 140px; }
  .corpo[data-aba="rel"] .donut .centro b { font-size: 22px; }
  .corpo[data-aba="rel"] .donut .centro span { font-size: 11.5px; }
  .corpo[data-aba="rel"] .leg-and .li { font-size: 13.5px; gap: 10px; }
  .corpo[data-aba="rel"] .leg-and .li .pt { width: 12px; height: 12px; }
  .corpo[data-aba="rel"] .leg-and { gap: 9px; }

  /* plataforma e UF lado a lado; a matriz em linha inteira */
  .corpo[data-aba="rel"] > .card-plataforma, .corpo[data-aba="rel"] > .card-uf { grid-column: span 6; }
  .corpo[data-aba="rel"] > .card-matriz { grid-column: 1 / -1; }

  /* ===================== INTELIGÊNCIA ===================== */

  /* linha 1: anel do resultado (esquerda) + KPIs (direita) */
  .corpo[data-aba="intel"] > .card-res { grid-column: span 4; grid-row: span 2; justify-content: center; }
  .corpo[data-aba="intel"] > .kpis-m { grid-column: span 8; grid-row: span 2; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }

  .corpo[data-aba="intel"] .donut-res { width: 260px; height: 260px; margin: 10px auto 14px; }
  .corpo[data-aba="intel"] .donut-res svg { width: 100%; height: 100%; }
  .corpo[data-aba="intel"] .donut-res .pc b { font-size: 62px; }
  .corpo[data-aba="intel"] .donut-res .pc b i { font-size: 26px; }
  .corpo[data-aba="intel"] .donut-res .pc span { font-size: 12px; }
  .corpo[data-aba="intel"] .card-res .valor { font-size: 22px; }
  .corpo[data-aba="intel"] .card-res .valor small { font-size: 13px; }
  .corpo[data-aba="intel"] .leg-res { max-width: 340px; gap: 8px 28px; margin-top: 16px; }
  .corpo[data-aba="intel"] .leg-res .li { font-size: 13.5px; }
  .corpo[data-aba="intel"] .leg-res .li .pt { width: 12px; height: 12px; }

  .corpo[data-aba="intel"] .kpi-m { padding: 20px 22px; border-radius: 16px; justify-content: center; gap: 6px; }
  .corpo[data-aba="intel"] .kpi-m .rot { font-size: 11.5px; }
  .corpo[data-aba="intel"] .kpi-m b { font-size: 34px; }
  .corpo[data-aba="intel"] .kpi-m .sub { font-size: 12px; }

  /* disputa por mês: 4 por linha */
  .corpo[data-aba="intel"] > .mescard { grid-column: span 3; padding: 14px 16px; border-radius: 14px; }
  .corpo[data-aba="intel"] > .mescard.tgm { grid-column: 1 / span 6; }   /* o Total abre linha própria */
  .corpo[data-aba="intel"] .mescard .m { font-size: 16px; }
  .corpo[data-aba="intel"] .mescard .tot { font-size: 16px; }
  .corpo[data-aba="intel"] .mescard .bk { font-size: 11.5px; }
  .corpo[data-aba="intel"] .mescard .mesa { font-size: 11.5px; }
  .corpo[data-aba="intel"] .anelcell { width: 56px; height: 56px; }
  .corpo[data-aba="intel"] .anelcell svg { width: 56px; height: 56px; }
  .corpo[data-aba="intel"] .anelcell .p { font-size: 13px; }

  /* marcas e concorrentes lado a lado; matriz produto × resultado em linha inteira */
  .corpo[data-aba="intel"] > .card-marcas { grid-column: 1 / span 6; }   /* começa na coluna 1: nunca ao lado do Total */
  .corpo[data-aba="intel"] > .card-concorrentes { grid-column: span 6; }
  .corpo[data-aba="intel"] > .card-matriz { grid-column: 1 / -1; }
  .corpo[data-aba="intel"] .rcard .rodape { font-size: 12px; }

  /* ===================== comum às duas: barras, matriz, nota, faixas ===================== */
  .corpo[data-aba="rel"] .barra, .corpo[data-aba="intel"] .barra { font-size: 13.5px; gap: 12px; margin-bottom: 11px; }
  .corpo[data-aba="rel"] .barra .lab, .corpo[data-aba="intel"] .barra .lab { flex-basis: 200px; }
  .corpo[data-aba="rel"] .barra .track, .corpo[data-aba="intel"] .barra .track { height: 20px; border-radius: 8px; }
  .corpo[data-aba="rel"] .barra .fill, .corpo[data-aba="intel"] .barra .fill { border-radius: 8px; }
  .corpo[data-aba="rel"] .barra .num, .corpo[data-aba="intel"] .barra .num { flex-basis: 110px; }

  .corpo[data-aba="rel"] table.matriz, .corpo[data-aba="intel"] table.matriz { font-size: 13px; }
  .corpo[data-aba="rel"] table.matriz th, .corpo[data-aba="intel"] table.matriz th { font-size: 11px; padding: 8px 6px; }
  .corpo[data-aba="rel"] table.matriz th:first-child, .corpo[data-aba="intel"] table.matriz th:first-child { width: 24%; }
  .corpo[data-aba="rel"] table.matriz td, .corpo[data-aba="intel"] table.matriz td { padding: 7px 6px; }
  .corpo[data-aba="rel"] table.matriz td.cat, .corpo[data-aba="intel"] table.matriz td.cat { font-size: 13px; }
  .corpo[data-aba="rel"] .heat, .corpo[data-aba="intel"] .heat { min-width: 64px; padding: 5px 8px; font-size: 12.5px; border-radius: 7px; }

  .corpo[data-aba="rel"] > .nota, .corpo[data-aba="intel"] > .nota { font-size: 12.5px; padding: 12px 16px; }
  .corpo[data-aba="rel"] > .faixa, .corpo[data-aba="intel"] > .faixa { font-size: 13px; }
  .corpo[data-aba="rel"] > .loader-wrap, .corpo[data-aba="intel"] > .loader-wrap { padding: 120px 20px; font-size: 14px; }
}

/* telas muito largas (monitor de mesa): a grade não estica ao infinito */
@media (min-width: 1500px) {
  .corpo[data-aba="rel"], .corpo[data-aba="intel"] { padding-left: calc((100% - 1400px) / 2 + 24px); padding-right: calc((100% - 1400px) / 2 + 24px); }
}