/* v 0.3 */
:root {
    --brand-green-color: #009FA2;
    --brand-blue-color: #01374D;
    --brand-lightblue-color: #84E0EC;
    --brand-yellow-color: #E5B241;
    --brand-orange-color: #CE8606;
    --brand-lightgrey-color: #f1f1f1;
    --brand-lightgreytone-color: #e4e8e8; /*#cdd6d6;*/
    --brand-lightgrey-yellow-color: #B7B7B7;




    /* border radius */

    /* --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem; */


    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 1rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-xxl: 2.5rem;

    /* components */
    --link-color-on-dark: #f1f1f1;
    --link-active-color-on-dark: var(--brand-lightblue-color);
    --btn-primary-bg-color: #008C8F;
    --btn-primary-bg-hover: #006c6e;
    --btn-primary-color: white;
    --btn-secondary-color: white;
    --btn-secondary-bg-color: var(--brand-blue-color);
    --btn-secondary-bg-hover: #012534;
    --btn-tertiary-bg-color: var(--brand-yellow-color);
    --btn-tertiary-bg-hover: #cfa039;
    --btn-tertiary-color: var(--brand-blue-color);
    --btn-padding: 8px 16px;
    --btn-border-radius: var(--bs-border-radius-lg);
    --bs-btn-disabled-bg: #aaaeae;
    --bs-btn-disabled-border-color: #aaaeae;


    --body-text-color: #212934;
    --bs-btn-disabled-color: #aaaeae;
    --disabled-bg-color: #cedddd;
    --disabled-text-color: #a8abab;
    --disabled-border-color: #aaaeae;
    --light-grey: #92A7B0;
    --light-grey-blue-tone: #e7eff2;
    --dark-grey: #536F7B;
    --bs-heading-color: #253842;
    --card-light-grey-bg-color: #E5E5E5;

    /* layout */
    --section-padding-y: 68px;


    /* input */
    --input-color-placeholder: var(--dark-grey);
    --input-color-value: var(--brand-blue-color);
    --input-border-color: #d5e2e8;


    --navbar-fixed-height: 74px;
    --dropdown-arrow-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    --chip-radius: .75rem;
    --chip-form-control-radius: .75rem;

    --ts-bg: var(--card-light-grey-bg-color);         /* fondo de la sección */
    --ts-card-bg: white;
    --ts-text: var(--brand-blue-color);
    --ts-muted: #49626f;
    --ts-accent: var(--brand-orange-color);
    --ts-radius: var(--bs-border-radius-xl);
    --ts-shadow: 0 8px 24px rgba(0,0,0,.06);

}

/* generic rules */

body{
    font-family: "Source Sans 3", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
}


:is(h1, h2, h3, h4, h5, h6),
:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: "Montserrat", "Segoe UI", "Helvetica Neue", "Roboto", Arial, sans-serif;
}
.transitions--all{
    transition: all 300ms ease-in-out;
}

main > section{
    padding-block: clamp(1vw, 3.5rem, 4vw);
    max-width: 100%;
}
/* ================== components ================= */

.btn{

    --bs-btn-color: white;
    --bs-btn-bg: var(--brand-blue-color);
    --bs-btn-border-color: var(--brand-blue-color);

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--btn-primary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-primary-bg-hover);


    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
}
.btn:disabled,.btn.disabled{
    --bs-btn-disabled-bg: var(--disabled-bg-color);
    --bs-btn-disabled-color: var(--disabled-text-color);
    --bs-btn-disabled-border-color: var(--disabled-border-color);
    pointer-events: initial;
}
.btn:disabled:hover,.btn.disabled:hover{
    pointer-events: initial;
    cursor: not-allowed;
}
.btn-rounded{
    border-radius: 24px;
}

.btn-primary {

    --bs-btn-color: var(--btn-primary-color);
    --bs-btn-bg: var(--btn-primary-bg-color);
    --bs-btn-active-bg: var(--btn-primary-bg-hover);
    --bs-btn-focus-shadow-rgb: 0, 108, 110;

    --bs-btn-border-color: var(--btn-primary-bg-color);

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--btn-primary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-primary-bg-hover);


}

.btn-secondary {

    --bs-btn-color: var(--btn-secondary-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);
    --bs-btn-active-bg: var(--btn-secondary-bg-hover);
    --bs-btn-focus-shadow-rgb: 1, 37, 52;
    --bs-btn-border-color: var(--btn-secondary-bg-color);

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--btn-secondary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-secondary-bg-hover);

}

.btn-tertiary {
    --bs-btn-color: var(--btn-tertiary-color);
    --bs-btn-bg: var(--btn-tertiary-bg-color);
    --bs-btn-active-bg: var(--btn-tertiary-bg-color);
    --bs-btn-focus-shadow-rgb: 229, 178, 65;
    --bs-btn-border-color: var(--btn-tertiary-bg-color);

    --bs-btn-hover-color: var(--btn-tertiary-color);
    --bs-btn-hover-bg: var(--btn-tertiary-bg-hover);
    --bs-btn-hover-border-color: var(--btn-tertiary-bg-hover);

}
.btn-outline {
    &.btn-primary {
        --bs-btn-color: var(--btn-primary-bg-color);
        --bs-btn-border-color: var(--btn-primary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-primary-bg-color);
        --bs-btn-hover-border-color: var(--btn-primary-bg-color);
    }

    &.btn-secondary {

        --bs-btn-color: var(--btn-secondary-bg-color);
        --bs-btn-border-color: var(--btn-secondary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-secondary-bg-color);
        --bs-btn-hover-border-color: var(--btn-secondary-bg-color);

    }

    &.btn-tertiary {
        --bs-btn-color: #b07e10;
        --bs-btn-border-color: var(--btn-tertiary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-tertiary-bg-color);
        --bs-btn-hover-border-color: var(--btn-tertiary-bg-color);

    }
}
.btn-nobg {
    &.btn-primary {
        --bs-btn-color: var(--brand-lightblue-color);
        --bs-btn-border-color: transparent;
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-primary-bg-color);
        --bs-btn-hover-border-color: var(--btn-primary-bg-color);
    }

    &.btn-secondary {

        --bs-btn-color: var(--btn-secondary-bg-color);
        --bs-btn-border-color: transparent;
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-secondary-bg-color);
        --bs-btn-hover-border-color: var(--btn-secondary-bg-color);

    }

    &.btn-tertiary {
        --bs-btn-color: var(--brand-yellow-color);
        --bs-btn-border-color: transparent;
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-tertiary-bg-color);
        --bs-btn-hover-border-color: var(--btn-tertiary-bg-color);

    }
}
.btn-ghost {
    &.btn-primary {
        --bs-btn-color: var(--brand-lightblue-color);
        --bs-btn-border-color: var(--btn-primary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-primary-bg-color);
        --bs-btn-hover-border-color: var(--btn-primary-bg-color);
    }

    &.btn-secondary {

        --bs-btn-color: var(--btn-secondary-bg-color);
        --bs-btn-border-color: var(--btn-secondary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-secondary-bg-color);
        --bs-btn-hover-border-color: var(--btn-secondary-bg-color);

    }

    &.btn-tertiary {
        --bs-btn-color: var(--btn-tertiary-bg-color);
        --bs-btn-border-color: var(--btn-tertiary-bg-color);
        --bs-btn-bg: transparent;


        --bs-btn-hover-color: white;
        --bs-btn-hover-bg: var(--btn-tertiary-bg-color);
        --bs-btn-hover-border-color: var(--btn-tertiary-bg-color);

    }
}
.btn--shadow{
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.1), 0px 6px 10px 0px rgba(0, 0, 0, 0.02), 0px 1px 18px 0px rgba(0, 0, 0, 0.03);
}
.segmented__control .btn-secondary.btn-outline:hover{
    --bs-btn-hover-color: var(--brand-blue-color);
    --bs-btn-hover-bg: var(--light-grey-blue-tone);
}
.segmented__control .btn-secondary.btn-outline.btn-active{
    --bs-btn-color: white;
    --bs-btn-border-color: var(--btn-secondary-bg-color);
    --bs-btn-bg: var(--btn-secondary-bg-color);


    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: var(--btn-secondary-bg-color);
    --bs-btn-hover-border-color: var(--btn-secondary-bg-color);
}


.segmented__control > .btn {
    display: inline-flex;
    align-items: center;
}
.segmented__control .btn > i{
    color: inherit;
}

/* paginacion */
.pagination{
    padding-block: 2rem;
    justify-content: center;
}
.page-link{
    color: var(--brand-blue-color);
    border-color: transparent;
    border-radius: 100% !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.page-link:hover{
    border-color: transparent;
    background-color: var(--brand-lightgrey-color);
    color: var(--brand-blue-color);

}
.page-item.active .page-link{
    border-color: var(--brand-green-color);
    color: var(--brand-blue-color);
    background-color: transparent;
}
/* tags */
.tags__wrapper{
    margin-block: 2.5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
}
.tag {
    border-radius: 2rem;
}

.tag--secondary:hover {
    --bs-btn-hover-color: var(--brand-blue-color);
    --bs-btn-hover-bg: var(--light-grey-blue-tone);
}
.listing__featured__tags{
  position: relative;
  margin-block: 2.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1rem;
}

.listing__featured__mark{
  width: 44px;
  height: 44px;
  z-index: -1;
  & > svg{
    width: 100%;
    height: 100%;
  }
  & > svg > g > path{
    fill: var(--brand-lightblue-color);
  }
}

/* badge */

.badge{
    --bs-badge-font-weight: 600;
    --bs-badge-font-size: 14px;
    --bs-badge-border-radius: 0.75rem;
    line-height: 1.3;
}
.text-muted{
    color: #748e99 !important;
}
.text-bg-secondary{
    background-color: var(--brand-blue-color) !important;
}
.text-bg-tertiary{
    background-color: var(--brand-lightgreytone-color) !important;
}
.text-bg-primary{
    background-color: var(--brand-green-color) !important;
}
.badge--accent{
    background-color: var(--brand-orange-color) !important;
}
.badge.text-bg-tertiary{
    color: var(--brand-blue-color) ;
}
.badge--rounded{
    border-radius: var(--bs-border-radius-xl);
}

/* title */
.section__subheading{
  margin: 0 0 .5rem;
  padding-inline-start: 2px;
  text-transform:uppercase; letter-spacing:.06em;
  font-size: clamp(.9rem, 0.7vw, 1.05rem);
}
.section__title{
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--brand-blue-color);
    & + .tagline{
        margin-block-start: 2rem;
    }
}
h2.section__title{
    font-size: 2.5rem;
}
.section__description{
    color: var(--brand-blue-color);
    font-size: 14px;
    max-width: 75ch;
    line-height: 1.5;
}
/* links */

.page-header{
    & .navbar-nav{
        /* gap: 8px; */
        & .nav-link{
            color: var(--link-color-on-dark);
            padding: var(--btn-padding);

            &:hover{
                color: white;
            }
        }
    }
}
.page-header .navbar-nav .nav-link{
    color: var(--link-color-on-dark);
    padding: var(--btn-padding);

    &:hover{
        color: white;
    }

}


.navbar{
    background: var(--brand-blue-color);
    background: linear-gradient(90deg, rgba(1, 55, 77, 1) 0%, rgba(0, 124, 133, 1) 60%, rgba(0, 159, 162, 1) 100%);
    & :is(.nav-link.active, .btn.active){
        color: var(--link-active-color-on-dark) !important;
    }
    & .navbar-brand > img{
        width: 236px; /* fijo */
        height: auto;
        transform-origin: left center;
        will-change: transform;
        transition: transform 300ms ease-in-out;
    }
}
.nav-secondary .btn{ font-weight: 600; letter-spacing: 0.5px;}
.nav-secondary .btn.active{
    background-color: transparent;
    border-color: transparent;
    font-weight: normal;
}
.navbar.scrolled{
    max-height: var(--navbar-fixed-height);
}
.navbar.scrolled {

    & .navbar-brand > img{
        height: 48px;
    }
}


/* Achicar logo cuando no está arriba del todo */
.headroom--not-top .navbar-brand > img,
.not-top .navbar-brand > img { /* .not-top se usa en el caso sin buscador */
    transform: scale(.8);

}


.headroom {
  will-change: transform;
  transition: transform .25s ease, opacity .25s ease;
}
/* Estados de Headroom */
.headroom--pinned   { transform: translateY(0);      opacity: 1; }
.headroom--unpinned { transform: translateY(-100%);  opacity: 0; }

/* body:has(header:has(.navbar.headroom--pinned) + .hero__integrated) .navbar.headroom--pinned{
    background: transparent;
} */

body:has(.navbar.headroom--not-top.headroom--pinned) .srch__form{ /*top: var(--navbar-fixed-height);*/ top: var(--srch-top);}

/* empty state  */
.empty-state{
    padding-block: clamp( 2rem, 6vh, 10rem);
}
.empty-state--centered{
    display: grid;
    place-items: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.empty-state__headline{
    font-weight: 700;
}
.empty-state__icon{
    font-size: 5rem;
    color: var(--ts-muted);
}
.empty-state__card{
    max-width: 48ch;
}
.empty-state__content{
    padding: 2rem 1rem;
    color: var(--brand-blue-color);
}

/* custom icons */

.custom__icon{
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}
.bedrooms--icon{
    background-image: url("../assets/iconos/bed.svg");
}
.bathrooms--icon{
    background-image: url("../assets/iconos/bath.svg");
}
.surface--icon{
    background-image: url("../assets/iconos/sup.svg");
}

/* tagline */
.tagline{
    width: 100%;
    display: flex;
    position: relative;
    margin-block: 2rem;
    &::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        right: 0;
        background-color: var(--brand-blue-color);
        /* top: 50%; */
        /* transform: translateY(-50%); */
        transform: scaleY(0.5);
        z-index: -1;
    }
}
.tagline--light::after{
    background-color: var(--brand-lightblue-color);

}
.heading__tag{
    display: inline-flex;
    padding: 4px 16px 4px 12px;
    font-size: 14px;
    border-radius: var(--bs-border-radius-xxl);
    background-color: var(--brand-lightblue-color);
    color: var(--brand-blue-color);
    &::before{
        content: "•";
        font-size: 2rem;
        line-height: 15px;
        margin-inline: 2px 8px;
        color: white;

    }
}
.tagline__text{
    display: inline-flex;
    padding: 4px 16px 4px 12px;
    font-size: 14px;
    border-radius: var(--bs-border-radius-xxl);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 36px;

    &::before{
        content: "•";
        font-size: 2rem;
        line-height: 15px;
        margin-inline: 2px 8px;
        color: white;

    }
}
.tagline__text--start{
    right: unset;
    left: 36px;

}
.tagline--transparent .tagline__text{
    background-color: white;
    color: var(--brand-blue-color);
    border-color: transparent;
}
.tagline--secondary .tagline__text{
    background-color: var(--brand-lightblue-color);
    color: var(--brand-blue-color);
}

.tagline--secondary.tagline--outline .tagline__text{
    background-color: white;
    color: var(--brand-blue-color);
    border: 1px solid var(--brand-blue-color);
}
/* link overlay */
/* Link overlay: hace clickeable toda la card */
*:has(>.link__overlay){
    position: relative;
}
.link__overlay{
  position:absolute; inset:0; z-index:1; /* debajo de acciones */
  border-radius:var(--ls-radius);
  text-decoration:none;
  color:inherit;
  &:focus-visible{
    outline: 3px solid var(--brand-blue-color);
    outline-offset: 3px;
  }
  &:hover{ text-decoration: none; }
}
.card:has(.link__overlay:focus-visible){
    outline: 3px solid var(--brand-blue-color);
    outline-offset: 3px;
}
.card{
    border-color: transparent;
}
/* inputs */
.form__col{ margin-block-end: .5rem;}
:is(.form-control, .form-select){
    color: var(--input-color-value);
    border-color: var(--input-border-color);
}
:is(.form-control, .form-select, .fchip__btn, .choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner):hover{
    border-color: var(--brand-blue-color);
}

    /* border: 1px solid #d5e2e8;
    border-radius: 12px;
    padding: .55rem .9rem;
    font-size: 1rem;
    outline: none; */
:is(.form-control, .form-select, .choices__input--cloned)::placeholder {
  color: var(--brand-blue-color); /* Standard */
  opacity: .7;
}

:is(.form-control, .form-select, .choices__input--cloned)::-webkit-input-placeholder {
  color: var(--brand-blue-color); /* Chrome, Safari, Opera */
  opacity: .7;
}

:is(.form-control, .form-select, .choices__input--cloned)::-moz-placeholder {
  color: var(--brand-blue-color); /* Firefox 19+ */
  opacity: .7;
}

:is(.form-control, .form-select, .choices__input--cloned):-moz-placeholder {
  color: var(--brand-blue-color); /* Firefox 18- */
  opacity: .7;
}

:is(.form-control, .form-select, .choices__input--cloned):-ms-input-placeholder {
  color: var(--brand-blue-color); /* IE 10+ and Edge */
  opacity: .7;
}
:is(.form-control:focus, .form-select:focus){
    border-color: var(--btn-primary-bg-hover);
    box-shadow: 0 0 0 .25rem rgba(0, 140, 143, 0.25);
}
.form__col .iti{ display: block; }
.iti .iti__country-container .iti__dropdown-content{
    z-index: 3;
}
.form-block .iti__search-input {
    padding-block: 6px;
    border-radius: var(--bs-border-radius);
}

.form-block .iti__search-input:focus-visible{
    outline-width: 1px;
    border-color: var(--btn-primary-bg-hover);
    box-shadow: 0 0 0 .25rem rgba(0, 140, 143, 0.25);
}
.form-block .iti__country-list{
    border-radius: 12px;
}
.form-label{
    color: #57636C;
}
.figure-border-radius > img{
    border-radius: var(--bs-border-radius-xl);
}
.legend{
  font-size: 1rem;
  margin-block: .5rem;

}
.legend__divider{
  position: relative;
  z-index: 2;
  background-color: #fff;
  color: #7f8b94;

}
.legend__divider > span{
    display: inline-block;
    position: relative;
    padding-inline: .75rem;
    left: 1rem;
    z-index: 2;
    background-color: #fff;
}
.legend__divider::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--light-grey-blue-tone);
    width: 100%;
    height: 1px;
    z-index: 1;


}


/* choises styles */
.choices[data-type*=select-one]::after{
    display: none;
}
.choices__inner:has(.select__choices--sm) {
    padding-top: .25rem;
    padding-bottom: .25rem !important;

}
.choices__inner:has(.select__choices--lg) {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
    border-radius: var(--bs-border-radius-lg);

}
.choices__inner:has(.select__choices--lg) .choices__input{
    font-size: 1.25rem;
}
.choices__inner, .choices__input {
    background-color: white;
    color: var(--brand-blue-color);
}
.choices__input{
    margin-block-end: 0;
    padding: 0;
    font-size: 1rem;
}

.choices__inner {
    --choices-border-radius: var(--bs-border-radius);
    --choises-border-color: #d5e2e8;
    --choices-border: 1px solid var(--choises-border-color);
    border-radius: var(--choices-border-radius);
    border: var(--choices-border);
    padding: .55rem 2.5rem .55rem .9rem;
    min-height: initial;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.is-open .choices__inner {
    border-top-left-radius: var(--choices-border-radius);
    border-top-right-radius: var(--choices-border-radius);
}
:is(.is-open,.is-focus) .choices__inner{

    border-color: var(--brand-green-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 166, .18);
}
.choices__list--multiple .choices__item {
    --choises-chips-bg: var(--brand-lightgreytone-color);
    --choises-chips-color: var(--brand-blue-color);
    border-color: var(--choises-chips-bg);
    background-color: var(--choises-chips-bg);
    color: var(--choises-chips-color);
    font-weight: normal;
    margin-block: 0;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button{
    border-color: #8eaab4;
    margin-inline-start: 6px;
    background-image: none;
    position: relative;

    /* background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDEzNzREIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==); */
}
.choices[data-type*=select-multiple] .choices__button::after,
.choices[data-type*=text] .choices__button::after{
    content: "";
    display: inline-block;
    width: 9px;
    /* -webkit-mask: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%2301374D%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M2.592.044l18.364%2018.364-2.548%202.548L.044%202.592z%22/%3E%3Cpath%20d%3D%22M0%2018.364L18.364%200l2.548%202.548L2.548%2020.912z%22/%3E%3C/g%3E%3C/svg%3E) no-repeat center / contain; */
    height: 9px;
    background: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%2221%22%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22%2301374D%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M2.592.044l18.364%2018.364-2.548%202.548L.044%202.592z%22/%3E%3Cpath%20d%3D%22M0%2018.364L18.364%200l2.548%202.548L2.548%2020.912z%22/%3E%3C/g%3E%3C/svg%3E) no-repeat center / contain;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: .9;
}
.choices[data-type*=select-multiple] .choices__button::before,
.choices[data-type*=text] .choices__button::before{
    content: "";
    display: inline-block;
    width: 108%;
    height: 184%;
    background-color: transparent;
    position: absolute;
    top: -6px;
    right: -1px;
    bottom: 0;
    z-index: 1;
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);

}

.choices[data-type*=select-multiple] .choices__button:hover::after,
.choices[data-type*=text] .choices__button:hover::after{
    opacity: 1;
}
.choices[data-type*=select-multiple] .choices__button:hover::before,
.choices[data-type*=text] .choices__button:hover::before{
    background-color: var(--brand-blue-color);
    opacity: .2;
}

.choices__list--multiple .choices__item.is-highlighted{
    background-color: var(--brand-lightgreytone-color);
    border-color: var(--brand-blue-color);
}
.choices__item--choice {
    color: var(--brand-blue-color);
}
/* ================================= css para overflow de choises =======================*/


/* details pill */
.fchip{position:relative}
.fchip:not([filtered]) .fchip__value{ display: none;}
.fchip[filtered]:not(.fchip--show__label):not(.fchip__value--inherent) .fchip__label{ display: none;}

.fchip[open]>.fchip__btn{border-color:var(--brand-green-color);box-shadow:0 0 0 3px rgba(14,165,166,.18);}
.fchip__btn{
    /* --fchip-arrow-bg-img: var(--dropdown-arrow-bg-img); */
    list-style: none; cursor: pointer;
    display:inline-flex;align-items:center;gap:.5rem;
    border:1px solid #d5e2e8;background:white;color:var(--brand-blue-color);
    border-radius:var(--chip-radius);padding:.55rem 2.5rem .55rem .9rem;cursor:pointer;user-select:none;
    /* background-image: var(--fchip-arrow-bg-img, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px; */
    &:focus{
        border-color: var(--brand-green-color);
        box-shadow: 0 0 0 3px rgba(14, 165, 166, .18);
        outline-color: var(--brand-green-color);
    }
}
.choices__inner{
    /* --choises-arrow-bg-img: var(--dropdown-arrow-bg-img); */
    padding-right: 2.5rem;
    /* background-image: var(--choises-arrow-bg-img, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px; */
    position: relative;
    /* display: flex;
    align-items: center; */
}
.choices__inner::after{
    /* display: none; */
        content: "";
    border: none;
    background-image: var(--dropdown-arrow-bg-img, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    width: 26px;
    height: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* dropdown */
.dropdown-toggle{ position: relative;}
.dropdown-toggle::after{
    content: "";
    border: none;
    background-image: var(--dropdown-arrow-bg-img, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 12px;
    margin: 0;
    width: 26px;
    height: 25px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.fchip__btn::-webkit-details-marker{display:none;}
.fchip__label{ /*opacity: .7;*/ display: inline-flex; gap: 2px; align-items: center; font-weight: 600;}
.fchip__label .badge {
    padding: 2px 8px;
}
.fchip__value{font-weight:600}

/* dropdown */
.fchip__menu{
  position:absolute; z-index:50; min-width: min(360px, 92vw);
  margin-top:.4rem; background:#fff; border:1px solid #e2eaee;
  border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.1);
  padding:.75rem;
}
.fchip__menu::before{
    content: attr(data-field-label);
    display: inline-flex;
    color: var(--ts-muted);
    margin: .5rem;

}
.fchip__set{display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: stretch;
    flex-direction: column;}
.fchip__set--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.check,.radio{display:inline-flex;align-items:center;gap:.45rem;padding:.25rem .5rem; border-radius:.5rem;cursor:pointer}
.check input,.radio input{accent-color:var(--brand-green-color)}
.fchip__row{display:flex;align-items:center;gap:.5rem}
.fchip__input{width:10rem;border:1px solid #d5e2e8;border-radius:8px;padding:.5rem .6rem}
.fchip__sep{opacity:.6}
.fchip__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.6rem}

/* Dropdown con scroll para listas largas */
.fchip__menu.fchip__menu--scrollable,
.fchip__menu--scrollable.dropdown-menu {
  display: flex;
  flex-direction: column;
  height: 500px;
  max-height: 50svh !important;
  min-height: 0 !important;
  padding: 0;
  overflow: hidden;
}

@media (max-height: 700px) {
  .fchip__menu.fchip__menu--scrollable,
  .fchip__menu--scrollable.dropdown-menu {
    height: 70vh !important;
    max-height: 70vh !important;
    min-height: 0 !important;
  }
}

.fchip__menu--scrollable::before {
  padding: .75rem .75rem .5rem .75rem !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2eaee !important;
  flex-shrink: 0 !important;
}

.fchip__menu__content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: .75rem !important;
  padding-top: .5rem !important;
  height: 0 !important; /* Necesario para que flex funcione con overflow */
}

.fchip__menu__content::-webkit-scrollbar {
  width: 8px;
}

.fchip__menu__content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.fchip__menu__content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.fchip__menu__content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.fchip__actions--sticky {
  flex-shrink: 0 !important;
  position: sticky !important;
  bottom: 0 !important;
  background: #fff !important;
  padding: .75rem !important;
  margin-top: 0 !important;
  border-top: 1px solid #e2eaee !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05) !important;
  z-index: 1 !important;
}

.fchip .dropdown-menu {
  /* tus estilos del panel… */
  max-width: min(92vw, 380px);
}
/* tabs */
.nav{
    --bs-nav-link-color: var(--dark-grey);
    --bs-nav-link-hover-color: var(--body-text-color);
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-disabled-color: #aaaeae;
}
.nav-tabs{
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-style: solid;
    --bs-nav-tabs-border-radius: 8px;
    --bs-nav-tabs-link-active-color: var(--btn-primary-bg-color);

    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: var(--btn-primary-bg-color);
    border-bottom: 1px solid #d7dce1;
    & .nav-item{
        margin-top: -1px;
        /* display: flex;
        align-items: flex-end; */
    }
    & .nav-link{
        position: relative;
    }
    & .nav-link:not(.active):hover{
        background-color: var(--brand-lightgrey-color);
        border-color: var(--brand-lightgrey-color);
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

    }
    & .nav-link::after{
        content: "";
        position: absolute;
        opacity: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--brand-lightgrey-color);
        transition: all 250ms ease-in-out;
        opacity: 0;
    }
    & .nav-link.active{
        border: 1px solid white;
        font-weight: 700;

    }
    & .nav-link.active::after{
        opacity: 1;
        background-color: var(--btn-primary-bg-color);
    }
}
/* modal */

/* Base opcional: ancho por defecto del modal en Bootstrap */
.modal.modal--side-sheet { /* mobile/tablet = modal normal */
  /* nada especial acá; el side-sheet se activa solo en desktop */
}

/* Desktop-only: side sheet a la derecha */
@media (min-width: 992px) {
  .modal.modal--side-sheet {
    /* Usamos la var de Bootstrap para fijar ancho máximo del diálogo */
    --bs-modal-width: min(90vw, 480px);
    padding: 0; /* sin padding interior del overlay */
  }

  .modal.modal--side-sheet .modal-dialog {
    margin: 0 0 0 auto;     /* dock a la derecha */
    height: 100vh;          /* alto completo */
    max-height: 100vh;
    display: flex;
    align-items: stretch;
    transform: translateX(100%);             /* estado inicial (con .fade) */
    transition: transform .3s ease-in-out;   /* animación de deslizamiento */
  }

  /* Mostrar deslizándose desde la derecha */
  .modal.modal--side-sheet.show .modal-dialog {
    transform: translateX(0);
  }
  /* Asegura que .fade use nuestra animación horizontal, no la vertical por defecto */


  .modal.modal--side-sheet .modal-content {
    height: 100%;
    border-radius: 12px 0 0 12px; /* redondeo solo del lado izquierdo */
    /* Sombras de Bootstrap ya aplican; podés reforzar si querés */
  }
}



/* border */
.border-bottom,
.border-top{
    border-color: var(--brand-lightgrey-color) !important;
}
/* tooltip */
.tooltip{
    --bs-tooltip-bg: var(--brand-blue-color);
}
.tooltip-inner{
    border-radius: var(--bs-border-radius-xl);
    padding: .75rem 1.25rem;
}
.tooltip-arrow{
    opacity: 0;
}
/* breadcrumb */

.breadcrumb-item+.breadcrumb-item::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 22px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='8'><path fill='none' stroke='%23666' d='M1 0l4 4-4 4'/></svg>") no-repeat 2px;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.75rem;
}
.breadcrumb{
    padding-block: 1rem;
}
.breadcrumb-item > a{
    color: var(--brand-blue-color);
}
.breadcrumb-item.active{
    color: #8fa09c;
    /* opacity: .8; */
}
.table{
    --bs-table-color: var(--body-text-color);
    border-collapse: separate;
}
.table th,
.table td {
  padding: .5rem;
  border: 1px solid var(--light-grey-blue-tone);

}
.table thead th:first-child{
    border-top-left-radius: var(--bs-border-radius-sm);
}
.table thead th:last-child{
    border-top-right-radius: var(--bs-border-radius-sm);
}
/* divider */
.divider{
    --divider-color: var(--brand-lightgrey-color);
    background-color: var(--divider-color);
    display: block;
    opacity: 1;
    height: 1px;
    width: 100%;
    border-top: 0;
    margin-block-start: 52px;
    margin-block-end: 52px;
}
.divider-light-blue{
    --divider-color: var(--brand-lightblue-color);
}
.divider-light{
    --divider-color: var(--brand-lightgrey-color);
}
.divider-dark{
    --divider-color: var(--brand-blue-color);
}

/* card */
.card{
    --bs-card-border-radius: var(--bs-border-radius-xl);
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 2rem;
}
.card--light{
    --bs-card-bg: var(--brand-lightgrey-color);

}
/* swiper */

/* Controles Swiper */
.swiper__control{ color: white; opacity:0; transition:opacity .2s ease; }
.swiper:hover .swiper__control{ opacity:.8; }
.swiper .swiper__control:hover{ opacity:1; }
.swiper-pagination-hidden{ display: none; }
.swiper-pagination .swiper-pagination-bullet{
  width:16px; height:16px; background:var(--brand-lightgrey-yellow-color); opacity:1;
}
.swiper-pagination .swiper-pagination-bullet-active{
  background:var(--brand-orange-color);
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
    margin-inline: 8px;
}

.swiper:has(.swiper-pagination:not(.swiper-pagination-hidden)){
    & .swiper-wrapper{
        padding-block-end: 4rem;
    }
    & .swiper-button-next, & .swiper-button-prev{
        --offset-discount: calc(4rem / 2);
        top: calc(50% - var(--offset-discount));
    }
}
/* generic */
.text--shadow{ text-shadow: 0 2px 59px rgba(0, 0, 0, 0.5); }
.text--yellow{ color: var(--brand-yellow-color) !important; }
.text--orange{ color: var(--brand-orange-color) !important; }
.text--green{ color: var(--brand-green-color) !important; }
.text--blue{ color: var(--brand-blue-color) !important; }
.text--light-blue{ color: var(--brand-lightblue-color) !important;}
.text--white{ color: white !important; }
.text--light-grey{ color: var(--brand-lightgrey-color) !important; }


.background--yellow{ background-color: var(--brand-yellow-color) !important; }
.background--green{ background-color: var(--brand-green-color) !important; }
.background--blue{ background-color: var(--brand-blue-color) !important; }
.background--light-blue{ background-color: var(--brand-lightblue-color) !important;}
.background--white{ background-color: white !important; }

.text-balance{ text-wrap: balance; }

.isotipo svg{

    & > g > path{
        fill: var(--brand-lightblue-color);
    }
}


:is(:disabled,.disabled,.nav-link.disabled, .nav-link:disabled){
    opacity: 0.9;
}







/* Estilos generales del contenedor Select2 para hacerlo más visible */
.select2-container {
  width: 100% !important;
  position: relative;
}

/* Dropdown de Select2 - z-index alto para que aparezca por encima */
.select2-dropdown {
  z-index: 9999 !important;
}

.select2-container--open .select2-dropdown {
  z-index: 9999 !important;
  top: 30px !important;
}

/* Asegurar que el contenedor del dropdown tenga el z-index correcto */
.select2-container--open {
  z-index: 9999 !important;
}

/* Asegurar que el contenedor del select2 no tenga overflow que corte el dropdown */
.select2-container {
  overflow: visible !important;
}

.srch__searchbox {
  overflow: visible !important;
}

/* Estilo para el mensaje de límite "+X" */
/* Select2 lo genera como un <span> dentro del contenedor */
.select2-selection__choice__limit {
  /* Asegura que se vea como un tag o píldora */
  display: inline-block;
  padding: 0 8px;
  margin-right: 5px;
  /* Estos estilos hacen que el tag se parezca a uno seleccionado */
  background-color: #5897fb;
  /* Color de fondo azul (similar a Zonaprop) */
  color: #fff;
  /* Texto blanco */
  border: 1px solid #5897fb;
  border-radius: 4px;
  line-height: 26px;
  /* Ajusta la altura del texto */
  font-weight: bold;

  /* Ajuste de posición (Select2 usa márgenes complejos) */
  position: relative;
  top: 2px;
  /* Pequeño ajuste vertical si es necesario */
  cursor: default;
}

/* Ajuste para que las píldoras estén centradas verticalmente */
.select2-container .select2-selection--multiple {
  min-height: 48px;
  --select2-border-radius: var(--bs-border-radius);
  --select2-border-color: #d5e2e8;
  --select2-border: 1px solid var(--select2-border-color);
  border-radius: var(--select2-border-radius);
  border: var(--select2-border);
  padding: .55rem 2.5rem .55rem .9rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  padding-right: 10px !important;
}

/* Estilo cuando select2 está desplegado/abierto */
.select2-container--open .select2-selection--multiple,
.select2-container--open .select2-selection--single {
  border-color: var(--brand-green-color);
  box-shadow: 0 0 0 3px rgba(14, 165, 166, .18);
}

/* Ocultar el texto de la 'X' de eliminar en el tag si solo quieres el ícono */
.select2-selection__choice__remove {
  color: white;
  font-weight: bold;
  margin-right: 5px;
}

/* Estilo para el contador +X inyectado manualmente */
.select2-custom-counter {
  cursor: default;
}

.select2-selection__choice__remove{
  left: auto !important;
  right: -6px !important;
  border-left: 1px solid #aaa !important;
  color: var(--brand-blue-color) !important;
  border-right: 0px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  top: 0px !important;
  height: 100%;
  width: 20px!important;
  font-size: 20px!important;
  font-weight: lighter!important;
  display: flex!important;
  align-items: center!important;
  place-items: center!important;
}

.select2-selection__choice__remove:hover{
  background-color:  #cccccc !important;
  color: var(--brand-blue-color) !important;
  font-weight: semibold !important;
  transition: all 0.2s ease-in-out !important;
}

.select2-selection__choice__display{
  padding-right: 15px !important;
  padding-left: 0px !important;
  font-weight: normal !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #aaa;
  border-radius: 4px;
  margin-right: 5px;
  margin-left: 0px;
  padding-right: 20px;
  padding-left: 0px;

  --choises-chips-bg: var(--brand-lightgreytone-color);
  --choises-chips-color: var(--brand-blue-color);
  border-color: var(--choises-chips-bg);
  background-color: var(--choises-chips-bg);
  color: var(--choises-chips-color);
  font-weight: normal;
  margin-block: 0;

  display: inline-block;
  vertical-align: middle;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  margin-right: 3.75px;
}