/* ═══════════════════════════════════════════════════════════════════
   AUGC Ad Manager — Estilos
   Diseño no intrusivo: etiqueta visible, fácil de cerrar, sin engaños.
═══════════════════════════════════════════════════════════════════ */

/* ── Etiqueta "Publicidad" ─────────────────────────────────────── */
.ad-label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    line-height: 1;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   BANNERS EMERGENTES (superior e inferior)

   Banner:      div full-width, fondo blanco
   Creatividad: imagen centrada con anchura mínima responsive
   ══════════════════════════════════════════════════════════════════ */

/* Banner — contenedor full-width, overflow visible para el botón × */
#ad-banner-bottom,
#ad-top-bar {
    overflow: visible !important;
    background: #fff;
}

/* Creatividad — anchura fija según dispositivo, centrada */
#ad-banner-bottom img,
#ad-top-bar img {
    display: block;
    margin: 0 auto;
    width: 980px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    #ad-banner-bottom img,
    #ad-top-bar img {
        width: 450px;
    }
}

@media (max-width: 480px) {
    #ad-banner-bottom img,
    #ad-top-bar img {
        width: 320px;
    }
}

/* ── Anuncio inline entre párrafos ────────────────────────────── */
.ad-inline {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 0;
    text-align: center;
}

.ad-inline .ad-label {
    text-align: left;
    margin-bottom: 8px;
}

.ad-inline img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

/* ── Slots en plantillas ───────────────────────────────────────── */
[data-ad-slot] {
    display: block;
    min-height: 0;
    text-align: center;
}

[data-ad-slot]:empty {
    display: none;
}

.ad-slot-inner img {
    max-width: 100%;
    height: auto;
}

/* ── Hover sutil para todos los anuncios ──────────────────────── */
.ad-banner-inner,
.ad-inline-inner,
.ad-slot-inner {
    transition: opacity 0.15s ease;
}

.ad-banner-inner:hover,
.ad-inline-inner:hover,
.ad-slot-inner:hover {
    opacity: 0.9;
}