/* Estilo del contenedor */
.input-container {
    position: relative;
    width: 100%;
    /* Ancho del input */
}

/* Estilo del input */
.input-container input {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 5px;
    padding-left: 15px;
    outline: none;
    font-size: 16px;
    border-radius: 6px;
    background-color: #faf8fc;
}

.input-container input:focus+label,
.input-container input:not(:placeholder-shown)+label {
    color: #ff00a0;
    font-size: 12px;
    top: 4px;
    left: 15px;
}

/* Estilo del label */
.input-container label {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 16px;
    color: #666;
    /* Color inicial gris */
    pointer-events: none;
    transition: all 0.2s ease;
    /* Suavidad en el cambio */
}

/* Es necesario para hacer que el placeholder no se muestre */
.input-container input::placeholder {
    color: transparent;
}

/* Estado de error para inputs (login) */
.input-container input.input-error {
    border: 1px solid #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}

/* Estado de error genérico (simulador/login) */
input.input-error,
textarea.input-error,
select.input-error {
    border: 1px solid #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20) !important;
}

.input-container input.input-error:focus + label,
.input-container input.input-error:not(:placeholder-shown) + label {
    color: #ef4444;
}