/*
=========================================================
ARQUIVO: ajustes-bootstrap.css

Este arquivo contém personalizações dos componentes
nativos do Bootstrap.

Objetivo:
- Ajustar aparência dos formulários
- Remover estilos padrão do Bootstrap (ex: shadows)
- Adaptar componentes ao design do sistema
=========================================================
*/


/*
=========================================================
FORMULÁRIO
=========================================================
*/

/*
Fundo branco para inputs e selects
tanto no estado normal quanto no estado de foco.
*/
.form-control,
.form-control:focus,
.form-select,
.form-select:focus {
  background-color: #fff;
}

/*
Remove o shadow quando o input ou select recebe foco.
*/
.form-control:focus,
.form-select:focus {
  box-shadow: none;
}

/*
Fundo branco para checkbox.
*/
.form-check-input {
  background-color: #fff;
}

/*
Remove o shadow de foco do checkbox.
*/
.form-check-input:focus {
  box-shadow: none;
}


/*
=========================================================
ABAS TELA DE CADASTRO
=========================================================
*/

/*
Padding padrão do conteúdo das tabs
*/
.abas-cadastro .tab-pane {
    padding: 24px 0;
}

/*
Título padrão do conteúdo das tabs
*/
.abas-cadastro .tab-content h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
}

/*
Estilo padrão
*/
.abas-cadastro .nav-link {
  border-bottom: 2px solid var(--cor-secundaria);
  color: var(--cor-secundaria);
}

/*
No hover das abas:
- altera apenas a cor da linha inferior
*/
.abas-cadastro .nav-link:hover {
  border-bottom-color: #e5e7eb;
}


/*
Estado ativo da aba.

Quando a aba está ativa:
- linha inferior usa a cor primária do sistema
*/
.abas-cadastro .nav-link.active {
  border-bottom: 2px solid var(--cor-primaria);
}


/*
=========================================================
FORMULÁRIO DE CÓDIGO (OTP / VERIFICAÇÃO)
=========================================================
*/

/*
Estilo para campos de código
(ex: verificação por e-mail ou SMS).
*/
.form-codigo .form-control {
  text-align: center;
  font-size: 22px;
}


/*
=========================================================
VALIDAÇÃO DE INPUTS
=========================================================
*/

/*
Remove os ícones padrão de validação do Bootstrap
(✓ ou ! que aparecem dentro do input).

Também remove o espaço reservado à direita.
*/
.form-control.is-valid,
.form-control.is-invalid,
.was-validated .form-control:valid,
.was-validated .form-control:invalid {
  background-image: none !important;
  padding-right: 0.75rem;
}


/*
=========================================================
SELECT COM ERRO
=========================================================
*/

/*
Quando um select está inválido:

- mantém a seta padrão do select
- remove o ícone de erro padrão do Bootstrap
- mantém borda de erro
*/
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: 2.25rem;

  /* reaplica a seta padrão do select */
  background-image: var(--bs-form-select-bg-img);

  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;

  /* remove shadow de erro */
  box-shadow: none;
}


/*
=========================================================
SELECT VÁLIDO
=========================================================
*/

/*
Quando select é válido:

- mantém seta padrão
- remove ícone verde de sucesso
- remove shadow de foco
*/
.form-select.is-valid,
.was-validated .form-select:valid {
  padding-right: 2.25rem;

  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;

  box-shadow: none;
}


/*
=========================================================
REMOVER SHADOW VERDE DE INPUT VÁLIDO
=========================================================
*/
.form-control:focus:valid,
.was-validated .form-control:valid:focus {
  box-shadow: none;
}

/*
Mesmo comportamento para select válido em foco.
*/
.form-select:focus:valid,
.was-validated .form-select:valid:focus {
  box-shadow: none;
}