/* =====================================================================
   APP DE LIDERANÇA — SALT-FAAMA
   Identidade visual tirada da logo: azul-marinho, dourado, branco.
   Mobile-first: tudo é desenhado para o celular e cresce para a tela grande.
   ===================================================================== */

:root {
  --marinho-900: #011538;
  --marinho-800: #012056;
  --marinho-700: #012767;
  --marinho-600: #0a3a8c;
  --azul-claro:  #2f6fd0;

  --dourado:     #f2b705;
  --dourado-esc: #c8960a;
  --vermelho:    #d32a1e;
  --verde:       #16794a;

  --papel:       #f4f6fa;
  --branco:      #ffffff;
  --borda:       #dce3ee;
  --texto:       #16233a;
  --texto-suave: #5b6b85;

  --raio:        14px;
  --raio-p:      9px;
  --sombra:      0 1px 2px rgba(1,32,86,.06), 0 8px 24px rgba(1,32,86,.08);
  --sombra-alta: 0 12px 40px rgba(1,21,56,.28);

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fonte);
  color: var(--texto);
  background: var(--papel);
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- telas */

.tela { display: none; }
.tela.ativa { display: block; }

/* ------------------------------------------------------- fundo de acesso */

.fundo-acesso {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1100px 620px at 50% -10%, var(--marinho-600) 0%, transparent 62%),
    linear-gradient(170deg, var(--marinho-800) 0%, var(--marinho-900) 100%);
}

.cartao-acesso {
  width: 100%;
  max-width: 420px;
  background: var(--branco);
  border-radius: 20px;
  box-shadow: var(--sombra-alta);
  padding: 28px 22px 24px;
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  text-align: center;
}

.marca img {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(1,32,86,.22);
}

.marca h1 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--marinho-800);
}

.marca p {
  margin: 0;
  font-size: .82rem;
  color: var(--texto-suave);
}

/* ------------------------------------------------------------ formulário */

.campo { margin-bottom: 14px; }

.campo label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo label .obrig { color: var(--vermelho); }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=tel], select, textarea {
  width: 100%;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 1rem;              /* 16px: impede o zoom automático no iPhone */
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-p);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(47,111,208,.16);
}

input[aria-invalid="true"] { border-color: var(--vermelho); }

textarea { min-height: 110px; resize: vertical; }

.senha-caixa { position: relative; }

.senha-caixa input { padding-right: 46px; }

.olho {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--texto-suave);
  border-radius: 8px;
}

.olho:hover { background: var(--papel); }

.linha-opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: .85rem;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-suave);
  cursor: pointer;
  user-select: none;
}

.checkbox input { width: 17px; height: 17px; accent-color: var(--marinho-700); }

/* ---------------------------------------------------------------- botões */

.botao {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: .98rem;
  font-weight: 650;
  border: 0;
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: filter .15s, transform .06s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .55; cursor: not-allowed; }

.botao-principal { background: var(--marinho-700); color: #fff; }
.botao-principal:hover:not(:disabled) { filter: brightness(1.13); }

.botao-dourado { background: var(--dourado); color: var(--marinho-900); }
.botao-dourado:hover:not(:disabled) { filter: brightness(1.06); }

.botao-vazado {
  background: transparent;
  color: var(--marinho-700);
  border: 1.5px solid var(--borda);
}
.botao-vazado:hover:not(:disabled) { background: var(--papel); }

.link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: .85rem;
  color: var(--azul-claro);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.rodape-acesso {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
  text-align: center;
  font-size: .85rem;
  color: var(--texto-suave);
}

.rodape-acesso .botao { margin-top: 10px; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  display: none;
  padding: 11px 13px;
  border-radius: var(--raio-p);
  font-size: .87rem;
  line-height: 1.45;
  margin-bottom: 14px;
}

.aviso.visivel { display: block; }
.aviso.erro    { background: #fdecea; color: #8c1c13; border: 1px solid #f5c6c2; }
.aviso.ok      { background: #e7f6ee; color: #0e5c37; border: 1px solid #b7e2cb; }
.aviso.info    { background: #eaf1fd; color: #123a7a; border: 1px solid #c3d7f6; }

/* ------------------------------------------------------------- girandinho */

.girando {
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: gira .7s linear infinite;
}

.botao-dourado .girando,
.botao-vazado .girando { border-color: rgba(1,32,86,.25); border-top-color: var(--marinho-800); }

@keyframes gira { to { transform: rotate(360deg); } }

/* ------------------------------------------------- cadastro (duas colunas) */

.grade-2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }

@media (min-width: 520px) {
  .grade-2 { grid-template-columns: 1fr 1fr; }
  .grade-2 .largura-total { grid-column: 1 / -1; }
}

.dica-campo {
  font-size: .76rem;
  color: var(--texto-suave);
  margin-top: 5px;
}

.voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: .86rem;
  color: var(--texto-suave);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-weight: 600;
}
.voltar:hover { color: var(--marinho-700); }

/* --------------------------------------------------- código de 6 dígitos */

.codigo-caixa {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 6px;
}

.codigo-caixa input {
  width: 100%;
  max-width: 52px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 12px 4px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- utilidades */

.oculto { display: none !important; }
.centro { text-align: center; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* =====================================================================
   TELAS INTERNAS (depois do login)
   ===================================================================== */

.pagina { min-height: 100dvh; display: flex; flex-direction: column; }

/* ------------------------------------------------------- barra superior */

.barra {
  position: sticky; top: 0; z-index: 40;
  background: var(--marinho-800);
  color: #fff;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 12px rgba(1,21,56,.22);
}

.barra-marca { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.barra-marca img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.barra-marca span {
  font-weight: 700; font-size: .95rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.icone-barra {
  position: relative;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1);
  border: 0; border-radius: 11px;
  color: #fff; font-size: 1.05rem; cursor: pointer;
  transition: background .15s;
}
.icone-barra:hover { background: rgba(255,255,255,.2); }

.selo {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  background: var(--vermelho); color: #fff;
  border-radius: 10px; font-size: .68rem; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--marinho-800);
}
.selo:empty, .selo[hidden] { display: none; }

.avatar {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.55);
  background: var(--marinho-600);
  cursor: pointer;
}

.avatar-letra {
  display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; color: #fff;
}

/* ------------------------------------------------------------- conteúdo */

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 16px 48px;
}

.saudacao { margin: 0 0 4px; font-size: 1.3rem; font-weight: 700; color: var(--marinho-800); }
.saudacao-sub { margin: 0 0 26px; color: var(--texto-suave); font-size: .9rem; }

.titulo-secao {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-suave);
}
.titulo-secao::after {
  content: ''; flex: 1; height: 1px; background: var(--borda);
}

.grade-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 34px;
}

@media (min-width: 640px)  { .grade-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grade-cards { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------- card de classe */

.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.card-topo {
  padding: 12px 16px;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff;
}

.card-topo.aventureiros  { background: linear-gradient(100deg, #1565c0, #0d47a1); }
.card-topo.desbravadores { background: linear-gradient(100deg, #d32a1e, #9c1f16); }
.card-topo.jovens        { background: linear-gradient(100deg, #e8a900, #c8960a); }

.card-corpo { padding: 6px 16px 14px; }

.classe {
  padding: 13px 0;
  border-bottom: 1px solid var(--borda);
}
.classe:last-child { border-bottom: 0; }

.classe-topo {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}

.classe-nome {
  font-weight: 650; font-size: .94rem; color: var(--texto);
  margin-right: auto;
}

.classe-conta {
  font-size: .82rem; font-weight: 700;
  color: var(--marinho-700);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.trilho {
  height: 8px; border-radius: 99px;
  background: #e8edf6; overflow: hidden;
  margin-bottom: 8px;
}

.trilho i {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--dourado), var(--dourado-esc));
  transition: width .5s ease;
}

.classe-rodape {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: var(--texto-suave);
}

.classe-rodape .botao { width: auto; padding: 7px 13px; font-size: .82rem; margin-left: auto; }

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .02em;
}
.etiqueta.aguardando { background: #fff3d6; color: #8a6200; }
.etiqueta.ativa      { background: #e7f6ee; color: #0e5c37; }
.etiqueta.aprovada   { background: #e5edfb; color: #123a7a; }
.etiqueta.sem        { background: #eef1f6; color: var(--texto-suave); }

/* --------------------------------------------------- card de ferramenta */

.ferramenta {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}

.ferramenta:hover {
  transform: translateY(-2px);
  border-color: var(--azul-claro);
  box-shadow: 0 6px 20px rgba(1,32,86,.13);
}

.ferramenta .simbolo {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--papel);
  font-size: 1.35rem;
}

.ferramenta h3 { margin: 0 0 3px; font-size: .96rem; font-weight: 650; color: var(--texto); }
.ferramenta p  { margin: 0; font-size: .8rem; color: var(--texto-suave); line-height: 1.4; }

/* ------------------------------------------------------------- menus */

/* ATENÇÃO ao position.
   Com `absolute` e sem ancestral posicionado, o menu se prende ao topo do
   DOCUMENTO, não da tela: a barra fica grudada no alto porque é sticky,
   mas o menu abria a 62 px do começo da página. Quem estivesse lá embaixo
   clicava no perfil ou no sino e não via nada.
   `fixed` prende na tela, que é onde a barra está de verdade. */
.menu-flutuante {
  position: fixed;
  right: 14px;
  top: calc(62px + env(safe-area-inset-top));
  z-index: 60;
  /* numa tela baixa a ficha do perfil nao pode passar do rodape */
  max-height: calc(100dvh - 76px - env(safe-area-inset-top));
  overflow-y: auto;
  overscroll-behavior: contain;

  /* SEM max-width, um painel posicionado com width:auto estica até caber
     a maior linha SEM quebrar — e uma notificação com o enunciado inteiro
     dentro tomava a tela toda. Com o teto, o texto quebra e o painel
     cresce para BAIXO, que é o certo. */
  min-width: 220px;
  max-width: calc(100vw - 28px);

  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 6px;
  display: none;
}
.menu-flutuante.aberto { display: block; }

.menu-flutuante .cabeca {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 6px;
}
.menu-flutuante .cabeca strong { display: block; font-size: .9rem; color: var(--texto); }
.menu-flutuante .cabeca small  { color: var(--texto-suave); font-size: .78rem; }

.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: none; border: 0; border-radius: 9px;
  font-family: inherit; font-size: .88rem; color: var(--texto);
  text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--papel); }
.menu-item.perigo { color: var(--vermelho); }

/* --------------------------------------------------------- notificações */

/* O painel de avisos é uma caixa de largura fixa no canto; a mensagem
   comprida desce dentro dela em vez de alargá-la. */
#painel-notif {
  width: 400px;
  max-width: calc(100vw - 28px);
}

.lista-notificacoes { max-height: 52vh; overflow-y: auto; }

.notificacao {
  padding: 11px 12px;
  border-radius: 9px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.notificacao:hover { background: var(--papel); }
.notificacao.nao-lida { border-left-color: var(--dourado); background: #fffbf0; }
.notificacao strong {
  display: block; font-size: .85rem; margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.notificacao span {
  display: block;
  font-size: .79rem; color: var(--texto-suave); line-height: 1.45;
  overflow-wrap: anywhere;
}
.notificacao time   { display: block; font-size: .72rem; color: var(--texto-suave); margin-top: 4px; }

/* ------------------------------------------------------------- vazios */

.vazio {
  text-align: center;
  padding: 34px 18px;
  color: var(--texto-suave);
  font-size: .88rem;
}
.vazio .simbolo { font-size: 2rem; display: block; margin-bottom: 10px; opacity: .55; }

/* ---------------------------------------------------------- esqueleto */

.esqueleto {
  background: linear-gradient(90deg, #eef1f6 25%, #e3e8f1 37%, #eef1f6 63%);
  background-size: 400% 100%;
  animation: brilha 1.3s ease infinite;
  border-radius: 8px;
}
@keyframes brilha { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ------------------------------------------------------------- toast */

.toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translate(-50%, 130%);
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--raio-p);
  background: var(--marinho-800); color: #fff;
  font-size: .88rem; font-weight: 550;
  box-shadow: var(--sombra-alta);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.toast.visivel { transform: translate(-50%, 0); }
.toast.erro { background: #8c1c13; }
.toast.ok   { background: var(--verde); }

/* =====================================================================
   PAINEL DO ADMINISTRADOR — abas, tabelas, modais
   ===================================================================== */

.cabecalho-pagina {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.cabecalho-pagina h1 {
  margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--marinho-800);
  margin-right: auto;
}

.voltar-pagina {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .86rem; font-weight: 600; color: var(--texto-suave);
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: inherit; margin-bottom: 6px;
}
.voltar-pagina:hover { color: var(--marinho-700); }

/* ------------------------------------------------------------- abas */

.abas {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--borda);
  margin-bottom: 22px;
  overflow-x: auto;
}

.aba {
  padding: 11px 16px;
  background: none; border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; white-space: nowrap;
}
.aba:hover { color: var(--marinho-700); }
.aba.ativa { color: var(--marinho-700); border-bottom-color: var(--dourado); }

.painel-aba { display: none; }
.painel-aba.ativa { display: block; }

/* ---------------------------------------------------------- blocos */

.bloco {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 20px 18px;
  margin-bottom: 22px;
}

.bloco > h2 {
  margin: 0 0 16px;
  font-size: 1rem; font-weight: 700; color: var(--marinho-800);
  display: flex; align-items: center; gap: 10px;
}
.bloco > h2 .conta {
  font-size: .78rem; font-weight: 600; color: var(--texto-suave);
  background: var(--papel); padding: 3px 9px; border-radius: 99px;
}

/* -------------------------------------------------- foto circular */

.foto-perfil-editor {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}

.foto-circulo {
  width: 78px; height: 78px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--papel);
  border: 2px dashed var(--borda);
  display: grid; place-items: center;
  font-size: 1.7rem; color: var(--texto-suave);
  cursor: pointer; position: relative;
}
.foto-circulo img { width: 100%; height: 100%; object-fit: cover; }
.foto-circulo:hover { border-color: var(--azul-claro); }

/* --------------------------------------------------------- tabela */

.tabela-rolagem { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }

table.dados {
  width: 100%; border-collapse: collapse; font-size: .86rem;
  min-width: 720px;
}

table.dados th {
  text-align: left; padding: 10px 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-suave);
  border-bottom: 2px solid var(--borda); white-space: nowrap;
}

table.dados td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--borda);
  vertical-align: middle;
}

table.dados tbody tr:hover { background: #fafbfe; }

table.dados td.nome-celula {
  display: flex; align-items: center; gap: 10px; min-width: 200px;
}

.mini-avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: 50%; object-fit: cover;
  background: var(--marinho-600); color: #fff;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700;
}

.tipo-selo {
  display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.tipo-selo.administrador { background: #e5edfb; color: #123a7a; }
.tipo-selo.revisor       { background: #fff3d6; color: #8a6200; }
.tipo-selo.candidato     { background: #eef1f6; color: var(--texto-suave); }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-size: .71rem; padding: 3px 8px; border-radius: 99px;
  background: var(--papel); color: var(--texto-suave); white-space: nowrap;
}

.acoes-celula { display: flex; gap: 4px; white-space: nowrap; }

.botao-icone {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--borda);
  border-radius: 8px; cursor: pointer;
  font-size: .9rem; color: var(--texto-suave);
  transition: all .12s;
}
.botao-icone:hover { background: var(--papel); border-color: var(--azul-claro); color: var(--marinho-700); }
.botao-icone.perigo:hover { background: #fdecea; border-color: var(--vermelho); color: var(--vermelho); }

/* ----------------------------------------------------- paginação */

.paginacao {
  display: flex; align-items: center; gap: 6px;
  justify-content: center; margin-top: 18px; flex-wrap: wrap;
}
.pagina-botao {
  min-width: 34px; height: 34px; padding: 0 9px;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 600;
  color: var(--texto-suave);
}
.pagina-botao:hover:not(:disabled) { border-color: var(--azul-claro); color: var(--marinho-700); }
.pagina-botao.atual { background: var(--marinho-700); color: #fff; border-color: var(--marinho-700); }
.pagina-botao:disabled { opacity: .4; cursor: not-allowed; }

/* -------------------------------------------- barra de ferramentas */

.barra-tabela {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.barra-tabela .busca { flex: 1; min-width: 180px; }
.barra-tabela .busca input { padding: 9px 12px; font-size: .9rem; }
.barra-tabela .botao { width: auto; padding: 9px 14px; font-size: .86rem; }

.selecao-aviso {
  display: none; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 14px;
  background: #eaf1fd; border: 1px solid #c3d7f6; border-radius: var(--raio-p);
  font-size: .86rem; color: #123a7a;
}
.selecao-aviso.visivel { display: flex; }
.selecao-aviso .botao { width: auto; padding: 7px 13px; font-size: .82rem; margin-left: auto; }

/* ----------------------------------------------------------- modal */

.fundo-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(1,21,56,.55);
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.fundo-modal.aberto { display: flex; }

.modal {
  width: 100%; max-width: 520px;
  max-height: 90dvh; overflow-y: auto;
  background: var(--branco);
  border-radius: 18px;
  box-shadow: var(--sombra-alta);
  padding: 22px 20px;
}
.modal.largo { max-width: 780px; }

.modal-topo {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
}
.modal-topo h2 { margin: 0; font-size: 1.05rem; color: var(--marinho-800); flex: 1; }
.modal-topo .fechar {
  width: 32px; height: 32px; flex: none;
  background: none; border: 0; border-radius: 8px;
  font-size: 1.2rem; color: var(--texto-suave); cursor: pointer;
}
.modal-topo .fechar:hover { background: var(--papel); }

.modal-acoes {
  display: flex; gap: 10px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--borda);
}
.modal-acoes .botao { flex: 1; }

/* ---------------------------------------------- código de 6 dígitos */

.codigo-gerado {
  text-align: center;
  background: var(--papel);
  border: 2px dashed var(--borda);
  border-radius: var(--raio);
  padding: 20px; margin: 16px 0;
}
.codigo-gerado .numero {
  font-size: 2.3rem; font-weight: 800;
  letter-spacing: 10px; color: var(--marinho-800);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.codigo-gerado small { color: var(--texto-suave); font-size: .8rem; }

/* ------------------------------------------- lista de seleção */

.lista-selecao {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 6px;
}

.item-selecao {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: .88rem;
}
.item-selecao:hover { background: var(--papel); }
.item-selecao input { width: 17px; height: 17px; accent-color: var(--marinho-700); flex: none; }
.item-selecao .sub { font-size: .76rem; color: var(--texto-suave); }

/* ------------------------------------------ indicador de armazenamento */

.armazenamento {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 22px;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  font-size: .85rem;
}
.armazenamento .rotulo { font-weight: 650; color: var(--texto); }
.armazenamento .medida { color: var(--texto-suave); margin-left: auto; white-space: nowrap; }
.armazenamento .trilho { flex: 1; min-width: 100px; margin: 0; }
.armazenamento .trilho i { background: linear-gradient(90deg, var(--verde), #1f9c60); }
.armazenamento.atencao .trilho i { background: linear-gradient(90deg, var(--dourado), var(--dourado-esc)); }
.armazenamento.critico .trilho i { background: linear-gradient(90deg, #e4574a, var(--vermelho)); }

@media (max-width: 560px) {
  .armazenamento { flex-wrap: wrap; }
  .armazenamento .trilho { order: 3; flex-basis: 100%; }
}

/* =====================================================================
   EDITOR DE REQUISITOS
   ===================================================================== */

.grade-formularios {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 620px) { .grade-formularios { grid-template-columns: repeat(2, 1fr); } }

.cartao-formulario {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; width: 100%; text-align: left;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  cursor: pointer; font-family: inherit;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.cartao-formulario:hover {
  transform: translateY(-2px); border-color: var(--azul-claro);
  box-shadow: 0 6px 20px rgba(1,32,86,.13);
}
.cartao-formulario .faixa {
  width: 5px; align-self: stretch; border-radius: 99px; flex: none;
}
.cartao-formulario .faixa.aventureiros  { background: #1565c0; }
.cartao-formulario .faixa.desbravadores { background: var(--vermelho); }
.cartao-formulario .faixa.jovens        { background: var(--dourado); }
.cartao-formulario h3 { margin: 0 0 3px; font-size: .97rem; font-weight: 650; }
.cartao-formulario p  { margin: 0; font-size: .8rem; color: var(--texto-suave); }

/* ------------------------------------------------------- cabeçalho fixo */

.cabecalho-formulario {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 20px;
  background: linear-gradient(100deg, var(--marinho-800), var(--marinho-600));
  color: #fff; border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cabecalho-formulario img { width: 46px; height: 46px; border-radius: 11px; flex: none; }
.cabecalho-formulario h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.cabecalho-formulario small { opacity: .78; font-size: .78rem; }

/* ------------------------------------------------------------- seção */

.secao {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: 16px; overflow: hidden;
}

.secao-topo {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  background: var(--papel); border-bottom: 1px solid var(--borda);
}
.secao-topo input {
  flex: 1; border: 1.5px solid transparent; background: transparent;
  font-weight: 700; font-size: .95rem; color: var(--marinho-800);
  padding: 7px 9px;
}
.secao-topo input:hover  { border-color: var(--borda); background: var(--branco); }
.secao-topo input:focus  { border-color: var(--azul-claro); background: var(--branco); }
.secao-topo .conta-req {
  font-size: .74rem; font-weight: 600; color: var(--texto-suave);
  background: var(--branco); padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--borda); white-space: nowrap;
}

.secao-corpo { padding: 12px 14px; }

/* --------------------------------------------------------- requisito */

.requisito {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 13px; margin-bottom: 10px;
  background: var(--branco);
}
.requisito:last-of-type { margin-bottom: 14px; }

.requisito-topo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.requisito-topo .ordem {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 6px;
  background: var(--marinho-700); color: #fff;
  font-size: .74rem; font-weight: 700;
}
.requisito-topo input[type=text] {
  flex: 1; font-weight: 600; font-size: .92rem; padding: 8px 10px;
}

.requisito-grade {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px;
}
@media (min-width: 560px) {
  .requisito-grade { grid-template-columns: repeat(2, 1fr); }
  .requisito-grade .largura-total { grid-column: 1 / -1; }
}
.requisito-grade label {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 5px;
}
.requisito-grade input, .requisito-grade select, .requisito-grade textarea {
  padding: 9px 11px; font-size: .88rem;
}
.requisito-grade textarea { min-height: 62px; }

.campo-fixo {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px; border-radius: var(--raio-p);
  background: var(--papel); border: 1.5px dashed var(--borda);
  font-size: .82rem; color: var(--texto-suave);
}

.requisito-rodape {
  display: flex; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--borda);
}
.requisito-rodape .estado {
  font-size: .76rem; color: var(--texto-suave); margin-right: auto;
}
.requisito-rodape .botao { width: auto; padding: 7px 14px; font-size: .82rem; }

.requisito.sujo { border-color: var(--dourado); background: #fffdf5; }

.botao-adicionar {
  width: 100%; padding: 12px;
  background: var(--papel); border: 1.5px dashed var(--borda);
  border-radius: var(--raio-p); cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  color: var(--texto-suave);
  transition: all .12s;
}
.botao-adicionar:hover {
  border-color: var(--azul-claro); color: var(--marinho-700); background: #f3f7fe;
}
.botao-adicionar.destaque {
  border-color: var(--dourado); color: var(--dourado-esc); background: #fffbf0;
}

.aviso-uso {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .78rem; color: #8a6200;
  background: #fff3d6; border: 1px solid #f2ddad;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
}

/* =====================================================================
   PASTA — o candidato cumpre os requisitos, o revisor avalia
   ===================================================================== */

.faixa-pasta {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 18px;
  background: linear-gradient(100deg, var(--marinho-800), var(--marinho-600));
  color: #fff; border-radius: var(--raio); box-shadow: var(--sombra);
  flex-wrap: wrap;
}
.faixa-pasta img.logo { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.faixa-pasta h1 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.faixa-pasta small { opacity: .8; font-size: .8rem; }
.faixa-pasta .progresso-geral { margin-left: auto; text-align: right; min-width: 130px; }
.faixa-pasta .progresso-geral strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.faixa-pasta .trilho { background: rgba(255,255,255,.22); margin: 6px 0 0; }
.faixa-pasta .trilho i { background: var(--dourado); }

@media (max-width: 540px) {
  .faixa-pasta .progresso-geral { margin-left: 0; flex-basis: 100%; text-align: left; }
}

.aviso-revisor {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin-bottom: 18px;
  background: #fff3d6; border: 1px solid #f2ddad;
  border-radius: var(--raio-p); font-size: .86rem; color: #8a6200;
}

/* ------------------------------------------------------ seção da pasta */

.secao-pasta { margin-bottom: 22px; }

.secao-cabeca {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.secao-cabeca h2 {
  margin: 0; font-size: .95rem; font-weight: 700;
  color: var(--marinho-800); text-transform: uppercase; letter-spacing: .04em;
}
.secao-cabeca .medidor { flex: 1; min-width: 140px; display: flex; align-items: center; gap: 9px; }
.secao-cabeca .medidor .trilho { flex: 1; margin: 0; }
.secao-cabeca .medidor span {
  font-size: .78rem; font-weight: 700; color: var(--marinho-700);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- cartão do requisito */

.req-cartao {
  background: var(--branco); border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: 12px; overflow: hidden;
}
.req-cartao.pendente  { border-left-color: #c3ccdb; }
.req-cartao.salvo     { border-left-color: #6f9ae0; }
.req-cartao.concluido { border-left-color: var(--dourado); }
.req-cartao.aprovado  { border-left-color: var(--verde); }
.req-cartao.corrigido { border-left-color: var(--vermelho); }

/* Terminado: o requisito que o candidato não precisava cumprir. Fica
   apagado de propósito — está resolvido, mas não é uma conquista. */
.req-cartao.dispensado { border-left-color: #9aa6b8; background: #fbfcfe; }
.req-cartao.dispensado .req-cabeca h3 { color: var(--texto-suave); }

.req-cabeca {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; cursor: pointer;
}
.req-cabeca:hover { background: #fafbfe; }
.req-cabeca h3 { margin: 0 0 4px; font-size: .95rem; font-weight: 650; }
.req-cabeca .meta { font-size: .78rem; color: var(--texto-suave); }
.req-cabeca .lado { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.req-cabeca .seta { color: var(--texto-suave); transition: transform .2s; }
.req-cartao.aberto .req-cabeca .seta { transform: rotate(180deg); }

.selo-status {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.selo-status.pendente  { background: #eef1f6; color: var(--texto-suave); }
.selo-status.concluido { background: #fff3d6; color: #8a6200; }
.selo-status.aprovado  { background: #e7f6ee; color: #0e5c37; }
.selo-status.dispensado{ background: #eef1f6; color: #4b5a73; border: 1px dashed #b7c1d1; }

/* Salvo: já tem conteúdo guardado, mas ainda não foi enviado ao revisor.
   Azul, para não se confundir com o dourado de "enviado para avaliação"
   nem com o cinza de "ninguém tocou". */
.selo-status.salvo     { background: #e7effb; color: #164a93; }

.req-corpo { display: none; padding: 0 16px 16px; }
.req-cartao.aberto .req-corpo { display: block; }

.caixa-correcao {
  background: #fdecea; border: 1px solid #f5c6c2;
  border-radius: var(--raio-p); padding: 12px 14px; margin-bottom: 14px;
}
.caixa-correcao strong { display: block; font-size: .82rem; color: #8c1c13; margin-bottom: 5px; }
.caixa-correcao p { margin: 0; font-size: .87rem; color: #8c1c13; line-height: 1.5; }

/* ------------------------------------------- informações essenciais

   Sete caixas que, juntas, viram o parágrafo de abertura do requisito.
   Ficam num bloco próprio para deixar claro que andam em conjunto. */
.bloco-essenciais {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio-p);
}
.bloco-essenciais.pronto { border-left-color: var(--verde); }

.cabeca-essenciais {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cabeca-essenciais strong { font-size: .86rem; color: var(--texto); }

.estado-essenciais {
  margin-left: auto;
  font-size: .75rem; font-weight: 600;
  color: var(--texto-suave);
}
.bloco-essenciais.pronto .estado-essenciais { color: var(--verde); }

/* O pé do bloco mostra a frase se formando. Como ela cresce conforme as
   caixas são preenchidas, precisa de respiro e de quebra em qualquer
   ponto — nomes de igreja e de campo são compridos. */
.previa-frase {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--borda);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.grade-essenciais {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.grade-essenciais > * { min-width: 0; }
.grade-essenciais label {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 4px;
}
.grade-essenciais input { font-size: .88rem; }
/* a recomendação do cidade/estado, logo abaixo da caixa dela */
.grade-essenciais .dica-campo { margin: 4px 0 0; font-size: .72rem; }

/* Linha de baixo da caixa de descrição: a dica à esquerda, a contagem de
   palavras à direita, encostada na borda da caixa. */
.rodape-descricao {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 6px;
}
.rodape-descricao .dica-campo { flex: 1; margin: 0; }

.conta-palavras {
  flex: none;
  font-size: .75rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 99px;
  padding: 3px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.caixa-dispensa {
  background: #f4f6fa; border: 1px dashed #b7c1d1;
  border-radius: var(--raio-p); padding: 12px 14px; margin-bottom: 14px;
}
.caixa-dispensa strong { display: block; font-size: .82rem; color: #3b4a63; margin-bottom: 5px; }
.caixa-dispensa p { margin: 0; font-size: .87rem; color: #4b5a73; line-height: 1.5; }

/* ------------------------------------------------------------- parte */

.parte {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 13px; margin-bottom: 11px;
}
.parte-cabeca {
  display: flex; align-items: center; gap: 8px; margin-bottom: 11px;
}
.parte-cabeca .rotulo {
  font-size: .76rem; font-weight: 700; color: var(--marinho-700);
  text-transform: uppercase; letter-spacing: .04em;
}
.parte-cabeca .completa {
  margin-left: auto; font-size: .74rem; font-weight: 600;
}
.parte-cabeca .completa.sim  { color: var(--verde); }
.parte-cabeca .completa.nao  { color: var(--texto-suave); }

.parte-grade { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .parte-grade.com-foto { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------- texto sem onde quebrar

   Uma sequência sem espaço nenhum — "11111111…", um link colado inteiro,
   um nome de arquivo comprido — não tem ponto de quebra. Sem as duas
   regras abaixo o navegador alarga a coluna até a palavra caber, e numa
   grade de duas colunas isso esmaga a coluna vizinha: a caixa da foto
   virava uma tira estreita e a legenda ficava ilegível.

   As duas são necessárias, e por motivos diferentes:
     overflow-wrap: anywhere  deixa quebrar no meio da palavra
     min-width: 0             tira o piso que a grade dá a cada coluna
                              (o padrão é "auto" = cabe o conteúdo inteiro)
   -------------------------------------------------------------------- */
.parte-grade > * { min-width: 0; }
.req-cabeca > div { min-width: 0; }

.texto-rico,
.titulo-unidade,
.titulo-grupo,
.req-cabeca .meta,
.caixa-correcao p,
.caixa-dispensa p,
.legenda-vista,
.orientacao,
.dica-campo,
.req-rodape .estado,
textarea {
  overflow-wrap: anywhere;
}

.parte-grade label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 5px;
}
.parte-grade textarea { min-height: 130px; font-size: .9rem; }
.parte-grade input[type=date] { font-size: .9rem; }

.caixa-foto {
  border: 1.5px dashed var(--borda); border-radius: var(--raio-p);
  /* altura fixa: com object-fit: contain, foto em pé e foto deitada
     cabem na mesma caixa sem esticar o cartão */
  height: 200px; display: grid; place-items: center;
  cursor: pointer; overflow: hidden; position: relative;
  background: var(--papel); text-align: center; padding: 14px;
}
.caixa-foto:hover { border-color: var(--azul-claro); background: #f3f7fe; }
/* A foto aparece INTEIRA, no formato dela. Antes era width/height 100%
   com object-fit: cover, que recortava as laterais de uma foto em pé e
   escondia justamente o que a pessoa precisa ver.

   Posicionada, e não um item do grid: dentro do grid a porcentagem de
   max-height não tinha contra o que medir, e a imagem transbordava a
   caixa em vez de caber nela. Encostada nas quatro bordas com margem
   automática, ela centraliza e encolhe até caber, no formato dela. */
.caixa-foto img {
  position: absolute;
  inset: 12px;
  margin: auto;
  width: auto; height: auto;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  display: block;
}
.caixa-foto .instrucao { font-size: .82rem; color: var(--texto-suave); line-height: 1.5; }
.caixa-foto .instrucao .icone { display: block; font-size: 1.7rem; margin-bottom: 6px; }
.caixa-foto.somente-leitura { cursor: default; border-style: solid; }

.trocar-foto {
  position: absolute; right: 7px; bottom: 7px;
  background: rgba(1,21,56,.82); color: #fff;
  border: 0; border-radius: 7px; padding: 6px 11px;
  font-family: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
}
.trocar-foto:hover { background: var(--marinho-800); }

.orientacao {
  font-size: .78rem; color: var(--texto-suave);
  background: var(--papel); border-left: 3px solid var(--dourado);
  padding: 7px 10px; border-radius: 0 7px 7px 0; margin-top: 6px;
  line-height: 1.5;
}

.req-rodape {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--borda);
}
.req-rodape .estado { font-size: .78rem; color: var(--texto-suave); margin-right: auto; }
.req-rodape .botao { width: auto; padding: 9px 16px; font-size: .86rem; }

/* =====================================================================
   ALÍNEAS — o terceiro nível (requisito → a, b, c)
   ===================================================================== */

.requisito.com-alineas > .requisito-grade { display: none; }

.enunciado {
  font-size: .78rem; color: var(--texto-suave);
  background: var(--papel); border-radius: 7px;
  padding: 8px 11px; margin-bottom: 10px; line-height: 1.5;
}

.lista-alineas {
  margin: 10px 0 10px 0;
  padding-left: 14px;
  border-left: 3px solid var(--dourado);
}

.alinea {
  border: 1px solid var(--borda); border-radius: var(--raio-p);
  padding: 12px; margin-bottom: 9px; background: var(--branco);
}
.alinea.sujo { border-color: var(--dourado); background: #fffdf5; }

.alinea-topo {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.alinea-topo .letra {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--dourado); color: var(--marinho-900);
  font-size: .78rem; font-weight: 800;
}
.alinea-topo input[type=text] {
  flex: 1; font-size: .9rem; font-weight: 600; padding: 8px 10px;
}

.alinea-rodape {
  display: flex; align-items: center; gap: 8px;
  padding-top: 9px; border-top: 1px solid var(--borda);
}
.alinea-rodape .estado { font-size: .74rem; color: var(--texto-suave); margin-right: auto; }
.alinea-rodape .botao { width: auto; padding: 6px 13px; font-size: .8rem; }

.botao-alinea {
  width: 100%; padding: 9px;
  background: #fffbf0; border: 1.5px dashed var(--dourado);
  border-radius: var(--raio-p); cursor: pointer;
  font-family: inherit; font-size: .84rem; font-weight: 650;
  color: var(--dourado-esc);
}
.botao-alinea:hover { background: #fff5dc; }

/* --------------------------------------------- alínea na tela da pasta */

.req-grupo {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  margin-bottom: 12px; overflow: hidden;
}
.req-grupo > .titulo-grupo {
  padding: 13px 16px; background: var(--papel);
  border-bottom: 1px solid var(--borda);
  font-size: .92rem; font-weight: 650; color: var(--marinho-800);
  line-height: 1.45;
}
.req-grupo > .corpo-grupo { padding: 10px 12px; }
.req-grupo .req-cartao { box-shadow: none; margin-bottom: 9px; }
.req-grupo .req-cartao:last-child { margin-bottom: 0; }

.marca-alinea {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--dourado); color: var(--marinho-900);
  font-size: .74rem; font-weight: 800; margin-right: 2px;
}

/* =====================================================================
   GERENCIADOR DE PASTAS
   ===================================================================== */

.layout-gerenciador {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
@media (min-width: 820px) {
  .layout-gerenciador { grid-template-columns: 232px 1fr; }
}

.nav-lateral {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
@media (min-width: 820px) {
  .nav-lateral {
    flex-direction: column;
    position: sticky; top: 76px;
    overflow: visible; padding-bottom: 0;
  }
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; white-space: nowrap;
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio-p); cursor: pointer;
  font-family: inherit; font-size: .88rem; font-weight: 600;
  color: var(--texto-suave); text-align: left;
  transition: all .12s;
}
.nav-item:hover { border-color: var(--azul-claro); color: var(--marinho-700); }
.nav-item.ativo {
  background: var(--marinho-700); border-color: var(--marinho-700); color: #fff;
}
.nav-item .conta {
  margin-left: auto;
  min-width: 22px; padding: 1px 7px; border-radius: 99px;
  background: var(--papel); color: var(--texto-suave);
  font-size: .74rem; font-weight: 700;
}
.nav-item.ativo .conta { background: rgba(255,255,255,.22); color: #fff; }
.nav-item .conta:empty { display: none; }

/* ------------------------------------------------------- cartão de pasta */

.grade-pastas {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 1000px) { .grade-pastas { grid-template-columns: 1fr 1fr; } }

.cartao-pasta {
  background: var(--branco); border: 1px solid var(--borda);
  border-left: 4px solid var(--dourado);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 14px 16px;
}
.cartao-pasta.aprovada  { border-left-color: var(--verde); }
.cartao-pasta.solicitada { border-left-color: var(--azul-claro); }

.cartao-pasta .nome-pasta {
  font-size: .76rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--marinho-700);
  margin-bottom: 10px;
}

.pessoa-linha {
  display: flex; align-items: center; gap: 11px; margin-bottom: 12px;
}
.pessoa-linha .mini-avatar { width: 42px; height: 42px; font-size: .84rem; }
.pessoa-linha strong { display: block; font-size: .93rem; }
.pessoa-linha small  { font-size: .78rem; color: var(--texto-suave); }

.cartao-pasta .rodape {
  display: flex; align-items: center; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--borda);
  flex-wrap: wrap;
}
.cartao-pasta .rodape .botao { width: auto; padding: 8px 14px; font-size: .84rem; }
.cartao-pasta .rodape .info {
  font-size: .8rem; color: var(--texto-suave); margin-right: auto;
}
.cartao-pasta .rodape .destaque {
  font-weight: 700; color: var(--dourado-esc);
}

/* ----------------------------------------------------------- gráficos */

.grade-graficos {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 900px) { .grade-graficos { grid-template-columns: 1fr 1fr; } }

.painel-grafico {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 18px;
}
.painel-grafico h2 {
  margin: 0 0 2px; font-size: .95rem; font-weight: 700; color: var(--marinho-800);
}
.painel-grafico .legenda-topo {
  margin: 0 0 16px; font-size: .8rem; color: var(--texto-suave);
}

.numerao {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin-bottom: 20px;
}
@media (min-width: 720px) { .numerao { grid-template-columns: repeat(4, 1fr); } }

.placar {
  background: var(--branco); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: 16px;
}
.placar .valor {
  font-size: 1.9rem; font-weight: 800; color: var(--marinho-800);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.placar .rotulo {
  font-size: .78rem; color: var(--texto-suave); margin-top: 3px;
}

.barra-item { margin-bottom: 14px; }
.barra-item:last-child { margin-bottom: 0; }
.barra-topo {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px;
}
.barra-topo .nome { font-size: .85rem; font-weight: 600; }
.barra-topo .valor {
  margin-left: auto; font-size: .85rem; font-weight: 700;
  color: var(--marinho-700); font-variant-numeric: tabular-nums;
}

/* =====================================================================
   NOTIFICAÇÕES COM SELEÇÃO
   ===================================================================== */

.barra-notif {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--borda);
  font-size: .8rem; flex-wrap: wrap;
}
.barra-notif .checkbox { font-size: .8rem; margin-right: auto; }
.barra-notif .acao {
  background: none; border: 0; padding: 5px 8px; border-radius: 7px;
  font-family: inherit; font-size: .79rem; font-weight: 650;
  color: var(--azul-claro); cursor: pointer;
}
.barra-notif .acao:hover:not(:disabled) { background: var(--papel); }
.barra-notif .acao.perigo { color: var(--vermelho); }
.barra-notif .acao:disabled { opacity: .4; cursor: not-allowed; }

.notificacao { display: flex; align-items: flex-start; gap: 10px; }
.notificacao > input[type=checkbox] {
  width: 16px; height: 16px; flex: none; margin-top: 3px;
  accent-color: var(--marinho-700); cursor: pointer;
}
.notificacao .texto { flex: 1; min-width: 0; cursor: pointer; }

/* -------------------------------------------------- legenda da foto */

.campo-legenda { margin-top: 8px; }
.campo-legenda input {
  padding: 8px 11px; font-size: .85rem;
}
.campo-legenda label {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 4px;
}

.legenda-vista {
  margin-top: 7px; font-size: .8rem; color: var(--texto-suave);
  text-align: center; font-style: italic; line-height: 1.45;
}

/* ------------------------------------------------- papel timbrado */

/* Cada pasta é um bloco com dois arquivos dentro: o PDF e o modelo em
   Word. Por isso a linha virou coluna, e cada arquivo é uma "fatia". */
.timbrado-linha {
  padding: 16px 0; border-bottom: 1px solid var(--borda);
}
.timbrado-linha:last-child { border-bottom: 0; }

.timbrado-titulo {
  font-weight: 700; font-size: .95rem;
  color: var(--marinho-800); margin-bottom: 10px;
}

.timbrado-fatia {
  display: flex; align-items: center; gap: 13px;
  flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--papel); border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.timbrado-fatia:last-child { margin-bottom: 0; }
.timbrado-fatia .corpo .ajuda {
  display: block; margin-top: 3px; font-style: italic; opacity: .85;
}

.timbrado-fatia .selo-pdf {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 10px;
  background: var(--papel); font-size: 1.2rem;
}
.timbrado-fatia .selo-pdf.tem { background: #e7f6ee; }

.timbrado-fatia .corpo { flex: 1; min-width: 160px; }
.timbrado-fatia .corpo strong { display: block; font-size: .92rem; }
.timbrado-fatia .corpo small  { font-size: .78rem; color: var(--texto-suave); }

.timbrado-fatia .botao { width: auto; padding: 8px 14px; font-size: .84rem; }

/* =====================================================================
   LOGOS DAS CLASSES
   Cores das barras tiradas dos próprios emblemas.
   ===================================================================== */

.card-topo {
  display: flex; align-items: center; gap: 10px;
}
.card-topo img {
  width: 30px; height: 30px; flex: none;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

.card-topo.aventureiros  { background: linear-gradient(100deg, #1f61af, #14447d); }
.card-topo.desbravadores { background: linear-gradient(100deg, #e8291a, #a81c10); }
.card-topo.jovens {
  background: linear-gradient(100deg, #f5cd09, #d2ac05);
  color: #10214a;                       /* amarelo pede texto escuro */
}

/* logo ao lado do nome da classe */

.classe-topo { align-items: center; }

.emblema-classe {
  width: 34px; height: 34px; flex: none;
  object-fit: contain;
}

/* --------------------------------------- cabeçalho do editor e da pasta */

.cabecalho-formulario img.emblema,
.faixa-pasta img.emblema {
  width: 54px; height: 54px; flex: none;
  object-fit: contain;
  background: rgba(255,255,255,.97);
  border-radius: 12px;
  padding: 4px;
}

@media (max-width: 480px) {
  .cabecalho-formulario img.emblema,
  .faixa-pasta img.emblema { width: 44px; height: 44px; }
}

/* emblema na lista dos 5 formulários do editor */

.cartao-formulario .emblema-lista {
  width: 42px; height: 42px; flex: none; object-fit: contain;
}

/* =====================================================================
   CAIXA DE TEXTO LONGO — descrição do candidato
   Justificada e com recuo de parágrafo, igual ao relatório que sai depois.
   ===================================================================== */

.texto-rico {
  position: relative;
  min-height: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--branco);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: .95rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.texto-rico:focus {
  outline: none;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(47,111,208,.16);
}

.texto-rico > * {
  margin: 0;
  text-indent: 1.25cm;
}

.texto-rico.travado {
  background: #f7f9fc;
  color: var(--texto-suave);
  min-height: 0;
}

.texto-rico.vazio::before {
  content: attr(data-vazio);
  position: absolute;
  left: 16px;
  top: 14px;
  color: #9aa6ba;
  pointer-events: none;
}

@media (max-width: 640px) {
  .texto-rico { min-height: 200px; }
  .texto-rico > * { text-indent: 1cm; }
}

/* =====================================================================
   SALVAMENTO AUTOMÁTICO
   ===================================================================== */

.auto-salvar {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: var(--raio-p);
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid transparent;
  box-shadow: var(--sombra);
}

.auto-salvar .ponto {
  width: 9px; height: 9px; border-radius: 50%;
  flex: none; background: currentColor;
}

.auto-salvar.ok       { background: #e7f6ee; color: #0e5c37; border-color: #b7e2cb; }
.auto-salvar.pendente { background: #fff6e0; color: #7a5600; border-color: #f2dca6; }
.auto-salvar.salvando { background: #eaf1fd; color: #123a7a; border-color: #c3d7f6; }
.auto-salvar.erro     { background: #fdecea; color: #8c1c13; border-color: #f5c6c2; }

.auto-salvar.pendente .ponto { animation: pulsa 1.2s ease-in-out infinite; }

@keyframes pulsa { 50% { opacity: .25; } }

.requisito.salvando, .alinea.salvando, .questao.salvando { border-color: var(--azul-claro); }
.requisito.com-erro, .alinea.com-erro, .questao.com-erro { border-color: var(--vermelho); }
.requisito.com-erro [data-estado],
.alinea.com-erro [data-estado],
.questao.com-erro [data-estado] { color: var(--vermelho); font-weight: 700; }

.fecha-editor {
  margin: 22px 0 8px;
  padding: 18px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  text-align: center;
  box-shadow: var(--sombra);
}

.fecha-editor p {
  margin: 0 auto 14px;
  max-width: 460px;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.fecha-editor .botao { width: auto; padding: 12px 30px; }

/* =====================================================================
   EDITOR DA PROVA PDL
   ===================================================================== */

.questao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
}

.questao-topo { display: flex; align-items: flex-start; gap: 8px; }

.questao-topo .ordem {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marinho-800);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.questao-topo textarea {
  flex: 1;
  min-height: 52px;
  resize: vertical;
}

.alternativas { margin: 12px 0 0; display: grid; gap: 8px; }

.alternativa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: #fafbfe;
}

.alternativa.certa { border-color: var(--verde); background: #f0faf5; }

.alternativa input[type="text"] { margin: 0; border: 0; background: transparent; }
.alternativa input[type="text"]:focus { outline: none; }

.marca-certa { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.marca-certa input { margin: 0; accent-color: var(--verde); }

.marca-certa .letra {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e7ecf6;
  color: var(--marinho-800);
  font-weight: 700;
  font-size: .82rem;
}

.alternativa.certa .marca-certa .letra { background: var(--verde); color: #fff; }

.questao-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.questao-rodape .estado {
  margin-right: auto;
  font-size: .78rem;
  color: var(--texto-suave);
}

/* =====================================================================
   PROVA — TELA DO CANDIDATO
   ===================================================================== */

.texto-prova {
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.65;
  text-align: justify;
}

.questao-prova {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--sombra);
}

.questao-prova.respondida { border-left-color: var(--azul-claro); }

.questao-prova h3 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  font-size: .97rem;
  line-height: 1.5;
  font-weight: 600;
}

.questao-prova h3 .ordem {
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marinho-800);
  color: #fff;
  font-size: .82rem;
}

.opcoes { display: grid; gap: 8px; }

.opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  cursor: pointer;
  font-size: .92rem;
  line-height: 1.45;
}

.opcao:hover { background: #f7f9fe; }
.opcao input { margin: 0; accent-color: var(--azul-claro); }
.opcao.marcada { border-color: var(--azul-claro); background: #eef4fd; }

.opcao .letra {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e7ecf6;
  color: var(--marinho-800);
  font-weight: 700;
  font-size: .8rem;
}

.opcao.marcada .letra { background: var(--azul-claro); color: #fff; }

/* -------------------------------------------------------- resultado */

.resultado, .porta-prova { text-align: center; }

.selo-resultado {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 6px;
}

.nota-grande {
  margin: 6px 0 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--marinho-800);
}

.resultado.aprovado .nota-grande { color: var(--verde); }
.resultado.reprovado .nota-grande { color: var(--vermelho); }

.acoes-resultado {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.acoes-resultado .botao { width: auto; padding: 12px 24px; }

/* =====================================================================
   MODELO DE CERTIFICADO — prévia no painel do administrador
   ===================================================================== */

.previa-certificado {
  position: relative;
  margin-top: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  overflow: hidden;
  background: #eef1f6;
  line-height: 0;
}

.previa-certificado img { width: 100%; height: auto; display: block; }

.nome-previa {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  color: #0d1530;
  line-height: 1.1;
  pointer-events: none;
}

.titulo-secao-lista {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--marinho-800);
}

/* =====================================================================
   PROVA PDL NA TELA INICIAL
   Uma linha logo abaixo da pasta de Jovens.
   ===================================================================== */

.linha-prova {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--raio-p);
  background: #f2f5fb;
  border: 1px dashed #c9d5e9;
}

.linha-prova.aprovado {
  background: #f0faf5;
  border: 1px solid #b7e2cb;
}

.selo-prova {
  font-size: .82rem;
  font-weight: 700;
  color: var(--verde);
  margin-right: auto;
}

.selo-prova.pendente { color: var(--texto-suave); font-weight: 600; }

.linha-prova .botao {
  width: auto;
  padding: 7px 13px;
  font-size: .82rem;
  margin: 0;
}

.aguardando-modelo {
  font-size: .76rem;
  color: var(--texto-suave);
  font-style: italic;
}

/* =====================================================================
   FICHA DO PERFIL — o menu que abre no círculo da barra
   ===================================================================== */

.menu-perfil { min-width: 290px; max-width: calc(100vw - 28px); }

.perfil-cartao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 8px;
}

.perfil-foto {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--marinho-700);
  color: #fff;
}

.perfil-foto .conteudo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
}

.perfil-foto .conteudo img { width: 100%; height: 100%; object-fit: cover; }

.perfil-foto .camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dourado);
  border: 2px solid var(--branco);
  font-size: .62rem;
  line-height: 1;
}

.perfil-foto:hover .camera { filter: brightness(1.08); }
.perfil-foto:focus-within { outline: 2px solid var(--azul-claro); outline-offset: 3px; }

.perfil-identidade { min-width: 0; }
.perfil-identidade strong {
  display: block;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--texto);
}
.perfil-identidade small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--texto-suave);
}

.perfil-dados {
  margin: 0 0 8px;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--borda);
  display: grid;
  gap: 7px;
}

.perfil-dados > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.perfil-dados dt {
  flex: none;
  width: 84px;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
}

.perfil-dados dd {
  margin: 0;
  min-width: 0;
  font-size: .84rem;
  color: var(--texto);
  overflow-wrap: anywhere;
}

/* =====================================================================
   ESTILO DE MARCAÇÃO DOS REQUISITOS
   Numerado, tópicos com bolinha, ou livre.
   ===================================================================== */

.escolha-marcador {
  display: grid;
  gap: 4px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: #f3f6fc;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}

.escolha-marcador label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.escolha-marcador select { margin: 0; max-width: 320px; }

.escolha-marcador small {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

/* o selo do requisito muda de forma conforme o estilo */
.requisito-topo .ordem.topico { background: var(--dourado); color: var(--marinho-900); }
.requisito-topo .ordem.livre {
  background: transparent;
  color: var(--borda);
  border: 1px dashed var(--borda);
}

.alinea.topico .letra { background: var(--dourado); color: var(--marinho-900); }

/* a alínea vira um bloco de itens: precisa de espaço para colar a lista */
textarea.texto-alinea {
  flex: 1;
  min-height: 46px;
  max-height: 320px;
  resize: vertical;
  line-height: 1.55;
  font-family: inherit;
}

.alinea.topico textarea.texto-alinea { min-height: 120px; }

/* O título de um requisito ou de uma alínea pode ter várias linhas,
   quando o estilo é de tópicos. Elas precisam sobreviver na tela. */
.titulo-unidade,
.req-grupo .titulo-grupo { white-space: pre-line; }

.req-grupo.topico .corpo-grupo { padding-left: 10px; }

/* botão que marca negrito no editor, no estilo livre */
.botao-negrito {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--branco);
  color: var(--marinho-800);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  align-self: flex-start;
}
.botao-negrito:hover { background: var(--papel); border-color: var(--azul-claro); }

/* no estilo livre o título não é negrito sozinho: só o que foi marcado */
/* No estilo livre o enunciado é um parágrafo inteiro, não um título:
   peso normal (quem decide o negrito é o autor, com os **) e justificado,
   igual ao que sai no PDF e no Word. */
.req-cartao.marca-livre .titulo-unidade,
.req-grupo.livre .titulo-grupo {
  font-weight: 400;
  text-align: justify;
}

.req-cartao .titulo-unidade strong,
.req-grupo .titulo-grupo strong { font-weight: 700; }

/* =====================================================================
   SELEÇÃO DE REQUISITOS PARA GERAR JUNTOS
   ===================================================================== */

.barra-selecao {
  position: sticky;
  top: 8px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 11px 14px;
  border-radius: var(--raio-p);
  background: var(--marinho-800);
  color: #fff;
  box-shadow: var(--sombra-alta);
}

.barra-selecao .conta {
  margin-right: auto;
  font-size: .86rem;
  font-weight: 600;
}

.barra-selecao .botao { width: auto; padding: 8px 14px; font-size: .82rem; margin: 0; }

.barra-selecao .botao-vazado {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.barra-selecao .botao-vazado:hover { background: rgba(255,255,255,.12); }

.marca-req {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  cursor: pointer;
}
.marca-req input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--dourado); }

/* Sem caixinha (requisito terminado não entra no arquivo), mas guardando
   o lugar: sem isso o título pula para a esquerda e a lista desalinha. */
.marca-req.vazia { cursor: default; }

/* =====================================================================
   Especialidade — a ficha que o candidato preenche

   Desenho irmão do bloco das essenciais, com uma diferença: aqui três
   campos são obrigatórios, então o bloco mostra o que ainda falta em vez
   de mostrar a frase se formando.
   ===================================================================== */
.bloco-especialidade {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio-p);
}
.bloco-especialidade.pronto { border-left-color: var(--verde); }

.cabeca-especialidade {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.cabeca-especialidade strong { display: block; font-size: .86rem; color: var(--texto); }
.cabeca-especialidade span   { font-size: .75rem; color: var(--texto-suave); }

.cabeca-especialidade .logo-clube {
  flex: none; width: 34px; height: 34px; object-fit: contain;
}

.obrigatorio { color: var(--vermelho); font-weight: 700; }
.facultativo { font-weight: 400; color: var(--texto-suave); }

.grade-especialidade {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.grade-especialidade > *            { min-width: 0; }
.grade-especialidade .largura-total { grid-column: 1 / -1; }
.grade-especialidade label {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 4px;
}
.grade-especialidade input      { font-size: .88rem; }
.grade-especialidade .dica-campo { margin-top: 4px; }

/* A imagem do distintivo é pequena e quadrada — um distintivo, não uma
   foto de evidência. A caixa acompanha o tamanho dele. */
.bloco-especialidade .distintivo { margin-top: 12px; }
.bloco-especialidade .distintivo > label {
  display: block; font-size: .74rem; font-weight: 600;
  color: var(--texto-suave); margin-bottom: 6px;
}

.caixa-distintivo {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
  background: var(--branco);
  border: 1px dashed var(--borda);
  border-radius: var(--raio-p);
  cursor: pointer;
  overflow: hidden;
}
.caixa-distintivo.somente-leitura { cursor: default; }
.caixa-distintivo img { width: 100%; height: 100%; object-fit: contain; }
.caixa-distintivo .instrucao {
  text-align: center; font-size: .74rem; color: var(--texto-suave);
  line-height: 1.4; padding: 8px;
}
.caixa-distintivo .instrucao .icone { display: block; font-size: 1.5rem; margin-bottom: 4px; }

/* O cartão do editor quando a especialidade está ligada: as outras
   perguntas continuam à vista, mas apagadas — para a pessoa ver POR QUE
   não respondem mais. */
.requisito-grade.com-especialidade select[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* =====================================================================
   O parágrafo automático dentro da caixa de descrição

   Ele não é editável — fica FORA do contenteditable. As duas peças
   dividem a mesma moldura para que, na tela, pareçam uma caixa só: o
   parágrafo é a primeira linha da descrição, e o candidato escreve logo
   abaixo dele.
   ===================================================================== */
.caixa-com-abertura {
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--branco);
  overflow: hidden;
}

/* a moldura acende junto com o cursor, como a caixa sozinha fazia */
.caixa-com-abertura:focus-within {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(47,111,208,.16);
}

.caixa-com-abertura .texto-rico {
  border: 0;
  border-radius: 0;
  min-height: 180px;
}
.caixa-com-abertura .texto-rico:focus { box-shadow: none; }

.abertura-fixa {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--borda);
  border-left: 3px solid var(--dourado);
  background: #f4f7fc;
  font-size: .95rem;
  line-height: 1.7;
  text-align: justify;
  text-indent: 1.25cm;
  color: var(--texto);
  cursor: default;
  /* o texto é da ficha, não da caixa: selecionar aqui só confunde */
  user-select: none;
}

/* sem ficha preenchida, o que está ali é um aviso, não o parágrafo */
.abertura-fixa:not(.tem-frase) {
  color: var(--texto-suave);
  font-style: italic;
  text-indent: 0;
  text-align: left;
}

@media (max-width: 640px) {
  .abertura-fixa { text-indent: 1cm; }
}

/* O atalho para conferir os dados da especialidade. Fica na ponta do
   cabeçalho do bloco e desce para a linha de baixo na tela estreita. */
.link-consulta {
  margin-left: auto;
  flex: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--marinho-600);
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--branco);
  white-space: nowrap;
}
.link-consulta:hover { border-color: var(--azul-claro); }

@media (max-width: 520px) {
  .cabeca-especialidade { flex-wrap: wrap; }
  .link-consulta { margin-left: 0; }
}

/* =====================================================================
   Ajuste de largura da foto

   No relatório a altura é fixa (7 cm) e a largura é o que varia. Foto
   tirada em pé, esticada até a largura da caixa, sai deformada; aqui a
   pessoa estreita a largura até a foto voltar ao formato dela.
   ===================================================================== */

/* os dois botões da caixa da foto, lado a lado no canto */
.acoes-foto {
  position: absolute; right: 7px; bottom: 7px;
  display: flex; gap: 6px;
}

.botao-foto {
  background: rgba(1,21,56,.82); color: #fff;
  border: 0; border-radius: 7px; padding: 6px 11px;
  font-family: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
}
.botao-foto:hover { background: var(--marinho-800); }

/* dentro da dupla de botões eles ficam lado a lado, não colados no canto
   — o canto agora é da .acoes-foto */
.acoes-foto .trocar-foto { position: static; right: auto; bottom: auto; }

/* quanto a foto vai ocupar de largura, quando alguém escolheu */
.selo-largura {
  position: absolute; left: 7px; top: 7px;
  background: rgba(1,21,56,.82); color: #fff;
  border-radius: 999px; padding: 4px 9px;
  font-size: .72rem; font-weight: 600;
}

/* --------------------------------------------------- a janela do ajuste */

.palco-ajuste {
  background: #5b6b85;
  padding: 16px;
  border-radius: var(--raio-p);
}

/* a faixa clara é a largura útil da folha: 16 cm. A foto é desenhada
   dentro dela, na mesma proporção do papel, para a pessoa ver quanto da
   linha ela vai ocupar — e não só se está torta. */
.folha-ajuste {
  background: #fff;
  border-radius: 4px;
  padding: 14px 0;
  display: grid;
  place-items: center;
  min-height: 90px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.folha-ajuste img { display: block; max-width: 100%; }

/* --------------------------------------------- as quatro formas

   Cada botão traz um molde desenhado na proporção da forma, para a
   escolha ser pelos olhos antes de ser pela medida. */
.formas-foto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}

.formas-foto .forma {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 10px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio-p);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.formas-foto .forma:hover { border-color: var(--azul-claro); }

.formas-foto .forma.ativa {
  border-color: var(--marinho-600);
  background: #eef4ff;
  box-shadow: 0 0 0 3px rgba(47,111,208,.14);
}

/* O molde é o retângulo da forma desenhado em escala — a MESMA escala
   para as quatro, senão todas pareceriam do mesmo tamanho e o desenho
   não diria o que mais importa aqui: que a declaração é maior que a foto
   e o certificado é mais largo que todos. 3,5 px por centímetro deixa a
   maior delas em 51 px. */
.formas-foto .moldura {
  height: 50px;
  display: flex;
  align-items: flex-end;
}
.formas-foto .molde {
  display: block;
  width:  calc(var(--l) * 3.5px);
  height: calc(var(--a) * 3.5px);
  background: #dbe5f5;
  border: 1.5px solid var(--marinho-600);
  border-radius: 3px;
}
.formas-foto .forma.ativa .molde { background: var(--marinho-600); }

.formas-foto .forma strong { font-size: .84rem; color: var(--texto); }
.formas-foto .forma small  { font-size: .72rem; color: var(--texto-suave); }
.formas-foto .forma em {
  font-size: .72rem; font-style: normal; color: var(--texto-suave);
  line-height: 1.35;
}