/* ==========================================================================
   S&A Imunizações — identidade visual (tokens + logo)
   Paleta corporativa: azul + verde + branco. Tema claro.
   Compartilhado pelo portal (cliente) e pelo console admin (interno).
   As MESMAS variáveis são usadas nas duas telas — trocar aqui muda tudo.
   ========================================================================== */
:root {
  /* superfícies */
  --bg:        #eef3f9;   /* fundo da página (azul-acinzentado suave) */
  --card:      #ffffff;   /* cartões/painéis */
  --surface-2: #f3f7fc;   /* inputs, áreas internas */
  --line:      #dbe4f0;   /* bordas/divisórias */

  /* texto */
  --txt:       #12233b;   /* tinta principal (navy) */
  --muted:     #5c6e86;   /* texto secundário */

  /* marca */
  --pri:       #1666c4;   /* azul corporativo — ações primárias */
  --pri2:      #0f4e9c;   /* azul escuro — hover/gradiente */
  --acc:       #14a05a;   /* verde corporativo — destaque/positivo */
  --acc2:      #0f7f45;   /* verde escuro — hover/gradiente */

  /* estados */
  --ok:        #14a05a;
  --warn:      #c77a0a;
  --err:       #c6394a;

  /* efeitos */
  --sombra:    0 1px 2px rgba(18,35,59,.06), 0 6px 20px rgba(18,35,59,.06);
  --raio:      12px;
}

/* Logo / assinatura da marca -------------------------------------------- */
.marca { display:flex; align-items:center; gap:11px; }
.marca .logo {
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--acc) 0%, var(--pri) 100%);
  display:grid; place-items:center; box-shadow:0 4px 12px rgba(22,102,196,.28);
}
.marca .logo svg { display:block; }
.marca .nome { font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--txt); line-height:1.05; }
.marca .nome b { color:var(--pri); font-weight:800; }
.marca .tag  { font-size:12px; color:var(--muted); }

/* Faixa/kicker de marca reutilizável */
.brandbar { display:flex; align-items:center; justify-content:space-between; }