/* ---- BODY SECTION --- */

body {
    margin: 0;
    width: 100%;

    background-color: var(--ym-primary-100);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ---- MAIN --- */
main {
    width: 95%;
    max-width: 1280px;
    min-height: calc(100vh - 120px);
    padding: 32px;
    margin: 0 128px;
    margin-bottom: 32px;
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    background-color: var(--ym-primary-50);
    border-radius: 16px;
}

.global-container {
    width: 90%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

@media (max-width: 700px) {
    html, body {
        width: 100dvw;
        overflow-x: hidden;
    }

    body {
        background-color: var(--ym-primary-50);
    }

    main {
        width: 100%;
        margin: 0;
        padding: 16px;
        border-radius: 0;
    }

    .global-container {
        width: 100%;
        padding: 0 16px;
    }
}

/* ---- DETALLES --- */
.detalles {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 0.42fr;
    gap: 48px;
    align-items: start;
}

/* ---- imagenes --- */
.imagenes-container {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.images-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 64px;
}

.image-thumbnail {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--ym-primary-200);
    cursor: pointer;
    transition: transform 0.2s ease, border 0.2s ease;
}

.image-thumbnail:hover {
    transform: scale(1.05);
    border: 2px solid var(--ym-primary);
}

.image-thumbnail.active {
    border: 2px solid var(--ym-primary);
}

#auto-imagen {
    flex: 1;
    border-radius: 16px;
    object-fit: cover;
    max-height: 400px;
    aspect-ratio: 4/3;
}

.detalles-auto h3 {
    margin: 0;
    margin-top: 16px;

    font-size: 1.25rem;
    font-weight: 600;
}

.detalles-auto p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ym-gray-700);
    text-align: justify;
}

@media (max-width: 700px) {
    .detalles {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        align-items: stretch;
        gap: 16px;
    }

    .detalles__left {
        width: 100%;
        box-sizing: border-box;
    }

    .imagenes-container {
        width: 100%;
        order: 1;
        flex-direction: column;
        gap: 4px;
    }

    .images-thumbnails {
        width: 100%;
        order: 2;
        flex-direction: row;

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 8px 4px;
        gap: 16px;
    }

    .images-thumbnails img {
        flex-shrink: 0;
        width: 80px;
        height: auto;
        border-radius: 8px;
    }

    #auto-imagen {
        flex: 1;
        border-radius: 16px;
        max-height: none;
        width: 100%;
    }
}

/* ---- INFORMACION --- */
.detalles__info {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;

    padding: 16px;
    border: 1px solid var(--ym-primary-200);
    border-radius: 16px;
}

.titles {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#titles-mobile {
    font-size: 1.15rem;
}

#auto-type-box-mobile {
    color: var(--ym-gray-700);
}

h2 {
    margin: 0;
    font-size: 2rem;
}

.marca {
    font-weight: 400;
}

.modelo {
    font-weight: 600;
}

#auto-type-box {
    font-weight: 400;
    font-size: 1rem;
    color: var(--ym-gray-700);
}

#auto-precio {
    font-size: 1.75rem;
    font-weight: 600;
}

.precio p {
    margin: 0;
    font-size: 0.785rem;
    color: var(--ym-gray-700);
    text-align: justify;
}

/* ---- custom --- */
.divider {
    width: 95%;
    margin: 16px auto;
    border: none;
    border-top: 1px solid var(--ym-primary-200);
}

.dato-section__subtitle {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.dato-section__subtitle h4 {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
}

.dato-section__subtitle .icon {
    width: 32px;
    font-size: 1.25em;
    line-height: 1;
    color: var(--ym-primary);
}

.dato-section__content {
    margin-left: 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75em;
    color: var(--ym-gray-700);
}

/* ---- buttons --- */
.btn-reserve {
    width: 100%;
    padding: 12px 0;
    text-align: center;

    background-color: var(--ym-primary);
    color: var(--ym-primary-50);
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.3s ease;
}

.btn-reserve:hover {
    background-color: var(--ym-primary-600);
}

.btn-consult {
    width: 100%;
    padding: 12px 0;
    text-align: center;

    background-color: var(--ym-primary-50);
    color: var(--ym-primary);
    font-size: 1em;
    font-weight: 500;
    border: 1px solid var(--ym-primary);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.3s ease;
}

.btn-consult:hover {
    background-color: var(--ym-primary-100);
}

.buttons-end {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.custom-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.custom-divider hr {
    flex: 1;
    border: none;
    border-top: 1px solid var(--ym-primary-200);
}

.or-text {
    margin: 0;

    font-size: 0.875rem;
    color: var(--ym-primary-300);
    white-space: nowrap;
}

.divider-separator{
    width: 100%;
    border: none;
    border-top: 1px solid var(--ym-primary-200);
    margin: 32px 0;
}

@media (max-width: 700px) {
    .detalles__info {
        flex: none;
        box-sizing: border-box;
        width: 100%;
        border: none;
        font-size: 14px;
        padding: 0;
    }

    .titulo-y-detalles {
        display: none;
    }
}

@media (min-width: 700px) {
    #titles-mobile {
        display: none;
    }
}

/* ---- SIMILARES SECTION --- */
.similares {
    width: 100%;
}

.similares h3 {
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
    font-size: 1.75rem;
    font-weight: 600;
}

.similares__list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    -webkit-overflow-scrolling: touch;
}

/* card de auto */
.car-marca {
    font-size: 1rem;
}
.car-modelo {
    font-size: 1.5rem;
}

.car-tipo-caja {
    font-size: 0.8125rem;
}

.car-desde {
    font-size: 0.75rem;
}

@media (max-width: 700px) {
    .similares__list {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
}

/* ---- MODAL --- */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}

.modal__content {
    position: relative;
    margin: 0 32px;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem 1.8rem;
    width: 95%;
    max-width: 500px;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    font-family: "Quicksand", sans-serif;
}

.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.modal-body__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
}

.subtitle-error {
    color: var(--ym-accent);
    font-weight: 600;
}

.modal__body h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.modal__body h4 {
    font-size: 1rem;
    margin: .6rem 0 .4rem;
    font-weight: 600;
}

/* header */
.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

#modal-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.modal__close {
    width: 36px;
    height: 36px;
    font-size: 2rem;
}

#close-modal:hover {
    color: var(--ym-accent);
    background-color: var(--ym-primary-100);
    border-radius: 50%;
}

/* opciones */
.options {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 16px;
}

.option {
    padding: .5rem 1rem;
    border: 1px solid var(--ym-gray-400);
    border-radius: 6px;
    cursor: pointer;
    background: var(--ym-primary-50);
    transition: all .2s ease;
    font-size: 0.9rem;
}
.option:hover { 
    border-color: var(--ym-primary-400); 
    background: var(--ym-primary-100);
}

.option.active { 
    border: 2.5px solid var(--ym-primary); 
    background: var(--ym-primary-50);
    font-weight: 600;
}

.option.color, .option.wheels {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.2s ease;
}

.option.wheels {
    width: 64px;
    height: 64px;
}

.option.color img, .option.wheels img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 50%;
}

.option.color.active,
.option.wheels.active {
    border: 2px solid var(--ym-primary-400);
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

#financiacion-show {
    display: none;
}

/* resumen */
.resumen {
    background: var(--ym-primary-100);
    border-radius: 12px;
    padding: 1rem;
    font-size: 0.875rem;
    margin-top: 8px;
}
.resumen p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    color: var(--ym-gray-700);
}
.resumen .total {
    margin-top: .8rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ym-primary-900);
}

/* footer */
.modal__footer {
    margin-top: 1.2rem;
}

.btn-confirm {
    display: block;
    width: 100%;
    background: var(--ym-primary);
    color: var(--ym-primary-50);
    border: none;
    padding: .9rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease;
}
.btn-confirm:hover {
    background: var(--ym-primary-600);
}

@media (max-width: 700px) {
    .option.color {
        width: 42px;
        height: 42px;
    }

    .option.wheels {
        width: 55px;
        height: 55px;
    }

    .options {
        gap: 8px;
    }
}