/* ─────────────────────────────────────────────────────────────────────────
   Sonarview · Cabeçalho padrão das telas do usuário (fora do /admin)
   Fonte única para: logo correta, botão azul (Portal / Voltar) e MODO ESCURO.
   CLARO é o padrão (decisão do dono 12/07/2026); o escuro entra SÓ pela classe
   html.sv-dark, controlada pelo botão sol/lua do /brand/sonar-shell.js
   (persistida em localStorage "sonarTheme"). O modo do aparelho não manda.
   Incluir SEMPRE como o ÚLTIMO <link> do <head> (depois do <style> da própria
   página), para o escuro poder sobrescrever os tokens claros locais.

   As telas do usuário já compartilham o mesmo vocabulário de tokens
   (--bg, --bg-paper, --fg, --fg-muted, --border, --primary...). Aqui só
   REDEFINIMOS esses tokens no escuro — o claro de cada tela é preservado.
   ───────────────────────────────────────────────────────────────────────── */

:root { color-scheme: light; }
html.sv-dark { color-scheme: dark; }

html.sv-dark {
  /* Vocabulário das telas do /conta (Inter) */
  --bg:            #34405b;   /* fundo da página (a cor pedida) */
  --bg-paper:      #3d4a68;   /* cartões e barra do topo, um tom acima */
  --fg:            #eef2f8;
  --fg-muted:      #a3b1c9;
  --border:        #4b5876;
  --primary:       #5b9bff;   /* azul mais claro p/ contrastar no escuro */
  --primary-hover: #78acff;
  --success:       #4ade80;
  --error:         #f87171;
  --shadow:        0 2px 14px rgba(0,0,0,.38);
  /* Vocabulário das telas de parceiro / vitrine (--surface/--text/--accent) */
  --surface:       #3d4a68;
  --text:          #eef2f8;
  --muted:         #2f3a54;
  --bg-subtle:     #2f3a54;   /* faixas internas de cartão (ex.: seletor de usuários da vitrine) */
  --border-strong: #5a6788;
  --accent:        #5b9bff;
  --accent-soft:   rgba(91,155,255,.16);
  --ok:            #4ade80;  --ok-soft:   rgba(74,222,128,.14);
  --warn:          #fbbf24;  --warn-soft: rgba(251,191,36,.14);
  --danger:        #f87171;
}
/* Rede de segurança p/ superfícies fixas em branco (inputs desativados etc.) */
html.sv-dark, html.sv-dark body { background: var(--bg); }

/* ── Barra do topo ─────────────────────────────────────────────────────────
   Fallbacks cobrem os dois vocabulários de token das telas do usuário:
   --bg-paper/--fg/--primary (padrão /conta) e --surface/--text/--accent
   (telas de parceiro/vitrine), pra a barra funcionar no claro em ambas. */
.sv-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--bg-paper, var(--surface, #fff));
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.sv-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sv-brand-logo { width: 32px; height: 32px; object-fit: contain; display: block; border-radius: 7px; }
/* O favicon já tem borda clara própria: aparece bem no claro e no escuro sem inverter. */
.sv-brand-name {
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--fg, var(--text, #0f172a));
  line-height: 1; white-space: nowrap;
}
.sv-brand-name sup { font-size: .55em; vertical-align: super; font-weight: 700; }
.sv-sub { font-size: 13px; color: var(--fg-muted, #64748b); white-space: nowrap; }
.sv-spacer { flex: 1 1 auto; }

/* Botão azul do cabeçalho: Portal (telas logadas) ou Voltar (jornada). */
.sv-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary, var(--accent, #2563eb)); color: #fff !important;
  padding: 8px 14px; border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; border: none; cursor: pointer;
  box-shadow: 0 1px 3px rgba(37,99,235,.30);
  transition: background .12s;
}
.sv-btn:hover { background: var(--primary-hover, #1d4ed8); color: #fff !important; }
.sv-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sv-btn .material-icons { font-size: 16px; }
.sv-btn-ico { width: 15px; height: 15px; display: inline-block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Botão sol/lua (injetado pelo sonar-shell.js) ─────────────────────────
   No cabeçalho fica como botão fantasma; em telas sem cabeçalho padrão vira
   flutuante no canto superior direito. margin-left:auto encosta à direita
   quando o cabeçalho não tem .sv-spacer (ex.: vitrine). */
.sv-theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: auto;
  background: transparent; border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px; cursor: pointer;
  color: var(--fg-muted, #64748b);
  transition: color .12s, border-color .12s, background .12s;
}
.sv-header .sv-spacer ~ .sv-theme-btn, .sv-header .sv-theme-btn:not(:last-child) { margin-left: 0; }
.sv-theme-btn:hover {
  color: var(--primary, var(--accent, #2563eb));
  border-color: var(--primary, var(--accent, #2563eb));
  background: var(--accent-soft, rgba(37,99,235,.08));
}
.sv-theme-btn:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.sv-theme-btn svg { display: block; }
.sv-theme-btn-float {
  position: fixed; top: 14px; right: 16px; z-index: 60; margin-left: 0;
  width: 36px; height: 36px;
  background: var(--bg-paper, var(--surface, #fff));
  box-shadow: 0 1px 4px rgba(15,23,42,.12);
}

@media (max-width: 560px) {
  .sv-header { padding: 12px 16px; }
  .sv-sub { display: none; }
  .sv-brand-name { font-size: 18px; }
}
