/* =========================================================================
   ADS — sistema de slots publicitarios
   Estilos del placeholder editorial sobrio + AdSense / HTML custom slots.
   Se carga DESPUÉS de category-premium.css y override puntual del .elc-pauta.
   ========================================================================= */

/* === Wrapper del slot ===
   Container neutro a 100% del parent. Centrado y max-width van al __inner. */
.elc-pauta {
    position: relative;
    margin: 32px auto;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: transparent;
    border: none;
}

/* Etiqueta "Publicidad" superior */
.elc-pauta__label {
    display: block;
    font-family: var(--elc-font-sans, 'Inter', sans-serif);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 0 0 8px;
    line-height: 1;
}

/* === Caja interior centrada con max-width por tamaño de slot ===
   El __inner es el que define el tamaño real del aviso y se centra
   horizontalmente vía margin auto. */
.elc-pauta__inner {
    margin: 0 auto;
    padding: 20px 16px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
}

/* === Placeholder editorial sobrio ===
   Texto del tamaño centrado con un detalle de nota debajo si hay warning. */
.elc-pauta__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-family: var(--elc-font-sans, 'Inter', sans-serif);
    color: #b0b3b8;
    text-align: center;
}
.elc-pauta__placeholder-size {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #b0b3b8;
}
.elc-pauta__placeholder-note {
    font-size: 11px;
    font-weight: 500;
    color: #9ca3af;
    font-style: italic;
}

/* === Warning para admins ===
   Cuando provider=adsense pero falta pub_id o slot_id.
   Solo visible para users con manage_options. */
.elc-pauta__placeholder--warning {
    color: #c2723b;
}
.elc-pauta__placeholder--warning .elc-pauta__placeholder-size {
    color: #c2723b;
}
.elc-pauta__placeholder--warning .elc-pauta__placeholder-note {
    color: #c2723b;
    font-style: italic;
}

/* === Dimensionado del __inner por tamaño del slot ===
   max-width limita el ancho del placeholder al tamaño anunciado.
   min-height reserva el espacio vertical (anti-CLS). */
.elc-pauta[data-pauta-size="970x90"]  .elc-pauta__inner { max-width: 970px; min-height: 90px; }
.elc-pauta[data-pauta-size="970x250"] .elc-pauta__inner { max-width: 970px; min-height: 250px; }
.elc-pauta[data-pauta-size="728x90"]  .elc-pauta__inner { max-width: 728px; min-height: 90px; }
.elc-pauta[data-pauta-size="300x600"] .elc-pauta__inner { max-width: 300px; min-height: 600px; }
.elc-pauta[data-pauta-size="300x250"] .elc-pauta__inner { max-width: 300px; min-height: 250px; }
.elc-pauta[data-pauta-size="320x50"]  .elc-pauta__inner { max-width: 320px; min-height: 50px; }

/* === AdSense real ===
   Cuando provider=adsense con pub+slot configurados, el <ins> de adsbygoogle
   ocupa el espacio anunciado por sí solo. Sin override de styles. */
.elc-pauta[data-pauta-provider="adsense"] .adsbygoogle {
    margin: 0 auto;
    display: block;
}

/* === HTML custom ===
   Cuando provider=html, el contenedor es transparente y el HTML pegado
   define su propio look. */
.elc-pauta[data-pauta-provider="html"] {
    border: none;
    padding: 0;
    background: transparent;
}
.elc-pauta[data-pauta-provider="html"] .elc-pauta__label {
    margin-bottom: 6px;
}

/* === Posicionamiento — heredado de category-premium.css ===
   Solo ajustamos los max-widths para garantizar el tamaño correcto. */
.elc-pauta--banner-top {
    max-width: 970px;
    margin: 0 auto 36px;
}
.elc-pauta--instream {
    max-width: 728px;
    margin: 32px auto;
}
.elc-pauta--sidebar {
    margin: 0;
    width: 300px;
    max-width: 100%;
}

/* === Mobile slots — visible solo <768px === */
.elc-pauta--mobile-top,
.elc-pauta--mobile-mid {
    display: none;
}
@media (max-width: 768px) {
    .elc-pauta--banner-top,
    .elc-pauta--instream {
        display: none;
    }
    .elc-pauta--mobile-top,
    .elc-pauta--mobile-mid {
        display: block;
        max-width: 320px;
        margin: 20px auto;
    }
}

/* === Responsive por tipo de slot ===
   Slots desktop ocultos en mobile, mobile ocultos en desktop.
   IMPORTANTE: category-premium.css tiene reglas más específicas por modifier
   class (.elc-pauta--banner-top, --instream, --mobile-top, etc) que MANDAN
   sobre estas — categorías no se ven afectadas. */
@media (max-width: 768px) {
    .elc-pauta[data-pauta-type="desktop"] { display: none; }
}
@media (min-width: 769px) {
    .elc-pauta[data-pauta-type="mobile"] { display: none; }
}

/* === Dark mode === */
html.dark .elc-pauta__inner {
    background: #131319;
    border-color: #1f1f24;
}
html.dark .elc-pauta__label {
    color: #5a5a5f;
}
html.dark .elc-pauta__placeholder,
html.dark .elc-pauta__placeholder-size {
    color: #5a5a5f;
}
html.dark .elc-pauta__placeholder--warning,
html.dark .elc-pauta__placeholder--warning .elc-pauta__placeholder-size,
html.dark .elc-pauta__placeholder--warning .elc-pauta__placeholder-note {
    color: #e0a070;
}