/* ============================================================
   ARCOS — Design System / Camada de Marca
   ------------------------------------------------------------
   Identidade própria sobre a base herdada do ClinicSync
   (clinicsync-base.css + app.css). Carregado POR ÚLTIMO para
   sobrepor a primária do tema sem editar a base compartilhada.

   Paleta extraída do logo "ARCOS SEM LETRAS" — os 5 arcos = os
   5 pilares do método (A·R·C·O·S). Reversível: remover o <link>
   e este arquivo restaura o tema ClinicSync genérico.
   ============================================================ */

:root {
  /* As 5 cores dos pilares (verbatim do logo) */
  --arcos-pilar-a: #0a5fbb; /* Análise estratégica — azul   */
  --arcos-pilar-r: #f47b20; /* Relevância p/ cliente — laranja */
  --arcos-pilar-c: #16a9c0; /* Capacidade de execução — teal  */
  --arcos-pilar-o: #5fae34; /* Operação do piloto — verde     */
  --arcos-pilar-s: #f9b115; /* Sustentação — amarelo          */

  /* Cor primária da marca = azul do 1º arco */
  --arcos-primary: var(--arcos-pilar-a);
  --arcos-primary-hover: #084e9c;

  /* Injeção no tema Bootstrap: tudo que referencia var(--bs-primary)
     (topbar accent, focus outline, skip-link, links do tema) segue. */
  --bs-primary: var(--arcos-primary);
  --bs-primary-rgb: 10, 95, 187;
  --bs-link-color: var(--arcos-primary);
  --bs-link-color-rgb: 10, 95, 187;
  --bs-link-hover-color: var(--arcos-primary-hover);
}

/* Botões primários — Bootstrap compila --bs-btn-* com hex fixo,
   então sobrepomos explicitamente (não basta --bs-primary). */
.btn-primary {
  --bs-btn-bg: var(--arcos-primary);
  --bs-btn-border-color: var(--arcos-primary);
  --bs-btn-hover-bg: var(--arcos-primary-hover);
  --bs-btn-hover-border-color: var(--arcos-primary-hover);
  --bs-btn-active-bg: var(--arcos-primary-hover);
  --bs-btn-active-border-color: var(--arcos-primary-hover);
  --bs-btn-disabled-bg: var(--arcos-primary);
  --bs-btn-disabled-border-color: var(--arcos-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--arcos-primary);
  --bs-btn-border-color: var(--arcos-primary);
  --bs-btn-hover-bg: var(--arcos-primary);
  --bs-btn-hover-border-color: var(--arcos-primary);
  --bs-btn-active-bg: var(--arcos-primary);
  --bs-btn-active-border-color: var(--arcos-primary);
}

/* Assinatura de marca: faixa dos 5 pilares na base da topbar escura.
   Substitui a borda cinza de 1px por um fio gradiente das 5 cores. */
.cb-topbar {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--arcos-pilar-a) 0%,
      var(--arcos-pilar-r) 25%,
      var(--arcos-pilar-c) 50%,
      var(--arcos-pilar-o) 75%,
      var(--arcos-pilar-s) 100%
    )
    1;
}

/* Logo no brand do header */
.cb-topbar .arcos-brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

/* Sidebar — item ativo na cor da marca (estava no azul Bootstrap antigo
   rgba(13,110,253)) + accent de borda na primária (inset, não desloca layout). */
.sb-link.active {
  background: rgba(10, 95, 187, 0.28);
  box-shadow: inset 3px 0 0 var(--arcos-primary);
}

/* Utilitários por pilar — para badges/realces semânticos (uso futuro).
   Ex.: <span class="badge arcos-bg-pilar-r">Pilar R</span> */
.arcos-bg-pilar-a { background-color: var(--arcos-pilar-a) !important; color: #fff; }
.arcos-bg-pilar-r { background-color: var(--arcos-pilar-r) !important; color: #fff; }
.arcos-bg-pilar-c { background-color: var(--arcos-pilar-c) !important; color: #fff; }
.arcos-bg-pilar-o { background-color: var(--arcos-pilar-o) !important; color: #fff; }
.arcos-bg-pilar-s { background-color: var(--arcos-pilar-s) !important; color: #212529; }

.arcos-text-pilar-a { color: var(--arcos-pilar-a) !important; }
.arcos-text-pilar-r { color: var(--arcos-pilar-r) !important; }
.arcos-text-pilar-c { color: var(--arcos-pilar-c) !important; }
.arcos-text-pilar-o { color: var(--arcos-pilar-o) !important; }
.arcos-text-pilar-s { color: var(--arcos-pilar-s) !important; }

/* Chip da letra do pilar — identidade por tela (header dos pilares A/R/C/O/S).
   Cor só em elemento não-textual + fundo/texto contrastante: as cores R/C/O/S
   reprovam contraste WCAG como texto sobre branco (1.8–2.8:1), então a cor
   nunca colore o título — vai no chip, que carrega seu próprio texto legível. */
.arcos-pilar-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Marca na tela de login (logo maior, centrado, com respiro) */
.arcos-auth-brand-img {
  max-width: 190px;
  height: auto;
  margin: 0 auto;
  display: block;
}