/* envoltorios */
.fp360-wrap{margin:1em 0}
.fp360-open{padding:.5em 1em}

/* bloquear scroll cuando modal abierto */
body.fp360-lock{overflow:hidden}

/* modal base con z-index alto */
.fp360-modal{position:fixed;inset:0;display:none;z-index:1000000}
.fp360-modal[aria-hidden="false"]{display:block}
.fp360-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);z-index:1000000}
.fp360-modal-dialog{position:relative;z-index:1000001;max-width:960px;margin:5vh auto;background:#fff;padding:0;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.fp360-modal-close{position:absolute;top:8px;right:8px;background:#fff;border:0;padding:.3em .6em;cursor:pointer}
#fp360-canvas{display:block;width:100%;height:70vh;background:transparent}

/* controles base */
.fp360-controls{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.fp360-controls[aria-hidden="true"]{display:none}

/* controles en modal - z-index alto */
.fp360-modal .fp360-controls{
  z-index:1000002;
}

/* controles en inline - z-index bajo */
.fp360-inline .fp360-controls{
  z-index:10;
}

/* cuando modal está abierto, controles inline se vuelven discretos */
body.fp360-lock .fp360-inline .fp360-controls{
  opacity:0.3;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

/* botones de controles */
.fp360-ctrl{
  background:#fff;
  border:1px solid #ccc;
  padding:.45em .75em;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:all 0.3s ease;
}
.fp360-ctrl:active{transform:scale(0.98)}

/* cuando modal abierto, botones inline se vuelven más discretos */
body.fp360-lock .fp360-inline .fp360-ctrl{
  background:#f5f5f5;
  border-color:#ddd;
  box-shadow:none;
}

/* iconos play/pause con svg inline */
.fp360-playpause{
  width:42px;height:42px;
  background:#fff center/18px 18px no-repeat;
  border:1px solid #ccc;border-radius:50%;
}

/* inline viewer */
.fp360-inline{position:relative;margin:1em 0}
.fp360-inline-canvaswrap{position:relative;background:transparent;border-radius:6px;overflow:hidden}
.fp360-inline-canvas{display:block;width:100%;height:60vh;max-height:70vh;background:transparent}
.fp360-preview-frame{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
}
.fp360-inline.fp360-initialized .fp360-preview-frame{display:none}

/* botón base neutro (sin borde) */
.fp360-wrap .fp360-open{
  cursor:pointer;
  border:none;                     /* sin borde */
  background:#ffffff;              /* neutro */
  color:#242424;                   /* texto gris oscuro */
  border-radius:10px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:.55em .9em;              /* para versión con texto */
  transition:
    transform .12s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    color .15s ease;
  box-shadow:0 1px 2px rgba(0,0,0,.06);   /* sombra sutil inicial */
}

/* hover / active / focus en grises */
.fp360-wrap .fp360-open:hover{
  transform:translateY(-1px);
  background:#f7f7f7;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.fp360-wrap .fp360-open:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.fp360-wrap .fp360-open:focus{
  outline:2px solid transparent;
  /* anillo de focus gris + sombra */
  box-shadow:
    0 0 0 3px rgba(0,0,0,.12),
    0 6px 18px rgba(0,0,0,.16);
}

/* variante solo icono */
.fp360-wrap .fp360-open.fp360-btn-icon{
  --fp360-icon-size: 34px;         /* ajusta tamaño del icono aquí */
  padding:.35em;
  width:calc(var(--fp360-icon-size) + .7em);
  height:calc(var(--fp360-icon-size) + .7em);
}
.fp360-wrap .fp360-open.fp360-btn-icon img{
  display:block;
  width:var(--fp360-icon-size);
  height:var(--fp360-icon-size);
  pointer-events:none;
  user-select:none;
}

/* toque móvil opcional */
@media (max-width:480px){
  .fp360-wrap .fp360-open.fp360-btn-icon{
    --fp360-icon-size:32px;
  }
}
