/* consumo.css — página de Consumo de IA da telefonia (Fase 2, 28/09/2026).
   Reaproveita as variáveis de marca e os componentes (.kpi-card, .pill,
   .modal-fundo, .toast, table.tabela-clientes...) definidos em styles.css;
   aqui só o que é específico desta página. */

.consumo-main { max-width: 1200px; margin: 0 auto; padding: 0 1rem 3rem; }
@media (min-width: 640px) { .consumo-main { padding: 0 2rem 3rem; } }
.consumo-sub { color: var(--fg-muted); max-width: 680px; margin-bottom: 1.4rem; }

#tela-sem-acesso { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1rem; }
#tela-sem-acesso .card-login { text-align: center; }
#tela-sem-acesso h1 { margin: 0.6rem 0; font-size: 1.4rem; }
#tela-sem-acesso p { color: var(--fg-muted); margin-bottom: 1.2rem; }
#tela-sem-acesso .btn { display: inline-block; width: auto; text-decoration: none; }

/* ---- Filtros ---- */
.filtros-consumo {
  display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4);
  padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; box-shadow: var(--shadow-sm);
}
.filtros-periodo { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.chip-periodo {
  border: 1px solid var(--border-2); background: transparent; color: var(--fg);
  border-radius: var(--r-pill); padding: 0.35rem 0.9rem; font-size: 0.82rem;
}
.chip-periodo.ativa { background: var(--gradiente-marca); color: #fff; border-color: transparent; }
.filtros-periodo-personalizado { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--fg-soft); }
.filtros-periodo-personalizado input[type="date"] {
  border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 0.3rem 0.5rem;
  background: var(--bg-elev); color: var(--fg); font-family: inherit;
}
.filtros-selects { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.filtros-selects select {
  border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 0.4rem 0.6rem;
  background: var(--bg-elev); color: var(--fg); font-family: inherit; font-size: 0.82rem; max-width: 180px;
}

/* ---- Cartões (reaproveita .kpi-card de styles.css) ---- */
.cartoes-consumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 0.9rem; margin-bottom: 1.4rem; }
.kpi-card__legenda { font-size: 0.76rem; color: var(--fg-soft); margin-top: 0.35rem; line-height: 1.35; }
.kpi-card--alerta { border-color: var(--warning); }

/* ---- Alertas ---- */
.painel-alertas { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.4rem; }
.alerta-card { border-radius: var(--r-4); padding: 0.9rem 1.1rem; font-size: 0.86rem; border: 1px solid transparent; line-height: 1.45; }
.alerta-card--atencao { background: rgba(214,162,78,0.14); border-color: var(--warning); }
.alerta-card--critico { background: rgba(224,64,122,0.14); border-color: var(--danger); }
.alerta-card b { display: block; margin-bottom: 0.2rem; }

/* ---- Gráficos SVG (sem lib -- CSP so' permite script-src 'self') ---- */
.graficos-consumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.bloco-grafico { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); }
.grafico-legenda { font-size: 0.78rem; color: var(--fg-soft); margin: 0.2rem 0 0.9rem; line-height: 1.4; }

.grafico-svg-wrap { position: relative; }
.grafico-svg-wrap svg { display: block; width: 100%; height: auto; }
.barra-dia { fill: var(--ac-blue); transition: fill .12s; cursor: pointer; }
.barra-dia:hover { fill: var(--accent); }
.eixo-dia { font-family: var(--font-sans); font-size: 8px; fill: var(--fg-soft); }

.tooltip-flutuante {
  position: absolute; pointer-events: none; background: var(--ac-ink); color: var(--sobre-escuro);
  font-size: 0.76rem; padding: 0.4rem 0.65rem; border-radius: var(--r-3); box-shadow: var(--shadow-md);
  white-space: nowrap; transform: translate(-50%, -120%); z-index: 20;
}

.legenda-rosca { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1rem; font-size: 0.82rem; }
.legenda-rosca .item { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; }
.legenda-rosca .item .nome { display: flex; align-items: center; gap: 0.5rem; }
.legenda-rosca .bolinha { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* ---- Tabela de ligações ---- */
.bloco-tabela { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-4); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-sm); }
.tabela-scroll { overflow-x: auto; }
.selo { font-size: 0.65rem; text-transform: uppercase; padding: 0.15em 0.6em; border-radius: var(--r-pill); font-weight: 700; }
.selo--medido { background: rgba(31,169,122,0.14); color: var(--success); }
.selo--estimado { background: rgba(214,162,78,0.16); color: var(--warning); }
.pendente-texto { color: var(--fg-soft); font-style: italic; }

/* ---- Modal de detalhe da ligação ---- */
.detalhe-ligacao dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.86rem; margin: 0 0 0.4rem; }
.detalhe-ligacao dt { color: var(--fg-soft); }
.detalhe-ligacao dd { margin: 0; font-variant-numeric: tabular-nums; }
.detalhe-ligacao h4 { margin: 1.1rem 0 0.5rem; font-family: var(--font-sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-soft); }

@media (max-width: 780px) {
  .filtros-consumo { flex-direction: column; align-items: stretch; }
  .filtros-selects { margin-left: 0; }
  .filtros-selects select { max-width: none; flex: 1 1 auto; }
  table.tabela-clientes { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
}