/* AgriFlow — Inteligência de Campo (ADR 0082, proposed).
   Mobile primeiro. Reusa os blocos do Dashboard (dc-kpi, dc-chip, dc-estado,
   dc-escopo). O que é só daqui: o bloco de qualidade dos dados, o mapa com
   altura controlada, e as duas tabelas que viram cartões no celular. */

[hidden]{display:none!important}

.ic-kpi{position:relative}
.ic-kpi-aviso{display:block;margin-top:4px;font:600 11px/1.3 'Inter',sans-serif;color:#92400E}
.dc-kpi-destaque .ic-kpi-aviso{color:#FDE68A}
/* Oito cards: 2×4 no celular, 4×2 no desktop. */
.ic-kpis{grid-auto-rows:auto}
/* Três estados no contexto do card de visitas: cabe em três linhas no celular. */
.ic-kpi .dc-kpi-ctx{-webkit-line-clamp:3}

.ic-andamento{margin:0 0 12px;font:600 12.5px/1.4 'Inter',sans-serif;color:#1C2B27;padding:10px 12px;border-radius:10px;background:#FFFBEB}

/* Qualidade dos dados: uma linha por cobertura, barra proporcional, nota. */
.ic-qual{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ic-qual-item{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lbl val" "barra barra" "nota nota";row-gap:4px;column-gap:10px}
.ic-qual-lbl{grid-area:lbl;font:700 12px/1.3 'Inter',sans-serif;color:#1C2B27}
.ic-qual-val{grid-area:val;font:700 12px/1.3 'Inter',sans-serif;color:#1C2B27;font-variant-numeric:tabular-nums;white-space:nowrap}
.ic-barra{grid-area:barra}
.ic-qual-nota{grid-area:nota;font:500 11px/1.35 'Inter',sans-serif;color:#6B7280}

/* Metodologia: prosa curta, sempre visível, nunca tooltip. */
.ic-metodo{margin:0;padding:0 0 0 18px;font:500 12.5px/1.5 'Inter',sans-serif;color:#4B5563}
.ic-metodo li{margin-bottom:6px}
details.ic-detalhes>summary{cursor:pointer;font:700 13px/1.3 'Inter',sans-serif;color:#163832;min-height:44px;display:flex;align-items:center}

/* Mapa: altura controlada — no celular ~45vh, nunca a tela inteira. */
.ic-mapa-legenda{margin:0 0 10px;font:500 12.5px/1.4 'Inter',sans-serif;color:#4B5563}
.ic-mapa-area{width:100%;height:45vh;min-height:220px;max-height:420px;border-radius:12px;overflow:hidden;border:1px solid rgba(22,56,50,.12);margin-bottom:12px;background:#E5E7EB}
.ic-pontos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ic-ponto{display:flex;flex-direction:column;gap:2px;min-height:44px;justify-content:center;padding:8px 12px;border-radius:10px;background:rgba(244,240,230,.55)}
.ic-ponto a{font:700 13px/1.3 'Inter',sans-serif;color:#163832;text-decoration:none}
.ic-ponto span{font:500 11.5px/1.35 'Inter',sans-serif;color:#6B7280}
.ic-pop-resultado{margin:4px 0;font-size:12px;color:#374151}
.ic-pop-dist{font-size:11px;color:#6B7280}
.leaflet-container a{color:#163832;font-weight:700}

/* Tabelas: desktop de verdade; no celular cada <tr> vira um cartão com o
   rótulo da coluna por célula (`data-th`), sem rolagem lateral. */
.ic-tabela-wrap{width:100%;overflow-x:auto}
.ic-tabela{width:100%;border-collapse:collapse;font:500 12.5px/1.35 'Inter',sans-serif;color:#1C2B27}
.ic-tabela th{text-align:left;font:700 10.5px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;padding:8px 10px;border-bottom:1px solid rgba(22,56,50,.12);white-space:nowrap}
.ic-tabela td{padding:10px;border-bottom:1px solid rgba(22,56,50,.07);vertical-align:top}
.ic-tabela td.ic-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.ic-tabela small{display:block;font:500 11px/1.3 'Inter',sans-serif;color:#6B7280}
.ic-vend-nome,.ic-cli-link{font:700 13px/1.3 'Inter',sans-serif;color:#163832;text-decoration:none}
.ic-cli-link{display:inline-flex;min-height:44px;align-items:center}
.ic-cli-lugar,.ic-vend-vazio{display:block;font:500 11px/1.3 'Inter',sans-serif;color:#6B7280}
.ic-resultado{display:block;max-width:320px;min-width:0;font:500 12px/1.4 'Inter',sans-serif;color:#374151;white-space:normal;overflow-wrap:break-word}
.ic-resultado.ic-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ic-vermais{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:#163832;font:700 12px/1 'Inter',sans-serif;cursor:pointer}

@media (max-width:767px){
  .ic-tabela thead{display:none}
  .ic-tabela,.ic-tabela tbody,.ic-tabela tr,.ic-tabela td{display:block;width:100%;box-sizing:border-box}
  .ic-tabela tr{padding:10px 12px;margin-bottom:8px;border-radius:12px;background:rgba(244,240,230,.55);border:0}
  /* Métrica curta: rótulo em max-content (nunca comprimido), valor no resto.
     Era minmax(0,1fr) auto — o valor tomava a largura e o rótulo virava uma
     coluna de um caractere por linha. */
  .ic-tabela td{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:10px;padding:4px 0;border:0;text-align:right;min-width:0;overflow-wrap:break-word}
  .ic-tabela td::before{content:attr(data-th);text-align:left;font:600 11px/1.3 'Inter',sans-serif;color:#6B7280;white-space:nowrap;align-self:start}
  /* Sem rótulo, a célula do cliente tem UMA coluna fluida (max-content aqui
     empurraria o nome comprido para fora do cartão). */
  .ic-tabela td:first-child{text-align:left;grid-template-columns:minmax(0,1fr)}
  .ic-tabela td:first-child::before{display:none}
  .ic-tabela td.ic-num{white-space:normal}
  /* Narrativa: bloco de largura integral, rótulo em cima, texto embaixo. */
  .ic-tabela td.ic-narrativa{display:block;text-align:left;padding-top:8px;margin-top:4px;border-top:1px dashed rgba(22,56,50,.12)}
  .ic-tabela td.ic-narrativa::before{display:block;margin-bottom:2px;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}
  .ic-tabela td.ic-narrativa.ic-vazia{display:none}
  .ic-resultado{max-width:none;text-align:left}
}

.ic-split{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:1024px){
  .ic-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ic-mapa-area{height:420px}
}
/* A tabela de clientes tem nove colunas: só divide a largura com o mapa
   quando sobra tela de verdade (a 1366 ela ficava espremida). */
@media (min-width:1440px){
  .ic-split{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}
}