/* PSYPACKS Barra Superior — front
 * Solo fuentes self-hosted del tema (cero Google Fonts).
 */

.psy-ab {
	background: var(--psy-ab-bg, #1A1A1A);
	color: var(--psy-ab-text, #FDFDFD);
	font-family: var(--psy-ab-font, sans-serif);
	font-weight: var(--psy-ab-weight, 600);
	letter-spacing: var(--psy-ab-spacing, .5px);
	line-height: 1.3;
	width: 100%;
	position: relative;
	/* z-index BASE (7000): por encima del contenido normal pero por DEBAJO de los
	 * paneles que se abren anclados al header (filtros z:8002, buscador z:10002,
	 * menú/drawers 99998+), de modo que en modo "debajo" esos paneles cubren la
	 * barra y no se corta su contenido. En modo "encima" (desktop) el JS añade
	 * .psy-ab--pin-above que la sube a 10050 (por encima del clúster del header). */
	z-index: 7000;
	overflow: hidden;
	box-sizing: border-box;
	/* Anti-FOUC: el JS revela la barra (opacity:1) cuando ya está colocada. */
	transition: opacity .2s ease;
}

/* Posicionamiento gestionado por JS (anti-solape). El estado por defecto
 * (sin JS) deja la barra en el flujo normal, encima del header. */
.psy-ab--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
/* Solo en modo "encima": por encima del clúster del header (9999–10001) y por
 * debajo de los modales drawer/login/búsqueda (99998+). */
.psy-ab--pin-above {
	z-index: 10050;
}
.psy-ab--js-sticky {
	position: sticky;
	top: 0;
}

.psy-ab--border-bottom {
	border-bottom: var(--psy-ab-border, 0);
}
.psy-ab--border-top {
	border-top: var(--psy-ab-border, 0);
}

.psy-ab--shadow {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.psy-ab--upper .psy-ab__inner {
	text-transform: uppercase;
}

.psy-ab__inner {
	position: relative;
	padding-top: var(--psy-ab-pad-d, 10px);
	padding-bottom: var(--psy-ab-pad-d, 10px);
	padding-left: 0;
	padding-right: 0;
	font-size: var(--psy-ab-size-d, 14px);
	box-sizing: border-box;
}

.psy-ab__viewport {
	overflow: hidden;
	width: 100%;
}

.psy-ab__track {
	display: flex;
	align-items: center;
	white-space: nowrap;
	width: max-content;
	will-change: transform;
}

.psy-ab__item {
	display: inline-flex;
	align-items: center;
}

.psy-ab__sep {
	display: inline-block;
	padding: 0 calc(var(--psy-ab-sep-space, 28px) / 2);
	opacity: .65;
}

.psy-ab__icon {
	margin-right: 6px;
}

.psy-ab__link {
	color: var(--psy-ab-link, #FFB2EF);
	text-decoration: none;
	transition: color .2s ease;
}
.psy-ab__link:hover,
.psy-ab__link:focus {
	color: var(--psy-ab-link-hover, #73DEF1);
	text-decoration: underline;
}

/* Botón cerrar */
.psy-ab__close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: .8;
	z-index: 2;
}
.psy-ab__close:hover {
	opacity: 1;
}
.psy-ab[data-closable="1"] .psy-ab__inner {
	padding-right: 40px;
}

/* ───── Modo: cinta giratoria (marquee) ───── */
@keyframes psy-ab-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.psy-ab--marquee .psy-ab__track.is-animating {
	animation: psy-ab-scroll var(--psy-ab-duration, 20s) linear infinite;
}
.psy-ab--marquee.psy-ab--rtl-scroll .psy-ab__track.is-animating {
	animation-direction: reverse;
}
.psy-ab--pause:hover .psy-ab__track.is-animating {
	animation-play-state: paused;
}

/* ───── Modos rotación / estático ───── */
.psy-ab:not(.psy-ab--marquee) .psy-ab__track {
	width: 100%;
	justify-content: center;
	text-align: center;
}
.psy-ab:not(.psy-ab--marquee) .psy-ab__sep {
	display: none;
}
.psy-ab--static.psy-ab--concat .psy-ab__sep {
	display: inline-block;
}

/* Rotador (un mensaje a la vez, generado por JS) */
.psy-ab__rot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 1.3em;
}
.psy-ab--fade .psy-ab__rot {
	transition: opacity var(--psy-ab-fade, 600ms) ease;
}
.psy-ab--slide .psy-ab__rot {
	transition: opacity var(--psy-ab-fade, 600ms) ease, transform var(--psy-ab-fade, 600ms) ease;
}
.psy-ab__rot.is-out {
	opacity: 0;
}
.psy-ab--slide .psy-ab__rot.is-out {
	transform: translateY(-100%);
}

/* Caret del typewriter */
.psy-ab__caret {
	display: inline-block;
	width: 1px;
	margin-left: 2px;
	animation: psy-ab-caret 1s steps(1) infinite;
}
@keyframes psy-ab-caret {
	50% { opacity: 0; }
}

/* Entrada */
.psy-ab--enter {
	/* slide-down perceptible: ease-out con desaceleración ("aterrizaje"). */
	animation: psy-ab-enter .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes psy-ab-enter {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Fondo degradado animado */
.psy-ab--anim-bg {
	background-size: 200% 200%;
	animation: psy-ab-bg 8s ease infinite;
}
@keyframes psy-ab-bg {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ───── Responsive ───── */
@media (max-width: 767px) {
	.psy-ab__inner {
		font-size: var(--psy-ab-size-m, 13px);
		padding-top: var(--psy-ab-pad-m, 8px);
		padding-bottom: var(--psy-ab-pad-m, 8px);
	}
	.psy-ab--hide-mobile { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.psy-ab--hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.psy-ab--hide-desktop { display: none !important; }
}

/* Accesibilidad: sin movimiento → estático legible */
@media (prefers-reduced-motion: reduce) {
	/* La cinta (marquee) gira siempre; solo atenuamos efectos secundarios. */
	.psy-ab--anim-bg,
	.psy-ab--enter {
		animation: none !important;
	}
	.psy-ab--fade .psy-ab__rot,
	.psy-ab--slide .psy-ab__rot {
		transition: none !important;
	}
}

/* Estado oculto (cerrada / fuera de programación / sin mensajes activos) */
.psy-ab.is-hidden {
	display: none !important;
}

/* ───── Overrides anti-solape para satélites con "top" hardcodeado ─────
 * Este CSS solo se carga cuando la barra se muestra. `--psy-bar-h` lo publica
 * el JS: vale la altura de la barra SOLO en modo "encima" (header desplazado) y
 * 0 en "debajo"/sin compensar, así que estos ajustes no afectan a móvil/tablet.
 * Prefijo `html ` para ganar especificidad sobre las reglas !important del tema
 * sin depender del orden de carga. */
html .psyw-side {
	/* Sidebar sticky del catálogo (desktop): sin esto se mete bajo el header. */
	top: calc(94px + var(--psy-bar-h, 0px)) !important;
}