/* ===========================================================================
   Efeito Vidro (Glassmorphism) + Shine sweep + Pulse
   Receita: "Efeito Vidro (Glassmorphism).md", variante TEMA CLARO.

   Camada de SUPERFÍCIE. Os valores vêm dos tokens de theme.css — mexer em cor,
   raio ou sombra é lá, não aqui.

   Três técnicas independentes:
     1. .glass        — o vidro fosco translúcido
     2. .glass::after — o reflexo que atravessa no hover (shine sweep)
     3. .dot-pulse    — o pontinho de status que respira

   Sem hover lift de propósito (nada de translateY levantando o card).
   Se um dia quiser, adicione `transform: translateY(-4px)` no .glass:hover.
   =========================================================================== */

:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-borda: rgba(255, 255, 255, 0.85);
  --glass-blur: 14px;
}

/* ── 1) O vidro ──────────────────────────────────────────────────────────── */
.glass {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg) !important;
  border: 1px solid var(--linha) !important;
  border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  box-shadow: var(--s-sm) !important;
  transition: box-shadow var(--t), border-color var(--t);
}

/* ── 2) Shine sweep: a faixa de luz que cruza no hover ───────────────────── */
.glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg,
              transparent,
              rgba(255, 255, 255, 0.5),
              transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--curva);
  pointer-events: none;
  z-index: 1;
}

.glass:hover::after { left: 130%; }

.glass:hover {
  box-shadow: var(--s-md) !important;
  border-color: var(--linha-media) !important;
}

/* O conteúdo fica acima da faixa de luz */
.glass > * { position: relative; z-index: 2; }

.glass-clicavel { cursor: pointer; }

/* Fio da cor de acento na borda esquerda */
.glass-acento { border-left: 3px solid var(--cor-acento, var(--brand-600)) !important; }

/* ── 3) Pulse: o pontinho de status que respira ──────────────────────────── */
.dot-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  animation: dotpulse 1.8s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes dotpulse {
  0%, 100% { box-shadow: 0 0 3px currentColor; opacity: 0.8; }
  50%      { box-shadow: 0 0 10px currentColor,
                         0 0 0 4px rgba(255, 255, 255, 0.6); opacity: 1; }
}

/* ── Convivência com o Bootstrap ─────────────────────────────────────────── */

/* KPI = dbc.Button envolvendo dbc.Card: o botão não pode ter fundo próprio */
.kpi-botao,
.kpi-botao:hover,
.kpi-botao:focus,
.kpi-botao:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}
.kpi-botao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ── Grade dos indicadores ───────────────────────────────────────────────────
   Eram 5 colunas do Bootstrap em md=2: 10 de 12, sobrava um vão à direita, e
   cada card tinha margem própria somada ao espaçamento da linha. Grade divide
   em partes iguais e o alinhamento sai de graça. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e-3);
  align-items: stretch;
}
.kpi-celula { min-width: 0; display: flex; }
.kpi-botao { width: 100%; display: flex !important; }
.kpi-card {
  width: 100%;
  display: flex; flex-direction: column;
}
.kpi-card .card-body,
.kpi-corpo {
  display: flex; flex-direction: column;
  width: 100%;
  padding: var(--e-4);
}

/* Título em cima com o ícone; valor e legenda embaixo. Assim o número de
   todos os cards fica na mesma linha, tenha R$ ou não. */
.kpi-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-2);
  min-height: 30px;          /* reserva o espaço do título de duas linhas */
}
.kpi-titulo { min-width: 0; }
.kpi-icone { font-size: 22px; line-height: 1; opacity: 0.9; flex: 0 0 auto; }

.kpi-valor {
  /* Encolhe sozinho quando o valor é longo (R$ 20.820,00) em vez de quebrar */
  font-size: clamp(18px, 1.7vw + 8px, 28px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--brand-700, #1e3a5f);
  margin-top: auto;          /* empurra o número para a base do card */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-sub {
  font-size: 11px;
  color: var(--txt-fraco);
  margin-top: 2px;
  min-height: 15px;
}

@media (max-width: 1199.98px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .kpi-card .card-body, .kpi-corpo { padding: var(--e-3); }
}
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-valor { font-size: 24px; }
}

/* Tabelas e cabeçalhos dentro do vidro: transparentes, senão tapam o borrado */
.glass .table,
.glass .table > :not(caption) > * > * { background-color: transparent !important; }

.glass .card-header {
  background: rgba(255, 255, 255, 0.28) !important;
  border-bottom: 1px solid var(--linha) !important;
}

/* Gráficos Plotly: o papel branco tapa o vidro */
.glass .js-plotly-plot .plot-container,
.glass .js-plotly-plot .svg-container { background: transparent !important; }

/* Modal de vidro: mais opaco (precisa ler formulário) e sem reflexo */
.modal-content.glass {
  --glass-bg: rgba(255, 255, 255, 0.94);
  --glass-blur: 20px;
  border-radius: var(--r-lg);
}

/* Menos animação: sem pulso nem reflexo */
@media (prefers-reduced-motion: reduce) {
  .glass::after { transition: none; }
  .dot-pulse { animation: none; }
}

/* Celular: blur pesa. Reduz e aumenta a opacidade para manter a legibilidade */
@media (max-width: 767.98px) {
  .glass { --glass-blur: 8px; --glass-bg: rgba(255, 255, 255, 0.88); }
}

/* Navegador sem backdrop-filter: cai para branco opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(255, 255, 255, 0.96) !important; }
}