/*
 * BIBLIOTECA DA VIDA - BLOCO DE COMUNIDADE
 *
 * Nenhuma cor nova: os valores abaixo sao os mesmos ja' usados por .card,
 * .context e .guia-opcao no tema atual. Carrega depois de aparencia.css,
 * entao e' aqui que o tamanho do texto deste bloco e' decidido de fato.
 *
 * A secao nasce com [hidden] e so' aparece quando a API responde - sem API
 * (file://, rede fora), a orientacao continua inteira e esta parte some.
 */

.comunidade[hidden] { display: none; }

.comunidade {
  margin: 38px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid #6f99822b;
}

.comunidade-titulo {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  margin: 0 0 16px;
  color: #e0e8d7;
}

/* O segundo titulo em diante ("Quem passou por isso") precisa de ar: sem
 * isto ele encosta nos botoes de voto logo acima. */
.comunidade-titulo:not(:first-child) { margin-top: 34px; }

.votos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.voto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Vida Sans', sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #c4dcca;
  padding: 12px 20px;
  min-height: 46px;
  border: 1px solid #73987848;
  border-radius: 26px;
  background: #2443358a;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}

.voto:hover { background: #375744a8; border-color: #b1dbcb55; }
.voto:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

/* O voto de quem esta' lendo, marcado sem depender so' da cor. */
.voto.votado {
  background: #3a5c4ecc;
  border-color: #cdeedeaa;
  color: #f0f7f0;
}

/* Enquanto a resposta do servidor nao volta. */
.voto[disabled] { opacity: .55; cursor: default; }

.contagem {
  font-variant-numeric: tabular-nums;   /* o numero nao "pula" ao mudar */
  color: #b9dec9;
  min-width: 1.2em;
  text-align: right;
}

.voto.votado .contagem { color: #f0f7f0; }

@media (max-width: 760px) {
  .comunidade { margin-top: 30px; padding-top: 22px; }
  .comunidade-titulo { font-size: 19px; }
  .votos { gap: 10px; }
  .voto { flex: 1 1 auto; justify-content: center; font-size: 14.5px; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .voto { transition: none; }
}

/* ------------------------------------------------------- depoimentos lidos */

.depoimentos { display: grid; gap: 14px; margin: 0 0 30px; }

.depoimento {
  border: 1px solid #73987848;
  border-left: 2px solid #9fe6c4;
  border-radius: 18px 18px 18px 6px;
  background: #2443358a;
  padding: 18px 22px;
}

.depoimento-texto { margin: 0; font-size: 15.5px; line-height: 1.7; color: #e0e8d7; }
.depoimento-meta { margin: 10px 0 0; font-size: 13px; color: #acbba5; }

/* ----------------------------------------------------- formulário de envio */

.envio { margin: 8px 0 0; }

.envio summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Vida Sans', sans-serif;
  font-size: 15px;
  color: #bdd7aa;
  padding: 11px 20px;
  border: 1px solid #73987848;
  border-radius: 26px;
  background: #2443358a;
  cursor: pointer;
  list-style: none;
}
.envio summary::-webkit-details-marker { display: none; }
.envio summary:before { content: '+'; font-size: 18px; color: #b4cba4; }
.envio[open] summary:before { content: '−'; }
.envio summary:hover { background: #375744a8; }
.envio summary:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

.envio-corpo { padding: 20px 0 0; max-width: 660px; }

/* O aviso de crise vem antes de tudo e nao se parece com decoracao. */
.envio-aviso {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #3a5b3c77;
  border: 1px solid #b6d3a8;
  font-size: 14.5px;
  line-height: 1.6;
  color: #e4efdc;
}
.envio-aviso strong { color: #ffffff; }

.envio-campo { display: block; margin: 0 0 16px; }
.envio-campo > span { display: block; font-size: 14px; color: #c0d1c1; margin: 0 0 7px; }
.envio-campo em { font-style: normal; color: #9bb0a2; }

.envio-campo input,
.envio-campo textarea {
  width: 100%;
  font-family: 'Vida Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #e6efec;
  background: #1b322b;
  border: 1px solid #73987848;
  border-radius: 14px;
  padding: 12px 15px;
  resize: vertical;
}
.envio-campo input::placeholder,
.envio-campo textarea::placeholder { color: #7f978b; }
.envio-campo input:focus-visible,
.envio-campo textarea:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 2px; }

.envio-contador { margin: -8px 0 16px; font-size: 13px; color: #9bb0a2; }

/* O campo-isca: fora da tela, invisivel, mas preenchivel por robo. */
.envio-isca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.envio-turnstile:not(:empty) { margin: 0 0 16px; }

.envio-nota { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: #a8bdae; }

.envio-botao {
  font-family: 'Vida Sans', sans-serif;
  font-size: 16px;
  min-height: 48px;
  padding: 13px 26px;
  border: 0;
  border-radius: 26px;
  background: #b9d8b8;
  color: #193b2b;
  cursor: pointer;
}
.envio-botao:hover { background: #d5eaca; }
.envio-botao[disabled] { opacity: .6; cursor: default; }
.envio-botao:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 3px; }

.envio-resposta { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: #c0d1c1; }
.envio-resposta.erro { color: #f0c9a8; }
.envio-resposta.ok { color: #cdeede; }

@media (max-width: 760px) {
  .depoimento { padding: 16px 18px; }
  .depoimento-texto { font-size: 15px; }
  .envio-botao { width: 100%; }
}