/* ============================================================
   Ticker de últimas noticias
   ============================================================ */

.nl-ticker-wrapper {
	width: 100%;
	background: var(--fondo, #fff);
	border-bottom: 1px solid var(--linea, #e8e2f0);
	display: flex;
	align-items: center;
	height: 36px;
	overflow: hidden;
	position: relative;
}

.nl-ticker-wrapper[hidden] { display: none; }

/* Badge "Últimas" fijo a la izquierda */
.nl-ticker-label {
	flex-shrink: 0;
	background: var(--leon-purpura, #5b2a86);
	color: #fff;
	font-family: var(--fuente-ui);
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 0 14px;
	height: 100%;
	display: flex;
	align-items: center;
	white-space: nowrap;
	position: relative;
	z-index: 2;
}

/* Degradado de transición badge → contenido */
.nl-ticker-label::after {
	content: '';
	position: absolute;
	right: -10px;
	top: 0;
	bottom: 0;
	width: 10px;
	background: linear-gradient(to right, var(--leon-purpura, #5b2a86), transparent);
}

/* Zona scrollable — overflow real para que drag y swipe funcionen */
.nl-ticker-scroll {
	flex: 1;
	overflow-x: scroll;
	overflow-y: hidden;
	height: 100%;
	position: relative;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Fade suave en los bordes */
	mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 32px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 32px), transparent 100%);
}

.nl-ticker-scroll::-webkit-scrollbar { display: none; }

/* Cursor mientras se arrastra */
.nl-ticker-scroll.nl-ticker-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Track — flex estático, sin animación CSS */
.nl-ticker-track {
	display: inline-flex;
	align-items: center;
	height: 100%;
	white-space: nowrap;
}

/* Ítem individual */
.nl-ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 0 4px;
	font-size: 12px;
	font-family: var(--fuente-ui);
	font-weight: 500;
	color: var(--tinta, #1a0a2e);
}

/* Separador entre items */
.nl-ticker-item::before {
	content: '·';
	font-size: 16px;
	line-height: 1;
	color: var(--leon-purpura, #5b2a86);
	opacity: 0.5;
	flex-shrink: 0;
}

.nl-ticker-item a {
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s;
}

.nl-ticker-item a:hover {
	color: var(--leon-purpura, #5b2a86);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Dark mode */
.nl-dark-mode .nl-ticker-wrapper {
	background: #16111f;
	border-color: #2d2040;
}

.nl-dark-mode .nl-ticker-item {
	color: #d4c9e8;
}

.nl-dark-mode .nl-ticker-item a:hover {
	color: #a87fd4;
}