/*
 * AI Publisher Theme — Ads CSS
 *
 * IMPORTANTE: Los min-height aquí definen el espacio RESERVADO para cada
 * posición publicitaria ANTES de que AdSense cargue. Son el mecanismo
 * principal para evitar que los anuncios empujen el contenido (CLS).
 *
 * Los valores corresponden a los formatos estándar de Google AdSense.
 * Si usas formatos personalizados distintos, ajusta estos valores.
 *
 * NO reducir estos valores por debajo del tamaño real del anuncio.
 */

/* ─── Contenedor base ──────────────────────────────────────────────────────── */
.ai-ad-slot {
    display: block;
    width: 100%;
    min-height: 90px;       /* Banner horizontal mínimo (320×50 en móvil) */
    overflow: hidden;
    contain: layout;        /* Evita que el anuncio afecte el layout exterior */
    text-align: center;
    position: relative;
    margin: 10px 0;
    box-sizing: border-box;
    clear: both;
}

/* ─── Etiqueta "Publicidad" ────────────────────────────────────────────────── */
.ai-ad-label {
    display: block;
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* ─── Banners horizontales (728×90 / 970×90 desktop / 320×50 móvil) ─────── */
/* Posiciones: encima del header, debajo del header, antes del footer */
.ai-ad-slot.ai-ad-home_top_ad,
.ai-ad-slot.ai-ad-global_before_header,
.ai-ad-slot.ai-ad-global_after_header,
.ai-ad-slot.ai-ad-global_before_footer,
.ai-ad-slot.ai-ad-single_before_title {
    min-height: 90px;
}

/* ─── Rectángulos / cuadrados (300×250) — dentro del contenido ──────────── */
/* Posiciones: antes del loop, después del primer artículo, en artículo */
.ai-ad-slot.ai-ad-home_before_loop,
.ai-ad-slot.ai-ad-home_after_first,
.ai-ad-slot.ai-ad-single_after_title,
.ai-ad-slot.ai-ad-single_before_thumb,
.ai-ad-slot.ai-ad-single_after_thumb,
.ai-ad-slot.ai-ad-single_after_content,
.ai-ad-slot.ai-ad-single_before_related {
    min-height: 250px;
}

/* ─── Sidebar derecho (300×250 o 300×600) ───────────────────────────────── */
.ai-ad-slot.ai-ad-single_sidebar_right,
.ai-ad-slot.ai-ad-home_sidebar_right,
.ai-ad-slot.ai-ad-archive_sidebar_right {
    min-height: 250px;
    max-width: 300px;
    margin: 0 auto;
}

/* ─── Sidebar izquierdo — Skyscraper (160×600) ──────────────────────────── */
.ai-ad-slot.ai-ad-sidebar_left_top,
.ai-ad-slot.ai-ad-sidebar_left_bottom {
    min-height: 400px;
    max-width: 200px;
    margin: 0 auto;
}

/* ─── Adaptación móvil ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* En móvil los banners horizontales son 320×50 como mínimo */
    .ai-ad-slot.ai-ad-home_top_ad,
    .ai-ad-slot.ai-ad-global_before_header,
    .ai-ad-slot.ai-ad-global_after_header,
    .ai-ad-slot.ai-ad-global_before_footer,
    .ai-ad-slot.ai-ad-single_before_title {
        min-height: 100px;
    }

    /* Rectángulos en móvil pueden ser más pequeños */
    .ai-ad-slot {
        max-width: 100%;
    }
}

/* ─── Control de visibilidad por dispositivo ─────────────────────────────── */
@media (max-width: 1023px) {
    .ai-desktop-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .ai-mobile-only {
        display: none !important;
    }
}

/* ─── Anuncio flotante / sticky en la parte inferior (móvil) ─────────────── */
.ai-ad-mobile_sticky_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 8px 10px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
    /* contain:layout NO aplicado aquí porque es fixed y no afecta el flujo */
}

/* ─── Botón de cierre para el sticky ────────────────────────────────────── */
.ai-close-sticky {
    position: absolute;
    top: -30px;
    right: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50% 50% 0 0;
    border-bottom: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}

.ai-close-sticky:hover {
    background: #f4f4f4;
}

/* ─── Vista previa para administradores ──────────────────────────────────── */
.admin-bar .ai-ad-slot:empty {
    border: 1px dashed #ccc;
    background: #f9f9f9;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-bar .ai-ad-slot:empty::before {
    content: "Espacio para anuncio: " attr(class);
    font-size: 12px;
    color: #888;
}

/* ─── Wrapper de anuncios dentro del blog grid ───────────────────────────── */
.ai-grid-ad-wrapper {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 100px;
    contain: layout;
}