/**
 * Estilos de Publicidad y Video Central - El Cotorreo Global
 * Responsive: movil, tablet y escritorio.
 *
 * @package Digital Newspaper
 */

/* ================================================================
   CONTENEDOR BASE DE PUBLICIDAD
   ================================================================ */
.el-cotorreo-pub-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
    clear: both;
    overflow: hidden;
}
.el-cotorreo-pub-area .widget-publicidad-titulo { display: none; }
.el-cotorreo-pub-area .widget-publicidad {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-cotorreo-pub-area img,
.el-cotorreo-pub-area .digital-newspaper-advertisement-block img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ================================================================
   VARIANTES POR POSICION
   ================================================================ */
.pub-leaderboard, .pub-horizontal { padding: 8px 0; }
.pub-billboard { padding: 10px 0; }
.pub-rectangle { padding: 8px 0; max-width: 320px; margin: 0 auto; }
.pub-entre-noticias-wrap {
    padding: 12px 0;
    margin: 10px 0;
    border-top: 1px solid rgba(0,0,0,.06);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pub-area-pub-barra-superior { margin-bottom: 4px; }
.pub-area-pub-antes-contenido { margin-bottom: 12px; }
.pub-area-pub-footer-top { padding: 14px 0; background: rgba(0,0,0,.04); }
.pub-area-pub-despues-articulo {
    margin: 20px 0;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.pub-area-pub-antes-comentarios { margin: 16px auto; }
.pub-area-pub-popup { display: none; }

/* ================================================================
   BARRA STICKY
   ================================================================ */
.pub-sticky-container {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 99999;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,.15);
    padding: 6px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.pub-sticky-cerrar {
    position: absolute;
    top: 4px; right: 8px;
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 1;
    transition: background .2s;
}
.pub-sticky-cerrar:hover { background: rgba(0,0,0,.1); color: #000; }

/* ================================================================
   VIDEO CENTRAL
   ================================================================ */
.el-cotorreo-video-central {
    padding: 30px 0 20px;
    background: transparent;
    clear: both;
}
.ec-video-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.ec-video-titulo {
    text-align: center;
    margin-bottom: 16px;
    width: 100%;
}

/* Contenedor responsivo 16:9 para iframes (YouTube, Vimeo...) */
.ec-video-contenedor {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}
.ec-video-oembed-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.ec-video-oembed-wrap iframe,
.ec-video-oembed-wrap object,
.ec-video-oembed-wrap embed {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    border-radius: 6px;
}

/* Video local .mp4 */
.ec-video-player {
    width: 100%;
    max-width: 860px;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
    background: #000;
}

/* Descripcion debajo del video */
.ec-video-descripcion {
    margin-top: 14px;
    text-align: center;
    font-size: 15px;
    color: #555;
    max-width: 700px;
    line-height: 1.6;
}

/* ================================================================
   MODO OSCURO
   ================================================================ */
.dark_bk .el-cotorreo-pub-area,
.dark_bk .pub-area-pub-footer-top { background: transparent; }
.dark_bk .ec-video-descripcion { color: #bbb; }
.dark_bk .pub-sticky-container { background: #1a1a1a; }

/* ================================================================
   RESPONSIVO
   ================================================================ */

/* Tablet (<=1024px) */
@media (max-width: 1024px) {
    .pub-billboard { overflow-x: auto; }
    .pub-area-pub-footer-top img { max-width: 728px; }
    .ec-video-inner { max-width: 98%; }
}

/* Tablet pequeña / movil grande (<=768px) */
@media (max-width: 768px) {
    .pub-leaderboard img, .pub-horizontal img { max-width: 468px; }
    .pub-rectangle { max-width: 300px; }
    .pub-sticky-container { padding: 4px 8px; }
    .pub-area-pub-barra-superior,
    .pub-area-pub-antes-contenido,
    .pub-entre-noticias-wrap,
    .pub-area-pub-footer-top,
    .pub-area-pub-footer-bottom { padding: 6px 0; }
    .el-cotorreo-video-central { padding: 20px 0 14px; }
    .ec-video-player { border-radius: 4px; }
    .ec-video-oembed-wrap { border-radius: 4px; }
}

/* Movil pequeno (<=480px) */
@media (max-width: 480px) {
    .pub-leaderboard img, .pub-horizontal img { max-width: 100%; }
    .pub-area-pub-barra-superior img,
    .pub-area-pub-footer-top img,
    .pub-area-pub-footer-bottom img { max-width: 100%; }
    .pub-sticky-container { min-height: 56px; }
    .el-cotorreo-video-central { padding: 14px 0 10px; }
    .ec-video-descripcion { font-size: 14px; }
}

/* Sin anuncios al imprimir */
@media print {
    .el-cotorreo-pub-area,
    .pub-sticky-container,
    .el-cotorreo-video-central { display: none !important; }
}

/* ================================================================
   PUBLICIDAD 0 — ENCIMA DE CABECERA
   Aparece por encima del header/menu principal en todas las páginas.
   ================================================================ */
.pub-encima-cabecera-wrap {
    background: #f5f5f5;
    border-bottom: 1px solid rgba(0,0,0,.07);
    padding: 8px 0;
    text-align: center;
    width: 100%;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pub-encima-cabecera-wrap .widget-publicidad {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pub-encima-cabecera-wrap img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* Modo oscuro */
.dark_bk .pub-encima-cabecera-wrap {
    background: #111;
    border-bottom-color: rgba(255,255,255,.07);
}
/* Responsive */
@media (max-width: 768px) {
    .pub-encima-cabecera-wrap { padding: 5px 0; }
    .pub-encima-cabecera-wrap img { max-width: 468px; }
}
@media (max-width: 480px) {
    .pub-encima-cabecera-wrap img { max-width: 100%; }
}

/* ================================================================
   WIDGET: EL COTORREO – REDES SOCIALES CON URL EDITABLES
   ================================================================ */
.ec-social-links-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Estilo base de cada botón */
.ec-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: background .2s, transform .15s, opacity .2s;
    line-height: 1;
    font-size: 15px;
    color: #fff;
    background-color: var(--ec-social-color, #555);
}
.ec-social-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
    color: #fff;
}
.ec-social-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Estilo: círculo */
.ec-social-style-circle .ec-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.ec-social-style-circle .ec-social-label { display: none; }

/* Estilo: cuadrado */
.ec-social-style-square .ec-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}
.ec-social-style-square .ec-social-label { display: none; }

/* Estilo: píldora */
.ec-social-style-pill .ec-social-btn {
    padding: 7px 14px;
    border-radius: 50px;
}

/* Responsive */
@media (max-width: 480px) {
    .ec-social-btn { font-size: 14px; }
    .ec-social-style-circle .ec-social-btn,
    .ec-social-style-square .ec-social-btn { width: 32px; height: 32px; }
}