/* Login por código (OTP) — 2 etapas + tela de código.
   Carregado só nos domínios de CODE_LOGIN_DOMAINS (gate em Login/index.ctp).
   A cor de destaque vem do tema do tenant via --otp-accent (inline no .ctp). */

.otp-hidden { display: none !important; }

/* Os 2 botões da escolha inicial (Entrar com senha / Receber código) ficam
   idênticos e em largura cheia, empilhados. */
.otp-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.otp-choices .jelly-btn { width: 100%; white-space: nowrap; float: none; }

/* Etapa de senha (2 etapas): olhinho mostrar/ocultar + linha lembrar/esqueceu. */
.otp-pass-wrap { position: relative; }
.otp-pass-wrap .form-control { padding-right: 44px; }
.otp-eye {
    position: absolute; top: 0; right: 0; height: 40px; width: 42px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #9aa3af; font-size: 16px;
}
.otp-eye:hover { color: #5b6471; }

.otp-pass-row { display: flex; align-items: center; margin: 8px 0 14px; }
.otp-pass-row .check-login { margin: 0; }
.otp-forgot { margin-left: auto; font-size: 13px; color: #6b7280; text-decoration: none; white-space: nowrap; }
.otp-forgot:hover { color: var(--otp-accent, #7b3fe4); text-decoration: underline; }

/* "voltar" do modo senha: volta pra escolha (senha / código / WhatsApp). */
.otp-senha-voltar {
    display: block; margin: 12px auto 0; padding: 5px; background: none; border: 0;
    cursor: pointer; color: #8a93a0; font: 600 13px Roboto, sans-serif;
}
.otp-senha-voltar:hover { color: #5b6471; }
.otp-senha-voltar .fa { margin-right: 5px; }

.otp-msg { margin-top: 10px; text-align: center; font: 400 13px Roboto, sans-serif; min-height: 18px; color: #5f6368; }
.otp-msg.is-error { color: #e03131; }
/* Vazio não reserva espaço (some o vão entre os botões e o "ou"); aparece só com mensagem. */
#otp-login-msg:empty { display: none; }

/* Painel do código */
.otp-panel .otp-voltar {
    background: none; border: 0; color: #6b7280; cursor: pointer; padding: 0;
    margin: 0 0 14px; display: inline-flex; align-items: center; gap: 6px;
    font: 600 12px Roboto, sans-serif;
}
.otp-panel .otp-voltar:hover { color: #374151; }
.otp-panel h3 { margin: 0 0 4px; font: 700 18px Roboto, sans-serif; color: #1f2430; text-align: left; }
.otp-panel .otp-sub { margin: 0 0 16px; font: 400 13px Roboto, sans-serif; color: #6b7280; text-align: left; }
.otp-panel .otp-sub b { color: #1f2430; }
.otp-panel .otp-voltar { text-align: left; }

.otp-code {
    width: 100%; box-sizing: border-box; text-align: center;
    font: 700 26px Roboto, monospace; letter-spacing: 12px; text-indent: 12px; padding: 12px 0;
    border: 1.5px solid #d8dce3; border-radius: 8px; outline: none;
}
.otp-code:focus { border-color: var(--otp-accent, #7b3fe4); }

.otp-panel .otp-verificar { width: 100%; margin-top: 12px; }

.otp-links { margin-top: 14px; text-align: center; font: 400 13px Roboto, sans-serif; color: #6b7280; }
.otp-links a { color: var(--otp-accent, #7b3fe4); cursor: pointer; text-decoration: none; }
.otp-links a:hover { text-decoration: underline; }

/* Tela de escolha de canal (quando há WhatsApp E e-mail) */
.otp-opcoes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.otp-opcoes .otp-opcao {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    padding: 14px; border: 1.5px solid #d8dce3; border-radius: 10px; background: #fff;
    cursor: pointer; text-align: left; font: 600 14px Roboto, sans-serif; color: #1f2430;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.otp-opcoes .otp-opcao:hover { border-color: var(--otp-accent, #7b3fe4); background: #fafafe; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.otp-opcoes .otp-opcao:disabled { opacity: .55; cursor: default; box-shadow: none; }
.otp-opcoes .otp-opcao .fa { font-size: 20px; width: 24px; text-align: center; flex: 0 0 auto; }
.otp-opcoes .otp-opcao .fa.wa { color: #25d366; }
.otp-opcoes .otp-opcao .fa.mail { color: var(--otp-accent, #7b3fe4); }
.otp-opcoes .otp-opcao > span { flex: 1 1 auto; }
.otp-opcoes .otp-opcao::after { content: '\203A'; margin-left: auto; color: #c0c4cc; font: 400 20px Roboto, sans-serif; line-height: 1; }
/* Opção carregando: full opacity (spinner nítido), enquanto as outras ficam dimmed. */
.otp-opcoes .otp-opcao.is-loading { opacity: 1; }
/* Opção carregando: o chevron vira um spinner pequeno (mantém ícone + texto). */
.otp-opcoes .otp-opcao.is-loading::after {
    content: ''; box-sizing: border-box; flex: 0 0 auto; width: 16px; height: 16px;
    border: 2px solid #c7ccd6; border-right-color: transparent; border-radius: 50%;
    animation: otp-rot .6s linear infinite;
}

/* Nos estados de OTP (escolha/código), centraliza o conteúdo no card — o card tem
   altura fixa do tema, então sem isso sobra vão morto embaixo. */
.login-box.otp-panel-ativo { display: flex; flex-direction: column; justify-content: center; }

/* Loading: spinner + bloqueio de clique (pro usuário não clicar feito doido). */
.otp-spin {
    display: inline-block; box-sizing: border-box; flex: 0 0 auto;
    width: 14px; height: 14px; vertical-align: -2px; margin-right: 8px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: otp-rot .6s linear infinite;
}
@keyframes otp-rot { to { transform: rotate(360deg); } }
.is-loading { cursor: default; pointer-events: none; }