/* =========================================================
   main.css — Portal SBS Moradias
   Ordem: carregue variaveis.css ANTES deste arquivo.

   A estrutura reproduz o portal Casa Macapá, um WordPress sobre Bootstrap 4
   praticamente sem personalização: fundo branco, sem sombra, sem cartão,
   sem gradiente, informação organizada por FIELDSETS com borda e legenda.
   As cores são as da EMHAB (ver variaveis.css). Este arquivo é curto de
   propósito: quase tudo é o padrão do framework.
   ========================================================= */

/* ===== Base ===== */
html,
body {
  font-family: var(--fonte);
  font-size: var(--fonte-base);
  color: var(--texto);
  background: var(--branco);
}

main {
  min-height: 60vh;
}

a {
  color: var(--texto-suave);
}

a:hover {
  color: var(--texto);
}

/* Links dentro do conteúdo vêm sublinhados e na cor de link da marca, como os
   links azuis do portal de referência.
   O :not(.btn) é obrigatório: os botões INSCRIÇÃO e Credenciamento também
   são <a> dentro de .conteudo, e sem a exclusão esta
   regra (mais específica que .btn-enviar) pintava o texto deles de verde
   sobre fundo verde e os sublinhava. */
.conteudo a:not(.btn) {
  color: var(--cor-link);
  text-decoration: underline;
}

.conteudo a:not(.btn):hover {
  color: var(--cor-link-hover);
}

h1,
.entry-title {
  color: var(--texto-titulo);
  font-size: 1.7rem;
  font-weight: 400;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texto);
}

h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

/* ===== Cabeçalho ===== */
.site-header {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  padding: .5rem 0;
}

.site-header .container {
  flex-wrap: wrap;
}

/* O logotipo do cabeçalho é a faixa de cima da marca oficial:
   Minha Casa Minha Vida / FGTS + SBS Moradias. Mesmo papel do
   "Casa Macapá | Minha Casa Minha Vida" do portal de referência. */
.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.marca img {
  height: 56px;
  width: auto;
  display: block;
}

/* Rótulo ao lado do logotipo — só no painel ("Painel EMHAB"). */
.marca .marca-co {
  border-left: 1px solid var(--borda);
  padding-left: .6rem;
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--marca-verde);
}

@media (max-width: 480px) {
  .marca img {
    height: 42px;
  }

  .marca .marca-co {
    display: none;
  }
}

.menu-topo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-topo a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: .9rem;
}

.menu-topo a:hover {
  color: var(--marca-verde);
}

/* ===== Rodapé ===== */
.site-footer {
  background: var(--cor-barra);
  color: var(--branco);
  padding: 1.1rem 0;
  margin-top: 2.5rem;
  text-align: center;
  font-size: .85rem;
}

.site-footer a {
  color: var(--branco);
  text-decoration: underline;
}

/* ===== Formulários ===== */
/* Campos planos: fundo levemente cinza, borda fina, cantos quase retos. */
.form-control,
.form-select {
  background-color: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--campo-raio);
  min-height: var(--campo-altura);
  font-size: .9rem;
  color: var(--texto);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--branco);
  border-color: var(--cor-acao);
  box-shadow: 0 0 0 .2rem var(--anel-foco);
}

textarea.form-control {
  min-height: 5rem;
}

.form-label {
  font-size: .9rem;
  margin-bottom: .3rem;
  color: var(--texto);
}

.obrigatorio {
  color: var(--cor-perigo);
}

.form-text {
  font-size: .78rem;
  color: var(--texto-suave);
}

.form-check-input:checked {
  background-color: var(--cor-acao);
  border-color: var(--cor-acao);
}

.form-check-input:focus {
  border-color: var(--cor-acao);
  box-shadow: 0 0 0 .2rem var(--anel-foco);
}

.form-check-label {
  font-size: .9rem;
}

/* Select2 (Profissão) com a mesma cara dos demais campos. Sem isto ele
   aparece mais baixo e com borda cinza-escura, destoando da linha. */
.select2-container--default .select2-selection--single {
  height: var(--campo-altura);
  background-color: var(--campo-fundo);
  border: 1px solid var(--campo-borda);
  border-radius: var(--campo-raio);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(var(--campo-altura) - 2px);
  padding-left: .75rem;
  font-size: .9rem;
  color: var(--texto);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(var(--campo-altura) - 2px);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cor-acao);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--cor-acao);
}

/* ===== Fieldsets — o elemento estruturante do formulário ===== */
fieldset.bloco {
  border: 1px solid var(--borda);
  border-radius: var(--campo-raio);
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.5rem;
}

fieldset.bloco > legend {
  float: none;
  width: auto;
  padding: 0 .5rem;
  margin-bottom: .5rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--texto);
}

/* ===== Botões ===== */
/* Botões de acesso (Acessar / Cadastrar) sem arredondamento, como no
   portal de referência; raio pequeno do Bootstrap nos demais. */
.btn-acesso {
  background: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  color: var(--branco);
  border-radius: 0;
  padding: 12px 24px;
  font-size: .9rem;
}

.btn-acesso:hover,
.btn-acesso:focus {
  background: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  color: var(--branco);
}

.btn-enviar {
  background: var(--cor-acao);
  border: 1px solid var(--cor-acao);
  color: var(--branco);
  font-size: .95rem;
  padding: .5rem 1.1rem;
}

.btn-enviar:hover,
.btn-enviar:focus,
.btn-enviar:disabled {
  background: var(--cor-acao-hover);
  border-color: var(--cor-acao-hover);
  color: var(--branco);
}

.btn-limpar {
  background: var(--cor-perigo);
  border: 1px solid var(--cor-perigo);
  color: var(--branco);
}

.btn-limpar:hover,
.btn-limpar:focus {
  background: var(--cor-perigo-hover);
  border-color: var(--cor-perigo-hover);
  color: var(--branco);
}

.btn-primaria {
  background: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  color: var(--branco);
}

.btn-primaria:hover,
.btn-primaria:focus {
  background: var(--cor-primaria-hover);
  border-color: var(--cor-primaria-hover);
  color: var(--branco);
}

/* ===== Bootstrap na cor da marca =====
   Estes componentes definem a cor dentro da própria classe, então só as
   variáveis globais de variaveis.css não bastam. */
.btn-primary {
  --bs-btn-bg: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-bg: var(--cor-primaria-hover);
  --bs-btn-hover-border-color: var(--cor-primaria-hover);
  --bs-btn-active-bg: var(--cor-primaria-hover);
  --bs-btn-active-border-color: var(--cor-primaria-hover);
  --bs-btn-disabled-bg: var(--cor-primaria);
  --bs-btn-disabled-border-color: var(--cor-primaria);
  --bs-btn-focus-shadow-rgb: 0, 130, 72;
}

.btn-outline-primary {
  --bs-btn-color: var(--cor-primaria);
  --bs-btn-border-color: var(--cor-primaria);
  --bs-btn-hover-color: var(--branco);
  --bs-btn-hover-bg: var(--cor-primaria);
  --bs-btn-hover-border-color: var(--cor-primaria);
  --bs-btn-active-color: var(--branco);
  --bs-btn-active-bg: var(--cor-primaria-hover);
  --bs-btn-active-border-color: var(--cor-primaria-hover);
  --bs-btn-focus-shadow-rgb: 0, 130, 72;
}

.btn-outline-danger {
  --bs-btn-color: var(--cor-perigo);
  --bs-btn-border-color: var(--cor-perigo);
  --bs-btn-hover-color: var(--branco);
  --bs-btn-hover-bg: var(--cor-perigo);
  --bs-btn-hover-border-color: var(--cor-perigo);
  --bs-btn-active-color: var(--branco);
  --bs-btn-active-bg: var(--cor-perigo-hover);
  --bs-btn-active-border-color: var(--cor-perigo-hover);
  --bs-btn-focus-shadow-rgb: 223, 29, 32;
}

.pagination {
  --bs-pagination-color: var(--cor-link);
  --bs-pagination-hover-color: var(--cor-link-hover);
  --bs-pagination-focus-color: var(--cor-link-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--anel-foco);
  --bs-pagination-active-bg: var(--cor-primaria);
  --bs-pagination-active-border-color: var(--cor-primaria);
}

.accordion {
  --bs-accordion-active-color: var(--marca-verde);
  --bs-accordion-active-bg: #E6F2EC;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--anel-foco);
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23033A2C' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

/* ===== Abas Login / Cadastro ===== */
.nav-tabs .nav-link {
  color: var(--cor-link);
  font-size: .95rem;
}

.nav-tabs .nav-link:hover {
  color: var(--cor-link-hover);
}

.nav-tabs .nav-link.active {
  color: var(--texto-suave);
  background: var(--branco);
  border-color: var(--borda) var(--borda) var(--branco);
}

/* ===== Leitura obrigatória ===== */
.selo-obrigatorio {
  display: inline-block;
  background: var(--cor-perigo);
  color: var(--branco);
  font-weight: 700;
  font-size: .85rem;
  padding: .3rem .6rem;
  border-radius: var(--campo-raio);
  white-space: nowrap;
}

/* A lista de legislação mostra a URL crua, sublinhada — é o que o cidadão
   reconhece como "o link da lei". */
.lista-leis {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

.lista-leis li {
  margin-bottom: .35rem;
  line-height: 1.5;
}

.lista-leis a {
  color: var(--cor-link);
  text-decoration: underline;
  word-break: break-all;
  font-size: .9rem;
}

.lista-leis .lei-nome {
  display: block;
  font-size: .82rem;
  color: var(--texto-suave);
  text-decoration: none;
  word-break: normal;
}

/* Marca o documento já aberto — o aceite só libera depois de abrir todos. */
.lista-leis li.lida::before {
  content: "✓ ";
  color: var(--cor-acao);
  font-weight: 700;
}

/* ===== Legislação (página do programa) ===== */
.lista-legislacao {
  padding-left: 1.1rem;
  margin-bottom: 0;
}

.lista-legislacao li {
  margin-bottom: .75rem;
}

.lista-legislacao li:last-child {
  margin-bottom: 0;
}

.lista-legislacao .lei-arquivo {
  font-size: .8rem;
  color: var(--texto-suave);
  white-space: nowrap;
}

.lista-legislacao .lei-nome {
  display: block;
  font-size: .88rem;
  color: var(--texto-suave);
}

/* ===== Texto legal (Beneficiário) ===== */
.texto-legal {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.texto-legal p {
  margin-bottom: .55rem;
}

/* ===== Declarações ===== */
.declaracao {
  margin-bottom: 1.25rem;
}

.declaracao > p {
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .5rem;
}

.declaracao .opcoes {
  display: flex;
  gap: 1.5rem;
}

.declaracao .aviso-nao-atende {
  font-size: .82rem;
  color: var(--cor-perigo);
  margin-top: .4rem;
}

/* ===== Faixas de renda ===== */
.faixa-opcao {
  border: 1px solid var(--borda);
  border-radius: var(--campo-raio);
  padding: .85rem 1rem;
  height: 100%;
}

.faixa-opcao:has(input:checked) {
  border-color: var(--cor-acao);
  background: rgba(0, 130, 72, .06);
}

.faixa-opcao .faixa-titulo {
  font-weight: 700;
  font-size: .92rem;
}

.faixa-opcao .faixa-valor {
  font-weight: 700;
  color: var(--marca-verde);
}

/* ===== Avisos ===== */
.aviso {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--cor-acao);
  background: var(--cinza-claro);
  padding: .8rem 1rem;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.aviso-atencao {
  border-left-color: var(--cor-perigo);
  background: #FDF5F5;
}

.aviso-info {
  border-left-color: var(--emhab-verde);
  background: #F1F6F3;
}

/* ===== Tabelas (painel) ===== */
/* Tabela "bordered" sem cabeçalho colorido, como no portal de referência. */
.tabela {
  font-size: .9rem;
}

.tabela th,
.tabela td {
  border: 1px solid var(--borda);
  padding: .65rem;
  vertical-align: middle;
}

.tabela thead th {
  font-weight: 600;
  background: var(--branco);
  text-transform: uppercase;
  font-size: .82rem;
}

/* ===== Situação (só no painel da EMHAB) ===== */
.status-badge {
  display: inline-block;
  padding: .22rem .55rem;
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--branco);
  white-space: nowrap;
}

.status-analise      { background: var(--st-analise); }
.status-pendente     { background: var(--st-pendente); color: #3B2A00; }
.status-indicado     { background: var(--st-indicado); }
.status-nao-indicado { background: var(--st-nao-indicado); }
.status-aprovado     { background: var(--st-aprovado); }
.status-beneficiado  { background: var(--st-beneficiado); }

/* ===== Painel da EMHAB =====
   O painel NÃO copia o portal de referência: é ferramenta interna, usada o
   dia inteiro pela equipe. Aqui cartão, ícone e situação colorida ajudam a
   varrer a lista. */
.painel-caixa {
  border: 1px solid var(--borda);
  border-radius: var(--campo-raio);
  background: var(--branco);
}

/* ===== Comprovante ===== */
.protocolo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--marca-verde);
}

.revisao dt {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--texto-suave);
  font-weight: 600;
}

.revisao dd {
  margin-bottom: .8rem;
  font-size: .9rem;
}

.revisao h6 {
  font-weight: 700;
  border-bottom: 1px solid var(--borda);
  padding-bottom: .35rem;
  margin-top: 1.1rem;
  font-size: .95rem;
}

/* ===== Página do programa ===== */
.programa-capa {
  background: var(--cor-barra);
  color: var(--branco);
  padding: 2rem 0;
  margin-bottom: 1.75rem;
}

.programa-capa h1 {
  color: var(--branco);
  font-weight: 700;
  margin-bottom: .5rem;
}

/* Logotipo completo dentro do conteúdo, logo após o título — mesma posição
   da imagem do programa na página de referência. */
.logo-programa {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 0 1.5rem;
}

.botoes-programa .btn {
  margin: 0 .4rem .6rem 0;
}

/* ===== Página 404 ===== */
.erro-404 {
  max-width: 34rem;
  margin: 1rem auto;
  text-align: center;
}

.erro-404 .erro-icone {
  width: 96px;
  height: 96px;
  margin-bottom: .75rem;
}

/* O "404" grande em verde da marca; o vermelho fica só para erro de
   preenchimento, e esta página não é culpa de quem chegou nela. */
.erro-404 .erro-codigo {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--marca-verde);
  margin-bottom: .25rem;
}

.erro-404 h1 {
  margin-bottom: .75rem;
}

/* ===== Impressão do comprovante ===== */
@media print {

  .site-header,
  .site-footer,
  .no-print {
    display: none !important;
  }

  fieldset.bloco {
    border: 0;
    padding: 0;
  }
}