/* Widget do captcha (prova de trabalho) — estados controlados por captcha.js via data-estado */

.captcha-isca {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.captcha-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid #dde2e8;
  border-radius: 10px;
  background: #fafbfc;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.captcha-widget__icone {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: #9aa5b1;
}
.captcha-widget__titulo {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
}
.captcha-widget__status {
  font-size: 0.74rem;
  color: #6b7280;
  line-height: 1.3;
}
/* Prefixado com .captcha-widget de propósito: o .fa-solid do Font Awesome tem a mesma
   especificidade, carrega depois deste arquivo e reexibiria o check antes do desafio. */
.captcha-widget .captcha-widget__ok,
.captcha-widget .captcha-widget__spinner { display: none; }
.captcha-widget__spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid #e8edf2;
  border-top-color: #2f7fdd;
  border-radius: 50%;
  animation: captcha-giro 0.8s linear infinite;
}
@keyframes captcha-giro {
  to { transform: rotate(360deg); }
}

.captcha-widget[data-estado="resolvendo"] .captcha-widget__escudo { display: none; }
.captcha-widget[data-estado="resolvendo"] .captcha-widget__spinner { display: block; }
.captcha-widget[data-estado="ok"] { border-color: #b7e4c7; background: #f1fbf4; }
.captcha-widget[data-estado="ok"] .captcha-widget__escudo { display: none; }
.captcha-widget[data-estado="ok"] .captcha-widget__ok { display: inline-block; color: #00a35c; }
.captcha-widget[data-estado="erro"] { border-color: #f5c2c7; background: #fdf2f3; }
.captcha-widget[data-estado="erro"] .captcha-widget__icone { color: #e63757; }

html.dark .captcha-widget { background: #1e2a3a; border-color: #2d3f55; }
html.dark .captcha-widget__titulo { color: #d8e2ef; }
html.dark .captcha-widget__status { color: rgba(216, 226, 239, 0.6); }
html.dark .captcha-widget[data-estado="ok"] { background: #13301f; border-color: #1f5c3a; }
html.dark .captcha-widget[data-estado="erro"] { background: #3a1820; border-color: #6b2737; }

/* ===================== Caixa "Não sou um robô" ===================== */

.captcha-caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #c9d1da;
  border-radius: 10px;
  background: #f7f9fb;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.captcha-caixa:hover { border-color: #2f7fdd; background: #fff; }
.captcha-caixa:focus-visible { outline: none; border-color: #2f7fdd; box-shadow: 0 0 0 3px rgba(47, 127, 221, 0.15); }

.captcha-caixa__check {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}
.captcha-caixa__box {
  position: absolute;
  inset: 0;
  border: 2px solid #b4bdc8;
  border-radius: 5px;
  background: #fff;
  transition: border-color 0.2s;
}
.captcha-caixa:hover .captcha-caixa__box { border-color: #2f7fdd; }
/* Prefixado com .captcha-caixa de propósito: o SVG do Font Awesome (.svg-inline--fa) tem a
   mesma especificidade e carrega DEPOIS deste arquivo — sem o prefixo, o "check" apareceria
   já na carga (um V no quadrado), antes da verificação. */
.captcha-caixa .captcha-caixa__ok,
.captcha-caixa .captcha-caixa__spinner { display: none; }
.captcha-caixa__ok {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: #00a35c;
  font-size: 1.05rem;
}
.captcha-caixa__spinner {
  position: absolute;
  inset: 2px;
  border: 2.5px solid #e8edf2;
  border-top-color: #2f7fdd;
  border-radius: 50%;
  animation: captcha-giro-giro 0.8s linear infinite;
}
.captcha-caixa__texto {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 500;
  color: #1e293b;
}
.captcha-caixa__selo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #9aa5b1;
  line-height: 1;
  flex-shrink: 0;
}
.captcha-caixa__selo i { font-size: 1.1rem; }
.captcha-caixa__selo small { font-size: 0.56rem; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }

.captcha-caixa[data-estado="verificando"] { cursor: default; }
.captcha-caixa[data-estado="verificando"] .captcha-caixa__box { display: none; }
.captcha-caixa[data-estado="verificando"] .captcha-caixa__spinner { display: block; }
.captcha-caixa[data-estado="ok"] { cursor: default; border-color: #b7e4c7; background: #f1fbf4; }
.captcha-caixa[data-estado="ok"] .captcha-caixa__box { display: none; }
.captcha-caixa[data-estado="ok"] .captcha-caixa__ok { display: flex; }

html.dark .captcha-caixa { background: #1e2a3a; border-color: #2d3f55; }
html.dark .captcha-caixa:hover { background: #243249; border-color: #2f7fdd; }
html.dark .captcha-caixa__box { background: #16202e; border-color: #3a4a5f; }
html.dark .captcha-caixa__texto { color: #d8e2ef; }
html.dark .captcha-caixa[data-estado="ok"] { background: #13301f; border-color: #1f5c3a; }

/* ===================== Modal do desafio de giro ===================== */

.captcha-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.captcha-modal.is-aberto { display: flex; }
.captcha-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.captcha-modal__caixa {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
  animation: captcha-modal-sobe 0.18s ease-out;
}
@keyframes captcha-modal-sobe { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.captcha-modal__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}
.captcha-modal__titulo { font-size: 0.95rem; font-weight: 700; color: #1e293b; }
.captcha-modal__fechar {
  border: none;
  background: transparent;
  color: #9aa5b1;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.captcha-modal__fechar:hover { color: #e63757; background: #fdf2f3; }
.captcha-modal__instrucao { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.85rem; }
.captcha-modal__instrucao b { color: #1e293b; }

.captcha-giro__moldura {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  overflow: hidden;
  background: #eef1f5;
  box-shadow: inset 0 0 0 3px #e3e8ef, 0 2px 8px rgba(0, 0, 0, 0.1);
}
.captcha-giro__img {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(0deg);
  transition: transform 0.12s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}
.captcha-giro__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid #e8edf2;
  border-top-color: #2f7fdd;
  border-radius: 50%;
  animation: captcha-giro-giro 0.8s linear infinite;
  display: none;
}
@keyframes captcha-giro-giro { to { transform: rotate(360deg); } }

.captcha-giro__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 0.7rem;
}
.captcha-giro__seta,
.captcha-giro__nova {
  border: 1.5px solid #dde2e8;
  background: #fafbfc;
  color: #334155;
  cursor: pointer;
  border-radius: 10px;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
}
.captcha-giro__seta {
  width: 58px;
  height: 46px;
  font-size: 1.1rem;
}
.captcha-giro__nova {
  width: 42px;
  height: 42px;
  font-size: 0.9rem;
  color: #6b7280;
}
.captcha-giro__seta:hover,
.captcha-giro__nova:hover { border-color: #2f7fdd; background: #eef4fc; color: #2f7fdd; }
.captcha-giro__seta:active { transform: scale(0.94); }

.captcha-modal__erro {
  min-height: 1.1rem;
  font-size: 0.76rem;
  color: #e63757;
  margin-bottom: 0.6rem;
}
.captcha-modal__confirmar {
  width: 100%;
  padding: 0.65rem;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #2f7fdd 0%, #1a5eb8 100%);
  box-shadow: 0 4px 14px rgba(47, 127, 221, 0.3);
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.captcha-modal__confirmar:hover { filter: brightness(1.05); }
.captcha-modal__confirmar:active { transform: translateY(1px); }

/* Estados do modal: carregando mostra o spinner; verificando trava os controles */
.captcha-modal[data-estado="carregando"] .captcha-giro__img,
.captcha-modal[data-estado="verificando"] .captcha-giro__img { opacity: 0.4; }
.captcha-modal[data-estado="carregando"] .captcha-giro__spinner,
.captcha-modal[data-estado="verificando"] .captcha-giro__spinner { display: block; }
.captcha-modal[data-estado="carregando"] .captcha-giro__controles,
.captcha-modal[data-estado="verificando"] .captcha-giro__controles,
.captcha-modal[data-estado="carregando"] .captcha-modal__confirmar,
.captcha-modal[data-estado="verificando"] .captcha-modal__confirmar { opacity: 0.55; pointer-events: none; }

html.dark .captcha-modal__caixa { background: #0f1b2b; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); }
html.dark .captcha-modal__titulo { color: #d8e2ef; }
html.dark .captcha-modal__instrucao { color: rgba(216, 226, 239, 0.65); }
html.dark .captcha-modal__instrucao b { color: #d8e2ef; }
html.dark .captcha-giro__moldura { background: #16202e; box-shadow: inset 0 0 0 3px #2d3f55, 0 2px 8px rgba(0, 0, 0, 0.4); }
html.dark .captcha-giro__seta,
html.dark .captcha-giro__nova { background: #1e2a3a; border-color: #2d3f55; color: #d8e2ef; }
html.dark .captcha-giro__seta:hover,
html.dark .captcha-giro__nova:hover { background: #243249; border-color: #2f7fdd; color: #6ea8e6; }

/* ===================== Alternância entre os 3 tipos de desafio ===================== */

.captcha-desafio { display: none; }
.captcha-modal[data-tipo="girar"]  .captcha-desafio--girar,
.captcha-modal[data-tipo="puzzle"] .captcha-desafio--puzzle,
.captcha-modal[data-tipo="texto"]  .captcha-desafio--texto { display: block; }

/* trava os controles ativos enquanto carrega/verifica */
.captcha-modal[data-estado="carregando"] .captcha-puzzle__slider,
.captcha-modal[data-estado="verificando"] .captcha-puzzle__slider,
.captcha-modal[data-estado="carregando"] .captcha-texto__input,
.captcha-modal[data-estado="verificando"] .captcha-texto__input { opacity: 0.55; pointer-events: none; }
.captcha-modal[data-estado="carregando"] .captcha-puzzle__fundo,
.captcha-modal[data-estado="verificando"] .captcha-puzzle__fundo,
.captcha-modal[data-estado="carregando"] .captcha-puzzle__peca,
.captcha-modal[data-estado="carregando"] .captcha-texto__img,
.captcha-modal[data-estado="verificando"] .captcha-texto__img { opacity: 0.4; }
.captcha-modal[data-estado="carregando"] .captcha-puzzle__peca { visibility: hidden; }

/* ----- Quebra-cabeça ----- */
.captcha-puzzle__palco {
  position: relative;
  width: 240px;
  height: 150px;
  max-width: 100%;
  margin: 0 auto 0.85rem;
  border-radius: 10px;
  overflow: hidden;
  background: #eef1f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.captcha-puzzle__fundo {
  display: block;
  width: 240px;
  height: 150px;
}
.captcha-puzzle__peca {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  will-change: left;
}
.captcha-puzzle__slider {
  width: 100%;
  margin: 0;
  accent-color: #2f7fdd;
  cursor: grab;
}
.captcha-puzzle__slider:active { cursor: grabbing; }

/* ----- Texto ----- */
.captcha-texto__moldura {
  position: relative;
  margin: 0 auto 0.75rem;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  line-height: 0;
}
.captcha-texto__img {
  display: block;
  width: 100%;
  height: auto;
}
.captcha-texto__nova {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.85);
  color: #334155;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 0;
  transition: background 0.15s, color 0.15s;
}
.captcha-texto__nova:hover { background: #fff; color: #2f7fdd; }
.captcha-texto__input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid #dde2e8;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  background: #fafbfc;
  color: #1e293b;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.captcha-texto__input:focus {
  outline: none;
  border-color: #2f7fdd;
  box-shadow: 0 0 0 3px rgba(47, 127, 221, 0.12);
  background: #fff;
}
.captcha-texto__input::placeholder { font-weight: 400; letter-spacing: 1px; text-transform: none; color: #9aa5b1; }

html.dark .captcha-puzzle__palco { background: #16202e; }
html.dark .captcha-texto__input { background: #1e2a3a; border-color: #2d3f55; color: #d8e2ef; }
html.dark .captcha-texto__input:focus { background: #243249; border-color: #2f7fdd; }
html.dark .captcha-texto__nova { background: rgba(30, 42, 58, 0.85); color: #d8e2ef; }
html.dark .captcha-texto__nova:hover { background: #243249; color: #6ea8e6; }