/* ==========================================================================
   Modal de verificação em duas etapas — Área do Cliente Company Conferi
   Depende de css/login.css (tokens e formulário) e css/modal.css (caixa).
   ========================================================================== */

/* 1. Layout em duas colunas — mesma linguagem do card de login
   -------------------------------------------------------------------------- */
.modal--duas-etapas {
  width: min(880px, calc(100% - 32px));
}

.modal__box--split {
  display: grid;
  grid-template-columns: .8fr 1fr;
  padding: 0;
}

.modal__conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 30px 28px;
}

.login-brand--modal {
  justify-content: flex-start;
  gap: 20px;
  padding: 34px 28px;
}

.login-brand--modal .login-brand__tag svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.login-brand--modal .login-brand__title {
  margin-top: 16px;
  font-size: clamp(1.3rem, 2.2vw, 1.62rem);
}

/* login.css esconde texto e lista nas telas menores do card; aqui eles são o
   conteúdo principal do painel, então continuam visíveis */
.login-brand--modal .login-brand__text {
  display: block;
}

.login-brand--modal .login-brand__list {
  display: grid;
}

.duas-etapas__aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  font-size: .82rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--amarelo);
  border-radius: var(--raio-sm);
}

.duas-etapas__aviso svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--amarelo);
}

/* 2. E-mails que receberam o código
   -------------------------------------------------------------------------- */
.duas-etapas__emails {
  margin: 14px 0 0;
  padding: 12px 14px;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--texto-forte);
  background: var(--cinza-transparente);
  border: 1px solid var(--cinza);
  border-radius: var(--raio-sm);
}

.duas-etapas__emails li {
  display: flex;
  align-items: center;
  gap: 9px;
  word-break: break-all;
}

.duas-etapas__emails svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--azul-claro);
}

/* 3. Campo do código
   -------------------------------------------------------------------------- */
.login-input--codigo {
  padding-left: 16px;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .55em;
  text-indent: .55em; /* compensa o espaçamento do último dígito */
}

.login-input--codigo::placeholder {
  font-weight: 600;
  letter-spacing: .55em;
}

/* 4. Ações
   -------------------------------------------------------------------------- */
.duas-etapas__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.login-button--secundario {
  font-size: .88rem;
  white-space: nowrap;
  color: var(--azul);
  background: transparent;
  border: 1.5px solid var(--cinza);
  box-shadow: none;
}

.login-button--secundario:hover {
  color: var(--verde);
  border-color: var(--azul-claro);
  background: var(--cinza-transparente);
  filter: none;
  box-shadow: none;
}

.login-button--secundario:disabled {
  color: var(--texto-suave);
  filter: none;
}

/* 5. Responsivo
   -------------------------------------------------------------------------- */
/* Sem espaço para as duas colunas, o painel explicativo sai de cena e fica só
   o campo do código — a explicação não pode empurrar a ação para fora da tela */
@media (max-width: 860px) {
  .modal--duas-etapas {
    width: min(480px, calc(100% - 32px));
  }

  .modal__box--split {
    grid-template-columns: 1fr;
  }

  .modal__conteudo {
    display: block;
  }

  .login-brand--modal {
    display: none;
  }
}

@media (max-width: 480px) {
  .duas-etapas__acoes {
    grid-template-columns: 1fr;
  }

  .login-input--codigo {
    font-size: 1.15rem;
    letter-spacing: .4em;
    text-indent: .4em;
  }
}