/* dist/css/login-fundo.css — fundo da tela de login: o painel em mosaico.
   Um plano maior que a tela, inclinado a 45°, com colunas de cards do dashboard correndo na diagonal em
   velocidades diferentes (dist/js/login-fundo.js move as colunas e recicla os cards). Dentro dos cards tudo é
   animado só com CSS: linhas que se traçam, bolinhas que pulsam, números que rolam, barras que sobem, conversas
   que chegam. Colunas "longe" ficam menores e levemente desfocadas. Os dados são todos de exemplo. */

#fundo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.mosaico {
  position: absolute; left: 50%; top: 50%;
  width: var(--mw); height: var(--mh);
  display: flex; gap: var(--gap, 22px); align-items: flex-start;
  transform: translate(-50%, -50%) rotate(var(--inclinacao, -45deg));
  transform-origin: center;
  opacity: .22; /* o Ali pediu menos presença (duas vezes): o mosaico é cenário, o login é a cena */
}
.coluna { flex: 0 0 var(--cw, 300px); display: flex; flex-direction: column; gap: var(--gap, 22px); will-change: transform; }
.coluna.longe { scale: .94; opacity: .72; filter: blur(1.2px); }
/* Halo claro no centro: o título e o card de login continuam legíveis por cima do mosaico */
.foco { position: absolute; inset: 0; background: radial-gradient(ellipse 58% 60% at 50% 44%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .55) 38%, rgba(255, 255, 255, 0) 72%); }

/* ---- card ---- */
.card {
  position: relative; width: 100%; padding: 18px 20px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .84); border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 0 18px 44px -24px rgba(15, 23, 42, .28), 0 0 0 1px rgba(15, 23, 42, .04);
  color: #0f172a; font-family: 'Inter', system-ui, sans-serif; font-size: 13px; line-height: 1.3;
  overflow: hidden;
}
.rot { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #64748b; }
.rot .led { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: led 3s ease-out infinite; }
@keyframes led { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); } 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.val { display: flex; align-items: baseline; gap: 10px; margin-top: 5px; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.val small { font-size: 13px; font-weight: 600; color: #64748b; letter-spacing: 0; }
.delta { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.delta.up   { color: #15803d; background: rgba(22, 163, 74, .12); }
.delta.down { color: #b91c1c; background: rgba(220, 38, 38, .1); }
.chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(6, 111, 209, .1); color: #0556a3; }
.chip.ok { background: rgba(22, 163, 74, .12); color: #15803d; }
.chip.quente { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.chip.morno { background: rgba(245, 158, 11, .14); color: #b45309; }

/* números que rolam (contador em CSS: a propriedade registrada --n anima entre --de e --ate) */
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.num { --n: 0; counter-reset: n var(--n); animation: contar var(--cdur, 8s) cubic-bezier(.2, .8, .2, 1) var(--cdel, 0s) infinite alternate; }
.num::before { content: counter(n); }
.num.pct::after { content: '%'; }
.num.k::after { content: ' k'; font-size: .6em; color: #64748b; }
@keyframes contar { from { --n: var(--de); } to { --n: var(--ate); } }

/* sparkline: a linha se traça, segura e some; a área surge junto; a bolinha do fim pulsa */
.spark { display: block; width: 100%; height: 50px; margin-top: 10px; overflow: visible; }
.spark .grade { stroke: rgba(15, 23, 42, .07); stroke-width: 1; }
.spark .area { fill: url(#gSpark); animation: surge var(--sdur, 9s) ease-in-out var(--sdel, 0s) infinite; }
.spark .linha { fill: none; stroke: #066fd1; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar var(--sdur, 9s) ease-in-out var(--sdel, 0s) infinite; }
.spark .linha.cyan { stroke: #06b6d4; }
.spark .ponto { fill: #066fd1; stroke: #fff; stroke-width: 2; animation: pulsa 2.6s ease-in-out var(--pdel, 0s) infinite; }
.spark .ponto.cyan { fill: #06b6d4; }
@keyframes tracar { 0% { stroke-dashoffset: 1; } 38% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes surge { 0%, 22% { opacity: 0; } 45%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulsa { 0%, 100% { r: 2.6; opacity: 1; } 50% { r: 4.6; opacity: .45; } }
.grafico .spark { height: 110px; margin-top: 12px; }
.grafico .spark .linha { stroke-width: 2.2; }

/* barras por dia: sobem com atraso em cascata e trocam de altura */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 84px; margin-top: 12px; }
.barra { flex: 1; height: 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #06b6d4, #066fd1); opacity: .8; transform-origin: bottom; transform: scaleY(var(--h1)); animation: cresce var(--bdur, 8s) ease-in-out calc(var(--i) * .16s) infinite; }
.barra.hoje { opacity: 1; }
@keyframes cresce { 0% { transform: scaleY(.06); } 28%, 48% { transform: scaleY(var(--h1)); } 66%, 84% { transform: scaleY(var(--h2)); } 100% { transform: scaleY(.06); } }
.dias { display: flex; gap: 6px; margin-top: 7px; font-size: 10.5px; color: #94a3b8; }
.dias span { flex: 1; text-align: center; }

/* anel de conversão: o arco preenche e o número acompanha */
.anel-wrap { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.anel { width: 78px; height: 78px; flex: none; transform: rotate(-90deg); }
.anel .trilho { fill: none; stroke: rgba(15, 23, 42, .08); stroke-width: 7; }
.anel .arco { fill: none; stroke: #066fd1; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: anel var(--cdur, 8s) cubic-bezier(.2, .8, .2, 1) infinite alternate; }
@keyframes anel { from { stroke-dashoffset: 1; } to { stroke-dashoffset: calc(1 - var(--pct)); } }
.anel-txt { font-size: 12px; color: #64748b; line-height: 1.35; }
.anel-txt .val { margin: 0; font-size: 28px; }

/* funil */
.funil { display: grid; gap: 8px; margin-top: 10px; }
.funil-l { display: grid; grid-template-columns: 68px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: #475569; }
.funil-b { height: 10px; border-radius: 999px; background: rgba(6, 111, 209, .12); overflow: hidden; }
.funil-b i { display: block; height: 100%; width: var(--f); border-radius: 999px; background: linear-gradient(90deg, #066fd1, #06b6d4); transform-origin: left; animation: enche var(--cdur, 8s) ease-in-out calc(var(--i) * .4s) infinite alternate; }
@keyframes enche { from { transform: scaleX(.05); } to { transform: scaleX(1); } }
.funil-l b { text-align: right; color: #0f172a; font-variant-numeric: tabular-nums; }

/* conversa: as bolhas chegam uma a uma; a IA "digita" antes de responder */
.conversa { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bolha { max-width: 82%; padding: 9px 12px; border-radius: 14px; font-size: 12px; line-height: 1.35; opacity: 0; animation: chega var(--vdur, 13s) ease-out calc(var(--i) * 2.4s) infinite; }
.bolha.lead { align-self: flex-start; background: #f1f5f9; border-bottom-left-radius: 4px; }
.bolha.ia { align-self: flex-end; background: #d9fdd3; border-bottom-right-radius: 4px; }
.bolha.digitando { display: flex; gap: 4px; padding: 9px 11px; }
.bolha.digitando i { width: 6px; height: 6px; border-radius: 50%; background: #64748b; animation: digita 1.5s ease-in-out calc(var(--j) * .18s) infinite; }
@keyframes digita { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes chega { 0% { opacity: 0; transform: translateY(8px) scale(.97); } 7% { opacity: 1; transform: none; } 80% { opacity: 1; } 90%, 100% { opacity: 0; } }
.bolha .sk { display: inline-block; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, .14); vertical-align: middle; }

/* tarefas e ranking: linhas com avatar, texto-esqueleto e chip */
.lista { display: grid; gap: 9px; margin-top: 12px; }
.linha-l { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; opacity: 0; animation: entra var(--vdur, 12s) ease-out calc(var(--i) * .7s) infinite; }
@keyframes entra { 0% { opacity: 0; transform: translateX(-8px); } 6% { opacity: 1; transform: none; } 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--cor, #066fd1); }
.sk { display: block; height: 8px; border-radius: 999px; background: rgba(15, 23, 42, .12); }
.sk + .sk { margin-top: 4px; }
.sk.escuro { background: rgba(15, 23, 42, .3); }
.check { width: 18px; height: 18px; border-radius: 5px; border: 1.4px solid #94a3b8; display: grid; place-items: center; }
.check svg { width: 11px; height: 11px; }
.check path { fill: none; stroke: #16a34a; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: marca var(--vdur, 12s) ease-out calc(var(--i) * .7s + 2.2s) infinite; }
@keyframes marca { 0%, 10% { stroke-dashoffset: 1; } 18% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 1; } }
.linha-l.feita .check { border-color: #16a34a; background: rgba(22, 163, 74, .1); }
.rank-b { height: 10px; border-radius: 999px; background: rgba(6, 111, 209, .12); overflow: hidden; }
.rank-b i { display: block; height: 100%; width: var(--f); border-radius: 999px; background: linear-gradient(90deg, #066fd1, #06b6d4); transform-origin: left; animation: enche var(--cdur, 8s) ease-in-out calc(var(--i) * .3s) infinite alternate; }
.rank-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 26px; text-align: right; }

/* mapa de calor: cada célula respira no seu tempo */
.calor { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.calor i { aspect-ratio: 1; border-radius: 5px; background: #066fd1; opacity: var(--o); animation: brilha var(--hdur, 5s) ease-in-out var(--hdel, 0s) infinite alternate; }
@keyframes brilha { from { opacity: calc(var(--o) * .35); } to { opacity: var(--o); } }
.calor-h { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; color: #94a3b8; }

/* tabela com brilho que varre */
.tabela { display: grid; gap: 9px; margin-top: 12px; }
.tabela .tr { display: grid; grid-template-columns: 1.3fr 1fr .7fr auto; gap: 10px; align-items: center; }
.varredura { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%); transform: translateX(-100%); animation: varre var(--vdur, 7s) ease-in-out infinite; }
@keyframes varre { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .card *, .card { animation: none !important; }
  .spark .linha, .anel .arco, .check path { stroke-dashoffset: 0 !important; }
  .spark .area { opacity: 1 !important; }
  .barra { transform: scaleY(var(--h1)) !important; }
  .bolha, .linha-l { opacity: 1 !important; }
  .num { --n: var(--ate); }
  .funil-b i, .rank-b i { transform: none !important; }
  .varredura { display: none; }
}