/* Estilos personalizados para el formulario */
.custom-form-group {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
    flex-wrap: nowrap;
}

    .custom-form-group label {
        width: 120px;
        text-align: left;
        margin-right: 0.5rem;
        color: #333;
        flex-shrink: 0;
    }

    .custom-form-group input,
    .custom-form-group select {
        flex: 1;
        height: 32px; /* Altura igual para input y select */
        padding: 0.4rem 0.75rem; /* padding vertical para ajustarse a la altura */
        border: none;
        border-bottom: 1px solid #ccc;
        background-color: #f8f9fa;
        border-radius: 0;
        line-height: 1.2; /* el texto se centre bien */
        box-sizing: border-box;
    }

        .custom-form-group input:focus,
        .custom-form-group select:focus {
            outline: none;
            border-bottom: 2px solid #007bff;
            background-color: #fff;
        }

    .custom-form-group select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
        background-repeat: no-repeat;
        background-position-x: 98%;
        background-position-y: 50%;
        padding-right: 2rem;
    }

        /* Ajustes específicos para las opciones del select */
        .custom-form-group select option {
            font-size: 0.85rem; /* Igual que el select para consistencia */
            padding: 0.4rem; /* Ajustado para que el texto quepa */
            line-height: 1.2; /* Asegura que el texto no se corte */
            background-color: #fff;
        }

    /* Estilo específico para el checkbox */
    .custom-form-group input[type="checkbox"] {
        flex: none; /* No ocupa el espacio restante, solo el tamaño del checkbox */
        width: auto; /* Ancho automático para el checkbox */
        height: auto; /* Altura automática para que no se vea forzado */
        margin: 0; /* Elimina márgenes predeterminados */
        margin-right: 0.5rem; /* Espacio a la derecha para separar del label si es necesario */
        accent-color: #007bff; /* Color del checkbox (personalizable) */
        cursor: pointer; /* Cursor como puntero para indicar interactividad */
    }

        .custom-form-group input[type="checkbox"]:focus {
            outline: none; /* Elimina el contorno predeterminado al enfocar */
            border: 1px solid #007bff; /* borde al enfocar */
        }


/* Estilo para el contenedor de los radio buttons */
.radio-group {
    display: flex;
    gap: 0.2rem; /* Espacio entre los radio buttons */
    align-items: center;
}

    .radio-group label {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Espacio entre el radio button y el texto */
        font-size: 0.9rem; 
        color: #333;
        margin: 0;
        width: 6em; /* Espacio del ancho label */
    }

    .radio-group input[type="radio"] {
        margin: 0; /* Elimina márgenes predeterminados */
        accent-color: #007bff; /* Color del radio button */
        cursor: pointer; 
        width: 1em; 
        height: 1.2em;
    }

.input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre el input y el botón */
}

    .input-group input {
        flex: 1; /* El input ocupa el espacio disponible */
        height: 32px; /* Mantiene la altura consistente con otros inputs */
        padding: 0.4rem 0.75rem;
        border: none;
        border-bottom: 1px solid #ccc;
        background-color: #f8f9fa;
        border-radius: 0;
        line-height: 1.2;
        box-sizing: border-box;
    }

    .input-group button {
        height: 32px; /* Alinea la altura con el input */
        padding: 0 1rem; /* Ajusta el padding del botón */
    }

.row-compact {
    --bs-gutter-y: .25rem;
}
    /* o .5rem */
    .row-compact .custom-form-group {
        margin-bottom: 0;
    }

    .row-compact label {
        margin-bottom: 0;
    }


/* Responsividad para pantallas pequeñas */
@media (max-width: 576px) {
    .custom-form-group {
        flex-direction: column;
        align-items: flex-start;
    }

        .custom-form-group label {
            width: 100%;
            margin-bottom: 0.5rem;
            margin-right: 0;
        }

        .custom-form-group input,
        .custom-form-group select {
            width: 100%;
        }

            .custom-form-group input[type="checkbox"] {
                margin-left: 0; /* Ajuste para pantallas pequeñas */
                width: auto; /* Mantiene el ancho automático */
            }

    .radio-group {

        align-items: flex-start;
        gap: 0.2rem; 
    }

        .radio-group label {
            /*width: 70%;*/
            width: 6em;
        }


}