/* =========================================================
   GALERÍA PROPIEDADES · PRO+ APPLE UI (blindada)
   ========================================================= */

/* ---------------------------------------------------------
   Contenedor principal
--------------------------------------------------------- */

.property-gallery {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  /* ---------------------------------------------------------
     Imagen principal
  --------------------------------------------------------- */

  .property-gallery .main-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-color: #f5f5f7; /* fallback elegante */

    /* evita bugs de stacking en algunos layouts */
    isolation: isolate;
  }

  .property-gallery .main-image img {
    display: block;
    width: 100%;
    height: auto;

    user-select: none;
    -webkit-user-drag: none;

    /* la imagen nunca debe “tapar” botones */
    pointer-events: none;
  }

  /* ---------------------------------------------------------
     Flechas de navegación (Apple-style)
     Blindadas contra resets globales
  --------------------------------------------------------- */

  .property-gallery .main-image > .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* subimos por seguridad */

    width: 44px;
    min-width: 44px;
    max-width: 44px;

    height: 44px;
    min-height: 44px;

    padding: 0;
    margin: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.55);

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);

    font-size: 20px;
    font-weight: 500;
    line-height: 1;

    color: #111;
    cursor: pointer;

    /* “reset” defensivo */
    appearance: none;
    -webkit-appearance: none;
    text-decoration: none;
    box-sizing: border-box;

    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.08);

    transition:
      background-color 0.2s ease,
      box-shadow 0.25s ease,
      transform 0.25s ease,
      opacity 0.2s ease;
  }

  .property-gallery .gallery-nav.prev { left: 14px; }
  .property-gallery .gallery-nav.next { right: 14px; }

  /* Hover solo en dispositivos con puntero */
  @media (hover: hover) {
    .property-gallery .main-image > .gallery-nav:hover {
      background: rgba(255, 255, 255, 0.94);
      box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(0, 0, 0, 0.12);
      transform: translateY(-50%) translateY(-1px);
    }
  }

  /* Active */
  .property-gallery .main-image > .gallery-nav:active {
    transform: translateY(-50%) translateY(1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }

  /* Focus accesible */
  .property-gallery .main-image > .gallery-nav:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(0, 122, 255, 0.35),
      0 6px 20px rgba(0, 0, 0, 0.14);
  }

  /* Si por cualquier motivo hay overlays encima, esto lo evita */
  .property-gallery .main-image > .gallery-nav {
    pointer-events: auto;
  }

  /* ---------------------------------------------------------
     Miniaturas (estilo iOS carousel)
  --------------------------------------------------------- */

  .property-gallery .thumbnails {
    display: flex;
    gap: 1.2rem;

    padding-bottom: 4px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none; /* Firefox */

    /* evita que un parent “aplane” el scroll horizontal */
    position: relative;
    z-index: 1;
  }

  .property-gallery .thumbnails::-webkit-scrollbar {
    display: none;
  }

  .property-gallery .thumbnail {
    flex: 0 0 auto;

    padding: 0;
    margin: 0;

    border: none;
    background: none;
    cursor: pointer;

    /* reset defensivo */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
  }

  /* Imagen miniatura */

  .property-gallery .thumbnail img {
    display: block;

    width: 64px;
    height: 64px;

    object-fit: cover;

    border-radius: 10px;

    opacity: 0.75;

    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  /* Hover miniatura */
  @media (hover: hover) {
    .property-gallery .thumbnail:hover img {
      opacity: 1;
      transform: scale(1.05);
    }
  }

  /* Miniatura activa (JS añadirá .is-active) */
  .property-gallery .thumbnail.is-active img {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.5);
  }

  /* Focus accesible */
  .property-gallery .thumbnail:focus-visible img {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
  }

  /* ---------------------------------------------------------
     Fallbacks / seguridad
  --------------------------------------------------------- */

  /* Si solo hay una imagen: oculta flechas si quieres (añade clase en PHP/JS) */
  /* .property-gallery.is-single .gallery-nav { display:none; } */