/**
 * FASE 9.1 — Estilos de las dos franjas globales (CTC_UI_Global).
 * Deliberadamente mínimos: sin sombras pesadas, sin cards, sin
 * bordes redondeados llamativos — una línea delgada integrada al
 * layout existente.
 */

/* ============ FRANJA SUPERIOR — actividad de la comunidad ============ */

.ctc-barra-actividad {
	width: 100%;
	box-sizing: border-box;
	background: #F2F5F9; /* gris-azulado muy suave, cercano al fondo general — ya no amarillo */
	color: #4B5563;
	text-align: center;
	padding: 5px 16px;
	font-size: 12.5px;
	line-height: 1.3;
	border-bottom: 1px solid #E3E8EF; /* línea sutil de separación con el contenido */
	border-top: 2px solid #1428A0; /* v0.39.73: era amarillo (#FBBF24) — ahora reutiliza el azul principal de marca (--ctc-accent), mismo detalle mínimo, nunca fondo */
}

.ctc-barra-actividad-texto {
	display: inline;
}

/* Desktop: frase completa. Móvil: versión corta con "·". */
.ctc-barra-actividad-movil {
	display: none;
}

@media (max-width: 640px) {
	.ctc-barra-actividad-desktop {
		display: none;
	}
	.ctc-barra-actividad-movil {
		display: inline;
	}
	.ctc-barra-actividad {
		font-size: 12px;
		padding: 4px 10px; /* altura total resultante ≈ 30–34px con line-height 1.3, sin salto brusco */
	}
}

/* ============ FRANJA INFERIOR — aviso de actualización (ticker) ============ */

.ctc-barra-actualizacion {
	width: 100%;
	box-sizing: border-box;
	background: #EDF1F5; /* gris azulado muy suave, distinto del amarillo superior */
	color: #4A5568;
	overflow: hidden;
	padding: 5px 0;
	position: static; /* nunca sticky ni flotante: vive en el flujo normal, después del footer */
}

.ctc-barra-actualizacion-track {
	display: flex;
	width: max-content;
	animation: ctc-marquee 38s linear infinite; /* lento, sin easing con rebote (linear), sin pausas */
	will-change: transform;
}

.ctc-barra-actualizacion-item {
	white-space: nowrap;
	font-size: 12px;
	line-height: 1.4;
	padding-right: 90px; /* separación amplia entre repeticiones */
}

@keyframes ctc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); } /* 2 copias idénticas => -50% = loop perfecto, sin salto */
}

@media (max-width: 640px) {
	.ctc-barra-actualizacion-item {
		font-size: 11px;
		padding-right: 56px;
	}
	.ctc-barra-actualizacion-track {
		animation-duration: 26s; /* mismo espíritu "lento", ajustado a texto relativamente más ancho que el viewport chico */
	}
}

/* ============ prefers-reduced-motion: detener animación, texto fijo y legible ============ */

@media (prefers-reduced-motion: reduce) {
	.ctc-barra-actualizacion-track {
		animation: none;
		transform: none;
		width: 100%;
		display: block;
	}
	.ctc-barra-actualizacion-item {
		white-space: normal;
		display: block;
		width: 100%;
		text-align: center;
		padding-right: 0;
	}
	/* la segunda copia (aria-hidden, solo existía para el loop) se
	   oculta por completo: sin animación no hace falta duplicarla. */
	.ctc-barra-actualizacion-item[aria-hidden="true"] {
		display: none;
	}
}