.unitDetails{
    padding: 0 1.3rem;
}

.detailsTitle{
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 2.813rem 0;
}

.detailsTitle h1{
    color: var(--TES-dark);
    flex: 1;
    font-size: 1.05rem;
    letter-spacing: 0.125rem;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.detailsLot{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lotBrand{
    display: flex;
    margin-bottom: 0.625rem;
    width: 100%;
}

.brandImage{
    background-color: var(--TES-dark);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.25rem;
    height: fit-content;
    padding: 0.188rem;
    width: 95px;
}

.imgBrnd{
    width: 100%;
}

.lotBrand hgroup{
    padding-left: 0.938rem;
}

.brandText h2{
    font-size: 0.875rem;
    color: var(--TES-dark);
}

.brandText h3{
    font-size: 0.75rem;
    color: var(--TES-gray-dark);
}

.lotBox{
    align-items: center;
    border-bottom: 1px solid var(--TES-gray-light-silver);
    display: flex;
    justify-content: space-between;
    margin-top: 0.938rem;
    padding-bottom: 2.813rem;
    width: 100%;
}

.boxImage{
    align-items: center;
    display: flex;
    justify-content: flex-start;
    width: 40%;
}

.imageUnit{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.75rem;
    height: 100px;
    width: 105px;
}

.boxInformation{
    font-size: 0.75rem;
    padding: 0.313rem 0.938rem;
    width: 100%;
}

.informationID{
    background-color: var(--TES-secondary-color);
    border-radius: 0.25rem;
    color: var(--TES-white);
    font-size: 0.75rem;
    margin-bottom: 0.125rem;
    padding: 0.1rem  0.5rem;
    width: fit-content;
}

.information{
    color: var(--TES-gray-dark);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.information p{
    margin: 0;
}

.informationPatio {
    display: inline-flex;
    justify-content: flex-start;
    gap: 0.438rem;
}

.lotDropdown{
    width: 100%;
}

.dropdownGeneral{
    border-bottom: 1px solid var(--TES-gray-light-silver);
    padding: 2.813rem 0;
}

.dropdownGeneral h2{
    color: var(--TES-dark);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.generalName{
    align-items: center;
    color: var(--TES-dark);
    display: flex;
    justify-content: space-between;
}

.generalName i{
    cursor: pointer;
}

.rotateArrow {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

.generalOpen{
    display: none;
    padding-top: 2.85rem;
}

.generalOpen p{
    color: var(--TES-gray-dark);
    font-size: 0.844rem;
}

.generalOpen span, .generalOpen h3{
    color: var(--TES-dark);
    font-weight: 600;
}

.generalOpen h3{
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}


.openDoc{
    background-color: var(--TES-white);
    border-radius: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.2rem 0.75rem;
    width: 100%;
}

.docPDF{
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: flex-start;
}

.PDFImage{
    background-image: url("https://s3-bucket-todoensubastas.s3.ca-central-1.amazonaws.com/images/sheet.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 14px;
    width: 11px;
}

.docPDF p{
    color: var(--TES-primary-color);
    margin: 0;
    text-transform: uppercase;
}

.imagesTgl{
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.togl{
    align-items: center;
    background-color: var(--TES-white);
    border-radius: 0.625rem;
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    padding: 0.375rem;
    width: fit-content;
}

.togl p{
margin: 0;
}

.toglSwitch{
    border: 1px solid transparent;
    height: 22px;
    width: 50px;
}

.toglSwitch label{
    background-color: var(--TES-white-light);
}

.toglSwitch label::before{
    box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.25);
    bottom: -1px;
}

.toglSwitch input:checked + label::before{
    transform: translateX(25px);
}


/* NUEVO DISEÑO IMAGENES */


.imagesUnitContainer {
    display: flex;
    width: 100%;
    gap: 10px;
    padding: 0;
    flex-wrap: nowrap;
}

.imagesUnitLeft,
.imagesUnitRight {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imagesUnitPair {
    display: flex;
    gap: 10px;
}

.imagesUnitPair .cardImageUnit {
    flex: 1;
}

.cardImageUnit {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
}

.cardImageUnit h5 {
    color: var(--TES-dark);
    font-size: 7.5px;
    font-weight: bold;
    margin: 4px 8px;
}

.imagesLeftContainer {
    aspect-ratio: 1/1;
    overflow: hidden;
    width: 100%;
}

.imagesLeftContainer img,
.cardImageUnit > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.imgUnitIcon{
    background-color: var(--TES-white);
    bottom: 0;
    color: var(--TES-primary-color);
    font-size: 0.6rem;
    opacity: 0.6;
    padding: 2px 3px;
    position: absolute;
    right: 0;
}

/* RESPONSIVIDAD */

@media(min-width: 330px){
    .cardImageUnit h5{
        font-size: 8px;
    }
}

@media(min-width: 340px){
    .detailsTitle h1{
        font-size: 1.2rem;
    }
}

@media(min-width: 345px){
    .cardImageUnit h5{
        font-size: 9px;
    }
}

@media(min-width: 350px){
    .unitDetails{
        padding: 0 1.3rem;
    }

}

@media(min-width: 370px){
    .cardImageUnit h5{
        font-size: 10px;
    }
}

@media(min-width: 375px){
    .unitDetails{
        padding: 0 1.5rem;
    }

    .detailsTitle h1{
        font-size: 1.3rem;
    }

    .brandText h2{
        font-size: 1rem;
    }

    .brandText h3{
        font-size: 0.75rem;
    }

    .imageUnit{
        height: 100px;
        width: 107px;
    }

    .imgUnitIcon{
        font-size: 0.8rem;
        padding: 2px 4px;
    }

}

@media(min-width: 400px){
    .detailsTitle h1{
        font-size: 1.375rem;
    }

    .cardImageUnit h5{
        font-size: 10.8px;
    }

}

@media(min-width: 410px){
    .unitDetails{
        padding: 0 2.5rem;
    }

    .detailsTitle h1{
        font-size: 1.3rem;
    }
}

@media(min-width: 420px){

    .detailsTitle h1{
        font-size: 1.375rem;
    }
}

@media(min-width: 460px){
    .cardImageUnit h5{
        font-size: 12px;
    }
}


@media(min-width: 470px){
    .detailsTitle h1{
        font-size: 1.470rem;
    }


    .brandText h2{
        font-size: 1rem;
    }

    .brandText h3, .boxInformation, .informationID{
        font-size: 0.85rem;
    }

    .boxImage{
        width: 36%;
    }

    .imageUnit{
        height: 120px;
        width: 120px;
    }

    .generalOpen p{
        font-size: 0.9rem;
    }

    .generalOpen h3{
        font-size: 0.95rem;
    }
}

@media(min-width: 485px){
    .cardImageUnit h5{
        font-size: 13px;
    }
}

@media(min-width: 500px){
    .detailsTitle h1{
        font-size: 1.6rem;
    }


    .brandImage {
        width: 73px;
    }

    .brandText h2{
        font-size: 1.15rem;
    }

    .brandText h3, .boxInformation, .informationID{
        font-size: 0.9rem;
    }

    .boxImage{
        width: 33%;
    }

    .imageUnit{
        height: 130px;
        width: 130px;
    }

}

@media(min-width: 520px){
    .cardImageUnit h5{
        font-size: 14px;
    }
}


@media(min-width: 560px){
    .unitDetails{
        padding: 0 3.5rem;
    }
}


@media(min-width: 600px){
    .detailsTitle h1{
        font-size: 1.8rem;
    }

    .brandImage{
        width: 73px;
    }

    .brandText h2 {
        font-size: 1.25rem;
    }

    .imageUnit{
        height: 136px;
        width: 150px;
    }

    .brandText h3, .boxInformation, .informationID{
        font-size: 1rem;
    }

    .dropdownGeneral h2{
        font-size: 1.2rem;
    }

    .generalOpen p{
        font-size: 0.95rem;
    }

    .generalOpen h3{
        font-size: 1rem;
    }

    .PDFImage{
        height: 18px;
        width: 14px;
    }

}

@media(min-width: 660px){
    .unitDetails{
        padding: 0 5rem;
    }
}


@media(min-width: 720px){
    .boxImage{
        width: 28%;
    }
}


@media(min-width: 768px){
    .detailsTitle svg{
        display: none;
    }

    .imageUnitCard{
        max-width: 50%;
    }

    .imgUnitIcon{
        font-size: 0.95rem;
        padding: 8px;
    }

    .cardImageUnit h5{
        font-size: 16px;
    }

}


@media(min-width: 800px){
    .imageUnit{
        height: 145px;
        width: 170px;
    }

    .dropdownGeneral h2{
        font-size: 1.25rem;
    }

    .generalOpen p{
        font-size: 1rem;
    }

    .imgUnitIcon {
        font-size: 1rem;
    }

}


@media (min-width: 840px) {
    .imageUnit{
        height: 152px;
        width: 180px;
    }
}


@media(min-width: 870px){
    .unitDetails{
        padding: 0 10rem;
    }
}


@media(min-width: 940px){
    .unitDetails{
        padding: 0 12rem;
    }
}


@media(min-width: 1100px){
    .brandText h2{
        font-size: 1.4rem;
    }

    .brandText h3, .boxInformation, .informationID{
        font-size: 1.2rem;
    }

    .imageUnit{
        height: 170px;
        width: 205px;
    }

    .dropdownGeneral h2{
        font-size: 1.4rem;
    }

    .generalOpen p{
        font-size: 1.2rem;
    }

    .generalOpen h3{
        font-size: 1.25rem;
    }

    .imgUnitIcon {
        font-size: 1.2rem;
    }

}

@media(min-width: 1200px){
    .unitDetails{
        padding: 0 20rem;
    }
}


@media(min-width: 1440px){
    .unitDetails{
        padding: 0 24rem;
    }
}

@media(min-width: 1600px){
    .unitDetails{
        padding: 0 30rem;
    }
}

@media(min-width: 1700px){
    .unitDetails{
        padding: 0 34rem;
    }

    .boxImage{
        width: 36%;
    }
}


@media (min-width: 1800px){
    .unitDetails{
        padding: 0 37rem;
    }
}

@media(min-width: 2560px){
    .unitDetails{
        padding: 0 60rem;
    }
}