/* =========================================================================
   brand.css  —  Identidade visual RIFA (azul metálico)
   -------------------------------------------------------------------------
   Escopo: "acentos-only". Mantém o layout claro atual (corpo, cards, forms e
   tabelas continuam legíveis) e troca apenas as cores de MARCA:
     - botões primários/secundários: roxo (#50f) -> azul da paleta
     - header/menu: preto translúcido -> azul-marinho (faz o logo prata brilhar)
     - foco de inputs: glow azul
   Carregado DEPOIS do style.css (ver pages/inc/header.php), por isso vence as
   regras de mesma especificidade. Onde o original usa !important, repetimos.
   Reversível: basta remover o <link> do brand.css.
   ========================================================================= */

:root {
  /* Base / superfícies (referência da paleta do cliente) */
  --rifa-black: #010102;
  --rifa-bg: #030816;
  --rifa-bg-deep: #01081A;
  --rifa-surface: #02102A;
  --rifa-surface-strong: #031A48;

  /* Azul principal */
  --rifa-blue-950: #02112E;
  --rifa-blue-900: #021B4C;
  --rifa-blue-800: #062D6F;
  --rifa-blue-700: #0541A0;
  --rifa-blue-600: #0B6AD7;
  --rifa-blue-500: #089EF7;
  --rifa-blue-400: #32C6F9;
  --rifa-blue-soft: #5EA1EB;

  /* Prata / cromado */
  --rifa-silver-500: #9FA1AA;
  --rifa-silver-400: #BABFC9;
  --rifa-silver-300: #DCDFE4;
  --rifa-silver-100: #F4F4F5;

  /* Destaque dourado */
  --rifa-gold-700: #786443;
  --rifa-gold-500: #AA8B5E;
  --rifa-gold-300: #E3CCA1;

  /* Gradientes / glow */
  --rifa-gradient-blue: linear-gradient(135deg, #0541A0 0%, #0B6AD7 50%, #32C6F9 100%);
  --rifa-gradient-blue-dark: linear-gradient(180deg, #062D6F 0%, #021B4C 100%);
  --rifa-glow-blue: 0 0 24px rgba(8, 158, 247, 0.55);
  --rifa-glow-blue-strong: 0 0 42px rgba(50, 198, 249, 0.65);
}

/* -------------------------------------------------------------------------
   1) BOTÃO DE MARCA  (.btn-cor-primaria e .btn-cor-secundaria = mesmo roxo)
   ------------------------------------------------------------------------- */
.btn.btn-cor-primaria,
.btn.btn-cor-secundaria {
  color: #fff;
  background-color: var(--rifa-blue-600);
  background-image: var(--rifa-gradient-blue);
  border-color: var(--rifa-blue-500);
}

.btn.btn-cor-primaria:hover,
.btn.btn-cor-secundaria:hover {
  color: #fff;
  background-color: var(--rifa-blue-700);
  background-image: none;
  border-color: var(--rifa-blue-600);
}

.btn-check:focus + .btn.btn-cor-primaria,
.btn.btn-cor-primaria:focus,
.btn-check:focus + .btn.btn-cor-secundaria,
.btn.btn-cor-secundaria:focus {
  color: #fff;
  background-color: var(--rifa-blue-700);
  background-image: none;
  border-color: var(--rifa-blue-600);
  box-shadow: 0 0 0 0.25rem rgba(8, 158, 247, 0.5);
}

.btn-check:active + .btn.btn-cor-primaria,
.btn-check:checked + .btn.btn-cor-primaria,
.btn.btn-cor-primaria.active,
.btn.btn-cor-primaria:active,
.show > .btn.btn-cor-primaria.dropdown-toggle,
.btn-check:active + .btn.btn-cor-secundaria,
.btn-check:checked + .btn.btn-cor-secundaria,
.btn.btn-cor-secundaria.active,
.btn.btn-cor-secundaria:active,
.show > .btn.btn-cor-secundaria.dropdown-toggle {
  color: #fff;
  background-color: var(--rifa-blue-700);
  background-image: none;
  border-color: var(--rifa-blue-800);
}

.btn-check:active + .btn.btn-cor-primaria:focus,
.btn-check:checked + .btn.btn-cor-primaria:focus,
.btn.btn-cor-primaria.active:focus,
.btn.btn-cor-primaria:active:focus,
.show > .btn.btn-cor-primaria.dropdown-toggle:focus,
.btn-check:active + .btn.btn-cor-secundaria:focus,
.btn-check:checked + .btn.btn-cor-secundaria:focus,
.btn.btn-cor-secundaria.active:focus,
.btn.btn-cor-secundaria:active:focus,
.show > .btn.btn-cor-secundaria.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(8, 158, 247, 0.5);
}

.btn.btn-cor-primaria.disabled,
.btn.btn-cor-primaria:disabled,
.btn.btn-cor-secundaria.disabled,
.btn.btn-cor-secundaria:disabled {
  color: #fff;
  background-color: var(--rifa-blue-600);
  background-image: none;
  border-color: var(--rifa-blue-500);
}

/* Variantes outline (borda roxa -> azul) */
.btn.btn-outline-cor-primaria,
.btn.btn-outline-cor-secundaria {
  color: var(--rifa-blue-600);
  border-color: var(--rifa-blue-600);
}

.btn.btn-outline-cor-primaria:hover,
.btn.btn-outline-cor-secundaria:hover,
.btn.btn-outline-cor-primaria.active,
.btn.btn-outline-cor-primaria:active,
.btn.btn-outline-cor-secundaria.active,
.btn.btn-outline-cor-secundaria:active {
  color: #fff;
  background-color: var(--rifa-blue-600);
  border-color: var(--rifa-blue-600);
}

.btn.btn-outline-cor-primaria:focus,
.btn.btn-outline-cor-secundaria:focus {
  box-shadow: 0 0 0 0.25rem rgba(8, 158, 247, 0.5);
}

/* -------------------------------------------------------------------------
   2) HEADER / MENU  — preto translúcido -> azul-marinho (logo prata brilha)
   Não tocamos na variante .campanha (fica transparente sobre o hero).
   ------------------------------------------------------------------------- */
.header-app-header:not(.campanha) .header-app-header-container {
  background-color: var(--rifa-blue-950);
  color: var(--rifa-silver-100);
}

.bg-cor-primaria {
  background-color: var(--rifa-blue-950) !important;
}

/* .navbar já era azul (#103996); harmoniza com a paleta */
.navbar {
  background-color: var(--rifa-blue-800);
}
.navbar.scrolled {
  background-color: rgba(6, 45, 111, 0.94);
}

/* Ícones/links do topo em prata claro para contraste sobre o navy */
.header-app-header:not(.campanha) .header-app-header-wrap .Header_btn-link__1ambC {
  color: var(--rifa-silver-100);
}

/* -------------------------------------------------------------------------
   3) FOCO DE INPUTS — glow azul (fundo/texto do form permanecem claros)
   ------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
  border-color: var(--rifa-blue-500);
  box-shadow: 0 0 0 0.2rem rgba(8, 158, 247, 0.25);
}

/* -------------------------------------------------------------------------
   4) LINKS / REALCES de acento que herdavam roxo
   ------------------------------------------------------------------------- */
.text-cor-primaria-link,
.text-cor-primaria-color {
  color: var(--rifa-silver-100);
}
