/* ═══ Álbum de fotos de la ficha (galeria-viva.js) ═══════════════════════════
   Negro neutro, como los visores de fotos de siempre (Fotos de Apple,
   Idealista…): la foto es lo único con color. Detrás, la misma foto muy
   desenfocada y oscura, que tiñe el negro con su luz. Botones redondos de
   cristal, textos en blanco y nada de verde de marca aquí dentro.
   Arriba, qué casa es, la cuenta y cerrar; en medio, la foto con sus flechas;
   abajo, la tira de miniaturas. */
.album{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;
    background:#0B0B0C;color:#fff;overflow:hidden;font-family:var(--texto);color-scheme:dark;
    --suave:rgba(255,255,255,.64);     /* textos secundarios: 7,6:1 sobre el negro */
    --cristal:rgba(255,255,255,.1);
    --cristal-2:rgba(255,255,255,.2)}
.album[open]{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;animation:album-entra .35s var(--curva) both}
.album.saliendo{animation:album-sale .2s ease both}
/* transparente: el propio álbum ya tapa la pantalla, y así la ficha se ve
   fundirse al abrir y al cerrar en vez de cortarse a oscuro de golpe */
.album::backdrop{background:transparent}
/* sin arrastres que muevan la ficha de detrás (iOS 15 ignora el overflow
   del documento); el zoom con dos dedos sigue funcionando */
.album-cabecera,.album-escena,.album-pie{touch-action:pinch-zoom}
.album-tira{touch-action:pan-x pinch-zoom}
@keyframes album-entra{from{opacity:0}}
@keyframes album-sale{to{opacity:0}}

/* la luz de la foto, detrás: dos capas que se relevan con fundido */
.album-fondo{position:absolute;inset:-100px;background:#0B0B0C center/cover no-repeat;filter:blur(64px) saturate(1.15) brightness(.6);
    transform:scale(1.1);opacity:0;transition:opacity .8s ease;pointer-events:none}
.album-fondo.visible{opacity:.5}
.album::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 75% 70% at 50% 48%,rgba(11,11,12,.25),rgba(11,11,12,.88)),
               linear-gradient(rgba(11,11,12,.55),transparent 22%,transparent 78%,rgba(11,11,12,.65))}
.album-cabecera,.album-escena,.album-pie{position:relative;z-index:1}

/* botones de cristal: cerrar y las flechas */
.album-cerrar,.album-paso{display:grid;place-items:center;flex:none;padding:0;border:0;border-radius:50%;
    background:var(--cristal);color:#fff;cursor:pointer;
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    transition:background-color .2s ease,transform .2s var(--curva)}
.album-cerrar:active,.album-paso:active{transform:scale(.92)}
@media (hover:hover){
  .album-cerrar:hover,.album-paso:hover{background:var(--cristal-2)}
  .album-mini:hover{opacity:.8}
}

/* ── arriba: la casa y el lugar, la cuenta en el centro, cerrar a la derecha ── */
.album-cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;
    padding:16px clamp(16px,3vw,32px) 12px}
.album-texto{min-width:0}
.album-titulo{font:600 15px/1.3 var(--texto);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-lugar{margin-top:2px;font-size:13px;line-height:1.4;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.album-lugar:empty{display:none}
.album-cuenta{padding:7px 13px;border-radius:999px;background:var(--cristal);font:600 13px/1 var(--texto);
    letter-spacing:.02em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.88)}
.album-cerrar{justify-self:end;width:44px;height:44px}
.album-x{position:relative;width:16px;height:16px}
.album-x::before,.album-x::after{content:"";position:absolute;left:50%;top:50%;width:17px;border-top:1.75px solid currentColor;
    border-radius:2px;transform:translate(-50%,-50%) rotate(45deg)}
.album-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* ── en medio: la foto, a su tamaño justo, con las flechas a los lados ── */
.album-escena{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);align-items:center;
    gap:clamp(12px,2vw,28px);padding:0 clamp(12px,3vw,32px);min-height:0}
.album-anterior{grid-column:1;grid-row:1}
.album-marco{grid-column:2;grid-row:1;align-self:stretch;position:relative;min-height:0}
.album-siguiente{grid-column:3;grid-row:1}
.album[open] .album-marco{animation:album-acerca .55s var(--curva) both}
@keyframes album-acerca{from{opacity:0;transform:scale(.97)}}
.album-foto{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
    transition:opacity .32s ease,transform .45s var(--curva)}
.album-foto.cambiando{opacity:0;transform:translateX(var(--desliz,0))}
.album-foto:not([src]){visibility:hidden}
.album-error{position:absolute;inset:0;margin:auto;height:max-content;max-width:36ch;padding:0 16px;text-align:center;font-size:15px;
    line-height:1.6;color:var(--suave)}
.album-marco.cargando::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;
    border-radius:50%;border:2px solid rgba(255,255,255,.16);border-top-color:#fff;animation:album-gira .8s linear infinite}
@keyframes album-gira{to{transform:rotate(360deg)}}

.album-paso{width:48px;height:48px}
.album-chevron{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;border-radius:1px;
    transform:translateX(-2px) rotate(45deg)}
.album-anterior .album-chevron{transform:translateX(2px) rotate(-135deg)}

/* ── abajo: todas las fotos en pequeño ── */
.album-pie{padding:12px clamp(12px,3vw,32px) max(18px,env(safe-area-inset-bottom))}
.album-tira{position:relative;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 40px;
    justify-content:flex-start;justify-content:safe center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.album-tira::-webkit-scrollbar{display:none}
.album-mini{flex:none;position:relative;width:72px;height:52px;padding:0;border:0;border-radius:8px;overflow:hidden;
    background:rgba(255,255,255,.06);cursor:pointer;opacity:.42;transition:opacity .25s ease}
.album-mini img{width:100%;height:100%;object-fit:cover}
.album-mini img.rota{visibility:hidden}
.album-mini[aria-current]{opacity:1}
.album-mini[aria-current]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px #fff}

/* «body» delante para ganar a la regla general de foco de marca.css (verde,
   que sobre este fondo no se ve) */
body .album:focus,body .album:focus-visible{outline:none}
body .album :focus-visible{outline:2px solid #fff;outline-offset:3px}
body .album .album-mini:focus-visible{outline-offset:2px}

/* para que el lector de pantalla diga «Foto 12 de 45» al pasar */
.album-aviso{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* una sola foto: sin flechas, sin cuenta y sin tira */
.una-sola .album-paso,.una-sola .album-pie,.una-sola .album-cuenta{display:none}

/* ── móvil: la foto a todo el ancho y las flechas encima, en los bordes ── */
@media (max-width:700px){
  .album-cabecera{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:12px 12px 10px}
  .album-titulo{font-size:14px}
  .album-lugar{font-size:12px}
  .album-cuenta{padding:6px 11px;font-size:12px}
  .album-escena{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
  .album-anterior,.album-marco,.album-siguiente{grid-column:1}
  .album-paso{position:relative;z-index:2;width:40px;height:40px;background:rgba(0,0,0,.35)}
  .album-anterior{justify-self:start;margin-left:10px}
  .album-siguiente{justify-self:end;margin-right:10px}
  .album-foto{border-radius:0;box-shadow:none}
  .album-error{padding:0 64px}          /* que no lo tapen las flechas */
  .album-pie{padding:10px 0 max(14px,env(safe-area-inset-bottom))}
  .album-tira{gap:6px;padding:4px 24px;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
      mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .album-mini{width:56px;height:42px;border-radius:6px}
}
/* móvil en horizontal: toda la altura para la foto */
@media (max-height:520px){
  .album-pie{display:none}
  .album-cabecera{padding-top:8px;padding-bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  .album[open],.album.saliendo,.album[open] .album-marco,.album-marco.cargando::after{animation:none}
  .album-foto,.album-fondo,.album-mini,.album-paso,.album-cerrar{transition:none}
}