/* ============================================
   ALERTAPBA — REBRANDING VISUAL v1.0
   Capa de modernización sobre alertapba.css
   No toca estructura, layout ni espaciados:
   solo color, degradados, sombras y radios,
   siguiendo el lenguaje del isotipo nuevo
   (rayo con degradado + halo hueso).
   ============================================ */

:root {
  /* Rojo alineado a la marca real del isotipo (antes #e50914) */
  --color-red:        #E12726;
  --color-red-bright: #FF6B45;
  --color-red-deep:   #B01E1D;

  --gradient-red:      linear-gradient(135deg, var(--color-red-bright) 0%, var(--color-red) 100%);
  --gradient-red-soft: linear-gradient(135deg, rgba(255,107,69,.16) 0%, rgba(225,39,38,.10) 100%);

  --shadow-glow:      0 4px 22px rgba(225,39,38,.32);
  --shadow-glow-soft: 0 2px 14px rgba(225,39,38,.16);
  --shadow-glow-lg:   0 8px 34px rgba(225,39,38,.28);

  --radius-pill: 999px;
  --radius-lg:   14px;
}

/* ============================================
   TAGS / PÍLDORAS — de sello cuadrado a chip suave
   ============================================ */
.tag,
.weekend-card__cat,
.sports-card__sport {
  background: var(--gradient-red) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-glow-soft);
  letter-spacing: .08em;
}

.mobile-nav__pill {
  border-radius: var(--radius-pill) !important;
  transition: border-color .2s, color .2s, background .2s;
}
.mobile-nav__pill--active {
  background: var(--gradient-red) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow-soft);
}

.article-tag {
  border-radius: var(--radius-pill) !important;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.article-tag:hover {
  box-shadow: var(--shadow-glow-soft);
}

/* ============================================
   BREAKING BAR — degradado en vez de rojo plano
   ============================================ */
.breaking-bar {
  background: var(--gradient-red) !important;
}

/* ============================================
   HEADER — borde con resplandor en vez de línea dura
   ============================================ */
.site-header {
  border-bottom: 1px solid rgba(225,39,38,.55) !important;
  box-shadow: 0 4px 24px rgba(225,39,38,.14);
}
.site-logo__icon {
  filter: drop-shadow(0 0 7px rgba(225,39,38,.5));
  transition: filter .2s;
}
.site-logo:hover .site-logo__icon {
  filter: drop-shadow(0 0 12px rgba(255,107,69,.7));
}
.site-logo__name span {
  background: var(--gradient-red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-nav a.active {
  color: var(--color-red-bright) !important;
  text-shadow: 0 0 14px rgba(225,39,38,.45);
}

/* ============================================
   LIVE DOT — con halo, sensación de pulso real
   ============================================ */
.live-dot {
  box-shadow: 0 0 8px rgba(225,39,38,.75);
}

/* ============================================
   URGENCY BAR — alert chip con degradado
   ============================================ */
.urgency-clima__alert {
  background: var(--gradient-red-soft) !important;
  border: 1px solid rgba(225,39,38,.3);
}
.urgency-transito__dot--red {
  box-shadow: 0 0 6px rgba(225,39,38,.7);
}

/* ============================================
   NÚMERO DE NOTICIAS — botón con profundidad
   ============================================ */
.numero-bar__btn {
  box-shadow: 0 2px 12px rgba(18,140,62,.25);
  transition: box-shadow .2s, transform .15s;
}
.numero-bar__btn:hover {
  box-shadow: 0 4px 20px rgba(18,140,62,.4);
  transform: translateY(-1px);
}

/* ============================================
   TARJETAS — radios más suaves, glow cálido en hover
   ============================================ */
.news-card,
.sports-card,
.weekend-card,
.popular-box,
.ad-box {
  border-radius: var(--radius-lg) !important;
}
.news-card__image,
.sports-card__image,
.weekend-card__image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.news-card:hover,
.sports-card:hover {
  box-shadow: 0 0 0 1px var(--color-red), var(--shadow-glow-lg) !important;
}
.weekend-card:hover {
  box-shadow: 0 0 0 1px rgba(225,39,38,.4), var(--shadow-glow) !important;
}

.hero-post {
  border-radius: var(--radius-lg) !important;
}
.hero-post__read {
  text-shadow: 0 0 12px rgba(225,39,38,.5);
}
.hero-post__live {
  text-shadow: 0 0 10px rgba(225,39,38,.5);
}

.sec-header__link {
  transition: text-shadow .2s;
}
.sec-header__link:hover {
  text-shadow: 0 0 12px rgba(225,39,38,.5);
}

/* ============================================
   ARTÍCULO — highlight con degradado sutil
   ============================================ */
.article-highlight {
  background: linear-gradient(90deg, rgba(225,39,38,.10), rgba(225,39,38,0) 65%), #130000;
  border-left: 3px solid var(--color-red);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.article-body h2 {
  background: var(--gradient-red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

/* ============================================
   BOTONES DE COMPARTIR — profundidad + radio suave
   ============================================ */
.share-btn {
  border-radius: var(--radius-lg) !important;
  transition: box-shadow .2s, transform .15s, opacity .15s;
}
.share-btn--wsp {
  box-shadow: 0 2px 12px rgba(18,140,62,.25);
}
.share-btn--wsp:hover {
  box-shadow: 0 4px 18px rgba(18,140,62,.4);
  transform: translateY(-1px);
  opacity: 1;
}
.share-btn--x:hover,
.share-btn--cp:hover {
  box-shadow: 0 2px 14px rgba(0,0,0,.4);
  transform: translateY(-1px);
  opacity: 1;
}

/* ============================================
   FOOTER — logo, número y redes con más calidez
   ============================================ */
.site-footer {
  border-top: none !important;
  box-shadow: inset 0 3px 0 0 var(--color-red), 0 -20px 40px rgba(225,39,38,.06);
}
.site-footer__logo-name span {
  background: var(--gradient-red);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-footer__red {
  border-radius: var(--radius-pill) !important;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.site-footer__red:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-soft);
}
.site-footer__numero {
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 2px 12px rgba(18,140,62,.18);
  transition: box-shadow .2s, transform .15s;
}
.site-footer__numero:hover {
  box-shadow: 0 4px 18px rgba(18,140,62,.32);
  transform: translateY(-1px);
}
.site-footer__datos,
.site-footer__afip {
  border-radius: var(--radius-lg) !important;
}
.grupo-plata-rayo {
  color: var(--color-red-bright);
  filter: drop-shadow(0 0 4px rgba(225,39,38,.6));
}

/* ============================================
   RADIO BUTTON — glow acorde al nuevo lenguaje
   ============================================ */
.radio-btn {
  border-color: rgba(225,39,38,.55) !important;
  transition: box-shadow .2s, transform .15s, background .2s, border-color .2s;
}
.radio-btn:hover {
  box-shadow: var(--shadow-glow-soft);
  transform: translateY(-1px);
  border-color: var(--color-red) !important;
}

/* ============================================
   FIX — banners reales (con imagen cargada desde
   Code Injection) no heredaban ninguna de las medidas
   pensadas para el placeholder: se renderizaban sueltos,
   sin max-width, dentro de contenedores sin límite —
   por eso se veían "gigantes" en escritorio. Ahora la
   pieza real usa las mismas clases .ad-box que ya tenían
   el tamaño resuelto para cada posición (responsive
   mobile/desktop incluido), y acá solo se neutraliza el
   look de "placeholder" (borde punteado, fondo) cuando
   hay una imagen real cargada.
   ============================================ */
.ad-box--live {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden;
  text-decoration: none;
}
.ad-box--live img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* La <aside> del sidebar no tenía el mismo resguardo que
   .main-layout > div, así que un banner de ancho fijo
   podía forzar el ancho de toda la columna del grid */
.main-layout > aside { min-width: 0; }
.radio-btn.playing {
  background: var(--gradient-red) !important;
  border-color: transparent !important;
}
.radio-btn__icon { color: var(--color-red-bright) !important; }
.radio-btn__label { color: var(--color-red-bright) !important; }

/* ============================================
   RESTO DE ROJOS SUELTOS — alinear al nuevo tono
   (mobile menu heredado, blockquote, scrollbar, selección)
   ============================================ */
.mobile-menu { border-bottom: 2px solid var(--color-red) !important; }
.article-body blockquote {
  border-left: 3px solid var(--color-red) !important;
  background: linear-gradient(90deg, rgba(225,39,38,.10), rgba(225,39,38,0) 65%), #130000 !important;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.article-body blockquote p { color: #e08a8a !important; }
.article-body a { color: var(--color-red-bright) !important; }
.article-body a:hover { color: var(--color-red) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--color-red) !important; }
::selection { background: var(--color-red) !important; color: #fff; }