/* Ocultar el campo de archivo */
.input-group {
    position: relative;
}

.input-group input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hace invisible el botón de archivo */
    cursor: pointer; /* Muestra el cursor como una mano para indicar que es clickeable */
}

/* Variable para la altura del label, con un valor predeterminado */
:root {
    --input-label-height: 56px; /* Puedes ajustar esta altura según tus necesidades */
}

.input-group label.input-group-text {
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e7e7e7 !important; /* Borde gris para la etiqueta */
    border-radius: 5px; /* Esquinas redondeadas opcionales */
    padding: 0.375rem 0.75rem; /* Relleno alrededor del texto */
    cursor: pointer; /* Muestra el cursor como una mano para indicar que es clickeable */
    color: #246af4 !important; /* Cambia el color del texto aquí (ejemplo: azul) */
    height: var(--input-label-height); /* Altura personalizable */
    white-space: normal; /* Permitir que el texto haga un salto de línea */
    overflow-wrap: break-word; /* Asegurar que el texto largo se divida */
    word-wrap: break-word; /* Asegurar que el texto largo se divida (compatibilidad adicional) */
    text-align: left; /* Alinear el texto a la izquierda */
    display: flex; /* Usar flexbox para el alineamiento */
    align-items: center; /* Alinear verticalmente el contenido */
    justify-content: space-between; /* Espacio entre el texto y el icono */
    font-weight: normal !important; /* Quitar la negrita del texto */
    text-transform: capitalize !important; /* Solo iniciales en mayúsculas */
    transition: border-color 0.5s ease; /* Transición suave para el cambio de color del borde */
}

/* Margen a la izquierda solo para el texto */
.label-text {
    margin-left: 5px !important; /* Espacio a la izquierda del texto (ajustar según tus necesidades) */
    font-size: 0.1rem !important; /* Tamaño de la fuente (ajustar según tus necesidades) */
}

/* Estilo del label cuando está en estado activo (cuando se presiona) */
.input-group label.input-group-text:active {
    border-color: #246af4 !important; /* Cambia el color del borde cuando se presiona (ajusta el color según tus necesidades) */
    outline: none; /* Elimina el contorno predeterminado al presionar */
}

/* Cambiar el color del texto dentro del label, sin afectar el icono */
.input-group-text .label-text {
    color: #555555 !important; /* Cambia este color según tus necesidades */
    margin-left: 5px !important; /* Espacio a la izquierda del texto */
    font-size: 0.9rem !important; /* Tamaño de la fuente (ajustar según tus necesidades) */
}

/* Asegurarse de que el input file cubra todo el área del input-group */
.input-group {
    position: relative;
}

.input-group input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0; /* Hace invisible el botón de archivo */
    cursor: pointer; /* Muestra el cursor como una mano para indicar que es clickeable */
    border-radius: 15px; /* Esquinas redondeadas opcionales */
}

/* Opcional: Ajustar el tamaño del icono */
.input-group-text i {
    font-size: 1.00rem; /* Ajusta el tamaño según tus necesidades */
    margin-left: 0.5rem; /* Espacio entre el texto y el icono */
}




.form-input {
    font-size: 16px; /* Tamaño de fuente configurable */
}

/* Para asegurar que también se aplique al textarea */
textarea.form-input {
    font-size: 16px; /* Tamaño de fuente configurable */
}

/* Para el label del input file si también quieres ajustar el tamaño del texto */
.input-group-text {
    font-size: 16px; /* Tamaño de fuente configurable */
}