@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Manrope:wght@400..800&display=swap');
:root{

    /* --------------------------- MARCA --------------------------- */
    --primary:      #17c2b2;
    --primary-dark: #0b7d74;
    --primary-soft: #a5f0e6;
    /* tinte de marca para fondos sutiles (hover de filas, chips, halos) */
    --primary-tint: #eafaf7;
    /* texto legible encima de un relleno --primary */
    --on-primary:   #04231f;

    --second:       #98a1ae;
    --second-dark:  #7c8695;
    --second-soft:  #dfe3e9;

    --alternate:        #0f1518;
    --alternate-dark:   #070b0d;
    --alternate-soft:   #2a3338;

    --success:      #12a150;
    --info:         #2b8fe0;
    --warning:      #d99413;
    --danger:       #d13b3b;
    --dark:         #333a44;

    --success-soft: #d8f3e3;
    --info-soft:    #d7e9fa;
    --warning-soft: #fbeed0;
    --danger-soft:  #fadede;
    --dark-soft:    #98a1ae;

    --white:        #ffffff;
    --red:          #d13b3b;
    --pink:         #e263d4;
    --purple:       #7c5cd6;
    --blue:         #2b7fe0;
    --green:        #2ba24f;
    --lime:         #86ae14;
    --teal:         #109b93;
    --yellow:       #e5ac0b;
    --brown:        #a76f4a;
    --orange:       #f07d2a;
    --gray:         #7b8698;
    --black:        #000000;

    /* ------------------------- SUPERFICIES ------------------------ */
    --background:   #f5f7f9;
    --bg-elements:  #ffffff;
    /* superficie hundida: fondos de tabla, celdas, zonas de lectura */
    --bg-sunken:    #f0f3f6;
    --text-color:   #131a24;
    --text-normal:  #47505f;
    --text-label:   #7b8698;

    --border-color: #e5e9ef;
    --border: 1px solid var(--border-color);
    --gr-elements: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
    --disabled: inset 0 0 100px 100px rgba(123, 134, 152, 0.12);
    --font: "Lato", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Manrope", "Lato", -apple-system, "Segoe UI", Roboto, sans-serif;
    --gr-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 115%);
    --icon-img: unset;

    /* ------------------------- ELEVACIÓN -------------------------- */
    /* sombras en capas y de baja opacidad: dan profundidad sin ensuciar */
    --shadow-xs:    0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm:    0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow:       0 4px 14px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .05);
    --shadow-lg:    0 14px 36px rgba(16, 24, 40, .12), 0 4px 10px rgba(16, 24, 40, .06);
    --shadow-primary: 0 6px 18px rgba(23, 194, 178, .30);
    --ring:         0 0 0 3px rgba(23, 194, 178, .32);

    /* --------------------------- MOVIMIENTO ----------------------- */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --t-fast: .15s;
    --t: .25s;

    --r: .5rem;
    --r-0: 0rem;
    --r-1: 1rem;
    --r-2: 2rem;
    --r-3: 3rem;
    --r-4: 4rem;
    --r-5: 5rem;
}
[data-theme="dark"]:not(.page-login){
    --primary-tint: rgba(23, 194, 178, .12);
    --primary-soft: #6fdccf;

    --second-soft:  #2c3644;
    --success-soft: #123626;
    --info-soft:    #102b44;
    --warning-soft: #3a2e0f;
    --danger-soft:  #3d1c1c;

    --background:   #0d1117;
    --bg-elements:  #161c25;
    --bg-sunken:    #11171f;
    --text-color:   #e9eef5;
    --text-normal:  #b9c3d1;
    --text-label:   #94a0b2;

    --border-color: #262f3d;
    --border: 1px solid var(--border-color);
    --gr-elements: linear-gradient(180deg, #1a212b 0%, #141a23 100%);
    --disabled : inset 0 0 100px 100px rgba(148, 160, 178, 0.14);
    --icon-img:  invert(100%);

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, .40);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30);
    --shadow:       0 4px 16px rgba(0, 0, 0, .50), 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-lg:    0 16px 40px rgba(0, 0, 0, .60), 0 4px 10px rgba(0, 0, 0, .40);
}
*{
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background-color: var(--background);
    font-family: var(--font);
    font-weight: 400;
    font-style: normal;
    font-size: .9rem;
    line-height: 1.5;
    overflow-x: hidden;
    /* suaviza el trazo de la fuente: el texto se ve más fino y caro */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
p{
    margin: .25rem 0;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}
/* Los importes se alinean en columna sólo con cifras de ancho fijo */
h1, h2, h3, .table, .amount, .font-1, .font-2, .font-3, .font-4{
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
::selection{
    background: var(--primary-soft);
    color: var(--on-primary);
}
/* Anillo de foco unificado: sólo aparece en navegación por teclado */
:where(a, button, .button, input, select, textarea, [tabindex]):focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r);
}
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
.icon-img{
    filter: var(--icon-img);
}
.icon-tipo{
    background: var(--primary);
    border-radius: 50%;
    width: 2.25rem;
    padding: .35rem;
}
.btn-dowload{
    display: flex;
    align-items: center;
}
.cursor-pointer {
    cursor: pointer;
}
.btn-no-style {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.flickity-page-dots .dot{
    background: var(--text-color) !important;
}
.bg-login{
    /* antes: radial gris->blanco. Ahora lienzo de tinta para que la tarjeta flote */
    background:
        radial-gradient(70% 55% at 15% 10%, rgba(23, 194, 178, .22) 0%, transparent 60%),
        radial-gradient(60% 60% at 90% 90%, rgba(23, 194, 178, .16) 0%, transparent 60%),
        linear-gradient(160deg, #0a1417 0%, #060d10 50%, #08181a 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
}
.gr-elements{
    background: radial-gradient(circle, var(--primary-dark) 30%, var(--primary) 100%) !important;
    background-repeat: no-repeat !important;
}
/* .gr-primary{
    background: linear-gradient(359deg, var(--primary) 0%, var(--primary-soft) 115%);
} */
.page-content{
    position: relative;
    top: 5rem;
    left: 270px;
    width: calc(100% - 270px);
    /* aire al final para que el contenido no quede pegado al borde inferior */
    padding-bottom: 4rem;
    transition: all 0.5s ease;
}
.sidebar.collapsed~.page-content, 
.sidebar.collapsed~.content-nav {
    left: 85px;
    width: calc(100% - 85px);
}
.content-nav~.page-content {
    top: 260px;
}
.line-bottom{
    padding-bottom: .5rem;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: .5rem;
}
:disabled {
    cursor: not-allowed;
}
.button:disabled {
    cursor: not-allowed;
}
.label-error {
    color: #ff6666;
    font-size: .785rem;
    display: none;
}
.label-error.show {
    display: block;
    text-align: justify;
}
/* ================================================================================================= //
// ------------------------------------------- TEL PHONE ------------------------------------------- //
// ================================================================================================= */
.vti__dropdown-item{
    color: var(--black) !important;
}
.vue-tel-input{
    padding: 0 .75rem !important;
    box-sizing: border-box !important;
    outline:none;
    height: 42px;
    color: #6f7892;
    border: var(--border) !important;
    border-radius: .5rem !important;
    box-shadow: none !important;
    font-weight: 300;
    width: 100%;
    font-size: .885rem;
    font-family: var(--font);
}
.vue-tel-input:focus-within {
    outline: .1rem solid var(--alternate);
}
.vti__dropdown-list{
    width: 370px;
}
.multiselect {
    padding: 0 .75rem !important;
    box-sizing: border-box !important;
    outline:none;
    /* height: 40px; */
    color: #6f7892;
    border: var(--border);
    border-radius: .5rem;
    box-shadow: none !important;
    font-weight: 300;
    width: 100%;
    font-size: .885rem;
    font-family: var(--font);
    
}
.multiselect__tags {
    border: none !important;
}
/* Estilos personalizados para vue-multiselect */
.multiselect__option--highlight.multiselect__option {
  /* Estilos para el foco */
    background: var(--primary) !important;
}

.multiselect__option--highlight:hover {
  /* Estilos para el hover */
  background-color: var(--primary) !important; /* Cambia el color de fondo cuando el mouse está sobre el componente */
}
/* ================================================================================================= //
// --------------------------------------------- INPUT --------------------------------------------- //
// ================================================================================================= */
.input-block {
    position: relative;
    margin-bottom: .65rem;
}

.input-block span.placeholder {
    position: absolute;
    width: auto;
    margin: 12px 0;
    padding: 0 .45rem;
    font-family: var(--font);
    color: var(--text-label);
    display: flex;
    align-items: center;
    top: 0;
    left: 17px;
    transition: all 0.2s;
    transform-origin: 0% 0%;
    background: none;
    pointer-events: none;
    user-select: none; 
}

.date-picker,
.input-block .input:valid + span.placeholder,
.input-block .input:read-only + span.placeholder,
.input-block .input:focus + span.placeholder {
    transform: scale(0.8) translateY(-27px);
    font-size: 1.05rem;
    background: var(--bg-elements) !important;
}
.input-block .input:focus + span.placeholder {
    color: var(--text-color);
}
.input-block + .label-error.show{
    margin-top: -10px;
    margin-bottom: .685rem;
}
/* ================================================================================================= //
// ---------------------------------------------- SWAL --------------------------------------------- //
// ================================================================================================= */
.swal2-html-container{
    color: var(--text-normal) !important;
    font-size: 1rem !important;
}
.swal2-popup.swal2-modal{
    border-radius: 1.125rem;
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
}
.swal2-popup .swal2-title{
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}
.swal2-container.swal2-backdrop-show{
    background: rgba(9, 17, 20, .55);
    backdrop-filter: blur(3px);
}
.swal2-icon-error.swal2-show{
    border: 2px solid var(--danger);
}
.swal2-icon-success.swal2-show{
    border: 2px solid var(--success);
}
.swal2-icon-warning.swal2-show{
    border: 2px solid var(--warning);
}
.swal2-icon-info.swal2-show{
    border: 2px solid var(--info);
}
.swal2-confirm {
    border: none !important;
}
/* ================================================================================================= //
// -------------------------------------------- FLICKITY ------------------------------------------- //
// ================================================================================================= */
.content-ps .flickity-button-icon{
    fill: currentColor !important;
    color: var(--alternate) !important;
}
.content-ps .flickity-button {
    background: transparent !important;
    border: none !important;
}
/* ================================================================================================= //
// --------------------------------------------- ARROW --------------------------------------------- //
// ================================================================================================= */
.arrow-up::before,
.arrow-down::before {
    font-size: 2rem;
    margin-right: 0.75rem;
    text-align: left;
    position: absolute;
    left: 5px;
    top: 50%;

}
.arrow-warning::before {
    font-size: 1.5rem;
    /* margin-right: rem; */
    text-align: left;
    position: absolute;
    left: 0.1px;
    font-weight: bold;
    top: 10%;

}
.arrow-up::before {
    content: "\203A";
    display: inline-block;
    transform: translateY(-50%) rotate(270deg);
    color: var(--success);
}
.arrow-warning::before {
    content: "\26A0";
    display: inline-block;
    /* transform: translateY(-50%) rotate(270deg); */
    color: var(--warning);
}
.arrow-down::before {
    content: "\203A";
    display: inline-block;
    transform: translateY(-50%) rotate(90deg);
    color: var(--danger);
}
.arrow-empty::before {
    content: "\2195";
    color: var(--gray);
}
/* ================================================================================================= //
// --------------------------------------------- TITLE --------------------------------------------- //
// ================================================================================================= */
.title{
    text-align: left;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 1.25rem;
}
/* ================================================================================================= //
// -------------------------------------------- BORDER ------------------------------------------- //
// ================================================================================================= */
.border-radius{
    border-radius: .5rem;
}
/* ================================================================================================= //
// -------------------------------------------- POSITION ------------------------------------------- //
// ================================================================================================= */
.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
/* ================================================================================================= //
// ---------------------------------------------- FLEX --------------------------------------------- //
// ================================================================================================= */
.flex{
    display: flex;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-start{
    display: flex;
    justify-content: flex-start;
}
.flex-end{
    display: flex;
    justify-content: flex-end;
}
.flex-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-v{
    display: flex;
    align-items: center;
}
.flex-center-h{
    display: flex;
    justify-content: center;
}
.flex-wrap{
    flex-wrap: wrap;
} 
/* ================================================================================================= //
// -------------------------------------------- SHADOW --------------------------------------------- //
// ================================================================================================= */
.shadow{
    box-shadow: var(--shadow);
}
/* ================================================================================================= //
// -------------------------------------------- BUTTON --------------------------------------------- //
// ================================================================================================= */
.button {
    position: relative;
    display: inline-block;
    font-size: .875rem;
    padding: .625rem 1.1rem;
    margin: .35rem .25rem;
    box-sizing: border-box;
    white-space: normal;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border: none;
    border-radius: .625rem;
    overflow: hidden;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
    color: var(--white);
    background-color: var(--dark);
    box-shadow: var(--shadow-xs);
    outline: none;
    transition: transform var(--t-fast) var(--ease),
                box-shadow var(--t) var(--ease),
                filter var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}
a.button{
    text-decoration: none;
}
.button.icon{
    height: 2.1rem;
    width: 2.1rem;
    padding: 0;
    font-size: 1.05rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.button:hover:not(:disabled){
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.button:active:not(:disabled){
    transform: translateY(0);
    filter: brightness(.94);
    box-shadow: var(--shadow-xs);
}
.button:disabled{
    opacity: .55;
    box-shadow: none;
    filter: grayscale(.25);
    transform: none;
}
/* Relleno de marca: el turquesa es claro, el texto va en tinta, no en blanco */
.button.primary,
.button.gr-primary,
.button.primary-soft,
.button.warning,
.button.white,
.button.second-soft{
    color: var(--on-primary);
}
.button.primary{
    box-shadow: var(--shadow-primary);
}
.button.primary:hover:not(:disabled){
    box-shadow: 0 10px 24px rgba(23, 194, 178, .38);
}
.button.white{
    background-color: var(--bg-elements);
    color: var(--text-color);
    box-shadow: inset 0 0 0 1px var(--border-color), var(--shadow-xs);
}
.button.white:hover:not(:disabled){
    background-color: var(--bg-sunken);
    filter: none;
}
.button.gr-primary{
    font-weight: 700;
}
/* Variante fantasma: acciones secundarias sin peso visual */
.button.ghost{
    background: transparent;
    color: var(--text-normal);
    box-shadow: inset 0 0 0 1px var(--border-color);
}
.button.ghost:hover:not(:disabled){
    background: var(--primary-tint);
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 1px var(--primary);
    filter: none;
}

.input-block .button{
    margin-top: 3px;
}
.button-icon{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.15rem;
    color: var(--text-color);
    background: transparent;
    outline: none;
    border: 0;
    cursor: pointer;
    margin: .75rem .35rem;
}
.button-icon i {
    pointer-events: none;
}

/* ================================================================================================= //
// -------------------------------------------- wrapper -------------------------------------------- //
// ================================================================================================= */
.wrapper {
    display: flex;
    width: 100%;
    /* height: 400px; */
    /* background: #fff; */
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
}

.wrapper .btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    border: 0;
    color: var(--white);
    transition: all 0.3s linear;
    z-index: 5;
    cursor: pointer;
    font-size: 1.5rem;
    background: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}
.btn-arrow.button:active {
    transform: scale(0.94) translateY(-50%);
}
#prev {
    left: 5px;
}
#next {
    right: 5px;
}
.image-container {
    height: auto;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}
.wrapper .image-container{
    height: 210px;
}
.image-container .carousel {
    display: flex;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease;
    position: relative;
}
.image-container .carousel .img-banner{
    width: 100%;
    height: 210px;
    object-fit: fill;
}
.carousel .card {
    width: 100%;
    min-width: 100%;
    overflow: hidden;
}
.carousel .img-novedades {
    width: 100px;
    height: 100px;
}
/* ================================================================================================= //
// --------------------------------------------- SIZE ---------------------------------------------- //
// ================================================================================================= */
.w-1{
    min-width: 1rem;
}
.w-2{
    min-width: 2rem;
}
.w-3{
    min-width: 3rem;
}
.w-4{
    min-width: 4rem;
}
.w-5{
    min-width: 5rem;
}
.w-6{
    min-width: 6rem;
}
.w-7{
    min-width: 7rem;
}
.w-8{
    min-width: 8rem;
}
.w-9{
    min-width: 9rem;
}
.w-10{
    min-width: 10rem;
}
.w-11{
    min-width: 11rem;
}
.w-12{
    min-width: 12rem;
}
.w-13{
    min-width: 13rem;
}
.w-14{
    min-width: 14rem;
}
.w-15{
    min-width: 15rem;
}
.w-100{
    width: 100%;
}
/* ================================================================================================= //
// ----------------------------------------- BORDER RADIUS ----------------------------------------- //
// ================================================================================================= */
.br{
    border-radius: .5rem;
}
.br-1{
    border-radius: 1rem;
}
.br-2{
    border-radius: 3rem;
}
/* ================================================================================================= //
// --------------------------------------------- CARD ---------------------------------------------- //
// ================================================================================================= */
.card{
    width: 100%;
    /* margin: .75rem 0; */
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    border-radius: .875rem;
    color: var(--text-color);
    border: var(--border);
    background: var(--bg-elements);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--t) var(--ease),
                transform var(--t) var(--ease),
                border-color var(--t) var(--ease);
}
/* Realce sólo en tarjetas accionables, para no animar el tablero entero */
.card.cursor-pointer:hover,
a .card:hover,
.card.interactive:hover{
    box-shadow: var(--shadow);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.card.block{
    margin: .5rem 0;
}
.card-img img{
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 1rem 1rem 0 0;
}
.card-header{
    padding: .85rem 1rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    /* antes: `border-bottom: 1rem` (ancho sin estilo => sin línea visible) */
    border-bottom: var(--border);
}
.card-body{
    padding: .85rem 1rem;
}
.card-footer{
    padding: .75rem 1rem;
    font-size: .9285rem;
    border-top: var(--border);
}
.card-footer.button{
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 .875rem .875rem;
    position: relative;
    outline: 0;
    box-shadow: none;
    transform: none;
}
/* ================================================================================================= //
// ------------------------------------------ dropdown --------------------------------------------- //
// ================================================================================================= */
.dropdown{
    position: relative;
}
.dropdown i{
    pointer-events: none;
}
.dropbtn {
    background-color: transparent;
    font-size: 1.35rem;
    border: none;
    cursor: pointer;
    color: var(--text-color);
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--bg-elements);
    min-width: 180px;
    overflow: auto;
    box-shadow: var(--shadow-lg);
    z-index: 15;
    border-radius: .75rem;
    border: var(--border);
    padding: .35rem;
    text-align: left;
}
.dropdown-content a {
    color: var(--text-color);
    padding: .6rem .75rem;
    border-radius: .5rem;
    font-size: .875rem;
    text-decoration: none;
    display: block;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dropdown-content a:hover {
    background: var(--primary-tint);
    color: var(--primary-dark);
}
.dropdown-content.show {
    display: block;
}
/* ================================================================================================= //
// ----------------------------------------- Input file -------------------------------------------- //
// ================================================================================================= */
.upload{
    width: max-content;
    min-width: 11rem;
    display: inline-block;
    font-size: .85rem;
    font-weight: normal;
    text-align: center;
}
.upload span{
    font-weight: bold;
    color: var(--white);
}
.upload:hover span{
    color: var(--white);
}
.upload input[type = "file"]{
    height: 0.1px;
    width: 0.1px;
    position: absolute;
    z-index: -1;
    overflow: hidden;
    opacity: 0;
}
.flex-upload{
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-upload .upload{
    width: auto;
    min-width: 7rem;
    border-radius: .25rem 0 0 .25rem;
    height: 35px;
}

.upload:active{
    box-shadow: inset 6px 6px 10px -7px rgba(92, 92, 92, 0.25);
}
/* ================================================================================================= //
// -------------------------------------------- STEPS ---------------------------------------------- //
// ================================================================================================= */
/* Steps Navigation */
.steps {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-label);
}

.step.active {
    color: var(--text-color);
}

.step-number {
    /* antes: #ddd fijo, se salía del tema oscuro */
    background-color: var(--bg-sunken);
    border: var(--border);
    color: var(--text-label);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .8rem;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    margin-bottom: 6px;
    transition: background-color var(--t) var(--ease),
                color var(--t) var(--ease),
                box-shadow var(--t) var(--ease);
}

.step.active .step-number {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-primary);
}

.step-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Progress Bar */
.progress-bar {
    height: 6px;
    background-color: var(--bg-sunken);
    border: var(--border);
    border-radius: 999px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    transition: width .4s var(--ease);
}

/* Form Fields */
.step-form {
    transition: all 0.3s ease;
}
/* ================================================================================================= //
// -------------------------------------------- LIST ---------------------------------------------- //
// ================================================================================================= */
.item-list{
    margin: 0 2rem;
    padding: 0;
    width: 97%;
    counter-reset: li;
    list-style: decimal;
    text-align: center;
}
.item-list .list{
    list-style: none;
    position: relative;
    display: block;
    padding: .65rem 2rem;
    margin: .85em 0;
    /* antes: gradiente gris fijo; ahora sigue la superficie del tema */
    background: var(--bg-elements);
    border: var(--border);
    box-shadow: var(--shadow-xs);
    text-decoration: none;
    border-radius: 2rem;
    transition: border-color var(--t) var(--ease),
                box-shadow var(--t) var(--ease),
                transform var(--t) var(--ease);
    color: var(--text-normal);
}
.item-list .list:hover{
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.item-list .list:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: var(--primary);
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid var(--bg-elements);
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    border-radius: 2em;
    color: var(--on-primary);
}
/* ================================================================================================= //
// -------------------------------------------- LABEL ---------------------------------------------- //
// ================================================================================================= */
/* Chips de estado: relleno tenue + borde fino, en vez de un contorno de 2px */
.label-primary,
.label-success,
.label-warning,
.label-danger,
.label-dark{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .2rem .6rem;
    font-family: var(--font-display);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    text-align: center;
    cursor: default;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.label-primary{
    color: var(--primary-dark);
    background: var(--primary-tint);
}
.label-success{
    color: var(--success);
    background: var(--success-soft);
}
.label-warning{
    color: var(--warning);
    background: var(--warning-soft);
}
.label-danger{
    color: var(--danger);
    background: var(--danger-soft);
}
.label-dark{
    color: var(--dark);
    background: var(--second-soft);
}
.label{
    padding: .25rem 1rem;
    border-radius: .5rem;
    font-size: .85rem;
    color: var(--white);
}
/* ================================================================================================= //
// ---------------------------------------- Radio - Check ------------------------------------------ //
// ================================================================================================= */
.group-check{
    margin-bottom: 1rem;
}
.group-check label{
    cursor: pointer;
    margin-right: 1rem;
    font-size: .875rem;
}
.checkbox{
    position: relative;
    font-size: .95rem;
    cursor: pointer;
    user-select: none;

    appearance: none;
    cursor: pointer;
}
.checkbox::after{
    content: " ";
    background-color: var(--bg-elements);
    border: .125rem solid var(--second);
    border-radius: .3rem;
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: bottom;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.checkbox:hover:not(:disabled)::after{
    border-color: var(--primary);
}
input[type="radio"].checkbox::after {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.checkbox:disabled:after{
    cursor: not-allowed;
    opacity: .525;
    box-shadow: inset 0 0 100px 100px rgba(100, 100, 100, 0.25);
}
.checkbox:checked:after {
    user-select: none;
    background-color: var(--primary);
    border-color: var(--primary);
}
.checkbox:checked::before {
    /* el turquesa es claro: la palomita va en tinta, no en blanco */
    color: var(--on-primary);
    font-weight: bolder;
    font-size: .9rem;
    content: "\2714";
    position: absolute;
    top: 50%;
    transform: translate(35%, -50%);
}
.checkbox.second::after{
    border: .15rem solid var(--second-dark);
}
.checkbox.second:checked:after {
    background-color: var(--second);
}
/* ================================================================================================= //
// ----------------------------------------- Radio group ------------------------------------------- //
// ================================================================================================= */
.radio-block input[type="radio"] {
    position: fixed;
    appearance: none;
    width: 0;
}
/* Grupo segmentado: borde fino y relleno de marca sólo en el activo */
.radio-block label {
    display: inline-block;
    color: var(--text-normal);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .875rem;
    padding: .5rem .95rem;
    background-color: var(--bg-elements);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin: 0 -1px;
    min-width: 7rem;
    text-align: center;
    user-select: none;
    transition: background-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.radio-block label:nth-of-type(1){
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}
.radio-block label:last-child{
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.radio-block label i {
    margin-right: .35rem;
    font-size: .875rem;
}
.radio-block label:hover {
    cursor: pointer;
    background-color: var(--bg-sunken);
}
.radio-block input[type="radio"]:checked + label {
    color: var(--on-primary);
    background-color: var(--primary);
    border-color: var(--primary);
    position: relative;
    z-index: 1;
}
.radio-block input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: .525;
    box-shadow: inset 0 0 100px 100px rgba(100, 100, 100, 0.25);
}
/* ================================================================================================= //
// -------------------------------------------- TABLE ---------------------------------------------- //
// ================================================================================================= */
.table-responsive{
    width: 100%;
    display: block;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: .875rem;
    background: var(--bg-elements);
    padding: 0 .5rem;
    border: var(--border);
    box-shadow: var(--shadow-xs);
}
.table{
    width: 100%;
    /* border-collapse: collapse; */
    border-collapse: separate;
    border-spacing: 0 .15rem;
}
.table-responsive.table-scroll{
    max-height: 45rem;
    position: relative;
}
.table-responsive.m-table.table-scroll {
    margin-bottom: 7.5rem;    
}
.table-responsive.table-scroll.hide-scroll{
    overflow-x: hidden;
}
/* Cabecera sobre superficie hundida: pesa mucho menos que la barra negra
   y deja que los datos sean lo que resalta. */
.table-scroll thead tr:first-child th {
    color: var(--text-label);
    font-weight: 700;
    background: var(--bg-sunken);
    border-bottom: var(--border);
}
.table-scroll thead tr:first-child th:first-child{
    border-radius: .5rem 0 0 .5rem;
}
.table-scroll thead tr:first-child th:last-child{
    border-radius: 0 .5rem .5rem 0;
}
.table-scroll thead {
    background-color: var(--bg-elements);
    z-index: 1;
    position: sticky;
    top: -.1rem;
    font-weight: 700;
}
.table-scroll thead tr:nth-child(2){
    position: relative;
    top: -3px;
}
.table thead th{
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-label);
    padding: .9rem .55rem;
}
/* ------------------------------- ESTADO VACÍO ------------------------------ */
/* Un hueco en blanco parece un error de carga; un estado vacío parece producto. */
.empty-state{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-label);
}
.empty-state .empty-ico{
    display: grid;
    place-items: center;
    height: 3rem;
    width: 3rem;
    margin-bottom: .25rem;
    border-radius: 50%;
    background: var(--bg-sunken);
    border: var(--border);
    color: var(--text-label);
    font-size: 1.1rem;
}
.empty-state .empty-title{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .95rem;
    color: var(--text-color);
}
.empty-state .empty-text{
    font-size: .85rem;
    max-width: 26rem;
}
/* Dentro de una tabla: la celda hereda nowrap y altura fija, y el hover
   de fila marcaría el estado vacío como si fuera un dato. */
.table td:has(.empty-state){
    white-space: normal;
    height: auto;
}
.table tbody tr:has(.empty-state):hover{
    background: transparent;
}
.table tbody tr:has(.empty-state) td{
    border-top: none;
}

/* ------------------------------- DATO / MONTO ------------------------------ */
/* Jerarquía de cifra: el número manda, la etiqueta acompaña. */
.stat-label{
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-label);
    margin-bottom: .15rem;
}
.stat-value{
    display: block;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.table th, .table td{
    padding: .35rem .55rem;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text-color);
    border-bottom: none;
    height: 42px;
}
.table .text-normal th, .table .text-normal td{
    color: var(--text-normal);
}
.table td{
    font-size: .8rem;
}
.table.table-center td, .td-center{
    text-align: center;
}
.table tbody tr{
    /* background: var(--gr-elements); */
    font-size: 0.885rem;
    transition: background-color var(--t-fast) var(--ease);
}
.table tbody tr + tr td{
    border-top: var(--border);
}
.table tbody tr:hover{
    background: var(--primary-tint);
}
.table tr td .text-tr{
    /* white-space: nowrap; */
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: break-spaces;
    text-align: center;
}
/* ================================================================================================= //
// ---------------------------------------------- RANGE -------------------------------------------- //
// ================================================================================================= */
.range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 6px;
    background: #ccc;
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: var(--primary);
    border-radius: 50%;
    border: none;
    transition: 0.2s ease-in-out;
}
.range-input::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: var(--primary);
    border-radius: 50%;
    border: none;
    transition: 0.2s ease-in-out;
}
.range-input::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.1);
}
.range-input:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(0, 128, 255, 0.1);
}
.range-input:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.range-input:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(0, 72, 255, 0.2);
}
.sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 2rem;
}
.sliderticks span {
    display: flex;
    justify-content: center;
    width: 1px;
    height: 10px;
    background: #d3d3d3;
    line-height: 40px;
}
.range-slider {
    flex: 1;
}
/* ================================================================================================= //
// ------------------------------------------ STYLE HEADER ----------------------------------------- //
// ================================================================================================= */
.page-content.above-header{
    position: absolute;
    top: 150px;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.grid-item {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    min-width: 100%;
}
@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
    .page-content.above-header{
        top: 140px
    }
}
/* ================================================================================================= //
// -------------------------------------------- TABS ----------------------------------------------- //
// ================================================================================================= */

.tabs-content{
    padding: 1rem;
    border: var(--border);
    margin-bottom: 1rem;
    background: var(--bg-elements);
    border-radius: .875rem;
    box-shadow: var(--shadow-xs);
    margin: .75rem 0;
}
.tabs {
    display: inline-block; /* Para la disposición horizontal de las pestañas */
    border-bottom: var(--border);
}
.tab {
    font-family: var(--font-display);
    padding: .7rem 1rem;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent; /* Espacio para el indicador activo */
    transition: color var(--t) var(--ease), border-bottom-color var(--t) var(--ease);
    white-space: nowrap; /* Evita que el texto de la pestaña se rompa */
    font-size: .875rem;
    font-weight: 600;
    /* inactiva atenuada: el contraste marca cuál está seleccionada */
    color: var(--text-label);
    background-color: transparent;
    border-radius: 0;
}
.tab:hover{
    color: var(--text-color);
}
.tab.active {
    border-bottom: 2px solid var(--primary);
    color: var(--primary-dark);
    font-weight: 700;
}
.tab-content {
    display: none; /* Oculta el contenido por defecto */
    padding: 20px;
}
.tab-content.active {
  display: block; /* Muestra el contenido activo */
  animation: fade-in 0.5s ease-in-out; /* Animación de aparición */
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* Media query para responsive */
@media (max-width: 600px) {
    .tabs {
        flex-wrap: wrap; /* En pantallas pequeñas, envuelve las pestañas */
        text-align: center;
    }
}
/* ================================================================================================= //
// ------------------------------------------- Switch ---------------------------------------------- //
// ================================================================================================= */
.switch {
    position: relative;
    width: 3.25rem;
    height: 1.75rem;
    border-radius: 2rem;
    appearance: none;
    outline: none;
    /* el track se colorea al activarse, en lugar de tener siempre borde turquesa */
    transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
    cursor: pointer;
    background-color: var(--second-soft);
    border: 1px solid var(--border-color);
}
.switch:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.switch:disabled{
    cursor: not-allowed;
    box-shadow: var(--disabled);
    opacity: .6;
}

.switch::before {
    content: "";
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: .125rem;
    transition: left var(--t) var(--ease);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
}
.switch:checked::before {
    left: calc(100% - 1.475rem);
    background-color: var(--white);
}

/* ================================================================================================= //
// ---------------------------------------- Box Collapse ------------------------------------------- //
// ================================================================================================= */
.list-collapse{
    margin: .25rem .125rem;
    padding: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: .1rem solid #bcbebc;
    list-style: none;
}
.list-collapse .li-item:not(:last-child){
    border-bottom: 1px solid #fff;
    cursor: pointer;
}
.list-collapse .li-item > a{
    background-color: #e6e6e6;
    text-decoration: none;
    color: var(--second);
    padding: 1rem;
    display: block;
    position: relative;
}
.collapse .li-item a.active-collapse + .content-collapse {
    margin: 1rem 18px;
}
.collapse .li-item a::after {
    content: "\276F";
    color: var(--second);
    position: absolute;
    right: 2rem;
    font-size: .65rem;
    transition: transform .5s;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
}
.collapse .li-item a.active-collapse::after {
    transform: rotate(90deg) translateX(-50%);
}
.content-collapse {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: var(--background)
}

/* ================================================================================================= //
// -------------------------------------------- SCROLL --------------------------------------------- //
// ================================================================================================= */
::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    border: none;
    background-color: var(--second);
    border-radius: 30px;
    transition: background-color var(--t) var(--ease);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-dark);
}
*{
    scrollbar-width: thin;
    scrollbar-color: var(--second) transparent;
}
/* ================================================================================================= //
// --------------------------------------------- FONTS --------------------------------------------- //
// ================================================================================================= */
.font-1{
    font-size: 1.75rem;
}
.font-2{
    font-size: 1.65rem;
}
.font-3{
    font-size: 1.55rem;
}
.font-4{
    font-size: 1.45rem;
}
.font-5{
    font-size: 1.25rem;
}
.font-6{
    font-size: 1.105rem;
}
.font-7{
    font-size: 1rem;
}
.font-8{
    font-size: .925rem;
}
.font-9{
    font-size: .875rem;
}
.font-10{
    font-size: .85rem;
}
/* ================================================================================================= //
// ------------------------------------------ BACKGROUND ------------------------------------------- //
// ================================================================================================= */
.transparent{
    background: transparent;
}
.primary{
    background-color: var(--primary);
}
.second{
    background-color: var(--second);
}
.alternate{
    background-color: var(--alternate);
}
.info{
    background-color: var(--info);
}
.success{
    background-color: var(--success);
}
.warning{
    background-color: var(--warning);
}
.danger{
    background-color: var(--danger);
}
.dark{
    background-color: var(--dark);
}
.primary-soft{
    background-color: var(--primary-soft);
}
.second-soft{
    background-color: var(--second-soft);
}
.info-soft{
    background-color: var(--info-soft);
}
.success-soft{
    background-color: var(--success-soft);
}
.warning-soft{
    background-color: var(--warning-soft);
}
.danger-soft{
    background-color: var(--danger-soft);
}
.dark-soft{
    background-color: var(--dark-soft);
}
.white{
    background-color: var(--white);
}
.black{
    background-color: var(--black);
}
.bg-elements{
    background-color: var(--bg-elements);
}
/* ================================================================================================= //
// ------------------------------------------- GRADIENTS ------------------------------------------- //
// ================================================================================================= */
.gr-primary{
    background: linear-gradient(360deg, var(--primary) 0%, var(--primary-soft) 115%);
}
.gr-alternate{
    background: linear-gradient(360deg, var(--alternate) 0%, var(--alternate-soft) 115%);
}
.gr-second{
    background: linear-gradient(360deg, var(--second) 0%, var(--second-soft) 115%);
}
.gr-info{
    background: linear-gradient(to right, #92dee8, var(--info));
}
.gr-success{
    background: linear-gradient(to right, #8ae9a7, var(--success));
}
.gr-warning{
    background: linear-gradient(to right, #f1e194, var(--warning));
}
.gr-danger{
    background: linear-gradient(to right, #ffbf96, var(--danger));
}
.gr-dark{
    background: linear-gradient(5deg, var(--dark) 0%, var(--dark-soft) 145%);
}

/* ================================================================================================= //
// ---------------------------------------------- TEXT --------------------------------------------- //
// ================================================================================================= */
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-left{
    text-align: left;
}
.capitalize{
    text-transform: capitalize
}
.uppercase{
    text-transform: uppercase
}
.lowercase{
    text-transform: lowercase
}
.bold{
    font-weight: 600;
}
.lighter{
    font-weight: lighter;
}
/* ================================================================================================= //
// ------------------------------------------- TEXT COLOR ------------------------------------------ //
// ================================================================================================= */
.text-base{
    color: var(--primary);
}
.text-alternate{
    color: var(--alternate);
}
.text-primary{
    color: var(--primary);
}
.text-second{
    color: var(--second);
}
.text-info{
    color: var(--info);
}
.text-success{
    color: var(--success);
}
.text-warning{
    color: var(--warning);
}
.text-danger{
    color: var(--danger);
}
.text-white{
    color: var(--white);
}
.text-black{
    color: var(--black);
}
.text-color{
    color: var(--text-color);
}
.text-label{
    color: var(--text-label);
}
/* ================================================================================================= //
// ------------------------------------------- TEXT BORDER ----------------------------------------- //
// ================================================================================================= */
.border-base{
    border: 1px solid var(--primary);
}
.border-alternate{
    border: 1px solid var(--alternate);
}
.border-primary{
    border: 1px solid var(--primary);
}
.border-second{
    border: 1px solid var(--second);
}
.border-info{
    border: 1px solid var(--info);
}
.border-success{
    border: 1px solid var(--success);
}
.border-warning{
    border: 1px solid var(--warning);
}
.border-danger{
    border: 1px solid var(--danger);
}
.border-white{
    border: 1px solid var(--white);
}
.border-black{
    border: 1px solid var(--black);
}
.border-color{
    border: 1px solid var(--text-color);
}
.border-label{
    border: 1px solid var(--text-label);
}
/* ================================================================================================= //
// ------------------------------------------- MARGINS --------------------------------------------- //
// ================================================================================================= */
/*---- Margin all ----*/
.m-half{
    margin: var(--r);
}
.m-1 {
    margin: var(--r-1);
}

.m-2 {
    margin: var(--r-2);
}

.m-3 {
    margin: var(--r-3);
}

.m-4 {
    margin: var(--r-4);
}

.m-5 {
    margin: var(--r-5);
}

/*---- Margin left - right ----*/
.mlr-half{
    margin: 0 var(--r);
}
.mlr-1 {
    margin: 0 var(--r-1);
}

.mlr-2 {
    margin: 0 var(--r-2);
}

.mlr-3 {
    margin: 0 var(--r-3);
}

.mlr-4 {
    margin: 0 var(--r-4);
}

.mlr-5 {
    margin: 0 var(--r-5);
}

/*---- Margin top - bottom ----*/
.mtb-half{
    margin: var(--r) 0;
}
.mtb-1 {
    margin: var(--r-1) 0;
}

.mtb-2 {
    margin: var(--r-2) 0;
}

.mtb-3 {
    margin: var(--r-3) 0;
}

.mtb-4 {
    margin: var(--r-4) 0;
}

.mtb-5 {
    margin: var(--r-5) 0;
}

/*---- Margin bottom ----*/
.mb-half{
    margin-bottom: var(--r);
}
.mb-1 {
    margin-bottom: var(--r-1);
}

.mb-2 {
    margin-bottom: var(--r-2);
}

.mb-3 {
    margin-bottom: var(--r-3);
}

.mb-4 {
    margin-bottom: var(--r-4);
}

.mb-5 {
    margin-bottom: var(--r-5);
}

/*---- Margin top ----*/
.mt-half{
    margin-top: var(--r);
}
.mt-1 {
    margin-top: var(--r-1);
}

.mt-2 {
    margin-top: var(--r-2);
}

.mt-3 {
    margin-top: var(--r-3);
}

.mt-4 {
    margin-top: var(--r-4);
}

.mt-5 {
    margin-top: var(--r-5);
}

/*---- Margin left ----*/
.ml-half{
    margin-left: var(--r);
}
.ml-1 {
    margin-left: var(--r-1);
}

.ml-2 {
    margin-left: var(--r-2);
}

.ml-3 {
    margin-left: var(--r-3);
}

.ml-4 {
    margin-left: var(--r-4);
}

.ml-5 {
    margin-left: var(--r-5);
}

/*---- Margin right ----*/
.mr-half{
    margin-right: var(--r);
}
.mr-1 {
    margin-right: var(--r-1);
}

.mr-2 {
    margin-right: var(--r-2);
}

.mr-3 {
    margin-right: var(--r-3);
}

.mr-4 {
    margin-right: var(--r-4);
}

.mr-5 {
    margin-right: var(--r-5);
}
/* ================================================================================================= //
// -------------------------------------------- PADDINGS ------------------------------------------- //
// ================================================================================================= */
/*---- padding all ----*/
.p-half{
    padding: var(--r);
}
.p-1 {
    padding: var(--r-1);
}

.p-2 {
    padding: var(--r-2);
}

.p-3 {
    padding: var(--r-3);
}

.p-4 {
    padding: var(--r-4);
}

.p-5 {
    padding: var(--r-5);
}

/*---- padding top - bottom ----*/
.ptb-half{
    padding: var(--r) 0;
}
.ptb-1 {
    padding: var(--r-1) 0;
}

.ptb-2 {
    padding: var(--r-2) 0;
}

.ptb-3 {
    padding: var(--r-3) 0;
}

.ptb-4 {
    padding: var(--r-4) 0;
}

.ptb-5 {
    padding: var(--r-5) 0;
}
/*---- padding left - right ----*/
.plr-half{
    padding: 0 var(--r);
}
.plr-1 {
    padding: 0 var(--r-1);
}

.plr-2 {
    padding: 0 var(--r-2);
}

.plr-3 {
    padding: 0 var(--r-3);
}

.plr-4 {
    padding: 0 var(--r-4);
}

.plr-5 {
    padding: 0 var(--r-5);
}

/*---- padding bottom ----*/
.pb-1 {
    padding-bottom: var(--r-1);
}

.pb-2 {
    padding-bottom: var(--r-2);
}

.pb-3 {
    padding-bottom: var(--r-3);
}

.pb-4 {
    padding-bottom: var(--r-4);
}

.pb-5 {
    padding-bottom: var(--r-5);
}

/*---- Padding top ----*/
.pt-half{
    padding-top: var(--r);
}
.pt-1 {
    padding-top: var(--r-1);
}

.pt-2 {
    padding-top: var(--r-2);
}

.pt-3 {
    padding-top: var(--r-3);
}

.pt-4 {
    padding-top: var(--r-4);
}

.pt-5 {
    padding-top: var(--r-5);
}

/*---- Padding left ----*/
.pl-half{
    padding-left: var(--r);
}
.pl-1 {
    padding-left: var(--r-1);
}

.pl-2 {
    padding-left: var(--r-2);
}

.pl-3 {
    padding-left: var(--r-3);
}

.pl-4 {
    padding-left: var(--r-4);
}

.pl-5 {
    padding-left: var(--r-5);
}

/*---- Padding right ----*/
.pr-half{
    padding-right: var(--r);
}
.pr-1 {
    padding-right: var(--r-1);
}

.pr-2 {
    padding-right: var(--r-2);
}

.pr-3 {
    padding-right: var(--r-3);
}

.pr-4 {
    padding-right: var(--r-4);
}

.pr-5 {
    padding-right: var(--r-5);
}
/* ================================================================================================= //
// ---------------------------------------------- ROWS --------------------------------------------- //
// ================================================================================================= */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top:.5rem;
}
/* ================================================================================================= //
// -------------------------------------------- COLUMNS -------------------------------------------- //
// ================================================================================================= */
.col {
    flex: 1 0 0%;
}
/*********** COL EXTRA SMALL *********/
.col-xs-12 {
    width: 100%;
}
.col-xs-11 {
    width: 91.66666667%;
}
.col-xs-10 {
    width: 83.33333333%;
}
.col-xs-9 {
    width: 75%;
}
.col-xs-8 {
    width: 66.66666667%;
}
.col-xs-7 {
    width: 58.33333333%;
}
.col-xs-6 {
    width: 50%;
}
.col-xs-5 {
    width: 41.66666667%;
}
.col-xs-4 {
    width: 33.33333333%;
}
.col-xs-3 {
    width: 25%;
}
.col-xs-2 {
    width: 16.66666667%;
}
.col-xs-1 {
    width: 8.33333333%;
}
/*********** COL SMALL *********/
@media (min-width: 576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }

    .g-sm-0,
    .gx-sm-0 {
        --bs-gutter-x: 0;
    }

    .g-sm-0,
    .gy-sm-0 {
        --bs-gutter-y: 0;
    }

    .g-sm-1,
    .gx-sm-1 {
        --bs-gutter-x: 0.25rem;
    }

    .g-sm-1,
    .gy-sm-1 {
        --bs-gutter-y: 0.25rem;
    }

    .g-sm-2,
    .gx-sm-2 {
        --bs-gutter-x: 0.5rem;
    }

    .g-sm-2,
    .gy-sm-2 {
        --bs-gutter-y: 0.5rem;
    }

    .g-sm-3,
    .gx-sm-3 {
        --bs-gutter-x: 1rem;
    }

    .g-sm-3,
    .gy-sm-3 {
        --bs-gutter-y: 1rem;
    }

    .g-sm-4,
    .gx-sm-4 {
        --bs-gutter-x: 1.5rem;
    }

    .g-sm-4,
    .gy-sm-4 {
        --bs-gutter-y: 1.5rem;
    }

    .g-sm-5,
    .gx-sm-5 {
        --bs-gutter-x: 3rem;
    }

    .g-sm-5,
    .gy-sm-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL MEDIUM *********/
@media (min-width: 768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-md-0 {
        margin-left: 0;
    }
    .offset-md-1 {
        margin-left: 8.33333333%;
    }
    .offset-md-2 {
        margin-left: 16.66666667%;
    }
    .offset-md-3 {
        margin-left: 25%;
    }
    .offset-md-4 {
        margin-left: 33.33333333%;
    }
    .offset-md-5 {
        margin-left: 41.66666667%;
    }
    .offset-md-6 {
        margin-left: 50%;
    }
    .offset-md-7 {
        margin-left: 58.33333333%;
    }
    .offset-md-8 {
        margin-left: 66.66666667%;
    }
    .offset-md-9 {
        margin-left: 75%;
    }
    .offset-md-10 {
        margin-left: 83.33333333%;
    }
    .offset-md-11 {
        margin-left: 91.66666667%;
    }
    .g-md-0,
    .gx-md-0 {
        --bs-gutter-x: 0;
    }
    .g-md-0,
    .gy-md-0 {
        --bs-gutter-y: 0;
    }
    .g-md-1,
    .gx-md-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-md-1,
    .gy-md-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-md-2,
    .gx-md-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-md-2,
    .gy-md-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-md-3,
    .gx-md-3 {
        --bs-gutter-x: 1rem;
    }
    .g-md-3,
    .gy-md-3 {
        --bs-gutter-y: 1rem;
    }
    .g-md-4,
    .gx-md-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-md-4,
    .gy-md-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-md-5,
    .gx-md-5 {
        --bs-gutter-x: 3rem;
    }
    .g-md-5,
    .gy-md-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL LARGE *********/
@media (min-width: 992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-lg-0 {
        margin-left: 0;
    }
    .offset-lg-1 {
        margin-left: 8.33333333%;
    }
    .offset-lg-2 {
        margin-left: 16.66666667%;
    }
    .offset-lg-3 {
        margin-left: 25%;
    }
    .offset-lg-4 {
        margin-left: 33.33333333%;
    }
    .offset-lg-5 {
        margin-left: 41.66666667%;
    }
    .offset-lg-6 {
        margin-left: 50%;
    }
    .offset-lg-7 {
        margin-left: 58.33333333%;
    }
    .offset-lg-8 {
        margin-left: 66.66666667%;
    }
    .offset-lg-9 {
        margin-left: 75%;
    }
    .offset-lg-10 {
        margin-left: 83.33333333%;
    }
    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
    .g-lg-0,
    .gx-lg-0 {
        --bs-gutter-x: 0;
    }
    .g-lg-0,
    .gy-lg-0 {
        --bs-gutter-y: 0;
    }
    .g-lg-1,
    .gx-lg-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-lg-1,
    .gy-lg-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-lg-2,
    .gx-lg-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-lg-2,
    .gy-lg-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-lg-3,
    .gx-lg-3 {
        --bs-gutter-x: 1rem;
    }
    .g-lg-3,
    .gy-lg-3 {
        --bs-gutter-y: 1rem;
    }
    .g-lg-4,
    .gx-lg-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-lg-4,
    .gy-lg-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-lg-5,
    .gx-lg-5 {
        --bs-gutter-x: 3rem;
    }
    .g-lg-5,
    .gy-lg-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL EXTRA LARGE *********/
@media (min-width: 1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xl-0 {
        margin-left: 0;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xl-3 {
        margin-left: 25%;
    }
    .offset-xl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xl-6 {
        margin-left: 50%;
    }
    .offset-xl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xl-9 {
        margin-left: 75%;
    }
    .offset-xl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0;
    }
    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0;
    }
    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 3rem;
    }
}
/*********** COL DOBLE EXTRA LARGE *********/
@media (min-width: 1400px) {
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xxl-0 {
        margin-left: 0;
    }
    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xxl-3 {
        margin-left: 25%;
    }
    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xxl-6 {
        margin-left: 50%;
    }
    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xxl-9 {
        margin-left: 75%;
    }
    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }
    .g-xxl-0,
    .gx-xxl-0 {
        --bs-gutter-x: 0;
    }
    .g-xxl-0,
    .gy-xxl-0 {
        --bs-gutter-y: 0;
    }
    .g-xxl-1,
    .gx-xxl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xxl-1,
    .gy-xxl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xxl-2,
    .gx-xxl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xxl-2,
    .gy-xxl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xxl-3,
    .gx-xxl-3 {
        --bs-gutter-x: 1rem;
    }
    .g-xxl-3,
    .gy-xxl-3 {
        --bs-gutter-y: 1rem;
    }
    .g-xxl-4,
    .gx-xxl-4 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xxl-4,
    .gy-xxl-4 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xxl-5,
    .gx-xxl-5 {
        --bs-gutter-x: 3rem;
    }
    .g-xxl-5,
    .gy-xxl-5 {
        --bs-gutter-y: 3rem;
    }
}
.col-auto {
    flex: 0 0 auto;
    width: auto;
}
.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}
.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}
.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}
.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}
/* ================================================================================================= //
// ------------------------------------------ CONTAINER -------------------------------------------- //
// ================================================================================================= */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
@media (min-width: 576px) {
    .container-sm,
    .container {
        max-width: 670px;
    }
}
@media (min-width: 768px) {
    .container-md,
    .container-sm,
    .container {
        max-width: 850px;
    }
}
@media (min-width: 992px) {
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1440px;
    }
}
@media (min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1675px;
    }
}