/* ============================================================
   ECNEWS · CSS personalizado (no-Tailwind)
   ============================================================ */

/* Animación del Teleprompter / Ticker */
.ticker-wrap { width: 100%; overflow: hidden; position: relative; white-space: nowrap; }
.ticker-content { display: inline-block; padding-left: 100%; animation: ticker 40s linear infinite; }
.ticker-content:hover { animation-play-state: paused; }
@keyframes ticker {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Animación para la barra de progreso de la intranet */
@keyframes loadingBar {
    0% { width: 0%; }
    40% { width: 45%; }
    80% { width: 90%; }
    100% { width: 100%; }
}

/* Ocultar el scrollbar en el panel de ajustes para mantenerlo limpio */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Badges de sesgo político (Ground News style) */
.bias-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 9999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.4; }
.bias-left { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.dark .bias-left { background: rgba(30,64,175,0.3); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
.bias-center-left { background: #e0f2fe; color: #0284c7; border: 1px solid #7dd3fc; }
.dark .bias-center-left { background: rgba(14,116,144,0.3); color: #7dd3fc; border-color: rgba(56,189,248,0.3); }
.bias-center { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.dark .bias-center { background: rgba(71,85,105,0.3); color: #94a3b8; border-color: rgba(100,116,139,0.4); }
.bias-center-right { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }
.dark .bias-center-right { background: rgba(185,28,28,0.3); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.bias-right { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; }
.dark .bias-right { background: rgba(153,27,27,0.3); color: #f87171; border-color: rgba(248,113,113,0.3); }

/* Badge de fact-check */
.fact-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.fact-high { background: #dcfce7; color: #16a34a; }
.dark .fact-high { background: rgba(22,163,74,0.25); color: #86efac; }
.fact-medium { background: #fef9c3; color: #ca8a04; }
.dark .fact-medium { background: rgba(202,138,4,0.25); color: #fde047; }
.fact-low { background: #fee2e2; color: #dc2626; }
.dark .fact-low { background: rgba(220,38,38,0.25); color: #fca5a5; }

/* Barra de distribución */
.dist-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; min-width: 4px; }
.dist-bar-left { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.dist-bar-center { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.dist-bar-right { background: linear-gradient(90deg, #f87171, #ef4444); }

/* Animación para blindspot pulse */
@keyframes blindspot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.blindspot-dot { animation: blindspot-pulse 2s ease-in-out infinite; }

/* Ocultar tarjetas filtradas */
.card-hidden { display: none !important; }

/* Animación de entrada para tarjetas de feed visual */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Indicador de transmisión en vivo (página envivo.html) */
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: #ffffff;
    animation: livePulse 1.4s ease-in-out infinite;
}

/* Reproductor HLS embebido en la tarjeta de canal */
.live-stage video,
.live-stage iframe { background: #000; }
.live-stage video::-webkit-media-controls-enclosure { border-radius: 0; }