/* =========================================================================
   PORTAL RH — ERA TÉCNICA
   Folha de estilos global do portal.

   Organização deste arquivo:
     1. Reset / base
     2. Tokens de design (cores, tipografia, espaçamento)
     3. Layout utilitário
     4. Top bar (navegação horizontal, desktop + mobile)
     5. Botões
     6. Página: Visão Geral (cards de área)
     7. Cabeçalho de página (título + trilha de navegação secundária)
     8. Página: Compliance (flipbook)
     9. Página: Saúde Preventiva (cards de campanha)
    10. Página: SESMT (equipe)
    11. Página: Equidade (princípios + banner de ouvidoria)
    12. Página: Comunicados (busca, tags, grid, modal)
    13. Página: Vagas internas (banner, filtros, lista, modal (rodapé,
        formulário de candidatura), card de contato)
    14. Telas de autenticação
    15. Página: Comunicar-se (formulário de feedback)
    16. Sistema de cards C3 (faixa de cor com significado)
    17. Painel inicial
    18. Página: Cargos da área (card de cargo)
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. RESET / BASE
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}


/* -------------------------------------------------------------------------
   2. TOKENS DE DESIGN
   Centraliza todas as cores/medidas usadas no portal. Ajustar aqui reflete
   em todas as páginas.
   ------------------------------------------------------------------------- */

:root {
  /* Cores de marca */
  --color-green-dark:   #1a3a1a;  /* verde institucional escuro — capa do livro, avatares, banner de ouvidoria */
  --color-green-mid:    #2d6a2d;  /* verde institucional médio — suporte, não usado como acento principal */

  /* Acento (substitui o lime da versão anterior do portal) */
  --color-accent:       #3d6b52;  /* verde acento sóbrio — links ativos, botões primários, ícones */
  --color-accent-dark:  #2f5943;  /* variação mais escura do acento, usada em textos pequenos sobre fundo claro */
  --color-accent-tint:  rgba(61, 107, 82, 0.09);  /* fundo suave para badges/ícones */

  /* Estado "urgente" (tags e alertas de Comunicados) */
  --color-urgent:       #a4432c;
  --color-urgent-tint:  rgba(164, 67, 44, 0.12);
  --color-urgent-bg:    #fdf6ee;
  --color-urgent-border:#e8c9a8;

  /* Estado "informativo" (categoria info do Comunicado). O model sempre
     teve três categorias — novo, info e urgente — mas o CSS só tinha duas
     cores, então "novo" e "informativo" eram idênticos na tela. Azul da
     mesma família de saturação do verde e do vermelho já existentes. */
  --color-info:      #2f5c7a;
  --color-info-tint: rgba(47, 92, 122, 0.10);

  /* Neutros */
  --color-bg-page:      #fbfaf7;  /* fundo de conteúdo das páginas internas */
  --color-bg-nav:       #ffffff;  /* fundo da top bar */
  --color-text-primary: #16241a;
  --color-text-secondary: rgba(20, 30, 20, 0.6);
  --color-text-muted:   rgba(20, 30, 20, 0.45);
  --color-border:       rgba(0, 0, 0, 0.08);
  --color-border-strong:rgba(0, 0, 0, 0.12);
  --color-card-bg:      #ffffff;

  /* Tipografia — pesos usados no CSS (500/600/700/800) que a IBM Plex Serif
     não tiver de verdade (só 800) o navegador arredonda pro peso real mais
     próximo (700) sozinho, sem precisar de negrito/itálico sintético. */
  --font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* Fonte mono — reservada pra "dado técnico", não pra texto corrido:
     datas, códigos/identificadores (matrícula, "OBR", "RH"), contadores.
     Mesma família (IBM Plex) da serifa do corpo, então par combina sem
     esforço. Ver .meta-mono mais abaixo — é o utilitário pronto pra usar
     nos componentes conforme cada fase do rebrand chega neles. */
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Espaçamento base (múltiplos de 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Raios — escala nova (rebrand de maturidade visual: construtora/
     engenharia grande, não app de consumo). Nada usa mais que 6px; nunca
     pill/oval, exceto elementos circulares intencionais (avatar, foto de
     perfil), que continuam em 50% direto na regra, sem token.
     --radius-card existe separado de --radius-tag só por legibilidade no
     seletor de cada card — o valor é o mesmo (2px). O MD original (seção 1)
     tinha cards em 4px junto com botão/input; a seção 7 (mais nova, padrão
     de listagem/densidade) revisou pra 2px, no mesmo nível das tags — os
     cards de área/campanha/comunicado seguem essa revisão. */
  --radius-tag: 2px;       /* tags, badges, indicador de status */
  --radius-card: 2px;      /* cards (mesmo valor de --radius-tag, ver acima) */
  --radius-control: 4px;   /* botões, inputs */
  --radius-container: 6px; /* modais, containers maiores */

  /* Sombra — só existe pra overlay real (modal, dropdown, tooltip).
     Card de conteúdo estático usa borda hairline (--color-border), nunca
     box-shadow. Token único pra não cada fase inventar um valor de sombra
     diferente quando chegar a vez de um componente com overlay de verdade. */
  --shadow-overlay: 0 12px 32px rgba(20, 30, 20, 0.18);

  /* Altura da top bar */
  --topbar-height: 60px;
}

/* Utilitário de "dado técnico" (rebrand de maturidade visual) — aplica nos
   componentes conforme cada fase chega neles: datas, códigos/matrícula,
   contadores, labels de metadado curto. Regra prática: se o texto é
   "o que é" (título, descrição) fica na fonte corrida (--font-family); se é
   "um dado" (data, código, contador) usa esta classe. */
.meta-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}


/* -------------------------------------------------------------------------
   3. LAYOUT UTILITÁRIO
   ------------------------------------------------------------------------- */

.page-content {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-7) 44px;
  padding-top: var(--space-8) !important;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* Banner de topo — compartilhado por todas as páginas menos Compliance
   (o flipbook ocupa o topo lá). Marcação em portal/partials/hero.html; a
   imagem é fixa e vem inline no template via {% static %}. */
.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-green-dark); /* cor de espera enquanto a foto carrega */
  background-size: cover;
  background-position: center;
}

.page-hero__card {
  max-width: 520px;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  /* Painel escuro translúcido garante contraste do texto sobre qualquer
     foto — mesma função do .area-card__scrim antes do rebrand. */
  background: rgba(15, 25, 15, 0.82);
}

.page-hero__eyebrow {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-3);
}

.page-hero__title {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

.page-hero__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

@media (max-width: 700px) {
  .page-hero {
    padding: var(--space-5);
    min-height: 240px;
  }
  .page-hero__title {
    font-size: 22px;
  }
}


/* -------------------------------------------------------------------------
   4. TOP BAR
   Navegação horizontal fixa no topo. Colapsa em menu hambúrguer abaixo de
   880px — ver .mobile-menu-toggle / .mobile-menu.
   ------------------------------------------------------------------------- */

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 var(--space-7);
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: var(--space-5);
}

.top-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  /* Item flex tem min-width:auto por padrão, ou seja, se recusa a encolher
     abaixo do próprio conteúdo. Sem isto a marca empurra os botões para
     fora da tela em vez de ceder espaço — era o que fazia "Portal RH"
     aparecer por cima do "Sair" no celular. */
  min-width: 0;
}

.top-nav__logo {
  height: 20px;
  width: auto;
  display: block;
}

.top-nav__divider {
  width: 1px;
  height: 22px;
  background: var(--color-border-strong);
}

.top-nav__product {
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
}

.top-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex: none;
}

.top-nav__link {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 19px;
  margin-bottom: -20px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease;
  white-space: nowrap;
}

.top-nav__link:hover {
  color: var(--color-text-primary);
}

.top-nav__link.is-active {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom-color: var(--color-accent);
}

.top-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Botão hambúrguer — some acima do breakpoint mobile */
.mobile-menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  border: none;
  background: rgba(20, 30, 20, .06);
  align-items: center;
  justify-content: center;
}

.mobile-menu-toggle svg {
  pointer-events: none;
}

/* Painel de navegação mobile — escondido por padrão, exibido via JS
   (classe .is-open) quando o usuário toca no hambúrguer. */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--color-bg-nav);
  border-bottom: 1px solid var(--color-border);
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-menu__link {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
}

.mobile-menu__link.is-active {
  color: var(--color-accent);
  font-weight: 700;
}

@media (max-width: 1140px) {
  .top-nav__links {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
}

/* Celular: a marca (logo largo + divisor + "Portal") somada a "Sair",
   "Comunicar-se" e o hambúrguer não cabe em 375px, e o excedente aparecia
   como texto sobreposto aos botões.

   O logo sozinho já identifica o portal, então o divisor e a palavra
   "Portal" saem de cena primeiro — é o que se perde com menos custo. Os
   botões ficam: "Sair" e "Comunicar-se" não estão no menu hambúrguer, e
   esconder qualquer um deles tiraria a ação do alcance. */
@media (max-width: 700px) {
  .top-nav {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  .top-nav__divider,
  .top-nav__product {
    display: none;
  }
  .top-nav__logo {
    height: 16px;
  }
  /* flex-shrink: 0 nos botões — eles têm largura de texto e não devem ser
     espremidos a ponto de quebrar a palavra em duas linhas. */
  .top-nav__actions .btn {
    flex-shrink: 0;
  }
}


/* -------------------------------------------------------------------------
   5. BOTÕES
   ------------------------------------------------------------------------- */

/* Botões — rebrand de maturidade visual (Fase 4). Primário: fundo sólido
   (cor de marca, não dourado — dourado nunca preenche botão, MD seção 6).
   Secundário: outline (borda + texto na cor de marca, fundo transparente),
   nunca preenchido. Radius 4px (--radius-control — mesma faixa de card
   ficou 2px depois da seção 7, mas botão continua na escala original da
   seção 1). Sem uppercase forçado no texto do botão (só em label/mono). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-control);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 14px;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border-strong);
}

/* Botão só-ícone (setas do flipbook, download de documento) — antes era
   círculo (.btn-icon-round); MD só abre exceção pra circular em elemento
   circular intencional (avatar/foto de perfil), não em botão utilitário,
   então virou quadrado com o radius padrão de controle. */
.btn-icon {
  width: 36px;
  height: 36px;
  flex: none; /* sem isso, encolhia dentro de um container flex apertado no mobile — bug preexistente, não do rebrand */
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}


/* -------------------------------------------------------------------------
   6. VISÃO GERAL — CARDS DE ÁREA
   Grid de 18 cards de área/departamento. Cada card tem imagem de fundo
   (placeholder listrado até termos as fotos reais), overlay escurecido e
   nome + descrição sobrepostos. No hover, a descrição sobe/aparece.
   ------------------------------------------------------------------------- */

.area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de área — rebrand de maturidade visual (Fase 2, radius corrigido na
   Fase 3 pela seção 7 do MD — ver comentário do --radius-card no :root).
   Antes: capa de app (foto de fundo com fade + nome sobreposto, revelado
   por hover). Agora: bloco de topo (ícone OU foto, nunca os dois) separado
   por hairline do corpo com nome/descrição/contagem — sempre visível, sem
   hover-reveal nem overlay de texto sobre imagem. Sem box-shadow (card de
   conteúdo estático, ver --shadow-overlay no :root). */
.area-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Mesma resposta dos .c3-card (borda + sombra). O card de área não carrega
   .c3-card — tem estrutura própria com foto — então precisa repetir o par
   aqui para a Visão Geral não ser a única grade que só muda a borda. */
.area-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(20, 30, 20, 0.10);
}

/* Variante sem foto: ícone outline monocromático, sem fundo/gradiente atrás */
.area-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.area-card__icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}

/* Variante com foto: bloco só da imagem, sem fade nem texto sobreposto —
   nome/descrição ficam no rodapé sólido (.area-card__body), fora da foto. */
.area-card__photo {
  height: 120px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--color-border);
}

.area-card__body {
  padding: var(--space-3);
}

/* Header interno mono uppercase, separado por hairline — no lugar de
   decoração tipo borda lateral colorida (seção 7 do MD). */
.area-card__eyebrow {
  font-size: 10px;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.area-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.area-card__desc-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Contagem de cargos — "dado técnico", não texto corrido (ver .meta-mono) */
.area-card__meta {
  font-size: 11px;
  color: var(--color-text-muted);
}


/* -------------------------------------------------------------------------
   7. CABEÇALHO DE PÁGINA
   Usado no topo do conteúdo das páginas internas (Compliance, SESMT
   etc.) — eyebrow + título + parágrafo de introdução.
   ------------------------------------------------------------------------- */

.page-header__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

.page-header__intro {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 820px;
  margin: 0 0 var(--space-8);
}


/* -------------------------------------------------------------------------
   8. COMPLIANCE — FLIPBOOK
   ------------------------------------------------------------------------- */

.book-page {
  padding: 44px var(--space-7) 40px;
  background: #eae7dd;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.book-page__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 820px;
  max-width: 100%;
  margin-bottom: var(--space-5);
}

/* Rebrand de maturidade visual (Fase 5): sombra grande trocada por hairline
   (conteúdo estático de página, não é overlay — ver --shadow-overlay no
   :root) e radius no token de container. */
.book {
  width: 820px;
  max-width: 100%;
  height: 520px;
  background: #fff;
  border-radius: var(--radius-container);
  border: 1px solid var(--color-border);
  position: relative;
  display: flex;
}

.book::before {
  /* vinco central da lombada */
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, .06);
  transform: translateX(-.5px);
}

.book > [data-book-slot] {
  display: flex;
  flex: 1;
  min-width: 0;
}

.book__cover {
  width: 100%;
  background: var(--color-green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.book__cover::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
}

.book__cover-logo {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  margin-bottom: 36px;
}

.book__cover-rule {
  width: 44px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 24px;
}

.book__cover-title {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .3px;
  text-align: center;
  line-height: 1.25;
  margin: 0;
}

.book__leaf {
  width: 50%;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
}

.book__chapter {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.book__heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  line-height: 1.3;
}

.book__body {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-text-secondary);
}

.book__body p {
  margin: 0 0 1em;
}

.book__body p:last-child {
  margin-bottom: 0;
}

.book__controls {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.book__page-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
  min-width: 70px;
  text-align: center;
}

.book__leaf--full {
  width: 100%;
}

.book__list {
  margin: 0 0 1em;
  padding-left: 18px;
}

.book__list li {
  margin-bottom: 6px;
}

.book__box {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  margin: 1em 0;
  font-size: 12.5px;
  line-height: 1.65;
}

.book__box .book__list {
  margin: 6px 0 0;
}

/* Antes: borda lateral colorida de 3px (accent stripe) — mesmo padrão do
   .book__alert logo abaixo (borda fina inteira + fundo tint), sem stripe. */
.book__highlight {
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
}

.book__alert {
  background: var(--color-urgent-bg);
  border: 1px solid var(--color-urgent-border);
}

.book__alert-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--color-urgent);
  margin-bottom: var(--space-2);
}

/* Sumário */
.book__toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.book__toc-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  font-family: inherit;
}

.book__toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-accent);
  min-width: 22px;
}

.book__toc-title {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-primary);
}

.book__toc-arrow {
  color: var(--color-text-muted);
}

/* Mobile: o spread de 2 folhas lado a lado (leitura de livro aberto) some
   contra a tela estreita — cada folha sobra com ~80px de coluna de texto.
   Empilha as folhas em vez de dividir a largura, e solta a altura fixa do
   .book (pensada pro spread de 2 colunas) pra acompanhar o conteúdo. */
@media (max-width: 700px) {
  .book-page {
    padding: 28px var(--space-5) 32px;
    min-height: 0;
  }

  .book {
    width: 100%;
    height: auto;
  }

  .book::before {
    display: none;
  }

  .book > [data-book-slot] {
    flex-direction: column;
  }

  .book__leaf {
    width: 100%;
    padding: 28px var(--space-5) 32px;
    overflow-y: visible;
  }

  /* .compliance-denuncia (compliance.html) reaplica o mesmo padding lateral
     do flipbook acima só nesta página — não mexe em .page-content, que é
     compartilhada por todas as outras páginas. */
  .compliance-denuncia {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}


/* -------------------------------------------------------------------------
   9. SAÚDE PREVENTIVA — CARDS DE CAMPANHA
   ------------------------------------------------------------------------- */

.campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .campaign-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .campaign-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de campanha — rebrand de maturidade visual (Fase 3). Antes: ícone
   com fundo em gradiente colorido (cor_gradiente) + badge pill flutuando
   ao lado. Agora: ícone outline monocromático + label_visual viram um
   único "eyebrow" mono uppercase, separado por hairline do título/desc —
   mesmo padrão do card de área. cor_gradiente fica sem uso visual aqui por
   enquanto (era só pra colorir o ícone, que não é mais colorido — ver MD
   item 3); o campo continua no model/admin, pode ganhar outro uso quando
   a paleta for revisada.

   Elevação (fundo/borda/raio/overflow) não mora mais aqui: markup sempre
   traz "campaign-card c3-card" juntas, e são .c3-card (seção 16) que
   manda nisso agora — duplicar aqui só criava duas fontes de verdade
   competindo por especificidade igual, resolvidas só por ordem no
   arquivo. */

.campaign-card__body {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
}

.campaign-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.campaign-card__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
  flex: 1;
}


/* -------------------------------------------------------------------------
   10. SESMT — EQUIPE
   ------------------------------------------------------------------------- */

.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.team-card__avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-green-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.team-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

.team-card__role {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.team-card__contact {
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 3px;
}

.team-card__contact svg {
  flex: none;
}

/* -------------------------------------------------------------------------
   11. EQUIDADE — PRINCÍPIOS + BANNER DE OUVIDORIA
   ------------------------------------------------------------------------- */

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
  .principles-grid {
    grid-template-columns: 1fr;
  }
}

/* Antes: borda lateral colorida (accent stripe) — decoração que o MD pede
   pra tirar (seção 7); virou hairline neutra no topo. */
.principle {
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-border);
}

.principle__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.principle__desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0;
}

.ombudsman-banner {
  background: var(--color-green-dark);
  border-radius: var(--radius-container);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.ombudsman-banner__left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.ombudsman-banner__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.ombudsman-banner__title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}

.ombudsman-banner__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .65);
  max-width: 480px;
  margin: 0;
}


/* -------------------------------------------------------------------------
   12. COMUNICADOS — BUSCA, TAGS, GRID, MODAL
   ------------------------------------------------------------------------- */

/* Barra de ferramentas e botão "carregar mais" — compartilhados pelas 4 páginas de listagem. */
.lista-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.lista-toolbar__select {
  font-family: var(--font-family);
  font-size: 12.5px;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  cursor: pointer;
}

.lista-toolbar__select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.lista-toolbar__count {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.lista-mais {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* Sem isto o [hidden] não funciona nestes elementos: o display declarado
   aqui vence o display:none do atributo (mesmo motivo de .vaga-row[hidden]). */
.btn[hidden],
.cargo-card[hidden],
.comunicados-grid[hidden],
.campaign-grid[hidden] {
  display: none;
}

.search-field {
  position: relative;
  width: 320px;
  max-width: 100%;
}

.search-field svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  stroke: var(--color-text-secondary);
}

.search-field__input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  font-size: 12.5px;
  font-family: var(--font-family);
  color: var(--color-text-primary);
  outline: none;
}

.search-field__input:focus {
  border-color: var(--color-accent);
}

/* Banner de destaque para o comunicado urgente mais recente.

   O comunicados.js mostra e esconde este bloco pelo atributo `hidden`:
   ele some quando não há nenhum card urgente na grade, e também
   enquanto houver busca ativa (senão o destaque contradiria a lista
   filtrada).

   A REGRA [hidden] ABAIXO É OBRIGATÓRIA, não decorativa. O atributo
   hidden funciona por uma regra `[hidden] { display: none }` da folha do
   NAVEGADOR, e qualquer regra da folha do autor ganha dela. Sem a linha
   explícita, o `display: flex` daqui vencia o hidden e o banner aparecia
   em toda visita — vazio, porque o JS só preenche o título quando decide
   mostrar. Foi o bug reportado em 06/10/2026. */
.featured-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-urgent);
  border-radius: var(--radius-control);
  padding: 18px 20px;
  margin-bottom: var(--space-6);
  box-shadow: 0 3px 12px rgba(164, 67, 44, .26);
  transition: box-shadow .15s ease, transform .15s ease;
}

.featured-alert[hidden] {
  display: none;
}

.featured-alert:hover {
  box-shadow: 0 6px 20px rgba(164, 67, 44, .34);
  transform: translateY(-1px);
}

/* O realce por transform incomoda quem tem sensibilidade a movimento, e
   a sombra sozinha já comunica o estado. */
@media (prefers-reduced-motion: reduce) {
  .featured-alert,
  .featured-alert__cta {
    transition: none;
  }
  .featured-alert:hover {
    transform: none;
  }
}

.featured-alert__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}

.featured-alert__icon svg {
  stroke: #fff;
}

.featured-alert__texto {
  flex: 1;
  min-width: 0;
}

.featured-alert__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .82);
  text-transform: uppercase;
  margin: 0 0 5px;
}

.featured-alert__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0;
}

/* Linha de metadados: data, autor e quantos outros urgentes existem.
   O JS preenche; fica vazia e sem ocupar espaço quando não há o que dizer. */
.featured-alert__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255, 255, 255, .72);
  margin: 4px 0 0;
}

.featured-alert__meta:empty {
  display: none;
}

.featured-alert__cta {
  background: #fff;
  border: none;
  border-radius: var(--radius-control);
  padding: 9px 15px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-urgent);
  white-space: nowrap;
  cursor: pointer;
  align-self: center;
  flex: none;
  transition: background .15s ease, box-shadow .15s ease;
}

.featured-alert__cta:hover {
  background: #fff6f2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Celular: o botão desce para baixo do texto e ocupa a largura toda —
   alvo grande para o dedo, que é como a maior parte das pessoas abre
   o portal. */
@media (max-width: 600px) {
  .featured-alert {
    flex-wrap: wrap;
    padding: 15px 16px;
    gap: var(--space-3);
  }
  .featured-alert__title {
    font-size: 14.5px;
  }
  .featured-alert__cta {
    width: 100%;
    padding: 11px;
    align-self: stretch;
  }
}

.comunicados-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 800px) {
  .comunicados-grid {
    grid-template-columns: 1fr;
  }
}

/* Card de comunicado — rebrand de maturidade visual (Fase 3). Antes: faixa
   lateral colorida (accent stripe) indicando urgência — decoração que o MD
   pede pra tirar (seção 7). Urgência agora só aparece na tag (dot + texto,
   ver .tag abaixo), sem elemento extra dedicado a isso no card.

   Elevação (fundo/borda/raio/overflow) não mora mais aqui: markup sempre
   traz "comunicado-card c3-card" juntas, e é .c3-card (seção 16) que
   manda nisso agora — duplicar aqui só criava duas fontes de verdade
   competindo por especificidade igual, resolvidas só por ordem no
   arquivo. */

.comunicado-card__body {
  padding: var(--space-3);
  min-width: 0;
}

.comunicado-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  gap: var(--space-2);
}

.comunicado-card__date {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Indicador de status/categoria — quadrado pequeno + texto, nunca badge
   preenchido/pill (MD seção 7). A cor do quadrado acompanha a da tag
   (currentColor): verde-acento pra categorias normais, vermelho pra
   urgente — mesmas cores de antes, só a FORMA mudou (não a paleta). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  flex: none;
}

.tag.is-urgent {
  color: var(--color-urgent);
}

.comunicado-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  line-height: 1.35;
}

.comunicado-card__summary {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}

.link-cta {
  background: none;
  border: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent);
  font-family: var(--font-family);
  /* Nunca full-width (MD seção 7) — sem isso, dentro de um flex-column
     (ex: .campaign-card__body) o <button> esticava pra ocupar a largura
     toda do card e centralizava o texto, virando um "botão grande". */
  align-self: flex-start;
}

.link-cta.is-urgent {
  color: var(--color-urgent);
}

/* Estados vazios (sem comunicados publicados / sem resultado de busca) */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  text-align: center;
}

.empty-state[hidden] {
  display: none;
}

.empty-state__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-control);
  background: rgba(20, 30, 20, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.empty-state__icon svg {
  stroke: rgba(20, 30, 20, .35);
}

.empty-state__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.empty-state__desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  max-width: 320px;
  margin: 0;
}

/* Modal de leitura do comunicado */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 15, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.modal-overlay[hidden] {
  display: none;
}

/* Overlay real (dialog) — é a exceção que mantém sombra (ver --shadow-overlay
   no :root); token único em vez de valor ad-hoc, pra não cada componente com
   overlay inventar uma sombra diferente. */
.modal {
  background: #fff;
  border-radius: var(--radius-container);
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-overlay);
}

.modal__header {
  padding: var(--space-7) 32px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  position: sticky;
  top: 0;
  background: #fff;
  /* Sem z-index, quem decide quem fica por cima ao rolar é só a ordem no
     DOM — e .modal__image vem depois daqui, então cobria o header fixo
     conforme a rolagem passava por ela (mesmo o header sendo sticky). */
  z-index: 1;
}

.modal__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.modal__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
}

.modal__body {
  padding: var(--space-7) 32px 36px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* 'conteudo' agora chega como HTML de verdade (parágrafos/negrito/itálico/link) vindo
   do editor rico do admin — sem white-space:pre-line, já que os parágrafos e quebras
   são tags reais (<p>/<br>), não espaço em branco pra preservar. */
.modal__body p {
  margin: 0 0 1em;
}

.modal__body p:last-child {
  margin-bottom: 0;
}

.modal__body a {
  color: var(--color-accent);
  text-decoration: underline;
}

.modal__body ul {
  margin: 0 0 1em;
  padding-left: 20px;
}

.modal__body ul:last-child {
  margin-bottom: 0;
}

.modal__body li {
  margin-bottom: 6px;
}

.modal__image {
  margin: 0 32px 32px;
  border-radius: var(--radius-control);
  overflow: hidden;
  position: relative;
  /* aspect-ratio é definido via JS na proporção real da imagem (retrato, paisagem ou banner) —
     se a imagem for muito alta, o próprio .modal (overflow-y: auto) assume a rolagem. */
  background: linear-gradient(100deg, #ececec 30%, #f6f6f6 50%, #ececec 70%);
  background-size: 200% 100%;
  animation: modal-image-shimmer 1.3s ease-in-out infinite;
}

.modal__image.is-loaded {
  animation: none;
  background: none;
}

.modal__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s ease;
}

.modal__image.is-loaded img {
  opacity: 1;
}

@keyframes modal-image-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* -------------------------------------------------------------------------
   13. VAGAS INTERNAS — BANNER, FILTROS, LISTA, MODAL, CARD DE CONTATO
   ------------------------------------------------------------------------- */

/* NOTA: o banner (.page-hero) é compartilhado por quase todas as páginas —
   o CSS dele mora na seção 3 (LAYOUT UTILITÁRIO), não aqui. */

/* Lista de vagas — densa, no padrão de listagem do rebrand (seção 7 do MD):
   linha compacta separada por hairline, metadado em coluna, sem botão de
   ação por linha (a linha inteira é o alvo do clique). */
.vaga-list {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.vaga-row {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr 0.8fr 16px;
  gap: var(--space-4);
  align-items: center;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  transition: background .12s ease;
}

/* Sem isso o [hidden] do filtro não funciona: display:grid vence o
   display:none padrão do atributo hidden. */
.vaga-row[hidden] {
  display: none;
}

.vaga-row:last-child {
  border-bottom: none;
}

.vaga-row:hover {
  background: rgba(20, 30, 20, .025);
}

.vaga-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.vaga-row__main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vaga-row__codigo {
  font-size: 10.5px;
  color: var(--color-accent-dark);
}

.vaga-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.35;
}

.vaga-row__col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.vaga-row__col-label {
  font-size: 9.5px;
  color: var(--color-text-muted);
}

.vaga-row__col-value {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.vaga-row__chevron {
  font-size: 14px;
  color: var(--color-text-muted);
  text-align: right;
}

.vaga-row:hover .vaga-row__chevron {
  color: var(--color-accent);
}

/* Linha de metadados no cabeçalho do modal (área · local · nível · contratação) */
.vaga-row__meta-line {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

@media (max-width: 860px) {
  /* Vira bloco empilhado: as colunas viram "label: valor" em linha, senão
     ficam espremidas demais e o título quebra letra a letra. */
  .vaga-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .vaga-row__col {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }
  .vaga-row__chevron {
    display: none;
  }
}

/* Rodapé do modal de vaga — sticky pelo mesmo mecanismo do .modal__header
   (o .modal é quem rola). É o que mantém o botão de candidatura à vista
   numa vaga longa, sem obrigar a rolar sobre+responsabilidades+requisitos. */
.modal__footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  padding: 16px 32px;
  background: #fff;
  border-top: 1px solid var(--color-border);
}

.modal__footer-aviso {
  margin-right: auto;
  font-size: 12.5px;
  color: var(--color-text-secondary);
}

.candidatura-form {
  padding: var(--space-7) 32px 8px;
}

.candidatura-form input,
.candidatura-form select,
.candidatura-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  box-sizing: border-box;
}

.candidatura-form textarea {
  resize: vertical;
  min-height: 90px;
}

.candidatura-form input:focus,
.candidatura-form select:focus,
.candidatura-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Cidade e UF dividem a linha: UF é um select de duas letras e ocupar a
   largura inteira seria desperdício, ainda mais no celular. */
.candidatura-form__dupla {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: var(--space-4);
}

@media (max-width: 700px) {
  /* O modal vira folha de tela cheia. Sem isto, num aparelho de 375px o
     overlay come 40px de cada lado e o modal mais 32px internos de cada
     lado — sobram ~231px de conteúdo, apertado demais para um formulário. */
  .modal-overlay {
    padding: 0;
  }

  .modal {
    max-width: none;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  .modal__header,
  .modal__body,
  .modal__footer,
  .candidatura-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* No formulário o rodapé deixa de ser fixo. O teclado virtual encolhe a
     viewport: uma barra fixa disputa altura já escassa e, no iOS, pode
     ficar por baixo do teclado. Com o botão depois do último campo, ele
     cai onde o dedo já está. Na leitura não há teclado e o fixo fica. */
  .modal.is-formulario .modal__footer {
    position: static;
  }

  /* 16px não é escolha estética: abaixo disso o Safari do iOS aplica zoom
     automático ao focar o campo e desmonta o layout da página. */
  .candidatura-form input,
  .candidatura-form select,
  .candidatura-form textarea {
    font-size: 16px;
  }
}

/* Seções do modal (Sobre a vaga / Responsabilidades / Requisitos / Contato) */
.modal__section {
  margin-bottom: var(--space-6);
}

.modal__section:last-child {
  margin-bottom: 0;
}

.modal__section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.contact-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

.contact-card__name {
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.contact-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 4px;
}

.contact-card__row:last-child {
  margin-bottom: 0;
}

.contact-card__row svg {
  width: 15px;
  height: 15px;
  stroke: var(--color-text-muted);
  flex: none;
}

.contact-card__row a {
  color: var(--color-accent);
  text-decoration: underline;
}


/* -------------------------------------------------------------------------
   14. TELAS DE AUTENTICAÇÃO
   ------------------------------------------------------------------------- */

.auth-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-5);
  background: var(--color-bg-page);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-8);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.auth-card__logo {
  height: 26px;
  width: auto;
  margin-bottom: var(--space-6);
}

.auth-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6);
}

.auth-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.auth-form input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: var(--space-4);
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  outline: none;
  box-sizing: border-box;
}

.auth-form input:focus {
  border-color: var(--color-accent);
}

.auth-form__submit {
  width: 100%;
  justify-content: center;
  padding: 10px;
}

.auth-form__erro {
  padding: 10px 12px;
  margin-bottom: var(--space-4);
  font-size: 12.5px;
  color: var(--color-urgent);
  background: var(--color-urgent-bg);
  border: 1px solid var(--color-urgent-border);
  border-radius: var(--radius-control);
}

.auth-form__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 12.5px;
}

.auth-form__links a {
  color: var(--color-accent);
  text-decoration: none;
}

.auth-form__links a:hover {
  text-decoration: underline;
}

.top-nav__logout {
  display: inline-flex;
  margin: 0;
}

.auth-form__ajuda {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5);
}

.auth-form__dica {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
}

/* -------------------------------------------------------------------------
   15. COMUNICAR-SE — FORMULÁRIO DE FEEDBACK
   ------------------------------------------------------------------------- */

.contact-panel {
  max-width: 640px;
  padding: 24px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* Comunicar-se: intro e painel formam uma coluna única centralizada abaixo
   do hero. Antes a página não tinha hero e o formulário ficava encostado no
   canto superior esquerdo, com o resto da tela vazio — era a única página do
   portal fora do padrão. Escopo em .comunicar-se de propósito: .contact-panel
   e .page-header__intro são compartilhadas com outras páginas. */
.comunicar-se .page-header__intro,
.comunicar-se .contact-panel {
  margin-left: auto;
  margin-right: auto;
}

.comunicar-se .page-header__intro {
  max-width: 640px;
}

.contact-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 16px 0 6px;
}

.contact-form__label:first-child {
  margin-top: 0;
}

.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-primary);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  box-sizing: border-box;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.contact-form .btn {
  margin-top: 16px;
}

.contact-panel__sucesso {
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--color-accent-dark);
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
}

.contact-panel__erro {
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--color-urgent);
  background: var(--color-urgent-bg);
  border: 1px solid var(--color-urgent-border);
  border-radius: 6px;
}

.contact-panel__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0 0 16px;
}

.contact-panel__canal {
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  background: var(--color-accent-tint);
  border-radius: 6px;
}

.contact-panel__nota {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   16. SISTEMA DE CARDS C3 — FAIXA DE COR COM SIGNIFICADO

   O problema que isto resolve: o card tinha os três sinais de separação no
   mínimo ao mesmo tempo — fundo #ffffff sobre #fbfaf7 (1,5% de diferença),
   borda a 8% de preto, e nenhuma sombra. Ficava invisível sobre a página.

   A faixa carrega informação diferente conforme o conteúdo: categoria no
   comunicado, código+área na vaga, rótulo na campanha. Um componente
   visual, três significados — sem variação de componente.

   ATENÇÃO: o chip inline de status (.tag, quadrado + texto) NÃO muda. A
   diretriz "nunca badge preenchido/pill" continua valendo para ele; a
   faixa é outro elemento (cabeçalho de card, não chip). Ver "Riscos" no
   spec — a decisão foi tomada com o conflito explícito na mesa.
   ------------------------------------------------------------------------- */

/* Elevação: o card passa a existir sobre a página. Duas camadas de sombra
   (uma curta e firme, uma longa e difusa) leem como profundidade real; uma
   sombra só fica com aparência de borda borrada. */
.c3-card {
  background: var(--color-card-bg);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px rgba(20, 30, 20, 0.05);
  overflow: hidden;
}

/* Faixa no topo — variante cheia */
.c3-band {
  background: var(--color-accent);
  color: #fff;
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.c3-band--urgente { background: var(--color-urgent); }
.c3-band--info    { background: var(--color-info); }

/* Neutra — categoria "Informativo" de PublicacaoSesmt. Não é token de cor
   novo: deriva dos neutros que já existem, só com opacidade alta o
   suficiente pra funcionar como fundo sólido com texto branco em cima. */
.c3-band--neutro { background: rgba(20, 30, 20, 0.62); }

/* Etiqueta dentro da faixa (autor, data, área) — vidro sobre a cor, pra
   não precisar de uma cor sólida por variante. */
.c3-band__meta {
  background: rgba(255, 255, 255, 0.22);
  padding: 1px 6px;
  border-radius: 20px;
  font-size: 9px;
  white-space: nowrap;
}

/* O SVG do Lucide vem com width/height="24" embutidos. Sem isto o ícone
   (ex.: faixa da campanha, ver saude_preventiva.html) renderiza no
   tamanho nativo e estica a faixa inteira. */
.c3-band__meta svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  display: block;
}

/* Variante compacta — a faixa vira barra lateral.

   Existem DOIS mecanismos aqui, e a diferença não é capricho:

   .c3-edge usa border-left e não altera o display do elemento. É o que
   serve a .vaga-row, que é `display: grid` com 5 colunas fixas — meter um
   elemento filho ali viraria uma 6ª coluna e desalinharia a lista inteira.

   .c3-bar é um elemento filho de verdade, necessário onde a barra precisa
   de gradiente (campanha): border-left não aceita gradiente de forma
   limpa. Só usar em marcação nova, onde controlamos o contêiner. */
.c3-edge {
  border-left: 5px solid var(--color-accent);
}

.c3-bar {
  width: 5px;
  background: var(--color-accent);
  flex: none;
  align-self: stretch;
}

/* -------------------------------------------------------------------------
   17. PAINEL INICIAL

   Layout de coluna principal + lateral. Comunicados e Segurança do
   Trabalho dominam a esquerda com cards cheios, agrupados por TIPO de
   card, não por assunto; vagas e campanhas ficam à direita em formato de
   lista compacta — mesmo raciocínio. Abaixo de 900px as duas colunas
   empilham, mantendo a ordem de prioridade.

   A quantidade de itens NÃO muda entre desktop e celular — quem decide é
   a view, não o CSS. Esconder card por media query desperdiça consulta ao
   banco e faz o servidor mandar o que a pessoa não vê.

   Cada bloco (.painel-bloco) é um contêiner com fundo/borda próprios — o
   título mora dentro, separado do conteúdo por uma linha. Sem isso, com
   apenas 12px entre o título e seus cards e 24px entre blocos, o título
   lia como jogado em cima dos cards (a distância entre blocos era só o
   dobro da distância dentro do bloco, pouco pro olho fechar o grupo).
   ------------------------------------------------------------------------- */

.painel-saudacao {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 24px 26px;
  margin-bottom: var(--space-7);
  border-radius: var(--radius-container);
  background: linear-gradient(135deg, var(--color-green-dark) 0%, #24512a 55%, var(--color-green-mid) 100%);
}

/* Formas decorativas em CSS puro — nenhuma imagem carregada. */
.painel-saudacao::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -70px;
  top: -110px;
  border: 1.5px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.painel-saudacao::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: 30px;
  bottom: -90px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  pointer-events: none;
}

.painel-saudacao__arco {
  position: absolute;
  right: 44px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  pointer-events: none;
}

.painel-saudacao__avatar {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  color: var(--color-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: none;
}

.painel-saudacao__conteudo {
  position: relative;
  z-index: 1;
}

.painel-saudacao__titulo {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
}

.painel-saudacao__data {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.painel {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

/* Sem comunicado nem publicação de SESMT ativos, .painel__principal nem
   chega a renderizar (o {% if %} envolve a div inteira em home.html) —
   sobra só a lateral, que não pode ficar espremida na primeira faixa do
   grid como se a coluna morta ainda existisse. */
.painel > :only-child {
  grid-column: 1 / -1;
}

.painel-bloco {
  background: rgba(20, 30, 20, 0.028);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}

.painel-bloco:last-child {
  margin-bottom: 0;
}

.painel-bloco__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.painel-bloco__titulo {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0;
}

.painel-bloco__link {
  font-size: 11.5px;
  color: var(--color-accent-dark);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.painel-bloco__link:hover {
  text-decoration: underline;
}

.painel-lista {
  display: grid;
  gap: var(--space-4);
}

/* Cards do painel reagem ao mouse — os cards de área já faziam isso, o
   painel tinha ficado de fora. .painel-mini também carrega .c3-card (ver
   home.html), então esta regra cobre os dois formatos de uma vez. */
.c3-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Sem escopo de página de propósito: .c3-card é a mesma classe usada no
   painel inicial, em Comunicados, em SESMT, na Saúde Preventiva e nos cards
   de cargo. A regra nasceu presa em `.painel .c3-card` e por isso só o painel
   respondia ao mouse — as outras páginas usavam o mesmo componente e ficavam
   inertes. Linha de Vaga e card de membro do SESMT ficam de fora por serem
   outros componentes: linha de lista densa reage com fundo (ver
   .vaga-row:hover), e o card de membro não é clicável. */
.c3-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(20, 30, 20, 0.10);
}

.painel-card__body {
  padding: var(--space-4);
}

.painel-card__titulo {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0 0 5px;
}

.painel-card__resumo {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Variante compacta da lateral */
.painel-mini {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
}

.painel-mini__body {
  display: block;
  padding: 12px 14px;
  min-width: 0;
}

.painel-mini__eyebrow {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 3px;
}

.painel-mini__titulo {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: 3px;
}

.painel-mini__meta {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .painel {
    grid-template-columns: 1fr;
  }

  .painel-saudacao {
    padding: 18px;
    gap: 12px;
  }

  .painel-saudacao__avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .painel-saudacao__titulo {
    font-size: 19px;
  }
}

/* -------------------------------------------------------------------------
   18. CARGOS DA ÁREA — CARD DE CARGO

   Usa .c3-card pra elevação (sombra + borda — mesma fonte de verdade do
   sistema C3, seção 16), mas SEM faixa de cor: Cargo não tem categoria nem
   cor no banco, diferente de Comunicado/Campanha/Vaga. Uma faixa aqui
   seria decoração sem significado, contrariando a regra "cor carrega
   informação" que rege o resto do C3. Antes, este card reaproveitava
   .campaign-card com estilo inline por cima pra anular a cor/borda da
   campanha — o que também anulava qualquer sombra que a classe original
   ganhasse depois. Classe própria evita essa fragilidade.
   ------------------------------------------------------------------------- */
.cargo-card {
  display: block;
  width: 100%;
  padding: var(--space-4);
  text-align: left;
  font-family: var(--font-family);
  cursor: pointer;
  /* box-shadow entra aqui porque esta regra vem DEPOIS de .c3-card na
     cascata: declarar só border-color anularia a transição da sombra que o
     .c3-card:hover aplica (o card de cargo carrega as duas classes). */
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cargo-card:hover {
  border-color: var(--color-accent);
}

.cargo-card__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 6px;
  line-height: 1.3;
}

.cargo-card__desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 12px;
}