/* Estilos completos y actualizados para bancolombia */

/* Estilos para placeholders flotantes corregidos */
.bc-form-field {
  position: relative;
  margin-bottom: 20px;
}
.bc-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
.bc-form-field label {
  position: absolute;
  top: 10px; /* Posición inicial */
  left: 5px; /* Más a la izquierda para alinear con íconos */
  color: #fffefef1 !important; /* Blanco original, no gris */
  transition: all 0.2s ease;
  pointer-events: none;
  font-size: 16px; /* Tamaño original, no cambia */
  z-index: 1; /* Por encima del input */
}
.bc-form-field .bc-input:focus + label,
.bc-form-field .bc-input:not(:placeholder-shown) + label,
.bc-form-field.focused label,
.bc-form-field.filled label {
  top: -25px; /* Sube arriba de los íconos */
  left: 0px; /* Más a la izquierda */
  color: #fffefef1 !important; /* Blanco al subir */
  font-size: 16px; /* Mantén tamaño original */
}
.bc-form-field .bc-input:focus,
.bc-form-field.focused .bc-input {
  border-color: #ffd700; /* Borde amarillo al seleccionar */
}

/* Colores del botón original */
.bc-button-primary:disabled {
  background-color: #727476; /* Gris apagado exacto */
  color: #353537; /* Texto gris */
}

.bc-button-primary {
  background-color: #fdda24; /* Amarillo exacto para encendido */
  color: #2c2a29; /* Texto oscuro */
}

/* Margin-top para el campo de usuario */
.authentication-form__username {
  margin-top: 2rem;
}

/* Para íconos: Letras simples */
.bc-form-field .icon-user::before {
  content: "U"; /* Letra para usuario */
  position: absolute;
  left: 10px;
  top: 10px;
  color: #999;
  font-size: 16px;
}
.bc-form-field .icon-lock::before {
  content: "C"; /* Letra para clave */
  position: absolute;
  left: 10px;
  top: 10px;
  color: #999;
  font-size: 16px;
}