/**
 * OXY Banner Pro — estilos del frontend.
 *
 * Todo lo configurable llega como custom property en el atributo style del
 * contenedor, así que este archivo es estático y cacheable para siempre: el
 * panel de administración no genera CSS, sólo cambia variables.
 *
 * Las reglas que ocultan el banner antes de la animación de entrada están
 * detrás de "html.oxybnr-js". Ese class lo pone un script mínimo en el <head>,
 * así que si JavaScript falla o está desactivado el banner se ve igualmente en
 * lugar de quedarse invisible para siempre.
 */

.oxybnr {
	--oxybnr-h: 90px;
	--oxybnr-gap: 40px;
	--oxybnr-img-h: 56px;
	--oxybnr-mobile-img-h: var( --oxybnr-img-h );
	--oxybnr-bg: #111827;
	--oxybnr-fg: #ffffff;
	--oxybnr-bw: 0px;
	--oxybnr-bc: transparent;
	--oxybnr-shadow: none;
	--oxybnr-radius: 0px;
	--oxybnr-z: 9999;
	--oxybnr-alt-t: 600ms;
	--oxybnr-in-y: 100%;
	--oxybnr-max: 1200px;
	--oxybnr-space-top: 0px;
	--oxybnr-space-bottom: 0px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: var( --oxybnr-h );
	margin: var( --oxybnr-space-top ) 0 var( --oxybnr-space-bottom );
	padding: 0;
	overflow: hidden;
	background: var( --oxybnr-bg );
	border: var( --oxybnr-bw ) solid var( --oxybnr-bc );
	border-radius: var( --oxybnr-radius );
	box-shadow: var( --oxybnr-shadow );
	color: var( --oxybnr-fg );
}

.oxybnr *,
.oxybnr *::before,
.oxybnr *::after {
	box-sizing: border-box;
}

/* --- Posición ---------------------------------------------------------- */

.oxybnr--fixed {
	position: fixed;
	left: 0;
	right: 0;
	width: auto;
	margin-top: 0;
	margin-bottom: 0;
	z-index: var( --oxybnr-z );
}

/*
 * Algunos temas aplican "position: relative" a todos sus bloques después de
 * cargar los estilos del plugin. La barra debe conservar su anclaje aunque
 * exista esa regla global, porque el espaciador ya reserva su sitio en el
 * flujo normal.
 */
html body .oxybnr.oxybnr--fixed {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
}

.oxybnr--fixed.oxybnr--top {
	top: var( --oxybnr-fixed-top, 0px );
}

html body .oxybnr.oxybnr--fixed.oxybnr--top {
	top: var( --oxybnr-fixed-top, 0px ) !important;
}

.oxybnr--fixed.oxybnr--bottom {
	bottom: var( --oxybnr-fixed-bottom, 0px );
}

/* --- Estructura -------------------------------------------------------- */

.oxybnr__inner {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var( --oxybnr-h );
	margin: 0 auto;
}

.oxybnr--width-contained .oxybnr__inner {
	max-width: var( --oxybnr-max );
	padding-left: 16px;
	padding-right: 16px;
}

.oxybnr__viewport {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

.oxybnr__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.oxybnr__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	/* El margen (no "gap" del flex) es lo que hace exacto el bucle: el ancho
	   de un juego de imágenes incluye su separación final, así que desplazar
	   la cinta justo ese ancho da un fotograma idéntico al inicial. */
	margin: 0 var( --oxybnr-gap ) 0 0;
	color: inherit;
	line-height: 1;
	text-decoration: none;
	transition: opacity .25s ease, transform .25s ease;
}

.oxybnr__item:hover {
	opacity: .88;
}

.oxybnr .oxybnr__img {
	display: block;
	height: var( --oxybnr-img-h ) !important;
	width: auto !important;
	max-width: 74vw !important;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	pointer-events: none;
}

.oxybnr__text {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var( --oxybnr-fg );
}

/* --- Modo cinta continua ---------------------------------------------- */

@keyframes oxybnr-scroll {

	from {
		transform: translate3d( 0, 0, 0 );
	}

	to {
		transform: translate3d( calc( -1 * var( --oxybnr-dist, 0px ) ), 0, 0 );
	}
}

.oxybnr.is-ready .oxybnr__track--anim {
	animation: oxybnr-scroll var( --oxybnr-dur, 20s ) linear infinite;
	will-change: transform;
}

.oxybnr--dir-right.is-ready .oxybnr__track--anim {
	animation-direction: reverse;
}

.oxybnr--pause:hover .oxybnr__track--anim,
.oxybnr--pause:focus-within .oxybnr__track--anim,
.oxybnr.is-paused .oxybnr__track--anim {
	animation-play-state: paused;
}

/* --- Modo estático ---------------------------------------------------- */

.oxybnr--mode-static .oxybnr__viewport {
	justify-content: center;
}

.oxybnr--mode-static .oxybnr__track {
	flex-wrap: wrap;
	justify-content: center;
	width: auto;
}

.oxybnr--mode-static .oxybnr__item:last-child {
	margin-right: 0;
}

/* --- Modo alternado --------------------------------------------------- */

.oxybnr--mode-alternate .oxybnr__viewport {
	justify-content: center;
}

.oxybnr--mode-alternate .oxybnr__track {
	display: grid;
	width: 100%;
	place-items: center;
}

.oxybnr--mode-alternate .oxybnr__item {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --oxybnr-alt-t ) ease, transform var( --oxybnr-alt-t ) ease;
}

.oxybnr--mode-alternate .oxybnr__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

.oxybnr--mode-alternate.oxybnr--effect-slide .oxybnr__item {
	transform: translateX( 28px );
}

.oxybnr--mode-alternate.oxybnr--effect-slide .oxybnr__item.is-active {
	transform: none;
}

/* --- Botón de cierre -------------------------------------------------- */

.oxybnr__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 10px 0 6px;
	padding: 0;
	background: rgba( 0, 0, 0, .2 );
	border: 0;
	border-radius: 50%;
	color: var( --oxybnr-fg );
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.oxybnr__close:hover {
	background: rgba( 0, 0, 0, .38 );
	transform: scale( 1.08 );
}

.oxybnr__close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.oxybnr__close svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* --- Animación de entrada -------------------------------------------- */

html.oxybnr-js .oxybnr--anim-slide,
html.oxybnr-js .oxybnr--anim-fade {
	transition: transform .5s cubic-bezier( .22, 1, .36, 1 ), opacity .5s ease;
}

html.oxybnr-js .oxybnr.is-pending.oxybnr--anim-slide:not( .is-visible ),
html.oxybnr-js .oxybnr.is-pending.oxybnr--anim-fade:not( .is-visible ) {
	opacity: 0;
}

html.oxybnr-js .oxybnr.is-pending.oxybnr--anim-slide.oxybnr--top:not( .is-visible ) {
	transform: translateY( calc( -1 * var( --oxybnr-in-y ) ) );
}

html.oxybnr-js .oxybnr.is-pending.oxybnr--anim-slide.oxybnr--bottom:not( .is-visible ) {
	transform: translateY( var( --oxybnr-in-y ) );
}

html.oxybnr-js .oxybnr.is-pending.oxybnr--anim-none:not( .is-visible ) {
	visibility: hidden;
}

.oxybnr.is-hidden {
	display: none !important;
}

/* --- Espaciador que reserva el hueco del banner ----------------------- */

/*
 * Reservar el hueco con "padding-top" en el <body> es lo que hace todo el
 * mundo, y es frágil: el <body> es territorio disputado y muchos temas fuerzan
 * ahí su propio padding o margin (con !important incluso), de modo que el hueco
 * nunca se abre. Un elemento propio en el flujo normal no lo puede pisar nadie,
 * y se SUMA al margin del tema en lugar de competir con él.
 *
 * La altura sale de la misma variable que antes, así que el servidor puede
 * imprimir el valor por defecto (cero salto de maquetación) y JavaScript lo
 * afina con la altura real medida.
 */
.oxybnr-spacer {
	flex: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
	transition: height .45s ease;
}

.oxybnr-spacer--top {
	height: var( --oxybnr-offset-top, 0px );
}

.oxybnr-spacer--bottom {
	height: var( --oxybnr-offset-bottom, 0px );
}

@media ( prefers-reduced-motion: reduce ) {

	.oxybnr-spacer {
		transition: none;
	}
}

/* --- Barra de administración de WordPress ----------------------------- */

/*
 * La barra de administración también es un elemento fijo en top:0, y con un
 * z-index (99999) mayor que el nuestro. Sin esto, al estar identificado se te
 * come los primeros 32px del banner.
 */
body.admin-bar .oxybnr--fixed.oxybnr--top {
	--oxybnr-fixed-top: 32px;
}

@media screen and ( max-width: 782px ) {

	body.admin-bar .oxybnr--fixed.oxybnr--top {
		--oxybnr-fixed-top: 46px;
	}
}

/* Por debajo de 600px WordPress deja de fijar la barra: vuelve a haber sitio. */
@media screen and ( max-width: 600px ) {

	body.admin-bar .oxybnr--fixed.oxybnr--top {
		--oxybnr-fixed-top: 0px;
	}
}

/* --- Cabecera fija del tema desplazada -------------------------------- */

/*
 * Se aplica a la cabecera fija del tema mientras el banner está visible, para
 * que baje con suavidad en lugar de dar un salto. Va como clase y sin
 * !important a propósito: si el tema ya tiene su propia transición en la
 * cabecera, la suya gana y no le rompemos nada.
 */
.oxybnr-shifted {
	transition: top .45s ease;
}

@media ( prefers-reduced-motion: reduce ) {

	.oxybnr-shifted {
		transition: none;
	}
}

/* --- Filtro por dispositivo (con CSS, para ser inmune a la caché) ----- */

@media ( max-width: 781px ) {

	.oxybnr {
		--oxybnr-img-h: var( --oxybnr-mobile-img-h );
	}

	.oxybnr .oxybnr__img {
		max-width: none !important;
	}

	.oxybnr--hide-mobile {
		display: none !important;
	}

	.oxybnr__text {
		font-size: 14px;
		white-space: normal;
	}
}

@media ( min-width: 782px ) {

	.oxybnr--hide-desktop {
		display: none !important;
	}
}

/* --- Accesibilidad ---------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	/*
	 * Sin movimiento automático, pero SIN perder contenido.
	 *
	 * Congelar la cinta a secas deja inalcanzables todas las imágenes que no
	 * caben en pantalla: con dos banners de 900px en una pantalla de 1400 sólo
	 * se vería el primero y medio. Eso no es accesibilidad, es pérdida de
	 * contenido. Así que quitamos el movimiento automático y a cambio la cinta
	 * se puede desplazar a mano (rueda horizontal, deslizar en táctil, teclado).
	 *
	 * La clase oxybnr--force-motion la pone el ajuste del panel "Ignorar la
	 * preferencia de reducir movimiento": con ella, nada de esto aplica.
	 */
	.oxybnr:not( .oxybnr--force-motion ).is-ready .oxybnr__track--anim {
		animation: none !important;
		transform: none !important;
	}

	.oxybnr:not( .oxybnr--force-motion ) .oxybnr__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	/* En modo alternado los elementos van apilados y sólo se ve el activo:
	   sin rotación automática hay que ponerlos en fila o se perderían. */
	.oxybnr:not( .oxybnr--force-motion ).oxybnr--mode-alternate .oxybnr__track {
		display: flex;
		place-items: initial;
		width: max-content;
	}

	.oxybnr:not( .oxybnr--force-motion ).oxybnr--mode-alternate .oxybnr__item {
		grid-area: auto;
		margin-right: var( --oxybnr-gap );
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.oxybnr:not( .oxybnr--force-motion ),
	.oxybnr:not( .oxybnr--force-motion ) .oxybnr__item,
	.oxybnr:not( .oxybnr--force-motion ) .oxybnr__close {
		transition: none !important;
	}
}