/**
 * ============================================================================
 * Cualinet Gravity Fields — Modal base (gf-modal-*)
 * ============================================================================
 *
 * Bottom-sheet en móvil (slide up), modal centrado en desktop.
 * Las clases gf-modal-* son las del modal estándar.
 * Los campos concretos (gf-date-*, etc.) añaden capas encima.
 * ============================================================================
 */

.gf-modal {
    --gf-ms-transition: 0.2s ease-in-out;

    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gf-ms-transition);
    z-index: 999999;
}
.gf-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}
.gf-modal[hidden] {
    display: none;
}
.gf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.gf-modal-panel {
    position: relative;
    width: calc(100% - var(--spacing-60));
    height: auto;
    max-width: 720px;
    /*max-height: 720px;*/
    display: flex;
    flex-direction: column;
    background: var(--color-contrast);
    color: var(--color-base);
    border:1px solid var(--color-neutral-200);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform var(--gf-ms-transition);
}
.gf-modal.is-open .gf-modal-panel {
    transform: translateY(-20px);
}
.gf-modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
    padding: var(--spacing-40);
    border-bottom: 1px solid var(--color-neutral-100);
    flex: 0 0 auto;
}
.gf-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-50);
    flex: 0 0 auto;
    padding: var(--spacing-40);
    border-top: 1px solid var(--color-neutral-100);
    background: var(--color-contrast);
}
.gf-modal-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-base);
    background-color: var(--color-neutral-50);
    border: none;
    border-radius: 100vw;
    padding: 0;
    margin-left: auto;
    transition: background-color var(--gf-ms-transition);
    cursor: pointer;
}
.gf-modal-close:is(:hover, :focus-visible),
.gf-modal-close:focus-visible {
    background-color: var(--color-neutral-100);
    outline: none;
}
/* Icono SVG de cerrar (mismo glyph y tamaño que el modal de país/multiselect,
   .gf-ms-sheet-close svg, para que ambos modales sean idénticos). */
.gf-modal-close svg {
    width: 16px;
    height: 16px;
    display: block;
}
.gf-modal-grip {
    display: none;
}

/* Body lock when modal is open */
body.gf-modal-body-locked {
    overflow: hidden;
    touch-action: none;
}

/* Durante swipe activo: suprimir cualquier transition para que el transform
   inline siga el dedo frame a frame. */
.gf-modal-panel.is-swiping {
    transition: none !important;
}

/* Al soltar sin cerrar: animar vuelta a posición. */
.gf-modal-panel.is-swipe-cancel {
    transition: transform 0.22s ease;
}


@media (min-width: 768px) {
    .gf-modal {
        align-items: center;
    }
    .gf-modal-panel {
        max-width: 700px;
        max-height: 80vh;
        border-radius: var(--radius);
        opacity: 0;
        transform: scale(0.98) translateY(20px);
        transition: transform var(--gf-ms-transition), opacity var(--gf-ms-transition);
    }
    .gf-modal.is-open .gf-modal-panel {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}
@media screen and (max-width: 767px) {
    .gf-modal-panel {
        touch-action: pan-y;
    }
    .gf-modal-header {
        position: relative;
        padding-top: 20px;
    }
    .gf-modal-grip {
        display: block;
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--color-neutral-100);
        opacity: 0.7;
        pointer-events: none;
    }
}


/**
 * ============================================================================
 * Gravity Multi-Select Searchable Field — Estilos
 * ============================================================================
 *
 * Patrón "trigger + bottom-sheet":
 *   - El trigger vive dentro del wrapper en el formulario.
 *   - El sheet (modal/bottom-sheet) se mueve a <body> via JS para escapar de
 *     stacking contexts creados por ancestros (transform / filter / overflow).
 *
 * Por eso los estilos del sheet NO dependen de `.gf-multiselect-wrapper`
 * como ancestro; usan `.gf-ms-sheet` como raíz y duplican las variables.
 *
 */


.gf-multiselect-wrapper,
.gf-ms-sheet {
    --gf-ms-transition: 0.2s ease-in-out;
}
.gf-multiselect-wrapper {
    position: relative;
    width: 100%;
    font-size: var(--font-base);
    color: var(--color-base);
}



/*--------------------------------------------------------------
TRIGGER
--------------------------------------------------------------*/
.gf-multiselect-wrapper .gf-ms-trigger {
    display: flex;
    align-items: center;
    gap: var(--spacing-20);
    width: 100%;
    color: var(--color-base);
    text-align: left;
    padding: calc(var(--break-rem) / 1.3) var(--break-rem);
    background-color: var(--color-contrast);
    border: 1px solid var(--color-neutral-500);
    border-radius: var(--gf-ms-input-radius);
    cursor: pointer;
    transition: border-color var(--gf-ms-transition), box-shadow var(--gf-ms-transition);
    box-sizing: border-box;
}
/*.gf-multiselect-wrapper .gf-ms-trigger:is(:hover, :focus-visible),
.gf-multiselect-wrapper .gf-ms-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(29, 35, 39, 0.12);
}*/
.gf-multiselect-wrapper.gf-multiselect-wrapper--editor .gf-ms-trigger {
    cursor: default;
    opacity: 0.85;
}
.gf-multiselect-wrapper .gf-ms-trigger-icon,
.gf-multiselect-wrapper .gf-ms-trigger-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-base);
}
.gf-multiselect-wrapper .gf-ms-trigger-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.gf-multiselect-wrapper .gf-ms-trigger-chevron svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform var(--gf-ms-transition);
}
.gf-multiselect-wrapper.is-open .gf-ms-trigger-chevron svg {
    transform: rotate(180deg);
}
.gf-multiselect-wrapper .gf-ms-trigger-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gf-multiselect-wrapper .gf-ms-trigger-text--empty {
    color: var(--color-neutral-900);
}


/*--------------------------------------------------------------
HINT (MÁXIMO N PAÍSES)
--------------------------------------------------------------*/
.gf-multiselect-wrapper .gf-ms-hint {
    font-size: var(--font-small);
    color: var(--color-neutral-600);
}


/*--------------------------------------------------------------
SHEET CONTAINER (VIVE EN <BODY>)
--------------------------------------------------------------*/
.gf-ms-sheet {
    position: fixed;
    display: flex;
    align-items: flex-end;
    inset: 0;
    justify-content: center;
    font-size: var(--font-base);
    color: var(--color-base);
    -webkit-font-smoothing: antialiased;
    pointer-events: none;
    z-index: 999999;
}
.gf-ms-sheet[hidden] {
    display: none;
}
.gf-ms-sheet * {
    box-sizing: border-box;
}
.gf-ms-sheet-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(29, 35, 39, 0.45);
    opacity: 0;
    transition: opacity var(--gf-ms-transition);
    pointer-events: none;
}
.gf-ms-sheet.is-open .gf-ms-sheet-backdrop {
    opacity: 1;
    pointer-events: auto;
}
.gf-ms-sheet-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    background-color: var(--color-contrast);
    border-radius: var(--radius);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform var(--gf-ms-transition);
    pointer-events: auto;
    overflow: hidden;
}
.gf-ms-sheet.is-open .gf-ms-sheet-panel {
    transform: translateY(0);
}



/*--------------------------------------------------------------
SHEET HEADER
--------------------------------------------------------------*/
.gf-ms-sheet-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-30);
    padding: var(--spacing-40) var(--spacing-40) var(--spacing-30) var(--spacing-40);
    border-bottom: 1px solid var(--color-neutral-100);
    flex: 0 0 auto;
}
.gf-ms-sheet-titles {
    flex: 1 1 auto;
    min-width: 0;
}
.gf-ms-sheet .gf-ms-eyebrow {
    display: block;
    font-size: var(--font-tiny);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    color: var(--color-neutral-600);
    margin-bottom: 0;
    letter-spacing: 0;
}
.gf-ms-sheet .gf-ms-eyebrow--secondary {
    margin-bottom: var(--spacing-20);
}
.gf-ms-sheet-title {
    font-size: var(--font-h4);
    font-weight: var(--font-bold);
    color: var(--color-base);
    margin: 0;
}
.gf-ms-sheet-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-base);
    background-color: var(--color-neutral-50);
    border: none;
    border-radius: 100vw;
    padding: 0;
    transition: background-color var(--gf-ms-transition);
    cursor: pointer;
}
.gf-ms-sheet-close:is(:hover, :focus-visible){
    background-color: var(--color-neutral-100);
    outline: none;
}
.gf-ms-sheet-close svg {
    width: 16px;
    height: 16px;
    display: block;
}


/*--------------------------------------------------------------
CHIPS (PAÍSES AÑADIDOS)
--------------------------------------------------------------*/
.gf-ms-sheet .gf-ms-chips-section {
    flex: 0 0 auto;
    padding: var(--spacing-40);
    border-bottom: 1px solid var(--color-neutral-100);
}
.gf-ms-sheet .gf-ms-chips-section[hidden] {
    display: none;
}
.gf-ms-sheet .gf-ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-10);
}
.gf-ms-sheet .gf-ms-chip {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    font-size: var(--font-tiny);
    color: var(--color-base);
    background-color: var(--color-racc-300);
    padding: var(--spacing-10) var(--spacing-20);
    border-radius: 100vw;
}
.gf-ms-sheet .gf-ms-chip-label {
    white-space: nowrap;
}
.gf-ms-sheet .gf-ms-chip-remove {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: var(--font-small);
    color: var(--color-base);
    background-color: var(--color-racc-100);
    border-radius: 100vw;
    padding: 0;
    cursor: pointer;
    transition: background-color var(--gf-ms-transition);
}
.gf-ms-sheet .gf-ms-chip-remove:is(:hover, :focus-visible){
    background-color: var(--color-racc-600);
    outline: none;
}


/*--------------------------------------------------------------
BUSCADOR INTERNO
--------------------------------------------------------------*/
.gf-ms-sheet .gf-ms-search-wrap {
    flex: 0 0 auto;
    position: relative;
    padding: var(--spacing-40);
}
.gf-ms-sheet .gf-ms-search-icon {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral-600);
    pointer-events: none;
}
.gf-ms-sheet .gf-ms-search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}
.gf-ms-sheet .gf-ms-search {
    width: 100%;
    height: auto;
    font-size: var(--font-base);
    color: var(--color-base);
    padding: calc(var(--break-rem) / 1.3) var(--break-rem) calc(var(--break-rem) / 1.3) calc(var(--break-rem) * 2.5);
    background-color: var(--color-neutral-50);
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: border-color var(--gf-ms-transition), background-color var(--gf-ms-transition);
}
.gf-ms-sheet .gf-ms-search::placeholder {
    color: var(--color-neutral-600);
    opacity: 1;
}
.gf-ms-sheet .gf-ms-search:focus {
    background-color: var(--color-contrast);
    border-color: var(--color-racc-500);
}


/*--------------------------------------------------------------
CONTADOR + LIMPIAR
--------------------------------------------------------------*/
.gf-ms-sheet .gf-ms-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-40) var(--spacing-30) var(--spacing-40);
    border-bottom: 1px solid var(--color-neutral-100);
    flex: 0 0 auto;
}
.gf-ms-sheet .gf-ms-counter {
    font-size: var(--font-small);
    color: var(--color-neutral-900);
    transition: color var(--gf-ms-transition);
}
.gf-ms-sheet .gf-ms-counter--flash {
    color: var(--color-error-500);
    font-weight: var(--font-semibold);
}
.gf-ms-sheet .gf-ms-clear {
    background: none;
    border: none;
    padding-block: var(--spacing-20);
    font-size: var(--font-small);
    color: var(--color-neutral-900);
    text-decoration: underline;
    cursor: pointer;
}
.gf-ms-sheet .gf-ms-clear[hidden] {
    display: none;
}
.gf-ms-sheet .gf-ms-clear:is(:hover, :focus-visible){
    color: var(--color-base);
    text-decoration: none;
}


/*--------------------------------------------------------------
LISTA DE OPCIONES
--------------------------------------------------------------*/
.gf-ms-sheet .gf-ms-options {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    min-height: 0;
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-30);
    padding: var(--spacing-40) var(--spacing-40);
    font-size: var(--font-base);
    color: var(--color-base);
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color var(--gf-ms-transition);
    cursor: pointer;
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option:last-child {
    border-bottom: none;
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option:is(:hover, :focus-visible) {
    background-color: var(--color-neutral-50);
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option.is-selected {
    background-color: var(--color-racc-50);
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option:focus-visible {
    outline: 2px solid var(--color-racc-500);
    outline-offset: -2px;
}
.gf-ms-sheet .gf-ms-checkbox {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border: 1.5px solid var(--color-neutral-500);
    border-radius: 6px;
    background-color: var(--color-contrast);
    position: relative;
    transition: background-color var(--gf-ms-transition), border-color var(--gf-ms-transition);
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option.is-selected .gf-ms-checkbox {
    background-color: var(--color-racc-500);
    border-color: var(--color-racc-500);
}
.gf-ms-sheet .gf-ms-options li.gf-ms-option.is-selected .gf-ms-checkbox::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid var(--color-base);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.gf-ms-sheet .gf-ms-option-label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-base);
}
.gf-ms-sheet .gf-ms-options mark.gf-ms-match {
    background: transparent;
    color: var(--color-base);
    font-weight: var(--font-bold);
}
.gf-ms-sheet .gf-ms-options li.gf-ms-no-results {
    padding: var(--spacing-50);
    color: var(--color-neutral-600);
    font-style: italic;
    text-align: center;
    cursor: default;
}


/*--------------------------------------------------------------
FOOTER (CTA)
--------------------------------------------------------------*/
.gf-ms-sheet-footer {
    flex: 0 0 auto;
    padding: var(--spacing-40);
    background-color: var(--color-contrast);
    border-top: 1px solid var(--color-neutral-100);
}
.gf-ms-sheet .gf-ms-confirm {
    display: block;
    width: 100%;
    font-size: var(--font-base);
    font-weight: var(--font-bold);
    padding: 17px 32px;
    color: var(--color-neutral-700);
    background-color: var(--color-neutral-50);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color var(--gf-ms-transition), color var(--gf-ms-transition), transform var(--gf-ms-transition);
}
.gf-ms-sheet .gf-ms-confirm.is-active {
    background-color: var(--color-racc-500);
    color: var(--color-base);
    cursor: pointer;
}
.gf-ms-sheet .gf-ms-confirm.is-active:is(:hover, :focus-visible){
    background-color: var(--color-racc-600);
    outline: none;
}
.gf-ms-sheet .gf-ms-confirm.is-active:active {
    transform: translateY(1px);
}



/*--------------------------------------------------------------
BODY LOCK (CUANDO HAY UN SHEET ABIERTO)
--------------------------------------------------------------*/
body.gf-ms-body-locked {
    overflow: hidden;
}


@media screen and (min-width: 768px) {
    .gf-ms-sheet {
        align-items: center;
        padding: var(--spacing-50);
    }
    .gf-ms-sheet-panel {
        width: 100%;
        max-width: 480px;
        max-height: 80vh;
        border-radius: var(--radius);
        transform: translateY(20px) scale(0.98);
        opacity: 0;
        transition: transform var(--gf-ms-transition), opacity var(--gf-ms-transition);
    }
    .gf-ms-sheet.is-open .gf-ms-sheet-panel {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}


@media screen and (max-width: 480px) {
    .gf-ms-sheet .gf-ms-search-icon {
        left: 28px;
    }
}