@font-face {
    font-family: 'NeueMontreal';
    src: url('./assets/fonts/PPNeueMontreal-Regular.ttf') format('truetype');
    font-display: swap;

}

@font-face {
    font-family: 'SelfModern';
    src: url('./assets/fonts/self-modern_regular.ttf') format('truetype');
    font-display: swap;

}

body {
    color: white;
    text-align: center;
    font-family: 'NeueMontreal', Helvetica, Arial, sans-serif;
    margin: 0;
}

img {
    width: 100%;
    height: auto;
}



#iframe-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#iframe-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    height: 70%;
    max-height: 600px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

#iframe-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    z-index: 1001;
}

#contenedor_AR {
    display: none;
    height: 97vh;
    width: 100%;
    overflow: hidden;
}

#AR_mobile-container {
    background-color: rgb(255, 255, 255);
    width: 100%;
    max-width: 100%;
    height: 1500px;
    border-radius: 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 999;
}

.AR_icon {
    width: 60px;
    height: 60px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.AR_img_icon {
    width: 180px;
    height: 180px;
}



.AR_title {
    font-size: 3rem;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.5px;
}

.AR_description {
    font-size: 2rem;
    color: #666;
    line-height: 1.5;
    margin-top: -2px;
    margin-bottom: 40px;
    padding: 0 134px;
}

.AR_access-button {
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 53px;
    font-size: 3rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 121px;
    padding: 47px;
    position: absolute;
    top: 73%;
    left: 35%;
    width: 30%;
}



.AR_access-button:hover {
    background-color: #94c7db;
}

.AR_access-button:active {
    transform: translateY(1px);
}



.customAR-swal-shadow {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}















@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#container_banner_arriba {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
}

#banner_arriba {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 55%;
    align-items: center;
}


.image-section img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.text-section h4 {
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: end;
}

.text-section h1 {
    font-size: 2.5rem;
    color: #222;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: end;
}

.text-section p {
    font-size: 0.8rem;
    color: #222;
    text-align: end;
    margin-left: 18%;
    font-weight: 700;
}

#banner_abajo {
    width: 100%;
    transition: margin-top 0.5s ease;
}











#bloqueN1N2N3 {
    /*background: linear-gradient(to top, #a5a5a594, #ffffff); */
    /*   background: linear-gradient(to top, #ca9718ad, #ffffff);  */
    margin-top: 0%;
    display: flex;
}

#containerBloqueN {
    display: block;
    margin-left: 2%;
    margin-bottom: 2%;

}

#selecciona-serie {
    color: #333;
    text-align: left;
    margin: 2% 0% -1% 0%;
    font-weight: 500;
    font-family: 'SelfModern';
}

.dot {
    width: 22px;
    height: 22px;
    background: linear-gradient(to bottom, #a5a5a594, #ffffff);
    border-radius: 50%;
}


/* .paragrafN {
    margin-bottom: -1%;
    font-size: calc(1vw + 3rem);
    color: white;
    font-weight: 500;
    cursor: pointer;
    font-family: 'SelfModern';
}

.paragrafN.active {
    color: black;
}
 */



.series-options {
    display: flex;
    justify-content: left;
    gap: 1.5%;
    overflow-x: auto;
    /* 🔥 opcional si querés que se pueda scrollear en pantallas muy chicas */
}

.tarjeta-N {
    border: 1px solid #9d9696;
    width: clamp(100px, 10vw, 160px);
    padding: 10px;
    margin: 0;
    background-color: #e4dede94;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 1;
    box-sizing: border-box;
}

.tarjeta-N label {
    font-size: 1.6rem;
    font-family: 'SelfModern';
    margin: 0;
    color: #1a1a1a;
    text-align: center;
}

.tarjeta-N p {
    margin-top: 3px;
    margin-bottom: 2px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1a1a1a;
    text-align: center;
}

.tarjeta-N.activa {
    background-color: #8b8a5d;
    border: none;
}

.tarjeta-N.activa label,
.tarjeta-N.activa p {
    color: white;
}

































@keyframes moverFuera-Dentro-Izq {
    from {
        transform: translateX(-125%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes moverDentro-Fuera-Izq {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes ocultar-Izq {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes ocultar-Der-peque {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(600%);
    }
}

@keyframes mostrar-Der-peque {
    from {
        transform: translateX(600%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes ocultar-Izq-peque {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-600%);
    }
}

@keyframes mostrar-Izq-peque {
    from {
        transform: translateX(-600%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes moverFuera-Dentro-Der {
    from {
        transform: translateX(125%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes moverDentro-Fuera-Der {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(125%);
    }
}


#configurador {
    width: 98.9vw;
    align-items: center;
    justify-content: center;
}

.estilo-paragrafo1 {
    font-size: calc(1vw + 0.2rem);
    font-family: 'SelfModern';
    margin: 0%;
    color: #333;

}

.container-flex {
    display: flex;
    justify-content: space-evenly;
}

.pre-seleccion-contenido {
    display: flex;
    justify-content: center;
    gap: 11%;
}

.modulode4 {
    display: flex
}

.icon {
    width: 100%;
    cursor: pointer;
}

#canvas {
    display: none;
    width: 96%;
    margin: 0% 0% 0% 0%;
    /*     justify-content: center;  NOTA CRIS: DBERIA DE FUNCIONAR pero se descentra al reducir pantalla*/
}


#button-container {
    width: 100%;
    z-index: 99;
    display: flex;
    justify-content: end;
    flex-wrap: nowrap;
    pointer-events: none;
    gap: 2%;
    align-items: end;
    margin-right: 2%;
    margin-bottom: 2%;

}



#button-container button {
    padding: 10px 20px;
    border: 1px solid #333;
    background-color: transparent;
    color: #333;
    font-family: 'SelfModern', 'NeueMontreal', sans-serif;
    font-size: 0.7em;
    text-transform: uppercase;
    height: fit-content;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    pointer-events: auto;
}

#button-container button:hover {
    background-color: #f2f2f2;
}



/***-----------------SELECCIONADO------------------- */

#menu-seleccionado {
    display: none;
    z-index: 10;
    color: black;
    height: fit-content;
    width: 25%;
}

#seleccionado-Modo {
    background-color: white;
    display: none;
    width: 100%;
    padding-right: 2%;
    height: fit-content;
    box-shadow: 20px 6px 14px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 9;
}

#label-modo-seleccionado {
    margin-top: 0%;
    font-size: 2rem;
    color: #666666db;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'SelfModern';
}

#container-Modo {
    width: 100%;
    padding: 2%;

}

#img-modo-seleccionado {
    margin-top: 5%;
    width: 76%;
}

#seleccionado-Medida {
    background-color: white;
    display: none;
    width: 74%;
    margin-left: -4%;
    height: fit-content;
    box-shadow: 19px -10px 10px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 15% 22%;
    border-bottom-right-radius: 15% 22%;
    cursor: pointer;
    z-index: 8;
}

#medida-dimensiones-seleccionado {
    margin-top: -3%;
    font-size: calc(0.5vw + 0.4rem);
}

#label-medida-seleccionado {
    margin-top: 0%;
    font-size: 2rem;
    color: #666666db;
    font-weight: 700;
}

#img-medida-seleccionado {
    width: 66%;
}

#container-Medida {
    width: 100%;
    padding: 2%;
}




.bloque-modulos,
.bloque-modulos-frontal,
.bloque-modulos-lateral {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.bloque-modulos {
    margin: 1% 0% 0% 0%;
}

.etiqueta-vertical {
    writing-mode: vertical-rl;
    /* Texto en vertical */
    text-orientation: mixed;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}






#seleccionado-Encimera {
    background-color: white;
    display: none;
    width: 50%;
    margin-left: -1%;
    height: fit-content;
    box-shadow: 19px -10px 10px rgba(0, 0, 0, 0.1);
    border-top-right-radius: 15% 22%;
    border-bottom-right-radius: 15% 22%;
    cursor: pointer;
}

#container-Encimera {
    width: 100%;
    margin-left: 3%;
    padding: 5%;
}

#img-encimera-seleccionado {
    margin-top: -9%;
    width: 85%;
}

#color-encimera-icon {
    border-radius: 8px;
    width: 25%;
    margin-bottom: 6%;
}

/**--------------------------------- */


/*~~-----------------PRE-SELECCION------------------- */

#menu-pre-seleccion {
    width: 100%;
    display: flex;
    /*   background-color: rgba(204, 19, 204, 0.349); */
}



.modo-label {
    font-size: 2.2rem;
    font-weight: 700;
    color: #666666db;
    margin-top: 0%;
    text-transform: uppercase;
    font-family: 'SelfModern';
}

#label-modo-blue {
    font-size: 1.4rem;
    font-weight: 700;
    color: #666666db;
    margin-top: 0%;

}

#MODOS-pre-seleccion {
    width: 100%;
    display: none;
    color: black;
    padding: 2% 0% 2% 0%;
    animation: moverFuera-Dentro-Izq 1s ease forwards;
    z-index: 10;
}


.modo-card img {
    width: 60%;
    cursor: pointer;
}


#MEDIDAS-pre-seleccion {
    display: none;
    color: black;
    padding: 2%;
    animation: moverDentro-Fuera-Izq 1s ease forwards;
    z-index: 9;
    width: fit-content;
}

#titulo-medidas {
    text-align: start;
    margin-left: 2%;
}

#pre-seleccion-modulos {

    display: block;
}

.seleccionadaCard {
    border: 2px solid black;
    border-radius: 5px;
    /* Opcional: para bordes redondeados */
}

.medida-card {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 1.5% 2% 1.5% 2%;
    width: 20%;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.medida-card:hover {
    border: 1px grey solid;
    z-index: 999;
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
}

.medida-dimensiones {
    font-size: calc(0.3vw + 0.1rem);
    font-weight: 700;
    margin-top: 0%;
}

.medida-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: black;
    margin-top: 0%;
    white-space: nowrap;
}

/* Botón de continuar en gris */
.btn-gray {
    background-color: #b0b0b0;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.7em;
    cursor: pointer;
}

.btn-gray:hover {
    background-color: #909090;
}

/* Botón de cancelar en verde */
.btn-green {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 0.7em;
    cursor: pointer;
}

.btn-green:hover {
    background-color: #45a049;
}


#ENCIMERAS-pre-seleccion {
    display: none;
    color: black;
    padding: 3%;
    animation: moverDentro-Fuera-Izq 1s ease forwards;
    z-index: 8;
    width: 100%;
    max-height: 60%;
    flex-wrap: nowrap;
    flex-direction: column;
}

#titulo-encimeras {
    text-align: start;
    margin-left: 2%;

}

.encimera-card {
    text-align: center;
    padding: 0%;
    margin-top: 3%;
    max-width: 33%;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.encimera-label {
    margin-top: 0%;
    font-size: calc(0.6vw + 0.1rem);
    color: #666666db;
    font-weight: 700;
    margin-bottom: 0%;
    text-transform: capitalize;
}

#encimera2-card {
    margin-left: 42%;
}

#contenido-encimera {
    display: flex;
    max-height: 77%;
    margin: 7% 0% 0% 0%;

    flex-direction: column;
    flex-wrap: wrap;
}



/*~~---------------------------------- */



#canvas.Editor3D {
    display: flex;
    width: 98.9vw;
    margin-left: 0%;
    margin-right: 0%;
    height: 80vh;
    background-color: #E0E0E0;
    overflow: hidden;
    transform: translateY(-0vw);
}

#canvas-cocina {
    display: none;
    width: 100%;
    height: 80vh;
    background-color: #a9a9a900;
    position: fixed;
    z-index: -99;
    align-items: center;
    justify-content: center;
}

#cocina {
    width: 50%;
    height: 25%;
}







/*^-----------------STICKER-IZQ------------------- */
#menu-sticker-izquierda {
    display: none;
    width: 50%;
    height: fit-content;
    background-color: brown;
    padding-right: 20px;
    position: relative;
    position: relative;
    z-index: 8;
}

/*¡MODO*/
#stickerModo {
    display: grid;
    background-color: white;
    position: fixed;
    padding: 0% 0% 0% 0%;
    width: 17%;
    max-width: 30%;
    min-width: 17%;
    margin-left: -3%;
    justify-items: end;
    animation: moverFuera-Dentro-Izq 1s ease forwards;
    border-right: 1px solid #b4b4b4;
    color: black;

}

#container-Modo-sticker {
    width: 83%;
    margin: 5% 0% 0% 0%;
}

#checkbox-container {
    display: none;
    margin-top: 1%;
    margin-bottom: 5%;
    justify-content: space-evenly;
}

.checkbox-container-grid {
    display: grid;

}

#label-Modo-sticker {
    font-size: calc(0.6vw + 0.1rem);
    margin-top: 2%;
    text-transform: uppercase;
}

#img-Modo-sticker {
    width: 80%;
}

#input-pared-Modo,
#input-led-Modo,
#input-air-Modo,
#input-funda-Modo {
    transform: scale(1.5);
    margin: 5px;
    cursor: pointer;
    accent-color: #8b8a5d;

}

#label-pared-Modo,
#label-led-Modo,
#label-air-Modo,
#label-funda-Modo {
    font-size: calc(0.4vw + 0.1rem);
}


/* #input-air-Modo,
#label-air-Modo {
    display: none;
} */

/*!MEDIDA*/
#stickerMedida {
    display: grid;
    background-color: white;
    position: fixed;
    max-width: 21%;
    padding: 0% 1% 2% 1%;
    justify-items: end;
    animation: moverFuera-Dentro-Izq 1.2s ease forwards;
    border-right: 1px solid #b4b4b4;
    color: black;
    overflow: hidden;
}

#container-Medida-sticker {
    width: 35%;
    margin: 3% 0% 3% 0%;
}

#img-Medida-sticker {
    width: 80%;
}

#medida-dimensiones-red {
    margin-top: -2%;
}

#label-Medida-sticker {
    font-size: calc(0.6vw + 0.1rem);
    margin-top: 6%;
    text-transform: uppercase;
}






/*^ENCIMERA*/
#stickerEncimera {
    display: grid;
    background-color: white;
    position: fixed;
    width: 31%;
    padding: 0% 1% 1% 1%;
    justify-items: end;
    animation: moverFuera-Dentro-Izq 1.2s ease forwards;
    border-right: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow: hidden;
    margin-top: 0%;
}

#containerAbierto-stickerEncimera {
    display: none;
    width: fit-content;
    margin: 0% 0% 0% 40%;
    position: relative;
    justify-content: space-around;
}





#containerCerrado-stickerEncimera {
    width: 27%;
    margin: 2% 0% 0% 0%;
}

#labelCerrado-sticker-Encimera {
    text-overflow: ellipsis;
    font-size: calc(0.6vw + 0.1rem);
    margin: 6% -6% 15% 2%;
    text-transform: uppercase;

}

#imgCerrado-sticker-Encimera {
    width: 100%;
    margin-top: -9%;
}

#imgCerrado-stickerAcabado-Encimera {
    border: 1px solid lightgrey;
    width: 45%;
    margin-top: 0%;
}




#containerAbierto-seleccionadaEncimera {
    display: flex;
    margin: 0%;
    justify-content: start;
}

#subcontainerAbierto-seleccionadaEncimera {
    display: flex;
    align-items: center;
    margin-left: 9%;

}

#labelAbierto-stickerEncimera {
    font-size: calc(0.6vw + 0.1rem);
    margin: 12% 5% 0% 5%;
}

#imgIconoAbierto-stickerEncimera {
    width: 100px;
    margin-top: -2%;
}


#contenedorAbierto-colores-Encimera {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    overflow-x: scroll;
    width: 100%;
    height: 100%;
    scrollbar-width: none;
    direction: ltr;
}

#flechaScroll_coloresEncimera {
    width: 27%;
    margin-left: 16%;
    opacity: 35%;
}

#container-Img-flechaScroll-Encimera {
    transform: scaleX(-1);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 4%;
    align-items: flex-start;
    width: 17%;
    margin-left: -4%;
}

#contenedorAbierto-colores-Encimera::-webkit-scrollbar {
    display: none;
    /* Oculta el scrollbar en Chrome y otros navegadores Webkit */
}

#boton-cerrar-Encimera {
    width: 18px;
    height: 18px;
    margin-top: 0%;
}

.div-Encimera {
    /* Tamaño fijo para asegurar consistencia en el carrusel */
    min-width: 13%;
    max-width: 20%;
    margin-right: 5%;
    overflow: hidden;
    text-overflow: ellipsis;
}


.label-Encimera {
    font-size: calc(0.4vw + 0.1rem);
    text-align: center;
    margin-bottom: 2%;
    white-space: nowrap;
}

.color-Encimera {
    border: 1px solid lightgrey;
    width: 85%;
    border-radius: 13px;
}

/*^ENCIMERA ACABADOS*/
#containerAbierto-stickerAcabadoEncimera {
    display: none;
    position: fixed;
    width: 43%;
    min-height: fit-content;
    margin: 0% 0% 0% 33%;
    padding: 0.5% 0.5% 0.5% 0.5%;
    background-color: white;
    border-right: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow: hidden;
    animation: moverFuera-Dentro-Izq 1.5s ease forwards;
}

#containerCerrado-stickerAcabadoEncimera {
    display: block;
    margin: 0% 0% 0% 33%;
    background-color: white;
    position: fixed;
    width: 7%;
    max-height: 16%;
    padding: 0.5% 0.5% 1% 0.5%;
    animation: mostrar-Izq-peque 1.5s ease forwards;
    border-right: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow: hidden;
    margin-top: 0%;
}

#colores_Encimera_Barra {
    margin-right: 3%;
}

#labelCerrado-stickerAcabado-Encimera {
    font-size: calc(0.6vw + 0.1rem);
    margin: 5% 0% 7% 0%;
    text-transform: uppercase;
    white-space: wrap;
}

/*^-------------------FIN STICKER IZQ------------------ */


/*%-----------------STICKER-DERECHA------------------- */

#menu-sticker-derecha {
    display: none;
    width: 100%;
    height: fit-content;
    flex-direction: row-reverse;
    position: relative;
    z-index: 7;
}

/**OPCIONALES*/
#stickerOpcionales {
    display: grid;
    background-color: white;
    position: fixed;
    width: 17%;
    height: 13%;
    padding: 1.5% 4.5% 2% 2%;
    justify-items: start;
    animation: moverFuera-Dentro-Der 1.2s ease forwards;
    border-left: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow-y: hidden;
}

#stickerOpcionales:hover {
    height: auto;
    min-height: auto;

}

#stickerOpcionales::-webkit-scrollbar {
    height: fit-content;

}



#container-opcionales {
    margin-top: -3%;
}

#lista-opcionales {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#label-Opcionales {
    margin-left: 9%;

}

.label-opcionales {
    width: 100%;
    padding: 10% 4% 10% 4%;
    margin: 8% 0% 0% 2%;
    border: 1px solid #ccc;
    font-size: calc(0.6vw + 0.1rem);
    cursor: pointer;
    transition: background-color 0.3s;
}


.label-opcionales:hover {
    background-color: #e0e0e0;
}

.contlabel {
    margin: 0% 2% 0% 11%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*!ACCESORIOS*/
#stickerAccesorios {
    display: grid;
    background-color: white;
    position: fixed;
    max-width: 7%;
    height: 27%;
    padding: 1% 4% 1% 2%;
    animation: moverFuera-Dentro-Der 1s ease forwards;
    border-left: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    align-items: center;
    display: block;
    z-index: 40;
    overflow-y: hidden;
    scrollbar-width: none;
    /* Oculta el scrollbar en Firefox */
    -ms-overflow-style: none;
    /* Oculta el scrollbar en Internet Explorer */

}

#stickerAccesorios:hover {
    height: fit-content;

}

#stickerAccesorios::-webkit-scrollbar {
    display: none;
    /* Oculta el scrollbar en navegadores WebKit (Chrome, Safari, etc.) */
}

#stickerOpcionales:hover~#stickerAccesorios {
    height: fit-content;

}

#container-accesorios {
    margin-right: 7%;
    height: max-content;
    width: 100%;
}

#lista-accesorios {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#label-Accesorios {
    margin-left: 6%;

}

.label-accesorios {
    width: 100%;
    padding: 10% 4% 10% 4%;
    margin: 8% 0% 0% 2%;
    border: 1px solid #ccc;
    font-size: calc(0.6vw + 0.1rem);
    cursor: pointer;
    transition: background-color 0.3s;
}

.label-accesorios:hover {
    background-color: #e0e0e0;
}


/*%ACABADO*/


#containerCerrado-stickerAcabado {
    width: 19%;
    margin-top: 3.5%;
    justify-items: center;
    background-color: white;
    position: fixed;
    width: 9%;
    padding: 0.5% 0.5% 1.5% 0.5%;
    height: fit-content;
    justify-items: start;
    margin-top: 0%;
    margin-right: 22%;
    /*  animation: moverFuera-Dentro-Der 1.5s ease forwards; */
    border-left: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow: hidden;
}





#labelCerrado-stickerAcabado-Mueble {
    font-size: calc(0.6vw + 0.1rem);
    margin-bottom: 2%;
    margin-top: 2%;
    text-overflow: ellipsis;
}

#imgIconoCerrado-stickerAcabado {
    width: 130px;
    margin-top: -9%;
}

#imgCerrado-stickerAcabado-Mueble {
    border: 1px solid lightgrey;
    width: 37%;
    margin-top: 2%;
}



#containerAbierto-stickerAcabado {
    display: none;
    position: fixed;
    width: 35%;
    height: fit-content;
    margin: 0% 22% 0% 0%;
    padding: 0.5% 0.5% 1.5% 0.5%;
    background-color: white;
    border-left: 1px solid #b4b4b4;
    color: black;
    cursor: pointer;
    overflow: hidden;
    /*  animation: moverFuera-Dentro-Der 1.5s ease forwards; */
}



#containerAbierto-seleccionadoAcabado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 3%;
}


.container-Scroll {
    display: flex;
}

#container-Img-flechaScroll-Acabado {
    width: 4%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap
}

#container-Img-flechaScroll-SeleccionesIzq,
#container-Img-flechaScroll-SeleccionesDer {
    width: 4%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap
}





.img_flechaMore {
    opacity: 15%;
    width: 63%;
    height: 54%;
}


#contenedorAbierto-colores-Acabado {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-evenly;
    overflow-x: scroll;
    width: 84%;
    scrollbar-width: none;
    gap: 5%;
    margin-left: 3%;
    direction: ltr;

}


#flechaScroll_coloresAcabado {
    margin-top: 6%;
    width: 100%;
    height: 73%;
    opacity: 35%;
}



#contenedorAbierto-colores-Acabado::-webkit-scrollbar {
    display: none;
    /* Oculta el scrollbar en Chrome y otros navegadores Webkit */
}

#boton-cerrar-Acabado {
    width: 18px;
    height: 18px;
}


.div-Acabado {
    min-width: 15%;
    max-width: 15%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-Acabado {
    font-size: calc(0.4vw + 0.1rem);
    text-align: center;
    margin-bottom: 2%;
    white-space: nowrap;

}

.color-Acabado {
    border: 1px solid lightgrey;
    width: 85%;
    border-radius: 13%;
}


/*%ACABADO ACCESORIO*/


#imgCerrado-stickerAcabado-Accesorio {
    border: 1px solid #D3D3D3;
    width: 1.9vw;
    border-radius: 4px;
    margin: 0.5vh 0 0 0.3vw;
}

#containerAbierto-stickerAcabado-Accesorio {
    display: none;
    width: 58%;
    margin-top: 2%;
    /* Ajusta la altura mínima para evitar desplazamientos */
    min-height: 100px;
    position: relative;
}

#containerAbierto-seleccionadoAcabado-Accesorio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 3%;
}




#contenedorAbierto-colores-Acabado-Accesorio {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
    overflow-x: scroll;
    width: 100%;
    height: 100%;
    scrollbar-width: none;
    gap: 5%;
    margin-top: 3%;
    margin-left: 3%;
    direction: ltr;
}





#contenedorAbierto-colores-Acabado-Accesorio ::-webkit-scrollbar {
    display: none;
    /* Oculta el scrollbar en Chrome y otros navegadores Webkit */
}

#boton-cerrar-Acabado {
    width: 18px;
    height: 18px;
}





/*¡AJUSTES DE MODULO*/
#stickerAjustesdeModulo {
    background-color: white;
    position: fixed;
    width: 39%;
    padding: 1% 4% 1% 1%;
    height: fit-content;
    margin-top: 0%;
    animation: moverFuera-Dentro-Der 1.5s ease forwards;
    border-left: 1px solid #b4b4b4;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;
    justify-content: space-evenly;
}

#containerinputAncho-stickerAjustesdeModulo {
    display: flex;
    justify-content: space-between;
    margin-left: 9%;
}

#containercheckboxAncho-stickerAjustesdeModulo,
#containerApertura-stickerAjustesdeModulo {
    width: 23%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#containerApertura-stickerAjustesdeModulo {
    margin-top: 2%;
}

#container-Aperturas {
    display: flex;
    justify-content: space-evenly;
    margin-left: 3%;
}

.labels-stickerAjustesdeModulo {
    /* font-size: calc(0.2vw + 0.4rem);
    font-weight: 900;
    color: #666666db; */
    color: black;
    font-size: calc(0.6vw + 0.1rem);
}

#numberInput-stickerAjustesdeModulo {
    text-align: center;
    width: calc(2vw + 0.1rem);
    font-size: calc(0.6vw + 0.1rem);

}

.buttonsAncho-stickerAjustesdeModulo {
    background-color: #a5a5a53b;
    border: none;
    width: 100%;
    font-size: calc(1.2vw + 0.1rem);
    cursor: pointer;
}

.imgIconoApertura-stickerAjustesdeModulo {
    width: 28%;
    opacity: 20%;
    margin-left: 7%;
}

.imgIconoApertura-stickerAjustesdeModulo.active {
    opacity: 100%;
}



/*¨¨SELECCIONES*/

#stickerSelecciones {
    background-color: white;
    opacity: 0;
    left: 105%;
    position: fixed;
    width: 43%;
    padding: 0% 1.5% 0% 1.5%;
    height: fit-content;
    margin-top: 0%;
    animation: moverFuera-Dentro-Der 1.5s ease forwards;
    border-left: 1px solid #b4b4b4;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    flex-direction: column;
    z-index: -2;
}

@keyframes mover-IN-StickerSelecciones {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-105%);
    }
}

@keyframes mover-OUT-StickerSelecciones {
    from {
        transform: translateX(-105%);
    }

    to {
        transform: translateX(0%);
    }
}

#container-selecciones {
    display: flex;
    margin: 3% 0% -2% 0%;

}

#tipo-selecciones {
    color: black;
    width: fit-content;
}

#nombre-selecciones {
    background-color: #55555540;
    border-radius: 17px;
    padding: 0.5% 2% 0.5% 2%;
    width: fit-content;
    font-size: calc(0.5vw + 0.2rem);
    margin: 0% 2% 0% 2%;
}




.div-Seleccion {
    display: inline-flex;
    align-items: center;
    /* justify-items: center; */
    min-width: 27%;
    max-width: 30%;
    /* margin-right: 4%; */
    overflow: auto;
    padding-bottom: 2%;
    /* text-align: center; */
    /* text-overflow: ellipsis; */
    flex-direction: column;
}

.label-Seleccion {
    max-width: 100%;
    color: grey;
    font-size: calc(0.6vw + 0.1rem);
    text-align: center;
    margin-bottom: 2%;
    margin-left: 5%;
    margin-right: 5%;

    text-overflow: ellipsis;

}

.icono-Seleccion {
    max-width: 82%;
    margin-top: -1%;
    border-radius: 13%;
}


#lista-selecciones {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: scroll;
    width: 80%;
    height: 100%;
    scrollbar-width: none;
    margin-top: 3%;
}

#container-flechayrelleno-selecciones {
    display: flex;
}

#flechaScroll_selecciones {
    margin-left: -30%;
    width: 54%;
    height: 37%;
    opacity: 24%;
}

#container-Img-flechaScroll-selecciones {
    transform: scaleX(-1);
    width: 9%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap
}

/*^^--------------------------------- */


.icon-Extra {
    width: 10%;
    cursor: pointer;
}

#iconoPDF {
    display: none;
}


/* #iconos-Extra {
    gap: 20px;
    padding: 20px;
    display: none;
    margin-top: 79vh;
    margin-left: 1vh;
    width: fit-content;
} */

#iconos-Extra {
    display: none;
    position: fixed;
    bottom: 31px;
    left: 1%;
    z-index: 999;
    gap: 20px;
    padding: 3px;
    width: fit-content;
}

#flex_container-canvas {
    display: flex;
}



.boton-extra {
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid black;
    background: transparent;
    padding: 10px 15px;
    cursor: pointer;
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 600;
    font-size: 0.7em;
    transition: background 0.2s ease;
}

.boton-extra:hover {
    background: #f0f0f0;
}

.boton-extra img {
    width: 24px;
    height: 24px;
}


#cuinaN3 {
    width: 100%;
    height: 100vh;
    background-color: bisque;
}


.btn-crema {
    background-color: #f5e1c4 !important;
    /* Color crema */
    color: #5a4a42 !important;
    /* Texto oscuro para contraste */
    border-radius: 5px;
    padding: 8px 16px;
    font-weight: bold;
    border: none;
}

.btn-gris-claro {
    background-color: #d6d6d6 !important;
    /* Gris claro */
    color: #333 !important;
    /* Texto oscuro */
    border-radius: 5px;
    padding: 8px 16px;
    font-weight: bold;
    border: none;
}

.btn-crema:hover {
    background-color: #e6d3b3 !important;
}

.btn-gris-claro:hover {
    background-color: #c4c4c4 !important;
}



.swal_pdf {
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3)
}

.swal2-confirm {
    outline: none !important;

    box-shadow: #c4c4c4 !important;
}

.swal2-input {
    border: 1px solid #ccc !important;
}


.swal2-icon.swal2-question {
    color: #e6d3b3 !important;
    border-color: #c9ae80 !important;
}


/*!------------------MEDIAQUERYS-----------------*/

@media only screen and (max-width: 1000px) {
    #stickerAccesorios {
        height: fit-content;
    }

    #stickerOpcionales {
        height: fit-content;
    }
}