/* Announcement Bar — estilos del front
   Los valores que se editan desde el admin llegan como variables CSS. */

.annbar {
	background: var(--annbar-fondo, #6B6A45);
	color: var(--annbar-texto, #F6EEE0);
	overflow: hidden;
	width: 100%;
	padding: 11px 0;
	position: relative;
	z-index: 999;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.annbar__pista {
	display: flex;
	width: max-content;
	animation: annbar-desliza var(--annbar-velocidad, 38s) linear infinite;
	animation-direction: var(--annbar-direccion, normal);
}

/* Sólo donde hay un mouse de verdad. En pantallas táctiles el navegador
   simula el :hover y lo deja pegado tras el toque, lo que impediría
   reanudar la animación; ahí manda el toque, gestionado por JS. */
@media (hover: hover) {
	.annbar:hover .annbar__pista {
		animation-play-state: paused;
	}
}

.annbar:focus-within .annbar__pista {
	animation-play-state: paused;
}

.annbar__grupo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	font-family: var(--annbar-fuente, inherit);
	font-size: var(--annbar-tamano, 17px);
	font-weight: var(--annbar-peso, 400);
	letter-spacing: var(--annbar-espaciado, .02em);
	text-transform: var(--annbar-mayusculas, none);
	line-height: 1.3;
}

.annbar__item,
.annbar__sep {
	white-space: nowrap;
	padding: 0 13px;
}

/* Mensajes con enlace: subrayado discreto que se afirma al pasar el mouse */
.annbar__item--enlace {
	color: inherit;
	touch-action: manipulation;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: text-decoration-color .25s ease, opacity .25s ease;
}

@media (hover: hover) {
	.annbar__item--enlace:hover {
		text-decoration-color: currentColor;
	}
}

.annbar__item--enlace:focus-visible {
	text-decoration-color: currentColor;
	color: inherit;
}

.annbar__item--enlace:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Si el navegador no soporta color-mix, el subrayado se ve entero. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.annbar__item--enlace {
		text-decoration-color: currentColor;
		opacity: .85;
	}
	.annbar__item--enlace:focus-visible {
		opacity: 1;
	}
}

@keyframes annbar-desliza {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Quien tenga movimiento reducido activado ve el contenido quieto
   y puede desplazarlo a mano. */
@media (prefers-reduced-motion: reduce) {
	.annbar__pista {
		animation: none;
	}
	.annbar {
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.annbar__grupo {
		font-size: calc(var(--annbar-tamano, 17px) * .88);
	}
	.annbar__item,
	.annbar__sep {
		padding: 0 9px;
	}
	/* Un poco más de alto: el dedo necesita área para acertar el enlace */
	.annbar {
		padding: 13px 0;
	}
}