@import url("./kutt-tokens.css");
@import url("./override-colors.css");
@import url("./components/kutt-componentes.css");
@import url("./components/inputs.css");
@import url("./components/menu-lateral.css");
@import url("./override-componentes.css");
@import url("./kutt-layout.css");

:root{
    --kutt-comp-cabecera-height : 47px;
    --kutt-comp-boton-color : var(--kutt-sys-color-neutral-foreground1);
    --kutt-comp-boton-background : var(--kutt-sys-color-neutral-background1);
    --kutt-comp-boton-border : var(--kutt-sys-color-neutral-stroke1);

    --kutt-comp-contenido-legacy-background : var(--kutt-sys-color-neutral-background1);
    --kutt-comp-contenido-legacy-color : var(--kutt-sys-color-neutral-foreground1);
    /*
    --kutt-comp-boton-color : var(--kutt-sys-color-neutral-background1);
    --kutt-comp-boton-background : var(--kutt-sys-color-brand-background);
    --kutt-comp-boton-border : var(--kutt-sys-color-neutral-stroke1);
    */
}
body {
    margin: 0px;
    padding: 0px;
    font-family: var(--kutt-sys-font-family);
    font-size: var(--kutt-sys-font-body1-size);
    background-color: var(--kutt-sys-body-background-color);
}

#app {
    display:flex;
    flex: 1 1;
    margin: 0px;
    padding: 0px;
    flex-direction: column;
    max-height: 100dvh;
    max-width: 100vw;
    overflow: hidden;
}
.kutt-fila{
    flex-direction: row;
    display: flex;
    flex: 1 1;
    width:100%;
}
.kutt-columna{
    flex-direction: column;
    display: flex;
    flex: 1 1;
}
.kutt-item-caja {
    height: 100%;
    flex-grow: 0;
    flex-shrink: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kutt-max-height-basic {
    max-height: calc(100dvh - var(--kutt-comp-cabecera-height));
}

.kutt-max-width-basic {
    max-width: calc(100dvw - 230px);
}
@media screen and (max-width: 1099px) {
    .kutt-max-width-basic {
        max-width: calc(100dvw - 140px);
    }
}
@media screen and (max-width: 599px) {
    .kutt-max-width-basic {
        max-width: calc(100dvw - 12px);
    }
}
.kutt-contenido {
    background-color: var(--kutt-sys-color-neutral-background2);
    flex : 1 1;
    box-shadow: 0 4px 8px #00000017, 0 0 6px #00000011;
    padding: 8px;
    max-height: calc(100dvh - var(--kutt-comp-cabecera-height));
    overflow-y: auto;
    border-radius: 4px;
}
.kutt-tarjeta {
    background-color: var(--kutt-sys-color-neutral-background1);
    box-shadow: 0 4px 6px #0000002f, 0 0 4px #00000025;
    border-radius: 4px;
    display: block;
    text-align: left;
}

.kutt-boton, .kutt-boton-circulo, .kutt-boton-brand, .kutt-boton-invisible {
    background-color: var(--kutt-comp-boton-background);
    color : var(--kutt-comp-boton-color);
    font-size: var(--kutt-sys-font-caption1strong-size);
    font-weight: var(--kutt-sys-font-caption1strong-weight);
    border: 1px solid var(--kutt-comp-boton-border);
    border-radius: 4px;
    height:fit-content;
    min-height: 36px;
    max-height: none;
    padding-left: 13px;
    padding-right : 13px;
    padding-top:7px;
    padding-bottom:7px;
    box-shadow: none;
}

.kutt-boton:disabled,.kutt-boton-circulo:disabled, .kutt-boton-brand:disabled, .kutt-boton-invisible:disabled {
    opacity:.6;
}
.kutt-boton:hover,.kutt-boton-circulo, .kutt-boton-brand:hover, .kutt-boton-invisible:hover {
    background-color: var(--kutt-comp-boton-background);
    color : var(--kutt-comp-boton-color);
    cursor: pointer;
    box-shadow: var(--kutt-sys-shadow4);
}
.kutt-boton-invisible:hover,.kutt-boton-invisible:active,.kutt-boton-invisible:focus  {
    background-color: transparent;
    color : var(--kutt-comp-boton-color);
    cursor: pointer;
    box-shadow: none;
}

.kutt-boton:disabled:hover,.kutt-boton-circulo:disabled:hover, .kutt-boton-brand:disabled:hover , .kutt-boton-invisible:disabled:hover  {
    cursor: not-allowed;
}
.kutt-boton-circulo {
    border-radius: 50%;
    aspect-ratio: 1/1;
    box-shadow: var(--kutt-sys-shadow2);
}
.kutt-boton-circulo svg {
    padding:0px;
}
.kutt-boton-brand {
    --kutt-comp-boton-color : var(--kutt-sys-color-neutral-background1);
    --kutt-comp-boton-background : var(--kutt-sys-color-brand-background);
    --kutt-comp-boton-border : var(--kutt-sys-color-brand-background);
}
.kutt-boton-brand {
    color: white; /* Color de texto por defecto */
}

.kutt-boton-brand:focus,
.kutt-boton-brand:focus-visible {
    color: black; /* Color de texto cuando está en focus */
    outline: none; /* Quitar el contorno si no lo querés */
    box-shadow: none;
}


/* Menu */
.kutt-menu {
    position: absolute;
    display: none;
    flex-direction: column;
    gap:0px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--kutt-sys-color-neutral-stroke1);
    width: max-content;
    box-shadow: var(--kutt-sys-shadow8);
    z-index: var(--kutt-sys-zindex-menu);
    word-wrap: unset;
    
    transition: left 0s;

}

.kutt-menu.abierto {
    display:flex;
}

.kutt-menu .kutt-boton {
    border:none;
    width:100%;
    border-radius: 0px;
    text-align: left;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
}

.kutt-borde-brand {
    border: 2px solid var(--kutt-sys-color-brand-background);
}

.mostrar-mobile {
    display: none;
}
.esconder-mobile {
    display: inherit;
}
@media screen and (max-width: 599px) {
    .mostrar-mobile {
        display: inherit;
    }
    .esconder-mobile {
        display: none;
    }
}

.flex-1-1 {
    flex: 1 1;
    width: 100%;
    display: flex;
    min-height: inherit;
    max-height: inherit;
}
.flex-0-0 {
    flex:0 0;
}
.flex-no-shrink{
    flex-grow: 1;
    flex-shrink: 0;
}
.contenido-derecha {
    justify-items: right;
    align-items: center;
    text-align: right;
    justify-content: end;
}
.contenido-centrado {
    justify-items: center;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.display-grid {
    display:grid;
}
.kutt-grid-editor-caracteristicas{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.kutt-grid-3{
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-item-full {
    grid-column: 1 / -1;
}
.display-flex{
    display: flex;
    flex-direction: inherit;
}
.flex-grow {
    flex-grow: 1;
}
.flex-row{
    flex-direction: row;
}
.flex-row-reverse{
    flex-direction: row-reverse;
}
.flex-column{
    flex-direction: column;
}
.flex-column-reverse{
    flex-direction: column-reverse;
}
.gap-1 {
    gap:1px;
}
.gap-2 {
    gap:2px;
}
.gap-3 {
    gap:3px;
}
.gap-4 {
    gap:4px;
}
.gap-5 {
    gap:5px;
}
.gap-6 {
    gap:6px;
}
.gap-7 {
    gap:7px;
}
.gap-8 {
    gap:8px;
}
.gap-9 {
    gap:9px;
}
.gap-10 {
    gap:10px
}


.kutt-caption2 {
    font-size: var(--kutt-sys-font-caption2-size);
    font-weight: var(--kutt-sys-font-caption2-weight);
}

.kutt-caption2strong {
    font-size: var(--kutt-sys-font-caption2strong-size);
    font-weight: var(--kutt-sys-font-caption2strong-weight);
}

.kutt-caption1 {
    font-size: var(--kutt-sys-font-caption1-size);
    font-weight: var(--kutt-sys-font-caption1-weight);
}

.kutt-caption1strong {
    font-size: var(--kutt-sys-font-caption1strong-size);
    font-weight: var(--kutt-sys-font-caption1strong-weight);
}

.kutt-caption1stronger {
    font-size: var(--kutt-sys-font-caption1stronger-size);
    font-weight: var(--kutt-sys-font-caption1stronger-weight);
}

.kutt-body1 {
    font-size: var(--kutt-sys-font-body1-size);
    font-weight: var(--kutt-sys-font-body1-weight);
}

.kutt-body1strong {
    font-size: var(--kutt-sys-font-body1strong-size);
    font-weight: var(--kutt-sys-font-body1strong-weight);
}

.kutt-body1stronger {
    font-size: var(--kutt-sys-font-body1stronger-size);
    font-weight: var(--kutt-sys-font-body1stronger-weight);
}

.kutt-subtitle2 {
    font-size: var(--kutt-sys-font-subtitle2-size);
    font-weight: var(--kutt-sys-font-subtitle2-weight);
}

.kutt-subtitle2stronger {
    font-size: var(--kutt-sys-font-subtitle2stronger-size);
    font-weight: var(--kutt-sys-font-subtitle2stronger-weight);
}

.kutt-subtitle1 {
    font-size: var(--kutt-sys-font-subtitle1-size);
    font-weight: var(--kutt-sys-font-subtitle1-weight);
}

.kutt-title3 {
    font-size: var(--kutt-sys-font-title3-size);
    font-weight: var(--kutt-sys-font-title3-weight);
}

.kutt-title2 {
    font-size: var(--kutt-sys-font-title2-size);
    font-weight: var(--kutt-sys-font-title2-weight);
}

.kutt-title1 {
    font-size: var(--kutt-sys-font-title1-size);
    font-weight: var(--kutt-sys-font-title1-weight);
}

.kutt-largetitle {
    font-size: var(--kutt-sys-font-largetitle-size);
    font-weight: var(--kutt-sys-font-largetitle-weight);
}

.kutt-display {
    font-size: var(--kutt-sys-font-display-size);
    font-weight: var(--kutt-sys-font-display-weight);
}

.kutt-color-texto-brand1 {
    color: var(--kutt-sys-color-brand-foreground1);
}

.kutt-color-texto-brand2 {
    color: var(--kutt-sys-color-brand-foreground2);
}

.kutt-color-texto-brand3 {
    color: var(--kutt-sys-color-brand-foreground3);
}
.kutt-color-texto-brand4 {
    color: var(--kutt-sys-color-brand-foreground4);
}


.line-left {
    border-left : 3px solid var(--kutt-sys-color-neutral-stroke1);
}
.line-left-semantic {
    border-left : 3px solid var(--kutt-sys-color-brand-stroke1);
}

.spacing-20 { padding: var(--size20, 2px); }
.spacing-40 { padding: var(--size40, 4px); }
.spacing-60 { padding: var(--size60, 6px); }
.spacing-80 { padding: var(--size80, 8px); }
.spacing-100 { padding: var(--size100, 10px); }
.spacing-120 { padding: var(--size120, 12px); }
.spacing-160 { padding: var(--size160, 16px); }
.spacing-200 { padding: var(--size200, 20px); }
.spacing-240 { padding: var(--size240, 24px); }
.spacing-280 { padding: var(--size280, 28px); }
.spacing-320 { padding: var(--size320, 32px); }
.spacing-360 { padding: var(--size360, 36px); }
.spacing-400 { padding: var(--size400, 40px); }
.spacing-480 { padding: var(--size480, 48px); }
.spacing-520 { padding: var(--size520, 52px); }
.spacing-560 { padding: var(--size560, 56px); }


.kutt-contenido-legacy {
    background-color: var(--kutt-comp-contenido-legacy-background);
    color : var(--kutt-comp-contenido-legacy-color);
    flex : 1 1;
    z-index: var(--kutt-sys-zindex-contenido);
    /*box-shadow: 0 4px 8px #00000017, 0 0 6px #00000011;*/
}
.container-legacy{
    max-width: 1244px;
    width:100%;
    overflow-y: auto;
    padding: 16px;
}

.kutt-menu-lateral-legacy button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0px;
    width: 100%;
    color: var(--kutt-comp-menu-lateral-legacy-color);
    padding-left: 12px;
    padding-right: 12px;
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item {
    width:100%;
    min-height: var(--kutt-comp-menu-lateral-item-height);
    max-height: var(--kutt-comp-menu-lateral-item-height);
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: none;
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item > span{
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    text-align: left;
    justify-content: left;
    width: 100%;
    height: 100%;
}




/* Pantalla tablet */
.kutt-menu-lateral-legacy.pantalla-tablet {
    --kutt-comp-menu-lateral-width : 128px;
    position: relative;
    display: flex;
    text-decoration: none;
    list-style: none;
    flex-direction: column;
    background: var(--kutt-comp-menu-lateral-legacy-background);
    overflow-y: auto;
    color: var(--kutt-comp-menu-lateral-color);

    flex : 1 1;
    flex-grow: 0;
    flex-shrink: 0;
    width : 100%;
    min-width : var(--kutt-comp-menu-lateral-width);
    max-width : var(--kutt-comp-menu-lateral-width);
}
.kutt-menu-lateral-legacy.pantalla-tablet .kutt-menu-lateral-item {
    --kutt-comp-menu-lateral-item-height : fit-content;
    width:100%;
    min-height: var(--kutt-comp-menu-lateral-item-height);
    max-height: var(--kutt-comp-menu-lateral-item-height);
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: none;
}
.kutt-menu-lateral-legacy.pantalla-tablet .kutt-menu-lateral-item > span{
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
    justify-content: left;
    width: 100%;
    height: 100%;
    gap:4px;
}
.kutt-menu-lateral-legacy.pantalla-tablet .kutt-menu-lateral-item > span .fa-xs{
    display: none;
}






/* Pantalla mobile */
.kutt-menu-lateral-legacy.pantalla-mobile {
    --kutt-comp-menu-lateral-width : 280px;
    position: absolute;
    display: flex;
    text-decoration: none;
    box-shadow: var(--kutt-sys-shadow28);
    list-style: none;
    flex-direction: column;
    background: var(--kutt-comp-menu-lateral-legacy-background);
    overflow-y: auto;
    color: var(--kutt-comp-menu-lateral-color);
    left:-100%;
    flex : 1 1;
    flex-grow: 0;
    flex-shrink: 0;
    width : 100%;
    min-width : var(--kutt-comp-menu-lateral-width);
    max-width : var(--kutt-comp-menu-lateral-width);
    min-height: calc(100dvh - var(--kutt-comp-cabecera-height));
    height: 100%;

    
    transition: left var(--kutt-sys-motion-duration-medium1), opacity var(--kutt-sys-motion-duration-medium1);
    transition-timing-function: var(--kutt-sys-motion-easing-emphasized);
}
.kutt-menu-lateral-legacy.pantalla-mobile.abierto {
    left:0;
    transition: left var(--kutt-sys-motion-duration-medium4);
    transition-timing-function: var(--kutt-sys-motion-easing-emphasized);
}
.kutt-menu-lateral-legacy.pantalla-mobile button{
    border-radius: 12px;
}
.kutt-menu-lateral-legacy.pantalla-mobile > .display-flex{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:4px;
}
.kutt-menu-lateral-legacy.pantalla-mobile .kutt-menu-lateral-item {
    --kutt-comp-menu-lateral-item-height : 70px;
    gap : 4px;
    width:100%;
    min-height: var(--kutt-comp-menu-lateral-item-height);
    max-height: var(--kutt-comp-menu-lateral-item-height);
    justify-items: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: none;
}
.kutt-menu-lateral-legacy.pantalla-mobile .kutt-menu-lateral-item > span{
    display: flex;
    flex-direction: column;
    gap : 4px;
    justify-items: center;
    align-items: center;
    text-align: left;
    justify-content: left;
    width: 100%;
    height: 100%;
}
.kutt-menu-lateral-legacy.pantalla-mobile .kutt-menu-lateral-item > span .fa-xs{
    display: none;
}






.kutt-menu-lateral-legacy .kutt-menu-lateral-titulo{
    color: var(--kutt-comp-menu-lateral-legacy-color);
    font-size: var(--kutt-comp-menu-lateral-titulo-size);
    text-overflow: ellipsis;
    font-weight: var(--kutt-comp-menu-lateral-titulo-weight);
}
.kutt-menu-lateral-legacy.pantalla-tablet .kutt-menu-lateral-titulo{
    --kutt-comp-menu-lateral-titulo-size : 12px;
    color: var(--kutt-comp-menu-lateral-legacy-color);
    font-size: var(--kutt-comp-menu-lateral-titulo-size);
    text-overflow: ellipsis;
    font-weight: var(--kutt-comp-menu-lateral-titulo-weight);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-icono{
    color: var(--kutt-comp-menu-lateral-semantic);
    font-size: var(--kutt-comp-menu-lateral-icon-size);
}

.kutt-menu-lateral-legacy .kutt-menu-lateral-item.activo {
    background-color: var(--kutt-sys-color-brand2-background2);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item.activo > span {
    border-left: 3px solid var(--kutt-comp-menu-lateral-semantic);
}
.kutt-menu-lateral-legacy.pantalla-mobile .kutt-menu-lateral-item.activo > span {
    border-left: 0px solid var(--kutt-comp-menu-lateral-semantic);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item.activo > span .kutt-menu-lateral-titulo{
    color: var(--kutt-comp-menu-lateral-semantic);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item.activo > span .kutt-menu-lateral-icono{
    color: var(--kutt-comp-menu-lateral-semantic);
}

.kutt-menu-lateral-legacy .kutt-menu-lateral-item:hover{
    background-color: var(--kutt-sys-color-brand2-background-hover);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item:hover > span .kutt-menu-lateral-titulo{
    color: var(--kutt-comp-menu-lateral-semantic);
}
.kutt-menu-lateral-legacy .kutt-menu-lateral-item:hover > span .kutt-menu-lateral-icono{
    color: var(--kutt-comp-menu-lateral-semantic);
}
.kutt-menu-lateral-title {
    display:none;
}
@media screen and (max-width: 599px) {
    .kutt-menu-lateral-title {
        display:flex;
    }
}
.kutt-menu-lateral-legacy  h1{
    font-size: 22px;
    font-weight: 300;
}

.kutt-menu-lateral-menu{
    position: fixed;
    display: none;
    top:0px;
    left:0px;
    box-shadow: var(--kutt-sys-shadow64);
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    background-color: var(--kutt-comp-menu-lateral-menu-background);
    color: var(--kutt-comp-menu-lateral-menu-color);
    transform: top, left linear 0s;
    transition: top, left linear 0s;
}

.kutt-menu-lateral-menu .kutt-grilla-app{
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* Tres columnas de igual ancho */
    gap: 8px; /* Espacio entre los elementos */
}
.kutt-menu-lateral-menu .kutt-grilla-app > div {
}
.kutt-menu-lateral-menu .kutt-grilla-app button{
    border-radius: 8px;
}
.kutt-menu-lateral-menu .kutt-grilla-app button:hover{
    border-radius: 8px;
    background-color: var(--kutt-sys-color-brand2-background2-hover);
}

.kutt-menu-lateral-menu .kutt-grilla-app img{
    border: 1px solid var(--kutt-sys-color-brand2-background3-hover);
    border-radius: 4px;
    padding:4px;
    width:64px;
}

.kutt-menu-lateral-menu .kutt-grilla-app .icon{
    border: 1px solid var(--kutt-sys-color-brand2-background3-hover);
    border-radius: 4px;
    padding:4px;
    width:64px;
    font-size:48px;
    color: var(--kutt-sys-color-brand-foreground1);
}

@media screen and (max-width: 599px) {
    
    .kutt-menu-lateral-menu .kutt-grilla-app{
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
    }
}

.kutt-menu-lateral-menu.mobile {
    width: calc(100vw - 128px);
    height: calc(100dvh - 128px);
}
/* ESTILOS EXCLUSIVOS PARA ÓRDENES (2 columnas) */
.ordenes-button-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 15px;
    margin: 10px 0;
}
@media screen and (max-width: 550px) {
    
    .ordenes-button-group{
        grid-template-columns: repeat(1, 1fr);
    }
    .standard-menu-container{
        grid-template-columns: repeat(2, 1fr);
    }
}
.ordenes-button-item {
    display: flex;
    min-width: 0;
}

.ordenes-btn {
    width: 100%;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: none;
    color: white;
    transition: all 0.2s ease;
}

/* ESTILOS PARA OTROS SUBMENÚS (horizontal) */
.standard-menu-container {
    display: grid;
    padding: 0 10px;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.standard-menu-item {
    flex: 1;
    min-width: calc(50% - 4px); /* 2 items por fila */
}

.standard-menu-item button {
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: white;
    text-align: left;
}

/* ESTILOS GENERALES (no se modifican) */
.submenu-titulo {
    width: 100%;
    color: #ffffff;
    padding: 0px 5px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-bottom: 1px solid #4a7c94;
    text-align: left;
}

.kutt-marketplace-contenedor-prop-recientes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding:2px;
}
@media screen and (max-width: 1360px) {
    
    .kutt-marketplace-contenedor-prop-recientes {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kutt-linea-inferior-brand {
    transition: border var(--kutt-sys-motion-duration-short4);
    transition-timing-function: var(--kutt-sys-motion-easing-emphasized);
    border-bottom: 3px solid var(--kutt-sys-color-brand-stroke1);
}



.kutt-item-lista {
    border-top: 1px solid var(--kutt-sys-color-neutral-stroke1);
}


/*Scrollbar*/
::-webkit-scrollbar {
    width: 8px !important;
}
::-webkit-scrollbar-track {
    margin-top: 5px !important; 
    margin-bottom: 5px !important;
    background: rgba(255,255,255 ,.25);
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.5);
    border-radius: 5px ;
}


.canje-container {
    gap: 4px;
}

.canje-card {
    z-index: 999;
    min-height: 198px;
    overflow: unset;
    width: 100%;
    margin: 0 auto;
    border-radius: 15px;
}

.canje-image-container {
    position: relative;
}

.canje-image {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 15px 15px 0 0;
    box-shadow: inset 0px -70px 58px -12px #051c2c;
}

.canje-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    border-radius: 0 0 15px 15px;
}

.canje-image-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.canje-location {
    font-size: 15px;
    text-align: left;
}

.canje-id {
    font-size: 12px;
    text-align: right;
}

.canje-reciente {
    position: absolute;
    top: 8px;
    left: 8px;
}

.canje-label-warning {
    background-color: #ffc107;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    color: #000;
}

.canje-config {
    position: absolute;
    top: 8px;
    right: 8px;
}

.canje-logo-corredora {
    position: absolute;
    top: 8px;
    right: 45px !important;
    width: 25px;
    aspect-ratio: 1/1;
    background: white;
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
}
.canje-compartir {
    position: absolute;
    top: 8px;
    right: 80px !important;
    width: 25px;
    aspect-ratio: 1/1;
    background: white;
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.canje-logo-corredora img {
    width: 15px;
    aspect-ratio: 1/1;
}
.canje-config-icon {
    line-height: 24px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

.canje-title {
    padding: 0 8px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}

.canje-title p {
    max-width: 45ch; /* Máximo 30 caracteres aproximadamente */
    white-space: nowrap; /* Mantiene el texto en una sola línea */
    overflow: hidden; /* Oculta lo que sobrepasa */
    text-overflow: ellipsis; /* Agrega "..." al final */
}

.canje-content {
    padding: 0 8px;
    margin-bottom: 8px;
}

.canje-price,
.canje-agent,
.canje-email {
    font-size: 13px;
    margin-bottom: 8px;
}

.canje-price a {
    text-decoration: none;
    color: inherit;
}

.canje-agent,
.canje-email {
    font-size: 14px;
}

.canje-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

.canje-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 500px;
    padding: 15px;
}


.kutt-boton-invisible {
    font-size: 12px;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
}
.kutt-boton-brand {
    font-size: 12px;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 480px) {
    .canje-contact {
        align-items: center;
    }
    .kutt-boton-brand {
        width: auto;
        text-align: center;
    }
    .kutt-boton-invisible {
        width: auto;
        text-align: center;
    }
}
.canje-contact-button {
    font-size: small;
    border-radius: 14px;
    margin-bottom: 15px;
    padding: 8px 16px;
    cursor: pointer;
}

.canje-tooltip {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    display: none;
}

.canje-config:hover .canje-tooltip,
.canje-agent:hover .canje-tooltip,
.canje-email:hover .canje-tooltip {
    display: block;
}

.repeat-marketplace {
    gap: 40px;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1280px) {
    .repeat-marketplace {
        grid-template-columns: repeat(2, 1fr); 
    }
    .canje-title p {
        max-width: 30ch;
    }
}

@media (max-width: 550px) {
    .repeat-marketplace {
        grid-template-columns: repeat(1, 1fr); 
    }
    .canje-title p {
        max-width: 45ch;
    }
}
/* Grid responsivo para filtros (no agranda inputs) */
.kutt-grid-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px 16px;
    align-items: end;
}
@media (max-width: 360px){
.kutt-grid-filtros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Fila de acciones compacta */
.acciones-filtros {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}

.slideshow {
	position: relative;
	width: 100%;
	&:after {
		content: '';
		display: block;
		padding-bottom: calc((100% / 6) * 4);
	}
	&:hover a {
		opacity: 1;
	}
	a {
		opacity: 0;
		position: relative;
		text-decoration: none;
		transition: opacity 0.5s;
		&:after {
			border-color: #FFF #FFF transparent transparent;
			border-style: solid;
			border-width: 2px;
			color: #FFF;
			display: block;
			height: 10px;
			position: absolute;
			top: calc(50% - 5px);
			width: 10px;
		}
		&:first-child:after {
			content: '';
			left: 10px;
			transform: rotate(-135deg);
		}
		&:nth-child(2):after {
			content: '';
			right: 10px;
			transform: rotate(45deg);
		}
	}
	.slide {
		background-color: #FFF;
		box-sizing: border-box;
		display: none;
		height: 100%;
		position: absolute;
		width: 100%;
		&:first-child,
		&:target {
			display: block;
		}
		a {
			display: block;
			height: 100%;
			position: absolute;
			width: 10%;
			&:nth-child(2) {
				left: 90%;
			}
		}
		img {
        border-radius: 5px;
			width: 100%;
		}
	}
}
.pagination {
    display: flex;
    bottom: 10px;
    justify-content: center;
    position: absolute;
    width: 100%;
    a {
        background: rgba(#FFF,0.75);
        border-radius: 50%;
        display: block;
        height: 10px;
        width: 10px;
        &:not(:last-child) {
        margin-right: 5px;
        }
        span {
        display: none;
        }
    }
}
/* Estilos para el formulario de filtro de compradores */
.form-filtros-compradores {
    border-radius: 16px;
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.form-filtros-compradores label {
    font-weight: 500;
    color: #222;
    margin-bottom: 0.5rem;
    display: block;
}
.form-filtros-compradores .kutt-item-caja,
.form-filtros-compradores input,
.form-filtros-compradores select {
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
    background: #fff;
}

.form-filtros-compradores .kutt-item-caja:focus,
.form-filtros-compradores input:focus,
.form-filtros-compradores select:focus {
    border-color: #65d4b0;
    outline: none;
}

.form-filtros-compradores .kutt-body1strong {
    font-size: 13px;
}

.form-filtros-compradores .kutt-caption2 {
    font-size: 15px;
    color: #555;
}

.form-filtros-compradores .kutt-caption2[style] {
    background: #fff3cd !important;
    color: rgb(70, 53, 2) !important;
    border-radius: 8px;
    padding: 8px;
}

.form-filtros-compradores .kutt-boton {
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    font-size: 13px;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
    min-width: 140px;
}

.form-filtros-compradores .kutt-boton-brand {
    background: #65d4b0;
    border: none;
    color: #fff;
}

.form-filtros-compradores .kutt-boton:disabled {
    background: #e0e0e0;
    color: #aaa;
}

/* Mejor responsividad para el formulario de filtros de compradores */
.form-filtros-compradores .kutt-columna {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 0;
}

.form-filtros-compradores .kutt-item-caja,
.form-filtros-compradores input,
.form-filtros-compradores select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

@media (max-width: 900px) {
    .form-filtros-compradores {
        padding: 1rem 0.5rem;
    }
    .form-filtros-compradores .kutt-columna {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .form-filtros-compradores .col-12,
    .form-filtros-compradores .col-md-3,
    .form-filtros-compradores .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .form-filtros-compradores .text-end {
        text-align: left !important;
    }
    .form-filtros-compradores .row.kutt-fila {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .form-filtros-compradores .kutt-columna {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin-bottom: 1rem;
    }
    .form-filtros-compradores .kutt-item-caja,
    .form-filtros-compradores input,
    .form-filtros-compradores select {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/*------------------------------------------------------------ */
/* Estilos exclusivos para el formulario de crear comprador */
.form-comprador {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    border-radius: 16px;
    background: #fff;
}

.form-comprador-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.form-comprador-col {
    flex: 1 1 220px;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.form-comprador label {
    font-weight: 500;
    color: #222;
    margin-bottom: 0.5rem;
}

.form-comprador input,
.form-comprador select,
.form-comprador textarea {
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    padding: 0.5rem 0.75rem;
    background: #fff;
    transition: border-color 0.2s;
    margin-bottom: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.form-comprador input:focus,
.form-comprador select:focus,
.form-comprador textarea:focus {
    border-color: #65d4b0;
    outline: none;
}

.form-comprador-actions {
    text-align: right;
    margin-top: 1.5rem;
}

.form-comprador-actions button {
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    font-size: 13px;
    margin-left: 0.5rem;
    background: #288d6b;
    border: none;
    color: #fff;
    cursor: pointer;
}

.form-comprador-actions button[type="button"] {
    background: #e0e0e0;
    color: #333;
}

.form-comprador-actions button:disabled {
    background: #e0e0e0;
    color: #aaa;
}

@media (max-width: 900px) {
    .form-comprador-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .form-comprador-col {
        max-width: 100%;
        flex: 1 1 100%;
        margin-bottom: 1rem;
    }
}
/*--------------------Carousel---------------------------------------- */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #fff;
    font-size: 0;
    outline: none;
}
.carousel-nav i {
    font-size: 28px;
    color: inherit;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
}
.carousel-nav--left { left: 16px; }
.carousel-nav--right { right: 16px; }

.carousel-thumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.carousel-thumb {
    width: 68px;
    height: 52px;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: none;
    outline: none;
}
.carousel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-thumb.is-active {
    border-color: var(--kutt-sys-color-primary, #65D4B0);
}
/*------------------------------------------------------------ */