/* ============================================================
   Nostalgic Emulation — Ad Slots
   Estilos de contenedores publicitarios, placeholders y
   comportamiento responsive. No acoplar a ningún proveedor.
   ============================================================ */

/* ── Container base ─────────────────────────────────────────── */
.ad-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem auto;
  overflow: hidden;
  padding-top: 1.3rem; /* espacio para la etiqueta PUBLICIDAD */
  /* Aisla el reflow del ad del resto de la página */
  contain: layout;
}

/* Etiqueta "PUBLICIDAD" encima del slot */
.ad-slot::before {
  content: 'PUBLICIDAD';
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: .33rem;
  color: #64748b; /* --text-muted */
  letter-spacing: .1em;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: .5;
  user-select: none;
  pointer-events: none;
}

/* Activado por JS cuando el slot está listo — reserva espacio */
.ad-slot--ready {
  transition: min-height .2s ease;
}

/* ── Variantes por formato ───────────────────────────────────── */

/* Leaderboard — responsive, ancho completo del contenedor */
.ad-slot--leaderboard {
  width: 100%;
  min-height: 90px;
}

/* Medium rectangle 300×250 */
.ad-slot--mrec {
  max-width: 300px;
  min-height: 250px;
}

/* Right-rail / sidebar sticky */
.ad-slot--rail {
  max-width: 300px;
  min-height: 250px;
  position: sticky;
  top: 1.5rem;
  margin: 0;
}

/* Billboard 970×90 (pre-emulator, opcional) */
.ad-slot--billboard {
  max-width: 970px;
  min-height: 90px;
}

/* ── Placeholder visual ──────────────────────────────────────── */
.ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: inherit;
  background: #111128; /* --surface */
  border: 1px dashed #2d2d5e; /* --border */
  border-radius: 6px; /* --radius */
}

.ad-label {
  font-family: 'Press Start 2P', monospace;
  font-size: .38rem;
  color: #64748b; /* --text-muted */
  letter-spacing: .08em;
  border: 1px solid #2d2d5e;
  padding: .2rem .45rem;
  border-radius: 3px;
  user-select: none;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .ad-slot--leaderboard {
    max-width: 468px;
    min-height: 60px;
  }
  .ad-slot--rail {
    display: none;
  }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
  .ad-slot--leaderboard {
    max-width: 320px;
    min-height: 50px;
  }
  .ad-slot--mrec {
    max-width: 300px;
  }
  .ad-slot--rail {
    display: none;
  }
  /* Slots que no aplican en mobile (también controlado por JS) */
  .ad-slot[data-ad-slot="catalog-top"],
  .ad-slot[data-ad-slot="home-between-consoles"],
  .ad-slot[data-ad-slot="dashboard-pre-history"] {
    display: none;
  }
}

/* Mobile muy estrecho (<400px) */
@media (max-width: 400px) {
  .ad-slot--leaderboard { max-width: 300px; }
  .ad-slot--mrec        { max-width: 280px; }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .ad-slot--ready { transition: none; }
}