/* ==========================================================
   FICHA ARQUEOLÓXICA
========================================================== */

/* ==========================================
   BOTÓN CERRAR
========================================== */

#cerrarPanel{

    position:absolute;

    top:18px;

    right:18px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    cursor:pointer;

    font-size:18px;

    transition:.2s;

}

#cerrarPanel:hover{

    background:#e4e4e4;

}


/* ==========================================
   CABECERA
========================================== */

/* ==========================================
   TÍTULO DE LA FICHA
========================================== */

#panelTitulo{

    margin:24px 24px 24px;

    font-size:22px;

    font-weight:700;

    line-height:1.2;
	
	color:#222;
	
	padding-right:60px;


}

#panelTipoloxia{

    margin:0 24px;

    font-size:15px;

    font-weight:600;

    color:#8c6a18;

    text-transform:uppercase;

    letter-spacing:.04em;

}




/* ==========================================
   DESCRICIÓN
========================================== */

#panelDescricion{

    font-size:16px;

    line-height:1.8;

    color:#333;

}


/* ==========================================
   SECCIÓNS
========================================== */

.panelSeccion{

    margin:0 24px 30px;

}

.panelSeccion h3{

    margin:0 0 14px;

    padding-bottom:8px;

    border-bottom:1px solid #e4e4e4;

    font-size:18px;

    font-weight:600;

}


/* ==========================================
   BOTÓN COMO CHEGAR
========================================== */

#btnComoLlegar{

    width:100%;

    height:44px;

    border:none;

    border-radius:6px;

    background:#0d6efd;

    color:#fff;

    cursor:pointer;

    font-size:15px;

    transition:.2s;

}

#btnComoLlegar:hover{

    background:#0b5ed7;

}

/* ==========================================================
   DATOS DE LA FICHA
========================================================== */

.panelDatos{

    margin:0 24px 28px;

}

.panelCampo{

    margin-bottom:18px;

}

.panelEtiqueta{

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:#8a8a8a;

    margin-bottom:4px;

}

.panelValor{

    font-size:18px;

    line-height:1.4;

    color:#222;

}




/* ==========================================================
   MINIATURAS FOTOS
========================================================== */

#miniaturasFotos{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));

    gap:10px;

}

#miniaturasFotos img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;

}

#miniaturasFotos img:hover{

    transform:scale(1.03);

}

/* ==========================================
   MINIATURAS DE VÍDEO
========================================== */

#miniaturasVideos{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

}

.miniaturaVideo{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    cursor:pointer;

    border-radius:8px;

    background:#000;

}

/* ==========================================================
   GALERÍA
========================================================== */

#galeria{
    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:var(--alto-footer);

    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.90);
    z-index:5000;
}

#galeria.abierta{

    display:flex;

}

#imagenGaleria{

    max-width:92%;
    max-height:92%;

    object-fit:contain;

    border-radius:8px;

    box-shadow:0 10px 40px rgba(0,0,0,.5);
}

#cerrarGaleria{

    position:absolute;

    top:20px;

    right:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#222;

    font-size:28px;

    cursor:pointer;

}

/* ==========================================================
   FLECHAS
========================================================== */

#fotoAnterior,
#fotoSiguiente{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.85);

    font-size:26px;

    cursor:pointer;

    z-index:2;

}

#fotoAnterior{

    left:25px;

}

#fotoSiguiente{

    right:25px;

}

/* ==========================================================
   CONTADOR
========================================================== */

#contadorGaleria{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    background:rgba(0,0,0,.6);

    color:#fff;

    padding:8px 16px;

    border-radius:20px;

    font-size:14px;

}

/* ==========================================================
   MINIATURAS PANORAMAS
========================================================== */

#miniaturasPanoramas{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));

    gap:10px;

}

#miniaturasPanoramas img{

    width:100%;

    aspect-ratio:2/1;

    object-fit:cover;

    border-radius:6px;

    cursor:pointer;

    transition:.2s;

}

#miniaturasPanoramas img:hover{

    transform:scale(1.03);

}

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

#visor360Overlay{
    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:var(--alto-footer);

    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.75);
    z-index:4000;
}

#visor360Overlay.abierto{

    display:flex;

}


/* ------------------------------------------
   Ventana
------------------------------------------ */

#ventana360{

    position:relative;

    width:min(1200px,92%);
    height:min(720px,92%);

    background:#000;

    border:3px solid #ffffff;
    border-radius:10px;

    overflow:hidden;

    box-sizing:border-box;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 20px 60px rgba(0,0,0,.45);
}


/* ------------------------------------------
   Contenedor de Pannellum
------------------------------------------ */

#contenedor360{

    width:100%;

    height:100%;

}


/* ------------------------------------------
   Botón cerrar
------------------------------------------ */

#cerrar360{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.95);

    color:#222;

    font-size:24px;

    font-weight:bold;

    cursor:pointer;

    z-index:5000;

    transition:.2s;

    box-shadow:0 2px 10px rgba(0,0,0,.35);

}


#cerrar360:hover{

    background:#ffffff;

    transform:scale(1.08);

}


/* ------------------------------------------
   Adaptación móvil
------------------------------------------ */

@media (max-width:768px){

    #ventana360,
    #ventanaVideo{

        width:100%;
        height:100%;

        border-left:0;
        border-right:0;

        border-radius:0;
    }

}

/* ==========================================
   CONTROLES PANNELLUM
========================================== */

#contenedor360 .pnlm-controls-container{

    top:20px !important;

    left:20px !important;

}


/* ==========================================================
   VISOR DE VÍDEO
========================================================== */

#visorVideoOverlay{
    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:var(--alto-footer);

    display:none;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.75);
    z-index:4500;
}

#visorVideoOverlay.abierto{

    display:flex;

}

#ventanaVideo{

    position:relative;

    width:min(1100px,90%);
    height:min(700px,90%);

    background:#000;

    border:3px solid #fff;
    border-radius:12px;

    overflow:hidden;

    box-sizing:border-box;

    box-shadow:0 20px 60px rgba(0,0,0,.45);
}

#videoPlayer{

    width:100%;

    height:100%;

    object-fit:contain;

    background:#000;

}

#cerrarVideo{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:10;

}

#cerrarVideo:hover{

    background:#f2f2f2;

}