/**
 * Zenth Toolkit — Top Bar frontend styles v2.0
 *
 * Slider horizontal con swipe/drag:
 *   - Wrapper: overflow hidden, contenedor del track
 *   - Track: flex row, contiene todos los slides + clon del primero
 *   - Slide: flex 0 0 100% (cada slide ocupa el ancho completo del wrapper)
 *   - Iconos: SVG renderizados como <img>, color heredado vía filter
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Wrapper          → .zenth-topbar-wrapper (+ is-closed)
 *   §2  Track            → .zenth-topbar-track (slider / drag / img)
 *   §3  Banner (slide)   → .zenth-topbar (+ link, --hide-mobile)
 *   §4  Inner + mensaje  → .zenth-topbar__inner / __message
 *   §5  Icono            → .zenth-topbar__icon (+ --monochrome)
 *   §6  Botón close      → .zenth-topbar__close
 *   §7  Clon             → .zenth-topbar--clone
 *   §8  Responsive       → @media de tamaño + reduced-motion
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (desktop es la base, sin media query)
 *   Tablet  → max-width: 768px   (tipografía / padding / icono más compactos)
 *
 *   + 1 media de accesibilidad (prefers-reduced-motion) en subsección propia
 *   al final de §8. El único @media de tamaño vive también en §8.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · WRAPPER
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.zenth-topbar-wrapper.is-closed {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · TRACK — slider / drag / imágenes
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	will-change: transform;
	/* Cursor grab solo en slider (wrapper lo gate en el selector de abajo). */
	touch-action: pan-y; /* permite scroll vertical nativo, captura horizontal */
	user-select: none;
	-webkit-user-select: none;
}

/* Solo dar cursor grab cuando es un slider real (múltiples slides). */
.zenth-topbar-is-slider .zenth-topbar-track {
	cursor: grab;
}

.zenth-topbar-is-slider .zenth-topbar-track.is-dragging {
	cursor: grabbing;
}

/* Evitar drag de imágenes durante el swipe. */
.zenth-topbar-track img {
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · BANNER (slide)
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	display: block;
	padding: 9px 16px 8px 16px;
	text-decoration: none;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	font-family: inherit;
	letter-spacing: 0.3px;
	position: relative;
	box-sizing: border-box;
	color: inherit;
}

a.zenth-topbar {
	color: inherit;
	text-decoration: none;
}

/* Mobile-hide solo aplica cuando NO es slider (sino el track se descuadra).
   Si es slider y un banner es mobile-hidden, se rota igual — el usuario
   puede elegir usar otro criterio de control temporal. */
.zenth-topbar-is-slider .zenth-topbar--hide-mobile {
	/* No ocultar en slider: mantiene la secuencia coherente. */
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · INNER + MENSAJE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar__inner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
}

.zenth-topbar__message {
	display: inline-block;
	font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════
   §4b · MODO TICKER (mobile) — carrusel continuo de TODAS las infos
   ───────────────────────────────────────────────────────────────────────
   En mobile el JS (topbar.js) NO usa el slider rotativo: pone la clase
   .zenth-topbar-is-ticker en el wrapper, duplica los banners (loop sin costura)
   y desplaza TODO el track en una sola fila continua, con un espacio
   (--ztb-ticker-gap) entre cada info. La distancia del loop (--ztb-ticker-shift
   = ancho de un set) y la duración (--ztb-ticker-dur, velocidad constante) las
   calcula el JS. El wrapper ya recorta (overflow:hidden). Reduced-motion: §8.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar-is-ticker .zenth-topbar-track {
	will-change: transform;
	animation: zenth-topbar-ticker var(--ztb-ticker-dur, 30s) linear infinite;
}

/* Pausa al pasar el dedo / mouse por encima. */
.zenth-topbar-is-ticker .zenth-topbar-track:hover,
.zenth-topbar-is-ticker .zenth-topbar-track:active {
	animation-play-state: paused;
}

/* Cada info: ancho de su contenido + separación a la derecha ("espacio entre
   infos"). El margin va en cada banner (no gap del flex) para que el JS pueda
   medir el set con offsetLeft del primer clon y el loop quede exacto. */
.zenth-topbar-is-ticker .zenth-topbar {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	margin-right: var(--ztb-ticker-gap, 3.5rem);
}

.zenth-topbar-is-ticker .zenth-topbar__inner {
	white-space: nowrap;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* En ticker el botón de cerrar por-banner no aplica (todo scrollea). */
.zenth-topbar-is-ticker .zenth-topbar__close {
	display: none;
}

@keyframes zenth-topbar-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--ztb-ticker-shift, 50%))); }
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · ICONO
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	line-height: 1;
}

.zenth-topbar__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Opt-in: forzar blanco solo si se agrega la clase --monochrome.
   Útil para íconos tipo "check", "arrow", "info" en banners con fondo
   oscuro o rojo, donde el SVG viene en negro y queremos que se vea blanco. */
.zenth-topbar__icon--monochrome img {
	filter: brightness(0) invert(1);
}


/* ═══════════════════════════════════════════════════════════════════════
   §6 · BOTÓN CLOSE
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar__close {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px 8px;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	/* Sacar el close del área arrastrable. */
	pointer-events: auto;
	z-index: 2;
}

.zenth-topbar__close:hover {
	opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · CLON
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-topbar--clone {
	/* El clon hereda todo del original. Solo bloqueamos interacciones
	   redundantes (close button) por seguridad. */
}

.zenth-topbar--clone [data-zenth-close] {
	display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · RESPONSIVE — @media de tamaño + accesibilidad
   ───────────────────────────────────────────────────────────────────────
   Un solo tier de tamaño (Tablet ≤768). Al final, accesibilidad
   (prefers-reduced-motion), que NO es un breakpoint de tamaño y no se
   consolida con el de arriba.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET · max-width: 768px ──────────────────── */
@media (max-width: 768px) {
	/* §3 · Banner: tipografía + padding más compactos */
	.zenth-topbar {
		font-size: 12px;
		padding: 6px 12px;
	}

	/* §4 · Inner: padding + gap reducidos */
	.zenth-topbar__inner {
		padding: 0 24px;
		gap: 8px;
	}

	/* §5 · Icono más grande en mobile para legibilidad */
	.zenth-topbar__icon {
		width: 16px;
		height: 16px;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-topbar-track {
		transition: none !important;
	}

	/* Ticker quieto con reduced-motion (sin desplazamiento). */
	.zenth-topbar-is-ticker .zenth-topbar-track {
		animation: none !important;
	}
}