:root {
    --font-principal: "Montserrat", "Arial", sans-serif;
    --form-label-color: black;
    --form-input-color: black;
    --form-input-background-color: transparent;
    --form-input-border-color: black;
    --form-required-color: #fff;
    --form-error-msg-color: red;
    --form-placeholder-color: #b3b3b3;
    /* legal */
    --form-privacidad-text-color: black;
    --form-privacidad-link-color: black;
    /* submit button */
    --form-submit-font-family: "Montserrat", sans-serif;
    --form-submit-font-size: 16px;

    /* CONFIGURACIÓN DE POSICIÓN DE FLECHA Y TEXTO */
    /* La flecha ahora es un SVG controlado por flexbox */
    --form-submit-padding: .4rem 2rem;
    --form-submit-text-align: center;
    --form-submit-gap: 0.5rem; /* Espacio entre texto y flecha */


    /* submit button - disabled state (default) */
    --form-submit-disabled-bg-color: #cccccc;
    --form-submit-disabled-text-color: #666666;
    --form-submit-disabled-border-color: transparent;

    /* submit button - enabled state */
    --form-submit-enabled-bg-color: #00D092;
    --form-submit-enabled-text-color: #002567;
    --form-submit-enabled-border-color: transparent;

    /* submit button - hover state */
    --form-submit-hover-bg-color: #002567;
    --form-submit-hover-text-color: #00d092;
    --form-submit-hover-border-color: transparent;

    /* Variables adicionales necesarias para mantener la estructura actual */
    --input-padding: 0.35rem 0.75rem;
    --input-radius: 5px;
    --color-primary: #0036dc; /* Azul USIL original, manteniendo para compatibilidad si se requiere */
    --color-white: #ffffff;
}

/* Estilos para el botón de envío habilitado */
input[type="submit"].enabled {
    background-color: var(--form-submit-enabled-bg-color);
    color: var(--form-submit-enabled-text-color);
}

/* CSS Formulario Hubspot - Estructura Anidada */
.usil-hubspot-form {
    padding: 0 1rem;

    label {
        margin-bottom: 0.15rem;
        font-size: 0.9rem;
        padding-left: 0.5rem;
    }

    .hs-input {
        width: -webkit-fill-available !important;
        color: var(--form-input-color);
        padding: var(--input-padding);
        border: 1px solid var(--form-input-border-color);
        border-radius: var(--input-radius);
        background: var(--form-input-background-color);
        margin: .3rem 0;

        option {
            background: var(
                --mainLight,
                #fff
            ); /* Fallback to white if var not defined */
            color: var(--form-input-color);
        }
    }

    .hs-form-required {
        color: var(--form-required-color);
    }

    .hs-form-field {
        margin-bottom: 0.75rem;
    }

    .no-list,
    .inputs-list {
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
        position: relative;
    }

    .invalid {
        border-color: var(--form-error-msg-color);
    }

    .hs-error-msgs {
        margin: 0;
        position: static; /* Restaurar flujo natural para que empuje */
        height: auto;
        display: flex;
        justify-content: flex-start !important;

        .hs-error-msg {
            color: var(--form-error-msg-color);
            font-size: 0.8rem;
            padding: 0;
        }

        li {
            line-height: 10px !important;
        }
    }

    .hs-error-msg {
        margin-bottom: 0;
        transform: none;
        padding: 0;
        text-align: left;
        position: relative !important;
        width: 100%;
        color: var(--form-error-msg-color);
        font-size: 0.625rem;
        margin-top: 2px;
    }

    /* Términos y condiciones */
    .hs_acepto_las_condiciones_para_el_tratamiento_de_mis_datos_personales {
        display: none;
    }

    .inputs-list {
        display: flex;
        justify-content: center;
    }

    .hs-form-radio-display {
        margin: 0 0.5rem;
        color: var(--form-privacidad-text-color);

        .hs-input {
            width: auto !important;
            margin-right: 0.35rem;
        }
    }

    .hs-submit {
        .actions{margin: 0 auto !important;}
    }

    .hs-submit .hs-button {
        text-align: var(--form-submit-text-align);
        white-space: nowrap;
        text-wrap: balance !important;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--form-submit-gap);
    }

    .hs-button {
        margin: 0 auto;
        box-shadow: none;
        border-radius: 2rem;
        padding: var(--form-submit-padding);
        background-color: var(--form-submit-disabled-bg-color);
        font-weight: bold;
        color: var(--form-submit-disabled-text-color);
        border: 1px solid var(--form-submit-disabled-border-color);
        /* display: block;  Replaced by flex above */
        text-wrap: balance !important;
        font-family: var(--form-submit-font-family);
        font-size: var(--form-submit-font-size);
        cursor: not-allowed;
        pointer-events: none;
        
        /* SVG Arrow Styles */
        svg.hs-submit-arrow {
            width: 1.2em;
            height: 1.2em;
            transition: transform 0.2s ease;
        }

        /* Spinner Styles inside Button */
        .hs-submit-spinner {
            width: 1.2em;
            height: 1.2em;
            border: 2px solid rgba(0, 37, 103, 0.2);
            border-top-color: currentColor; /* Matches button text color */
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: inline-block;
        }

        &.enabled {
            background-color: var(--form-submit-enabled-bg-color);
            color: var(--form-submit-enabled-text-color);
            border-color: var(--form-submit-enabled-border-color);
            cursor: pointer;
            pointer-events: auto;

            &:hover {
                background-color: var(--form-submit-hover-bg-color);
                color: var(--form-submit-hover-text-color);
                border-color: var(--form-submit-hover-border-color);
            }
        }

        &:disabled,
        &[disabled] {
            background-color: var(--form-submit-disabled-bg-color);
            color: var(--form-submit-disabled-text-color);
            border-color: var(--form-submit-disabled-border-color);
            pointer-events: none;
        }
    }

    .hs_error_rollup {
        display: none;
    }

    .form-columns-1,
    .form-columns-2,
    .form-columns-3 {
        max-width: 100% !important;
    }

    .form-columns-3 {
        display: flex;
        gap: 1rem;

        @media screen and (width <= 767px){
            & {
                flex-direction: column;
                gap: .2rem;
            }
        }
    }
}

/* CSS Labels Flotantes */
.hs-form-field.has-floating-label {
    position: relative;
    display: flex;
    flex-direction: column;

    /* Estilos para el wrapper personalizado que creamos con JS */
    .input-label-wrapper {
        position: relative;
        /* Esto es clave: la altura de este wrapper es SOLO la del input */
        display: flex;
        flex-direction: column;
    }

    /* Label selector modificado para buscar dentro del wrapper */
    .input-label-wrapper > label {
        /* Estado inicial: Abajo (Centrado Verticalmente en el Wrapper del Input) */
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        padding: var(--input-padding);
        margin: 0;
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.2s ease;
        color: var(--form-label-color);
        font-size: 1rem;
        z-index: 5;
    }

    /* Soporte legacy por si el JS tarda en crear el wrapper (evita saltos bruscos) */
    > label {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        padding: var(--input-padding);
        margin: 0;
        transform: translateY(-50%);
        pointer-events: none;
        transition: all 0.2s ease;
        color: var(--form-label-color);
        font-size: 1rem;
        z-index: 5;
    }

    input::placeholder,
    textarea::placeholder {
        opacity: 0;
        transition: opacity 0.2s;
    }

    /* Estado Flotante (Arriba) */
    &.input-focused {
        .input-label-wrapper > label,
        > label {
            top: 0;
            transform: translate(0, -5px) scale(0.9);
            background-color: var(--color-white);
            font-size: 0.85rem;
            color: var(
                --color-primary
            ); /* Mantener azul para foco activo? O usar --form-label-color? */
            padding: 0 0.3rem;
            margin-left: 0.5rem;
            z-index: 10;
            border-radius: 4px;
        }

        input::placeholder,
        textarea::placeholder {
            opacity: 1;
            color: var(--form-placeholder-color);
        }
    }
}

/* Fix para Selects */
.hs-fieldtype-select {
    position: relative;
    margin: .2rem 0;

    .hs-input {
        width: 100% !important;
    }

    > label {
        transform: translate(0, 0);
        font-size: 0.75rem;
        padding: 0 0.3125rem;
        margin-left: 0.75rem;
        /* color: var(--color-primary); */
        font-family: var(--font-principal);
        font-weight: 400;
        position: absolute;
        top: -16px;
        left: 0;
        /* background-color: var(--color-white); */
        z-index: 10;
    }
}

/* Ajuste específico para selects dentro de campos dependientes (mantener posición original) */
.hs-dependent-field .hs-fieldtype-select > label {
    top: -9px;
}

/* Quitar margen derecho de inputs */
.input {margin-right: 0 !important;}

/* Nuevos terminos */
div[class*="_tratemiento"], div[class*="_tratamiento"] {
    padding-left: 1.5rem;
    label {
        text-indent: 0 !important;
    }
    ul.inputs-list {
        margin-top: 0 !important;
    }
}

/* Campos dependientes */
.hs-dependent-field {
    display: flex;
    flex-direction: column;

    .hs_pg___grado_que_cursa {
        flex-grow: 1;
    }
}

@media (max-width: 767px) {
    .hs-dependent-field {
        flex-direction: column;
        gap: 0.6rem;
    }
}

@media screen and (width <= 767px){
    div.input{
        margin-right: 0 !important;
    }
}

/* Estilo exlusivo para el formulario en https://descubre.usil.edu.pe/landings/cge/eventos/ */
#registro-cge-eventos .hs-input {
    width: 100% !important;
}