/* =====================================================================
   Tour360 · estilos  (requiere pannellum.css cargado ANTES)
   Personaliza el color de acento cambiando --t360-accent
   ===================================================================== */
.t360{
  --t360-accent:#3da5ff;          /* color de acento (botones activos, enlaces) */
  --t360-ui:rgba(14,18,24,.74);   /* fondo de paneles y botones */
  --t360-ui-hover:rgba(40,50,64,.92);
  --t360-fg:#f4f7fb;
  --t360-radius:12px;
  position:relative;width:100%;height:70vh;min-height:360px;background:#0b0f14;overflow:hidden;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--t360-fg);
  -webkit-user-select:none;user-select:none;border-radius:var(--t360-radius);
}
.t360.t360-pseudo-fs{position:fixed;inset:0;z-index:99999;height:100%;border-radius:0}
.t360:fullscreen{height:100%;border-radius:0}
.t360:-webkit-full-screen{height:100%;border-radius:0}
.t360 *{box-sizing:border-box}
.t360-view{position:absolute;inset:0}
.t360-view.pnlm-container{background:#0b0f14}

/* --- ocultar los controles y mensajes nativos de Pannellum (usamos los nuestros) --- */
.t360 .pnlm-controls-container,.t360 .pnlm-about-msg,.t360 .pnlm-panorama-info{display:none!important}
.t360 .pnlm-load-box{background:var(--t360-ui);border-radius:14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.t360 .pnlm-lbar{border-color:rgba(255,255,255,.6);border-radius:4px;overflow:hidden}
.t360 .pnlm-lbar-fill{background:var(--t360-accent)}

/* --- hotspots personalizados --- */
.t360 .pnlm-hotspot.t360-hs{background:none!important;background-image:none!important;overflow:visible;cursor:default}
.t360 .pnlm-hotspot.t360-hs:hover{background:none}
.t360-in{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap}
.t360-text{font-weight:700;color:#fff;letter-spacing:.2px;line-height:1.15;
  text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 16px rgba(0,0,0,.45)}
.t360-img img{display:block;max-width:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));pointer-events:none}
.t360-link{display:flex;align-items:center;gap:.5em;padding:.45em .95em .45em .6em;border-radius:999px;color:#fff;font-weight:600;cursor:pointer;
  background:var(--lk-bg,rgba(14,18,24,.6));border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  box-shadow:0 4px 16px rgba(0,0,0,.35);transition:background .2s,transform .2s}
.t360-link:hover{background:var(--t360-accent);transform:translate(-50%,-50%) scale(1.06)}
.t360-link i{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--t360-accent);font-style:normal;position:relative}
.t360-link i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--t360-accent);opacity:.8;animation:t360-pulse 1.8s ease-out infinite}
@keyframes t360-pulse{from{transform:scale(.85);opacity:.9}to{transform:scale(1.6);opacity:0}}
.t360-clickable{cursor:pointer}
.t360-editing .t360-in{outline:1px dashed rgba(255,255,255,.65);outline-offset:5px;cursor:move!important}
.t360-editing .t360-in.t360-sel{outline:2px solid var(--t360-accent)}

/* --- barra superior --- */
.t360-top{position:absolute;left:12px;top:12px;z-index:5;display:flex;gap:8px;align-items:center;max-width:calc(100% - 24px);pointer-events:none}
.t360-top>*{pointer-events:auto}
.t360-logo{height:38px;max-width:150px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.t360-title{background:var(--t360-ui);padding:9px 14px;border-radius:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);line-height:1.2}
.t360-title b{display:block;font-size:14px}
.t360-title span{display:block;font-size:12px;opacity:.78}

/* --- botones laterales --- */
.t360-tools{position:absolute;right:12px;bottom:calc(var(--t360-bar,0px) + 14px);z-index:5;display:flex;flex-direction:column;gap:8px}
.t360-btn{width:42px;height:42px;border:0;border-radius:10px;background:var(--t360-ui);color:var(--t360-fg);font-size:18px;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:inherit;padding:0}
.t360-btn:hover{background:var(--t360-ui-hover)}
.t360-btn.on{outline:2px solid var(--t360-accent)}
.t360-btn svg{width:20px;height:20px;fill:currentColor}

/* --- barra de escenas con miniaturas --- */
.t360-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;gap:10px;padding:10px 12px 12px;overflow-x:auto;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));scrollbar-width:none;justify-content:center}
.t360-bar::-webkit-scrollbar{display:none}
.t360-thumb{flex:0 0 auto;width:132px;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#111;cursor:pointer;position:relative;padding:0;
  color:#fff;font-family:inherit;box-shadow:0 3px 10px rgba(0,0,0,.4);transition:transform .15s,border-color .15s}
.t360-thumb:hover{transform:translateY(-3px)}
.t360-thumb.on{border-color:var(--t360-accent)}
.t360-thumb .im{display:block;width:100%;height:66px;background-size:cover;background-position:center 60%}
.t360-thumb .nm{display:block;font-size:12px;font-weight:600;padding:5px 7px;background:rgba(14,18,24,.88);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t360.t360-nobar .t360-bar{display:none}

/* --- menú contextual (estilo 3DVista) --- */
.t360-menu{position:fixed;z-index:100000;min-width:270px;background:#f1f1f1;color:#222;border-radius:4px;box-shadow:0 4px 18px rgba(0,0,0,.4);padding:4px 0;display:none;font-size:14px}
.t360-menu div{padding:9px 20px;cursor:pointer}
.t360-menu div:hover{background:#dcdcdc}
.t360-menu hr{border:0;border-top:1px solid #c9c9c9;margin:4px 0}
.t360-menu .ver{cursor:default;color:#555}.t360-menu .ver:hover{background:none}

/* --- editor --- */
.t360-panel{position:absolute;left:12px;bottom:calc(var(--t360-bar,0px) + 14px);z-index:6;width:290px;max-width:calc(100% - 80px);display:none;
  background:var(--t360-ui);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:12px;padding:12px 14px;font-size:13px;-webkit-user-select:text;user-select:text}
.t360-panel h4{margin:0 0 6px;font-size:13px}
.t360-panel label{display:block;margin:8px 0 3px;opacity:.85}
.t360-panel input[type=text],.t360-panel select,.t360-panel textarea{width:100%;padding:7px 8px;border-radius:7px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:var(--t360-fg);font:inherit}
.t360-panel input[type=range]{width:100%}
.t360-panel .row{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.t360-panel button{padding:7px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.14);color:var(--t360-fg);cursor:pointer;font:inherit}
.t360-panel button.danger{border-color:#ff6b6b;color:#ffb3b3}
.t360-panel button.pri{background:var(--t360-accent);border-color:transparent;color:#00131f;font-weight:700}
.t360-panel .hint{opacity:.78;line-height:1.35;margin:0}
.t360-panel textarea{height:90px;margin-top:8px;font-size:11px}
.t360-toast{position:absolute;left:50%;top:64px;transform:translateX(-50%);background:var(--t360-ui);padding:8px 14px;border-radius:999px;font-size:13px;opacity:0;transition:opacity .3s;z-index:8;pointer-events:none;white-space:nowrap}
.t360-toast.show{opacity:1}

@media (max-width:640px){
  .t360{height:68vh}
  .t360-thumb{width:104px}.t360-thumb .im{height:52px}
  .t360-title{padding:7px 10px}
}

/* =====================================================================
   BURBUJAS (tipo "bubble"): globo 3D con cola, logo y/o texto
   La punta de la cola queda exactamente sobre el punto del panorama.
   ===================================================================== */
.t360-in.t360-bub{left:50%;top:50%;transform:translate(-50%,-100%);animation:t360-bob 3.6s ease-in-out infinite;--bub-bg:linear-gradient(#ffffff,#eef2f8);
  --bub-edge:#cfd7e3;--bub-edge2:#b4bfcf;--bub-fg:#1b2433;--bub-ring:transparent}
@keyframes t360-bob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 7px))}}
.t360-bub .bub-all{display:flex;flex-direction:column;align-items:center;transform-origin:50% 100%;transition:transform .18s ease}
.t360-bub.t360-clickable:hover{animation-play-state:paused}
.t360-bub.t360-clickable:hover .bub-all{transform:scale(1.07)}
.t360-bub .bub-body{display:flex;align-items:center;justify-content:center;gap:.55em;padding:.5em .95em;border-radius:.62em;background:var(--bub-bg);color:var(--bub-fg);
  box-shadow:inset 0 .09em .08em rgba(255,255,255,.95),0 0 0 .14em var(--bub-ring),0 .14em 0 var(--bub-edge),0 .27em 0 var(--bub-edge2),0 .55em .9em rgba(0,0,0,.38)}
.t360-bub .bub-tail{width:1.15em;height:.95em;margin-top:.12em;background:var(--bub-bg);
  clip-path:polygon(0 0,100% 0,56% 100%,44% 100%);filter:drop-shadow(0 .22em .22em rgba(0,0,0,.35))}
.t360-bub .bub-logo{display:block;height:2.6em;width:auto;max-width:11em;object-fit:contain;pointer-events:none}
.t360-bub .bub-text{font-weight:800;line-height:1.1;letter-spacing:.2px;white-space:nowrap}
/* estilo azul: texto grueso en cursiva con aro azul (como "Catedral de Chiclayo") */
.t360-bub.t360-th-blue{--bub-ring:#2457f5;--bub-edge:#1b3fc2;--bub-edge2:#142f94;--bub-fg:#1f4fe0}
.t360-bub.t360-th-blue .bub-text{font-weight:900;font-style:italic;text-transform:uppercase;white-space:normal;text-align:center;max-width:11.5em;
  text-shadow:0 0 .04em #fff,0 .05em 0 #fff,0 -.03em 0 #fff,.05em 0 0 #fff,-.05em 0 0 #fff,0 .12em .12em rgba(10,30,120,.35)}
/* estilo oscuro */
.t360-bub.t360-th-dark{--bub-bg:linear-gradient(#3a424f,#232932);--bub-edge:#161a20;--bub-edge2:#0c0f13;--bub-fg:#fff}
.t360-editing .t360-bub{animation:none}
.t360-editing .t360-in.t360-bub{outline-offset:2px}

/* tirador de tamaño (solo en modo edición, sobre la etiqueta seleccionada) */
.t360-rz{display:none;position:absolute;right:-9px;bottom:-9px;width:16px;height:16px;border-radius:50%;background:var(--t360-accent);
  border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5);cursor:nwse-resize;z-index:3;pointer-events:auto}
.t360-editing .t360-sel .t360-rz,.t360-editing .t360-in.t360-sel>.t360-rz{display:block}
.t360-bub .bub-body{position:relative}
.t360-bub .bub-logo{height:2.2em}
/* el panel del editor nunca se sale del visor: si falta espacio, se desplaza */
.t360-panel{max-height:calc(100% - var(--t360-bar,0px) - 74px);overflow-y:auto}

/* ---------- planos: tiradores de esquina (solo editor) ---------- */
.t360 .t360-pt{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--t360-accent);border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.55);cursor:move;pointer-events:auto;
  display:grid;place-items:center;color:#fff;font-size:12px;line-height:1}
.t360-pt.ctr{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:7px;font-size:15px}
.t360-plans{z-index:0}
.t360-panel .row button.pri{background:var(--t360-accent);color:#00131f;border-color:transparent;font-weight:700}

/* ---------- colores personalizados / imagen propia con acción ---------- */
.t360-bub.t360-custom .bub-text{text-shadow:none}
.t360-img.t360-clickable img{transition:transform .18s ease}
.t360-img.t360-clickable:hover img{transform:scale(1.07)}
.t360-col{display:flex;align-items:center;gap:8px;margin:6px 0}
.t360-col span{flex:1;font-size:12.5px;opacity:.9}
.t360-col input[type=color]{width:44px;height:28px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:6px;background:none;cursor:pointer}
.t360-col button{padding:2px 9px;border-radius:6px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:inherit;cursor:pointer;font-size:14px}

/* imagen propia: el punto fijo es la punta (centro inferior), como en las burbujas del sistema */
.t360-in.t360-img.t360-anc-b{transform:translate(-50%,-100%)}
.t360-img.t360-anc-b.t360-clickable:hover img{transform-origin:50% 100%}