/* Dashboard RDB: adaptação para celular (até 760px), no mesmo modelo do layout de referência.
   Carregado DEPOIS do dash.css, do period-filter.css e do <style> de cada página,
   por isso sobrepõe as regras de desktop. */
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .container { padding: 14px 14px 28px; }

  /* Cabeçalho compacto */
  .header { padding: 16px 16px 14px; margin-bottom: 14px; border-radius: 16px; gap: 14px; }
  .header h1 { font-size: 22px; letter-spacing: .3px; line-height: 1.05; }
  .header h1 span { font-size: 9px; letter-spacing: 1.6px; margin-top: 8px; }
  .brand-logo { height: 24px; }

  /* Navegação: faixa rolável na horizontal, abas com 44px de toque */
  .sub-header { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; border-bottom: none; margin-bottom: 18px; }
  .page-nav { min-width: 0; max-width: calc(100% + 28px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; flex-wrap: nowrap; margin: 0 -14px; padding: 0 14px; border-bottom: 1px solid var(--border); }
  .page-nav::-webkit-scrollbar { display: none; }
  .page-nav a { flex: none; padding: 13px 14px; margin-bottom: 0; min-height: 44px; font-size: 11px; letter-spacing: 1.2px; white-space: nowrap; }
  .sub-header .filter-row { padding-bottom: 0; width: 100%; }

  /* Seletor de período: botão largo e painel como folha inferior, com véu escuro atrás */
  .pf { display: block; }
  .sub-header .filter-row > .pf { flex: 1; min-width: 0; }
  .pf-btn { width: 100%; height: 46px; font-size: 12px; }
  .pf.open::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .62); z-index: 1100; }
  .pf-pop { position: fixed; left: 10px; right: 10px; top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); min-width: 0; padding: 14px; border-radius: 20px; z-index: 1200; }
  .pf-all { padding: 14px 16px; font-size: 12px; }
  .pf-grid { gap: 6px; }
  .pf-m { padding: 14px 4px; font-size: 12px; }
  /* folha inferior: some só a dica de clique; o aviso de mês parcial continua */
  .pf-foot .pf-hint { display: none; }
  .pf-foot:not(:has(.pf-partial-note)) { display: none; }

  .mock-tag { margin-bottom: 14px; }

  /* KPIs em duas colunas */
  .kpi-row, .kpi-row.cols-4, .kpi-row.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .kpi { padding: 14px 12px; border-radius: 16px; min-width: 0; }
  .kpi:hover { border-color: var(--border); }
  .kpi-icon { width: 30px; height: 30px; border-radius: 8px; margin-bottom: 8px; }
  .kpi-icon svg { width: 16px; height: 16px; }
  .kpi .label { font-size: 9px; letter-spacing: 1.2px; }
  .kpi .value { font-size: 22px; }
  .kpi .sub { font-size: 11px; line-height: 1.35; }

  /* Seções e cards */
  .section-title { font-size: 11.5px; letter-spacing: 1.6px; margin: 24px 0 12px; gap: 10px; }
  .section-title--row { flex-wrap: wrap; gap: 8px 10px; }
  .section-title--row > .legend, .section-title--row > .right { margin-left: 0; width: 100%; }
  .section-note { margin-top: -4px; }
  .legend { gap: 6px 12px; font-size: 9.5px; }
  .card, .motivos-card, .evo-card, .funil-card { padding: 16px 14px; margin-bottom: 22px; border-radius: 16px; }
  .dual-section, .cost-grid, .two-col, .dual-chart-rank { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 22px 0 0; }
  .dual-section > div, .cost-grid > div, .two-col > div, .dual-chart-rank > div { margin-bottom: 22px; min-width: 0; }
  .two-col .card, .two-col .motivos-card, .two-col .evo-card, .dual-section .motivos-card, .dual-section .evo-card, .dual-section .card, .cost-grid .card, .dual-chart-rank .card { margin-bottom: 0; }
  .callout { padding: 12px 14px; gap: 12px; font-size: 12.5px; margin-bottom: 22px; }
  .card + .callout, .funil-card + .callout { margin-top: -10px; }
  .callout .ic { width: 30px; height: 30px; border-radius: 8px; }
  .callout .ic svg { width: 16px; height: 16px; }

  /* Gráficos SVG: mantêm o tamanho de leitura e rolam na horizontal dentro do card */
  .semanal-chart, .evo-chart, .dual-chart, .chart-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .semanal-chart svg, .evo-chart svg, .dual-chart svg, .chart-wrap svg { min-width: 640px; }
  /* svg com no mínimo 640px de largura (escala ~0,64): fontes maiores no viewBox para renderizar ~11px */
  .dchart, .dual-chart-rank .dchart, .dual-section .dchart, .cost-grid .dchart, .two-col .dchart { --fs-axis: 17px; --fs-val: 17px; }
  .cost-grid .dchart.dense, .two-col .dchart.dense { --fs-axis: 17px; --fs-val: 16px; }
  .semanal-legend, .evo-legend, .dual-legend, .chart-legend { gap: 8px 14px; flex-wrap: wrap; justify-content: flex-start; }
  /* Poucos meses (até 4: svg.few, posto pelos DASH.render*): o gráfico cabe no card, sem rolagem.
     O svg fica com a largura do card (escala ~0,33 a 390px), então fonte e traços crescem no
     viewBox para manter ~11px no eixo e ~10px nos valores (fonte ≈ 11000 ÷ largura do svg, que é
     a tela menos 56px; duas retas, até 430px e de 431 a 760px). !important: vence o min-width e a
     fonte que a página define por id para o caso com muitos meses (ex.: #reach-chart). */
  .semanal-chart svg.few, .evo-chart svg.few, .dual-chart svg.few, .chart-wrap svg.few { min-width: 0 !important; }
  .dchart.few { --fs-axis: clamp(15px, calc(47.5px - 4.2vw), 29.5px) !important; --fs-val: clamp(14px, calc(44.2px - 3.9vw), 27.5px) !important; }
  .dchart.few .grid { stroke-width: calc(var(--fs-axis) * .06); }
  .dchart.few .line { stroke-width: calc(var(--fs-axis) * .15); }
  .dchart.few .line.dashed { stroke-dasharray: calc(var(--fs-axis) * .36) calc(var(--fs-axis) * .36); }
  .dchart.few .dot { r: calc(var(--fs-axis) * .18); stroke-width: calc(var(--fs-axis) * .09); }
  .dchart.few .bar-value, .dchart.few .line-value { stroke-width: calc(var(--fs-val) * .18); }

  /* Tabelas: rolagem horizontal dentro do card (.month-table: min-width de 960px no dash.css) */
  .table-card, .card[style*="overflow-x"] { padding: 6px 0 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-card th:first-child, .table-card td:first-child, .card[style*="overflow-x"] th:first-child, .card[style*="overflow-x"] td:first-child { padding-left: 14px; }
  .table-card th:last-child, .table-card td:last-child, .card[style*="overflow-x"] th:last-child, .card[style*="overflow-x"] td:last-child { padding-right: 14px; }
  .camp-table { min-width: 660px; }
  .camp-name { max-width: 240px; }
  .data-table { min-width: 660px; }

  /* Funil: rótulo em cima, barra embaixo */
  .funil-stages { gap: 13px; }
  .funil-row { flex-direction: column; align-items: stretch; gap: 5px; }
  .funil-label { width: auto; text-align: left; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .funil-label .desc { margin-top: 0; }
  .funil-connector { display: none; }
  .funil-track { height: 26px; }
  .funil-conv-tag { min-width: 40px; text-align: right; }
  .funil-summary { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .funil-summary .item { padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .funil-summary .label { grid-column: 1; margin-bottom: 2px; letter-spacing: 1.6px; }
  .funil-summary .detail { grid-column: 1; margin-top: 0; font-size: 12px; }
  .funil-summary .value { grid-column: 2; grid-row: 1 / span 2; font-size: 30px; }

  /* Pista de rolagem lateral: fica parada no canto enquanto o conteúdo desliza. Nos gráficos,
     só quando há rolagem de fato (.is-overflowing, marcada por DASH.render* e DASH.markOverflow) */
  .table-card::after, .card[style*="overflow-x"]::after,
  .semanal-chart.is-overflowing::after, .evo-chart.is-overflowing::after, .dual-chart.is-overflowing::after, .chart-wrap.is-overflowing::after {
    content: '\2194  arraste para o lado'; display: block; position: sticky; left: 14px; width: max-content; margin: 8px 0 6px 14px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
  .semanal-chart::after, .evo-chart::after, .dual-chart::after, .chart-wrap::after { left: 0; margin-left: 0; }

  /* Donuts e ranking */
  .motivos-grid.side { flex-direction: column; gap: 20px; }
  .motivos-grid.side .motivos-donut { flex: none; }
  .motivo-item { grid-template-columns: 12px minmax(0, 1fr) 64px 46px; gap: 8px; }
  .motivo-item .nome { font-size: 12.5px; }
  .rank-row { grid-template-columns: minmax(0, 1fr) 66px; }
  .rank-row.with-pos { grid-template-columns: 20px minmax(0, 1fr) 66px; }

  /* Rodapé */
  .footer { flex-wrap: wrap; gap: 4px 10px; padding: 20px 8px calc(20px + env(safe-area-inset-bottom)); font-size: 9px; letter-spacing: 1.4px; text-align: center; }
  /* 'Dash · Rio Design Barra' numa linha, data na outra, sem '·' sobrando no fim */
  .footer .sep:nth-last-child(2) { display: none; }
  .footer #updated-at { flex-basis: 100%; }

  /* Utilitários */
  .only-desktop { display: none !important; }
  .only-mobile { display: revert !important; }
}
@media (max-width: 430px) {
  .dchart.few { --fs-axis: clamp(29.5px, calc(71px - 9.7vw), 42px) !important; --fs-val: clamp(27.5px, calc(66px - 9vw), 39px) !important; }
}

/* toque: sem efeitos que dependem de passar o mouse */
@media (hover: none) {
  .kpi:hover, .card:hover { border-color: var(--border); }
}