/* Panel flotante que muestra la imagen completa al pasar el mouse */

.zoom-preview{
    position:fixed;
    left:0;
    top:0;
    z-index:9999;
    width:min(460px, 80vw);
    max-height:70vh;
    padding:10px;
    border-radius:16px;
    background:rgba(11,18,32,.96);
    border:1px solid rgba(245,124,0,.55);
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transform:scale(.96);
    transition:opacity .16s ease, transform .16s ease;
    pointer-events:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

html.tema-claro .zoom-preview{
    background:#ffffff;
    border-color:rgba(245,124,0,.45);
    box-shadow:0 24px 60px rgba(11,18,32,.25);
}

.zoom-preview.visible{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.zoom-preview img{
    display:block;
    max-width:100%;
    max-height:calc(70vh - 20px);
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:10px;
}

@media (hover: none), (max-width: 700px){
    .zoom-preview{display:none !important;}
}