/* ============================================
   ESTILOS PARA PUBLICIDAD - ADS.CSS
   Sistema completo de espacios publicitarios
   ============================================ */

/* Contenedor General de Anuncios */
.ad-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background: #f7fafc;
}

.ad-container.ad-top {
    position: sticky;
    top: 70px;
    z-index: 999;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
}

.ad-container.ad-before-footer {
    margin-top: 3rem;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

/* Banner Publicitario Base */
.ad-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border: 2px dashed #cbd5e0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.ad-banner:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Placeholder para mostrar dimensiones */
.ad-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #a0aec0;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

.ad-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #718096;
    margin-bottom: 8px;
    padding: 4px 12px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.ad-placeholder p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
}

/* ============================================
   FORMATOS ESTÁNDAR IAB
   ============================================ */

/* Leaderboard - 728x90 (Desktop) */
.ad-leaderboard {
    width: 728px;
    height: 90px;
    max-width: 100%;
}

/* Large Leaderboard - 970x90 (Desktop Grande) */
.ad-large-leaderboard {
    width: 970px;
    height: 90px;
    max-width: 100%;
}

/* Billboard - 970x250 (Desktop Grande) */
.ad-billboard {
    width: 970px;
    height: 250px;
    max-width: 100%;
}

/* Rectangle - 300x250 (Universal) */
.ad-rectangle {
    width: 300px;
    height: 250px;
}

/* Large Rectangle - 336x280 */
.ad-large-rectangle {
    width: 336px;
    height: 280px;
}

/* Skyscraper - 160x600 (Sidebar) */
.ad-skyscraper {
    width: 160px;
    height: 600px;
}

/* Half Page - 300x600 (Sidebar) */
.ad-half-page {
    width: 300px;
    height: 600px;
}

/* Mobile Banner - 320x50 */
.ad-mobile-banner {
    width: 320px;
    height: 50px;
    max-width: 100%;
}

/* Mobile Large - 320x100 */
.ad-mobile-large {
    width: 320px;
    height: 100px;
    max-width: 100%;
}

/* ============================================
   POSICIONAMIENTO ESPECÍFICO
   ============================================ */

/* Anuncios en contenido principal */
.ad-in-content {
    margin: 2rem auto;
    display: flex;
    justify-content: center;
}

.ad-in-content-article {
    margin: 2.5rem auto;
    display: flex;
    justify-content: center;
}

/* Anuncios In-Feed (entre artículos) */
.ad-in-feed {
    margin: 1rem 0;
    grid-column: 1;
}

/* Sidebar de Publicidad */
.ads-sidebar {
    display: none; /* Oculto por defecto en móvil */
}

.ad-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Widget de Ad en Sidebar de Artículos */
.sidebar-widget.ad-widget {
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.sidebar-widget.ad-widget .ad-banner {
    width: 100%;
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

@media (min-width: 1200px) {
    /* Mostrar sidebar de ads en desktop grande */
    .ads-sidebar {
        display: block;
    }
    
    /* Layout con sidebar */
    .content-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 180px;
        gap: 2rem;
        align-items: start;
    }
    
    /* Ajustar grid de featured para que quepa con el sidebar */
    .content-with-sidebar .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .content-with-sidebar .featured-card.large {
        grid-row: span 2;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    /* Desktop mediano - ocultar skyscraper pero mostrar rectangles */
    .ads-sidebar {
        display: block;
    }
    
    .content-with-sidebar {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 2rem;
    }
    
    .ad-skyscraper {
        display: none;
    }
    
    .content-with-sidebar .featured-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1023px) {
    /* Ocultar sidebar de ads en tablet */
    .ads-sidebar {
        display: none;
    }
    
    .content-with-sidebar {
        display: block;
    }
    
    /* Reducir tamaños de banners grandes */
    .ad-billboard,
    .ad-large-leaderboard {
        width: 728px;
        height: 90px;
    }
    
    .ad-billboard .ad-placeholder p {
        font-size: 12px;
    }
    
    /* Ocultar formatos muy grandes */
    .ad-half-page {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Ajustar leaderboards en tablet pequeño */
    .ad-leaderboard,
    .ad-billboard,
    .ad-large-leaderboard {
        width: 100%;
        max-width: 468px;
        height: 60px;
    }
    
    /* Centrar anuncios rectangle */
    .ad-rectangle,
    .ad-large-rectangle {
        margin: 1.5rem auto;
    }
    
    /* Sticky top más cerca */
    .ad-container.ad-top {
        top: 70px;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL
   ============================================ */

@media (max-width: 480px) {
    /* Mostrar solo anuncios móvil */
    .ad-mobile-only {
        display: flex !important;
    }
    
    /* Ocultar formatos desktop */
    .ad-leaderboard:not(.ad-mobile-only),
    .ad-billboard,
    .ad-large-leaderboard,
    .ad-skyscraper {
        display: none;
    }
    
    /* Ajustar rectangles para móvil */
    .ad-rectangle,
    .ad-large-rectangle {
        width: 300px;
        height: 250px;
        max-width: calc(100vw - 40px);
    }
    
    /* Container más compacto */
    .ad-container {
        padding: 15px 10px;
    }
    
    /* Sticky desactivado en móvil */
    .ad-container.ad-top {
        position: relative;
        top: 0;
    }
    
    /* In-feed ads ocupan todo el ancho */
    .ad-in-feed {
        width: 100%;
        max-width: 100%;
    }
    
    .ad-in-content,
    .ad-in-content-article {
        margin: 1.5rem 0;
    }
}

/* ============================================
   ESTADOS Y EFECTOS
   ============================================ */

/* Efecto de carga (opcional) */
.ad-banner.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Anuncio cerrado */
.ad-banner.closed {
    display: none;
}

/* Botón cerrar anuncio (opcional) */
.ad-close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.ad-close-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* ============================================
   INTEGRACIÓN CON GOOGLE ADSENSE
   ============================================ */

/* Wrapper para Google AdSense */
.google-ad {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 90px;
    background: transparent;
}

/* Asegurar que los ads de Google se vean bien */
ins.adsbygoogle {
    display: block;
    background: transparent;
}

/* ============================================
   MODO OSCURO (OPCIONAL)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .ad-banner {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .ad-placeholder {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    }
    
    .ad-label {
        background: #1a202c;
        border-color: #4a5568;
        color: #a0aec0;
    }
    
    .ad-placeholder p {
        color: #cbd5e0;
    }
}

/* ============================================
   UTILIDADES
   ============================================ */

/* Ocultar elemento solo en móvil */
@media (min-width: 481px) {
    .ad-mobile-only {
        display: none !important;
    }
}

/* Ocultar elemento solo en desktop */
@media (max-width: 1023px) {
    .ad-desktop-only {
        display: none !important;
    }
}

/* Espaciado adicional para separar de contenido */
.ad-spacer {
    margin: 3rem 0;
}

/* Anuncio destacado con borde */
.ad-featured {
    border: 3px solid #667eea;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

/* ============================================
   NOTAS PARA IMPLEMENTACIÓN REAL
   ============================================ */

/*
PARA USAR CON GOOGLE ADSENSE:
1. Reemplaza .ad-placeholder con el código de AdSense
2. Mantén las clases de tamaño (.ad-leaderboard, etc.)
3. Ejemplo:

<div class="ad-banner ad-leaderboard">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
         data-ad-slot="XXXXXXXXXX"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

FORMATOS RECOMENDADOS POR UBICACIÓN:
- Header Sticky: Leaderboard (728x90)
- Sidebar: Rectangle (300x250) o Half Page (300x600)
- Entre Contenido: Rectangle (300x250) o Large Rectangle (336x280)
- Entre Secciones: Billboard (970x250) o Large Leaderboard (970x90)
- Móvil: Mobile Banner (320x50) o Mobile Large (320x100)
- In-Feed: Rectangle (300x250)

MEJORES PRÁCTICAS:
- No más de 3-4 anuncios visibles al mismo tiempo
- Mantén distancia de 600-800px entre anuncios grandes
- Los anuncios sticky deben ser pequeños (leaderboard máximo)
- Siempre tener versión móvil responsive
- Etiqueta claramente con "PUBLICIDAD" o "Anuncio"
*/