/* Galería de cliente: la foto es la protagonista (DESIGN.md). */

.g-top { position: absolute; inset: 0 0 auto 0; z-index: 2; padding-block: var(--lg); }
.g-logo { display: inline-flex; padding: var(--sm); margin-left: calc(var(--sm) * -1); border-radius: var(--r-full); background: var(--paper); }
.g-logo img { width: 40px; height: auto; }

.g-cover { margin: 0; height: 78svh; min-height: 360px; background: var(--surface); }
.g-cover img { width: 100%; height: 100%; object-fit: cover; }

.g-head { padding-block: var(--xxl) var(--xxl); max-width: 70rem; }
.g-head .t-display { max-width: 18ch; overflow-wrap: anywhere; }
.g-head__scene { margin-top: var(--sm); }
.g-head .t-caption { margin: var(--lg) 0 0; }
.g-actions { display: flex; flex-wrap: wrap; gap: var(--md); margin-top: var(--xl); }
.g-dl { margin-top: var(--xl); max-width: 32rem; display: grid; gap: var(--sm); }
.g-dl__text { margin: 0; }

.g-scene + .g-scene { margin-top: var(--xxxl); }
.g-scene__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  flex-wrap: wrap; margin-bottom: var(--lg);
}

/* Filas justificadas solo con CSS: cada foto crece según su proporción. */
.g-grid { --row: 118px; display: flex; flex-wrap: wrap; gap: 4px; }
.g-grid::after { content: ""; flex-grow: 999; }
@media (min-width: 768px) { .g-grid { --row: 240px; } }
@media (min-width: 1280px) { .g-grid { --row: 300px; } }
.g-tile {
  position: relative; display: block; flex-grow: var(--r); width: calc(var(--row) * var(--r));
  aspect-ratio: var(--r); background: var(--surface); overflow: hidden;
}
.g-tile img { width: 100%; height: 100%; object-fit: cover; }
.g-tile:focus-visible { outline-offset: -3px; outline-color: var(--paper); box-shadow: inset 0 0 0 5px var(--primary); }
.g-tile__badge {
  position: absolute; left: var(--sm); bottom: var(--sm);
  padding: 2px var(--sm); border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary); font: 500 var(--fs-label)/1.3 var(--font);
}

/* Mensajes: link no disponible, PIN */
.g-message { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: var(--lg); max-width: 34rem; margin: 0 auto; }
.g-message p { margin: 0; max-width: 60ch; }
.g-pin { display: grid; gap: var(--sm); width: 100%; max-width: 20rem; margin-top: var(--sm); }
.g-pin input {
  height: 56px; padding: 0 var(--md); border: 1px solid var(--border); border-radius: var(--r-sm);
  font: 600 1.5rem/1 var(--font); letter-spacing: 0.4em; text-align: center; background: var(--paper); color: var(--text);
}
.g-pin input[aria-invalid="true"] { border-color: var(--danger); }
.g-pin__error { color: var(--danger); font-size: var(--fs-sm); }
.g-pin .btn { margin-top: var(--sm); }

/* Visor: el único fondo negro de la web */
.lb {
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--on-primary);
}
.lb::backdrop { background: var(--ink); }
.lb[open] { display: grid; grid-template-rows: auto 1fr; }
.lb__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--md);
  padding: calc(var(--md) + env(safe-area-inset-top, 0px)) var(--gutter) var(--md);
}
.lb__count { color: var(--on-primary-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.lb__actions { display: flex; gap: var(--sm); }
.btn--on-dark { background: var(--ink); color: var(--on-primary); border-color: var(--on-primary-muted); }
.btn--on-dark:hover { background: var(--primary-hover); color: var(--on-primary); }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
.lb__media { width: 100%; height: 100%; display: grid; place-items: center; min-height: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.lb__media img, .lb__media video { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 48px; height: 48px; border-radius: var(--r-full); border: 0;
  background: var(--primary-hover); color: var(--on-primary); font: 400 2rem/1 var(--font); cursor: pointer;
}
.lb__nav--prev { left: var(--md); }
.lb__nav--next { right: var(--md); }
@media (hover: none) { .lb__nav { display: none; } }
.lb__note { color: var(--on-primary-muted); text-align: center; padding: var(--xl); max-width: 30ch; }