/*
 * Marca do RUFIT (componente {% marca %}, templates/componentes/marca.html), 23/10/2026.
 * Carregado pelo master.html fora do bloco base_css, então vale também no site público.
 * As cores são as da marca, fixas de propósito: a logo é a mesma em qualquer tela, só troca o tom
 * entre fundo claro e fundo escuro (halter grafite e chama vermelha no claro; halter claro e chama
 * mais amarela, que brilha, no escuro). Sem caixa nem fundo: o fundo é o da página.
 */
.ui-marca {
  --marca-h: 2.25rem;
  --marca-halter: #333d48;
  --marca-ponta: #ee4a1d;
  --marca-base: #ff7300;
  --marca-nome: #1a3a5c;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--marca-h) * 0.3);
  line-height: 1;
  vertical-align: middle;
}

.ui-marca--sm { --marca-h: 1.5rem; }
.ui-marca--md { --marca-h: 2.25rem; }
.ui-marca--lg { --marca-h: 3.25rem; }
.ui-marca--xl { --marca-h: 5rem; }

.ui-marca-simbolo {
  display: block;
  flex: none;
  height: var(--marca-h);
  width: calc(var(--marca-h) * 310 / 197);
}

.ui-marca-halter { fill: var(--marca-halter); }
.ui-marca-ponta { stop-color: var(--marca-ponta); }
.ui-marca-base { stop-color: var(--marca-base); }

.ui-marca-nome {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: calc(var(--marca-h) * 0.62);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--marca-nome);
}

/* Tom escuro: segue o tema escuro do sistema, ou fixo onde o fundo é sempre escuro (menu lateral). */
[data-bs-theme="dark"] .ui-marca,
.ui-marca.ui-marca--escuro {
  --marca-halter: #e6ebf2;
  --marca-ponta: #ffb21f;
  --marca-base: #ff6a00;
  --marca-nome: #f3f6fa;
}

.ui-marca.ui-marca--claro {
  --marca-halter: #333d48;
  --marca-ponta: #ee4a1d;
  --marca-base: #ff7300;
  --marca-nome: #1a3a5c;
}

/* Dentro de link: sem sublinhado, e o nome não herda a cor do link. */
a .ui-marca-nome { text-decoration: none; }

@media (forced-colors: active) {
  .ui-marca-halter { fill: CanvasText; }
  .ui-marca-nome { color: CanvasText; }
}