/* ============================
   FEATRH – Tokens de tema
   ============================ */
:root{
  --ink:     #1B1B1F;   /* texto principal */
  --muted:   #6B6B76;   /* texto secundário */
  --line:    #ECEAF7;   /* bordas suaves */

  /* Paleta FEATRH (degradê) */
  --indigo:  #0F0D78;   /* início */
  --magenta: #CC2D81;   /* fim    */
  --cyan:    #6DB8D8;   /* auxiliar, se quiser 3 cores */
}

/* ============================
   Barra superior (Main Header)
   Mesmo degradê dos botões
   ============================ */
.main-header{
  background: linear-gradient(90deg, var(--indigo) 0%, var(--magenta) 100%) !important;
  border-bottom: 0 !important;
}
.main-header .navbar{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link i,
.main-header .navbar-nav .nav-item > a {
  color: #fff !important;
}
.main-header .navbar-badge,
.main-header .badge{
  color: #1B1B1F !important;
  background: #FFD43B !important;
  border: 0;
}
.layout-navbar-fixed .wrapper .main-header{
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}

/* ============================
   Botão padrão com degradê (pílula)
   Reutilize em <a> ou <button>: class="btn btn-feat"
   ============================ */
.btn-feat,
a.btn-feat{
  display:inline-flex; align-items:center; gap:.5rem;
  color:#fff !important;
  border:0; border-radius:999px;
  padding:.65rem 1.1rem;
  background: linear-gradient(90deg, var(--indigo) 0%, var(--magenta) 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
  text-decoration:none !important;
  font-weight:700; white-space:nowrap;
}
.btn-feat:hover{ filter:brightness(1.05); box-shadow:0 12px 28px rgba(0,0,0,.16); }
.btn-feat:active{ transform:translateY(1px); }
.btn-feat:focus{ outline:none; box-shadow:0 0 0 .15rem rgba(204,45,129,.25); }
.btn-feat .fa, .btn-feat .fas, .btn-feat .far { color:#fff !important; }

/* Aplicação automática no botão da seção DISC, caso o HTML não tenha btn-feat */
.disc-actions .btn{
  color:#fff !important; border:0; border-radius:999px;
  background: linear-gradient(90deg, var(--indigo) 0%, var(--magenta) 100%) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.disc-actions .btn:hover{ filter:brightness(1.05); }

/* ============================
   FEATRH – Ajustes e utilitários
   ============================ */

/* --- Select2: garantir 100% de largura em qualquer estado --- */
.select2,
.select2-container { width: 100% !important; }

.select2-container--default,
.select2-container--default.select2-container--open,
.select2-container--default.select2-container--focus,
.select2-container--below,
.select2-container--above { width: 100% !important; }

/* correção do seletor previamente quebrado (faltavam pontos entre classes) */
span.select2.select2-container.select2-container--default.select2-container--below.select2-container--focus {
  width: 100% !important;
}

/* ============================
   Cores utilitárias (mantidas)
   ============================ */
#accordion .card-header:first-child { background-color: #3b47af; }

.bg-feat           { background-color: #364ca0 !important; }
.azul-feat         { color:            #364ca0 !important; }
/* #3b47af (referência) */
.bg-feat-cinza     { background-color: #999999 !important; }
.bg-feat-claro     { background-color: #001f3f !important; }
.bg-feat-invertido { background-color: #001f3f !important; }

/* ============================
   Imagens responsivas
   ============================ */
.img-sm-sic{
  margin-bottom:20px;
  width:100%;
  height:auto;
  object-fit:contain;
}
/* Variante usada em resultados (mantendo proporção por vh para telas pequenas) */
.img-sm-sic-result{
  margin-bottom:20px;
  width:22vh;
  height:auto;
  object-fit:contain;
}

/* ============================
   Mobile (até 500px)
   ============================ */
@media screen and (max-width: 500px){
  /* Tipografia e formulários menores */
  .pergunta-sm { font-size:1rem; margin-bottom:3vh; }
  .form-group-sm { width:65% !important; }

  /* Modais: correção de viewport em alguns dispositivos */
  .modal-backdrop { height:149vh; }
  .modal-content  { width:45vh; }

  /* Logos/imagens em listas */
  .li-img-responsive { width:0; }         /* oculta imagem lateral em listas compactas */
  .logo-img-responsive{ width:13.5vh; }
}