/* ══════════════════════════════════════════════════════════════════
   San Marco · Galería lateral de plato (carta pública /carta)
   Namespace .mg-* exclusivo. Se inyecta SÓLO en la vista /carta
   (extraHead), después de app.css y antes de premium-responsive.css.
   ══════════════════════════════════════════════════════════════════ */

.mg-gal { margin: 0 0 .7rem; }

/* Pista de scroll lateral: una foto grande + asomos de las siguientes. */
.mg-gal__track {
  display: flex; gap: .4rem; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding-bottom: .25rem;
  border-radius: var(--radius-lg);
}
.mg-gal__track::-webkit-scrollbar { height: 6px; }
.mg-gal__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; }

.mg-gal__item {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 190px; height: 128px; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line);
  padding: 0; cursor: zoom-in; position: relative; display: block;
}
.mg-gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-gal__item:first-child { width: 250px; height: 158px; }

.mg-gal__punto {
  position: absolute; right: .35rem; bottom: .35rem;
  background: rgba(10,10,10,.62); color: #fff; font-size: .62rem;
  border-radius: 100px; padding: .06rem .4rem; letter-spacing: .03em;
}

.mg-gal__mas {
  flex: 0 0 auto; width: 96px; height: 128px; border-radius: var(--radius-lg);
  border: 1px dashed var(--line); background: var(--bg-alt); cursor: zoom-in;
  display: grid; place-items: center; color: var(--muted); font-size: .78rem;
  font-weight: 600; text-align: center; line-height: 1.3; padding: .4rem;
}
.mg-gal__mas:hover { border-color: var(--accent); color: var(--accent); }

.mg-gal__pista { font-size: .7rem; color: var(--muted); margin: .3rem 0 0; }

/* La tarjeta con galería ocupa el ancho: la miniatura suelta desaparece
   para no duplicar la misma foto dos veces. */
.menu-item--gal .menu-item__thumb { display: none; }

/* ─────────────── Visor a pantalla completa ─────────────── */
.mg-view {
  position: fixed; inset: 0; z-index: 9600; background: rgba(10,10,10,.94);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.mg-view__img {
  max-width: min(1200px, 96vw); max-height: 76vh; object-fit: contain;
  border-radius: var(--radius-lg);
}
.mg-view__x {
  position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff;
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.mg-view__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.15); color: #fff; font-size: 1.25rem; cursor: pointer;
}
.mg-view__nav--prev { left: .9rem; }
.mg-view__nav--next { right: .9rem; }
.mg-view__pie { color: rgba(255,255,255,.85); font-size: .84rem; margin-top: .8rem; text-align: center; padding: 0 1rem; }
.mg-view__bolas { display: flex; gap: .35rem; justify-content: center; margin-top: .6rem; flex-wrap: wrap; }
.mg-view__bola {
  width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.32); cursor: pointer;
}
.mg-view__bola.is-on { background: #fff; }

@media (max-width: 560px) {
  .mg-gal__item { width: 168px; height: 116px; }
  .mg-gal__item:first-child { width: 210px; height: 136px; }
  .mg-gal__mas { width: 84px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-gal__track { scroll-snap-type: none; }
}