/* MP360 · Ayres de Cardales — Selector de panoramas (abajo al centro)
 *
 * Tanda 4: superficie blanca sólida (--white), sombra corta, dos flechas Núcleo
 * chevron-left/right en --primary-700 separadas por un divisor fino.
 *   Hover (puntero fino) / foco de teclado: fondo --primary-50 (CSS) + salida
 *   direccional del glifo con entrada de la copia (GSAP, mp360-selector.js).
 *   Pressed: fondo --primary-100 + escala .96. Foco: aro --primary-700 interior.
 *   Reducido o sin GSAP: solo el cambio de fondo.
 *
 * Geometría: NO altera lo publicado en el carril (.mp360-root, disponibilidad):
 *   --mp360-sel-alto  = 56 desktop / 48 compacto (sin cambios)
 *   --mp360-sel-ancho = 108 / 94 (sin cambios)
 * Los botones se derivan de esas dos medidas con padding 2 y sin gap:
 *   desktop 52×52 · compacto 45×44. El divisor es absoluto (no suma ancho).
 * Capa: z-index 33.
 */

#mp360-selector {
  --sel-pad: 2px;
  --sel-boton-alto: calc(var(--mp360-sel-alto, 56px) - 2 * var(--sel-pad));
  --sel-boton-ancho: calc((var(--mp360-sel-ancho, 108px) - 2 * var(--sel-pad)) / 2);
  --sel-icono: calc(var(--mp360-sel-icono, 20px) + 4px);   /* 24 desktop · 22 compacto */
  position: absolute;
  z-index: 33;
  left: 50%;
  bottom: var(--mp360-inf-abajo, 24px);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: max-content;
  pointer-events: none;
  transition: opacity 0.3s var(--mp360-ease-out) 0.06s, translate 0.3s var(--mp360-ease-out) 0.06s, visibility 0s linear 0s;
}
#mp360-selector[hidden],
#mp360-selector[data-vacio="true"] { display: none !important; }

#mp360-selector[data-cubierto="true"] {
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.2s linear, translate 0.2s linear, visibility 0s linear 0.2s;
}

/* ---------------- superficie ---------------- */
.mp360-selector__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  padding: var(--sel-pad);
  border-radius: var(--radius-control);
  background: var(--white);
  box-shadow: 0 1px 2px rgba(10, 28, 33, 0.14), 0 4px 12px rgba(10, 28, 33, 0.16);   /* --primary-950 */
  pointer-events: auto;
}
/* divisor central fino */
.mp360-selector__panel::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 30%;
  bottom: 30%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--primary-100);
  pointer-events: none;
}

/* ---------------- anterior / siguiente ---------------- */
.mp360-selector__paso {
  --sel-glifo: url("../icons/nucleo/chevron-right.svg");
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--sel-boton-ancho);
  height: var(--sel-boton-alto);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius-control) - var(--sel-pad));
  background-color: var(--white);
  color: var(--primary-700);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 0.3s var(--mp360-ease-out), transform 0.2s var(--mp360-ease-out), opacity 0.2s ease-out;
}
.mp360-selector__paso[data-mp360-selector-paso="-1"] { --sel-glifo: url("../icons/nucleo/chevron-left.svg"); }

/* máscara del hover direccional: recorta glifo y copia */
.mp360-selector__icono {
  position: relative;
  display: block;
  width: var(--sel-icono);
  height: var(--sel-icono);
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
}
.mp360-selector__glifo {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--sel-glifo) center / contain no-repeat;
  mask: var(--sel-glifo) center / contain no-repeat;
  background-color: currentColor;
  will-change: transform;
}
/* copia en reposo fuera de la máscara, del lado opuesto a la dirección
   (sin GSAP queda ahí; con GSAP la controla xPercent) */
.mp360-selector__glifo--copia { transform: translateX(-100%); }
.mp360-selector__paso[data-mp360-selector-paso="-1"] .mp360-selector__glifo--copia { transform: translateX(100%); }

@media (hover: hover) and (pointer: fine) {
  .mp360-selector__paso:not(:disabled):hover { background-color: var(--primary-50); }
}
.mp360-selector__paso:not(:disabled):focus-visible,
.mp360-selector__paso:not(:disabled)[data-activo] { background-color: var(--primary-50); }
.mp360-selector__paso:not(:disabled):active {
  background-color: var(--primary-100);
  transform: scale(0.96);
  transition-duration: 0.08s;
}
.mp360-selector__paso:focus { outline: none; }
.mp360-selector__paso:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-700); }
.mp360-selector__paso:disabled { opacity: 0.35; cursor: default; }

/* Anuncio para lector de pantalla ("Panorama N de 7"); sin presencia visual. */
.mp360-selector__estado {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #mp360-selector,
  #mp360-selector[data-cubierto="true"],
  .mp360-selector__paso { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .mp360-selector__paso:not(:disabled):active { transform: none; }
}