/* Portal externo do SIGEAP — identidade de SITE institucional, não de painel
   administrativo (processos e CSS totalmente separados do admin, ADR-007).
   Linguagem: landing page — faixas cheias, hero, tipografia grande. */

:root {
  /* Paleta institucional Senac/AP — extraída visualmente da logo oficial
     (Senac / Fecomércio / Sesc — Administração Regional no Amapá). Ajustar
     pros códigos exatos do manual de marca quando disponíveis; por ora são
     as melhores aproximações a partir da arte fornecida. */
  --azul-900: #123a68;
  --azul-700: #1b4f8c;
  --azul-500: #2f74b8;
  --azul-300: #6fa3d8;
  --azul-100: #eaf3fb;
  --azul-borda: #cfe3f5;
  --laranja-marca: #f47920;
  --laranja-marca-claro: #f8c9a0;
  --texto: #142433;
  --texto-suave: #526074;
  --fundo: #ffffff;
  --fundo-alt: #f4f8fc;
  --borda: #e2e9f1;
  --verde: #1e8e5a;
  --verde-bg: #e3f4ec;
  --vermelho: #c0392b;
  --vermelho-bg: #fdeae7;
  --laranja: #b7791f;
  --laranja-bg: #fdf1dc;
  --sombra-sm: 0 2px 8px rgba(10, 50, 82, .06);
  --sombra: 0 12px 32px rgba(10, 50, 82, .12);
  --raio: 16px;
  --raio-peq: 10px;
  --gradiente-hero: linear-gradient(135deg, var(--azul-900) 0%, var(--azul-700) 60%, var(--azul-500) 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; height: 100%; }

/* Rodapé grudado no fim da página (nunca sobra vão em branco embaixo dele em
   conteúdo curto/zoom baixo): body vira coluna com altura mínima da tela, e
   o rodapé (sempre o último item) é empurrado pra base com margin-top:auto —
   sem precisar de position:fixed, que sobreporia conteúdo ao rolar. */
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  margin: 0;
  line-height: 1.55;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; color: var(--azul-900); margin: 0; }
p { margin: 0; }
a { color: var(--azul-700); }

/* ---- Banner "Acessar como" (admin visualizando como um usuário) ---- */
.banner-impersonacao {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--laranja-marca);
  color: #fff;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.banner-impersonacao-sair {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.banner-impersonacao-sair:hover { background: rgba(255, 255, 255, .3); }

/* ---- Cabeçalho fixo ---- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
  padding: 1.1rem 1.5rem;
}
/* Mesmo respiro do resto do site — largura máxima de 1080px centralizada,
   igual a .container/.rodape-container — em vez de ir de ponta a ponta da
   tela em monitores largos. */
.topo-container {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2.25rem;
  flex-wrap: wrap;
}
.topo-marca { display: flex; align-items: center; text-decoration: none; }
.topo-logo { height: 55px; width: auto; display: block; } /* +20% (era 46px) — 2026-10-09 */
/* Nav principal fica colada na logo (à esquerda, com respiro — gap maior que
   entre os próprios itens do menu); .topo-conta (identidade + ações de
   sessão) é o único grupo empurrado pra direita. */
.topo-nav { display: flex; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
.topo-conta { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topo-nav a:not(.btn), .topo-conta a:not(.btn) { color: var(--texto-suave); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.topo-nav a:not(.btn):hover, .topo-conta a:not(.btn):hover { color: var(--azul-700); }
.topo-nav a.ativo { color: var(--azul-900); }

/* ---- Faixas de largura total ---- */
.faixa { padding: 4rem 1.5rem; }
.faixa-alt { background: var(--fundo-alt); }
.faixa-estreita { padding: 3rem 1.5rem; }

.hero {
  background: var(--gradiente-hero);
  color: #fff;
  /* Banner compacto de propósito (pedido explícito) — uma faixa de
     apresentação, não uma seção que ocupa a primeira dobra inteira. */
  padding: 2.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -60%;
  width: 40%;
  height: 220%;
  background: radial-gradient(circle, rgba(244, 121, 32, .22) 0%, transparent 70%);
}
/* Mesmo respiro do resto do site — largura máxima 1080px centralizada
   (como .container), não só um max-width solto grudado na borda esquerda
   do padding do .hero. Em tela larga, o texto do banner tem que começar na
   mesma posição horizontal do cabeçalho e das seções abaixo. */
.hero-conteudo { max-width: 1080px; margin: 0 auto; position: relative; }
.hero h1 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; }
.hero p.hero-sub { color: rgba(255, 255, 255, .85); font-size: 0.98rem; margin-top: 0.6rem; max-width: 560px; }
.hero-acoes { margin-top: 1.25rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.hero-acoes .btn-secundario { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero-acoes .btn-secundario:hover { background: rgba(255, 255, 255, .2); }

/* Pastilha "Já é cadastrado? Entrar" — usada na faixa de fechamento (fundo
   claro). No banner principal, "Entrar" virou um botão igual aos outros
   dois (mesmo tamanho e estilo, pedido explícito de 2026-09-16). */
.cta-login {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.88rem; color: var(--texto-suave);
  background: var(--azul-100); border: 1px solid var(--azul-borda);
  border-radius: 999px; padding: 0.5rem 1.1rem;
}
.cta-login a { color: var(--azul-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cta-login a:hover { color: var(--azul-900); }

/* ---- Layout ---- */
.container { max-width: 1080px; margin: 0 auto; }
.container-estreito { max-width: 480px; }
.secao-cabecalho { max-width: 620px; margin: 0 auto 2.5rem; text-align: center; }
.secao-cabecalho h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.secao-cabecalho p { color: var(--texto-suave); margin-top: 0.6rem; font-size: 1.02rem; }

.centralizado { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--fundo-alt); }

/* ---- Passos numerados (Como funciona) ---- */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; max-width: 1080px; margin: 0 auto; }
.passo { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: 1.75rem 1.5rem; box-shadow: var(--sombra-sm); }
.passo-numero {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--gradiente-hero); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 1rem;
}
.passo-titulo { font-weight: 700; color: var(--azul-900); margin-bottom: 0.4rem; }
.passo-texto { color: var(--texto-suave); font-size: 0.92rem; }

/* ---- Cartão genérico (formulários) ---- */
.cartao {
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2.25rem;
  box-shadow: var(--sombra-sm);
}
.cartao + .cartao { margin-top: 1.5rem; }

/* ---- Acompanhamento — ilustração em cima (4 etapas precisam de espaço
   horizontal), texto embaixo, tudo centralizado ---- */
.acompanhamento-cartao { text-align: center; padding: 2.5rem 2rem; }
.acompanhamento-ilustracao { max-width: 640px; margin: 0 auto; }
.acompanhamento-texto { max-width: 560px; margin: 1.5rem auto 0; text-align: left; }

/* ---- Split de autenticação (login/cadastro) ---- */
/* Mesmo espírito do resto do site (conteúdo centralizado, sem esticar até a
   ponta em monitor largo) — mas aqui o "container" é mais largo (1600px, não
   1080px) porque as 2 colunas são um painel imersivo de marca, não texto de
   leitura. Fora dessa largura, mostra o fundo normal da página dos dois lados. */
.split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split-marca {
  background: var(--gradiente-hero);
  color: #fff;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 880px) { .split-marca { display: none; } }
.split-marca::after {
  content: "";
  position: absolute; left: -20%; bottom: -30%;
  width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
}
.split-marca-topo { position: relative; }
.split-logo { height: 36px; width: auto; display: block; }
.split-marca-legenda { margin-top: 0.6rem; font-size: 0.78rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.split-marca h1 { color: #fff; font-size: 2rem; margin-top: auto; position: relative; }
.split-marca p { color: rgba(255,255,255,.82); margin-top: 0.9rem; max-width: 380px; position: relative; }
.split-lista { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.8rem; position: relative; }
.split-lista-item { display: flex; gap: 0.7rem; align-items: flex-start; color: rgba(255,255,255,.9); font-size: 0.92rem; }
.split-lista-marca { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; }
.split-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  background: var(--fundo-alt);
}
.split-form-inner { width: 100%; max-width: 400px; }

/* ---- Formulário ---- */
.campo-grupo { margin-bottom: 1.1rem; }
.campo-grupo label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}
.campo {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-peq);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--texto);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.campo:focus { outline: none; border-color: var(--azul-500); box-shadow: 0 0 0 4px var(--azul-100); }
.campo-dica { font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.35rem; }
.campo-invalido { border-color: var(--vermelho) !important; }
.hint-erro { color: var(--vermelho); }
.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .linha-2 { grid-template-columns: 1fr; } }

/* 3 colunas — só cabe confortavelmente em modal largo (.modal-caixa, 880px);
   usado nos campos mais compactos da ficha de Pessoa Física pra encurtar a
   rolagem (pedido explícito, 2026-09-05). Colapsa em 2 e depois 1 coluna
   pra não espremer em telas menores. */
.linha-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 720px) { .linha-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .linha-3 { grid-template-columns: 1fr; } }

.secao-titulo {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--azul-700);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--borda);
}
.secao-titulo:first-child { margin-top: 0; }

/* ---- Ficha de candidato (Nova inscrição / Editar) — visual mais compacto,
   no padrão do painel admin (2026-09-21, pedido explícito): campos menores,
   rótulos mais discretos e barra de progresso fixa no topo. Escopado em
   .form-candidato pra não mexer no login/cadastro, que usam os mesmos
   .campo/.campo-grupo com tamanho maior. O mesmo visual compacto vale pros
   formulários de empresa (.form-compacto, 2026-09-21). ---- */
.form-candidato .campo, .form-compacto .campo {
  padding: 0.42rem 0.6rem; font-size: 0.88rem; border-width: 1px;
}
.form-candidato .campo:focus, .form-compacto .campo:focus { box-shadow: 0 0 0 3px var(--azul-100); }
.form-candidato .campo-grupo, .form-compacto .campo-grupo { margin-bottom: 0.75rem; }
.form-candidato .campo-grupo label, .form-compacto .campo-grupo label {
  font-size: 0.78rem; font-weight: 600; color: var(--texto); margin-bottom: 0.22rem;
}
.form-candidato .linha-2, .form-candidato .linha-3, .form-compacto .linha-2, .form-compacto .linha-3 { gap: 0 0.9rem; }
.form-candidato .secao-titulo { margin: 1.3rem 0 0.7rem; padding-bottom: 0.35rem; }
/* Cabeçalho fixo do formulário no modal: título + barra de progresso. Cola rente
   ao topo do quadro (que não tem padding no topo, ver .modal-caixa). A margem
   negativa em cima compensa o espaçamento do .modal-conteudo, então em repouso
   o título fica onde sempre ficou. */
.form-cabecalho-fixo {
  position: sticky; top: 0; z-index: 5; background: #fff;
  margin: -1.1rem -2rem 0.9rem; padding: 0.9rem 3.4rem 0.6rem 2rem;
  border-bottom: 1px solid var(--borda);
}
.form-cabecalho-fixo .secao-titulo { margin: 0 0 0.55rem; padding-bottom: 0; border-bottom: 0; }
.form-progresso { display: flex; align-items: center; gap: 0.7rem; }
.form-progresso-barra { flex: 1; height: 8px; border-radius: 4px; background: var(--borda); overflow: hidden; }
.form-progresso-fill { height: 100%; background: var(--azul-500); border-radius: 4px; transition: width 0.25s ease; }
.form-progresso-texto { font-size: 0.75rem; color: var(--texto-suave); white-space: nowrap; min-width: 6.4rem; text-align: right; }

/* ---- Política de Privacidade (modal do aceite LGPD) ---- */
.link-politica { color: var(--azul-700); text-decoration: underline; font-weight: 600; cursor: pointer; }
.link-politica:hover { color: var(--azul-500); }
.politica-titulo { font-size: 1.15rem; margin: 0 2rem 1rem 0; color: var(--azul-900); }
.politica-texto h4 { margin: 1.2rem 0 0.35rem; font-size: 0.95rem; font-weight: 700; color: var(--azul-700); }
.politica-texto h5 { margin: 1rem 0 0.3rem; font-size: 0.88rem; font-weight: 700; color: var(--texto); }
.politica-texto h4:first-child { margin-top: 0; }
.politica-texto p { margin: 0 0 0.75rem; line-height: 1.6; white-space: pre-line; font-size: 0.9rem; color: var(--texto); }

/* ---- Seletor de arquivo (uploads de documento) — no lugar do botão nativo
   do navegador, que destoava do resto do formulário ---- */
.arquivo-caixa {
  position: relative; display: flex; align-items: center; gap: 0.55rem;
  flex: 1 1 260px; min-width: 0; box-sizing: border-box;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  background: #fff; border: 1px dashed #b7c7d8; border-radius: var(--raio-peq);
  font-size: 0.85rem; color: var(--texto-suave);
  transition: border-color .15s, background .15s;
}
.arquivo-caixa:hover { border-color: var(--azul-500); }
.arquivo-caixa:focus-within { border-color: var(--azul-500); box-shadow: 0 0 0 3px var(--azul-100); }
.arquivo-caixa.arquivo-arrastando { border-color: var(--azul-500); background: var(--azul-100); }
.arquivo-caixa.arquivo-preenchido { border-style: solid; border-color: #8cc9a5; background: #f4fbf7; color: var(--texto); }
.arquivo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arquivo-icone { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arquivo-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.arquivo-btn {
  flex: none; padding: 0.3rem 0.9rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--azul-borda); background: #fff; color: var(--azul-700);
  font: inherit; font-size: 0.8rem; font-weight: 700; transition: background .12s;
}
.arquivo-btn:hover { background: var(--azul-100); }
/* Entrega física: a mesma caixa tracejada dos uploads, informativa (sem botão,
   sem reação ao passar o mouse); altura mínima pra alinhar com as caixas que
   têm o botão "Escolher arquivo". */
.arquivo-caixa.arquivo-fisico { min-height: 2.6rem; }
.arquivo-caixa.arquivo-fisico:hover { border-color: #b7c7d8; }
.arquivo-caixa.arquivo-fisico .arquivo-nome { cursor: default; }
.linha-upload { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.linha-upload .arquivo-caixa { flex: 1 1 260px; }
a.arquivo-btn { display: inline-block; text-decoration: none; }
/* Aceite da Política de Privacidade: sempre no fim da lista de documentos. */
.aceite-privacidade { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--borda); }
.arquivo-limpar {
  flex: none; width: 1.4rem; height: 1.4rem; padding: 0; border: none; border-radius: 50%;
  background: transparent; color: var(--texto-suave); font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.arquivo-limpar:hover { background: #e4ebf2; color: var(--texto); }

.marca-obrigatorio { color: var(--vermelho); font-weight: 700; }
.dica-inline { margin-left: 0.4rem; font-size: 0.78rem; font-weight: 400; color: var(--texto-suave); }

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primario { background: var(--azul-700); color: #fff; box-shadow: 0 6px 16px rgba(15, 76, 117, .25); }
.btn-primario:hover { background: var(--azul-900); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 76, 117, .32); }
.btn-primario:disabled { background: #a9bfd1; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secundario { background: #fff; color: var(--azul-700); border-color: var(--azul-borda); }
.btn-secundario:hover { background: var(--azul-100); }
.btn-bloco { width: 100%; }

/* ---- Avisos ---- */
.aviso { padding: 0.85rem 1.1rem; border-radius: var(--raio-peq); font-size: 0.88rem; margin-bottom: 1.1rem; }
.aviso-erro { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid #f5c6c0; }
.aviso-ok { background: var(--verde-bg); color: var(--verde); border: 1px solid #b8e2cd; }
.aviso-info { background: var(--azul-100); color: var(--azul-700); border: 1px solid var(--azul-borda); }
.aviso-atencao { background: var(--laranja-bg); color: var(--laranja); border: 1px solid #f0dba8; }
.oculto { display: none; }

/* ---- Grade de cartões (editais, empresas) ---- */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

/* Painel da home logada — min-width menor que .grade-cartoes de propósito:
   com 220px, 4 cards cabem lado a lado numa coluna de 1080px (280px não
   caberia), o que é exatamente o pedido ("4 cards alinhados"). Mesma classe
   serve pra fileira de baixo (2 cards) — auto-fit distribui sozinho. */
.grade-cartoes-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }

.cartao-item {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.5rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  display: block;
  border-left: 4px solid var(--azul-500);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.cartao-item:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.cartao-item-clicavel { transition: box-shadow .15s ease; }

/* Cards do painel da home (cartaoPainel) — coluna flex com altura total do
   grid (a linha do grid já iguala a altura entre os cards da mesma fileira;
   isso só garante que a etiqueta, dentro de cada um, sempre grude no rodapé,
   não logo depois do texto — senão a altura variável do texto empurraria a
   etiqueta pra alturas diferentes em cada card). */
.cartao-painel { display: flex; flex-direction: column; height: 100%; }
.cartao-painel-destaque { margin-top: auto; padding-top: 0.7rem; }
.cartao-item-clicavel:hover { box-shadow: var(--sombra); }
.cartao-item-titulo { font-weight: 700; color: var(--azul-900); margin-bottom: 0.5rem; font-size: 1.02rem; }

/* Painel da home logada — traços do visual das telas de Reservas/Empresas
   (2026-09-21, pedido explícito, de forma sutil): cartão um pouco mais enxuto,
   texto no tamanho de "meta" e a etiqueta de destaque separada por uma linha
   tracejada, sempre na mesma altura entre os cartões da fileira. */
.cartao-painel { padding: 1.25rem 1.4rem; }
.cartao-painel .cartao-item-titulo { font-size: 0.98rem; margin-bottom: 0.3rem; }
.cartao-painel .cartao-item-meta { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.75rem; }
.cartao-painel .cartao-painel-destaque { padding-top: 0.6rem; border-top: 1px dashed var(--borda); }

/* ---- Modal genérico (abrirModal, em comum.js) ----
   Pra conteúdo que precisa aparecer "limpo" sem empurrar o resto da lista
   pra baixo (ex.: ver/editar um candidato) — antes isso abria inline dentro
   da própria linha, empurrando os inscritos seguintes. */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(18, 58, 104, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; z-index: 100;
}
.modal-caixa {
  background: #fff; border-radius: var(--raio); box-shadow: var(--sombra);
  max-width: 880px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 0 2rem 2rem; position: relative;
}
.modal-conteudo { padding-top: 2rem; }
/* O ✕ acompanha a rolagem (área de altura zero, fixa no topo) — com o título do
   formulário fixo, ele não pode sumir de vista. */
.modal-fechar-area { position: sticky; top: 0; height: 0; z-index: 6; }
.modal-fechar {
  position: absolute; top: 0.9rem; right: -1.1rem;
  background: none; border: none; font-size: 1.3rem; line-height: 1;
  cursor: pointer; color: var(--texto-suave); padding: 0.3rem;
}
.modal-fechar:hover { color: var(--texto); }
.cartao-item-meta { font-size: 0.86rem; color: var(--texto-suave); }

/* ---- Editais — card com as 3 janelas do ciclo (reserva/inscrição/execução) ----
   Grid próprio (mais largo que .grade-cartoes) porque cada card carrega uma
   mini-timeline de 3 colunas — precisa de mais fôlego horizontal. */
.grade-editais { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 1.25rem; }
/* Cartão de edital no padrão dos cartões de Reservas/Empresas (2026-09-21,
   pedido explícito): barra azul na lateral (a faixa de gradiente no topo saiu),
   tipografia enxuta e a linha do tempo separada por um tracejado. */
.edital-card { display: flex; flex-direction: column; padding: 1.25rem 1.4rem; position: relative; overflow: hidden; }
.edital-card .cartao-item-titulo { font-size: 0.98rem; }
.edital-card .cartao-item-meta { font-size: 0.82rem; }
.edital-card-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.edital-etapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.25rem; }
.edital-card .edital-etapas { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--borda); }
.edital-etapa {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.7rem 0.65rem;
  border-radius: var(--raio-peq);
  background: var(--fundo-alt);
  border: 1px solid var(--borda);
}
.edital-etapa-icone { font-size: 1.1rem; line-height: 1; }
.edital-etapa-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.edital-etapa-datas { font-size: 0.84rem; font-weight: 700; color: var(--texto); line-height: 1.3; }
.edital-etapa-atual { background: var(--azul-100); border-color: var(--azul-300); }
.edital-etapa-atual .edital-etapa-label { color: var(--azul-700); }
.edital-etapa-atual .edital-etapa-datas { color: var(--azul-900); }
.edital-etapa-concluida { opacity: .5; }
.edital-etapa-futura { border-style: dashed; }
@media (max-width: 560px) { .edital-etapas { grid-template-columns: 1fr; } }

/* Item de lista mais simples (usado em "Empresas vinculadas") */
.item-lista {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--azul-500);
  border-radius: var(--raio-peq);
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.85rem;
  background: #fff;
}
.item-titulo { font-weight: 700; color: var(--azul-900); margin-bottom: 0.25rem; }
.item-meta { font-size: 0.86rem; color: var(--texto-suave); }

/* Cartão de reserva (reservas.html) — 2026-09-15, pedido explícito: os botões
   de ação ficam numa coluna própria (flex:0 0 auto) que nunca disputa espaço
   com o texto do curso, ao contrário do layout anterior (um único flex-row
   com wrap, que empurrava os botões pra baixo quando o nome do curso era
   longo). Duas linhas, igual ao layout anterior — só reorganizadas. */
.rc-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.rc-titulo-bloco { min-width: 0; flex: 1 1 auto; line-height: 1.5; }
.rc-codigo {
  font-family: monospace; font-size: 0.72rem; color: var(--texto-suave);
  background: var(--fundo-alt); padding: 0.15rem 0.5rem; border-radius: 5px; margin-right: 0.4rem;
}
.rc-curso { font-weight: 700; color: var(--azul-900); font-size: 0.94rem; }
.rc-turno { font-weight: 400; color: var(--texto-suave); font-size: 0.8rem; }
.rc-titulo-bloco .etiqueta { margin-left: 0.4rem; }
.rc-acoes { flex: 0 0 auto; display: flex; gap: 0.5rem; align-items: baseline; }
.rc-corpo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px dashed var(--borda);
}
.rc-meta { font-size: 0.82rem; color: var(--texto-suave); }
.rc-meta .destaque { color: var(--texto); }
.rc-qtd { flex: 0 0 auto; white-space: nowrap; }
.rc-qtd-num { font-size: 1.15rem; font-weight: 800; color: var(--azul-700); }
.rc-qtd-label { font-size: 0.78rem; color: var(--texto-suave); }

.etiqueta {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.etiqueta-verde { background: var(--verde-bg); color: var(--verde); }
.etiqueta-cinza { background: var(--fundo-alt); color: var(--texto-suave); }
.etiqueta-azul { background: var(--azul-100); color: var(--azul-700); }
.etiqueta-laranja { background: var(--laranja-bg); color: var(--laranja); }
.etiqueta-vermelho { background: var(--vermelho-bg); color: var(--vermelho); }

/* ---- Abas de Turma (Inscrição) ---- */
.tab-turma {
  background: #fff;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-peq);
  padding: 0.75rem 1.1rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-width: 180px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tab-turma:hover { border-color: var(--azul-300); }
.tab-turma-titulo { font-weight: 700; color: var(--azul-900); font-size: 0.95rem; }
/* Contagem na caixinha da turma (2026-09-21, pedido explícito): dois chips com o
   número em destaque — inscritos em azul, pendentes em laranja (cinza se zero). */
.tab-turma-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.tab-chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap;
  padding: 0.18rem 0.65rem; border-radius: 999px;
  font-size: 0.74rem; font-weight: 600; background: var(--fundo-alt); color: var(--texto-suave);
}
.tab-chip b { font-size: 0.98rem; font-weight: 800; }
.tab-chip-azul { background: var(--azul-100); color: var(--azul-700); }
.tab-chip-laranja { background: var(--laranja-bg); color: var(--laranja); }
.tab-turma.ativo { border-color: var(--azul-700); box-shadow: 0 0 0 3px var(--azul-100); }

.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela th {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 2px solid var(--borda);
  color: var(--texto-suave);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tabela td { padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--borda); }
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela-rolagem .tabela { border: none; }
.tabela-rolagem .tabela th:first-child, .tabela-rolagem .tabela td:first-child { padding-left: 1.25rem; }

.vazio { text-align: center; color: var(--texto-suave); padding: 3rem 1rem; font-size: 0.95rem; }
.rodape-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: var(--texto-suave); }
.rodape-link a { color: var(--azul-700); font-weight: 700; text-decoration: none; }
.rodape-link a:hover { text-decoration: underline; }

/* ---- Rodapé institucional ---- */
.rodape {
  background: var(--azul-900);
  color: rgba(255, 255, 255, .7);
  padding: 2.75rem 1.5rem 1.5rem;
  font-size: 0.86rem;
  margin-top: auto;
}
.rodape-container { max-width: 1080px; margin: 0 auto; }
.rodape strong { color: #fff; }

.rodape-topo { text-align: left; }
.rodape-logo { height: 30px; width: auto; display: block; }
.rodape-texto { max-width: 520px; margin-top: 0.9rem; font-size: 0.86rem; line-height: 1.6; color: rgba(255, 255, 255, .72); text-align: left; }

.rodape-divisor { margin: 1.75rem 0 1.25rem; height: 1px; background: rgba(255, 255, 255, .14); }

.rodape-base {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 0.5rem;
}
.rodape-base p { font-size: 0.76rem; color: rgba(255, 255, 255, .74); margin: 0; } /* ≥4,5:1 (antes .5 = 4,1:1) */
.rodape-base-esq { text-align: left; }
.rodape-base-meio { text-align: center; }
.rodape-base-dir { text-align: right; }
@media (max-width: 720px) {
  .rodape-base { grid-template-columns: 1fr; gap: 0.4rem; text-align: left; }
  .rodape-base-meio, .rodape-base-dir { text-align: left; }
}

/* ---- Sino de notificações (2026-10-05) ---- */
.sino { position: relative; }
.sino-botao { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--borda); background: #fff; color: var(--azul-700); cursor: pointer; }
.sino-botao:hover { background: var(--azul-100); }
.sino-badge { position: absolute; top: -4px; right: -4px; min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem; border-radius: 999px; background: #d92d20; color: #fff; font-size: 0.68rem; font-weight: 800; display: grid; place-items: center; line-height: 1; box-sizing: border-box; }
.sino-badge.oculto { display: none; }
.sino-painel { position: absolute; right: 0; top: calc(100% + 0.5rem); width: 380px; max-width: calc(100vw - 2rem); background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 12px 32px rgba(18, 58, 104, .18); z-index: 60; overflow: hidden; }
.sino-painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--borda); color: var(--azul-900); }
.sino-acao { border: 0; background: transparent; color: var(--azul-700); font-weight: 700; font-size: 0.8rem; cursor: pointer; padding: 0; }
.sino-acao:hover { text-decoration: underline; }
.sino-lista { max-height: 22rem; overflow-y: auto; }
.sino-item { display: grid; gap: 0.15rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borda); background: #fff; padding: 0.7rem 1rem 0.7rem 1.4rem; cursor: pointer; position: relative; font: inherit; }
.sino-item:hover { background: var(--azul-100); }
.sino-item-nova { background: #f3f9ff; }
.sino-item-nova::before { content: ''; position: absolute; left: 0.6rem; top: 1.05rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--azul-500); }
.sino-item-assunto { font-weight: 700; color: var(--azul-900); font-size: 0.9rem; }
.sino-item-nova .sino-item-assunto { font-weight: 800; }
.sino-item-trecho { color: var(--texto-suave); font-size: 0.82rem; }
.sino-item-data { color: var(--texto-suave); font-size: 0.74rem; }
.sino-vazio { padding: 1.5rem 1rem; text-align: center; color: var(--texto-suave); font-size: 0.9rem; }
.sino-ver-todas { display: block; text-align: center; padding: 0.7rem; font-size: 0.85rem; font-weight: 700; border-top: 1px solid var(--borda); }
.notif-overlay { position: fixed; inset: 0; background: rgba(18, 58, 104, .45); display: grid; place-items: center; padding: 1rem; z-index: 100; }
.notif-modal { background: #fff; border-radius: 14px; max-width: 680px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.notif-modal-topo { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--borda); }
.notif-modal-titulo { font-size: 1.1rem; margin: 0; }
.notif-modal-data { color: var(--texto-suave); font-size: 0.8rem; margin-top: 0.25rem; }
.notif-modal-fechar { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--texto-suave); align-self: flex-start; }
.notif-modal-corpo { padding: 1.2rem 1.4rem 1.6rem; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; font-size: 0.95rem; }
.notif-pagina-item { display: grid; gap: 0.2rem; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--borda); background: #fff; padding: 0.9rem 1.1rem 0.9rem 1.7rem; cursor: pointer; position: relative; font: inherit; }
.notif-pagina-item:hover { background: var(--azul-100); }
.notif-pagina-item.sino-item-nova { background: #f3f9ff; }
.notif-pagina-item.sino-item-nova::before { content: ''; position: absolute; left: 0.75rem; top: 1.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--azul-500); }
@media (max-width: 560px) { .sino-painel { position: fixed; left: 1rem; right: 1rem; top: 4.5rem; width: auto; } }

/* Nome longo não empurra o sino/ações pra uma segunda linha (2026-10-05). */
.topo-conta .item-meta { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-conta { gap: 1rem; }
.sino-botao { width: 2.25rem; height: 2.25rem; }

/* Erro por linha de documento + arquivo grande demais (2026-10-05) */
.campo-erro { font-size: 0.78rem; color: var(--vermelho); margin-top: 0.3rem; font-weight: 600; }
.arquivo-caixa.arquivo-erro { border-color: var(--vermelho); background: #fff6f5; color: var(--vermelho); }

/* =====================================================================
   NOVO DESIGN — prévia (2026-10-09). Tudo sob .design-novo, ativado por
   ?design=novo (ver js/design.js). Nada aqui afeta quem não ativou.
   ===================================================================== */
.design-previa { position: fixed; left: 1rem; bottom: 1rem; z-index: 200; background: #123a68; color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.design-previa a { color: #ffd9a0; margin-left: 0.2rem; }

/* 1) Cabeçalho: sino fora da conta; no celular, menu recolhido num botão. */
.design-novo .topo-sino { margin-left: auto; }
.design-novo .topo-logado .topo-conta { margin-left: 0; }
.design-novo .topo-menu-btn { display: none; width: 2.6rem; height: 2.6rem; border: 1px solid var(--borda); border-radius: 12px; background: #fff; color: var(--azul-700); place-items: center; cursor: pointer; }
.design-novo .topo-menu-btn:hover { background: var(--azul-100); }
@media (max-width: 760px) {
  .design-novo .topo { padding: 0.7rem 1rem; }
  .design-novo .topo-container { gap: 0.7rem; }
  .design-novo .topo-logado .topo-menu-btn { display: grid; }
  .design-novo .topo-logado .topo-nav,
  .design-novo .topo-logado .topo-conta { display: none; }
  .design-novo .topo-logado.topo-aberto .topo-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; order: 10; border-top: 1px solid var(--borda); margin-top: 0.3rem; }
  .design-novo .topo-logado.topo-aberto .topo-conta { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; order: 11; }
  .design-novo .topo-logado.topo-aberto .topo-nav a,
  .design-novo .topo-logado.topo-aberto .topo-conta a { display: flex; align-items: center; min-height: 2.9rem; padding: 0 0.3rem; font-size: 1rem; border-bottom: 1px solid var(--borda); }
  .design-novo .topo-logado.topo-aberto .topo-conta .item-meta { max-width: none; padding: 0.8rem 0.3rem; font-weight: 700; color: var(--azul-900); white-space: normal; }
}

/* 2) Login e formulários: contorno dos campos com contraste e "mostrar senha". */
.design-novo .campo { border-color: #8497ad; }
.design-novo .campo:hover { border-color: #5f7691; }
.design-novo .campo:focus { border-color: var(--azul-700); box-shadow: 0 0 0 4px var(--azul-100); }
.design-novo .campo-senha { position: relative; }
.design-novo .campo-senha .campo { padding-right: 3rem; }
.design-novo .campo-senha-olho { position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border: 0; background: transparent; color: var(--texto-suave); display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
.design-novo .campo-senha-olho:hover { background: var(--azul-100); color: var(--azul-700); }
.design-novo .split { max-width: none; width: 100%; }

/* 3) Home — "Como funciona": 5 passos em uma linha; em tela média 3 + 2 centralizados. */
.design-novo .passos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem; max-width: 1180px; }
.design-novo .passo { flex: 1 1 0; min-width: 170px; padding: 1.4rem 1.15rem; }
.design-novo .passo-texto { font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 999px) { .design-novo .passo { flex: 0 0 calc((100% - 2.2rem) / 3); } }
@media (max-width: 640px) { .design-novo .passo { flex: 1 1 100%; } }

/* 4) Inscrição — turmas em grade uniforme, seleção evidente. */
.design-novo #tabs-turmas { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.75rem !important; }
.design-novo .tab-turma { width: 100%; min-width: 0; min-height: 3.6rem; }
.design-novo .tab-turma.ativo { background: var(--azul-100); border-color: var(--azul-700); box-shadow: 0 0 0 3px rgba(47, 116, 184, .18); }
.design-novo .tab-turma.ativo .tab-turma-titulo { color: var(--azul-900); }
@media (max-width: 560px) { .design-novo #tabs-turmas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Login e Cadastro no molde da home — prévia ?auth=novo (2026-10-09) */
.design-previa { position: fixed; left: 1rem; bottom: 1rem; z-index: 200; background: #123a68; color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.design-previa a { color: #ffd9a0; margin-left: 0.2rem; }
.auth-novo .split { display: none; }
.auth-novo-corpo { background: var(--fundo-alt); }
.hero-auth { padding-bottom: 5rem; }
.auth-principal { max-width: 1080px; margin: -3.4rem auto 0; padding: 0 1.5rem 3.5rem; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.auth-cartao { width: 100%; max-width: 460px; padding: 2rem 2.1rem; box-shadow: 0 14px 36px rgba(18, 58, 104, .14); }
.auth-cartao-largo { max-width: 680px; }
.auth-vantagens { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; color: var(--texto-suave); font-size: 0.9rem; }
.auth-vantagens-marca { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--azul-100); color: var(--azul-700); font-size: 0.75rem; font-weight: 800; margin-right: 0.2rem; }
@media (max-width: 560px) {
  .auth-principal { padding: 0 1rem 2.5rem; margin-top: -2.6rem; }
  .auth-cartao { padding: 1.5rem 1.25rem; }
  .hero-auth { padding-bottom: 4rem; }
}

/* =====================================================================
   PALETA COM LARANJA — prévia ?cor=laranja (2026-10-09). O laranja da marca
   entra só como ACENTO (linhas, detalhes, a ação principal de cada tela); o azul
   continua sendo a cor-base. Texto sobre laranja sempre em azul escuro (contraste
   ~5:1 — branco sobre laranja não passa). Tudo sob .tema-laranja.
   ===================================================================== */
.tema-laranja { --lar: #f7941d; --lar-escuro: #d9770a; --lar-suave: #fff3e2; }

/* Faixa azul: brilho laranja visível + traço de destaque sob o título */
.tema-laranja .hero::after { background: radial-gradient(circle, rgba(247, 148, 29, .5) 0%, transparent 68%); }
.tema-laranja .hero h1::after { content: ""; display: block; width: 64px; height: 4px; border-radius: 3px; background: var(--lar); margin-top: 0.85rem; }

/* Ação principal = ENTRAR (quem já tem conta é a maioria); "Cadastrar" fica discreto.
   Texto azul escuro sobre o laranja (contraste ~5:1). Na tela de login o destaque
   passa para o botão do formulário (o "Entrar" do cabeçalho vira neutro). */
.tema-laranja a.btn[href="/login.html"],
.tema-laranja .auth-cartao #btn:not(:disabled) { background: var(--lar); color: #123a68; border-color: var(--lar); box-shadow: 0 6px 16px rgba(217, 119, 10, .32); }
.tema-laranja a.btn[href="/login.html"]:hover,
.tema-laranja .auth-cartao #btn:not(:disabled):hover { background: #ffa73d; border-color: #ffa73d; box-shadow: 0 10px 22px rgba(217, 119, 10, .4); }
.tema-laranja .topo-conta a.btn[href="/cadastro.html"] { background: #fff; color: var(--azul-700); border-color: var(--azul-borda); box-shadow: none; }
.tema-laranja .topo-conta a.btn[href="/cadastro.html"]:hover { background: var(--azul-100); transform: none; }
.tema-laranja .auth-login .topo-conta a.btn[href="/login.html"] { background: #fff; color: var(--azul-700); border-color: var(--azul-borda); box-shadow: none; }
.tema-laranja .auth-login .topo-conta a.btn[href="/login.html"]:hover { background: var(--azul-100); transform: none; }

/* Cabeçalho: item ativo com sublinhado laranja */
.tema-laranja .topo-nav a.ativo { position: relative; }
.tema-laranja .topo-nav a.ativo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.45rem; height: 3px; border-radius: 2px; background: var(--lar); }

/* Home: títulos de seção com barra laranja; cartões dos passos com filete no topo */
.tema-laranja .secao-cabecalho h2::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 3px; background: var(--lar); margin: 0.7rem auto 0; }
.tema-laranja .passo { border-top: 3px solid var(--lar); }

/* Login e cadastro */
.tema-laranja .auth-cartao { border-top: 4px solid var(--lar); }
.tema-laranja .auth-vantagens-marca { background: var(--lar-suave); color: var(--lar-escuro); }
.tema-laranja .hero-auth h1::after { margin-top: 0.7rem; }

/* Rodapé com filete laranja */
.tema-laranja .rodape { border-top: 4px solid var(--lar); }

/* Detalhes: realce de link e do seletor de turma */
.tema-laranja .tab-turma.ativo { border-color: var(--lar-escuro); background: var(--lar-suave); box-shadow: 0 0 0 3px rgba(247, 148, 29, .22); }
.tema-laranja .cta-login a:hover, .tema-laranja .rodape-link a:hover { color: var(--lar-escuro); }

/* Redefinição de senha (2026-10-06) */
.login-esqueci { text-align: right; margin: -0.35rem 0 1.1rem; font-size: 0.85rem; }
.login-esqueci a { font-weight: 600; }
.criterios-senha { list-style: none; margin: 0 0 1.1rem; padding: 0.7rem 0.9rem; background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: var(--raio-peq); font-size: 0.85rem; color: var(--texto-suave); display: grid; gap: 0.3rem; }
.criterios-senha .criterio-marca { display: inline-block; width: 1.1rem; font-weight: 800; }
.criterios-senha .criterio-ok { color: var(--verde); }
.criterios-senha .criterio-falta { color: var(--texto); }
.aviso-ok { background: var(--verde-bg); color: var(--verde); border: 1px solid #bfe3cf; }