/* ═══════════════════════════════════════════════════════════════════════
   TEMA-EVORASALES.CSS — rastreio da Exacta (exactafarma.nowapp.cloud) com os
   padrões visuais do EvoraSales / ExactaSales 2.0 (06/10/2026).
   Carregado só nesse domínio (o servidor injeta no <head> e marca
   <html data-marca="exacta">). O rastreio.nowapp.cloud segue com o tema vermelho.

   Três layouts, como no sistema (chave em localStorage "fin-theme"):
     moderno → sem data-theme       fundo com luz, cartões de vidro, verde
     escuro  → data-theme="escuro"  sóbrio preto, painéis chapados, verde
     light   → data-theme="light"   sóbrio branco/cinza-claro, azul
   Os tokens são os de salesone-pedidos/public/css/styles.css; aqui só são
   traduzidos para as variáveis desta página (--fundo, --card, --marca…).
   Seletor :root[data-marca] tem a mesma força do bloco de modo escuro do
   styles.css e vem depois dele, então vence.
═══════════════════════════════════════════════════════════════════════ */

/* ── Moderno (padrão) ─────────────────────────────────────────────────── */
:root[data-marca="exacta"] {
  --font: 'Manrope', system-ui, sans-serif;
  --display: 'Syne', 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --fundo: #050807;
  --vidro: rgba(5, 8, 7, .72);            /* topo fixo sobre o fundo com luz */
  --card: rgba(255, 255, 255, .045);
  --card-solido: #0d1310;
  --campo: rgba(0, 0, 0, .35);
  --texto: #eef5f1;
  --texto-2: #9fb3aa;
  --texto-3: #7d8f86;
  --borda: rgba(255, 255, 255, .09);
  --borda-2: rgba(255, 255, 255, .16);
  --marca: #00c46a;
  --marca-escura: #00e37b;
  --marca-clara: rgba(0, 196, 106, .12);
  --marca-texto: #7ee3c3;
  --sobre-marca: #04120a;
  --ok: #00e37b;
  --ok-clara: rgba(0, 227, 123, .12);
  --alerta: #ffb545;
  --alerta-clara: rgba(255, 181, 69, .12);
  --perigo: #ff5a5a;
  --perigo-clara: rgba(255, 90, 90, .12);
  --sombra: 0 8px 24px rgba(0, 0, 0, .35);
  --raio: 10px;
  --raio-lg: 18px;
  --desfoque: blur(10px);
  --fx: block;
  color-scheme: dark;
}

/* ── Escuro: sóbrio, painéis chapados ─────────────────────────────────── */
:root[data-marca="exacta"][data-theme="escuro"] {
  --vidro: #050807;
  --card: #0d1310;
  --card-solido: #0d1310;
  --campo: #090d0b;
  --borda: #1c2621;
  --borda-2: #2a3a32;
  --raio: 8px;
  --raio-lg: 10px;
  --desfoque: none;
  --fx: none;
}

/* ── Claro: branco/cinza-claro com azul ───────────────────────────────── */
:root[data-marca="exacta"][data-theme="light"] {
  --fundo: #f5f7fa;
  --vidro: rgba(245, 247, 250, .88);
  --card: #ffffff;
  --card-solido: #ffffff;
  --campo: #ffffff;
  --texto: #0f172a;
  --texto-2: #475569;
  --texto-3: #5f6b7d;
  --borda: #e2e8f0;
  --borda-2: #cbd5e1;
  --marca: #2563eb;
  --marca-escura: #1d4ed8;
  --marca-clara: rgba(37, 99, 235, .08);
  --marca-texto: #2563eb;
  --sobre-marca: #ffffff;
  --ok: #15803d;
  --ok-clara: rgba(21, 128, 61, .08);
  --alerta: #b45309;
  --alerta-clara: rgba(180, 83, 9, .08);
  --perigo: #dc2626;
  --perigo-clara: rgba(220, 38, 38, .08);
  --sombra: 0 8px 24px rgba(15, 23, 42, .08);
  --raio: 8px;
  --raio-lg: 10px;
  --desfoque: none;
  --fx: none;
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html[data-marca="exacta"] { background: var(--fundo); }
html[data-marca="exacta"] body {
  background: transparent;
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
html[data-marca="exacta"] h1, html[data-marca="exacta"] h2, html[data-marca="exacta"] h3 { font-family: var(--display); letter-spacing: -.02em; }
html[data-marca="exacta"] :focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Fundo com luz (só o Moderno acende) */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: var(--fx, none); }
.bgfx .b1 { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(110px); opacity: .26;
  background: radial-gradient(circle, var(--marca), transparent 60%); top: -380px; left: -260px; mix-blend-mode: screen; }
.bgfx .b2 { position: absolute; width: 900px; height: 900px; border-radius: 50%; filter: blur(120px); opacity: .22;
  background: radial-gradient(circle, #0b7cff, transparent 60%); bottom: -420px; right: -320px; mix-blend-mode: screen; }
.bgfx .grade { position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 40% 20%, #000 20%, transparent 75%); }

/* ── Topo ─────────────────────────────────────────────────────────────── */
html[data-marca="exacta"] .topo {
  background: var(--vidro); color: var(--texto);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  border-bottom: 1px solid var(--borda);
}
html[data-marca="exacta"] .marca { gap: 12px; font-weight: 600; }
html[data-marca="exacta"] .marca__logo { height: 20px; width: auto; display: block; }
html[data-marca="exacta"][data-theme="light"] .marca__logo { filter: invert(1); }
html[data-marca="exacta"] #marcaNome {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marca-texto); padding-left: 12px; border-left: 1px solid var(--borda-2);
}
html[data-marca="exacta"] .menu a { color: var(--texto-2); opacity: 1; font-size: 13.5px; }
html[data-marca="exacta"] .menu a:hover { background: var(--marca-clara); color: var(--texto); }
html[data-marca="exacta"] .menu a.ativo { background: var(--marca-clara); color: var(--marca-texto); }

/* Seletor de layout [Moderno | Escuro | Claro], igual ao do sistema */
.tema { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--borda); border-radius: 999px; background: var(--card); }
.tema button {
  border: 0; background: none; cursor: pointer; color: var(--texto-3);
  font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border-radius: 999px;
}
.tema button:hover { color: var(--texto); }
.tema button[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); }

/* ── Busca ────────────────────────────────────────────────────────────── */
html[data-marca="exacta"] .hero { background: transparent; color: var(--texto); padding-top: 56px; }
html[data-marca="exacta"] .hero h1 { font-weight: 800; }
html[data-marca="exacta"] .hero p { color: var(--texto-2); opacity: 1; }
html[data-marca="exacta"] .busca {
  background: var(--card); border: 1px solid var(--borda-2);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
  box-shadow: var(--sombra); border-radius: 14px;
}
html[data-marca="exacta"] .campo input { color: var(--texto); font-family: var(--font); }
html[data-marca="exacta"] .campo input::placeholder { color: var(--texto-3); }
html[data-marca="exacta"] .btn { background: var(--marca); color: var(--sobre-marca); border-radius: var(--raio); font-family: var(--font); }
html[data-marca="exacta"] .btn:hover { background: var(--marca-escura); }

/* ── Cartões ──────────────────────────────────────────────────────────── */
html[data-marca="exacta"] .conteudo { margin-top: -40px; }
html[data-marca="exacta"] .card,
html[data-marca="exacta"] .estado,
html[data-marca="exacta"] .ajuda details {
  background: var(--card); border-color: var(--borda); border-radius: var(--raio-lg);
  backdrop-filter: var(--desfoque); -webkit-backdrop-filter: var(--desfoque);
}
html[data-marca="exacta"] .ajuda details { border-radius: var(--raio); }
html[data-marca="exacta"] .estado--erro { border-color: var(--perigo); background: var(--perigo-clara); }

/* Rótulos no estilo do sistema: mono, caixa alta, espaçado */
html[data-marca="exacta"] .rotulo,
html[data-marca="exacta"] .dados dt {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3);
}
html[data-marca="exacta"] .codigo { font-family: var(--display); font-size: 28px; letter-spacing: -.01em; }
html[data-marca="exacta"] .selo { background: var(--marca-clara); color: var(--marca-texto); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
html[data-marca="exacta"] .selo--entregue { background: var(--ok-clara); color: var(--ok); }
html[data-marca="exacta"] .selo--ocorrencia { background: var(--alerta-clara); color: var(--alerta); }

html[data-marca="exacta"] .etapas i { background: var(--card-solido); }
html[data-marca="exacta"] .etapas li { font-size: 12.5px; }
html[data-marca="exacta"] .etapas li.atual i { box-shadow: 0 0 0 5px var(--marca-clara); }

html[data-marca="exacta"] .aviso { background: var(--perigo-clara); border-color: var(--borda); border-radius: var(--raio); }
/* ícone desenhado em CSS: o "ⓘ" do tema padrão não existe em Manrope e virava um quadrado */
html[data-marca="exacta"] .aviso::before {
  content: "i"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
  border: 1.5px solid currentColor; border-radius: 50%; font: 700 10px/1 var(--font); color: var(--perigo);
}
html[data-marca="exacta"] .aviso--info { background: var(--marca-clara); }
html[data-marca="exacta"] .aviso--info::before { color: var(--marca-texto); }
html[data-marca="exacta"] .dados a { color: var(--marca-texto); }

html[data-marca="exacta"] .linha__data b { font-variant-numeric: tabular-nums; }
html[data-marca="exacta"] .linha__data { font-family: var(--mono); font-size: 12px; }
html[data-marca="exacta"] .linha__data b { font-family: var(--font); }

/* ── Rodapé ───────────────────────────────────────────────────────────── */
html[data-marca="exacta"] .rodape { background: var(--card-solido); color: var(--texto-2); border-top: 1px solid var(--borda); font-size: 13px; }

@media (max-width: 680px) {
  html[data-marca="exacta"] .busca { border-radius: 14px; }
  html[data-marca="exacta"] #marcaNome { display: none; }
  /* no celular o topo fica só com a logo e o seletor (que cabe inteiro em 360 px) */
  html[data-marca="exacta"] .menu a { display: none; }
  html[data-marca="exacta"] .marca__logo { height: 17px; }
  .tema button { padding: 7px 8px; font-size: 10px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion: no-preference) {
  .bgfx .b1, .bgfx .b2 { transition: opacity .4s; }
}