/* ===========================================================
   VISOR 360°
   Versión 1.0
   Proyecto: Configurador 360° de Vehículos
   Autor: Ulises Rossi
   =========================================================== */


/*==========================
  VARIABLES
===========================*/

:root{
    --primary-color:#666;
    --background:#ffffff;
    --text:#222222;
    --border:#dddddd;
    --loading-bg:rgba(255,255,255,.85);
    --transition:.25s;
    --radius:10px;
    --viewer-max-width:586px;
}

/*==========================
  RESET
===========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:var(--background);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

/*==========================
  CONTENEDOR
===========================*/

.viewer-section{
    width:min(95%,1200px);
    margin:40px auto;
    text-align:center;
}
.subtitle{
    color:#666;
    margin-bottom:25px;
}

/*==========================
  VISOR
===========================*/

.viewer360{
    position:relative;
    width:100%;
    max-width:var(--viewer-max-width);
    aspect-ratio:16/9;
    margin:auto;
    overflow:hidden;
    user-select:none;
    touch-action:none;
    cursor:grab;
    background:transparent;
}

.viewer360:active{
    cursor:grabbing;
}

.viewer360 img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    pointer-events:none;
}


/*==========================
  LOADING
===========================*/

#loading{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:1rem;
    font-weight:bold;
    background:var(--loading-bg);
    color:#444;
    transition:.3s;
    z-index:10;
}

#loading.hide{
    opacity:0;
    visibility:hidden;
}

/*==========================
  MENSAJE
===========================*/
.drag-message{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.65);
    color:white;
    padding:10px 18px;
    border-radius:30px;
    font-size:.9rem;
    pointer-events:none;
    opacity:1;
    transition:opacity .5s;
}
.drag-message.hide{
    opacity:0;
}

/*==========================
  COLORES
===========================*/

.colors{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:25px;
}

.color{
    width:34px;
    height:34px;
    border-radius:50%;
    border:2px solid var(--border);
    cursor:pointer;
    transition:transform var(--transition),
               border-color var(--transition),
               box-shadow var(--transition);
}

.color:hover{
    transform:scale(1.12);
}

.color.active{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px rgba(235,10,30,.20);
}


/*==========================
  BOTONES
===========================*/

.controls{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-top:30px;

    flex-wrap:wrap;

}

.controls button{

    padding:12px 20px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#222;

    color:#fff;

    font-size:.95rem;

    transition:.25s;

}

.controls button:hover{

    background:var(--primary-color);

}


/*==========================
  RESPONSIVE
===========================*/

@media (max-width:900px){

    .viewer-section h1{

        font-size:1.6rem;

    }

}

@media (max-width:700px){

    .colors{

        gap:12px;

    }

    .color{

        width:28px;

        height:28px;

    }

}

@media (max-width:480px){

    .viewer-section{

        width:98%;

    }

    .viewer-section h1{

        font-size:1.3rem;

    }

    .subtitle{

        font-size:.9rem;

    }

    .controls{

        flex-direction:column;

    }

    .controls button{

        width:100%;

    }

}



.selector-titulo{
    text-align:center;
    margin-top:20px;
    font-size:18px;
    font-weight:600;
}
.color-name{
    text-align:center;
    font-size:18px;
   /* font-weight:700;*/
    color:#666;
    margin-top:10px;
    min-height:28px;
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .30s ease,
        transform .30s ease;
}
.color-name.hide{
    opacity:0;
    transform:translateY(8px);
}
.colors{
    display:flex;
    justify-content:center;
    gap:14px;
    margin-top:18px;
}
.color{
    width:26px;
    height:26px;
    border-radius:50%;
    border:2px solid #bbb;
    cursor:pointer;
    transition:.25s;
}
.color:hover{transform:scale(1.20);}
.color.active{ transform:scale(1.15); border:1px solid #333; box-shadow:
        0 0 0 4px rgba(255,255,255,.9),
        0 0 10px rgba(0,0,0,.25);
}