/* ═══════════════════════════════════════════════════════════════
   RevendasDB — base visual compartilhada por todas as páginas
   Fonte Inter (hospedada aqui, sem depender do Google Fonts),
   números alinhados, cores da marca e ajustes de acessibilidade.
   Para mudar a identidade visual, edite só os tokens --marca-*.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Cores ORIGINAIS do RevendasDB ── */
  --marca-primaria: #0284c7;        /* azul-céu (painel, CRM, coleta, app) */
  --marca-primaria-escura: #0369a1;
  --marca-navy: #0f2d4a;            /* marinho da barra lateral */
  --marca-indigo: #6366f1;          /* identidade do admin mobile */
  --marca-indigo-escuro: #4f46e5;
  --marca-sucesso: #059669;
  --marca-alerta: #d97706;
  --marca-erro: #dc2626;
  --marca-roxo: #7c3aed;
  --marca-whatsapp: #25D366;

  /* ── Paleta viva para KPIs, ícones e gráficos ── */
  --cor-azul: #0284c7;     --cor-azul-claro: #e0f2fe;
  --cor-ciano: #0891b2;    --cor-ciano-claro: #cffafe;
  --cor-verde: #059669;    --cor-verde-claro: #d1fae5;
  --cor-lima: #65a30d;     --cor-lima-claro: #ecfccb;
  --cor-ambar: #d97706;    --cor-ambar-claro: #fef3c7;
  --cor-laranja: #ea580c;  --cor-laranja-claro: #ffedd5;
  --cor-rosa: #db2777;     --cor-rosa-claro: #fce7f3;
  --cor-vermelho: #dc2626; --cor-vermelho-claro: #fee2e2;
  --cor-roxo: #7c3aed;     --cor-roxo-claro: #ede9fe;
  --cor-indigo: #6366f1;   --cor-indigo-claro: #e0e7ff;

  /* Estados (iguais ao painel de TV) */
  --uf-sc: #0ea5e9;  --uf-pr: #16a34a;  --uf-rs: #f59e0b;

  /* Degradês de cabeçalho/destaque */
  --grad-marca: linear-gradient(135deg, #0284c7 0%, #0f2d4a 100%);
  --grad-indigo: linear-gradient(135deg, #6366f1 0%, #111827 100%);
  --grad-verde: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --grad-ambar: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  --grad-roxo: linear-gradient(135deg, #8b5cf6 0%, #5b21b6 100%);
  --grad-rosa: linear-gradient(135deg, #ec4899 0%, #9d174d 100%);
  --grad-ciano: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%);
  --grad-whatsapp: linear-gradient(135deg, #25D366 0%, #128C7E 100%);

  /* Etapas do funil (iguais em todas as telas) */
  --etapa-sem: #94a3b8;
  --etapa-prospect: #0284c7;
  --etapa-visitada: #7c3aed;
  --etapa-negociando: #d97706;
  --etapa-cliente: #059669;
  --etapa-perdida: #dc2626;
  --etapa-fechada: #475569;

  /* Tipografia */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fonte-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Texto secundário com contraste AA */
  --texto-suave: #64748b;
  --raio: 12px;
  --raio-sm: 8px;

  /* App no celular: altura da barra inferior + área segura do iPhone */
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
/* No escuro, os tons claros viram translúcidos (para fundos de chips/KPIs) */
[data-theme="dark"] {
  --cor-azul-claro: rgba(56,189,248,.14);   --cor-ciano-claro: rgba(34,211,238,.14);
  --cor-verde-claro: rgba(16,185,129,.14);  --cor-lima-claro: rgba(163,230,53,.14);
  --cor-ambar-claro: rgba(251,191,36,.14);  --cor-laranja-claro: rgba(251,146,60,.14);
  --cor-rosa-claro: rgba(244,114,182,.14);  --cor-vermelho-claro: rgba(248,113,113,.14);
  --cor-roxo-claro: rgba(167,139,250,.16);  --cor-indigo-claro: rgba(129,140,248,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --texto-suave: #94a3b8; }
}
[data-theme="dark"] { --texto-suave: #94a3b8; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body, button, input, select, textarea {
  font-family: var(--fonte);
  font-feature-settings: 'cv11', 'ss01';   /* "a" de um andar e dígitos mais legíveis */
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
code, pre, kbd, .mono { font-family: var(--fonte-mono); }

/* Números alinhados em KPIs, tabelas e contadores */
table, .kpi, .kpi .n, .num, [data-num], .badge, .pill, .contador {
  font-variant-numeric: tabular-nums;
}

/* Foco visível para teclado */
:focus-visible { outline: 2px solid var(--marca-primaria); outline-offset: 2px; }

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Áreas de toque mínimas no celular */
@media (pointer: coarse) {
  button, .btn, .bt, a.btn { min-height: 40px; }
}

/* Escuro: o azul de destaque (--az) fica claro (#38bdf8) e o texto branco
   por cima dele não tinha contraste (2,1:1). Item ativo do menu volta ao
   azul da marca, como no tema claro. */
[data-theme="dark"] .nav-item.active { background: var(--marca-primaria); }

/* ═══ SELO "VERIFICADA NO WHATSAPP" ═══
   Uso (HTML): <span class="selo-wa"><svg class="selo-wa-ico" viewBox="0 0 24 24" aria-hidden="true">
     <path class="selo-wa-flor" d="M12 1.6l2.3 1.7 2.8-.4 1.1 2.6 2.6 1.1-.4 2.8 1.7 2.3-1.7 2.3.4 2.8-2.6 1.1-1.1 2.6-2.8-.4L12 22.4l-2.3-1.7-2.8.4-1.1-2.6-2.6-1.1.4-2.8L1.9 12l1.7-2.3-.4-2.8 2.6-1.1 1.1-2.6 2.8.4z"/>
     <path class="selo-wa-check" d="M7.6 12.3l3 3 5.8-6.1"/></svg>Verificada no WhatsApp</span>
   Variações: .selo-wa--mini (só o ícone, para listas/pins) · .selo-wa--grande (ficha da loja)
   Sempre com texto ou title/aria-label — a cor não é o único sinal. */
.selo-wa {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 4px; border-radius: 999px;
  font: 700 11.5px/1 var(--fonte); letter-spacing: .01em; white-space: nowrap;
  color: #065f46;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid rgba(22,163,74,.35);
  box-shadow: 0 1px 2px rgba(5,150,105,.15), inset 0 1px 0 rgba(255,255,255,.6);
}
.selo-wa-ico { width: 17px; height: 17px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(5,150,105,.35)); }
.selo-wa-flor { fill: #22c55e; }
.selo-wa-check { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.selo-wa--mini { padding: 0; background: none; border: 0; box-shadow: none; gap: 0; }
.selo-wa--mini .selo-wa-ico { width: 16px; height: 16px; }
.selo-wa--grande { font-size: 13px; padding: 5px 12px 5px 6px; }
.selo-wa--grande .selo-wa-ico { width: 21px; height: 21px; }
/* Acabou de ser confirmada: brilho rápido */
.selo-wa--novo { animation: seloWaBrilho 1.4s ease-out 1; }
@keyframes seloWaBrilho {
  0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  45% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { transform: scale(1); }
}
[data-theme="dark"] .selo-wa {
  color: #bbf7d0;
  background: linear-gradient(135deg, rgba(34,197,94,.22) 0%, rgba(16,185,129,.16) 100%);
  border-color: rgba(74,222,128,.4); box-shadow: none;
}
[data-theme="dark"] .selo-wa--mini { background: none; border: 0; }
/* Estados vizinhos do selo (mesmo formato, sem a flor) */
.selo-wa-estado {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font: 600 11px/1 var(--fonte); white-space: nowrap; border: 1px solid transparent;
}
.selo-wa-estado--verificando { color: #92400e; background: var(--cor-ambar-claro); border-color: rgba(217,119,6,.3); }
.selo-wa-estado--verificando::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b;
  animation: seloWaPulso 1.2s ease-in-out infinite;
}
.selo-wa-estado--nao { color: #64748b; background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.35); }
.selo-wa-estado--neutro { color: #475569; background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .selo-wa-estado--verificando { color: #fde68a; }
[data-theme="dark"] .selo-wa-estado--nao, [data-theme="dark"] .selo-wa-estado--neutro { color: #cbd5e1; }
@keyframes seloWaPulso { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .selo-wa--novo, .selo-wa-estado--verificando::before { animation: none; } }