/**
 * ads-styles.css
 * Estilos para el contenedor del anuncio de AdSense para asegurar el autoajuste.
 */

/* Contenedor general del anuncio */
.ad-container {
    /* Ocupa el 100% del ancho disponible en el contenedor padre (ej. el cuerpo del artículo) */
    width: 100%;
    
    /* Espacio superior e inferior para separar el anuncio del texto */
    margin: 20px auto; 
    
    /* Pequeño padding lateral para evitar que el anuncio toque los bordes en contenedores estrechos */
    padding: 0 10px; 
    
    /* Esconde cualquier contenido que pueda desbordarse (aunque AdSense lo maneja bien) */
    overflow: hidden; 
    
    /* Centra el anuncio si es más estrecho que el contenedor */
    text-align: center; 
}

/* El elemento <ins> de AdSense */
.ad-container .adsbygoogle {
    /* Debe ser display: block para que pueda tomar el ancho completo */
    display: block !important; 
    
    /* CLAVE: Se necesita una dimensión inicial para que AdSense pueda calcular el tamaño. */
    min-width: 250px; /* Ancho mínimo recomendado por Google */
    height: 250px;    /* Altura inicial de referencia (Google la ajustará) */
    
    /* Asegura que no exceda el contenedor padre */
    max-width: 100%; 
    
    /* Centra el elemento INS dentro del contenedor DIV */
    margin: 0 auto;  
}

/* Media Query para dispositivos móviles muy pequeños (opcional, pero mejora la experiencia) */
@media (max-width: 480px) {
    .ad-container .adsbygoogle {
        /* En pantallas muy pequeñas, fuerza el ancho completo si no hay espacio */
        min-width: 100% !important; 
    }
}