/* AgriFlow — Dashboard comercial (ADR 0071).
   Mobile primeiro: nada aqui depende de rolagem lateral. Os KPIs são 2×2 no
   celular e 4 em linha só no desktop; os chips quebram linha em vez de
   espremer. Número grande, contexto pequeno, nada de gradiente. */

[hidden]{display:none!important}

/* Os controles do recorte moram DENTRO do painel do cabeçalho. Em coluna,
   porque ali a largura é a do painel e não a da tela. */
.dc-controles{display:flex;flex-direction:column;gap:10px}
.dc-chips{display:flex;flex-wrap:wrap;gap:6px}
.dc-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(22,56,50,.18);background:#fff;color:#163832;font:600 13px/1 'Inter',sans-serif;cursor:pointer;touch-action:manipulation}
.dc-chip:hover{border-color:#163832}
.dc-chip.is-on{background:#163832;border-color:#163832;color:#fff}
.dc-chip:focus-visible,.dc-kpi:focus-visible,.dc-item:focus-visible,.dc-vend:focus-visible{outline:2px solid #C8A227;outline-offset:2px}
.dc-range{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.dc-range input{min-height:44px;font-size:16px;padding:0 10px;border:1px solid rgba(22,56,50,.18);border-radius:10px;background:#fff;min-width:0}
.dc-sel{display:flex;align-items:center;gap:8px;font:600 12px/1 'Inter',sans-serif;color:#4B5563}
.dc-sel select{min-height:44px;font-size:16px;padding:0 10px;border:1px solid rgba(22,56,50,.18);border-radius:10px;background:#fff;max-width:100%;min-width:0}

.dc-estado{padding:14px 16px;border-radius:12px;background:rgba(22,56,50,.05);color:#1C2B27;font:500 13px/1.4 'Inter',sans-serif;margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.dc-estado-erro,.dc-estado-invalido{background:#FEF2F2;color:#991B1B}
.dc-estado-sem_permissao,.dc-estado-offline{background:#FFFBEB;color:#92400E}

/* A linha de contexto: o resumo do recorte, e a porta para mudá-lo.
   Discreta de propósito — diz o que está sendo lido sem competir com o
   número, e trunca em vez de quebrar em duas linhas ou empurrar a largura. */
.dc-escopo{display:block;width:100%;box-sizing:border-box;font:600 11px/1.3 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin:0 0 10px;padding:0;background:none;border:0;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-escopo:hover{color:#163832}
.dc-escopo:focus-visible{outline:2px solid #C8A227;outline-offset:3px;border-radius:6px}
/* Densidade: 2×2 no celular como sempre, só que mais perto. O gap de 10px e
   o padding de 14px somavam quase uma linha de altura por par de cards — e
   era altura sem informação nenhuma. O número segue do mesmo tamanho: quem
   encolhe é o espaço morto, não o dado. */
/* `grid-auto-rows:1fr` iguala as DUAS fileiras do celular. Sem isto,
   Pipeline/Ganhos ficavam em 75px e Conversão/Interações em 119px — a
   diferença vem do contexto de duas linhas e do selo de tendência, e a
   fileira mais curta parecia inacabada ao lado da outra. No desktop os
   quatro já dividem UMA fileira, então lá a regra não muda nada. */
.dc-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;margin-bottom:12px}
.dc-kpi{display:flex;flex-direction:column;justify-content:flex-start;gap:2px;min-width:0;padding:11px 12px 10px;border-radius:14px;background:#fff;border:1px solid rgba(22,56,50,.10);color:#1C2B27;text-decoration:none;box-shadow:0 1px 4px rgba(22,56,50,.05)}
.dc-kpi:hover{border-color:rgba(22,56,50,.3)}
.dc-kpi-destaque{background:#163832;border-color:#163832;color:#fff}
.dc-kpi-lbl{font:700 10px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.dc-kpi-val{font:800 clamp(18px,5vw,28px)/1.1 'Inter',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Duas linhas no máximo: 'ganhos · perdidos · ciclo 12 dias (2 de 3)' é o
   contexto mais longo que existe e cabe em duas. O teto é contra o card que
   estica a fileira inteira — a altura igual entre os quatro já vem do grid,
   e forçar um piso aqui só somava altura quando uma linha bastava. */
.dc-kpi-ctx{font:500 11.5px/1.3 'Inter',sans-serif;opacity:.75;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-tend{font:700 11px/1.2 'Inter',sans-serif}
.dc-sobe{color:#047857}.dc-desce{color:#B91C1C}
.dc-kpi-destaque .dc-sobe{color:#6EE7B7}.dc-kpi-destaque .dc-desce{color:#FCA5A5}
@media(min-width:1024px){.dc-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dc-kpi{padding:13px 16px 12px}}

.dc-link{font:700 12px/1 'Inter',sans-serif;color:#10B981;text-decoration:none;white-space:nowrap}
.dc-dica{font:500 11px/1 'Inter',sans-serif;color:#9CA3AF}
.dc-vazio{margin:0;padding:12px 0;color:#6B7280;font:500 13px/1.4 'Inter',sans-serif}
.dc-rodape{margin:10px 0 0;color:#6B7280;font:500 12px/1.4 'Inter',sans-serif}

.dc-alertas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.dc-alerta{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;background:#FFFBEB;color:#92400E;font:600 12px/1.2 'Inter',sans-serif;text-decoration:none}
.dc-alerta strong{font-weight:800}
.dc-itens{display:flex;flex-direction:column;gap:6px}
.dc-item{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;padding:10px 12px;border-radius:10px;background:rgba(244,240,230,.55);text-decoration:none;min-width:0}
.dc-item:hover{background:rgba(244,240,230,.95)}
.dc-item-tit{font:700 13px/1.3 'Inter',sans-serif;color:#1C2B27;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-item-ctx{font:500 11.5px/1.35 'Inter',sans-serif;color:#6B7280;overflow-wrap:anywhere}

#dcFunil .funnel-row{display:grid;grid-template-columns:minmax(0,1fr) auto 14px;grid-template-areas:"nome num seta" "barra barra seta";row-gap:6px}
#dcFunil .dc-fase-nome{grid-area:nome;font:700 11px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#1C2B27}
#dcFunil .dc-fase-num{grid-area:num;font:700 12px/1.2 'Inter',sans-serif;color:#1C2B27;font-variant-numeric:tabular-nums;white-space:nowrap}
#dcFunil .dash-seta{grid-area:seta;align-self:center}
/* Áreas nomeadas SÓ no grid do Funil: `.dc-barra` também vive no ranking, e
   `grid-area` fora de um template cria colunas implícitas (gate v69). */
#dcFunil .dc-barra{grid-area:barra}
.dc-barra{display:block;height:4px;border-radius:2px;background:#E5E7EB;overflow:hidden}
.dc-barra>span{display:block;height:100%;background:#163832;border-radius:2px}

.dc-coluna{display:flex;flex-direction:column;gap:20px;min-width:0}

.dc-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dc-mini{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-mini-val{font:800 20px/1.1 'Inter',sans-serif;color:#1C2B27;font-variant-numeric:tabular-nums}
.dc-mini-lbl{font:500 11.5px/1.3 'Inter',sans-serif;color:#6B7280}

.dc-vend{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;border:0;border-radius:10px;background:rgba(22,56,50,.04);cursor:pointer;min-height:44px;font:inherit}
.dc-vend>*{grid-column:1;min-width:0}
.dc-vend:hover{background:rgba(22,56,50,.09)}
.dc-vend-nome{font:700 13px/1.3 'Inter',sans-serif;color:#1C2B27;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-vend-num,.dc-vend-pipe{font:500 11.5px/1.35 'Inter',sans-serif;color:#4B5563;overflow-wrap:anywhere}
.dc-badge{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;background:#FEF3C7;color:#92400E;font-weight:700}

/* Metas do Dashboard são as PESSOAIS: na visão Equipe a tela certa é metas.html. */
[data-visao="equipe"] #metasPainel{display:none!important}