/* Painel Comercial seu.phone — tokens e base (SPEC §5) */
:root {
  color-scheme: dark;

  /* superfícies */
  --bg: #0f1115;
  --sup: #171a21;
  --elev: #1f232c;
  --elev-2: #262b35;
  --borda: #2a2f3a;
  --borda-forte: #363c4a;

  /* texto */
  --texto: #e8eaf0;
  --texto-fraco: #9aa3b2;
  --texto-mudo: #8a93a3; /* 5,5:1 sobre --sup (texto pequeno: "antes: …", "há 4 h", legendas) */

  /* marca e estados */
  --destaque: #f97316;
  --destaque-suave: rgba(249, 115, 22, .14);
  --destaque-borda: rgba(249, 115, 22, .45);
  --quente: #ef4444;
  --morno: #f59e0b;
  --frio: #3b82f6;
  --sumiu: #6b7280;
  --ok: #22c55e;
  --erro: #ef4444;
  --compra: #a78bfa; /* público de compra (a loja compra o iPhone do cliente) */
  --assist: #f472b6; /* público de assistência técnica (conserto do aparelho do cliente) */
  --site: #22d3ee; /* origem Site (Google): o Google Ads leva ao site */
  --troca: #2dd4bf;

  --quente-suave: rgba(239, 68, 68, .14);
  --morno-suave: rgba(245, 158, 11, .14);
  --frio-suave: rgba(59, 130, 246, .14);
  --sumiu-suave: rgba(107, 114, 128, .20);
  --ok-suave: rgba(34, 197, 94, .13);

  /* bolhas da conversa */
  --bolha-cliente: #232833;
  --bolha-maria: rgba(249, 115, 22, .10);
  --bolha-maria-borda: rgba(249, 115, 22, .32);
  --bolha-vendedor: rgba(34, 197, 94, .09);
  --bolha-vendedor-borda: rgba(34, 197, 94, .30);

  /* medidas */
  --menu-w: 220px;
  --menu-w-recolhido: 60px;
  --topo-h: 60px;
  --raio: 10px;
  --raio-p: 6px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { flex-shrink: 0; }

:focus-visible {
  outline: 2px solid var(--destaque);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: rgba(249, 115, 22, .35); }

/* barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borda-forte); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.num, .tab-num { font-variant-numeric: tabular-nums; }
.fraco { color: var(--texto-fraco); }
.mudo { color: var(--texto-mudo); }
.pequeno { font-size: 12px; }
.nowrap { white-space: nowrap; }
.oculto { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* o atributo hidden sempre esconde (mesmo com display definido pela classe) */
[hidden] { display: none !important; }