/* ══════════════════════════════════════════════════════════════════════════
   AVANCE DE OBRA — rejilla de miniaturas y visor a pantalla completa
   ─────────────────────────────────────────────────────────────────────────
   Dos capas sobre el Master Plan: la galería (.ao-overlay) y, encima de ella,
   una sola foto en grande (.ao-visor). Hereda el lenguaje de las otras
   ventanas de la página —barra fija arriba, fondo tinta, filetes de arena—
   para que no se lea como una pieza traída de otro sitio.

   Lo escribe y lo abre assets/js/avance-obra.js.
   ══════════════════════════════════════════════════════════════════════════ */

.ao-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--brand-ink-soft-rgb), 0.98) 0%, rgba(var(--brand-shadow-rgb), 0.99) 100%);
  animation: mpCalcFadeIn 280ms ease both;
}

.ao-overlay[hidden] { display: none; }

/* ── La barra ──────────────────────────────────────────────────────────────
   Fija arriba: la rejilla es larga y el botón de cerrar tiene que estar donde
   la persona lo busca, no al final de 36 fotos. */

.ao-barra {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(0.9rem, 3vw, 1.6rem);
  padding-top: max(0.9rem, env(safe-area-inset-top, 0.9rem));
  border-bottom: 1px solid rgba(var(--brand-sand-rgb), 0.14);
  background: rgba(7, 19, 22, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ao-id { min-width: 0; }

.ao-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--brand-sand-rgb), 0.45);
}

.ao-titulo {
  margin: 0;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 600;
  color: var(--brand-sand);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ao-cerrar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.2);
  background: rgba(var(--brand-ink-rgb), 0.5);
  color: var(--brand-sand);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.ao-cerrar:hover {
  background: rgba(var(--brand-canopy-rgb), 0.22);
  border-color: rgba(var(--brand-canopy-rgb), 0.45);
}

/* ── El cuerpo ─────────────────────────────────────────────────────────── */

.ao-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 3vw, 1.6rem);
  padding-bottom: max(clamp(1rem, 3vw, 1.6rem), env(safe-area-inset-bottom, 1rem));
}

.ao-nota {
  max-width: 62ch;
  margin: 0 auto clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(var(--brand-sand-rgb), 0.6);
}

/* Celdas del mismo tamaño siempre: las fotos vienen en vertical y en
   horizontal, así que es la celda la que manda la proporción (3/4) y la
   imagen la llena recortando. Una rejilla con alturas distintas por foto se
   ve descuidada, y aquí lo que importa es poder recorrerlas, no verlas
   completas: para eso está el visor. */

.ao-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 20vw, 190px), 1fr));
  gap: clamp(0.5rem, 1.4vw, 0.85rem);
  max-width: 1400px;
  margin: 0 auto;
}

.ao-celda {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.12);
  border-radius: 0.6rem;
  overflow: hidden;
  background: rgba(var(--brand-ink-rgb), 0.5);
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.ao-celda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.ao-celda:hover,
.ao-celda:focus-visible {
  border-color: rgba(var(--brand-canopy-rgb), 0.55);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  outline: none;
  transform: translateY(-2px);
}

.ao-celda:hover img { transform: scale(1.05); }

/* ── El visor ──────────────────────────────────────────────────────────────
   Vive dentro del overlay y lo cubre entero. La foto nunca se recorta aquí:
   se ajusta al hueco que dejan la cabecera y el pie. */

.ao-visor {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  /* Opaco de verdad: con la rejilla detrás, cualquier transparencia deja el
     mosaico asomándose alrededor de la foto y compite con ella. */
  background: #040b0d;
  animation: mpCalcFadeIn 200ms ease both;
}

.ao-visor[hidden] { display: none; }

.ao-visor-barra {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(0.75rem, 3vw, 1.4rem);
  padding-top: max(0.75rem, env(safe-area-inset-top, 0.75rem));
}

.ao-visor-num {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(var(--brand-sand-rgb), 0.6);
  font-variant-numeric: tabular-nums;
}

.ao-visor-escena {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0.5rem, 2vw, 1.2rem);
}

.ao-visor-escena img {
  max-width: min(100%, 900px);
  max-height: 100%;
  object-fit: contain;
  border-radius: 0.5rem;
  opacity: 0;
  transition: opacity 260ms ease;
}

.ao-visor-escena img.is-lista { opacity: 1; }

/* Una horizontal con el mismo tope de 900px se ve diminuta al lado de una
   vertical: se le deja más ancho, que es por donde crece. */
.ao-visor-escena img.es-horizontal { max-width: min(100%, 1280px); }

.ao-visor-pie {
  flex: none;
  margin: 0;
  padding: 0.9rem clamp(0.9rem, 3vw, 1.4rem);
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom, 0.9rem));
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(var(--brand-sand-rgb), 0.75);
}

/* Flechas: centradas sobre los lados largos, nunca sobre la foto en pantallas
   anchas (la imagen tiene su propio tope de ancho y las deja fuera). */

.ao-visor-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--brand-sand-rgb), 0.2);
  background: rgba(7, 19, 22, 0.72);
  color: var(--brand-sand);
  font-size: 1rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.ao-visor-nav:hover {
  background: rgba(var(--brand-canopy-rgb), 0.3);
  border-color: rgba(var(--brand-canopy-rgb), 0.5);
}

.ao-visor-nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.ao-visor-nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* ── Teléfono ─────────────────────────────────────────────────────────────
   Dos columnas exactas: con auto-fill y 120px mínimos, un teléfono angosto
   dejaba una tercera columna a medias y la rejilla quedaba despareja. */

@media (max-width: 600px) {
  .ao-rejilla {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .ao-nota { font-size: 0.76rem; }

  /* Las flechas bajan al pie: a media pantalla y con el pulgar encima tapan
     la foto, y el gesto natural en un teléfono es deslizar. */
  .ao-visor-nav {
    top: auto;
    bottom: max(0.6rem, env(safe-area-inset-bottom, 0.6rem));
    transform: none;
    width: 2.6rem;
    height: 2.6rem;
  }

  .ao-visor-pie {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (max-width: 380px) {
  .ao-titulo { font-size: 0.9rem; white-space: normal; }
}

/* Pantalla ancha y baja (un portátil en horizontal): el pie y la barra se
   comen el alto y la foto quedaba como una tira. Se aprietan los dos. */

@media (max-height: 520px) {
  .ao-visor-barra { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .ao-visor-pie { padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-overlay,
  .ao-visor { animation: none; }
  .ao-celda,
  .ao-celda img,
  .ao-visor-escena img { transition: none; }
  .ao-celda:hover { transform: none; }
  .ao-celda:hover img { transform: none; }
}