/* =========================================================================
   Painel dos Vendedores — camada de design Apple (mesmo sistema do
   dashboard principal, ver /assets/ui.css). Carregada DEPOIS de style.css:
   so' aparencia, a grade (meta no topo, ranking a esquerda, 4 blocos) e'
   a mesma.
   Segue o tema do aparelho (claro/escuro), como o painel principal.
   ========================================================================= */

:root {
  color-scheme: light;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
           "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --fundo: #f5f5f7;
  --surface-1: #ffffff;
  --surface-3: rgba(0, 0, 0, 0.045);
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-muted: #86868b;
  --border: rgba(0, 0, 0, 0.06);
  --acento: #1d5c40;
  --good: #1a7f37;
  --warning: #b25000;
  --critical: #c4302b;
  --ouro: #b8860b;
  --prata: #8a939c;
  --bronze: #a0602c;

  --material: rgba(255, 255, 255, 0.74);
  --material-borda: rgba(255, 255, 255, 0.7);
  --contorno: rgba(0, 0, 0, 0.05);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.03), 0 10px 30px rgba(0, 0, 0, 0.03);
  --blur: saturate(160%) blur(20px);
  --radius: 16px;
  --radius-sm: 11px;

  --mancha-1: rgba(46, 125, 91, 0.30);
  --mancha-2: rgba(200, 135, 60, 0.22);
  --mancha-3: rgba(46, 125, 91, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #000000;
    --surface-1: #1c1c1e;
    --surface-3: rgba(255, 255, 255, 0.07);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-muted: #6e6e73;
    --border: rgba(255, 255, 255, 0.08);
    --acento: #3aa97a;
    --good: #30d158;
    --warning: #ffd60a;
    --critical: #ff6961;
    --ouro: #e8b923;
    --prata: #b9c2cc;
    --bronze: #c87d43;
    --material: rgba(28, 28, 30, 0.70);
    --material-borda: rgba(255, 255, 255, 0.07);
    --contorno: rgba(255, 255, 255, 0.05);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
    --mancha-1: rgba(46, 125, 91, 0.32);
    --mancha-2: rgba(200, 135, 60, 0.16);
    --mancha-3: rgba(46, 125, 91, 0.18);
  }
}

html { background: var(--fundo); }
body {
  background: transparent;
  font-family: var(--fonte);
  font-variant-numeric: normal;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  padding: 16px;
}

.ambiente { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--fundo); pointer-events: none; }
.mancha { position: absolute; border-radius: 50%; filter: blur(90px); }
.mancha.m1 { width: 62vw; height: 62vw; left: -18vw; top: -26vw; background: var(--mancha-1); }
.mancha.m2 { width: 48vw; height: 48vw; right: -14vw; top: 22vh; background: var(--mancha-2); }
.mancha.m3 { width: 54vw; height: 54vw; left: 18vw; bottom: -34vw; background: var(--mancha-3); }

/* ---- cabecalho ---- */
.vd-titulo { align-items: center; }
.vd-logo {
  width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  box-shadow: 0 0 0 0.5px var(--contorno), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.vd-marca { font-weight: 600; letter-spacing: -0.02em; }
.vd-mes {
  text-transform: none; letter-spacing: -0.01em; font-weight: 500;
  font-size: 0.82rem; color: var(--text-primary);
  background: var(--surface-3);
  border: 0.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---- cartoes: material fosco ---- */
.card {
  background: var(--material);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 0.5px solid var(--material-borda);
  border-radius: var(--radius);
  box-shadow: 0 0 0 0.5px var(--contorno), var(--sombra);
  padding: 18px 20px 20px;
}
.vd-main { gap: 16px; }
.card h2 {
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.02em;
  text-transform: none; color: var(--text-primary);
}
.card-sub { font-size: 0.85rem; }

/* Meta do mes: unico cartao cheio de cor, igual ao "Meta do mes" do
   dashboard principal. */
.card-meta {
  background: linear-gradient(155deg, #2e7d5b 0%, #1d5c40 55%, #163f2d 100%);
  border-color: rgba(255, 255, 255, 0.10);
  color: #fff;
}
.card-meta h2 { color: rgba(255, 255, 255, 0.85); }
.card-meta .meta-numeros strong { color: #fff; letter-spacing: -0.04em; }
.card-meta .meta-numeros span { color: rgba(255, 255, 255, 0.72); }
.card-meta .meta-numeros .meta-pct { color: #fff; }
.card-meta .barra-alvo, .card-meta .meta-frase { color: rgba(255, 255, 255, 0.80); }
.card-meta .meta-frase b { color: #fff; }
.card-meta .barra-trilho { background: rgba(255, 255, 255, 0.18); }
.card-meta .selo { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); }
.card-meta .selo-faixa { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.65); }
.card-meta .selo-faixa.atingida { color: #fff; background: rgba(255, 255, 255, 0.20); border-color: rgba(255, 255, 255, 0.45); }
.card-meta .selo-faixa.atingida .legenda-check { color: #fff; }
.barra-preenchida { background: linear-gradient(90deg, #d8f3e6, #ffffff); }

/* ---- ranking ---- */
.linha-vd { background: var(--surface-3); border-radius: var(--radius-sm); padding: 9px 12px; }
.linha-vd::before { background: rgba(46, 125, 91, 0.14); }
.card-ranking.tem-scroll::after { background: linear-gradient(to top, var(--surface-1), transparent); }
.vd-nome { font-weight: 600; }
.vd-valor { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- blocos ---- */
.bloco-valor, .numerao { font-weight: 700; letter-spacing: -0.035em; }
.bloco-barra, .medidor-trilho, .sem-trilho { background: var(--surface-3); }
.medidor-rotulo b { font-weight: 600; }

.vd-aviso {
  background: rgba(255, 159, 10, 0.12);
  border: 0.5px solid rgba(255, 159, 10, 0.35);
  color: var(--text-primary);
}

@media (min-width: 900px) {
  body { padding: 18px 24px; }
  .vd-marca { font-size: 1.35rem; }
}