/* Identidade visual do Contrô — versão 3.0 "Grafite e azul elétrico" (15/10/2026), a partir do
   brand book "Contrô - Identidade visual e branding - Grafite e azul elétrico" e do kit de logos:
     • Grafite Contrô #202734 (base e textos) · Azul elétrico #64AEFF (marca, sinais e estado
       selecionado; texto GRAFITE por cima) · Azul ação #245AC7 (botões; texto BRANCO)
       · Branco suave #F6F8FA (fundo claro) · Gelo #F2F5F9 (apoio, texto sobre grafite);
     • "O grafite sustenta. O azul destaca": azul elétrico no símbolo, nos grafismos e no que está
       selecionado; leitura em grafite sobre branco ou gelo sobre grafite;
     • Arial (Regular no texto, Bold em títulos, rótulos e ações);
     • a assinatura é um desenho próprio: usar a imagem do kit, nunca redigitar "Contrô";
     • grafismo: traço curto e arredondado (a barra do Ô) como divisor/sinal.
   Substitui a versão 1.0 (azul #0A1640 + ouro #C9962B).
   Limite do servidor: a API só aceita as 6 cores de destaque já existentes. A cor da marca continua
   ocupando o espaço "amber" (onde estava o Ouro Contrô), então quem já tinha escolhido a cor da
   marca passa direto para o azul novo. Tornar essa cor o padrão de fábrica depende do servidor.
   Nomes de variável continuam os mesmos — só os valores mudam (regra de style.css). */

/* ---- Cores da marca (usadas também pelas outras camadas) ---- */
:root {
  --marca-grafite: #202734;
  --marca-eletrico: #64AEFF;
  --marca-acao: #245AC7;
  --marca-gelo: #F2F5F9;
}

/* ---- Neutros da marca ---- */
:root {
  --font-display: Arial, "Segoe UI", sans-serif;
  --bg: #F6F8FA;
  --card-bg: #ffffff;
  --surface-2: #EEF2F7;
  --border: #DCE2EB;
  --text: #202734;
  --text-muted: #5A6476;
  --text-3: #98A1B1;
  --sidebar-bg: #202734;
}
:root[data-tema="escuro"] {
  --bg: #171C26;
  --card-bg: #202734;
  --surface-2: #283041;
  --border: #333C4F;
  --text: #F2F5F9;
  --text-muted: #A6AFBF;
  --text-3: #6E7890;
  --sidebar-bg: #141820;
}
/* Noturno continua QUENTE (pensado para uso à noite) — só a barra lateral segue o próprio fundo. */
:root[data-tema="noturno"] { --sidebar-bg: #17120f; }

/* ---- Azul Contrô no lugar do "amber": no claro, botão em azul ação com texto branco;
   no escuro e no noturno, azul elétrico com texto grafite (os dois do brand book). ---- */
:root[data-cor="amber"] {
  --primary: #245AC7;
  --primary-hover: #1d4ba8;
  --primary-fg: #ffffff;
  --accent-text: #245AC7;
  --accent-dim: color-mix(in srgb, #64AEFF 18%, transparent);
}
:root[data-tema="escuro"][data-cor="amber"],
:root[data-tema="noturno"][data-cor="amber"] {
  --primary: #64AEFF;
  --primary-hover: #8cc3ff;
  --primary-fg: #202734;
  --accent-text: #8cc3ff;
  --accent-dim: color-mix(in srgb, #64AEFF 16%, transparent);
}
.aparencia-rapida-cores .cor-amber { background: #64AEFF; }

/* ---- Tipografia: Arial em tudo ---- */
body, button, input, select, textarea { font-family: Arial, "Segoe UI", sans-serif; }
.interface-visual { --font-display: Arial, "Segoe UI", sans-serif; }
.topbar h1 { font-family: Arial, sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Fundo limpo: "mantenha a área de leitura livre" (sem brilhos nem grade de pontos) ---- */
body { background-image: none; }

/* ---- Barra lateral em grafite: "fundo grafite: gelo + azul".
   As variáveis são redefinidas DENTRO da barra, então todo filho (itens, rodapé,
   status) se ajusta sozinho, sem cor fixa espalhada. ---- */
.sidebar,
.interface-visual .sidebar {
  position: relative;
  --card-bg: var(--sidebar-bg);
  --surface-2: color-mix(in srgb, #F2F5F9 7%, var(--sidebar-bg));
  --border: color-mix(in srgb, #F2F5F9 14%, var(--sidebar-bg));
  --text: #F2F5F9;
  --text-muted: color-mix(in srgb, #F2F5F9 72%, var(--sidebar-bg));
  --text-3: color-mix(in srgb, #F2F5F9 48%, var(--sidebar-bg));
  --primary: #64AEFF;
  --primary-fg: #202734;
  --accent-dim: color-mix(in srgb, #64AEFF 18%, var(--sidebar-bg));
  --accent-text: #ffffff;
  --red-text: #ff9a9a;
  --green-text: #8fe0b0;
  --amber-text: #f5cf7d;
  background: var(--sidebar-bg);
  color: var(--text);
  border-right: 0;
}
.interface-visual .nav-item { color: var(--text-muted); }
.interface-visual .nav-item:hover { background: var(--surface-2); color: var(--text); }
.interface-visual .nav-item.active { font-weight: 700; }
.interface-visual .nav-item .nav-icon { color: inherit; }

/* Assinatura oficial do kit (versão gelo e azul elétrico, para fundo escuro) no lugar de ícone +
   "Contrô" digitado. 180 px = mínimo recomendado pelo brand book para a assinatura. */
.marca-programa { padding: 6px 0 4px; }
.marca-programa-icone {
  content: url("/static/img/contro-assinatura-clara.png");
  width: 180px; height: auto; border-radius: 0; object-fit: contain;
}
.marca-programa-texto { display: none; }
/* O botão de recolher desce para o rodapé da barra, liberando a largura da assinatura. */
.sidebar .toggle-btn { position: absolute; right: 12px; bottom: 14px; z-index: 1; }
.app.collapsed .sidebar .toggle-btn { right: 16px; }
.sidebar-foot { padding-right: 36px; }
.app.collapsed .sidebar-foot { padding-right: 0; }

/* ---- Grafismo da marca: o traço curto do Ô (em azul elétrico) como sinal de título ---- */
.interface-visual .unidade-card-nome { display: block; }
.interface-visual .unidade-card-nome::before {
  content: ""; display: block; width: 24px; height: 4px; border-radius: 4px;
  background: var(--marca-eletrico); margin-bottom: 8px;
}
/* Leitura: nome em grafite (azul só no sinal) */
.interface-visual .unidade-card-nome a { color: var(--text); }
.interface-visual .unidade-card-nome a:hover { color: var(--accent-text); }
.interface-visual .painel-tile::before {
  left: 16px; top: 14px; bottom: auto; width: 24px; height: 4px; border-radius: 4px;
}
.interface-visual .painel-tile { padding-top: 26px; }

/* Linha fina em azul elétrico sob o topo de cada tela (mesmo recurso das páginas do brand book). */
.interface-visual .topbar { border-bottom-color: color-mix(in srgb, var(--marca-eletrico) 60%, var(--border)); }

/* Item ativo do menu: estado selecionado do brand book — azul elétrico com texto grafite. */
.interface-visual .sidebar .nav-item.active {
  background: var(--marca-eletrico);
  color: var(--marca-grafite);
  box-shadow: none;
}
.interface-visual .sidebar .nav-item.active .nav-icon { color: var(--marca-grafite); }
.interface-visual .sidebar .nav-item.active::before { display: none; }

/* ✓ de salvar do Cadastro (fase1b-popups.css fixa o tom roxo em --fase1b-save-hue:258):
   segue a cor de destaque, como o resto. */
body.fase1b-extras #btn-salvar { color: var(--accent-text); }

/* ---- Menu recolhido: só o símbolo Ô (img/contro-simbolo.png, do kit) no topo e os ícones de cada
   tela centralizados; o nome de cada item vira dica ao passar o mouse (js/menu-lateral.js). ---- */
.app.collapsed .marca-programa { display: flex !important; justify-content: center; align-items: center; padding: 14px 0 12px; }
.app.collapsed .marca-programa-icone {
  content: url("/static/img/contro-simbolo.png");
  width: auto; height: 42px; object-fit: contain;
}
.app.collapsed .marca-programa-texto { display: none; }
.app.collapsed .sidebar .nav-item {
  width: 42px; height: 42px; min-height: 0; margin: 3px auto; padding: 0 !important;
  display: flex; align-items: center; justify-content: center; border-radius: 11px;
}
.app.collapsed .sidebar .nav-item .nav-icon { margin: 0; }
.app.collapsed .sidebar .nav-item .nav-icon svg { width: 20px; height: 20px; }