.form-group.floating {
    margin-bottom: 0rem;
    }

.form-control.floating::placeholder {
      color: transparent; /* Color predeterminado del marcador de posición */
    }

    /* Estilo del marcador de posición cuando el campo de entrada tiene el foco */
.form-control.floating:focus::placeholder {
      color: black; /* Cambia el color del marcador de posición cuando el campo de entrada tiene el foco */
    }

    /* Estilo del marcador de posición oculto */
.form-control.floating.placeholder-hidden::placeholder {
      color: transparent; /* Oculta el marcador de posición cambiando su color a transparente */
    }
    
.form-group.floating>label {
    bottom: 34px;
    left: 8px;
    position: relative;
    background-color: white;
    padding: 0px 5px 0px 5px;
    font-size: 1.1em;
    transition: 0.1s;
/*    pointer-events: none; el label no interactua con el click de mouse, pero ahora necesitamos que esta activo*/
    font-weight: 500 !important;
    transform-origin: bottom left;
    margin-bottom: 0rem;
}

.form-control.floating:focus~label{
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
    color: #005ebf;
}

.form-control.floating:valid~label{
    transform-origin: bottom left;
    transform: translate(1px,-85%) scale(0.80);
    opacity: .8;
    color: #005ebf;
}

/* ESTILO PARA INPUT FLOTANTE CON OPCIONES, SI YO USO UN INPUT CON OPCIONES Y DESEO EFECTO FLOATING, USO LA CLASE FLOTANTE */

        .input-group-custom {
            position: relative;
            display: flex;
            align-items: center;
        }
        .input-group-custom input,
        .input-group-custom select {
            padding-right: 50px; /* Espacio para los iconos */
        }
        .input-group-custom .input-icons {
            position: absolute;
            right: 10px;
            display: flex;
            gap: 10px;
        }
        .input-group-custom .input-icons a {
            color: #007bff;
            cursor: pointer;
            text-decoration: none;
        }
        .input-group-custom .input-icons a:hover {
            color: #0056b3;
        }

        /* 1. Clase para ocultar íconos nativos */
        .hide-native-icon {
            -webkit-appearance: none; /* Ocultar en navegadores WebKit */
            -moz-appearance: none; /* Ocultar en Firefox */
             /* -moz-appearance: textfield; Ocultar en Firefox */
            appearance: none; /* Ocultar en navegadores compatibles */
        }

        .hide-native-icon[type="number"]::-webkit-inner-spin-button,
        .hide-native-icon[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none; /* Ocultar botones en Chrome, Edge y Safari */
            margin: 0; /* Quitar el margen de los botones */
        }

        .hide-native-icon[type="number"]::-moz-inner-spin-button {
            display: none; /* Ocultar botones en Firefox */
        }

        /* 2. Clase para mostrar íconos nativos antes de los personalizados */
        .show-native-first {
            padding-right: 80px; /* Espacio adicional para íconos nativos y personalizados */
        }

        /* Estilos para el efecto flotante */
        .form-group.flotante {
            position: relative;
            margin-bottom: 0;
        }

        .form-group.flotante > label {
            position: absolute;
            bottom: 34px;
            left: 8px;
            background-color: white;
            padding: 0px 5px 0px 5px;
            font-size: 0.9em;
            transition: 0.1s;
            font-weight: 500 !important;
            transform-origin: bottom left;
            margin-bottom: 0;
            z-index: 1;
            color: #005ebf;
            opacity: .8;
            transform: translate(1px,25%);
        }

        /*.form-control.flotante::placeholder {
            color: transparent;
        }

        .form-control.flotante:focus::placeholder {
            color: black;
        }*/