/* Callface · Números — relatório/dashboard, fiel ao hub (Inter + navy + carmim) */
:root{ --azul:#3b82f6; --azul-soft:rgba(59,130,246,.1); }

.leg{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}
.leg-i{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.leg-i .d{width:9px;height:9px;border-radius:50%;display:inline-block}
.leg-i .d.ok{background:var(--verde)}
.leg-i .d.warn{background:#f59e0b}
.leg-i.seg b{width:13px;height:9px;border-radius:3px;display:inline-block}
.seg-ai{background:var(--carmim)!important}
.seg-pabx{background:var(--roxo)!important}
.seg-both{background:linear-gradient(90deg,var(--carmim),var(--roxo))!important}

/* Big numbers */
.bn{padding:20px 0 60px}
.bn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bn-card{border:1px solid var(--line);background:#fff;border-radius:var(--rc);padding:24px;position:relative;overflow:hidden}
.bn-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--line)}
.bn-card.hl-card::before{background:linear-gradient(90deg,var(--carmim),var(--roxo))}
.bn-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--soft);margin-bottom:14px}
.seg-dot{width:9px;height:9px;border-radius:50%}
.bn-card .num{font-weight:800;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.bn-card.hl-card .num{color:var(--carmim)}
.bn-card .lbl{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.4}
.bn-card .sub{font-size:12px;color:var(--soft);margin-top:6px}
.bn-card .sub.up{color:var(--verde);font-weight:600}

.src{margin-top:22px;font-size:13px;color:var(--soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ok-pill,.warn-pill{font-size:11px;font-weight:600;padding:4px 10px;border-radius:99px;letter-spacing:.02em}
.ok-pill{color:#0c5b43;background:rgba(52,211,153,.16)}
.warn-pill{color:#92400e;background:rgba(245,158,11,.14)}

/* Story sections */
.story{padding:56px 0;border-top:1px solid var(--line)}
.story.alt{background:var(--bg-2)}
.tbl-sec,.quality{padding:56px 0;border-top:1px solid var(--line)}

/* Chart card */
.chart-card{border:1px solid var(--line);background:#fff;border-radius:var(--rc);padding:28px 24px 20px}
.chart{width:100%;height:300px}
.chart svg{width:100%;height:100%;overflow:visible}
.chart-leg{display:flex;gap:22px;justify-content:center;margin-top:16px;font-size:13px;color:var(--muted)}
.chart-leg b{width:13px;height:9px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}
.bar-val{font-size:11px;font-weight:600;fill:var(--ink-2)}
.bar-axis{font-size:11px;fill:var(--soft)}
.grid-line{stroke:var(--line-soft);stroke-width:1}

/* Mini grid */
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mini{border:1px solid var(--line-soft);background:#fff;border-radius:var(--rc);padding:22px}
.mini .num{font-weight:800;font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1;color:var(--carmim);letter-spacing:-.02em}
.mini .lbl{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.4}
.warn-i{color:#f59e0b}

/* Tabela */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;overflow-x:auto;background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.tbl thead th{background:var(--bg-2);text-align:left;padding:14px 16px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--soft);border-bottom:1px solid var(--line)}
.tbl tbody td{padding:13px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl td.strong{font-weight:700;color:var(--carmim)}
.tbl td:first-child{font-weight:500;color:var(--ink)}
.cf{font-size:13px}
.cf.ok{color:var(--verde)}
.cf.warn{color:#f59e0b}

/* Quality */
.q-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.q-card{border:1px solid var(--line);background:#fff;border-radius:var(--rc);padding:24px;border-left:3px solid #f59e0b}
.q-card.ok{border-left-color:var(--verde)}
.q-card h4{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.q-card p{font-size:.95rem;color:var(--muted);line-height:1.6;margin-bottom:14px}
.q-card .q-fix{font-size:12px;font-weight:600;color:#92400e;background:rgba(245,158,11,.12);padding:5px 11px;border-radius:99px;display:inline-block}
.q-card.ok .q-fix{color:#0c5b43;background:rgba(52,211,153,.16)}

/* Responsive */
@media(max-width:880px){
  .bn-grid,.mini-grid,.mini-grid.four{grid-template-columns:repeat(2,1fr)}
  .q-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* respiro geral mais justo */
  .hero{padding:36px 0 28px}
  .hero h1{font-size:clamp(2rem,9vw,2.6rem);line-height:1.08}
  .lead{font-size:1rem}
  .story,.tbl-sec{padding:38px 0}
  .bn{padding:14px 0 38px}
  .section-head{margin-bottom:26px}
  .section-head h2{font-size:clamp(1.6rem,7vw,2rem);line-height:1.15}
  .section-head p{font-size:.98rem}

  /* cards 2 colunas (melhor que 1 — menos rolagem, leitura ok) */
  .bn-grid,.mini-grid,.mini-grid.four{grid-template-columns:repeat(2,1fr);gap:10px}
  .bn-card,.mini{padding:16px 14px}
  .bn-card .num{font-size:1.5rem}
  .mini .num{font-size:1.4rem}
  .bn-card .lbl,.mini .lbl{font-size:12px}
  .bn-card .sub{font-size:11px}
  .bn-top{font-size:11px;margin-bottom:10px}

  /* gráficos: mais altos no mobile pra respirar */
  .chart{height:260px}
  .chart-card{padding:18px 12px 14px}
  .chart-leg{gap:14px;font-size:12px;flex-wrap:wrap}

  /* TABELA → vira cards empilhados (cada métrica é um bloco) */
  .tbl-wrap{border:none;background:transparent;overflow:visible}
  .tbl{min-width:0;font-size:14px;display:block}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tbody tr{
    display:block;background:#fff;border:1px solid var(--line);
    border-radius:var(--rc);padding:14px 16px;margin-bottom:10px;
  }
  .tbl tbody tr:hover{background:#fff}
  .tbl tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:5px 0;border:none;text-align:right;color:var(--ink-2);
  }
  .tbl tbody td:first-child{
    font-weight:700;color:var(--ink);font-size:15px;
    padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line-soft);
    display:block;text-align:left;
  }
  .tbl tbody td[data-l]::before{
    content:attr(data-l);font-weight:500;color:var(--soft);font-size:12px;
    text-align:left;margin-right:auto;
  }
  .tbl td.strong{color:var(--carmim)}
}

/* ── Tooltip interativo dos gráficos ── */
.chart-tip{
  position:fixed;z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--ink);color:#fff;border-radius:10px;padding:10px 12px;font-size:13px;
  box-shadow:0 10px 30px rgba(26,26,46,.25);min-width:120px;line-height:1.4;
}
.chart-tip b{display:block;font-size:12px;color:rgba(255,255,255,.6);font-weight:600;margin-bottom:6px;text-transform:capitalize}
.chart-tip .tr{display:flex;align-items:center;gap:7px;font-weight:500}
.chart-tip .tr i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.chart-tip .tr em{margin-left:auto;font-style:normal;font-weight:700;padding-left:14px}
.chart-tip .tr.cpl{color:rgba(255,255,255,.55);font-size:12px;margin-top:2px}
.chart svg rect[style*="cursor"]:hover{fill:rgba(226,55,82,.04)}

.chart-card.big{padding:30px 26px 22px}
.chart.tall{height:380px}
@media(max-width:560px){.chart.tall{height:300px}}