/* =============================================================================
   banners.css — Rotador de banners de la APP (sistema Banners).
   Cargado GLOBAL (el sidebar se pinta en todas las páginas). Proporción
   estándar de todos los banners: 16:9 (imagen recomendada 1280×720). Los slides
   van apilados con transición de opacidad; la rotación, los puntitos, las
   flechas laterales (solo home) y la pausa en hover viven en js/theme.banners.js.
   ============================================================================= */

.banners-zone {
	margin: 15px 0;
}

#sidebar .banners-zone {
	margin: 0 0 10px 0;
}

.banners-rotator {
	position: relative;
}

/* Marco 16:9: todos los slides ocupan el mismo espacio aunque cambie el ancho */
.banners-track {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #f5f5f5;
}

.banner-slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.banner-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Los estilos globales de enlaces (a::after = subrayado animado; #sidebar a =
   inline-block + relative + border) machacan por especificidad a los slides
   que son <a> y rompen el marco 16:9 (sobre todo con banners HTML en el
   sidebar). Se reafirman aquí; el ID del sidebar obliga a usar ID. */
a.banner-slide::after,
#sidebar a.banner-slide::after {
	display: none;
}

#sidebar a.banner-slide {
	position: absolute;
	display: block;
	border: none;
}

.banner-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Host del sandbox de los banners HTML (Shadow DOM con :host{all:initial}).
   container-type hace que las unidades cq* (cqw/cqh) del widget escalen con el
   tamaño real del banner (sidebar ~240px vs home ~600px), no con el viewport.
   Esta regla externa gana al all:initial del :host (los estilos del documento
   sobre el host tienen prioridad sobre :host). */
.banner-html-host {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	container-type: size;
}

/* Flechas anterior/siguiente (solo las emite la home): altas como el banner,
   translúcidas para no llamar la atención. Al hover se iluminan, aparece un
   degradado lateral y el chevrón hace un pequeño vaivén. Viven dentro de
   .banners-track (heredan su alto y el recorte del border-radius). */
.banner-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 17px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	cursor: pointer;
	opacity: 0.35;
	z-index: 2;
	transition: opacity 0.25s ease, background 0.25s ease;
}

.banner-arrow-prev {
	left: 0;
}

.banner-arrow-next {
	right: 0;
}

.banner-arrow:hover,
.banner-arrow:focus-visible {
	opacity: 0.95;
}

.banner-arrow-prev:hover {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent);
}

.banner-arrow-next:hover {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent);
}

.banner-arrow i {
	transition: transform 0.25s ease;
}

.banner-arrow-prev:hover i,
.banner-arrow-prev:focus-visible i {
	animation: banner-arrow-nudge-l 0.9s ease-in-out infinite;
}

.banner-arrow-next:hover i,
.banner-arrow-next:focus-visible i {
	animation: banner-arrow-nudge-r 0.9s ease-in-out infinite;
}

@keyframes banner-arrow-nudge-l {
	0%, 100% { transform: translateX(0) scale(1); }
	50% { transform: translateX(-4px) scale(1.12); }
}

@keyframes banner-arrow-nudge-r {
	0%, 100% { transform: translateX(0) scale(1); }
	50% { transform: translateX(4px) scale(1.12); }
}

/* Puntitos de paginación (discretos) */
.banners-dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 8px;
}

.banner-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #c9c9c9;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.banner-dot:hover {
	background: #9c9c9c;
}

.banner-dot.is-active {
	background: #0082ce;
	transform: scale(1.15);
}