/* ═══════════════════════════════════════════════════════════════
   TestGuardia.cl — Estilos de anuncios
   ---------------------------------------------------------------
   Los contenedores nacen OCULTOS. Solo tg-anuncios.js les pone la
   clase .tg-ad--on cuando corresponde. Así, mientras el interruptor
   esté apagado, no queda ni un hueco en blanco en ninguna página.
   ═══════════════════════════════════════════════════════════════ */

.tg-ad{ display:none }

.tg-ad--on{
  display:block;
  max-width:860px;
  margin:40px auto;          /* separación generosa: evita clics accidentales */
  padding:0 18px;
  text-align:center;
  clear:both;
}

/* Etiqueta "Publicidad". Google exige que, si se etiqueta, el texto
   sea inequívoco. "Publicidad" y "Anuncios" están permitidos.
   Nunca poner "Enlaces útiles", "Recomendado" ni similares. */
.tg-ad__label{
  font-size:11px;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:6px;
  line-height:1;
  user-select:none;
}

.tg-ad ins{ display:block; margin:0 auto }

/* Sin anuncio que mostrar: el hueco se recoge por completo.
   Lo pone tg-anuncios.js. Sin esta regla quedaría en pantalla un
   espacio vacío con la etiqueta "Publicidad" y nada dentro. */
.tg-ad--vacio{
  display:none !important;
  min-height:0 !important;
  margin:0 !important;
}

/* ── Alturas reservadas ───────────────────────────────────────────
   Se reserva el alto ANTES de que cargue el anuncio para que no
   empuje el contenido hacia abajo (protege el CLS de Core Web Vitals,
   que ya te importa por SEO). */

.tg-ad--banner   { min-height:126px }   /* 90 de anuncio + etiqueta + aire */
.tg-ad--articulo { min-height:286px }
.tg-ad--resultado{ min-height:286px }
.tg-ad--multiplex{ min-height:436px }

.tg-ad--banner ins   { max-height:90px;  overflow:hidden }
.tg-ad--articulo ins { min-height:250px }
.tg-ad--resultado ins{ min-height:250px }
.tg-ad--multiplex ins{ min-height:400px }

/* ── Móvil: el banner se comporta como el de la app ──────────────── */
@media (max-width:600px){
  .tg-ad--on{ margin:32px auto }
  .tg-ad--banner    { min-height:86px }
  .tg-ad--banner ins{ max-height:50px; overflow:hidden }
  .tg-ad--articulo, .tg-ad--resultado { min-height:266px }
}

/* ── Nunca dentro de un juego en curso ────────────────────────────
   Refuerzo en CSS de lo que tg-anuncios.js ya impide en JS.
   Un anuncio junto a los botones de un juego = clics accidentales
   = suspensión de la cuenta de AdSense. Es el riesgo más serio. */
.arena .tg-ad,
.games-grid .tg-ad{ display:none !important }

/* ── Páginas sin publicidad ───────────────────────────────────────
   premium.html ya trae su propia regla inline; esto la respalda. */
body.sin-anuncios .tg-ad{ display:none !important }

/* ── Impresión ────────────────────────────────────────────────────*/
@media print{ .tg-ad{ display:none !important } }