/* ======================================================================
   photoplan.css — Plano REAL del salón (imagen generada) con marcador de
   mesa/entrada superpuesto. Un único plano, reutilizado en el sitio del
   invitado (versión compacta) y en el panel privado / vista completa
   (plano.html).
   ====================================================================== */

/* ---------------------------------------------------------------------
   Página completa (plano.html)
--------------------------------------------------------------------- */
.plano-page{ min-height: 100svh; padding: 2.4rem 1.2rem 4rem; }
.plano-header{ max-width: 1180px; margin: 0 auto 1.8rem; text-align: center; }
.plano-header .eyebrow{ display:block; margin-bottom:.5em; }
.plano-header h1{
  font-family: var(--font-headline);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: var(--ivory);
  margin-bottom: .2em;
}
.plano-header p{ color: rgba(255,248,240,.75); }
.plano-back{
  display: inline-block;
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--butter-yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,212,59,.4);
}
.plano-back:hover{ color: var(--golden-yellow); }

.infographic{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 1.6rem;
  align-items: start;
}
@media (max-width: 900px){ .infographic{ grid-template-columns: 1fr; } }

.info-room-wrap{
  background: rgba(255,248,240,.06);
  border: 1px solid rgba(255,248,240,.2);
  border-radius: 28px;
  padding: 1.2rem;
  box-shadow: var(--shadow-soft);
}

/* ---------------------------------------------------------------------
   pp-frame — el marco de la imagen real del plano, con overlay
--------------------------------------------------------------------- */
.pp-frame{
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(35,7,22,.5);
}
.pp-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-overlay{ position: absolute; inset: 0; pointer-events: none; }
.pp-route{ position: absolute; inset: 0; width: 100%; height: 100%; }

.pp-marker{
  position: absolute;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}
.pp-marker.pp-entrance{
  width: 7%;
  aspect-ratio: 1;
  border: 2.5px solid var(--turquoise);
  box-shadow: 0 0 0 5px rgba(101,214,194,.28), 0 0 16px rgba(101,214,194,.7);
  animation: ppPulse 2.4s ease-in-out infinite;
}
.pp-marker.pp-target{
  width: 9%;
  aspect-ratio: 1;
  border: 3px solid var(--golden-yellow);
  box-shadow: 0 0 0 7px rgba(255,212,59,.32), 0 0 22px rgba(255,212,59,.85);
  animation: ppPulse 1.8s ease-in-out infinite;
}
@keyframes ppPulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); opacity: 1; }
  50%{ transform: translate(-50%,-50%) scale(1.14); opacity: .78; }
}
/* ---------------------------------------------------------------------
   Botón "Guiarme al lugar" — abre la pantalla completa de guía
--------------------------------------------------------------------- */
.pp-guide-btn{
  display: block;
  margin: 1rem auto 0;
  padding: .75em 1.8em;
  border-radius: 999px;
  border: 1.5px solid var(--golden-yellow);
  background: rgba(255,212,59,.14);
  color: var(--butter-yellow);
  font-family: var(--font-headline);
  font-size: 1rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .25s, transform .2s;
}
.pp-guide-btn:hover{ background: rgba(255,212,59,.24); transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Pantalla completa de guía — estilo "Cómo llegar" de Google Maps: una
   instrucción grande a la vez, con su distancia, y un botón "Iniciar"
   abajo que activa el sensor de pasos (ver nota larga en photoplan.js).
--------------------------------------------------------------------- */
.nav-screen{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg-gradient);
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom));
}
.nav-screen.hidden{ display: none; }
.nav-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-title{
  font-family: var(--font-body);
  font-size: .95rem;
  color: rgba(255,248,240,.85);
}
.nav-title strong{ color: var(--butter-yellow); font-family: var(--font-headline); }
.nav-close{
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,248,240,.4);
  background: rgba(255,248,240,.08);
  color: var(--ivory);
  font-size: 1rem;
  cursor: pointer;
}
.nav-progress{
  text-align: center;
  margin-top: 1.2rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--butter-yellow);
  min-height: 1.2em;
}

/* ---------------------------------------------------------------------
   Mini-plano dentro de la pantalla de guía — la foto real del salón con
   la ruta completa tenue, el tramo actual resaltado en dorado y un
   muñequito que avanza sobre esa línea con cada paso real detectado.
--------------------------------------------------------------------- */
.nav-map{
  width: min(72vw, 230px);
  margin: .9rem auto 0;
  flex: none;
}
.nav-map-frame{
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(35,7,22,.45);
}
.nav-walker{
  position: absolute;
  transform: translate(-50%,-50%);
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition: left .4s ease, top .4s ease;
}

.nav-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .5rem;
  padding: .8rem 0;
}
.nav-arrow{
  font-size: clamp(2.2rem, 9vw, 3rem);
  line-height: 1;
  margin-bottom: .1rem;
  animation: navArrowPulse 1.3s ease-in-out infinite;
}
.nav-arrow:empty{ display: none; }
@keyframes navArrowPulse{
  0%,100%{ transform: translateY(0); opacity: 1; }
  50%{ transform: translateY(-6px); opacity: .78; }
}
.nav-arrow-left{ animation-name: navArrowPulseX; }
.nav-arrow-right{ animation-name: navArrowPulseX; }
@keyframes navArrowPulseX{
  0%,100%{ transform: translateX(0); opacity: 1; }
  50%{ transform: translateX(6px); opacity: .78; }
}
.nav-arrow-arrived{ animation: ppPulse 1.6s ease-in-out infinite; }
.nav-instruction{
  font-family: var(--font-headline);
  font-size: clamp(1.3rem, 5.4vw, 1.9rem);
  color: var(--ivory);
  line-height: 1.3;
  max-width: 520px;
  margin: 0;
}
.nav-meters{
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  color: var(--gold);
  margin: 0;
}
.nav-status{
  font-size: .88rem;
  color: rgba(255,248,240,.75);
  margin: 0;
}
.nav-status.hidden{ display: none; }
.nav-manual-link{
  display: block;
  margin: .9rem auto 0;
  padding: .7em 1.4em;
  min-height: 44px;
  border-radius: 999px;
  background: rgba(255,212,59,.14);
  border: 1.5px solid var(--golden-yellow);
  color: var(--butter-yellow);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.nav-manual-link:active{ background: rgba(255,212,59,.28); transform: scale(.97); }
.nav-manual-link.hidden{ display: none; }
.nav-actions{ display: flex; justify-content: center; }
.nav-start-btn{
  width: min(100%, 420px);
  padding: 1em 2em;
  border-radius: 999px;
  border: none;
  background: linear-gradient(120deg, var(--golden-yellow), var(--coral-pink) 60%, var(--fuchsia-royal));
  color: var(--ink);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .25s, opacity .25s;
}
.nav-start-btn:hover{ transform: translateY(-2px); }
.nav-start-btn:disabled{ opacity: .8; cursor: default; transform: none; }

/* ---------------------------------------------------------------------
   Versión compacta — incrustada en la confirmación del invitado
--------------------------------------------------------------------- */
.photo-mini{
  max-width: 380px;
  margin: 0 auto;
}
.photo-mini .pp-frame{ border-radius: 16px; }
.photo-mini .pp-marker.pp-target{ width: 11%; }

/* ---------------------------------------------------------------------
   Panel lateral (lista de mesas + leyenda)
--------------------------------------------------------------------- */
.info-side{ display: flex; flex-direction: column; gap: 1rem; }
.info-card{
  background: rgba(255,248,240,.07);
  border: 1px solid rgba(255,248,240,.2);
  border-radius: 20px;
  padding: 1.2rem 1.3rem;
}
.info-card h3{
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--butter-yellow);
  margin-bottom: .8rem;
}
.info-table-list{ display: flex; flex-direction: column; gap: .5rem; }
.info-table-row{
  display: flex; align-items: center; gap: .7rem;
  font-size: .92rem; color: var(--ivory);
}
.info-table-row .chip-num{
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card-gradient);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-headline); font-size: .82rem; color: var(--ivory);
  flex: none;
}
.info-table-row.is-target{ color: var(--golden-yellow); font-weight: 600; }
.info-table-row .meta{ margin-left: auto; font-size: .76rem; color: rgba(255,248,240,.6); }

.info-legend{ display: flex; flex-direction: column; gap: .6rem; }
.info-legend-item{
  display: flex; align-items: center; gap: .6rem;
  font-size: .88rem; color: rgba(255,248,240,.9);
}
.info-legend-item .dot{
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display:flex; align-items:center; justify-content:center; font-size: .8rem;
  background: rgba(255,248,240,.12);
}

/* Enlace "ver plano completo" bajo la versión compacta */
.plano-mini-link{
  display: block;
  text-align: center;
  margin-top: .9rem;
  font-size: .85rem;
  color: var(--butter-yellow);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,212,59,.4);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.plano-mini-link:hover{ color: var(--golden-yellow); }