body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Arial, sans-serif;
    overflow: hidden; /* Evita barras de scroll */
}

#contenedor-principal {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

/* --- MENÚ LATERAL --- */
#menu-lateral {
    width: 250px;
    background-color: #5c3a21; /* Marrón tipo madera/hotel */
    color: white;
    display: flex;
    flex-direction: column;
    z-index: 10; /* Para que quede por encima del mapa */
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}

.logo {
    padding: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    background: rgba(0,0,0,0.2);
    text-align: center;
}

#lista-escenas {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
}

#lista-escenas li {
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background 0.3s;
}

#lista-escenas li:hover {
    background-color: #7a4e2f;
}

/* --- VISOR 360 --- */
#visor-360 {
    flex-grow: 1; /* Ocupa el resto del espacio */
    height: 100%;
    background-color: #ccc; /* Color de fondo mientras carga */
}

/* Estilo del contenido de la InfoWindow */
.tarjeta-producto {
    min-width: 200px;
    font-family: Arial, sans-serif;
}
.tarjeta-producto h3 {
    margin: 0 0 10px 0;
    color: #5c3a21;
    font-size: 16px;
}
.tarjeta-producto button {
    background-color: #5c3a21;
    color: white;
    border: none;
    padding: 5px 10px;
    margin-top: 10px;
    cursor: pointer;
    width: 100%;
}

/* =========================================================
   NUEVO SISTEMA DE HOTSPOTS VISUALES 3D
   ========================================================= */
.hotspot-marker {
    position: absolute;
    cursor: pointer;
    pointer-events: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
}

/* Contenedor principal que rota en 3D */
.hotspot-inner-wrap {
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s linear, filter 0.2s; /* Suavidad al rotar y seleccionar */
}

/* 1. Pulse */
.hs-pulse { position: relative; width: 100%; height: 100%; }
.hs-pulse .dot { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: var(--c1); border-radius: 50%; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hs-pulse .ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--c2); border-radius: 50%; animation: pulse-anim 1.5s infinite ease-out; z-index: 1; }
@keyframes pulse-anim { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* 2. Dot */
.hs-dot { width: 100%; height: 100%; background: var(--c1); border: 3px solid var(--c2); border-radius: 50%; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* 3. Image (Placeholder por defecto) */
.hs-img { width: 100%; height: 100%; background: var(--c1); border: 2px solid var(--c2); border-radius: 50%; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Photo_icon.png/640px-Photo_icon.png'); background-size: cover; background-position: center; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }

/* 4. Plus Circle */
.hs-plus-circle { width: 100%; height: 100%; background: var(--c2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c1); font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.5); font-family: Arial, sans-serif; }
.hs-plus-circle::before { content: '+'; }

/* 5. Plus Simple */
.hs-plus { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--c1); font-weight: bold; text-shadow: 0 0 5px var(--c2); font-family: Arial, sans-serif; }
.hs-plus::before { content: '+'; }

/* 6. Rings */
.hs-rings { width: 100%; height: 100%; border: 3px solid var(--c1); border-radius: 50%; position: relative; box-sizing: border-box; }
.hs-rings::after { content: ''; position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; border: 2px solid var(--c2); border-radius: 50%; box-sizing: border-box; }

/* 7. Text */
.hs-text { background: var(--c2); color: var(--c1); padding: 5px 15px; border-radius: 20px; font-weight: bold; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.3); border: 2px solid var(--c1); font-family: 'Segoe UI', Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box;}

/* Etiqueta de texto flotante al pasar el mouse */
.hotspot-info {
    display: none;
    position: absolute;
    top: -35px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}

.hotspot-marker:hover .hotspot-info {
    display: block;
}