/* ============================================================
   style.css — Portal Institucional
   Versão limpa e organizada
   ============================================================
   
   ÍNDICE DE SEÇÕES:
   1.  Variáveis (COMECE AQUI para mudar cores, fontes, etc.)
   2.  Reset / Base
   3.  Utilitários
   4.  Barra de Acessibilidade
   5.  Navbar + Logo
   6.  Hero (banner principal)
   7.  Breadcrumb
   8.  Layout de Página
   9.  Cards
   10. Atalhos (index)
   11. Notícias
   12. Tabela
   13. Badges
   14. Botões
   15. Formulários
   16. Alertas
   17. Perfil de Usuário
   18. Ouvidoria / Pedidos
   19. Footer
   20. Responsivo (mobile)

   ============================================================ */


/* ============================================================
   1. VARIÁVEIS — EDITE AQUI PARA MUDAR TODO O VISUAL
   ============================================================
   
   HOW TO: Cada variável controla uma parte do sistema.
   Troque o valor HEX (ex: #0B3D91) pela cor que você quiser.
   A mudança afeta TODO o sistema automaticamente.
   
   COMO TESTAR: Salve o arquivo e recarregue a página no browser.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;600;700;800&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root {

  /* ── PALETA PRINCIPAL ─────────────────────────────────────
     Estas são as cores que mais aparecem no sistema.
     --cor-primaria     → navbar, botões principais, títulos, bordas de destaque
     --cor-secundaria   → links, hover de botões
     --cor-destaque     → hover mais claro, elementos ativos
     ──────────────────────────────────────────────────────── */
  --cor-primaria:    #252e4f;   /* Azul escuro — navbar, cabeçalhos, botão primário */
  --cor-secundaria:  #2f3b66;   /* Azul médio  — links e botões secundários         */
  --cor-destaque:    #3d4f85;   /* Azul claro  — hover, estados ativos              */

  /* ── FUNDOS COLORIDOS ────────────────────────────────────
     Versões claras das cores principais (para fundo de seções)
     ──────────────────────────────────────────────────────── */
  --cor-primaria-bg:  #eef0f6;  /* Fundo azul suave — seções, campos condicionais   */
  --cor-primaria-borda: #c2c8de; /* Borda azul suave — bordas de painéis            */

  /* ── ACENTO (botão Entrar, linha ativa no menu) ──────────
     Troque aqui para mudar a cor de destaque do botão "Entrar"
     e do sublinhado do menu ativo
     ──────────────────────────────────────────────────────── */
  --cor-acento:      #E8A800;   /* Amarelo — botão Entrar, indicador de menu ativo  */
  --cor-acento-bg:   #FFF8E1;   /* Fundo amarelo suave — alertas de aviso           */

  /* ── SEMÂNTICAS (status / feedback) ─────────────────────
     Usadas em alertas, badges e mensagens de sistema
     ──────────────────────────────────────────────────────── */
  --cor-sucesso:     #1B7A34;
  --cor-sucesso-bg:  #E6F5EB;
  --cor-erro:        #C92A2A;
  --cor-erro-bg:     #FFF0F0;

  /* ── NEUTROS (texto, fundos gerais, bordas) ──────────────
     --cor-fundo       → fundo de toda a página
     --cor-card        → fundo de cards e caixas brancas
     --cor-texto       → cor padrão de todos os textos
     ──────────────────────────────────────────────────────── */
  --cor-fundo:       #F4F6F9;   /* Fundo geral da página                            */
  --cor-card:        #FFFFFF;   /* Fundo de cards, formulários e caixas             */
  --cor-texto:       #1A2332;   /* Cor principal de textos                          */
  --cinza-200:       #E8ECF0;   /* Bordas sutis, divisores                          */
  --cinza-300:       #CBD2DA;   /* Bordas de inputs, elementos inativos             */
  --cinza-500:       #6B7A8D;   /* Textos secundários, legendas                     */
  --cinza-700:       #3D4A5C;   /* Textos de tabelas, labels                        */

  /* ── ALIASES (compatibilidade com código existente) ─────
     Não altere estas — elas apenas apontam para as variáveis acima
     ──────────────────────────────────────────────────────── */
  --azul-escuro:     var(--cor-primaria);
  --azul-medio:      var(--cor-secundaria);
  --azul-claro:      var(--cor-destaque);
  --azul-bg:         var(--cor-primaria-bg);
  --azul-borda:      var(--cor-primaria-borda);
  --amarelo:         var(--cor-acento);
  --amarelo-bg:      var(--cor-acento-bg);
  --verde:           var(--cor-sucesso);
  --verde-bg:        var(--cor-sucesso-bg);
  --vermelho:        var(--cor-erro);
  --vermelho-bg:     var(--cor-erro-bg);
  --cinza-100:       var(--cor-fundo);
  --cinza-900:       var(--cor-texto);
  --branco:          var(--cor-card);

  /* ── SOMBRAS ─────────────────────────────────────────────
     Não costuma precisar alterar, mas pode suavizar ou intensificar
     ──────────────────────────────────────────────────────── */
  --sombra-sm:       0 1px 4px rgba(0,0,0,.08);
  --sombra-md:       0 4px 16px rgba(0,0,0,.10);
  --sombra-lg:       0 8px 32px rgba(0,0,0,.12);

  /* ── BORDAS ARREDONDADAS ─────────────────────────────────
     Aumente para visual mais arredondado, diminua para mais quadrado
     ──────────────────────────────────────────────────────── */
  --raio:            6px;
  --raio-lg:         10px;

  /* ── TIPOGRAFIA ──────────────────────────────────────────
     Para trocar a fonte, substitua 'Source Sans 3' por outra
     e atualize o @import acima com a nova fonte do Google Fonts
     ──────────────────────────────────────────────────────── */
  --fonte:           'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --fonte-serif:     'Source Serif 4', Georgia, serif;

  /* ── NAVBAR ──────────────────────────────────────────────
     --navbar-h → altura da barra superior. Aumente se quiser mais espaço para a logo
     --cor-navbar → cor de fundo da navbar (padrão = cor primária)
     ──────────────────────────────────────────────────────── */
  --navbar-h:        62px;      /* Altura da navbar — aumente para logo maior       */
  --cor-navbar:      var(--cor-primaria); /* Cor de fundo da navbar               */

  /* ── LOGO ────────────────────────────────────────────────
     Controla o tamanho do círculo/ícone da logo na navbar
     Para usar imagem real: veja a seção "5. Navbar + Logo" abaixo
     ──────────────────────────────────────────────────────── */
  --logo-tamanho:    38px;      /* Largura e altura do brasão/círculo da logo        */

  /* ── TRANSIÇÕES ──────────────────────────────────────────
     Velocidade das animações de hover. Aumente para mais lento.
     ──────────────────────────────────────────────────────── */
  --trans:           .18s ease;
}


/* ============================================================
   2. RESET / BASE
   Não mexa aqui — é a base que normaliza o browser
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.65;
  color: var(--cor-texto);
  background: var(--cor-fundo);    /* ← Fundo geral da página: altere --cor-fundo em :root */
  padding-top: var(--navbar-h);
}
a { color: var(--azul-medio); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--azul-claro); text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }


/* ============================================================
   3. UTILITÁRIOS
   ============================================================ */

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }
.visivel-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ============================================================
   4. BARRA DE ACESSIBILIDADE (faixa preta no topo)
   Para mudar a cor de fundo: altere --cor-texto (default = cinza-900)
   ============================================================ */

.barra-acesso {
  background: var(--cor-texto);
  color: rgba(255,255,255,.65);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem 0;
  border-bottom: 2px solid var(--cor-acento); /* ← linha colorida = --cor-acento */
}
.barra-acesso .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.barra-acesso a { color: rgba(255,255,255,.65); }
.barra-acesso a:hover { color: var(--cor-card); text-decoration: none; }
.barra-acesso-links { display: flex; gap: 1.25rem; }


/* ============================================================
   5. NAVBAR + LOGO
   
   COR DA NAVBAR: altere --cor-navbar em :root
   ALTURA DA NAVBAR: altere --navbar-h em :root
   
   LOGO COM IMAGEM REAL:
   ─────────────────────────────────────────────────────────
   1. Coloque seu arquivo de imagem em: assets/img/logo.png
      (ou .svg — SVG é preferível por ser vetorial/nítido)
   
   2. No componentes.js, dentro do navbarHTML, troque:
      <div class="navbar-logo-brasao">🏛️</div>
      por:
      <img src="${BASE}assets/img/logo.png" class="navbar-logo-img" alt="Logo">
   
   3. O CSS abaixo já está pronto para receber essa imagem.
      Ajuste --logo-tamanho em :root para o tamanho desejado.
   ============================================================ */

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background: var(--cor-navbar);     /* ← Cor da navbar: altere --cor-navbar em :root */
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1rem;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--cor-card);
  flex-shrink: 0;
  text-decoration: none;
}
.navbar-logo:hover { text-decoration: none; color: var(--cor-card); }

/* Círculo com emoji (padrão atual) */
.navbar-logo-brasao {
  width: var(--logo-tamanho);        /* ← Tamanho do círculo: altere --logo-tamanho em :root */
  height: var(--logo-tamanho);
  background: rgba(255,255,255,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.25);
}

/* Imagem real de logo (quando você substituir o emoji por <img>) */
.navbar-logo-img {
  width: var(--logo-tamanho);        /* ← Mesmo controle de tamanho */
  height: var(--logo-tamanho);
  object-fit: contain;               /* Mantém proporção sem cortar */
  flex-shrink: 0;
  /* Descomente abaixo se quiser fundo branco atrás da logo: */
  /* background: white; border-radius: 4px; padding: 3px; */
}

.navbar-logo-texto { line-height: 1.2; }
.navbar-logo-sigla {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--cor-card);
}
.navbar-logo-nome {
  display: block;
  font-size: .65rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .05em;
  font-weight: 400;
  text-transform: uppercase;
}
.navbar-menu {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: auto;
}
.nav-link {
  color: rgba(255,255,255,.82);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: .45rem .7rem;
  border-radius: var(--raio);
  transition: background var(--trans), color var(--trans);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav-link:hover { background: rgba(255,255,255,.12); color: var(--cor-card); text-decoration: none; }
.nav-link.ativo { background: rgba(255,255,255,.18); color: var(--cor-card); }
.nav-link.ativo::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--cor-acento);    /* ← Linha indicadora de ativo: altere --cor-acento */
  border-radius: 2px;
}
.navbar-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.18);
  margin: 0 .4rem;
  flex-shrink: 0;
}
.btn-entrar {
  color: var(--cor-primaria);
  background: var(--cor-acento);    /* ← Botão "Entrar": altere --cor-acento em :root */
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .45rem 1rem;
  border-radius: var(--raio);
  text-decoration: none;
  transition: opacity var(--trans);
  white-space: nowrap;
}
.btn-entrar:hover { opacity: .85; text-decoration: none; color: var(--cor-primaria); }
.btn-sair-nav {
  color: #ffb3b3;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .45rem .9rem;
  border-radius: var(--raio);
  border: 1.5px solid rgba(255,100,100,.35);
  text-decoration: none;
  transition: background var(--trans);
  white-space: nowrap;
}
.btn-sair-nav:hover { background: rgba(220,50,50,.15); text-decoration: none; color: #ffcfcf; }
.nav-usuario {
  font-size: .78rem;
  color: rgba(255,255,255,.75);
  padding: .4rem .6rem;
  white-space: nowrap;
}

/* Hamburguer (mobile) */
.navbar-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: .5rem;
  border-radius: var(--raio);
}
.navbar-toggle:hover { background: rgba(255,255,255,.1); }
.navbar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--cor-card);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}


/* ============================================================
   6. HERO (banner principal)
   
   Para mudar a cor do banner: edite --cor-primaria em :root
   ============================================================ */

.hero {
  background-color: #252e4f; /* ← Cor sólida do banner: sem degradê */
  color: var(--cor-card);
  padding: 3.5rem 1.25rem 3rem;
  position: relative;
  overflow: hidden;
}
.hero-conteudo { position: relative; z-index: 1; }
.hero-conteudo:has(.hero-logo) { text-align: center; }
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cor-acento);
}
.hero-titulo {
  font-size: clamp(1.75rem, 5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1.15;
  margin-bottom: .75rem;
}
.hero-titulo em {
  font-style: normal;
  color: var(--cor-acento);          /* ← Palavra em destaque no título */
}
.hero-subtitulo {
  font-size: clamp(.9rem, 2vw, 1.1rem);
  color: rgba(255,255,255,.78);
  max-width: 580px;
  line-height: 1.7;
}
/* Hero pequeno para páginas internas */
.hero-sm { padding: 2rem 1.25rem 1.75rem; }
.hero-sm .hero-titulo { font-size: 1.55rem; }

/* Logo no hero da home */
.hero-logo {
  display: block;
  max-height: 300px;
  width: auto;
  margin: 0 auto;
}


/* ============================================================
   7. BREADCRUMB (trilha de navegação)
   ============================================================ */

.breadcrumb {
  background: var(--cor-card);
  border-bottom: 1px solid var(--cinza-200);
  padding: .55rem 0;
  font-size: .78rem;
  color: var(--cinza-500);
}
.breadcrumb a { color: var(--azul-medio); }
.breadcrumb a:hover { color: var(--azul-claro); }
.breadcrumb span { margin: 0 .4rem; color: var(--cinza-300); }


/* ============================================================
   8. LAYOUT DE PÁGINA
   ============================================================ */

.pagina { padding: 2.5rem 0 3.5rem; }


/* ============================================================
   9. CARDS (caixas de conteúdo)
   
   Cor de fundo dos cards: altere --cor-card em :root (padrão = branco)
   ============================================================ */

.card {
  background: var(--cor-card);       /* ← Fundo dos cards: altere --cor-card em :root */
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}
.card-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cor-primaria);        /* ← Cor do título do card: altere --cor-primaria */
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--cor-primaria);
  display: flex;
  align-items: center;
  gap: .5rem;
}


/* ============================================================
   10. ATALHOS (grade de acesso rápido na index)
   ============================================================ */

.atalhos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.1rem;
}
.atalho {
  display: block;
  background: var(--cor-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: 1.6rem 1.1rem 1.4rem;
  text-align: center;
  text-decoration: none;
  color: var(--cor-texto);
  border: 1.5px solid var(--cinza-200);
  border-top: 3.5px solid var(--cor-primaria); /* ← Borda superior colorida */
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.atalho:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-lg);
  border-color: var(--cor-destaque);
  text-decoration: none;
  color: var(--cor-primaria);
}
.atalho-icone { font-size: 2rem; margin-bottom: .65rem; display: block; }
.atalho-titulo {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-primaria);
}
.atalho-desc { font-size: .75rem; color: var(--cinza-500); margin-top: .3rem; }


/* ============================================================
   11. NOTÍCIAS
   ============================================================ */

.noticias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.noticia-card {
  background: var(--cor-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  border: 1px solid var(--cinza-200);
  overflow: hidden;
  transition: box-shadow var(--trans);
}
.noticia-card:hover { box-shadow: var(--sombra-md); }
.noticia-img {
  width: 100%;
  height: 130px;
  background-color: var(--cor-primaria); /* ← Cor sólida: sem degradê */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}
.noticia-corpo { padding: 1rem 1.15rem 1.25rem; }
.noticia-data { font-size: .72rem; color: var(--cinza-500); margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em; }
.noticia-titulo { font-size: .95rem; font-weight: 700; color: var(--cor-texto); line-height: 1.4; margin-bottom: .5rem; }
.noticia-link { font-size: .8rem; color: var(--azul-medio); font-weight: 600; }


/* ============================================================
   12. TABELA
   
   Cor do cabeçalho da tabela: altere --cor-primaria em :root
   ============================================================ */

.tabela-wrap { overflow-x: auto; border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead { background: var(--cor-primaria); }    /* ← Cabeçalho da tabela */
thead th {
  padding: .8rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cor-card);
}
tbody tr { border-bottom: 1px solid var(--cinza-200); transition: background var(--trans); }
tbody tr:hover { background: var(--azul-bg); }
tbody td { padding: .8rem 1rem; color: var(--cinza-700); font-size: .88rem; }
tbody tr:last-child { border-bottom: none; }


/* ============================================================
   13. BADGES (etiquetas de status)
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-verde   { background: var(--cor-sucesso-bg); color: var(--cor-sucesso); }
.badge-amarelo { background: var(--cor-acento-bg); color: #7A5800; }
.badge-azul    { background: var(--azul-bg); color: var(--cor-primaria); }
.badge-cinza   { background: var(--cinza-200); color: var(--cinza-700); }
.badge-verde::before   { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cor-sucesso); }
.badge-amarelo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--cor-acento); }


/* ============================================================
   14. BOTÕES
   
   .btn-primario  → botão principal (azul)     → controla --cor-primaria
   .btn-secundario → botão cinza/neutro
   .btn-perigo    → ação destrutiva (vermelho)
   .btn-download  → baixar arquivo (azul claro)
   ============================================================ */

.btn-primario {
  display: inline-block;
  padding: .8rem 1.5rem;
  background: var(--cor-primaria);   /* ← Cor do botão principal: altere --cor-primaria */
  color: var(--cor-card);
  font-family: var(--fonte);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--trans), transform var(--trans);
  text-decoration: none;
  text-align: center;
}
.btn-primario:hover { background: var(--cor-secundaria); transform: translateY(-1px); color: var(--cor-card); text-decoration: none; }
.btn-primario:active { transform: translateY(0); }
.btn-primario.bloco { display: block; width: 100%; }
.btn-primario:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-secundario {
  display: inline-block;
  padding: .55rem 1.1rem;
  background: var(--cinza-200);
  color: var(--cinza-700);
  font-family: var(--fonte);
  font-size: .82rem;
  font-weight: 600;
  border: none;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--trans);
  text-decoration: none;
}
.btn-secundario:hover { background: var(--cinza-300); text-decoration: none; color: var(--cor-texto); }

.btn-perigo {
  display: inline-block;
  padding: .6rem 1.25rem;
  background: var(--cor-erro-bg);
  color: var(--cor-erro);
  font-family: var(--fonte);
  font-size: .85rem;
  font-weight: 700;
  border: 1.5px solid rgba(200,42,42,.25);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--trans);
  text-decoration: none;
}
.btn-perigo:hover { background: #ffd6d6; text-decoration: none; color: var(--cor-erro); }

.btn-download {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .85rem;
  background: var(--azul-bg);
  color: var(--cor-primaria);
  font-size: .78rem;
  font-weight: 700;
  border-radius: var(--raio);
  text-decoration: none;
  transition: background var(--trans);
  border: 1px solid var(--azul-borda);
}
.btn-download:hover { background: var(--azul-borda); text-decoration: none; color: var(--cor-primaria); }


/* ============================================================
   15. FORMULÁRIOS
   ============================================================ */

.form-box {
  background: var(--cor-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  padding: 2.5rem 2.25rem;
  max-width: 500px;
  margin: 0 auto;
}
.form-box-titulo {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--cor-primaria);
  text-align: center;
  margin-bottom: .4rem;
}
.form-box-sub {
  font-size: .88rem;
  color: var(--cinza-500);
  text-align: center;
  margin-bottom: 2rem;
}
.form-grupo { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.form-label { font-size: .82rem; font-weight: 700; color: var(--cinza-700); letter-spacing: .02em; }
.form-label .req { color: var(--cor-erro); margin-left: 2px; }
.form-input {
  width: 100%;
  padding: .75rem .95rem;
  border: 1.5px solid var(--cinza-300);
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: .92rem;
  color: var(--cor-texto);
  background: #FAFBFC;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
  outline: none;
}
.form-input:focus {
  border-color: var(--cor-secundaria);
  background: var(--cor-card);
  box-shadow: 0 0 0 3px rgba(19,81,180,.12);
}
.form-input::placeholder { color: var(--cinza-300); }
.form-input-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 8L0 0h12z' fill='%236B7A8D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  padding-right: 2.5rem;
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-dica { font-size: .75rem; color: var(--cinza-500); }
.form-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1.5rem 0;
  font-size: .78rem;
  color: var(--cinza-500);
}
.form-sep::before, .form-sep::after { content: ''; flex: 1; height: 1px; background: var(--cinza-200); }
.form-rodape {
  text-align: center;
  margin-top: 1.5rem;
  font-size: .85rem;
  color: var(--cinza-500);
}
.form-rodape a { color: var(--azul-medio); font-weight: 600; }


/* ============================================================
   16. ALERTAS (mensagens de feedback)
   ============================================================ */

.alerta {
  padding: .85rem 1rem .85rem .95rem;
  border-radius: var(--raio);
  font-size: .88rem;
  margin-bottom: 1.25rem;
  border-left: 3.5px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.5;
}
.alerta-erro    { background: var(--cor-erro-bg);    border-color: var(--cor-erro);    color: #8B1C1C; }
.alerta-sucesso { background: var(--cor-sucesso-bg); border-color: var(--cor-sucesso); color: #14532D; }
.alerta-info    { background: var(--azul-bg);        border-color: var(--cor-secundaria); color: #1E3A6E; }
.alerta-aviso   { background: var(--cor-acento-bg);  border-color: var(--cor-acento);  color: #7A5800; }


/* ============================================================
   17. PERFIL DE USUÁRIO
   ============================================================ */

.perfil-wrap { max-width: 640px; margin: 0 auto; }
.perfil-card {
  background: var(--cor-card);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-md);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.perfil-topo {
  background-color: var(--cor-primaria); /* ← Cor sólida: sem degradê */
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.perfil-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2.5px solid rgba(255,255,255,.4);
  color: var(--cor-card);
  font-size: 1.65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--fonte);
}
.perfil-nome-area { }
.perfil-nome  { font-size: 1.2rem; font-weight: 800; color: var(--cor-card); margin-bottom: .15rem; }
.perfil-email { font-size: .82rem; color: rgba(255,255,255,.72); }
.perfil-corpo { padding: 1.5rem 2rem; }
.perfil-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem .85rem;
  border-radius: var(--raio);
  margin-bottom: .5rem;
  background: var(--cor-fundo);
}
.perfil-linha:last-child { margin-bottom: 0; }
.perfil-chave { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza-500); }
.perfil-valor { font-size: .9rem; color: var(--cor-texto); font-weight: 600; }
.perfil-acoes {
  padding: 1.25rem 2rem 1.75rem;
  border-top: 1px solid var(--cinza-200);
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}


/* ============================================================
   18. OUVIDORIA / PEDIDOS (campos condicionais)
   ============================================================ */

.ouvidoria-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }

.campos-assunto   { display: none; }
.campos-presencial { display: none; }
.campos-assunto.visivel,
.campos-presencial.visivel {
  display: block;
  animation: fadeIn .2s ease;
}

.secao-campos {
  background: var(--azul-bg);
  border: 1px solid var(--azul-borda);
  border-radius: var(--raio);
  padding: 1.25rem 1.25rem .5rem;
  margin-bottom: 1rem;
}
.secao-campos-titulo {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cor-primaria);
  margin-bottom: .85rem;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   19. WEBMAIL (placeholder)
   ============================================================ */

.webmail-hero {
  text-align: center;
  padding: 3rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}
.webmail-icone { font-size: 4.5rem; margin-bottom: 1.25rem; display: block; }
.webmail-titulo { font-size: 1.5rem; font-weight: 800; color: var(--cor-primaria); margin-bottom: .75rem; }
.webmail-desc { font-size: .95rem; color: var(--cinza-500); line-height: 1.7; margin-bottom: 1.75rem; }


/* ============================================================
   20. FOOTER
   
   Cor de fundo do footer: altere --cor-texto em :root
   (ou edite diretamente abaixo se quiser uma cor diferente do texto)
   ============================================================ */

.footer {
  background: var(--cor-texto);       /* ← Fundo do footer: altere --cor-texto em :root */
  color: rgba(255,255,255,.6);
  padding: 3rem 0 0;
  margin-top: 3rem;
  font-size: .85rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer h3 { color: var(--cor-card); font-size: .95rem; font-weight: 700; margin-bottom: .85rem; }
.footer h4 {
  color: rgba(255,255,255,.5);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.footer p { margin-bottom: .4rem; line-height: 1.6; }
.footer ul li { margin-bottom: .4rem; }
.footer ul li a { color: rgba(255,255,255,.55); }
.footer ul li a:hover { color: var(--cor-card); text-decoration: none; }
.footer-logo { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.footer-logo-brasao {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.footer-logo-nome { font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .04em; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-size: .75rem;
  color: rgba(255,255,255,.3);
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-linha { width: 40px; height: 2.5px; background: var(--cor-acento); border-radius: 2px; margin-bottom: .85rem; }


/* ============================================================
   21. RESPONSIVO (mobile)
   Não mexa aqui com frequência — são os ajustes de tela pequena
   ============================================================ */

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ouvidoria-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Navbar mobile */
  .navbar-toggle { display: flex; }
  .navbar-menu {
    display: none;
    position: fixed;
    top: var(--navbar-h);
    left: 0; right: 0;
    background: var(--cor-navbar);
    flex-direction: column;
    align-items: stretch;
    padding: .75rem;
    gap: .2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    max-height: calc(100vh - var(--navbar-h));
    overflow-y: auto;
  }
  .navbar-menu.aberto { display: flex; }
  .nav-link { font-size: .88rem; padding: .75rem 1rem; }
  .nav-link.ativo::after { display: none; }
  .navbar-sep { width: 100%; height: 1px; margin: .25rem 0; }
  .btn-entrar, .btn-sair-nav { display: block; text-align: center; padding: .75rem 1rem; font-size: .88rem; }
  .nav-usuario { padding: .5rem 1rem; }

  /* Footer mobile */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Formulários mobile */
  .form-box { padding: 1.75rem 1.25rem; }

  /* Perfil mobile */
  .perfil-topo { flex-direction: column; text-align: center; }
  .perfil-corpo { padding: 1.25rem; }
  .perfil-acoes { padding: 1rem 1.25rem 1.25rem; }

  /* Cards mobile */
  .card { padding: 1.25rem; }
}