/* Dashboard do Smart Pátio — linguagem "Gestão à Vista":
   escala slate, cards com anel, KPI com barra de acento e holofote no hover,
   tooltip de vidro (escuro nos dois temas) e números tabulares.
   Os tokens seguem os de components/consignado/tema.js do ConectBus. */

.gv {
  --sl50:#f8fafc; --sl100:#f1f5f9; --sl200:#e2e8f0; --sl300:#cbd5e1; --sl400:#94a3b8;
  --sl500:#64748b; --sl600:#475569; --sl700:#334155; --sl800:#1e293b; --sl900:#0f172a; --sl950:#020617;

  --blue500:#3b82f6;    --blue600:#2563eb;    --blue-ring:#bfdbfe;    --blue-rgb:59,130,246;
  --violet500:#8b5cf6;  --violet600:#7c3aed;  --violet-ring:#ddd6fe;  --violet-rgb:139,92,246;
  --cyan500:#06b6d4;    --cyan600:#0891b2;    --cyan-ring:#a5f3fc;    --cyan-rgb:6,182,212;
  --emerald500:#10b981; --emerald600:#059669; --emerald-ring:#a7f3d0; --emerald-rgb:16,185,129;
  --amber500:#f59e0b;   --amber600:#d97706;   --amber-ring:#fde68a;   --amber-rgb:245,158,11;
  --rose500:#f43f5e;    --rose600:#e11d48;    --rose-ring:#fecdd3;    --rose-rgb:244,63,94;

  --gv-card:#ffffff;
  --gv-anel:var(--sl200);
  --gv-sombra:0 1px 2px rgb(0 0 0 / 5%);
  --gv-titulo:var(--sl700);
  --gv-forte:var(--sl800);
  --gv-texto:var(--sl700);
  --gv-fraco:var(--sl500);
  --gv-apagado:var(--sl400);
  --gv-grade:var(--sl200);
  --gv-caixa:var(--sl50);
  --gv-num:'Inter', ui-sans-serif, system-ui, sans-serif;
  display: grid;
  gap: 20px;
  font-variant-numeric: tabular-nums;
}
:root[data-tema="escuro"] .gv {
  --gv-card:var(--sl900);
  --gv-anel:var(--sl800);
  --gv-sombra:0 1px 2px rgb(0 0 0 / 35%);
  --gv-titulo:var(--sl300);
  --gv-forte:var(--sl100);
  --gv-texto:var(--sl300);
  --gv-fraco:var(--sl400);
  --gv-apagado:var(--sl500);
  --gv-grade:var(--sl700);
  --gv-caixa:rgb(30 41 59 / 60%);
  --blue-ring:rgb(30 64 175 / 50%);
  --violet-ring:rgb(91 33 182 / 50%);
  --cyan-ring:rgb(21 94 117 / 50%);
  --emerald-ring:rgb(6 95 70 / 50%);
  --amber-ring:rgb(146 64 14 / 50%);
  --rose-ring:rgb(159 18 57 / 50%);
}

/* ---------- cabeçalho da página ---------- */
.gv-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gv-topo .espaco { flex: 1; }
.gv-periodo { display: inline-flex; border: 1px solid var(--gv-anel); border-radius: 10px; overflow: hidden; background: var(--gv-card); }
.gv-periodo button {
  border: 0; border-right: 1px solid var(--gv-anel); border-radius: 0; box-shadow: none;
  min-height: 38px; padding: 8px 16px; background: transparent; color: var(--gv-fraco);
  font: 600 13px var(--gv-num); letter-spacing: .02em;
}
.gv-periodo button:last-child { border-right: 0; }
.gv-periodo button.ativa { background: var(--blue500); color: #fff; }

/* ---------- KPI ---------- */
/* Quantos cartoes couberem: 6 no monitor largo, 3 no notebook, 2 no celular,
   sem depender de faixas fixas de largura. */
.gv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(12px, 1vw, 16px); }

.gv-kpi {
  position: relative; overflow: hidden; border-radius: 16px; padding: 18px 16px 16px;
  background: var(--gv-card); box-shadow: 0 0 0 1px var(--anel-tom);
  transition: box-shadow .3s, transform .3s;
}
.gv-kpi:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 20px rgb(var(--rgb-tom) / 50%), 0 0 40px rgb(var(--rgb-tom) / 20%), 0 0 0 1px var(--anel-tom);
}
.gv-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--cor-tom), var(--cor-tom-escura));
}
.gv-kpi::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle 160px at var(--x, 50%) var(--y, 50%), rgb(var(--rgb-tom) / 12%), transparent 70%);
  transition: opacity .3s;
}
.gv-kpi:hover::after { opacity: 1; }
.gv-kpi h3 {
  position: relative; margin: 0 0 8px; font: 600 12px/1.3 var(--gv-num);
  text-transform: uppercase; letter-spacing: .05em; color: var(--gv-fraco);
}
.gv-kpi .valor {
  position: relative; display: block; font: 800 clamp(17px, 1.25vw, 24px)/1.2 var(--gv-num);
  color: var(--gv-forte); white-space: nowrap; transition: color .3s, text-shadow .3s;
}
.gv-kpi:hover .valor { color: var(--cor-tom-texto); text-shadow: 0 0 6px rgb(0 0 0 / 15%); }
:root[data-tema="escuro"] .gv-kpi:hover .valor { color: #fff; text-shadow: 0 0 8px rgb(255 255 255 / 60%); }
.gv-kpi .sub { position: relative; display: block; margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--gv-apagado); }
.gv-kpi .variacao { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.gv-pilula {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px;
  font: 700 12px var(--gv-num); white-space: nowrap;
}
.gv-pilula.sobe { background: rgb(var(--emerald-rgb) / 12%); color: var(--emerald600); }
.gv-pilula.desce { background: rgb(var(--rose-rgb) / 12%); color: var(--rose600); }
.gv-pilula.igual { background: rgb(var(--blue-rgb) / 12%); color: var(--blue600); }
:root[data-tema="escuro"] .gv-pilula.sobe { color: #34d399; }
:root[data-tema="escuro"] .gv-pilula.desce { color: #fb7185; }
:root[data-tema="escuro"] .gv-pilula.igual { color: #60a5fa; }
.gv-kpi .comparacao { font-size: 11px; color: var(--gv-apagado); white-space: nowrap; }

/* ---------- cartão de gráfico ---------- */
.gv-grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.gv-grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }

.gv-cartao {
  position: relative; background: var(--gv-card); border: 1px solid var(--gv-anel);
  border-radius: 16px; padding: 20px; box-shadow: var(--gv-sombra); min-width: 0;
}
.gv-cartao > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.gv-cartao h3 { margin: 0; font: 700 15px/1.4 var(--gv-num); text-transform: uppercase; letter-spacing: .04em; color: var(--gv-titulo); }
.gv-cartao .legenda-cartao { margin-top: 2px; font: 500 12px var(--gv-num); color: var(--gv-apagado); }
.gv-legendas { display: flex; gap: 14px; flex-wrap: wrap; }
.gv-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gv-fraco); }
.gv-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* O desenho e refeito na largura real do cartao (ResizeObserver no
   dashboard.js): sem isso o SVG escalava junto, e num monitor largo o
   grafico de 30 dias virava um bloco de 600px de altura com texto gigante. */
.gv-area { width: 100%; min-width: 0; }
.gv-svg { display: block; width: 100%; overflow: visible; }
.gv-svg .grade { stroke: var(--gv-grade); stroke-dasharray: 3 4; }
.gv-svg .eixo { fill: var(--sl400); font: 500 11px var(--gv-num); }
.gv-svg .rotulo-barra { fill: var(--gv-fraco); font: 600 11px var(--gv-num); }
.gv-svg .cursor { fill: rgb(148 163 184 / 12%); }
.gv-svg .alvo { fill: transparent; cursor: pointer; }

/* ---------- tooltip de vidro ---------- */
.gv-vidro {
  position: absolute; z-index: 40; min-width: 200px; padding: 14px 16px; border-radius: 16px;
  background: rgb(10 15 30 / 92%); border: 1px solid rgb(255 255 255 / 10%);
  box-shadow: 0 12px 40px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 8%);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff; pointer-events: none; opacity: 0; transition: opacity .12s;
}
.gv-vidro.visivel { opacity: 1; }
.gv-vidro .titulo { display: block; font: 900 15px var(--gv-num); margin-bottom: 10px; }
.gv-vidro .linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.gv-vidro .linha:last-child { margin-bottom: 0; }
.gv-vidro .nome { display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--gv-num); color: #94a3b8; }
.gv-vidro .nome i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / 20%); }
.gv-vidro .valor { font: 700 14px var(--gv-num); color: #fff; }

/* ---------- tabela dentro do cartão ---------- */
.gv-tabela { width: 100%; border-collapse: collapse; }
.gv-tabela th {
  position: sticky; top: 0; background: var(--gv-caixa); text-align: left; white-space: nowrap;
  padding: 10px 12px; font: 600 11px/1.4 var(--gv-num); text-transform: uppercase; letter-spacing: .04em;
  color: var(--gv-fraco); border-bottom: 1px solid var(--gv-anel);
}
.gv-tabela td { padding: 12px; border-bottom: 1px solid var(--gv-anel); font-size: 14px; color: var(--gv-texto); }
.gv-tabela tbody tr:last-child td { border-bottom: 0; }
.gv-tabela tbody tr:hover { background: var(--gv-caixa); }
.gv-rolagem { max-height: 420px; overflow: auto; }
.gv-selo {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
  font: 700 10px var(--gv-num); text-transform: uppercase; letter-spacing: .04em;
}
.gv-selo.alerta { background: rgb(var(--rose-rgb) / 14%); color: var(--rose600); }
.gv-selo.ok { background: rgb(var(--emerald-rgb) / 14%); color: var(--emerald600); }
.gv-selo.neutro { background: var(--gv-caixa); color: var(--gv-fraco); }
:root[data-tema="escuro"] .gv-selo.alerta { color: #fb7185; }
:root[data-tema="escuro"] .gv-selo.ok { color: #34d399; }
.gv-vazio { padding: 40px 16px; text-align: center; color: var(--gv-apagado); font-size: 14px; }
.gv-placa { font: 600 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--gv-forte); }