/* ====================================================================
   Lumen - identidade visual
   Tema escuro (navy) com destaque dourado. Titulos e interface usam a
   mesma familia (IBM Plex Sans), titulos em negrito (700).
   ==================================================================== */

:root {
  --cor-fundo: #0b101d;
  --cor-fundo-alt: #121a2c;
  --cor-cartao: #161f34;
  --cor-cartao-borda: #2a3350;
  --cor-texto: #eef1f7;
  --cor-texto-suave: #98a2b8;
  --cor-dourado: #f0c14b;
  --cor-dourado-escuro: #d9a52f;
  --cor-vermelho: #e0655a;
  --cor-vermelho-escuro: #c14f45;
  --cor-sucesso: #4caf82;
  --sombra-cartao: 0 6px 20px rgba(0, 0, 0, 0.35);
  --fonte-titulo: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --fonte-corpo: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cor-texto);
  margin: 0 0 0.4em;
}

a {
  color: var(--cor-dourado);
}

svg.icone {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.15em;
}

/* ---------- Corpo do app: barra lateral + conteudo ---------- */

.corpo-app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
  background-image: url('/images/fundo-paginas.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.barra-lateral {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--cor-fundo-alt);
  border-right: 1px solid var(--cor-cartao-borda);
  padding: 1.1rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.barra-lateral::-webkit-scrollbar {
  display: none;
}

/* Fundo com "ondas" azuis suaves, feito so com gradientes borrados (sem
   imagem), pra dar profundidade sem depender de um arquivo externo. */
.barra-lateral::before {
  content: "";
  position: absolute;
  inset: -15% -40%;
  background:
    radial-gradient(ellipse 55% 30% at 25% 15%, rgba(76, 115, 205, 0.4), transparent 65%),
    radial-gradient(ellipse 60% 32% at 75% 48%, rgba(76, 115, 205, 0.3), transparent 65%),
    radial-gradient(ellipse 60% 34% at 25% 82%, rgba(76, 115, 205, 0.32), transparent 65%);
  filter: blur(35px);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 0;
}

.barra-lateral nav,
.logo-lateral {
  position: relative;
  z-index: 1;
}

.logo-lateral {
  display: flex;
  justify-content: center;
  padding: 0 0.5rem 0.6rem;
}

.logo-lateral img {
  display: block;
  width: 190px;
  height: auto;
}

.barra-lateral nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.divisor-lateral {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 0.45rem 1rem;
  background: var(--cor-cartao-borda);
  border: none;
}

.item-lateral {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 1rem;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-family: var(--fonte-corpo);
  font-size: 0.92rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* O botao "Sair" usa a mesma classe .item-lateral pra ficar identico aos
   links, mas um <button> vem com estilo proprio do navegador por padrao -
   isso reseta pra ele se comportar visualmente como os outros itens. */
.form-sair-lateral {
  margin: 0;
}

.form-sair-lateral .item-lateral {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.item-lateral svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.item-lateral:hover {
  color: var(--cor-texto);
  background: rgba(255, 255, 255, 0.05);
}

.item-lateral.ativo {
  color: #2c1f06;
  background: linear-gradient(120deg, #d9a52f 0%, #f0c14b 50%, #f8dd8a 100%);
  box-shadow: 0 0 22px 5px rgba(240, 193, 75, 0.45);
  font-weight: 600;
}

.item-lateral.ativo svg {
  color: #2c1f06;
}

.item-idioma-lateral {
  margin-bottom: 0.6rem;
}

.item-idioma-lateral summary::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.menu-idioma-lateral {
  left: 1rem;
  right: auto;
  min-width: 170px;
}

@media (max-width: 780px) {
  .corpo-app {
    flex-direction: column;
  }
  .barra-lateral {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-right: none;
    border-bottom: 1px solid var(--cor-cartao-borda);
  }
  .barra-lateral nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .divisor-lateral {
    display: none;
  }
}

.busca-catalogo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  color: var(--cor-texto-suave);
  flex: 1;
  max-width: 340px;
  min-width: 180px;
}

.busca-catalogo:focus-within {
  border-color: var(--cor-dourado);
}

/* ---------- Menu suspenso do usuario ---------- */

.busca-catalogo input {
  background: none;
  border: none;
  outline: none;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  width: 100%;
}

.busca-catalogo input::placeholder {
  color: var(--cor-texto-suave);
}

main {
  flex: 1;
  min-width: 0;
  max-width: 1300px;
  padding: 2.2rem 2.5rem 4rem;
}

.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-texto);
  background: var(--cor-cartao);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.8rem;
}

.link-voltar svg {
  color: var(--cor-dourado);
  transition: transform 0.15s ease;
}

.link-voltar:hover {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
}

.link-voltar:hover svg {
  transform: translateX(-2px);
}

/* ---------- Hero da pagina inicial ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px;
  box-shadow: var(--sombra-cartao);
  margin-bottom: 2.6rem;
  min-height: 340px;
  /* Borda "metalica": um degrade dourado que varia de brilho ao redor do
     card, ficando quase invisivel em alguns trechos (como um metal que
     reflete luz de forma irregular) em vez de uma borda solida uniforme. */
  background:
    linear-gradient(var(--cor-fundo-alt), var(--cor-fundo-alt)) padding-box,
    linear-gradient(
      135deg,
      rgba(240, 193, 75, 0.95) 0%,
      rgba(240, 193, 75, 0.12) 22%,
      rgba(240, 193, 75, 0.04) 45%,
      rgba(240, 193, 75, 0.4) 65%,
      rgba(240, 193, 75, 0.06) 82%,
      rgba(240, 193, 75, 0.85) 100%
    ) border-box;
}

.hero-imagem-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-conteudo {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 520px;
  margin: 0;
  /* O painel cobre a foto por completo do lado esquerdo (encostado nas
     bordas da hero) e esmaece pro lado direito em vez de terminar numa
     linha reta. A transparencia tem que chegar a 0 bem antes do fim da
     caixa, senao sobra um "degrau" visivel exatamente na borda do
     elemento - por isso nao tem borda nem sombra aqui, so o proprio
     degrade cria a forma. Os cantos ficam arredondados de graca pelo
     "overflow: hidden" do .hero pai, que ja tem esse formato. */
  background: linear-gradient(
    100deg,
    rgba(9, 13, 24, 0.96) 40%,
    rgba(9, 13, 24, 0.65) 60%,
    rgba(9, 13, 24, 0.2) 78%,
    rgba(9, 13, 24, 0) 90%
  );
  padding: 2.1rem 4rem 2.1rem 2.2rem;
}

.icone-circulo {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(240, 193, 75, 0.4), rgba(240, 193, 75, 0.06) 72%);
  border: 1px solid rgba(240, 193, 75, 0.5);
  box-shadow: 0 0 14px rgba(240, 193, 75, 0.2);
  color: var(--cor-dourado);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icone-circulo svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Etiqueta dourada reutilizavel acima de titulos de secao (fora do hero). */
.eyebrow-secao {
  color: var(--cor-dourado);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.destaque-dourado {
  color: var(--cor-dourado);
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cor-dourado);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero .eyebrow::after {
  content: "";
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--cor-dourado);
  opacity: 0.6;
}

.hero h1 {
  font-size: 2.4rem;
  margin-bottom: 0.6rem;
}

.hero p {
  color: var(--cor-texto);
  font-size: 1.02rem;
  max-width: 480px;
}

.hero-destaques {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
}

.hero-destaques li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--cor-texto);
  flex-shrink: 0;
}

.hero-destaques svg {
  color: var(--cor-dourado);
}

@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-conteudo {
    max-width: none;
    width: auto;
    /* Em telas estreitas o painel ocupa quase toda a largura, entao o
       degrade de revelar a foto do lado direito nao cabe direito e acaba
       brigando com o texto - fica solido aqui. */
    background: rgba(9, 13, 24, 0.94);
  }
  .hero h1 { font-size: 1.9rem; }
  .hero-destaques {
    flex-wrap: wrap;
  }
}

/* ---------- Telas de autenticacao ---------- */

.auth-tela {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: radial-gradient(circle at 50% 0%, #17203a 0%, var(--cor-fundo) 60%);
}

/* Fundo nitido da tela de login. */
.auth-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.auth-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 13, 24, 0.3);
}

/* O card em si e' translucido e desfocado (efeito vidro fosco), deixando
   o fundo nitido aparecer por tras dele. */
.ficha-auth {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  box-shadow: var(--sombra-cartao);
  border-radius: 10px;
  width: 100%;
  max-width: 400px;
  padding: 2.2rem 2rem;
  position: relative;
  z-index: 1;
}

.seletor-idioma-auth {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
}

.ficha-auth h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.ficha-auth h1 svg {
  color: var(--cor-dourado);
  width: 1.5rem;
  height: 1.5rem;
}

.ficha-auth h1.auth-logo-titulo {
  justify-content: center;
}

.auth-logo {
  height: 6.4rem;
  width: auto;
}

.ficha-auth .subtitulo {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-bottom: 1.6rem;
}

.campo {
  margin-bottom: 1.1rem;
}

.campo label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin-bottom: 0.3rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--cor-texto);
}

.campo textarea {
  resize: vertical;
  min-height: 5rem;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 1px;
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cor-dourado);
  color: #1a1f2e;
  border: none;
  border-radius: 6px;
  padding: 0.65rem 1.3rem;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.2s ease;
}

.botao:hover {
  background: var(--cor-dourado-escuro);
}

/* Efeito "metalico": ao passar o mouse, o botao "pula" pra frente (leve
   elevacao + sombra) e uma faixa clara desliza por cima, como um brilho. */
.botao:not(.secundario)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.9) 48%,
    rgba(255, 255, 255, 0.9) 52%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  transition: background-position 0.7s ease;
  pointer-events: none;
}

.botao:not(.secundario):hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.botao:not(.secundario):hover::before {
  background-position: -50% 0;
}

.botao.tijolo {
  background: var(--cor-vermelho);
  color: #1a1f2e;
}

.botao.tijolo:hover {
  background: var(--cor-vermelho-escuro);
}

.botao.secundario {
  background: transparent;
  color: var(--cor-texto);
  border: 1px solid var(--cor-cartao-borda);
}

.botao.secundario:hover {
  border-color: var(--cor-dourado);
  color: var(--cor-dourado);
}

.botao:disabled {
  opacity: 0.5;
  cursor: default;
}

.botao:disabled:hover {
  transform: none;
  box-shadow: none;
}

.acao-larga {
  width: 100%;
  justify-content: center;
  margin-top: 0.3rem;
}

.erro {
  background: rgba(224, 101, 90, 0.12);
  border: 1px solid var(--cor-vermelho);
  color: #f5a89f;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

.rodape-ficha {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  text-align: center;
}

.link-esqueci-senha {
  background: none;
  border: none;
  padding: 0;
  color: var(--cor-dourado);
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.link-esqueci-senha:hover {
  color: var(--cor-dourado-escuro);
}

/* ---------- Elementos gerais reutilizaveis ---------- */

.cartao {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  padding: 1.5rem 1.6rem;
}

/* ---------- Minha conta: cards lado a lado + foto de perfil ---------- */

.contas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.contas-coluna {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.avatar-editor {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar-preview {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cor-cartao-borda);
  flex-shrink: 0;
}

.avatar-preview-vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

.avatar-preview-vazio .icone {
  width: 1.8rem;
  height: 1.8rem;
}

.dropzone-avatar {
  flex: 1;
  min-width: 0;
  min-height: auto;
  padding: 0.8rem 1rem;
}

.avatar-preview-pequeno {
  width: 2.3rem;
  height: 2.3rem;
}

.avatar-preview-pequeno .icone {
  width: 1.1rem;
  height: 1.1rem;
}

.avatar-preview-grande {
  width: 5.2rem;
  height: 5.2rem;
}

.avatar-preview-grande .icone {
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- Forum academico ---------- */

.autor-info {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  border-radius: 6px;
}

.autor-info:hover .autor-info-texto strong {
  color: var(--cor-dourado);
}

.autor-info-texto {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
}

.autor-info-texto strong {
  color: var(--cor-texto);
}

.autor-info-area {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
}

.lista-topicos-forum {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.topico-forum-card {
  display: block;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.topico-forum-card:hover {
  border-color: rgba(240, 193, 75, 0.4);
  transform: translateY(-2px);
}

.topico-forum-card h3 {
  margin: 0.8rem 0 0.4rem;
  color: var(--cor-texto);
}

.topico-forum-card .resumo {
  color: var(--cor-texto-suave);
  margin: 0 0 0.8rem;
}

.topico-forum-meta {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
}

.topico-forum-mensagem {
  color: var(--cor-texto);
  line-height: 1.6;
  white-space: pre-wrap;
}

.lista-anexos-forum {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.lista-respostas-forum {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.resposta-forum {
  scroll-margin-top: 100px;
}

.menu-editar-forum {
  width: 340px;
  max-width: 85vw;
  padding: 1rem;
}

.menu-editar-forum form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.selo {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--cor-dourado);
  border: 1px solid var(--cor-dourado);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
}

.selo.em-breve {
  color: var(--cor-texto-suave);
  border-color: var(--cor-cartao-borda);
}

/* ---------- Modulos da pagina inicial (estilo "linha com foto") ---------- */

.secao-modulos-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.titulo-com-icone {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.titulo-com-icone .icone-caixa {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(240, 193, 75, 0.4), rgba(240, 193, 75, 0.06) 72%);
  border: 1px solid rgba(240, 193, 75, 0.5);
  box-shadow: 0 0 14px rgba(240, 193, 75, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-dourado);
  flex-shrink: 0;
}

.titulo-com-icone .icone-caixa svg {
  width: 1.3rem;
  height: 1.3rem;
}

.titulo-com-icone h2 {
  margin-bottom: 0.2rem;
}

.titulo-com-icone p {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.controles-modulos {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.busca-modulos {
  min-width: 220px;
}

.linha-modulo {
  position: relative;
  display: grid;
  /* A coluna da checklist tem largura fixa (em vez de "auto") de proposito:
     cada card e um grid independente, entao com "auto" a largura variava
     conforme o texto mais comprido daquele card especifico, e a linha
     divisoria/checkmarks acabavam em posicoes diferentes de card pra card. */
  grid-template-columns: 170px 1fr 230px auto;
  gap: 1.6rem;
  align-items: center;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(240, 193, 75, 0.16);
  border-radius: 12px;
  box-shadow: var(--sombra-cartao), 0 0 24px rgba(240, 193, 75, 0.05);
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.2rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.linha-modulo:not(.em-breve):hover {
  border-color: rgba(240, 193, 75, 0.4);
  transform: translateY(-2px);
}

.linha-modulo .miniatura-caixa {
  position: relative;
}

/* Cadeado sobreposto na foto de um modulo "em breve" - deixa claro que o
   conteudo ali ja existe (tem foto de verdade) mas ainda esta bloqueado. */
.miniatura-bloqueio {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(11, 16, 29, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-texto-suave);
}

.miniatura-bloqueio svg {
  width: 1.8rem;
  height: 1.8rem;
}

.linha-modulo .miniatura {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--cor-cartao-borda);
}

.linha-modulo .miniatura.sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

.linha-modulo .miniatura.sem-foto svg {
  width: 2.2rem;
  height: 2.2rem;
}

.selo-flutuante {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: var(--cor-dourado);
  color: #1a1f2e;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.selo-flutuante.em-breve {
  background: var(--cor-texto-suave);
}

.eyebrow-modulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cor-dourado);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.35rem;
}

.eyebrow-modulo svg {
  width: 1rem;
  height: 1rem;
}

.linha-modulo h3 {
  margin-bottom: 0.3rem;
}

.linha-modulo p.descricao {
  color: var(--cor-texto-suave);
  font-size: 0.92rem;
  margin: 0 0 0.9rem;
  max-width: 46ch;
}

.linha-modulo .lista-recursos {
  /* Sem isso, a checklist fica centralizada verticalmente dentro da propria
     linha - como a altura de cada card varia um pouco (descricao com mais
     ou menos linhas, por exemplo), os checks acabavam em alturas diferentes
     de card pra card. Alinhando pelo topo, eles sempre comecam no mesmo
     lugar, alinhados com os de cima. */
  align-self: start;
  list-style: none;
  margin: 0;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  border-left: 1px solid var(--cor-cartao-borda);
}

.linha-modulo .lista-recursos li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}

.linha-modulo .lista-recursos .icone-check {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--cor-sucesso);
  color: var(--cor-fundo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.linha-modulo .lista-recursos .icone-check svg {
  width: 0.62rem;
  height: 0.62rem;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

.linha-modulo .seta-linha {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--cor-texto-suave);
}

.linha-modulo.em-breve {
  opacity: 0.6;
}

@media (max-width: 900px) {
  .linha-modulo {
    grid-template-columns: 1fr;
  }
  .linha-modulo .seta-linha {
    display: none;
  }
  .linha-modulo .lista-recursos {
    border-left: none;
    padding-left: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
}

/* ---------- Modulo de busca de artigos ---------- */

.busca-form {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.busca-form input {
  flex: 1;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
}

.busca-form input:focus {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 1px;
}

.barra-carregamento-busca {
  height: 4px;
  border-radius: 999px;
  background: var(--cor-cartao-borda);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.barra-carregamento-busca-preenchimento {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cor-dourado-escuro), var(--cor-dourado));
  transition: width 0.2s ease-out;
}

/* Enquanto espera a resposta, a barra anda devagar ate quase o fim sozinha -
   nao sabemos quanto vai demorar de verdade (pode levar varias tentativas
   por causa do limite de requisicoes da API), entao ela so "sugere"
   progresso em vez de refletir um valor exato. Quando a resposta chega de
   verdade (sucesso ou erro final), o JS pula pra 100% rapido e some. */
.barra-carregamento-busca-preenchimento.carregando {
  transition: width 7s cubic-bezier(0.15, 0.85, 0.3, 1);
}

.aviso-busca {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
  margin: -1rem 0 1.5rem;
}

.aviso-busca.erro-texto {
  color: #f5a89f;
}

/* ---------- Filtros da busca (barra lateral) ---------- */

.busca-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 820px) {
  .busca-layout {
    grid-template-columns: 1fr;
  }
}

.filtros-busca {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  padding: 1.2rem;
  position: sticky;
  top: 1.5rem;
}

.filtros-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.filtros-cabecalho h3 {
  margin: 0;
  font-size: 1.05rem;
}

.link-limpar {
  background: none;
  border: none;
  color: var(--cor-dourado);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
}

.link-limpar:hover {
  text-decoration: underline;
}

.filtro-grupo {
  margin-bottom: 1.3rem;
}

.filtro-grupo h4 {
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-texto-suave);
  margin: 0 0 0.6rem;
}

.filtro-grupo label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  margin-bottom: 0.65rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
  transition: color 0.15s ease;
}

.filtro-grupo label:hover {
  color: var(--cor-texto);
}

/* Checkbox customizado (o padrao do navegador nao combina com o tema escuro) */
.filtro-tipo {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  border: 1.5px solid var(--cor-cartao-borda);
  border-radius: 4px;
  background: var(--cor-fundo);
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filtro-tipo:hover {
  border-color: var(--cor-dourado);
}

.filtro-tipo:checked {
  background: var(--cor-dourado);
  border-color: var(--cor-dourado);
}

.filtro-tipo:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #1a1f2e;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filtro-tipo:focus-visible {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 2px;
}

.filtro-ano-intervalo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-texto-suave);
}

.filtro-ano-intervalo input {
  width: 0;
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
}

.resultados-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.resultados-cabecalho .contagem {
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.resultados-controles {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.controle-ordenar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.controle-ordenar select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
}

.alternar-visual {
  display: flex;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  overflow: hidden;
}

.botao-visual {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--cor-texto-suave);
  border: none;
  padding: 0.4rem 0.8rem;
  font-family: var(--fonte-corpo);
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
}

.botao-visual.ativo {
  background: var(--cor-dourado);
  color: #1a1f2e;
  font-weight: 600;
}

/* Modo lista: cada resultado vira uma linha horizontal em vez de um cartao. */
.grade-fichas.visual-lista {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.grade-fichas.visual-lista .ficha-artigo {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr auto;
  grid-template-areas:
    "cabecalho resumo   acoespdf"
    "autores   resumo   acoespdf"
    "veiculo   resumo   acoes"
    "link      resumo   acoes";
  gap: 0.3rem 1.5rem;
  border-top: none;
  border-left: 3px solid var(--cor-dourado);
  padding: 1rem 1.2rem;
}

.grade-fichas.visual-lista .ficha-artigo.ja-salva {
  border-left-color: var(--cor-sucesso);
}

.grade-fichas.visual-lista .ficha-artigo .cabecalho-ficha {
  grid-area: cabecalho;
}
.grade-fichas.visual-lista .ficha-artigo .autores {
  grid-area: autores;
}
.grade-fichas.visual-lista .ficha-artigo .veiculo {
  grid-area: veiculo;
}
.grade-fichas.visual-lista .ficha-artigo .resumo {
  grid-area: resumo;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.grade-fichas.visual-lista .ficha-artigo .link-artigo {
  grid-area: link;
}
.grade-fichas.visual-lista .ficha-artigo .acoes-pdf {
  grid-area: acoespdf;
  flex-direction: column;
}
.grade-fichas.visual-lista .ficha-artigo .acoes {
  grid-area: acoes;
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
}

@media (max-width: 720px) {
  .grade-fichas.visual-lista .ficha-artigo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "cabecalho"
      "autores"
      "veiculo"
      "resumo"
      "link"
      "acoespdf"
      "acoes";
  }
}

section.secao {
  margin-bottom: 3rem;
}

section.secao > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--cor-cartao-borda);
  padding-bottom: 0.4rem;
  margin-bottom: 1.2rem;
}

section.secao > h2 .contagem {
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  font-weight: 500;
}

.grade-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.1rem;
}

.ficha-artigo {
  position: relative;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-top: 3px solid var(--cor-dourado);
  border-radius: 8px;
  box-shadow: var(--sombra-cartao);
  padding: 1.1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ficha-artigo.ja-salva {
  border-top-color: var(--cor-sucesso);
}

.ficha-artigo .cabecalho-ficha {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.ficha-artigo h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}

.ficha-artigo .ano {
  flex-shrink: 0;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  color: var(--cor-dourado);
  border: 1px solid var(--cor-dourado);
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
}

.ficha-artigo .autores {
  font-size: 0.87rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.ficha-artigo .veiculo {
  font-size: 0.82rem;
  color: var(--cor-dourado);
}

.ficha-artigo .resumo {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--cor-texto);
  border-top: 1px dashed var(--cor-cartao-borda);
  padding-top: 0.5rem;
  margin-top: 0.2rem;
}

.ficha-artigo .link-artigo {
  font-size: 0.85rem;
}

.ficha-artigo .acoes-pdf {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ficha-artigo .acoes-pdf .botao {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
  gap: 0.35rem;
}

.ficha-artigo .acoes {
  display: flex;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.ficha-artigo .acoes .botao {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.ficha-artigo .marca-salvo {
  font-size: 0.82rem;
  color: var(--cor-sucesso);
  font-weight: 600;
}

.ficha-artigo form.remover {
  margin: 0;
}

.lista-vazia {
  color: var(--cor-texto-suave);
  font-style: italic;
}

.acoes-painel {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.acoes-painel a {
  font-size: 0.85rem;
  text-decoration: none;
}

.acoes-painel a:hover {
  text-decoration: underline;
}

/* ---------- Modulo de leitura de PDF ---------- */

/* Visor mostra a pagina atual do PDF renderizada (canvas), com uma camada de
   texto invisivel por cima pra permitir selecionar/buscar. */
.visor-texto {
  background: var(--cor-fundo-alt);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.pagina-pdf {
  position: relative;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.pagina-pdf canvas {
  display: block;
}

.navegacao-paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.navegacao-paginas button:disabled {
  opacity: 0.4;
  cursor: default;
}

.popup-marcar {
  position: absolute;
  z-index: 50;
}

.popup-marcar .botao {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  white-space: nowrap;
}

/* ---------- Recorte de imagem (marcar figuras/graficos do PDF) ---------- */

.visor-texto-wrapper {
  position: relative;
}

.botao-recorte-flutuante {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 15;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}

.visor-texto.modo-recorte .pagina-pdf {
  cursor: crosshair;
}

.visor-texto.modo-recorte .textLayer {
  user-select: none;
}

.retangulo-recorte {
  position: absolute;
  border: 2px dashed var(--cor-dourado);
  background: rgba(240, 193, 75, 0.15);
  pointer-events: none;
  z-index: 10;
}

.popup-recorte {
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
  padding: 0.9rem;
  width: 260px;
}

.popup-recorte img {
  display: block;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid var(--cor-cartao-borda);
  background: #fff;
}

.popup-recorte textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  resize: vertical;
}

.popup-recorte textarea:focus {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 1px;
}

.popup-recorte-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Camada de texto do PDF.js: spans invisiveis posicionados exatamente sobre
   o texto desenhado no canvas, so pra permitir selecionar/buscar com o mouse.
   Fica sobre a pagina branca do PDF, entao as cores aqui nao seguem o tema
   escuro do resto do site. */
.textLayer {
  position: absolute;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-align: initial;
  transform-origin: 0 0;
}

.textLayer span,
.textLayer br {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer ::selection {
  background: rgba(240, 193, 75, 0.45);
}

.textLayer span.linha-encontrada {
  background: rgba(240, 193, 75, 0.55);
  border-radius: 2px;
}

.marcacao-pdf-vermelha {
  position: absolute;
  background: rgba(220, 38, 38, 0.35);
  border-radius: 2px;
  pointer-events: none;
  transition: background-color 0.3s ease;
}

.marcacao-pdf-vermelha.marcacao-pdf-pulsando {
  background: rgba(220, 38, 38, 0.7);
}

.destaque-item-clicavel {
  cursor: pointer;
}

.destaque-item-clicavel:hover {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.45);
}

.lista-destaques {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.destaque-item {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-left: 3px solid var(--cor-dourado);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.destaque-item p {
  margin: 0;
  flex: 1;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--cor-texto);
}

.destaque-item form {
  margin: 0;
  flex-shrink: 0;
}

.destaque-item-imagem {
  flex-direction: column;
  align-items: stretch;
}

.destaque-item-imagem img {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.destaque-item-imagem form {
  align-self: flex-end;
}

.legenda-recorte-item {
  margin: 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

/* ---------- Cards de "Meus documentos" (estilo biblioteca) ---------- */

.documentos-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.documentos-cabecalho h2 {
  border-bottom: none;
  margin-bottom: 0.2rem;
  padding-bottom: 0;
}

.subtitulo-documentos {
  color: var(--cor-texto-suave);
  font-size: 0.88rem;
  margin: 0;
}

.documentos-controles {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.busca-documentos-caixa {
  max-width: 220px;
  min-width: 160px;
}

.controle-ordenar-select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-cartao);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
}

.grade-documentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}

.ficha-documento {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-top: 3px solid var(--cor-dourado);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Sem isso, um titulo comprido sem espacos (comum em nomes de arquivo
     baixados) nao quebra a linha e vaza pra cima dos cards vizinhos, ja
     que itens de grid tem largura minima automatica por padrao. */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ficha-documento-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.ficha-documento-icone {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-dourado);
}

.botao-trechos-card {
  flex-shrink: 0;
  max-width: 65%;
  padding: 0.4rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  gap: 0.35rem;
}

.botao-trechos-card svg {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
}

.ficha-documento-icone svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Emblema "PDF" vermelho no formato de folha com canto dobrado, mais facil
   de reconhecer de relance que um icone generico de arquivo. */
.ficha-documento-icone-pdf {
  position: relative;
  background: var(--cor-vermelho);
  border: none;
  clip-path: polygon(0 0, 66% 0, 100% 34%, 100% 100%, 0 100%);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0.3rem;
}

.ficha-documento-icone-pdf::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34%;
  height: 34%;
  background: var(--cor-vermelho-escuro);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.ficha-documento h3 {
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.3;
}

.ficha-documento .acoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.7rem;
}

.ficha-documento .acoes .botao {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}

.ficha-documento .acoes form {
  margin: 0;
}

/* Documentos: Visualizar (com texto) + Baixar/Remover (so icone), tudo na
   mesma linha, sem depender de o card ser muito largo. */
.acoes-documento {
  flex-wrap: nowrap;
}

.acoes-documento [data-acao="visualizar-documento"] {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.botao-icone {
  padding: 0.5rem !important;
  flex-shrink: 0;
}

.botao-icone .icone {
  margin: 0;
}

.botao-perigo:hover {
  border-color: var(--cor-vermelho) !important;
  color: var(--cor-vermelho) !important;
}

/* ---------- Zona de arrastar/escolher arquivo (envio de PDF) ---------- */

.form-upload-grade {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.campo-arquivo {
  grid-row: span 1;
}

.campo-botao-upload {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 820px) {
  .form-upload-grade {
    grid-template-columns: 1fr;
  }
}

.dropzone-arquivo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  border: 2px dashed var(--cor-cartao-borda);
  border-radius: 8px;
  padding: 1.3rem 1rem;
  cursor: pointer;
  color: var(--cor-texto-suave);
  background: var(--cor-fundo);
  transition: border-color 0.15s ease, background-color 0.15s ease;
  min-height: 96px;
  box-sizing: border-box;
}

.dropzone-arquivo:hover,
.dropzone-arquivo.arrastando {
  border-color: var(--cor-dourado);
  background: rgba(240, 193, 75, 0.06);
}

.dropzone-arquivo svg {
  color: var(--cor-dourado);
  width: 1.6rem;
  height: 1.6rem;
}

.dropzone-arquivo span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dropzone-arquivo strong {
  color: var(--cor-texto);
  font-size: 0.9rem;
}

.dropzone-arquivo small {
  font-size: 0.78rem;
}

.dropzone-arquivo input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Modal de pre-visualizacao de PDF (Artigos/Biblioteca) ---------- */

.modal-pdf {
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.modal-pdf-fundo {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 12, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-pdf-caixa {
  position: relative;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  width: min(880px, 100%);
  height: min(88vh, 1000px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--sombra-cartao);
}

.modal-pdf-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--cor-cartao-borda);
  color: var(--cor-texto);
}

.modal-pdf-corpo {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--cor-fundo-alt);
  text-align: center;
}

canvas.pagina-pdf {
  display: block;
}

/* ---------- Modal de confirmacao (remover documento/trecho) ---------- */

.modal-confirmar-caixa {
  position: relative;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  width: min(420px, 100%);
  padding: 2rem 1.8rem 1.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.modal-confirmar-icone {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--cor-vermelho);
}

#modal-confirmar-mensagem {
  color: var(--cor-texto);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0;
}

.modal-confirmar-acoes {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.4rem;
}

/* ---------- Modal de recuperacao de senha (login) ---------- */

.modal-recuperar-caixa {
  position: relative;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  width: min(400px, 100%);
  padding: 2rem 1.8rem;
  text-align: left;
}

.modal-recuperar-caixa h3 {
  margin: 0 0 1rem;
  color: var(--cor-texto);
}

.modal-recuperar-caixa .aviso-busca {
  margin: 0 0 1rem;
}

.recuperar-pergunta-texto {
  color: var(--cor-texto);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

/* ---------- Modal de compartilhar biblioteca ---------- */

.modal-compartilhar-caixa {
  position: relative;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  width: min(400px, 100%);
  padding: 2rem 1.8rem;
  text-align: left;
}

.modal-compartilhar-caixa h3 {
  margin: 0 0 1rem;
  color: var(--cor-texto);
}

.modal-compartilhar-caixa .aviso-busca {
  margin: 0 0 1rem;
}

/* ---------- Modal de perfil publico (forum / network) ---------- */

.modal-perfil-caixa {
  position: relative;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  box-shadow: var(--sombra-cartao);
  width: min(420px, 100%);
  padding: 2rem 1.8rem;
  text-align: left;
}

.perfil-cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.perfil-cabecalho h3 {
  margin: 0;
  color: var(--cor-texto);
}

.perfil-detalhes {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0 0 1.3rem;
}

.perfil-detalhe-item dt {
  font-size: 0.78rem;
  color: var(--cor-texto-suave);
  margin: 0 0 0.15rem;
}

.perfil-detalhe-item dd {
  font-size: 0.92rem;
  color: var(--cor-texto);
  margin: 0;
  white-space: pre-wrap;
}

.perfil-acoes {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* ---------- Network (amigos e solicitacoes) ---------- */

.lista-solicitacoes-amizade {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.solicitacao-amizade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.solicitacao-amizade-card .acoes {
  display: flex;
  gap: 0.6rem;
}

.grade-amigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}

.ficha-amigo {
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-top: 3px solid var(--cor-dourado);
  border-radius: 8px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.ficha-amigo .perfil-cabecalho {
  margin-bottom: 0.4rem;
}

.ficha-amigo .perfil-cabecalho h3 {
  font-size: 1.05rem;
}

.ficha-amigo .perfil-detalhes {
  flex: 1;
  margin-bottom: 1rem;
}

/* ---------- Mensagens privadas ---------- */

.lista-mensagens-conversa {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: 60vh;
  overflow-y: auto;
}

.mensagem-item {
  max-width: 70%;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--cor-cartao-borda);
}

.mensagem-item p {
  margin: 0;
  color: var(--cor-texto);
  white-space: pre-wrap;
}

.mensagem-data {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: var(--cor-texto-suave);
}

.mensagem-recebida {
  align-self: flex-start;
  background: var(--cor-fundo);
}

.mensagem-enviada {
  align-self: flex-end;
  background: rgba(240, 193, 75, 0.1);
  border-color: rgba(240, 193, 75, 0.4);
}

.form-enviar-mensagem {
  display: flex;
  gap: 0.8rem;
  align-items: flex-end;
}

.form-enviar-mensagem textarea {
  flex: 1;
}

/* ---------- Modulo de codificacao qualitativa ---------- */

.linha-topo-codificacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.linha-topo-codificacao .link-voltar {
  margin-bottom: 0;
}

.lista-documentos-codificar {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.documento-codificar-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.documento-codificar-card:hover {
  border-color: rgba(240, 193, 75, 0.5);
  transform: translateY(-2px);
}

.documento-codificar-icone {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 8px;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cor-dourado);
  flex-shrink: 0;
}

.documento-codificar-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.documento-codificar-info strong {
  color: var(--cor-texto);
  font-size: 0.98rem;
}

.documento-codificar-info span {
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
}

.form-novo-codigo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0 1.4rem;
}

.form-novo-codigo input[type="text"] {
  flex: 1;
  min-width: 220px;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.95rem;
}

.form-novo-codigo input[type="text"]:focus {
  outline: 2px solid var(--cor-dourado);
  outline-offset: 1px;
}

.paleta-cores {
  display: flex;
  gap: 0.5rem;
}

.swatch-cor-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--cor-swatch);
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.swatch-cor-label input[type="radio"]:checked {
  border-color: var(--cor-texto);
  transform: scale(1.12);
}

.lista-codigos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.chip-codigo-filtro {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--cor-cartao-borda);
  color: var(--cor-texto-suave);
  text-decoration: none;
  font-size: 0.85rem;
}

.chip-codigo-filtro:hover {
  color: var(--cor-texto);
  border-color: var(--cor-dourado);
}

.chip-codigo-filtro.ativo {
  background: var(--cor-dourado);
  color: #1a1f2e;
  border-color: var(--cor-dourado);
  font-weight: 600;
}

.chip-codigo {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 999px;
  padding: 0.25rem 0.3rem 0.25rem 0.9rem;
}

.chip-codigo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cor-texto);
  text-decoration: none;
  font-size: 0.85rem;
}

.chip-codigo-link.ativo {
  color: var(--cor-dourado);
  font-weight: 600;
}

.chip-codigo-ponto {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-codigo-contagem {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
}

.chip-codigo-link.ativo .chip-codigo-contagem {
  color: var(--cor-dourado);
}

.chip-codigo form {
  margin: 0;
}

.chip-codigo-remover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 0;
}

.chip-codigo-remover svg {
  width: 0.75rem;
  height: 0.75rem;
}

.chip-codigo-remover:hover {
  background: rgba(224, 101, 90, 0.15);
  color: var(--cor-vermelho);
}

.lista-trechos-codificar {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.trecho-codificar {
  position: relative;
  background: rgba(22, 31, 52, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--cor-cartao-borda);
  border-left: 3px solid var(--cor-dourado);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  /* Quando a pagina volta com #trecho-ID (depois de marcar/desmarcar um
     codigo), isso evita que o card fique escondido atras do cabecalho fixo. */
  scroll-margin-top: 110px;
}

.trecho-codificar-texto {
  margin: 0 0 0.4rem;
  font-family: var(--fonte-titulo);
  font-style: italic;
  color: var(--cor-texto);
  line-height: 1.5;
}

.trecho-codificar-imagem {
  display: block;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 0.5rem;
}

.trecho-codificar-legenda {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.trecho-codificar-origem {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.trecho-codificar-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.trecho-codificar-codigos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip-codigo-mini-form {
  margin: 0;
}

.chip-codigo-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.76rem;
  font-weight: 600;
}

.chip-codigo-mini-remover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.chip-codigo-mini-remover:hover {
  background: rgba(255, 255, 255, 0.28);
}

.trecho-sem-codigo {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.seletor-codigos {
  position: relative;
}

/* Sem isso, o menu de codigos de um card fica visualmente atras do card
   seguinte (cada .trecho-codificar cria seu proprio contexto de empilhamento
   por causa do backdrop-filter, entao z-index sozinho no menu nao basta). */
.trecho-codificar:has(.seletor-codigos[open]) {
  z-index: 5;
}

.seletor-codigos summary {
  list-style: none;
  cursor: pointer;
}

.seletor-codigos summary::-webkit-details-marker {
  display: none;
}

.menu-codigos {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 8px;
  box-shadow: var(--sombra-cartao);
  padding: 0.4rem;
  z-index: 20;
}

.menu-codigos form {
  margin: 0;
}

.item-menu-codigo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.item-menu-codigo:hover {
  background: var(--cor-cartao);
}

.item-menu-codigo.marcado {
  color: var(--cor-dourado);
  font-weight: 600;
}

.icone-check-menu {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: auto;
  color: var(--cor-sucesso);
  flex-shrink: 0;
}

/* ---------- Notificacoes (sino na sidebar) ---------- */

.item-notificacoes-lateral {
  position: relative;
}

.badge-notificacao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--cor-vermelho);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: auto;
}

.menu-notificacoes {
  left: 0;
  right: auto;
  width: 210px;
  max-width: 80vw;
}

.item-notificacao {
  white-space: normal;
  line-height: 1.4;
}

.item-notificacao.nao-lida {
  color: var(--cor-dourado);
  font-weight: 600;
}

/* ---------- Painel administrativo ---------- */

.cartao-estatistica {
  display: inline-flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 220px;
}

.cartao-estatistica-numero {
  font-family: var(--fonte-titulo);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--cor-dourado);
  line-height: 1;
}

.cartao-estatistica-legenda {
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
}

.tabela-wrapper {
  overflow-x: auto;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  margin-top: 1rem;
}

.tabela-admin {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabela-admin th,
.tabela-admin td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--cor-cartao-borda);
  white-space: nowrap;
}

.tabela-admin th {
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--cor-fundo-alt);
}

.tabela-admin tbody tr:last-child td {
  border-bottom: none;
}

.tabela-admin-acoes {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-end;
}

.tabela-admin-acoes form {
  margin: 0;
}

.menu-senha-admin form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.3rem;
}

.menu-senha-admin input {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
}

/* ---------- Login em pagina cheia (foto de fundo unica, cabecalho fixo,
   hero a esquerda + card flutuante a direita, sem divisao diagonal) ---------- */

.login-full {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.login-full-fundo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 25% center;
  z-index: 0;
}

.login-full-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 26, 57, 0.95) 0%, rgba(6, 26, 57, 0) 20%),
    linear-gradient(0deg, rgba(6, 26, 57, 0.95) 0%, rgba(6, 26, 57, 0) 20%),
    linear-gradient(100deg, rgba(6, 26, 57, 0.82) 30%, rgba(6, 26, 57, 0.45) 65%, rgba(6, 26, 57, 0.2) 100%);
}

.login-full-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1.2rem 3rem;
}

.login-full-nav-logo {
  position: absolute;
  left: 42%;
  top: 16px;
  transform: translateX(-50%);
}

.login-full-nav-logo img {
  height: 13.2rem;
  width: auto;
  display: block;
}

.login-full-nav-acoes {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.login-idioma-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(9, 13, 24, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
}

.login-idioma-pill > .icone {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--cor-texto-suave);
  flex-shrink: 0;
}

.login-idioma-pill .seletor-idioma.alternar-visual {
  border: none;
  border-radius: 0;
  overflow: visible;
  gap: 0.2rem;
}

.login-idioma-pill .botao-visual {
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

.login-full-conteudo {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem 3rem 3rem;
}

.login-full-hero {
  max-width: 620px;
}

.login-full-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cor-dourado);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.login-full-hero .eyebrow::after {
  content: "";
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--cor-dourado);
  opacity: 0.6;
}

.login-full-hero h1 {
  font-size: 2.4rem;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.login-full-hero-subtitulo {
  color: var(--cor-texto);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.4rem;
}

.login-hero-cta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2.2rem;
}

.login-hero-cta .botao {
  width: auto;
}

.login-full-rodape {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  width: 100%;
  margin: 0 auto;
  padding: 0 3rem 2.4rem;
}

.login-full-destaques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.6rem;
}

.login-full-destaques li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  flex: 1;
  min-width: 0;
  padding-left: 1.6rem;
  border-left: 1px solid var(--cor-cartao-borda);
}

.login-full-destaques li:first-child {
  padding-left: 0;
  border-left: none;
}

.login-full-destaques strong {
  display: block;
  color: var(--cor-texto);
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}

.login-full-destaques small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
  line-height: 1.4;
}

.login-full-card {
  flex-shrink: 0;
}

.login-ficha-flutuante {
  width: 400px;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.55), 0 10px 25px rgba(0, 0, 0, 0.35);
}

.login-ficha-flutuante h2 {
  margin: 0 0 0.3rem;
}

.login-full-card-subtitulo {
  font-family: var(--fonte-corpo);
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin: 0 0 1.4rem;
}

.input-com-icone {
  position: relative;
  display: flex;
  align-items: center;
}

.input-com-icone input {
  padding-left: 2.4rem;
}

.icone-input {
  position: absolute;
  left: 0.75rem;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--cor-texto-suave);
  pointer-events: none;
}

.botao-mostrar-senha {
  position: absolute;
  right: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0.3rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.botao-mostrar-senha .icone {
  width: 1.1rem;
  height: 1.1rem;
}

.botao-mostrar-senha.ativo {
  color: var(--cor-dourado);
}

.login-full-linha-opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -0.4rem 0 1.2rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.login-lembrar-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.login-lembrar-checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--cor-dourado);
  cursor: pointer;
}

@media (max-width: 980px) {
  .login-full-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem 1.5rem;
  }
  .login-full-nav-logo {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .login-full-nav-logo img {
    height: 4.5rem;
  }
  .login-full-conteudo {
    flex-direction: column;
    padding: 1.5rem 1.5rem 3rem;
    align-items: stretch;
  }
  .login-full-hero {
    max-width: none;
  }
  .login-full-hero h1 {
    font-size: 1.8rem;
  }
  .login-hero-cta {
    flex-direction: column;
  }
  .login-hero-cta .botao {
    width: 100%;
  }
  .login-ficha-flutuante {
    width: 100%;
  }
  .login-full-rodape {
    padding: 0 1.5rem 2rem;
  }
  .login-full-destaques {
    flex-wrap: wrap;
  }
  .login-full-destaques li {
    flex: 1 1 100%;
    padding-left: 0;
    padding-top: 1rem;
    border-left: none;
    border-top: 1px solid var(--cor-cartao-borda);
  }
  .login-full-destaques li:first-child {
    padding-top: 0;
    border-top: none;
  }
}

/* ---------- Modulo de Formularios ---------- */

.selo-status-formulario {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.6rem;
  vertical-align: middle;
}

.selo-status-formulario.aberto {
  background: rgba(76, 175, 130, 0.15);
  color: var(--cor-sucesso);
}

.selo-status-formulario.encerrado {
  background: rgba(152, 162, 184, 0.15);
  color: var(--cor-texto-suave);
}

.subtitulo-secao-construtor {
  margin: 1.6rem 0 0.8rem;
}

.pergunta-construtor {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.pergunta-construtor-topo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.pergunta-construtor-topo .pergunta-texto {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--cor-texto);
}

.pergunta-construtor-topo .pergunta-tipo {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
  color: var(--cor-texto);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .pergunta-construtor-topo {
    flex-wrap: wrap;
  }
  .pergunta-construtor-topo .pergunta-texto {
    flex: 1 1 100%;
  }
}

.pergunta-construtor-opcoes {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--cor-cartao-borda);
}

.lista-opcoes-construtor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.opcao-construtor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.opcao-construtor .opcao-texto {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  font-family: var(--fonte-corpo);
  font-size: 0.92rem;
  color: var(--cor-texto);
}

.remover-pergunta,
.remover-opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: transparent;
  color: var(--cor-texto-suave);
  cursor: pointer;
}

.remover-pergunta:hover,
.remover-opcao:hover {
  border-color: var(--cor-vermelho);
  color: var(--cor-vermelho);
}

.linha-botoes-construtor {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.4rem;
  flex-wrap: wrap;
}

.painel-compartilhar-formulario {
  display: flex;
  gap: 2rem;
  margin-top: 1.4rem;
  padding: 1.2rem;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  flex-wrap: wrap;
}

.painel-compartilhar-info {
  flex: 1;
  min-width: 260px;
}

.painel-compartilhar-info h3 {
  margin-bottom: 0.8rem;
}

.rotulo-campo-mini {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cor-texto-suave);
  margin-bottom: 0.3rem;
}

.linha-link-copiar {
  display: flex;
  gap: 0.6rem;
}

.linha-link-copiar input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 6px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: 0.9rem;
}

.link-editar-perguntas {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.88rem;
}

.aviso-perguntas-bloqueadas {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  font-style: italic;
}

.painel-compartilhar-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.painel-compartilhar-qr img {
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.botao-baixar-qr {
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
}

.pergunta-dashboard {
  scroll-margin-top: 20px;
  background: var(--cor-cartao);
  border: 1px solid var(--cor-cartao-borda);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

.pergunta-dashboard-texto {
  font-weight: 600;
  margin: 0 0 0.8rem;
}

.pergunta-dashboard-expansivel > summary {
  cursor: pointer;
  list-style: none;
}

.pergunta-dashboard-expansivel > summary::-webkit-details-marker {
  display: none;
}

.pergunta-dashboard-cabecalho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.pergunta-dashboard-cabecalho-topo .pergunta-dashboard-texto {
  margin: 0;
}

.pergunta-dashboard-toggle-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--cor-dourado);
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 0.8rem;
}

.icone-chevron-dashboard {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.15s ease;
}

.pergunta-dashboard-expansivel[open] .icone-chevron-dashboard {
  transform: rotate(90deg);
}

.pergunta-dashboard-expansivel .lista-trechos-codificar,
.pergunta-dashboard-expansivel > .lista-vazia {
  margin-top: 1rem;
}

.grafico-barras-formulario {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.linha-grafico-barra {
  display: grid;
  grid-template-columns: 160px 1fr 90px;
  align-items: center;
  gap: 0.7rem;
}

.rotulo-grafico-barra {
  font-size: 0.85rem;
  color: var(--cor-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trilha-grafico-barra {
  height: 0.9rem;
  background: var(--cor-fundo);
  border-radius: 999px;
  overflow: hidden;
}

.barra-grafico-barra {
  height: 100%;
  background: var(--cor-dourado);
  border-radius: 999px;
}

.contagem-grafico-barra {
  font-size: 0.82rem;
  color: var(--cor-texto-suave);
  text-align: right;
}

.lista-respostas-texto {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--cor-texto);
  font-size: 0.9rem;
}

.lista-respostas-texto li {
  margin-bottom: 0.4rem;
}

.tabela-respostas-wrapper {
  overflow-x: auto;
}

.tabela-respostas-formulario {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabela-respostas-formulario th,
.tabela-respostas-formulario td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--cor-cartao-borda);
  text-align: left;
  white-space: nowrap;
}

.tabela-respostas-formulario th {
  color: var(--cor-texto-suave);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Pagina publica de resposta (sem sidebar, sem login) */

.pagina-publica-formulario {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.4rem 1.2rem;
}

.logo-pagina-publica img {
  height: 3rem;
  width: auto;
}

.ficha-formulario-publico {
  width: 100%;
  max-width: 520px;
}

.pergunta-resposta-publica {
  margin-bottom: 1.4rem;
}

.pergunta-resposta-publica > label {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cor-texto);
  margin-bottom: 0.5rem;
}

.lista-opcoes-resposta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label.opcao-resposta-publica {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cor-texto);
}

label.opcao-resposta-publica input {
  width: auto;
  flex-shrink: 0;
}

.ficha-obrigado-formulario {
  text-align: center;
}

.icone-obrigado {
  width: 3rem;
  height: 3rem;
  color: var(--cor-sucesso);
  margin-bottom: 0.8rem;
}