/* Painel · metricas (usa os tokens de admin.css). Também vale para o gráfico da tela inicial. */

/* ── topo: período ── */
.metricas-topo{display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:100%}
.metricas-periodo{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:var(--raio); background:var(--surface); border:1px solid var(--border)}
.metricas-intervalo{font-size:12.5px; color:var(--ink-soft); text-align:right}

/* ── indicadores com variação ── */
.metricas-indicadores{grid-template-columns:repeat(3, minmax(0, 1fr))}
.metricas-indicadores .indicador{display:flex; flex-direction:column; min-width:0}
.metricas-indicadores .valor.metricas-valor-texto{font-size:20px; line-height:1.3}
.metricas-variacao{margin-top:6px; font-size:12.5px; line-height:1.4; color:var(--ink-soft)}
.metricas-variacao b{color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums}
.metricas-seta{display:inline-block; margin-right:3px; color:var(--acento); font-weight:700}

/* ── cartões ── */
.metricas-cartao{margin-bottom:16px; min-width:0}
.metricas-grade{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:16px}
.metricas-grade > .cartao{min-width:0}
.metricas-sub{margin-top:2px; font-size:12.5px; color:var(--ink-soft)}
.metricas-cartao .vazio, .metricas-grade .vazio{padding:32px 12px}
.metricas-secao + .metricas-secao{margin-top:18px}
.metricas-secao h3{margin-bottom:10px; font:600 13px/1.3 var(--sans); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}
.metricas-rodape{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:6px}
.metricas-rodape p{flex:1 1 320px; min-width:0; color:var(--ink-soft); font-size:12.5px; line-height:1.5}
.metricas-rodape .botao{flex:none}

/* ── barras horizontais (funil, origens, contatos, leads) ── */
.metricas-barras{display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none}
.metricas-barras-linha{display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--ink-2); font-size:13.5px}
.metricas-barras-linha > span:first-child{min-width:0; overflow-wrap:anywhere}
.metricas-barras-valor{flex:none; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.metricas-barras-pct{margin-left:6px; color:var(--ink-soft); font-weight:500}
.metricas-trilho{height:10px; margin-top:6px; border-radius:999px; background:var(--elev-2); overflow:hidden}
.metricas-trilho > span{display:block; height:100%; border-radius:inherit; background:var(--acento)}
.metricas-barras .ajuda{margin-top:4px; color:var(--ink-soft)}

/* ── tabela de cliques por botão (rola por dentro no celular) ── */
.metricas-rolagem{overflow-x:auto; border:1px solid var(--border); border-radius:var(--raio-sm); -webkit-overflow-scrolling:touch}
.metricas-rolagem:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
.metricas-tabela{width:100%; min-width:460px; border-collapse:collapse; font-size:13.5px}
.metricas-tabela th, .metricas-tabela td{padding:10px 12px; border-top:1px solid var(--border); text-align:right; white-space:nowrap}
.metricas-tabela thead th{border-top:0; background:var(--bg-2); color:var(--ink-soft); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.metricas-tabela thead th:first-child, .metricas-tabela tbody th{text-align:left}
.metricas-tabela tbody th{color:var(--ink); font-weight:500; white-space:normal; min-width:150px}
.metricas-tabela td{color:var(--ink-2); font-variant-numeric:tabular-nums}
.metricas-tabela td:last-child{color:var(--ink); font-weight:600}
.metricas-zap{display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--ok); vertical-align:middle}

/* ── tela inicial: últimos 7 dias ── */
.inicio-semana .grade-2{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px}
.inicio-semana .grade-2 > div{min-width:0}
.inicio-semana h3{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; font:600 14px/1.3 var(--sans); color:var(--ink-2)}
.inicio-semana h3 span{font:600 20px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.inicio-semana .cartao-titulo{flex-wrap:wrap}

@media (max-width:1000px){
  .metricas-grade{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:860px){
  .inicio-semana .grade-2{grid-template-columns:minmax(0, 1fr)}
  .metricas-topo{align-items:flex-start; width:100%}
  .metricas-intervalo{text-align:left}
}
@media (max-width:640px){
  .metricas-indicadores{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .metricas-indicadores .indicador{padding:14px}
  .metricas-indicadores .valor{font-size:26px}
}
@media (pointer:coarse){
  .metricas-periodo .botao{min-height:44px}
}