/* OmniFormStylesCJSA.css
   Scoped SLDS-aligned stylesheet for OmniScript forms embedded in Sites.
   Scope class to apply on OmniScript container: os-form-scope
   Goal: Ensure these styles take precedence over host Site CSS while remaining safe and SLDS-consistent.
*/

/* ==========================================
   1. FAMILIA PRINCIPAL: OPEN SANS
   ========================================== */

/* Light (Grosor 300) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* Light Italic (Grosor 300, Cursiva) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* Italic (Grosor 400, Cursiva) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

/* Semibold (Grosor 600) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* Semibold Italic (Grosor 600, Cursiva) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-SemiboldItalic.woff2') format('woff2');
    font-weight: 600;
    font-style: italic;
}

/* Bold Italic (Grosor 700, Cursiva) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

/* ExtraBold (Grosor 800) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

/* ExtraBold Italic (Grosor 800, Cursiva) */
@font-face {
    font-family: 'Open Sans';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
}

/* ==========================================
   2. FAMILIA SECUNDARIA: OPEN SANS CONDENSED
   ========================================== */
/* Nota: Las versiones "Condensed" (comprimidas) se suelen declarar 
   bajo un nombre de familia ligeramente distinto para evitar conflictos 
   en navegadores antiguos, agregando además la propiedad font-stretch. */

/* Condensed Light (Grosor 300) */
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-CondensedLight.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-stretch: condensed;
}

/* Condensed Light Italic (Grosor 300, Cursiva) */
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-CondensedLightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
    font-stretch: condensed;
}

/* Condensed Bold (Grosor 700) */
@font-face {
    font-family: 'Open Sans Condensed';
    src: url('/sfsites/c/resource/OpenSansFamily/OpenSans-CondensedBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-stretch: condensed;
}

:root {
    /* Define Open Sans de forma global para todo SLDS */
    --slds-g-font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
    --lwc-fontFamily: 'Open Sans', Helvetica, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, dl{
    font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
}


.navigationBar{
    justify-items: center !important;
}

.slds-grid.slds-wrap.slds-grid_align-end.slds-var-m-top_medium {
    justify-content: center !important;
}

.slds-modal__footer.slds-modal__footer__reflow_resize {
    text-align: center !important;
}

footer{
    container-type: unset !important;
}




/* 1) Buttons */

.slds-checkbox .slds-checkbox_faux, .slds-checkbox .slds-checkbox--faux {
    /* 1. CORRECCIÓN DE DISPLAY (Esto activa el width y height en el navegador) */
    display: inline-block !important;
    flex-shrink: 0 !important;

    /* 2. TAMAÑO, BORDES Y REDONDEO */
    width: 30px !important;                 
    height: 30px !important;                
    border-radius: 9px !important;          
    border-width: 2px !important;           
    border-style: solid !important;
    margin: 3px !important;
    

}

.slds-checkbox [type=checkbox]:checked+.slds-checkbox_faux,.slds-checkbox [type=checkbox]:checked+.slds-checkbox--faux,.slds-checkbox [type=checkbox]:checked~.slds-checkbox_faux,.slds-checkbox [type=checkbox]:checked~.slds-checkbox--faux,.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux,.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox--faux {

    --slds-c-checkbox-color-background: var(--slds-c-checkbox-color-background-checked, var(--sds-c-checkbox-color-background-checked));

    background-color: #018765 !important;
    border-color: #018765 !important;
}

.slds-checkbox [type=checkbox]:checked+.slds-checkbox_faux:after,.slds-checkbox [type=checkbox]:checked+.slds-checkbox--faux:after,.slds-checkbox [type=checkbox]:checked~.slds-checkbox_faux:after,.slds-checkbox [type=checkbox]:checked~.slds-checkbox--faux:after,.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox_faux:after,.slds-checkbox [type=checkbox]:checked+.slds-checkbox__label .slds-checkbox--faux:after {

   border-bottom: var(--lwc-borderWidthThick, 2px) solid #FFFFFF !important;
    border-left: var(--lwc-borderWidthThick, 2px) solid #FFFFFF !important;
}

.slds-checkbox [type=checkbox]:focus+.slds-checkbox_faux,.slds-checkbox [type=checkbox]:focus+.slds-checkbox--faux,.slds-checkbox [type=checkbox]:focus~.slds-checkbox_faux,.slds-checkbox [type=checkbox]:focus~.slds-checkbox--faux,.slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox_faux,.slds-checkbox [type=checkbox]:focus+.slds-checkbox__label .slds-checkbox--faux {

/* 1. Cambiamos el color de borde del cuadro a verde al enfocar */
    --slds-c-checkbox-color-border: #018765;

    /* 2. REEMPLAZA TODA ESTA LÍNEA PARA CREAR EL CONTORNO VERDE SÓLIDO */
    --slds-c-checkbox-shadow: 0 0 0 4px #FFFF, 0 0 0 6px #018765 !important;    

}

.os-actions,
.slds-page-header__col-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.slds-button {
  font-weight: 600 !important;
  border-radius: 100px !important;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
  text-align: center;
}

.slds-button[lwc-24ep20h9ret]{
  color: #018765 !important;
  line-height: 16px !important;
}

.slds-icon-text-success{
    --slds-c-icon-color-foreground: #018765 !important;
}

.slds-button[lwc-tpesat930c]{
  font-size: 18px !important;
  height: 48px !important;
  padding: var(--Spacing-spacing-16, 16px) var(--Spacing-spacing-32, 32px) !important;
  justify-content: center;
  color: #018765 !important;
}

.slds-button_brand {
  background: #018765 !important;
  border-color: #018765 !important;
  color: #ffffff !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 16px !important;
}

.slds-radio_button__label, .slds-radio--button__label{
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 6px !important;
    padding-top: 6px !important;
}

.slds-radio_button [type="radio"]:checked + .slds-radio_button__label, .slds-radio_button [type="radio"]:checked + .slds-radio_button__label:hover {
    background-color: #018765 !important;
    border-color: #018765 !important;
    color: white !important;
}

button.slds-button.slds-button_success[lwc-40a585din3p] {
    color: white !important;
}

.slds-button_brand:hover {
  background: #00392A !important;
  border-color: #00392A !important;
}

.slds-button__icon[data-key="preview"], [data-key="download"] {
    width: 24px !important;
    height: 24px !important;
}

.uiButton--brand:hover {
    color: inherit !important;
}

.slds-form-element__label:empty[lwc-24ep20h9ret] {
    display: none;
}

.slds-button.slds-button_neutral {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  font-size: 16px !important;
  text-align: center !important;
  color: #018765;
  vertical-align: middle !important;
  border: 1px solid var(--Brand-Personas-web-pers-primary-base, #018765) !important;
  background-color: #ffffff !important;
}

.slds-button_destructive {
  background: #ba0517 !important;
  border-color: #ba0517 !important;
  color: #ffffff !important;
}

/* Contenedor centrado genérico */ 
.contenedor { 
  text-align: center; 
}

/* 2) Inputs (Text, LongText, Phone; etc) y Labels */

.slds-form-element__label {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    display: inline-block;
    color: #181B25 !important;
    font-size: 16px !important;
    font-style: normal !important;
    padding-bottom: 16px !important;
    letter-spacing: -0.32px !important;
    font-weight: 400 !important;
    line-height: 22px !important; /* 137.5% */
    padding-top: 0px !important;
}

/* 1. Atacamos todas las variantes posibles de inputs deshabilitados para que no se escape ninguno */
.slds-input[disabled], 
.slds-input.slds-is-disabled,
.slds-input[readonly][disabled],
[role=combobox] input[readonly][disabled], 
input[readonly][role=combobox][disabled],
.slds-textarea[disabled],
.slds-select[disabled] {
    /* Fondo Gris Corp requerido */
    color: #181B25 !important;
    background-color: #EFF2F5 !important;
    -webkit-text-fill-color: #181B25 !important; /* Truco vital para Chrome/Safari en inputs disabled */
    
    cursor: not-allowed;
    opacity: 1 !important; /* Evita que el navegador les meta opacidad por defecto */
}
.slds-input[readonly] {
    --slds-c-input-spacing-inline-start: 0;
    border-color: #EFF2F5 !important;
    background-color: #EFF2F5 !important;
    color: #181B25 !important;
    font-weight: var(--lwc-inputReadonlyFontWeight, 400);
    font-size: 16px !important;
}

[role=combobox] input[readonly][disabled], input[readonly][role=combobox][disabled] {
    border-color: #EFF2F5 !important;
    background-color: #EFF2F5 !important;
}

.vlocity-input.slds-input {
    border-radius: 12px !important;
}

.slds-input {
    padding: 16px !important;
    border-radius: 12px !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.32px;
}

.slds-has-error .slds-input {
    --slds-c-input-color-border: var(--slds-g-color-error-base-40, var(--lwc-colorBorderError, rgb(234, 0, 195))) !important;
    --slds-c-input-shadow: var(--slds-g-color-error-base-40, var(--lwc-colorBorderError, rgb(125, 145, 38))) 0 0 0 var(--lwc-borderWidthThin, 1px) inset !important;
    --slds-c-input-color-background: var(--sds-c-input-color-background, var(--sds-c-input-color-background, var(--slds-g-color-neutral-base-100, var(--lwc-colorBackgroundInput, rgb(255, 255, 255)))));
    --slds-c-input-text-color: var(--slds-c-input-text-color, var(--sds-c-input-text-color));
    background-clip: padding-box;
}

.slds-textarea {
    border-radius: 12px !important;
    height: 81px !important;
    font-size: 16px;
}

.omniscript-step__body .slds-size_12-of-12{
  padding-left: 20px !important;
  padding-right: 20px !important;  
  box-sizing: border-box !important;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 16px;
}

footer.slds-modal__footer.slds-text-align_center {
    box-shadow: none !important;
    border: none !important;
}

.slds-modal__header{
    border: none !important;;
}

.slds-modal__footer{
    border: none !important;
}

.slds-grid_align-end, .slds-grid--align-end {
    justify-content: center;
}

.slds-modal__footer .slds-button+.slds-button {
    margin-left: var(--lwc-spacingXSmall, 0.5rem);
    background-color: #018765 !important;
    color: #fff;
}

/*TextBlock

runtime_omnistudio_omniscript-omniscript-text-block[data-omni-key="TextBlock5"] {
    border-radius: 12px;
    background-color: #018765 !important;
    color: white;
}
*/
/* =======================================================
   1. ESTILOS PARA DESKTOP (Pantallas medianas y grandes)
   ======================================================= */
@media (min-width: 48em) {
    /* Forzamos al contenedor principal a centrar las columnas */
    .omniscript-body .slds-grid.slds-wrap.slds-gutters.slds-p-horizontal_medium {
        justify-content: center !important;
    }

    /* La columna de botones ocupa el 100% para poder centrar su contenido interno */
    .omniscript-body .slds-col.slds-medium-size_6-of-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Alineamos los botones al centro en horizontal */
    .omniscript-button-position {
        display: flex !important;
        justify-content: center !important;
        flex-direction: row !important; 
        gap: 16px !important;
    }

    /* Botones con ancho automático basado en texto pero con un mínimo */
    .omniscript-btn-next, .omniscript-btn-previous {
        width: auto !important;
        min-width: 190px !important;
        margin-left: 0px !important;
    }
}

/* =======================================================
   2. ESTILOS PARA MOBILE (Pantallas pequeñas)
   ======================================================= */
@media (max-width: 47.99em) {
    /* Seleccionamos específicamente el contenedor que OmniScript usa en móvil */
    .slds-hide_medium .slds-grid.slds-wrap {
        display: flex !important;
        flex-direction: column !important; /* Apilado vertical */
        align-items: center !important;    /* Centrado horizontal */
        justify-content: center !important;
        gap: 12px !important;
    }

    /* Forzamos a que las columnas de los botones no tengan paddings extraños */
    .slds-hide_medium .slds-col.slds-size_12-of-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Ajuste de botones: Siguiente arriba, Regresar abajo */
    .slds-hide_medium .omniscript-btn-next {
        order: 1 !important;
        width: 100% !important;
        max-width: 280px !important;
    }

    .slds-hide_medium .omniscript-btn-previous {
        order: 2 !important;
        width: 100% !important;
        max-width: 280px !important;
    }
    
    /* Quitamos el margen derecho que Salesforce pone por defecto y descentra */
    .omniscript-btn-next, .omniscript-btn-previous {
        margin: 0 auto !important;
    }
}

/* =======================================================
   3. LIMPIEZA GENERAL (Afecta a ambos)
   ======================================================= */
.omniscript-sfl-actions {
    display: none !important; /* Oculta el botón 'Cancel' */
}

/*Color de los iconos de fecha*/

runtime_omnistudio_common-icon.Date{
    --slds-g-color-accent-2: #018765 !important;
    --lwc-brandAccessible: #046950 !important;
}

/*Radio Btn Groups*/

runtime_omnistudio_omniscript-omniscript-radio{
    padding-top: 8px !important;
}

runtime_omnistudio_omniscript-omniscript-radio .slds-form-element__control {
    margin-top: 8px !important;
}

/* =======================================================
   7. ESTILO PERSONALIZADO PARA RADIO BUTTON GROUP
   ======================================================= */

/* 1. Atacamos el primer botón del grupo (ej. el botón "Si") */
.slds-radio_button-group .slds-radio_button:first-child .slds-radio_button__label {
    border-radius: 100px 0 0 100px !important;
    border-color: #018765 !important;
    border-right-width: 0px !important; /* Evita doble borde en el medio */
}

/* 2. Atacamos el último botón del grupo (ej. el botón "No") */
.slds-radio_button-group .slds-radio_button:last-child .slds-radio_button__label {
    border-radius: 0 100px 100px 0 !important;
    border-color: #018765 !important;
    border-left: 1px solid #018765 !important;
}

.slds-radio_button [type="radio"]:checked + .slds-radio_button__label,
.slds-radio_button [type="radio"]:checked + .slds-radio_button__label:hover {
    background-color: #018765 !important;
    border-color: #018765 !important;
    color: white !important;
}

/* 4. Ajuste general del color de borde para todos los botones del grupo */
.slds-radio_button__label {
    border: 1px solid #018765 !important;
    color: #018765 !important; /* Texto verde cuando no está seleccionado */
}

/* 5. Ajuste para que el borde del boton derecho salga al centro de ambos */

.slds-radio_button+.slds-radio_button, .slds-radio_button+.slds-radio--button, .slds-radio--button+.slds-radio_button, .slds-radio--button+.slds-radio--button{
    margin: -1px !important;
    border-left: none !important;
}

.slds-radio_button-group, .slds-radio--button-group {
    border: none !important;
}

/*Estilos de Tooltip (Icono de Help Text)*/

runtime_omnistudio_common-tooltip .slds-button_icon {
    width: 1.1rem !important;
    height: 0.75rem !important;
    vertical-align: middle !important;
}

runtime_omnistudio_common-tooltip .slds-button__icon {
    width: 0.75rem !important;
    height: 0.75rem !important;
    line-height: 1 !important;
} 

/* =======================================================
   BARRA DE PROGRESO (Step Chart)
   ======================================================= */

/* 1. EL PUNTO COMPLETADO: Quitamos el centro blanco y forzamos VERDE TODO */
.slds-progress__item.slds-is-completed .slds-progress__marker,
.slds-progress__item.slds-is-completed .slds-progress__marker_icon,
.slds-progress__item.slds-is-completed .omni-stepchart-button-completed {
    background: #018765 !important;
    background-color: #018765 !important;
    border-color: #018765 !important;
    /* Esto es vital para quitar el efecto de "anillo" en completados */
    box-shadow: none !important; 
}

/* 2. EL ICONO CHECK: Forzamos BLANCO */
/* Atacamos el SVG y el contenedor del icono de OmniStudio */
.slds-progress__item.slds-is-completed svg,
.slds-progress__item.slds-is-completed .omni-hz-stepchart-completed-icon,
.slds-progress__item.slds-is-completed use {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* 3. EL PASO ACTUAL: Mantenemos el efecto de anillos concéntricos */
.slds-progress__item.slds-is-active .slds-progress__marker {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 4px solid #018765 !important; 
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #018765 !important;
    z-index: 10;
}

/* 4. PASOS FUTUROS: Centro blanco y borde gris */
.slds-progress__item:not(.slds-is-active):not(.slds-is-completed) .slds-progress__marker {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 4px solid #CACFD8 !important;
    box-shadow: none !important;
}

/* 5. LA LÍNEA DE PROGRESO: Verde para lo pasado, gris para lo futuro */
.slds-progress-bar {
    background-color: #CACFD8 !important;
}

.slds-progress-bar__value {
    background-color: #018765 !important;
}

/* 6. CORRECCIÓN PARA EL ICONO: Evitar que herede el verde del borde */
.omni-hz-stepchart-completed-icon {
    background-color: transparent !important;
    border: none !important;
}

.slds-is-active .omni-hz-stepchart-label {
    font-weight: 600 !important;
    color: #717784 !important;
    font-size: 12px !important;
}

/*Edit Blocks*/

.omni-edit-block-card {
    box-shadow: var(--slds-g-shadow-1);
    border: var(--slds-g-sizing-border-1, 1px) solid var(--slds-g-color-neutral-base-60, #939393);
    border-color: #CACFD8 !important;
    background-color: #EFF2F5 !important;
    border-radius: 12px !important;
}

.omni-edit-block-card .slds-button_icon-border-filled, .slds-button--icon-border-filled {
    background-color: #EFF2F5 !important;
}
.slds-progress__marker {
    border-radius: 50% !important; /* Fuerza a que vuelva a ser un círculo */
    width: 1rem !important; /* Iguala el ancho... */
    height: 1.02rem !important; /* ...con el alto */
    min-height: unset !important; /* Evita que herede el alto de un botón estándar */
    padding: 0 !important;
}
/* Reemplaza tu regla genérica .slds-button por estas más específicas */
.slds-button_brand, 
.slds-button_neutral,
.slds-button_success,
.omniscript-btn-next, 
.omniscript-btn-previous {
  border-radius: 100px !important;
}


/* =======================================================
   STYLES DE LANDING
   ======================================================= */

/* Estilo del Título Principal */
[data-test-id="Block-0-Block-0-Text-2"] strong,
[data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output strong {
    display: block !important;
    width: 100% !important; 
    font-size: 40px !important; 
    font-weight: 700 !important; 
    line-height: 46px !important; 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
}

/* =======================================================
   STYLES DE LANDING: ContainerFlex, Text & Image
   ======================================================= */

/* Tipografía Dinámica del Título Principal */
[data-test-id="Block-0-Block-0-Text-2"] h1,
[data-test-id="Block-0-Block-0-Text-2"] strong,
[data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output h1,
[data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output strong {
    display: block !important;
    width: 100% !important; 
    font-size: clamp(26px, 3.2vw, 40px) !important; 
    font-weight: 700 !important; 
    line-height: 1.2 !important; 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
    word-break: break-word !important;
}

/* Tipografía Dinámica del Subtítulo */
[data-test-id="Block-0-Block-0-Text-3"] p,
[data-test-id="Block-0-Block-0-Text-3"] .slds-rich-text-editor__output p {
    font-size: clamp(14px, 1.8vw, 18px) !important;
    line-height: 1.4 !important;
}

/* =======================================================
   STYLES DE LANDING: ContainerFlex, Text, Image & Layout
   ======================================================= */

/* Tipografía Dinámica del Título Principal */
[data-test-id="Block-0-Block-0-Text-2"] h1,
[data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output h1 {
    display: block !important;
    width: 100% !important; 
    font-size: clamp(26px, 3.2vw, 40px) !important; 
    font-weight: 700 !important; 
    line-height: 1.2 !important; 
    font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
    word-break: break-word !important;
}

/* Tipografía Dinámica del Subtítulo */
[data-test-id="Block-0-Block-0-Text-3"] p,
[data-test-id="Block-0-Block-0-Text-3"] .slds-rich-text-editor__output p {
    font-size: clamp(14px, 1.8vw, 18px) !important;
    line-height: 1.4 !important;
}

/* --- 1. DESKTOP GRANDE (> 1323px) --- */
@media (min-width: 1324px) {
    .flexcard-normal,
    [data-test-id="ContainerFlex"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    [data-test-id="ContainerFlex"] .slds-grid {
        align-items: center !important;
    }

    [data-test-id="ContainerImage"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    [data-test-id="ContainerImage"] img {
        width: 100% !important;
        max-width: 420px !important;
        height: auto !important;
        display: block !important;
    }
    [data-test-id="Identificacion"] {
        width: 45% !important;
    }
}

/* --- 2. TRANSICIÓN PROGRESIVA (1025px a 1323px): 90% ancho + Margen Imagen --- */
@media (min-width: 1024px) and (max-width: 1323px) {
    [data-test-id="Block-0-Block-0-Text-2"] h1,
    [data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output h1 {
        font-size: 28px !important; /* Baja de 40px a 28px */        
        line-height: 1.25 !important;   
    }   
    [data-test-id="Block-0-Block-0-Text-3"] p,    
    [data-test-id="Block-0-Block-0-Text-3"] .slds-rich-text-editor__output p {
        font-size: 15px !important; /* Baja a 15px */       
        line-height: 1.35 !important;  
    }
    .flexcard-normal,
    [data-test-id="ContainerFlex"] {
        width: 105% !important;
        max-width: 105% !important;

        box-sizing: border-box !important;
    }

    [data-test-id="ContainerFlex"] .slds-grid {
        align-items: flex-start !important;
    }

    /* Margen superior exclusivo para la imagen en este rango */
    [data-test-id="ContainerImage"] {
        display: flex !important;
        justify-content: center !important;
        margin-top:50px !important;
        padding-right:40px;
    }

    [data-test-id="ContainerImage"] img {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
    }
    [data-test-id="Identificacion"] {
        width: 60% !important;
    }
}

/* --- 3. TABLET Y PANTALLA COMPLETA (781px a 1024px) --- */
@media (min-width: 781px) and (max-width: 1023px) {
    .flexcard-normal,
    [data-test-id="ContainerFlex"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [data-test-id="ContainerFlex"] .slds-grid {
        align-items: center !important;
    }

    [data-test-id="ContainerImage"] img {
        width: 100% !important;
        height: auto !important;
    }
    [data-test-id="Identificacion"] {
        width: 60% !important;
    }
}

/* --- 4. MOBILE / RESPONSIVE (<= 780px): Flex Direction, Order & Padding --- */
@media (max-width: 780px) {
    .flexcard-normal,
    [data-test-id="ContainerFlex"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Forzar dirección de columna y reseteo de márgenes en grid de LWC */
    [data-test-id="ContainerFlex"],
    [data-test-id="ContainerFlex"] .block-container,
    [data-test-id="ContainerFlex"] .slds-grid,
    [data-test-id="ContainerFlex"] .block-container > .slds-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding-bottom: 0 !important;
        text-align
    }

    /* Texto y Formulario primero */
    [data-test-id="ContainerText"] {
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        order: 2 !important;
        margin-bottom: 20px !important;
    } 

    [data-test-id="Identificacion"] {
        width: 100% !important;
    }

    /* Imagen abajo sin hueco sobrante */
    [data-test-id="ContainerImage"] {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important; 
        max-width: 100% !important;
        height: auto !important;
        margin-bottom:-40px !important;
        padding-bottom: 0 !important;
        padding-right: 50px !important;
        order: 1 !important;
    }

    [data-test-id="ContainerImage"] .slds-image,
    [data-test-id="ContainerImage"] runtime_omnistudio_flexcards-flex-img {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    [data-test-id="ContainerImage"] img {
        display: block !important;
        max-width: 300px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
    }
}

/* Ajuste específico para Identificación (entre 480px y 780px) */
@media (min-width: 480px) and (max-width: 780px) {
    [data-test-id="Identificacion"] {
        width: 70% !important;
        max-width: 70% !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        text-align: left !important;
    }
}

/* Reducción tipográfica para móviles muy pequeños (< 400px) */
@media (max-width: 400px) {
    [data-test-id="Block-0-Block-0-Text-2"] h1,
    [data-test-id="Block-0-Block-0-Text-2"] strong,
    [data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output h1,
    [data-test-id="Block-0-Block-0-Text-2"] .slds-rich-text-editor__output strong {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    [data-test-id="Block-0-Block-0-Text-3"] p,
    [data-test-id="Block-0-Block-0-Text-3"] .slds-rich-text-editor__output p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
}



[data-omni-key="dme_firmante_cr"],
[data-omni-key="dme_representante_legal_blcr"],
[data-omni-key="dme_miembro_junta_directiva"],
[data-omni-key="dme_agente_residente"],
[data-omni-key="dme_gerente_general_cr"],
[data-omni-key="dme_administrador_unico_cr"],
[data-omni-key="dme_control_otros_medios_cr"],
[data-omni-key="dme_otro_cr"],
[data-omni-key="dme_firmante_blrd"],
[data-omni-key="dme_junta_directiva"],
[data-omni-key="dme_representante_legal"] {
    padding: 0px !important; /* Ajusta el valor en px según necesites */
    margin-bottom: -10px !important;
    margin-top: -4px !important;
}

[data-omni-key="dme_cargo_junta_directiva"] .slds-form-element__control .slds-checkbox,
[data-omni-key="dme_cargo_junta_directiva"] .slds-checkbox_button-group,
[data-omni-key="dme_cargo_junta_directiva"] .slds-form-element__control label {

margin-top: 16px !important;
}

[data-omni-key="dme_cargo_junta_directiva_cr"] .slds-form-element__control .slds-checkbox,
[data-omni-key="dme_cargo_junta_directiva_cr"] .slds-checkbox_button-group,
[data-omni-key="dme_cargo_junta_directiva_cr"] .slds-form-element__control label {

margin-top: 16px !important;
}

/* Redondear por completo la píldora (Pill) */
.slds-pill {
    border-radius: 100px !important;       
    padding: 0.25rem 0.85rem !important; 
    background-color: #EFF2F5 !important; 
    border: 1px solid #EFF2F5 !important; 
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right:10px !important;
    margin-top: 10px !important;
}

/* Desktop: Atacamos directamente al componente nuevo sin intentar entrar con espacios */
runtime_omnistudio_omniscript-omniscript-edit-block-wrapper[class*="omni-edit-block"] runtime_omnistudio_omniscript-omniscript-edit-block-new .omni-edit-block-card.editblock-new {
    margin-left: 20px !important;  
    margin-right: 10px !important; 
    width: calc(100% - 30px) !important; 
    position: relative !important;
    top: 12px !important; 
}


@media (max-width: 767px) {
    /* Forzamos al tag host del New a soltar el ancho completo de Salesforce */
    runtime_omnistudio_omniscript-omniscript-edit-block-wrapper runtime_omnistudio_omniscript-omniscript-edit-block-new {
        width: 100% !important;
        display: block !important;
        clear: both !important;
    }

    /* Modificamos la card interna dentro del flujo de herencia directa */
    runtime_omnistudio_omniscript-omniscript-edit-block-wrapper runtime_omnistudio_omniscript-omniscript-edit-block-new .omni-edit-block-card.editblock-new {
        margin-top: 0px !important;
        top: 0px !important;
        width: calc(100% - 28px) !important;
        margin-left: auto !important;  
        margin-right: auto !important; 
    }
}

.Card-UpdateSesion {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[data-test-id="Block-Click"],
[data-test-id="Block-CheckEmail"],
[data-test-id="Block-TypeCode"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    float: none !important;
}

@media (min-width: 768px) {
    /* Forzamos fila estricta para evitar el efecto pirámide */
    .Card-UpdateSesion {
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
    }

    [data-test-id="Block-Click"],
    [data-test-id="Block-CheckEmail"],
    [data-test-id="Block-TypeCode"] {
        width: 31% !important; 
        max-width: 380px !important; 
        min-width: 240px !important; 
        flex: 1 1 auto !important; 
        margin: 0 12px !important; 
    }
}

@media (max-width: 767px) {
    /* Permitimos que se apilen una debajo de otra */
    .Card-UpdateSesion {
        flex-direction: column !important;
        flex-wrap: wrap !important; 
    }
    
    [data-test-id="Block-Click"],
    [data-test-id="Block-CheckEmail"],
    [data-test-id="Block-TypeCode"] {
        width: 100% !important;
        max-width: 340px !important; 
        margin: 0 auto 16px auto !important; 
    }
}

/*OTP*/

.otp-container,
.otp-card {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.otp-container{
    margin-bottom: -35px;
}

.otp-card__icon-container {
  margin-bottom: 16px;
}

.otp-card__icon {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.otp-card__title {
  display: block;
  color: #000000;
  font-weight: 700;
  line-height: 1.25;
}

.otp-card__subtitle {
  display: block;
  color: #505663;
  font-weight: 400;
  line-height: 1.35;
}
  .otp-card__subheading-container {
    margin-top: -40px;
    margin-bottom: -35px;
  }


/* Base de la tarjeta de mensaje MessagingOTP */
[data-omni-key="MessagingOTP"] .slds-scoped-notification {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  background-color: #FEF7EC !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

[data-omni-key="MessagingOTP"] .slds-media__figure {
  margin-right: 10px !important;
  display: flex !important;
  align-items: center !important;
}

[data-omni-key="MessagingOTP"] :is(.slds-icon-text-warning, svg) {
  fill: #DE9D38 !important;
  color: #DE9D38 !important;
}

[data-omni-key="MessagingOTP"] :is(.slds-media__body, .slds-media__body *) {
  color: #181B25 !important;
  font-weight: 500 !important;
  margin: 0 !important;
}


/* =======================================================
   2. DESKTOP (> 1024px)
   ======================================================= */
@media (min-width: 1025px) {
  .otp-container,
  .otp-card {
    max-width: 850px;
    padding: 0 24px;
    margin-bottom: 3px;

  }


  .otp-card__title {
    font-size: 32px;
  }
  .otp-card__subtitle {
    font-size: 20px;
  }

  [data-omni-key="MessagingOTP"] .slds-scoped-notification {
    max-width: 720px !important;
    padding: 14px 20px !important;
    margin-top: 24px !important;
  }

  [data-omni-key="MessagingOTP"] :is(.slds-icon-text-warning, svg) {
    width: 24px !important;
    height: 24px !important;
  }

  [data-omni-key="MessagingOTP"] :is(.slds-media__body, .slds-media__body *) {
    font-size: 16px !important;
  }
}


/* =======================================================
   3. TABLET (481px a 1024px)
   ======================================================= */
@media (min-width: 691px) and (max-width: 1024px) {
  .otp-container,
  .otp-card {
    max-width: 680px;
    padding: 0 20px;
    margin-bottom: 3px;
  }

  .otp-card__heading-container {
    margin-bottom: 6px;
  }

  .otp-card__title {
    font-size: 26px;
  }

  .otp-card__subtitle {
    font-size: 17px;
  }

  [data-omni-key="MessagingOTP"] .slds-scoped-notification {
    max-width: 500px !important;
    padding: 12px 18px !important;
    margin-top: 20px !important;
  }

  [data-omni-key="MessagingOTP"] :is(.slds-icon-text-warning, svg) {
    width: 22px !important;
    height: 22px !important;
  }

  [data-omni-key="MessagingOTP"] :is(.slds-media__body, .slds-media__body *) {
    font-size: 15px !important;
  }
}

/* =======================================================
   4. MOBILE (<= 480px)
   ======================================================= */
@media (max-width: 690px) {
  .otp-container,
  .otp-card {
    max-width: 100%;
    margin-bottom: 3px;

  }

  .otp-card__heading-container {
    margin-bottom: -8px;
  }

  .otp-card__title {
    font-size: 20px;
    line-height: 1.2;
  }

  .otp-card__subtitle {
    font-size: 14px;
  }

  [data-omni-key="MessagingOTP"] .slds-scoped-notification {

    max-width: 100% !important;
    padding: 15px 16px !important;
    margin-top: 16px !important;

    
  }

  [data-omni-key="MessagingOTP"] :is(.slds-icon-text-warning, svg) {
    width: 18px !important;
    height: 18px !important;
  }

  [data-omni-key="MessagingOTP"] :is(.slds-media__body, .slds-media__body *) {
    font-size: 13.5px !important;
      
  }
}

/* 1. Reset para forzar que ambos elementos compartan siempre la misma fila */
[data-omni-key="check_terminos_blrd"],
[data-omni-key="txt_terminos_blrd_pc"] {
  display: inline-flex !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* 2. Checkbox: Tamaño mínimo y estático que NUNCA se estira al 100% */
[data-omni-key="check_terminos_blrd"] {
  width: auto !important;
  max-width: 40px !important;
  flex-shrink: 0 !important;             /* Impide que el check se aplaste o rompa la fila */
  margin-right: 12px !important;         /* Separación horizontal con el texto */
  margin-bottom: 0 !important;
}

/* 3. Texto de términos: Ocupa exactamente el resto del ancho de la pantalla */
[data-omni-key="txt_terminos_blrd_pc"] {
  flex: 1 !important;                     /* Toma todo el espacio disponible a la derecha */
  width: calc(100% - 52px) !important;    /* Fallback por si flex-grow es sobrescrito */
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* 4. Neutraliza la clase SLDS que fuerza width: 100% en cualquier pantalla */
[data-omni-key="check_terminos_blrd"].slds-size_12-of-12,
[data-omni-key="check_terminos_blrd"] .slds-form-element,
[data-omni-key="check_terminos_blrd"] .slds-form-element__control {
  width: auto !important;
  display: inline-block !important;
}

/* 5. Alineación fina de la casilla con la primera línea del texto */
[data-omni-key="check_terminos_blrd"] input[type="checkbox"],
[data-omni-key="check_terminos_blrd"] .slds-checkbox_faux {
  margin-top: 3px !important;
}

/* 1. Tarjeta de Dirección de Sucursal (Fondo verde) */
div:has(> img[src*="icn-apertura-de-cuentas-pin-ubicacion"]) {
  align-items: flex-start !important;
}

div:has(> img[src*="icn-apertura-de-cuentas-pin-ubicacion"]) > img {
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* 2. Tarjeta de Alerta de Términos (Fondo rojo/rosado) */
div:has(> img[src*="icn-apertura-de-cuentas-error"]) {
  align-items: flex-start !important;
}

div:has(> img[src*="icn-apertura-de-cuentas-error"]) > img {
  align-self: flex-start !important;
  margin-top: 2px !important;
}

/* Selector único para el contenedor del bloque de texto */
[data-omni-key="Establecer_punto_de_contacto"] {
  text-align: center !important;
}

/* 1. Título principal (¡Establezcamos un punto de contacto!) */
[data-omni-key="Establecer_punto_de_contacto"] strong,
[data-omni-key="Establecer_punto_de_contacto"] span[style*="32px"] {
  display: block !important;
  font-size: clamp(25px, 4vw, 32px) !important; /* Se ajusta dinámicamente entre 20px y 32px */
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
}

/* 2. Subtítulo (Antes de iniciar su solicitud...) */
[data-omni-key="Establecer_punto_de_contacto"] span[style*="20px"] {
  display: block !important;
  font-size: clamp(16px, 2.5vw, 18px) !important; /* Se ajusta dinámicamente entre 14px y 20px */
  line-height: 1.4 !important;
}

/* Ajustes fijos en pantallas móviles pequeñas (< 473px) */
@media (max-width: 473px) {
  [data-omni-key="Establecer_punto_de_contacto"] strong,
  [data-omni-key="Establecer_punto_de_contacto"] span[style*="32px"] {
    font-size: 25px !important;
  }

  [data-omni-key="Establecer_punto_de_contacto"] span[style*="20px"] {
    font-size: 16px !important;
  }
}

/*Ajustes en boton de "Agregar relacionado +"*/
button.slds-button.slds-button_brand.slds-button_stretch.editblock-new {
	width: 100% !important;
}

.slds-size_3-of-12.slds-grid.slds-grid_align-center.slds-col_bump-left{
    width: 100% !important;
    max-width: fit-content !important;
}

/* =======================================================
   1. DESKTOP Y TABLET (>= 781px)
   ======================================================= */
@media (min-width: 781px) {

    /* Textos superiores liberados al 100% */
    [data-test-id="TextGestionar"],
    [data-test-id="TextInfoTramite"],
    [data-test-id="TextGestionar"] .slds-col,
    [data-test-id="TextInfoTramite"] .slds-col,
    [data-test-id="TextGestionar"] runtime_omnistudio_flexcards-block,
    [data-test-id="TextInfoTramite"] runtime_omnistudio_flexcards-block {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Estilos Título Desktop */
    [data-test-id="TextGestionar"] h1 {
        display: block !important;
        width: 100% !important;
        font-size: clamp(22px, 4vw, 32px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }

    /* Estilos Subtítulo Desktop */
    [data-test-id="TextInfoTramite"] p {
        display: block !important;
        width: 100% !important;
        margin: 12px auto !important;
        font-size: clamp(14px, 2.5vw, 16px) !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    [data-test-id="BlockInscripcion"],
    [data-test-id="BlockIdEmpresa"],
    [data-test-id="BlockCorreo"] {
        flex: 0 0 30% !important;
        width: 30% !important;
        max-width: 320px !important;
        aspect-ratio: 1 / 1 !important;
        margin: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Contenedores internos de bloques */
    :is([data-test-id="BlockInscripcion"], [data-test-id="BlockIdEmpresa"], [data-test-id="BlockCorreo"]) :is(runtime_omnistudio_flexcards-block, .block-container, .slds-grid) {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Textos internos de bloques */
    [data-test-id="BlockInscripcionText"] p,
    [data-test-id="BlockEmpresaText"] p,
    [data-test-id="BlockCorreoText"] p {
        font-size: clamp(14px, 1.4vw, 20px) !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 12px !important;
    }
}


/* =======================================================
   2. RESPONSIVE MOBILE (<= 780px)
   ======================================================= */
@media (max-width: 780px) {

    /* Textos superiores liberados al 100% en Móvil */
    [data-test-id="TextGestionar"],
    [data-test-id="TextInfoTramite"],
    [data-test-id="TextGestionar"] .slds-col,
    [data-test-id="TextInfoTramite"] .slds-col,
    [data-test-id="TextGestionar"] runtime_omnistudio_flexcards-block,
    [data-test-id="TextInfoTramite"] runtime_omnistudio_flexcards-block {
        flex: 0 0 110% !important;
        width: 110% !important;
        max-width: 110% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Estilos Título Móvil */
    [data-test-id="TextGestionar"] h1,
    [data-test-id="TextGestionar"] p,
    [data-test-id="TextGestionar"] strong,
    [data-test-id="TextGestionar"] .slds-rich-text-editor__output {
        display: block !important;
        width: 100% !important;
        font-size: clamp(20px, 5.5vw, 28px) !important;
        line-height: 1.25 !important;
        text-align: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        word-break: normal !important;
    }

    /* Estilos Subtítulo Móvil */
    [data-test-id="TextInfoTramite"] p,
    [data-test-id="TextInfoTramite"] span,
    [data-test-id="TextInfoTramite"] .slds-rich-text-editor__output {
        display: block !important;
        width: 100 !important;
        margin: 12px auto !important;
        font-size: clamp(14px, 3.8vw, 16px) !important;
        line-height: 1.35 !important;
        text-align: center !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }


    [data-test-id="BlockInscripcion"],
    [data-test-id="BlockIdEmpresa"],
    [data-test-id="BlockCorreo"] {
        flex: 0 0 120% !important;
        width: 90% !important;
        max-width: 360px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin: 16px auto !important;
        box-sizing: border-box !important;
    }

    /* Contenedores internos de bloques en Móvil */
    :is([data-test-id="BlockInscripcion"], [data-test-id="BlockIdEmpresa"], [data-test-id="BlockCorreo"]) :is(runtime_omnistudio_flexcards-block, .block-container, .slds-grid) {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Textos internos de bloques en Móvil */
    [data-test-id="BlockInscripcionText"] p,
    [data-test-id="BlockEmpresaText"] p,
    [data-test-id="BlockCorreoText"] p {
        font-size: 19px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        word-break: break-word !important;
        padding: 0 18px !important;
        margin: 0 !important;
    }
    /* =======================================================
   REAJUSTE DE TARJETAS (Icono Arriba, Texto Abajo Centrado)
   ======================================================= */

/* 1. Forzar contenedor general de la tarjeta a columna */
[data-test-id="BlockInscripcion"],
[data-test-id="BlockIdEmpresa"],
[data-test-id="BlockCorreo"] {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: 220px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
}

/* 2. Asegurar que las grillas internas se apilen de arriba a abajo */
:is([data-test-id="BlockInscripcion"], [data-test-id="BlockIdEmpresa"], [data-test-id="BlockCorreo"]) :is(.block-container, .slds-grid, slot) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 3. Limitar tamaño de los iconos para que no ocupen toda la tarjeta */
[data-test-id="Block-0-Block-2-Image-1"] img,
[data-test-id="BlockInscripcion"] img,
[data-test-id="BlockIdEmpresa"] img,
[data-test-id="BlockCorreo"] img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin: 0 auto 12px auto !important;
}

/* 4. Colocar el texto abajo y centrado */
[data-test-id="BlockInscripcionText"],
[data-test-id="BlockEmpresaText"],
[data-test-id="BlockCorreoText"] {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

[data-test-id="BlockInscripcionText"] p,
[data-test-id="BlockEmpresaText"] p,
[data-test-id="BlockCorreoText"] p {
    font-size: 16px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 8px !important;
}
}

@media (max-width: 570px) {

    /* Textos superiores liberados al 100% en Móvil */
    [data-test-id="TextGestionar"],
    [data-test-id="TextInfoTramite"],
    [data-test-id="TextGestionar"] .slds-col,
    [data-test-id="TextInfoTramite"] .slds-col,
    [data-test-id="TextGestionar"] runtime_omnistudio_flexcards-block,
    [data-test-id="TextInfoTramite"] runtime_omnistudio_flexcards-block {
        flex: 0 0 160% !important;
        width: 150% !important;
        max-width: 150% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    [data-test-id="BlockInscripcion"],
    [data-test-id="BlockIdEmpresa"],
    [data-test-id="BlockCorreo"] {
        flex: 0 0 150% !important;
        width: 100% !important;
        max-width: 360px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        margin: 16px auto !important;
        box-sizing: border-box !important;
    }
    
}

@media (max-width: 400px) {

    /* Textos superiores liberados al 100% en Móvil */
    [data-test-id="TextGestionar"],
    [data-test-id="TextInfoTramite"],
    [data-test-id="TextGestionar"] .slds-col,
    [data-test-id="TextInfoTramite"] .slds-col,
    [data-test-id="TextGestionar"] runtime_omnistudio_flexcards-block,
    [data-test-id="TextInfoTramite"] runtime_omnistudio_flexcards-block {
        flex: 0 0 200% !important;
        width: 200% !important;
        max-width: 200% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
}


/* =======================================================
   ESTILOS EXCLUSIVOS DE CLASES: .otp-header-card
   ======================================================= */
/* =======================================================
   RESET DE PADDING EXCLUSIVO PARA ActualizarSesion
   ======================================================= */

/* Quitar padding-left del slot interno dentro del paso ActualizarSesion */
[data-omni-key="ActualizarSesion"] .slds-var-p-left_medium,
[data-omni-key="ActualizarSesion"] slot.slds-var-p-left_medium {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Centrado horizontal perfecto del grid interno */
[data-omni-key="ActualizarSesion"] .slds-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}
/* 1. Contenedor principal */
.otp-header-card {
  font-family: 'Open Sans', sans-serif !important;
  text-align: center !important;
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

/* 2. Título principal (32px) */
.otp-header-card__title-container {
  margin: 0 0 -35px 0 !important;
}

.otp-header-card__title {
  display: block !important;
  font-size: 32px !important;
  color: #181B25 !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* 3. Subtítulo (20px) */
.otp-header-card__subtitle {
  margin: 0 0 24px 0 !important;
  font-size: 20px !important;
  color: #505663 !important;
  font-weight: 400 !important;
}

/* 4. Pasos (20px) */
.otp-header-card__steps {
  margin-top: -35px !important;
  font-size: 20px !important;
  color: #181B25 !important;
  font-weight: 700 !important;
}

/* =======================================================
   RESPONSIVE MOBILE (<= 690px): Corrección de Centrado
   ======================================================= */
@media (max-width: 690px) {

  .otp-header-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important; /* Mantiene el centrado horizontal perfecto */
    padding: 0 4px !important; /* Espacio mínimo lateral sin provocar desborde */
    box-sizing: border-box !important;
  }

  .otp-header-card__title {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .otp-header-card__subtitle {
    font-size: 15px !important;
    margin-bottom: 16px !important;
  }

  .otp-header-card__steps {
    font-size: 16px !important;
  }
}

/*NPS*/
/* =======================================================
   ESCALA NPS (Alineación 0-5 y 6-10 en Tablet/Mobile)
   ======================================================= */
    @media (min-width: 545px) and (max-width: 1068px) {

    /* 1. Ajuste del contenedor de los botones */
    .rating-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        
        /* Ancho controlado que solo permite 6 botones por fila */
        width: 100% !important;
        max-width: 460px !important; 
        margin: 0 auto !important;
        padding: 0 16px !important;
        gap: 10px 8px !important; /* Separación vertical y horizontal */
        box-sizing: border-box !important;
    }

    /* 2. Tamaño uniforme para los items/botones de la escala */
    .rating-container .rating-item,
    .rating-container button,
    .rating-container input + label {
        flex: 0 0 calc(16.66% - 8px) !important; /* Exactamente 6 columnas */
        min-width: 40px !important;
        max-width: 60px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}
/* =======================================================
   ALINEACIÓN Y ELEVACIÓN DE TOOLTIP (Icono Info)
   ======================================================= */

/* 1. Contenedor principal del tooltip dentro de labels de Salesforce */
runtime_omnistudio_common-tooltip.slds-form-element__label,
[data-field-level-help] {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* 2. Elevación del botón del icono */
[data-field-level-help] button.vlocity-btn,
runtime_omnistudio_common-tooltip button {
    position: relative !important;
    top: -2px !important;              /* Sube el icono (Ajusta a -3px o -4px si lo quieres más arriba) */
    margin-bottom: 0 !important;       /* Quita el slds-m-bottom_large que lo tira hacia abajo */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Asegurar centrado del SVG interno */
[data-field-level-help] svg,
runtime_omnistudio_common-tooltip svg {
    margin: 0 !important;
    display: block !important;
}


/* 1. Resetear el bloque contenedor para eliminar desplazamientos laterales */
[data-omni-key="Relacionado-Block"],
[data-omni-key="Relacionado-Block"] .omni-block_children,
[data-omni-key="Relacionado-Block"] .slds-dl_horizontal,
[data-omni-key="Relacionado-Block"] slot {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Forzar al componente a pegar al borde izquierdo al 100% */
[data-omni-key="Relacionado-Block"] [data-omni-key="Relacionado"],
runtime_omnistudio_omniscript-typeahead[data-omni-key="Relacionado"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

}

/* 3. Asegurar que los contenedores internos no tengan márgenes que empujen la caja */
[data-omni-key="Relacionado"] :is(
    .omni-typeahead-container,
    runtime_omnistudio_common-typeahead,
    .slds-form-element,
    .slds-form-element__control,
    .slds-combobox_container,
    .slds-combobox,
    .slds-combobox__form-element,
    input
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* =======================================================
   ESTILOS DE BOTÓN RADIO READ-ONLY (OPCIÓN NO SELECCIONADA)
   ======================================================= */

/* 1. Botón NO seleccionado en estado Disabled / Read-Only */
.slds-radio_button-group .slds-radio_button input[type="radio"]:disabled:not(:checked) + .slds-radio_button__label {
    background-color: #F3F3F3 !important;    /* Fondo claro inactivo */
    border-color: #D8D8D8 !important;        /* Borde gris tenue */
    color: #8C8C8C !important;               /* Texto atenuado */
    opacity: 1 !important;                   /* Anula la opacidad borrosa por defecto de SLDS */
    cursor: not-allowed !important;
}

/* 2. Mantener el diseño del texto/span interno */
.slds-radio_button-group .slds-radio_button input[type="radio"]:disabled:not(:checked) + .slds-radio_button__label .slds-radio_faux {
    color: #8C8C8C !important;
}

/* 3. Asegurar que el botón SELECCIONADO conserve su color activo */
.slds-radio_button-group .slds-radio_button input[type="radio"]:disabled:checked + .slds-radio_button__label {
    background-color: #00855A !important;    /* Color verde o corporativo activo */
    border-color: #00855A !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.slds-radio_button-group .slds-radio_button input[type="radio"]:disabled:checked + .slds-radio_button__label .slds-radio_faux {
    color: #FFFFFF !important;
}
/* =======================================================
   OCULTAR ENCABEZADO/TITULO DEL MODAL (Superusuario Block)
   ======================================================= */

/* 1. Ocultar el header completo del modal */
[data-omni-key="bancanet_super_usuarios_block"] .slds-modal__header,
[data-omni-key="bancanet_super_usuarios_block"] header.slds-modal_header {
    display: none !important;
}

/* 2. Ocultar la etiqueta aria/título dentro de la sección si renderiza directamente */
[data-omni-key="bancanet_super_usuarios_block"] section.slds-modal[aria-label*="superusuario"]::before,
[data-omni-key="bancanet_super_usuarios_block"] .slds-modal_header * {
    display: none !important;
}

/* Ocultar el * nativo de required; el texto custom del LWC es el visible */
[data-omni-key="dge_empresa_liderada_por"] legend .slds-required,
[data-omni-key="dge_empresa_liderada_por"] .slds-form-element__label .slds-required,
[data-omni-key="dge_tipo_acciones_empresa"] legend .slds-required,
[data-omni-key="dge_tipo_acciones_empresa"] .slds-form-element__label .slds-required,
[data-omni-key="dae_residencia_fiscal_diferente"] legend .slds-required,
[data-omni-key="dae_residencia_fiscal_diferente"] .slds-form-element__label .slds-required {
    display: none !important;
}
/* =======================================================
   BOTONES MODAL EN MOBILE (< 520px)
   ======================================================= */
@media (max-width: 520px) {

    /* 1. Contenedor del footer: apilado o centrado con espacio */
    .slds-modal__footer .slds-grid,
    .omni-editblock-modal_content ~ .slds-grid,
    .slds-grid_align-end.slds-var-m-top_medium {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;                 /* Separación limpia entre botones */
        width: 100% !important;
        margin-top: 16px !important;
    }

    /* 2. Anular la clase slds-size_2-of-12 y dar ancho adecuado */
    .slds-modal__footer button.slds-button,
    .slds-modal_container button.slds-button,
    .slds-grid_align-end .slds-button.slds-size_2-of-12 {
        width: auto !important;
        min-width: 110px !important;          /* Ancho mínimo cómodo para "Cancelar" y "Guardar" */
        max-width: 10% !important;
        flex: 1 1 auto !important;           /* Crecen simétricamente sin aplastarse */
        margin: 0 !important;                 /* Elimina solapamiento por márgenes negativos */
        padding: 8px 16px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}


/* =======================================================
   REAJUSTE DE RADIO BUTTON GROUPS (iPhone 12 Pro / Mobile)
   ======================================================= */
@media (max-width: 583px) {

    /* 1. Contenedor flex con alineación de altura idéntica */
    .slds-radio_button-group {
        display: flex !important;
        width: 100% !important;
        align-items: stretch !important; /* Fuerza a que todos los botones tengan la misma altura */
    }

    .slds-radio_button-group .slds-radio_button {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* 2. Reducir paddings y fijar altura mínima simétrica */
    .slds-radio_button-group .slds-radio_button__label {
        width: 100% !important;
        height: 100% !important;
        min-height: 44px !important;            /* Mantiene la cápsula uniforme en las 3 opciones */
        padding: 4px 2px !important;            /* Minimiza padding lateral para ganar espacio de texto */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. Tipografía más pequeña para evitar palabras partidas */
    .slds-radio_button-group .slds-radio_button__label .slds-radio_faux,
    .slds-radio_button-group .slds-radio_button__label {
        font-size: 11px !important;             /* Reduce levemente el tamaño de fuente */
        line-height: 1.15 !important;
        text-align: center !important;
        hyphens: none !important;                /* Evita que parta palabras como "dominic-ano" */
        word-break: normal !important;
    }
}