.border-box {
  position: relative;
}

.icon-container {
  color: #fb0000; /* Cambia el color del icono según sea necesario */
}

.pano-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#panorama {
  width: 100vw;
  height: 50vh;
}

/* Contenedor para el visor pannellum */
.pannellum-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.pannellum-wrapper > div {
  width: 100%;
  height: 100%;
}

/* Nuevo icono de flecha tipo Google Street View */
.pnlm-hotspot-base.custom-hotspot-arrow {
    background-color: transparent !important;
    border: none !important;
    width: 60px !important;
    height: 60px !important;
    cursor: pointer;
    /* Dejamos que Pannellum controle el transform (posicionamiento absoluto) */
    transition: filter 0.2s !important;
}

.pnlm-hotspot-base.custom-hotspot-arrow::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15 L85 85 L50 65 L15 85 Z' fill='white' stroke='rgba(0,0,0,0.3)' stroke-width='3'/%3E%3C/svg%3E") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotateX(65deg); /* Rotación interna solo de la flecha */
    transition: transform 0.2s ease-out !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.pnlm-hotspot-base.custom-hotspot-arrow:hover::after {
    filter: brightness(1.2) drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    transform: rotateX(65deg) scale(1.1);
}

/* Ocultar el icono por defecto de Pannellum (la 'i') */
.pnlm-hotspot-base.custom-hotspot-arrow::before {
    display: none !important;
    content: '' !important;
}

/* Ajuste para que el tooltip no se vea afectado por la inclinación 3D del hotspot */
.pnlm-hotspot-base.custom-hotspot-arrow .pnlm-tooltip span {
    transform: translateY(-20px);
    display: inline-block;
    background-color: rgba(0,0,0,0.8) !important;
    color: white !important;
    border-radius: 4px;
    padding: 4px 10px;
    font-weight: 500;
}