/* ==========================================================
   ARREGLO VISUAL: INPUT GROUP CON ERROR FLOTANTE
   Evita que el mensaje de error rompa el botón del ojo
   ========================================================== */

/* 1. Preparamos el contenedor */
.input-group {
    position: relative; 
    display: flex;
    flex-wrap: nowrap; /* Obliga a que botón e input sigan en la misma línea */
}

/* 2. Forzamos bordes cuadrados en la unión */
.input-group .form-control {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    z-index: 1; 
}

/* 3. Sacamos el mensaje de error del flujo normal (lo hacemos flotar) */
.input-group label.error, 
.input-group .error {
    position: absolute;
    bottom: -22px;       /* Ajusta este número si lo quieres más arriba o abajo */
    left: 0;
    font-size: 12px;
    color: #dc3545;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    pointer-events: none; /* Para que no interfiera con clicks cercanos */
}

/* 4. Espacio extra abajo para que el mensaje no tape el siguiente campo */
.form-group {
    margin-bottom: 25px !important; 
}
.label-pequeno {
    font-size: 13px !important; /* Ajusta este número a tu gusto */
}