/* ============================================================
   Voces PTM Noticias — estilos propios del portal de noticias
   (TV en vivo, franja de última hora, zonas de anuncio, portada,
   artículo y barra inferior móvil). Usa las mismas variables CSS
   que assets/css/onair.css y assets/css/variaciones.css.
   ============================================================ */

/* ------------------------------------------------------------
   Reproductor de TV — mini-reproductor flotante
   ------------------------------------------------------------ */
.noticias-tv {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: min(360px, calc(100vw - 40px));
    background: #000;
    border-radius: var(--onair-radius, 10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
    z-index: 9999;
}
body.onair-has-bar .noticias-tv { bottom: calc(20px + 74px); }

.noticias-tv__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #14181c;
    color: #fff;
}
.noticias-tv__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--onair-accent);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .06em;
    padding: 3px 7px;
    border-radius: 3px;
    flex: none;
}
.noticias-tv__punto {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: noticias-pulse 1.6s ease-in-out infinite;
}
@keyframes noticias-pulse {
    0%, 100% { opacity: 1; } 50% { opacity: .35; }
}
.noticias-tv__nombre {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.noticias-tv__min, .noticias-tv__close {
    flex: none;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.noticias-tv__min:hover, .noticias-tv__close:hover { background: rgba(255, 255, 255, .22); }

.noticias-tv__body { aspect-ratio: 16 / 9; }
.noticias-tv__video { display: block; width: 100%; height: 100%; background: #000; }

.noticias-tv.is-minimized .noticias-tv__body {
    max-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
}

@media (max-width: 480px) {
    .noticias-tv { left: 12px; right: 12px; width: auto; bottom: 12px; }
}

/* Tarjeta de TV en vivo (barra lateral de la portada) */
.noticias-tv-card {
    background: var(--onair-surface, #fff);
    border-radius: var(--onair-radius, 14px);
    box-shadow: var(--onair-shadow, none);
    overflow: hidden;
}
.noticias-tv-card__arte {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--onair-ink) center/cover no-repeat;
}
.noticias-tv-card__arte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.noticias-tv-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--onair-accent);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 3px;
}
.noticias-tv-card__panel { padding: 16px; }
.noticias-tv-card__titulo { margin: 0 0 6px; font-family: var(--onair-head); font-size: 20px; }
.noticias-tv-card__pie { margin: 0 0 14px; color: var(--onair-muted); font-size: 14px; }
.noticias-tv-card__panel .onair-btn { width: 100%; justify-content: center; padding: 12px 20px; }

/* ------------------------------------------------------------
   Franja de última hora (portada)
   ------------------------------------------------------------ */
.noticias-ticker {
    display: flex;
    align-items: center;
    background: var(--onair-ink);
    color: #fff;
    overflow: hidden;
}
.noticias-ticker__tag {
    flex: none;
    display: flex; align-items: center; gap: 6px;
    background: var(--onair-accent);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
    padding: 10px 16px;
    white-space: nowrap;
}
.noticias-ticker__track {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.noticias-ticker__list {
    display: inline-flex;
    gap: 48px;
    padding-inline: 24px;
    animation: noticias-ticker-scroll linear infinite;
    animation-duration: var(--noticias-ticker-duration, 30s);
}
.noticias-ticker:hover .noticias-ticker__list { animation-play-state: paused; }
.noticias-ticker__list a { color: #fff; text-decoration: none; font-size: 14px; }
.noticias-ticker__list a:hover { text-decoration: underline; }
@keyframes noticias-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .noticias-ticker__list { animation: none; overflow-x: auto; }
}

/* ------------------------------------------------------------
   Zonas de banner publicitario
   ------------------------------------------------------------ */
.noticias-adzone { margin-block: 24px; text-align: center; }
.noticias-adzone__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 90px;
    border: 2px dashed var(--onair-line);
    border-radius: var(--onair-radius, 10px);
    color: var(--onair-muted);
    font-size: 13px;
    padding: 16px;
}
.noticias-adzone__empty strong { color: var(--onair-ink); font-size: 14px; }

/* ------------------------------------------------------------
   Portada de noticias
   ------------------------------------------------------------ */
.noticias-home { display: flex; flex-direction: column; gap: 32px; padding-block: 32px; }
.noticias-home__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}
.noticias-home__aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 90px; }
.noticias-home__aside .widget { background: var(--onair-surface, #fff); border-radius: var(--onair-radius, 14px); box-shadow: var(--onair-shadow, none); padding: 18px; }

.noticias-categoria { margin-block: 8px 0; }
.noticias-categoria + .noticias-adzone { margin-top: 0; }

.noticias-home__grid--sin-lateral { grid-template-columns: 1fr; }

@media (max-width: 960px) {
    .noticias-home__grid { grid-template-columns: 1fr; }
    .noticias-home__aside { position: static; }
}

/* ------------------------------------------------------------
   Más leídas
   ------------------------------------------------------------ */
.noticias-popular__list { list-style: none; margin: 0; padding: 0; counter-reset: noticias-popular; display: flex; flex-direction: column; gap: 14px; }
.noticias-popular__item { display: flex; align-items: baseline; gap: 12px; counter-increment: noticias-popular; }
.noticias-popular__item::before {
    content: counter(noticias-popular);
    font-family: var(--onair-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--onair-accent);
    flex: none;
    width: 1.4em;
}
.noticias-popular__item a { color: inherit; text-decoration: none; font-weight: 600; line-height: 1.35; }
.noticias-popular__item a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Artículo: byline, tiempo de lectura, compartir, relacionadas
   ------------------------------------------------------------ */
.noticias-byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
    color: var(--onair-muted);
    font-size: 14px;
    margin-block: 10px 20px;
}
.noticias-byline__item { display: inline-flex; align-items: center; gap: 5px; }

.noticias-share { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 28px; }
.noticias-share__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--onair-line);
    background: var(--onair-surface, #fff);
    color: var(--onair-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.noticias-share__btn:hover { border-color: var(--onair-accent); color: var(--onair-accent); }
.noticias-share__btn.is-copied { border-color: var(--onair-primary); color: var(--onair-primary); }

.noticias-related { margin-block: 40px; }

/* ------------------------------------------------------------
   Barra inferior fija en móvil
   ------------------------------------------------------------ */
.noticias-mobilenav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    background: var(--onair-surface, #fff);
    border-top: 1px solid var(--onair-line);
    box-shadow: 0 -4px 16px rgba(12, 17, 22, .08);
}
.noticias-mobilenav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex;
}
.noticias-mobilenav__link {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px 10px;
    color: var(--onair-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    border: 0;
}
.noticias-mobilenav__link.is-active,
.noticias-mobilenav__link:hover { color: var(--onair-accent); }

@media (max-width: 767px) {
    .noticias-mobilenav { display: block; }
    body.onair-has-bar .noticias-mobilenav { bottom: 74px; }
    body { padding-bottom: 56px; }
    body.onair-has-bar { padding-bottom: 0; }
}