button:active {
	transform: scale(0.98);
}

#configee {
	position: absolute;
	bottom: 2rem;
	right: calc(max(30vw, 500px) + 4.5rem);
	font-size: 0.8rem;
	color: #BBB;
	z-index: 1000;
}

#usuario {
	position: absolute;
	top: 1.5rem;
	right: calc(max(30vw, 500px) + 4.5rem);
	font-size: 0.8rem;
	color: #333;
	z-index: 1000;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	background-color: transparent;
	border: 0px;
	cursor: pointer;
}

#usuario img {
	width: 16px;
}

body {
    min-width: 100vw;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    height: 100vh;
    max-height: 100vh;
    position: relative;
    background-color: #fafafa;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.pantalla {
    z-index: 10;
    display: none;
    background-color: #FFF;
    width: 100vw;
    height: 100vh;
    position: absolute;
}

#pantalla-configurador {
    z-index: 1;
    display: block
}

.etiqueta {
    position: absolute;
    width: auto;
    height: 30px;
    background-color: #FFF;
    color: #000;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 400;
    z-index: 3;
    padding: 0rem 2rem;
    border-radius: 20px;
    border: 1px solid #DDD;
    white-space: nowrap;
}

.etiqueta-derecha {
    top: 5px;
    left: 60px;
}

.etiqueta-arriba {
    bottom: 45px;
    /* width: 120px; */
    /* Central horizontalmente */
    left: calc(50% - 80px);
}


#logo img {
    width: 240px;
    position: fixed;
    top: 1rem;
    left: calc(1rem + 80px);
    z-index: 100;

}

#menu {
    width: 20vw;
    height: 100vh;
    border-right: 1px solid #CCC;
    background-color: #FFF;
    position: absolute;
    top: 0px;
    left: -20vw;
    z-index: 150;
    transition: left 0.5s; /* Animación */
}

    #menu-top {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-bottom: 1px solid #000;
        padding: 0rem 1rem;
        font-weight: 600;
    }

    #menu-top button {
        width: 30px;
        height: 30px;
        padding: 0px;
        border: 0px;
        background-color: transparent;
        cursor: pointer;
        margin-left: auto;
    }

    .menu-item {
        width: 100%;
        height: 50px;
        background-color: #FFF;
        border: 0px;
        border-bottom: 1px solid #AAA;
        padding: 0rem 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-weight: 500;
        font-size: 1rem;
        cursor: pointer;
    }

    .menu-item img {
        width: 13px;
        height: 13px;
        margin-right: 1rem;
    }


#btn-menu {
    width: 40px;
    height: 40px;
    padding: 0px;
    border: 0px solid #DDD;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    background-color: transparent;
    cursor: pointer;
    z-index: 100;
    border-radius: 50%;
}


#btn-nuevo {
    width: auto;
    height: 40px;
    padding: 0.5rem 1rem;
    border: 1px solid #DDD;
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    background-color: transparent;
    cursor: pointer;
    z-index: 100;
    border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.3rem;
}

#btn-centrar {
    width: auto;
    height: 40px;
    padding: 0.5rem 1rem;
    border: 1px solid #DDD;
    position: absolute;
    bottom: 1rem;
    left: 13rem;
    background-color: transparent;
    cursor: pointer;
    z-index: 100;
    border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.3rem;
}

#resumen {
    min-width: 340px;
    width: 13vw;
    max-width: 13vw;
    height: auto;
    min-height: 300px;
    border: 1px solid #17243D;
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    z-index: 3;
    padding: 1rem 1rem 4.4rem 1rem;
    background-color: #FFF;
    display: none;
}

#resumen-total {
    position: absolute;
    bottom: 2rem;
    right: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

#resumen-cerrar {
    position: absolute;
    bottom: 0.5rem;
    right: 0rem;
    text-align: center;
    width: 100%;
}

#resumen-cerrar button {
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    color: #888;
}

#resumen-cerrar button:hover {
    text-decoration: underline;
}

#precio {
    position: absolute;
    bottom: 0vh;
    left: 0rem;
    font-size: 2rem;
    font-weight: 600;
    width: 10vw;
    max-width: 10vw;
    text-align: center;
    padding-bottom: 1rem;
    z-index: 3;
}

#desglose {
    position: absolute;
    bottom: 3vh;
    left: 9vw;
    font-size: 0.9rem;
    font-weight: 400;
    width: 10vw;
    max-width: 10vw;
    text-align: center;
    z-index: 3;
    cursor: pointer;
}

#desglose:hover {
    text-decoration: underline;
}

#canvas {
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: calc(100vw - max(30vw, 500px) - 0.5rem);
    height: 100vh;
    background-color: #fafafa;
    opacity: 1;
    z-index: 1;
    /*transition: width 0.5s;  Animación */
}

#controles {
    position: absolute;
    bottom: 3vh;
    left: 30vw;
    min-width: 200px;
    width: 15vw;
    height: 5vh;
    display: flex;
    background-color: #EFEFEF;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    transition: width 0.5s; /* Animación */
    z-index: 2;
    border-radius: 25px;
}

    #controles > div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: 1rem;
        padding: 0rem 1rem;
    }

    #controles button {
        width: 130px;
        height: 30px;
        padding: 0px;
        border: 0px;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #controles > img {
        height: 5vh;
        margin-left: auto;
        margin-right: 2rem;
    }


#panel-derecha {
    width: 30vw;
    min-width: 500px;
    height: calc(100vh - 1rem);
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #fff;
    z-index: 2;
    overflow: hidden;
    transition: right 0.5s; /* Animación */
}

    #panel-derecha-toggle {
        width: 30px;
        height: 50px;
        background-color: #17243D;
        border: 1px solid #FFF;
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: max(30vw, 500px);
        top: 0px;
        z-index: 4;
        transition: right 0.3s; /* Animación */
        cursor: pointer;
    }

        #panel-derecha-toggle img {
            transition: transform 0.4s; /* Animación */
        }

#panel-derecha-secciones-cont {
    width: 100%;
    height: 90vh;
    max-height: 90vh;
}

#panel-derecha-abajo {
    width: 100%;
    height: 6vh;
    background-color: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
	#btn-desglose {
        width: 35%;
        height: 100%;
        background-color: #FFF;
        color: #666;
        border: 1px solid #DDD;
        font-size: 1rem;
        cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.3rem;
    }

    #btn-finalizar {
        width: 60%;
        height: 100%;
        background-color: var(--color-main);
        color: #FFF;
        border: 1px solid #FFF;
        font-size: 1rem;
        cursor: pointer;
    }

	#desglose-cont {
		width: 100%;
		height: 90vh;
		background-color: #FFF;
		position: absolute;
		bottom: 8vh;
		left: 0%;
		border: 1px solid #CCC;
		padding: 1rem;
		overflow-y: auto;
		z-index: 2000;
		display: none;
	}

	#lineas {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.desglose-linea {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 0;
		border: 1px solid #DDD;
		padding: 1rem;
		background-color: #FFF;
	}

	.desglose-linea-active {
		border: 2px solid var(--color-main);
	}

	.desglose-linea-nombre {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
		font-weight: 700;
		color: #111;
	}

	.desglose-linea-nombre span {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.desglose-linea-nombre-editar {
		width: 28px;
		height: 28px;
		border: 1px solid #DDD;
		background-color: #FFF;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	.desglose-linea-nombre-editar img {
		width: 14px;
		height: 14px;
		display: block;
	}

	.desglose-linea-nombre-editando {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		font-weight: 400;
	}

	.desglose-linea-nombre-editando input {
		min-width: 0;
		height: 36px;
		border: 1px solid #DDD;
		padding: 0 0.6rem;
		font: inherit;
	}

	.desglose-linea-nombre-guardar {
		height: 36px;
		border: 1px solid var(--color-main);
		background-color: var(--color-main);
		color: #FFF;
		padding: 0 0.8rem;
		cursor: pointer;
	}

	.desglose-linea-nombre-cancelar {
		height: 36px;
		border: 0;
		background-color: transparent;
		color: #333;
		padding: 0 0.4rem;
		cursor: pointer;
	}

	.desglose-linea-main {
		display: grid;
		grid-template-columns: 140px 1fr;
		gap: 1.2rem;
		align-items: start;
		margin-bottom: 1rem;
	}

	.desglose-linea-img,
	.desglose-linea-img-placeholder {
		width: 140px;
		height: 140px;
		border: 1px solid #EEE;
		background-color: #FAFAFA;
		padding: 0.5rem;
		object-fit: contain;
	}

	.desglose-linea-img-placeholder {
		padding: 0;
	}

	.desglose-linea-info {
		font-size: 0.95rem;
		line-height: 1.4;
		color: #111;
	}

	.desglose-linea-title {
		font-weight: 600;
		margin-bottom: 0.2rem;
	}

	.desglose-linea-accesorios {
		margin: 0.2rem 0 0 0;
		padding-left: 1rem;
		list-style: none;
	}

	.desglose-linea-accesorios li {
		font-size: 0.8rem;
	}

	.desglose-linea-accesorios li::before {
		content: "- ";
	}

	.desglose-linea-accesorios-empty {
		color: #666;
		margin-top: 0.2rem;
	}

	.desglose-linea-actions {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 1rem;
	}

	.desglose-linea-edit {
		border: 1px solid #DDD;
		background-color: #FFF;
		padding: 0.5rem 1rem;
		min-width: 220px;
		cursor: pointer;
		justify-self: center;
	}

	.desglose-linea-qty {
		display: grid;
		grid-template-columns: 36px 44px 36px;
		border: 1px solid #DDD;
		justify-self: end;
	}

	.desglose-linea-qty-btn {
		border: 0;
		background-color: #FFF;
		cursor: pointer;
		font-size: 1rem;
		height: 36px;
	}

	.desglose-linea-qty span {
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 1px solid #DDD;
		border-right: 1px solid #DDD;
		height: 36px;
	}

	.desglose-linea-delete {
		color: #B00000;
	}

	.desglose-linea-delete img {
		width: 16px;
		height: 16px;
		display: block;
		margin: 0 auto;
	}

	#desglose-add {
		width: 100%;
		height: 40px;
		color: var(--color-main);
		background-color: #FFF;
		border: 1px solid var(--color-main);
		margin-top: 1rem;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s;
	}

	#desglose-add:hover {
		background-color: var(--color-main);
		color: #FFF;
	}

	#desglose-descuento {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 1px solid #EEE;
	}

	#desglose-descuento label {
		font-weight: 600;
		color: #333;
	}

	#desglose-descuento input {
		width: 100px;
		height: 36px;
		border: 1px solid #CCC;
		padding: 0.45rem 0.6rem;
	}

	#lineas-total {
		display: inline-block;
		font-weight: 600;
		margin-left: 0.3rem;
		font-size: 0.7rem;
		color: #555;
		background-color: #DDD;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		text-align: center;
		line-height: 18px;
	}

.cont-filtros button {
	background-color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid #BFBFBF;
	border-radius: 5px;
	width: 23%;
	aspect-ratio: 1/1;
	cursor: pointer;
}

.cont-filtros button img {
	width: 70%;
}

.cont-filtros button.active {
	border: 3px solid var(--color-main);
}

/* Cada apartado del panel derecha */
.panel-seccion {
    width: 100%;
	margin-top: 0.5rem;
}
    /* Titulo de cada apartado, al hacer clic despliega/oculta */
    .panel-seccion-titulo {
        width: 100%;
        height: 50px;
        background-color: #fff;
        color: #666;
        font-size: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        border: 1px solid #aaa;
        padding: 0rem 1rem;
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
		font-weight: 500;
    }

        .panel-seccion-titulo span {
            font-size: 1rem;
            font-weight: 500;
            pointer-events: none;
        }

        .panel-seccion-titulo img {
            width: 20px;
            height: 20px;
            margin-left: auto;
            transition: transform 0.4s; /* Animación */
            pointer-events: none;
        }

		.panel-seccion-titulo-activa {
			border: 1px solid var(--color-sec);
			border-bottom: 0px;
			color: #10648a
		}

    /* Contenido de cada apartado cuando se ha desplegado */
    .panel-seccion-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        height: 0px;
        transition: height 0.4s;
        overflow-y: hidden;
        /* scrollbar-width: none; */
        padding: 0rem;
    }

    .panel-seccion-content-interior {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        height: auto;
        padding: 1rem;
    }

	#series-cont {
		width: 100%;
        display: grid;
		grid-template-columns: repeat(3, minmax(120px, 1fr));
		gap: 0.5rem;
	}

	#carros-basicos-cont {
		width: 100%;
        display: grid;
		grid-template-columns: repeat(3, minmax(120px, 1fr));
		gap: 0.5rem;
	}

	.accesorios-tipo-cont {
        width: 100%;
        display: grid;
		grid-template-columns: repeat(3, minmax(120px, 1fr));
		grid-auto-rows: max-content;
		align-content: start;
		gap: 0.5rem;
		box-sizing: border-box;
        height: auto;
        padding: 1rem;
		padding-bottom: 8rem;
    }

	.grid-span-all {
		grid-column: 1 / -1;
		height: auto;
		align-self: start;
		justify-self: stretch;
	}

	.especialidades-container {
		overflow: hidden;
		transition: height 0.4s;
		height: 0px;
		display: none;
	}

    /* .panel-seccion-content::-webkit-scrollbar {
        display: none;
    } */

    .panel-seccion-content-activa {
        /* display: flex !important; */
        padding: 0rem;
        height: calc(90vh - 200px - 2.5rem) !important;
        overflow-y: auto;
		border: 1px solid var(--color-sec);
    }

        /* Cada item dentro del apartado */
        .panel-item {
            width: auto;
            min-height: 150px;
            height: auto;
            background-color: transparent;
            color: #111;
            border: 1px solid #BFBFBF;
            border-radius: 5px;
            font-size: 0.9rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            margin-bottom: 0.7rem;
        }

        .item-carro {
            position: relative;
            padding-top: 32px;
        }

        .item-carro-lateral,
        .item-carro-lateral-excel {
            position: absolute;
            top: 6px;
            right: 6px;
            color: #555;
            font-size: 11px;
            font-weight: 400;
            line-height: 1.2;
            white-space: nowrap;
            pointer-events: none;
        }

        .item-carro-lateral-excel {
            top: 21px;
        }

        .item-carro[data-lateral-comparacion="coincide"] .item-carro-lateral,
        .item-carro[data-lateral-comparacion="coincide"] .item-carro-lateral-excel {
            color: #237a38;
        }

        .item-carro[data-lateral-comparacion="diferente"] .item-carro-lateral,
        .item-carro[data-lateral-comparacion="diferente"] .item-carro-lateral-excel {
            color: #b42318;
        }

        .panel-item-xl {
            padding: 1rem 0rem;
        }

        .panel-item:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

		.item-especialidad.panel-item-active {
            /* background-color: #bae793 !important; */
			border: 5px solid var(--color-main);
        }

		.item-carro.panel-item-active {
			border: 5px solid var(--color-main);
			/* background-color: #bae793 !important; */
		}

		.item-color.panel-item-active {
			border: 5px solid var(--color-main);
			/* background-color: #bae793 !important; */
		}

        .item-carro.panel-item-active span {
            font-weight: 600;
        }

		.item-serie.panel-item-active {
			border: 5px solid var(--color-main);
			/* background-color: #bae793 !important; */
		}

        .item-serie.panel-item-active span {
            font-weight: 600;
        }

        /* Retoque de bordes */

        

            .panel-item img {
                height: 70px;
				width: 80px;
                pointer-events: none;
                object-fit: contain;
				/* background-color: #FFF;
				border: 1px solid #EEE; */
            }

            .panel-item span {
                width: 100%;
                height: auto;
                display: block;
                margin-top: 0.4rem;
				font-size: 0.9rem;
                pointer-events: none;
            }

        .item-accesorio-active.item-accesorio-multipos {
            width: 100% !important;
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            flex-direction: row !important;
			grid-column: span 3;
        }

		.item-accesorioelevado-active {
			border: 5px solid var(--color-main) !important;
    		font-weight: 700 !important;
        }

		.item-accesoriobloqueo-active, .item-accesorioprecintos-active {
			border: 5px solid var(--color-main) !important;
    		font-weight: 700 !important;
        }

        .panel-item-xl:has(.posicion-active) {
            height: 300px !important;
        }

		.item-especialidad {
			background-color: #fdfdfd;
		}

		.area-item {
           	height: 50px;
			min-height: 50px;
			width: 100%;
			background-color: #f5f5f5;
            color: #111;
            border: 0px solid #BFBFBF;
            border-radius: 3px;
            font-size: 0.9rem;
			font-weight: 500;
            display: flex;
            justify-content: flex-start;
            align-items: center;
			gap: 0.5rem;
            cursor: pointer;
            margin-bottom: 0rem;
			padding: 0 1rem;
			text-align: left;
        }



		.item-serie {
			width: auto;
			height: 120px;
			padding: 0.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: transparent;
            color: #111;
            border: 1px solid #BFBFBF;
            border-radius: 5px;
			cursor: pointer;
			gap: 0.8rem;
			margin-bottom: 0.8rem;
		}
			.item-serie img {
				width: 80px;
				height: 60px;
				object-fit: cover;
				border: 1px solid #EEE;
			}

			.item-serie-active {
				/* background-color: #bae793; */
				border: 5px solid var(--color-main);
				font-weight: 700;
			}

        .item-accesorio-izquierda {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: transparent;
            border: 0px;
            cursor: pointer;
            border-radius: 5px;
        }

		.item-accesorioelevado-izquierda {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: transparent;
            border: 0px;
            cursor: pointer;
            border-radius: 5px;
        }

		.item-accesoriobloqueo-izquierda, .item-accesorioprecintos-izquierda {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: transparent;
            border: 0px;
            cursor: pointer;
            border-radius: 5px;
        }

        .item-accesorio-derecha {
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .item-accesorio-active.item-accesorio-multipos .item-accesorio-izquierda {
            width: 48% !important;
            font-weight: 600;
            /* text-decoration: underline; */
        }

        .item-accesorio-active.item-accesorio-multipos .item-accesorio-derecha {
            display: flex !important;
            width: 48% !important;
            height: 100% !important;
        }

        /* Las clases .item-accesorio-izquierda-active y .item-accesorio-derecha-active cambian si el padre el .panel-item-xl */
        .panel-item-xl .item-accesorio-izquierda-active {
            width: 40% !important;
        }
        
        .panel-item-xl .item-accesorio-derecha-active {
            width: 58% !important;
        }

		/* CAJONES */
		.item-cajon-active {
            border: 5px solid var(--color-main) !important;
        }

        
        


        .panel-item:has(.posicion-active) {
            /* background-color: #bae793 !important; */
			border: 5px solid var(--color-main) !important;
			font-weight: 700 !important;
        }

        .posicion {
            background-color: transparent;
            width: auto;
            max-width: 100%;
            border: 0px;
            cursor: pointer;
            color: #555;
        }

		.posicion:disabled {
			opacity: 0.5;
			cursor: not-allowed;
			text-decoration: line-through;
		}

		/* Aplica el estilo si no hay ninguna .posicion visible (display:flex) habilitada */
		.item-accesorio:not(:has(.posicion[style*="display: flex"]:not(:disabled))) {
			opacity: 0.4;
		}


        .posicion:hover {
            text-decoration: underline;
            color: #000;
        }

		.posicion:disabled:hover {
			text-decoration: line-through;
			color: #555;
		}

        .posicion-active {
            /* text-decoration: underline; */
            font-weight: 600;
            color: #000;
			background-color: #b2d9ec;
        }

		.accesorios-tipo-btn {
			width: auto;
			height: 35px;
			color: #666;
			background-color: #FFF;
			border-right: 1px solid var(--color-sec);
			border-bottom: 1px solid var(--color-sec);
			border-top: 0px;
			border-left: 0px;
			flex: auto;
			text-transform: uppercase;
			font-family: 'Roboto', sans-serif;
			cursor: pointer;
		}

		.accesorios-tipo-btn-active {
			background-color: var(--color-main);
			color: #FFF;
		}

		.accesorios-columna-selector {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 8px 12px;
			border-bottom: 1px solid #e0e0e0;
			background-color: #f7f7f7;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
		}

		.accesorios-columna-label {
			font-weight: 600;
			color: #333;
		}

		.accesorios-columna-btns {
			display: flex;
			gap: 6px;
		}

		.accesorios-columna-btn {
			min-width: 36px;
			height: 30px;
			border: 1px solid #cfcfcf;
			background-color: #fff;
			color: #444;
			border-radius: 6px;
			font-weight: 600;
			cursor: pointer;
		}

		.accesorios-columna-btn-active {
			background-color: var(--color-sec);
			border-color: var(--color-sec);
			color: #fff;
		}

		.cajones-btn {
			width: auto;
			height: 35px;
			color: #666;
			background-color: #FFF;
			border-right: 1px solid var(--color-sec);
			border-bottom: 1px solid var(--color-sec);
			border-top: 0px;
			border-left: 0px;
			flex: auto;
			text-transform: uppercase;
			font-family: 'Roboto', sans-serif;
			cursor: pointer;
		}

		.cajones-btn-active {
			background-color: var(--color-sec);
			color: #FFF;
		}

		.item-cajon {
			width: 100%;
			background-color: transparent;
            color: #111;
            border: 1px solid #BFBFBF;
            border-radius: 5px;
			padding: 1rem;
			margin-bottom: 0.5rem;
			flex-wrap: wrap;
		}

		.cajon-nombre {
			width: 100%;
			height: auto;
			display: block;
			font-size: 0.9rem;
			font-weight: 600;
		}

		.cajon-ref {
			width: 100%;
			height: auto;
			display: block;
			font-size: 0.8rem;
			color: #666;
		}

		.cajon-separador-activo {
			border: 1px solid #ccc;
			border-radius: 5px;
			padding: 0.6rem 0.3rem;
			background-color: #FFF;
			color: var(--color-main);
			cursor: pointer;
		}

		.cajon-separador-activo:hover {
			background-color: #f0faff;
		}

		.separadores-cont {
			width: 100%;
			display: none;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 2%;
			margin-top: 1rem;
		}

		.separador {
			width: 32%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			gap: 0.5rem;
			background-color: transparent;
            color: #111;
            border: 1px solid #BFBFBF;
            border-radius: 5px;
			padding: 0.5rem;
			margin-bottom: 0.5rem;
			cursor: pointer;
		}

		.separador-active {
			border: 3px solid var(--color-main);
			font-weight: 600;
		}

		.separador img {
			width: 60px;
			height: auto;
			object-fit: contain;
			border: 1px solid #EEE;
		}

		.separador span {
			font-size: 0.8rem;
			width: 100%;
			display: block;
		}
        /* ACABADOS */

        .item-acabado {
            width: 20%;
            height: 100px;
            background-color: transparent;
            border: 0px solid #BFBFBF;
            border-radius: 0px;
            color: #17243D;
            font-size: 0.9rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
            margin-bottom: 0.8rem;
            padding: 0rem;
        }

        .item-acabado .acabado-color {
            border: 1px solid #BFBFBF;
            border-radius: 5px;
            width: 100%;
            aspect-ratio: 1/1;
        }

        .item-acabado .acabado-nombre {
            color: #17243D;
            margin-top: 5px;
            font-size: 0.8rem;
        }

        .acabado-active .acabado-color {
            border: 1px solid #17243D;
        }

        .acabado-active .acabado-nombre {
            font-weight: 600;
            text-decoration: underline;
        }


        
.modal-back-promo {
    background-color: #00000097;
    color: #FFF;
    padding: 1rem;
    border-radius: 0px;
    text-align: center;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5000;
}

.modal-front-promo {
    background-color: #FFF;
    padding: 0.3rem;
    border-radius: 5px;
    text-align: center;
    width: 90vw;
    max-width: 900px;
}

.modal-front-promo img {
    max-width: 100%;
    max-height: auto;
    border: 1px solid #EEE;
}

.modal-front-promo-close {
    width: 100%;
    height: 50px;
    background-color: #000;
    color: #FFF;
    border: 1px solid #FFF;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 0.3rem;
}


/* MIS DISEÑOS */

#pantalla-disenos-cont {
    width: 90vw;
    position: absolute;
    top: 0px;
    right: 0px;
    padding-top: 12vh;
    padding-right: 2rem;
}

#proyectos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: auto;
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    width: 100%;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;   
    padding-bottom: 8rem;
}

.proyecto {
    display: block;
    background-color: #FFF;
    border: 1px solid #EEE;
    border-radius: 5px;
}

.proyecto > button {
    border: 0px;
    background-color: transparent;
    padding: 0px;
    cursor: pointer;
}

.proyecto-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 5px 5px 0px 0px;
    aspect-ratio: 16/9;
    background-color: #e1e4e6;
}

/* @media screen and (max-width: 767px) {
    #pantalla-disenos-cont {
        width: 100vw;
        position: absolute;
        top: 0px;
        right: 0px;
        padding-top: 0vh;
        height: 95vh;
        max-height: 95vh;
        padding: 1rem;
        overflow-y: hidden;
    }

    #proyectos {
        padding-bottom: 5vh;
    }

    #btn-menu {
        width: 100vw;
        position: absolute;
        bottom: 0px;
        right: 0px;
        height: 5vh;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem 1rem;
        border-top: 1px solid #BBB;
    }
} */


/* FINALIZAR */
#finalizar-izquierda {
    width: 40vw;
    position: absolute;
    left: 10vw;
    top: 15vh;
    height: 80vh;
    border-right: 2px solid #bcbec0;
    padding: 0rem 5rem 1rem 1rem;
}

#finalizar-derecha {
    width: 50vw;
    position: absolute;
    right: 0vw;
    top: 15vh;
    height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
    padding: 0rem 3rem 1rem 5rem;
}

#imagen-main {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border: 1px solid #DDD;
}

#imagen-galeria {
    width: 100%;
    height: 20vh;
    margin-top: 1rem;
}

#imagen-galeria button {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    outline: 1px solid #DDD;
    padding: 0rem;
    background-color: #e1e4e6;
    border: 0px;
}

#imagen-galeria button img {
    width: 100%;
}

#imagen-galeria button:hover {
    outline: 1px solid #bcbec0;
}

#precio-finalizar {
    top: auto;
    left: auto;
    height: auto;
    position: relative;
    bottom: auto;
    text-align: right;
    width: 100%;
    max-width: 100%;
    font-size: 2rem;
    font-weight: 600;
}

#seccion-guardar {
    width: 100%;
    border-top: 1px solid #bcbec0;
    margin-top: 5vh;
}

#seccion-descargar {
    width: 100%;
    border-top: 1px solid #bcbec0;
    margin-top: 4vh;
}

.input-finalizar {
    width: 100%;
    height: 45px;
    border: none;
    border-radius: 25px;
    padding: 0 1rem;
    background-color: #FFF;
}

.descargas {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2rem;
    gap: 2rem;
}

.descargas button {
    width: 120px;
    height: 195px;
    border: 0px;
    padding: 0px;
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.descargas button div {
    width: 120px;
    height: 170px;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.descargas button span {
    
}

@media screen and (max-width: 1100px) {
    #finalizar-izquierda {
        padding: 0rem 2rem 1rem 1rem;
    }

    #imagen-galeria {
        flex-wrap: nowrap;
    }

    #imagen-galeria button {
        width: 23%;
        height: auto;
        aspect-ratio: 1/1;
    }


}

/* @media screen and (max-width: 767px) {
    #logo {
        width: 100vw;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #logo img {
        position: relative;
        display: block;
        height: auto;
        object-fit:contain;
        width: 150px;
        max-width: 150px;
        top: auto;
        left: auto;
    }

    #btn-menu {
        width: 100vw;
        position: absolute;
        bottom: 0px;
        right: 0px;
        height: 5vh;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem 1rem;
        border-top: 1px solid #BBB;
    }

    #finalizar-izquierda {
        width: 100vw;
        position: absolute;
        left: 0vw;
        top: 12vh;
        height: 40vh;
        border-right: 0px solid #bcbec0;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #finalizar-derecha {
        width: 100vw;
        position: absolute;
        right: 0vw;
        top: 50vh;
        height: 50vh;
        padding: 1rem;
        overflow-y: auto;
        
    }

    #imagen-main {
        width: auto;
        height: 20vh;
        object-fit: contain;
        aspect-ratio: 1.5/1;
    }

    #imagen-galeria {
        width: 100%;
        max-width: 100%;
        height: 10vh;
        margin-top: 0.5rem;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 1%;
    }

    #imagen-galeria img {
        width: 23%;
        height: 10vh;
        object-fit: cover;
        cursor: pointer;
    }

    #imagen-galeria img:hover {
        outline: 1px solid #bcbec0;
    }

    #precio-finalizar {
        top: auto;
        left: 20vw;
        width: auto;
        bottom: 0px;
        height: 5vh;
        z-index: 4;
    }

    #seccion-guardar {
        width: 100%;
        border-top: 1px solid #bcbec0;
        margin-top: 0vh;
    }

    #seccion-descargar {
        width: 100%;
        border-top: 1px solid #bcbec0;
        margin-top: 5vh;
        padding-bottom: 3rem;
    }

    input {
        width: 100%;
        height: 45px;
        border: none;
        border-radius: 25px;
        padding: 0 1rem;
        background-color: #FFF;
    }

    .descargas {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 2rem;
        gap: 2rem;
    }

    .descargas button {
        width: 120px;
        height: 195px;
        border: 0px;
        padding: 0px;
        background-color: transparent;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .descargas button div {
        width: 120px;
        height: 170px;
        background-color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .descargas button span {
        
    }
} */


/* PERFIL */
#contenido-perfil {
    width: 90vw;
    max-width: 1100px;
    position: absolute;
    top: 0px;
    left: 10vw;
    height: auto;
    padding-top: 16vh;
    padding-right: 5vw;
    /* overflow-y: auto; */
}

@media screen and (max-width: 767px) {

    /* body {
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        min-height: 100vh;
        height: 100vh;
        max-height: 100vh;
        position: relative;
        background-color: #ececec;
        font-size: 16px;
        overflow: hidden;
    } */

    #contenido-perfil {
        width: 100vw;
        
        position: absolute;
        top: 10vh;
        right: 0px;
        height: 85vh;
        padding: 1rem;
        padding-right: 1rem;
        overflow-y: auto;
    }


    /* #logo {
        width: 100vw;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #logo img {
        position: relative;
        display: block;
        height: auto;
        object-fit:contain;
        width: 150px;
        max-width: 150px;
        top: auto;
        left: auto;
    } */

    /* #btn-menu {
        width: 100vw;
        position: absolute;
        bottom: 0px;
        right: 0px;
        height: 5vh;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0rem 1rem;
        border-top: 1px solid #BBB;
    } */

    .w-23 {
        width: 49%;
    }
}

.input-div {
    margin-top: 2rem;
    /* width: 48%; */
}

.input-div label {
    color: #000;
    font-size: 1.1rem;
}

.input-div input {
    width: 100%;
    background-color: #FFF;
    border: 1px solid #EEE;
    border-radius: 5px;
    margin-top: 0.5rem;
    font-size: 1rem;
    padding: 0.8rem;
}

.input-div textarea {
    width: 100%;
    background-color: #FFF;
    border: 1px solid #EEE;
    border-radius: 5px;
    margin-top: 0.5rem;
    font-size: 1rem;
    padding: 0.8rem;
}

.h2-perfil {
    font-size: 1.5rem;
}

.numero {
    font-size: 2rem;
    font-weight: 600;
    padding: 2rem;
}

.btn-main-perfil {
    background-color: #6cb64b;
}

#modalCargando {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 6000;
	display: none;
}

#modal-finalizar {
	z-index: 499;
}

#modal-finalizar .modal-front {
	width: 95vw;
	max-width: 900px;
	max-height: 95vh;
	height: auto;
	min-height: 70vh;
	background-color: #FFF;
	border-radius: 10px;
	z-index: 500;
}