/* app/static/css/cadastro.css */

/* Página de cadastro — padrão com ícones Lucide em todos os campos editáveis */

.pe-field{
  position: relative;
}

.pe-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pe-teal-2);
  opacity: .95;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pe-icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* aumenta padding esquerdo para caber o ícone */
.pe-field .pe-input{
  padding-left: 46px; /* 14 + 20 + gap */
  height: 56px;
}

/* senha com botão de olho */
.pe-field.has-eye .pe-input.has-eye{
  padding-right: 56px;
}

.pe-eye-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 12px;
  color: rgba(11,23,48,.70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pe-eye-btn:hover{
  background: rgba(31,183,173,.10);
  color: rgba(15,143,136,.95);
}

.pe-eye-btn svg{
  width: 20px;
  height: 20px;
  display: block;
}

/* hint abaixo do campo */
.pe-hint{
  font-size: .85rem;
  color: rgba(11,23,48,.62);
  margin-top: 6px;
}

/* responsivo: mantém bom espaçamento */
@media (max-width: 575.98px){
  .pe-field .pe-input{
    height: 54px;
  }
}