/* ============================================================
   AD SLOTS
   La altura se reserva con --ad-h desde el primer render para que
   activar anuncios no provoque CLS (Cumulative Layout Shift).
   ============================================================ */

.ad-slot {
  /* --ad-h lo inyecta el macro segun la posicion (ver app/ads.py) */
  min-height: var(--ad-h, 250px);
  /* Tope de altura: el script de la red reescribe `min-height` en el elemento
     (con !important) cuando no tiene anuncio que servir. Sin este tope, dentro
     de un contenedor grid o flex el hueco se estira hasta ocupar toda la fila
     — se vieron 732px donde debian ser 250px. `max-height` no lo puede pisar
     un `min-height` inline, asi que el hueco queda acotado pase lo que pase. */
  max-height: calc(var(--ad-h, 250px) + 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  margin-block: 28px;
  padding: 10px;
  overflow: hidden;
  /* `contain` evita que un anuncio mal dimensionado empuje el layout. */
  contain: layout;
  /* En un contenedor grid/flex el hueco no debe estirarse a la altura de la
     fila: se queda en su tamaño propio. */
  align-self: start;
}

/* Etiqueta obligatoria: las politicas de AdSense exigen que el usuario pueda
   distinguir el anuncio del contenido. Discreta pero legible. */
.ad-slot__label {
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  line-height: 1;
}

.ad-slot__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.ad-slot ins.adsbygoogle {
  display: block;
  width: 100%;
}

/* El hueco del footer es mas bajo: un 728x90 no necesita 250px. */
.ad-slot--footer {
  min-height: var(--ad-h, 90px);
  margin-block: 20px;
}

/* Solo en desarrollo: marca donde van a caer los anuncios. */
.ad-slot--placeholder {
  border: 1px dashed var(--border, #e2e8f0);
  border-radius: var(--radius, 14px);
  color: var(--text-secondary, #64748b);
  background: transparent;
}

@media (max-width: 620px) {
  .ad-slot {
    margin-block: 20px;
    padding: 8px;
  }
}

/* El anuncio no debe tapar el resultado ni pegarse a los controles: si el
   elemento anterior es un boton o un formulario, se separa mas. */
form + .ad-slot,
.form-actions + .ad-slot {
  margin-top: 36px;
}