/* 
 * Estilos para Formularios de HubSpot Embebidos
 * Utiliza las variables CSS oficiales de HubSpot para anular los estilos por defecto.
 * Documentación: https://developers.hubspot.com/docs/cms/start-building/features/forms/forms
 */

:root {
    /* --- Estilos Globales --- */
    --hsf-default-background__padding: 0px !important;
    --hsf-global__font-family: 'Graphik', sans-serif !important;
    --hsf-progressbar-text__font-family: 'Graphik', sans-serif !important;
    --hsf-default-button__font-family: 'Graphik', sans-serif !important;
    --hsf-default-progressbar-text__font-family: 'Graphik', sans-serif !important;
    --hsf-default-field-input__font-family: 'Graphik', sans-serif !important;
    --hsf-richtext__font-family: 'Graphik', sans-serif !important;
    --hsf-default-richtext__font-family: 'Graphik', sans-serif !important;
    --hsf-richtext__font-size: 14px !important;
    --hsf-progressbar-text__font-size: 14px;
    --hsf-default-progressbar-text__font-size: 14px;
    --hsf-global__color: #333 !important;
    --hsf-global-error__color: #c82333 !important;
    --hsf-erroralert__font-size: 12px !important;
    /* --- Espaciado --- */
    --hsf-row__vertical-spacing: 10px !important;
    --hsf-module__vertical-spacing: 0px !important;

    /* --- Labels y Texto de Campos --- */
    --hsf-field-label__font-family: 'Graphik', sans-serif !important;
    --hsf-field-label__font-size: 14px !important;
    --hsf-field-label__font-weight: 300 !important;
    --hsf-field-label__color: #333 !important;
    --hsf-field-label-requiredindicator__color: #c82333 !important;

    /* --- Inputs (Text, Email, etc.) --- */
    --hsf-field-input__font-family: 'Graphik', sans-serif !important;
    --hsf-default-field-input__font-size: 14px !important;
    --hsf-field-input__color: #333 !important;
    --hsf-field-input__background-color: #fff !important;
    --hsf-field-input__border-color: #ccc !important;
    --hsf-field-input__border-width: 1px !important;
    --hsf-field-input__border-radius: 4px !important;
    --hsf-field-input__padding: 10px 10px !important;

    /* --- Botón de Envío (Estilo SHA) --- */
    --hsf-button__font-family: 'Graphik', sans-serif !important;
    --hsf-button__font-size: 16px !important;
    --hsf-button__color: #555 !important;
    --hsf-button__background-color: #555 !important;
    --hsf-button__border-radius: 4px !important;
    --hsf-button__background-color: none !important;
    --hsf-button__padding: 12px 24px !important;
    --hsf-button__box-shadow: none !important;

    /* --- Estilos Adicionales (Hover, Focus) --- */
    /* Nota: HubSpot no proporciona variables para estados como :hover o :focus. */
    /* Estos se pueden anular con selectores más específicos si es necesario, */
    /* aunque es más complejo debido al iframe. */
}


[data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress {

    height: 6px !important;
}

[data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress>div {
    height: 6px !important;
}

[data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):hover {
    transform: none !important;
}

[data-hsfc-id=Renderer] .hsfc-Button {
    border: solid 1px #555 !important;
    font-weight: 300 !important;
    transition: none !important;
}

[data-hsfc-id=Renderer] .hsfc-Button:hover {
    border: solid 1px #555 !important;
    background: #555 !important;
    color: #fff !important;
    transition: none !important;
}

[data-hsfc-id=Renderer] .hsfc-FieldLabel {
    font-weight: 300 !important;
}





/* --- Estilos específicos para footer oscuro --- */
.form-footer-hubspot {
    width: 100%;
    --hsf-global__color: #8E8E8E !important;
    --hsf-field-label__color: #8E8E8E !important;
    --hsf-field-input__color: #fff !important;
    --hsf-field-input__background-color: transparent !important;
    --hsf-field-input__border-color: transparent !important;
    --hsf-field-input__border-radius: 0px !important;
    --hsf-field-input__padding: 10px 0px !important;
    --hsf-button__color: #fff !important;
    --hsf-button__background-color: transparent !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] input,
.form-footer-hubspot [data-hsfc-id=Renderer] textarea {
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
}

/* Primer botón (Previous) - estilo discreto sin borde */
.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons .hsfc-Button:first-child {
    border: none !important;
    color: #8E8E8E !important;
    background: transparent !important;
    border-radius: 0px !important;
    padding: 4px 0 !important;
    min-width: auto !important;
    text-decoration: none !important;
    font-size: 12px !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons .hsfc-Button:first-child:hover {
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Último botón (Next/Submit) - estilo botón con borde */
.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons .hsfc-Button:last-child {
    border: solid 1px #8E8E8E !important;
    color: #8E8E8E !important;
    background: transparent !important;
    border-radius: 0px !important;
    padding: 4px 12px !important;
    min-width: auto !important;
    font-size: 12px !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-NavigationRow__Buttons .hsfc-Button:last-child:hover {
    border: solid 1px #8E8E8E !important;
    background: #8E8E8E !important;
    color: #fff !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] input::placeholder,
.form-footer-hubspot [data-hsfc-id=Renderer] textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}



/* Contenedor de botones con flex */
.form-footer-hubspot [data-hsfc-id="NavigationRow"] .hsfc-NavigationRow__Buttons {
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* Cuando solo hay un botón, alinearlo a la derecha */
.form-footer-hubspot [data-hsfc-id="NavigationRow"] .hsfc-NavigationRow__Buttons .hsfc-Button:only-child {
    margin-left: auto !important;
}


/* Estilos para el dropdown/select */
.form-footer-hubspot [data-hsfc-id=Renderer] select {
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: #fff !important;
}

/* Opciones del dropdown cuando se despliega */
.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-DropdownOptions {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem {
    color: #333 !important;
    background-color: #fff !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:hover {
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List {
    padding: 4px !important;
}

/* Estilos para checkboxes */
.form-footer-hubspot [data-hsfc-id=Renderer] input[type="checkbox"].hsfc-CheckboxInput {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #8E8E8E !important;
    border-radius: 0px !important;
    background-color: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] input[type="checkbox"].hsfc-CheckboxInput:checked {
    background-color: #8E8E8E !important;
    border-color: #8E8E8E !important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] input[type="checkbox"].hsfc-CheckboxInput:checked::after {
    content: "✓" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Label del checkbox */
.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-CheckboxInput__Label {
    color: #8E8E8E !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}



.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-DropdownOptions__Search {
  display:none!important;
}

.form-footer-hubspot [data-hsfc-id=Renderer] .hsfc-RichText {
  color: #8E8E8E !important;
}

/* --- Estilos específicos para formulario sobre fondo oscuro --- */
.form-dark {
    width: 100%;
    --hsf-global__color: #FFFFFF !important;
    --hsf-field-label__color: #FFFFFF !important;
    --hsf-field-input__color: #333333 !important;
    --hsf-field-input__background-color: #FFFFFF !important;
    --hsf-field-input__border-color: rgba(255, 255, 255, 0.3) !important;
    --hsf-button__color: #FFFFFF !important;
    --hsf-button__background-color: transparent !important;
}

.form-dark [data-hsfc-id=Renderer] input,
.form-dark [data-hsfc-id=Renderer] textarea,
.form-dark [data-hsfc-id=Renderer] select {
    background-color: #FFFFFF !important;
    color: #333333 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

.form-dark [data-hsfc-id=Renderer] input::placeholder,
.form-dark [data-hsfc-id=Renderer] textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

.form-dark [data-hsfc-id=Renderer] input:focus,
.form-dark [data-hsfc-id=Renderer] textarea:focus,
.form-dark [data-hsfc-id=Renderer] select:focus {
    border-color: #BEAFA2 !important;
    outline: none !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-Button {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-Button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-CheckboxInput__Label,
.form-dark [data-hsfc-id=Renderer] .hsfc-RadioInput__Label {
    color: #FFFFFF !important;
}

.form-dark [data-hsfc-id=Renderer] input[type="checkbox"].hsfc-CheckboxInput,
.form-dark [data-hsfc-id=Renderer] input[type="radio"].hsfc-RadioInput {
    background-color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.form-dark [data-hsfc-id=Renderer] input[type="checkbox"].hsfc-CheckboxInput:checked,
.form-dark [data-hsfc-id=Renderer] input[type="radio"].hsfc-RadioInput:checked {
    background-color: #FFFFFF !important;
    border-color: #BEAFA2 !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-DropdownOptions {
    background-color: #FFFFFF !important;
    border: 1px solid #ccc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem {
    color: #333333 !important;
    background-color: #FFFFFF !important;
}

.form-dark [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:hover {
    background-color: #F5F5F5 !important;
    color: #333333 !important;
}