/* =========================================================
   PLANO (600x677) – CSS COMPLETO (preview unificado)
   - Contenedor responsivo max 600px
   - Stands posicionados por variables CSS (--x/--y en %)
   - Tamaños por variables (--w/--h en px, default 30x30)
   - Preview (tooltip) unificado para stand/salon/escenario/terraza
========================================================= */

/* Wrapper */
.plano-wrap {
  max-width: 600px;
  margin: 0 auto;
}

/* Lienzo del plano */
#plano {
  width: 100%;
  aspect-ratio: 600 / 677;
  position: relative;

  /* background: url("../images/planos/PLANO-REFERENCIA.png") left top / contain
    no-repeat; */
  background: url("../images/planos/PLANO-BG.webp") left top / contain no-repeat;

  padding: 0;
  margin: 20px auto 4rem auto;
}

#plano {
  --scale-stand: 1;
}

/* ---------------------------------------------------------
   Zonas especiales (escenario / terraza / salon)
   Nota: sus posiciones (top/left/bottom/right) pueden quedarse
   como las tengas actualmente, porque NO dependen del JSON.
--------------------------------------------------------- */

/* Escenario */
#plano .escenario {
  width: 27px;
  height: 83px;
  bottom: 80px;
  right: 8px;

  position: absolute;
  text-decoration: none;

  background-color: rgba(255, 255, 255, 0.1);
  transition: all 0.2s linear;
}

#plano .escenario i {
  height: 26px;
  width: 100%;
  display: block;
}

#plano .escenario:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Terraza */
#plano .terraza {
  width: 221px;
  height: 36px;
  bottom: 267px;
  right: 0px;

  position: absolute;
  text-decoration: none;

  background-color: rgba(255, 255, 255, 0);
  transition: all 0.2s linear;
}

#plano .terraza i {
  height: 30px;
  width: 100%;
  display: block;
}

/* Salón (base) */
#plano .salon {
  width: 109px;
  height: 15px;
  bottom: 202px;
  left: 31px;

  position: absolute;
  text-decoration: none;

  background-color: rgba(255, 255, 255, 0);
  transition: all 0.2s linear;
}

/* Variantes de salón (si las usas) */
#plano .salon-sipan {
  width: 103px;
  height: 16px;
  bottom: 244px;
  left: 367px;
}

#plano .salon-quechua {
  width: 132px;
  height: 15px;
  top: 138px;
  left: 367px;
}

#plano .salon i {
  height: 30px;
  width: 100%;
  display: block;
}

/* ---------------------------------------------------------
   STANDS
--------------------------------------------------------- */

#plano .stand {
  position: absolute;
  text-decoration: none;
  outline: none;

  /* width: var(--w, 33px);
  height: var(--h, 33px); */

  width: calc(var(--w, 30px) * var(--scale-stand));
  height: calc(var(--h, 30px) * var(--scale-stand));

  /* x/y en porcentaje (0-100) */
  left: calc(var(--x, 0) * 1%);
  top: calc(var(--y, 0) * 1%);

  transition: all 0.2s linear;
}

/* Número (cuadro blanco + número) */
#plano .stand .num-stand {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  font:
    700 1rem/1 Arial,
    sans-serif;

  border: 0.16rem solid #8f050d;
  background: #fff;
  color: #000;
}

/* Libre */
#plano .stand.libre .num-stand {
  background: #fff;
  color: #000;
}

/* Ocupado */
#plano .stand.ocupado .num-stand {
  background: #8f050d;
  color: #fff;
}

/* Hover / Focus */
#plano .stand:hover .num-stand,
#plano .stand:focus-visible .num-stand {
  background: #b8000b;
  border-color: #b8000b;
  color: #fff;
}

/* ---------------------------------------------------------
   PREVIEW UNIFICADO (stand / salon / escenario / terraza)
   - Sin display:none
   - Se muestra por hover/focus o con .is-open (tap móvil)
--------------------------------------------------------- */

#plano .preview {
  position: absolute;
  left: 12px;
  top: calc(100% + 2px);

  background: #fff;
  z-index: 9999;

  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

#plano a:hover .preview,
#plano a:focus-visible .preview,
#plano a.is-open .preview {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#plano .preview img {
  max-width: none;
  display: block;
}

/* (Opcional) Si quieres que en salón el preview aparezca "dentro" como antes */
#plano .salon .preview {
  left: 16px;
  top: 16px;
}

/* ---------------------------------------------------------
   NAV (si lo usas)
--------------------------------------------------------- */
.nav-plano li a {
  padding: 2px 0;
}

/* Escenario */
#plano #stand-n51 span {
  background: none;
  border: none;
  color: transparent;
  font-size: 0;
}

/* 1) Evitar overflow general */
html,
body {
  max-width: 100%;
  overflow-x: hidden; /* fallback */
}

/* 2) Imágenes responsivas (especialmente feria25set.jpg) */
.responsive img,
img {
  max-width: 100%;
  height: auto;
}

/* 3) Navbar: que el logo no fuerce ancho */
.navbar .brand img,
.navbar .brand .logo {
  max-width: 100%;
  height: auto;
}

/* 4) En pantallas pequeñas, reduce padding lateral del container */
@media (max-width: 480px) {
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Opcional: evita floats raros que empujen el layout */
  .navbar .pull-right {
    float: none !important;
  }
}

@media (max-width: 480px) {
  #plano {
    --scale-stand: clamp(0.6, 100vw / 800, 1);
  }

  #plano {
    --scale-stand: 0.55; /* 25% más pequeños */
  }

  #plano .stand .num-stand {
    font-size: 0.75rem;
  }

  #plano .preview img {
    max-width: 130px;
  }
}