/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

/* Reset de pseudo-elementos previos del efecto notch */
/* .entradas.bordecito .form-label::before,
.entradas.bordecito .form-label::after {
    display: none !important;
    content: none !important;
} */

.entradas .bordecito {
    position: relative;
    font-family: 'Poppins', sans-serif;
}

/* El Label (Texto del campo) */
.entradas.bordecito label {
    position: absolute;
    top: 50%;
    left: 10px; /* Ajustado ligeramente de 5px a 10px para alinear con el padding del input */
    transform: translateY(-50%);
    font-size: 16px;
    color: #9ea5ad; /* Texto gris para visibilidad en fondo claro */
    padding: 0 5px;
    pointer-events: none;
    transition: .5s;
    background: transparent;
    z-index: 2;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* El Input */
.entradas.bordecito .form-control {
    width: 100%;
    height: 40px;
    font-size: 16px;
    color: #495057; /* Texto oscuro para fondo claro */
    padding: 0 10px;
    background: transparent !important;
    border: 1.2px solid #ced4da; /* Borde gris (simulando tu border blanco) */
    outline: none;
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Efecto Focus/Filled: rompe el borde y sube el texto */
.entradas.bordecito.is-focused label,
.entradas.bordecito.is-filled label,
.entradas.bordecito:has(input:focus, textarea:focus) label {
    top: 0;
    font-size: 12px;
    background: #fff; /* Fondo blanco para crear el "notch" tapando la línea del borde en tarjetas blancas */
    color: #2a83e8; /* Color de tu enfoque (morado) para el estado activo */
}

/* Color del borde en estado focus */
.entradas.bordecito.is-focused .form-control,
.entradas.bordecito:has(input:focus, textarea:focus) .form-control {
    border: 1.2px solid #2a83e8; /* Borde azul en estado activo */
}

/* Fuerza al label a subir si el navegador autocompleta el campo */
.entradas.bordecito .form-control:-webkit-autofill + label {
    top: 0;
    font-size: 12px;
    background: #fff;
}