@import url('/public/css/fonts.css');

/* ============ Layout general ============ */
.detalle-producto {
    display: flex;
    gap: 2rem;
    padding: 0 1.5rem 2rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: min(1400px, 95vw);
    margin: clamp(110px, 15vw, 160px) auto 60px;
    align-items: flex-start;
}

/* Garantiza Ghino en todo el bloque */
.detalle-producto,
.detalle-producto * {
    font-family: 'Ghino', sans-serif;
    box-sizing: border-box;
}

/* ====== Galeria lateral ====== */
.detalle-producto__galeria {
    flex: 1 1 380px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.thumbnails {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 20px;
    flex: 0 0 auto;
}

.thumbnail {
    width: 90px;
    height: 90px;
    overflow: hidden;
    cursor: pointer;
    border-radius: .25rem;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: .25rem;
    transition: border-color .2s, box-shadow .2s;
}

.thumbnail img:hover,
.thumbnail img:focus {
    border-color: #0d315e;
}

.thumbnail.selected img {
    border-color: #0d315e;
    box-shadow: 0 0 0 3px rgba(13, 49, 94, .4);
}

.imagen-principal {
    flex: 1 1 400px;
    border-radius: 32px;
    margin: 0;
    position: relative;
}

.imagen-principal img {
    width: 100%;
    max-width: 90%;
    height: auto;
    object-fit: contain;
    margin: 0;
    display: block;
}

.dp-main-image-loader {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    z-index: 3;
    pointer-events: none;
}

.dp-main-image-loader.active {
    display: inline-flex;
}

.dp-main-image-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #c7d2e7;
    border-top-color: #0d315e;
    border-radius: 50%;
    animation: dp-main-spin 0.75s linear infinite;
}

.dp-main-image-text {
    font-size: .9rem;
    font-weight: 600;
    color: #0d315e;
}

@keyframes dp-main-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ====== Informacion ====== */
.detalle-producto__info {
    flex: 1 1 480px;
    width: 100%;
    max-width: 720px;
}

.dp-nombre {
    font-size: 2rem;
    margin-bottom: .5rem;
    font-weight: 700;
}

.dp-precio {
    font-size: 1.5rem;
    color: #0d315e;
    margin-bottom: 1rem;
    font-weight: 700;
}

.dp-version {
    display: inline-block;
    background: #0d315e;
    color: #fff;
    padding: .3rem .8rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.detalle-producto__info h2 {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.detalle-producto__info p {
    line-height: 1.5;
    margin-top: .5rem;
    max-width: 100%;
    text-align: justify;
}

/* Detalles: limitar altura de primer parrafo */
.detalle-producto__info p:first-of-type {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6;
    padding-right: .25rem;
    max-height: clamp(6rem, 12vw, 12rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.detalle-producto__info p:first-of-type::-webkit-scrollbar {
    width: 6px;
}

.detalle-producto__info p:first-of-type::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 6px;
}

/* ====== Tabla de propiedades ====== */
.dp-propiedades {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin-top: 3.5rem;
    table-layout: fixed;
    border: 1px solid #9ea7b2;
}

.dp-propiedades th,
.dp-propiedades td {
    border: 1px solid #b6bec8;
    padding: .5rem .6rem;
    font-size: .95rem;
    line-height: 1.2;
}

.dp-propiedades thead tr:first-child th {
    background: #0d315e;
    color: #fff;
    padding: .75rem .6rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}

.dp-propiedades .dp-propiedades__columns th {
    background: #0a72a9;
    color: #fff;
    font-weight: 700;
}

.dp-propiedades .dp-propiedades__columns th:first-child {
    text-align: left;
    width: 46%;
}

.dp-propiedades .dp-propiedades__columns th:nth-child(2),
.dp-propiedades .dp-propiedades__columns th:nth-child(3) {
    text-align: center;
    width: 27%;
}

.dp-propiedades td {
    vertical-align: middle;
}

.dp-propiedades tbody td:first-child {
    background: #0a72a9;
    color: #fff;
    font-weight: 600;
    text-align: left;
}

.dp-propiedades tbody td:nth-child(2),
.dp-propiedades tbody td:nth-child(3) {
    background: #eceff3;
    color: #17212b;
    font-weight: 600;
    text-align: center;
}

.dp-propiedades--3col tbody tr:nth-child(even) td:nth-child(2),
.dp-propiedades--3col tbody tr:nth-child(even) td:nth-child(3) {
    background: #e3e8ee;
}

.dp-propiedades:not(.dp-propiedades--3col) tbody td:nth-child(2) {
    text-align: left;
    font-weight: 500;
}

.dp-propiedades:not(.dp-propiedades--3col) tbody tr:nth-child(even) td:nth-child(2) {
    background: #f7f9fb;
}

/* ====== Botones ====== */
.dp-botones {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-3d,
.btn-ficha {
    background: #0d315e;
    color: #fff;
    border: none;
    padding: .8rem 1.6rem;
    border-radius: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    transition: background .2s;
}

.btn-3d:hover,
.btn-ficha:hover {
    background: #396097;
}

/* Botón 3D centrado sobre la imagen */
.btn-3d {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: 2;
    margin: 0 auto;
}

.dp-version-btn {
    background: #001b42;
    color: #fff;
    border: none;
    padding: .8rem 1.6rem;
    border-radius: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
    transition: background .2s;
}

.dp-version-btn.active,
.dp-version-btn:hover {
    background: #396097 !important;
    color: #fff;
}

/* ====== Versiones ====== */
.dp-versions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    justify-content: flex-start;
}

.dp-versions .dp-version-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    min-width: 110px;
    text-align: center;
}

/* ====== Selector de color ====== */
.dp-color-select {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: 360px;
    width: 100%;
}

/* Alinear botón 3D bajo la imagen */
.imagen-principal .dp-botones {
    justify-content: center;
    margin-top: 1rem;
}

.dp-color-label {
    font-weight: 600;
    color: #0d315e;
    font-size: .95rem;
}

.dp-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.dp-color-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border: 1px solid #cbd5e1;
    border-radius: .65rem;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.dp-color-pill.active {
    border-color: #0d315e;
    box-shadow: 0 0 0 3px rgba(13, 49, 94, 0.12);
    background: #eaf1fb;
}

.dp-color-option {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ====== Modal 3D ====== */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-contenido {
    position: relative;
    width: 90%;
    max-width: 800px;
    height: 80vh;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
}

.modal-cerrar {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 1001;
    background: transparent;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    pointer-events: all;
}

.zoom-control {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.8);
    padding: .5rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    z-index: 1000;
}

.zoom-control input {
    width: 100px;
}

/* Bloquea el scroll del fondo cuando el modal está abierto */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    touch-action: none;
    height: 100%;
}

/* ====== Scroll en texto de detalles para moviles ====== */
@media (max-width: 576px) {
    /* Reordenar secciones en móvil según flujo solicitado */
    .detalle-producto {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 120px auto 32px;
        padding: 1rem;
    }

    .detalle-producto__galeria,
    .detalle-producto__info {
        display: contents;
    }

    /* Orden: nombre -> miniaturas -> selector color -> imagen -> btn 3D -> versión (título + botones) -> tabla -> detalles -> ventajas -> usos -> ficha */
    .dp-nombre {
        order: 1;
        margin-top: 40%;
        padding: 35px;
    }

    .thumbnails {
        order: 2;
        margin: 0 auto 0.75rem;
        flex-direction: row;
        justify-content: center;
        gap: .5rem;
        width: 100%;
    }

    .dp-color-select {
        order: 3;
        width: 100%;
        align-items: center;
    }

    .dp-color-options {
        justify-content: center;
    }

    /* Aplana los hijos de la imagen para poder reordenar tabla */
    .imagen-principal {
        display: contents;
    }
    .imagen-principal img {
        order: 4;
        width: 100%;
        margin: 0 20px 0.75rem;
    }

    .imagen-principal .dp-botones {
        order: 5;
        position: static;
        transform: none;
        margin: 0.5rem auto 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .imagen-principal .btn-3d {
        width: 80%;
    }

    /* h2 secuenciales en info: 1=Versión, 2=Detalles, 3=Ventajas, 4=Usos */
    .detalle-producto__info h2:nth-of-type(1) {
        order: 6;
    }

    .dp-versions {
        order: 7;
        width: 100%;
        justify-content: center;
    }

    .dp-propiedades {
        order: 8;
        width: 100%;
        table-layout: auto;
    }

    .dp-propiedades th,
    .dp-propiedades td {
        font-size: .86rem;
        padding: .45rem;
    }

    .detalle-producto__info h2:nth-of-type(2) {
        order: 9;
    }

    /* Detalles */
    .detalle-producto__info p:nth-of-type(1) {
        order: 10;
    }

    .detalle-producto__info h2:nth-of-type(3) {
        order: 11;
    }

    /* Ventajas */
    .detalle-producto__info p:nth-of-type(2) {
        order: 12;
    }

    .detalle-producto__info h2:nth-of-type(4) {
        order: 13;
    }

    /* Usos comunes */
    .detalle-producto__info p:nth-of-type(3) {
        order: 14;
    }

    .detalle-producto__info .dp-botones {
        order: 15;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .thumbnail {
        width: 60px;
        height: 60px;
    }

    .btn-3d,
    .btn-ficha {
        width: 80%;
        margin:30px;
    }
}@media (max-width: 414px) {
    .thumbnail {
        width: 50px;
        height: 50px;
    }

    .detalle-producto {
        gap: .75rem;
        padding: 1rem;
    }
}

@media (max-width: 390px) {
    .thumbnail {
        width: 48px;
        height: 48px;
    }
}

/* ====== Amplía layout en pantallas grandes (>=1600px) ====== */
@media (min-width: 1600px) {
    .detalle-producto {
        max-width: min(90vw, 1700px);
        gap: 2.75rem;
    }

    .detalle-producto__galeria {
        flex: 1 1 460px;
    }

    .imagen-principal {
        flex: 1 1 580px;
    }

    .thumbnail {
        width: 100px;
        height: 100px;
    }

    .dp-versions {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    .dp-nombre {
        font-size: 2.2rem;
    }

    .dp-precio,
    .detalle-producto__info h2 {
        font-size: 1.3rem;
    }

    .dp-propiedades td,
    .dp-propiedades th {
        font-size: 1rem;
    }
}