/**
 * Curso Hongos - Anuncios / Barra de avisos
 *
 * Aqui viven la ESTRUCTURA, los valores por defecto y el COMPORTAMIENTO
 * (estados, animaciones, modos de anclaje). La apariencia — tipografia,
 * colores, fondos, bordes, espaciados — la escribe Elementor mediante el
 * array `selectors` de cada control, que alimenta las variables --chanun-*
 * declaradas mas abajo.
 *
 * Reparto de responsabilidades:
 *   - Este archivo: layout, estados, keyframes, accesibilidad, impresion.
 *   - Elementor:    valores de las variables (por dispositivo, con sus
 *                   breakpoints nativos).
 *   - Bloque <style> del widget: unicamente el punto de ruptura propio del
 *                   texto corto/largo y la compensacion de la admin bar, que
 *                   son media queries que Elementor no sabe generar.
 *
 * Todas las clases llevan el prefijo cursohongosanuncios.
 */

/* ===================================================================
 * VALORES POR DEFECTO
 * =================================================================== */

.cursohongosanuncios {
	/* Caja */
	--chanun-z: 175;
	--chanun-min-alto: 34px;
	--chanun-pad-y: 8px;
	--chanun-pad-x: 14px;
	--chanun-gap: 9px;
	--chanun-max-ancho: none;
	--chanun-justificado: center;
	--chanun-adminbar: 0px;
	--chanun-desplazamiento: 0px;

	/* Punto */
	--chanun-punto-size: 8px;
	--chanun-punto-color: currentColor;
	--chanun-punto-dur: 1.8s;
	--chanun-punto-escala: 1.55;
	--chanun-punto-op: 0.45;
	--chanun-punto-halo: 0 0 0 0 transparent;

	/* Icono */
	--chanun-icono-size: 1em;
	--chanun-icono-color: currentColor;

	/* Flecha */
	--chanun-flecha-size: 1em;
	--chanun-flecha-color: currentColor;
	--chanun-flecha-desp: 3px;

	/* Cuenta atras */
	--chanun-cuenta-gap: 4px;
	--chanun-cuenta-color: currentColor;
	--chanun-cuenta-fondo: transparent;
	--chanun-cuenta-radio: 3px;
	--chanun-cuenta-pad: 1px 4px;
	--chanun-cuenta-lbl-color: currentColor;
	--chanun-cuenta-lbl-op: 0.65;
	--chanun-cuenta-sep-op: 0.45;

	/* Boton CTA */
	--chanun-cta-color: inherit;
	--chanun-cta-color-h: inherit;
	--chanun-cta-fondo: transparent;
	--chanun-cta-fondo-h: transparent;
	--chanun-cta-radio: 999px;
	--chanun-cta-pad: 3px 10px;
	--chanun-cta-borde-ancho: 1px;
	--chanun-cta-borde-color: currentColor;
	--chanun-cta-borde-color-h: currentColor;
	--chanun-cta-margen: 0px;

	/* Cerrar */
	--chanun-cerrar-ancho: 30px;
	--chanun-cerrar-size: 18px;
	--chanun-cerrar-color: currentColor;
	--chanun-cerrar-color-h: currentColor;
	--chanun-cerrar-op: 0.55;
	--chanun-cerrar-op-h: 1;
	--chanun-cerrar-radio: 0px;

	/* Movimiento */
	--chanun-dur: 0.45s;
	--chanun-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--chanun-desliz: 12px;

	/* Foco visible */
	--chanun-foco-color: currentColor;
	--chanun-foco-ancho: 2px;
	--chanun-foco-offset: -2px;
}

/* ===================================================================
 * RAIZ
 * =================================================================== */

.cursohongosanuncios {
	position: relative;
	z-index: var(--chanun-z);
	display: flex;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	background: #00ff87;
	color: #080808;
	/* Bloquea la herencia de line-height/letter-spacing raras del tema. */
	line-height: 1.25;
}

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

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

.cursohongosanuncios button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Cerrada por el usuario o por la cuenta atras: fuera del flujo por completo. */
.cursohongosanuncios--cerrado {
	display: none !important;
}

/* --- Anclaje ------------------------------------------------------ */

.cursohongosanuncios[data-cha-pos="fijo-arriba"],
.cursohongosanuncios[data-cha-pos="fijo-abajo"] {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

.cursohongosanuncios[data-cha-pos="fijo-arriba"] {
	top: var(--chanun-adminbar);
}

.cursohongosanuncios[data-cha-pos="fijo-abajo"] {
	bottom: 0;
}

.cursohongosanuncios[data-cha-pos="pegajoso"] {
	position: sticky;
	top: var(--chanun-adminbar);
}

/*
 * El JS mueve el envoltorio .elementor-element al final del <body> cuando la
 * barra es fija ("portal"). Se marca con esta clase para neutralizar los
 * margenes/anchos que Elementor le hubiera puesto dentro de su contenedor.
 */
.cursohongosanuncios-portal {
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Ocultacion por scroll ---------------------------------------- */

/*
 * Se traduce a transform (no a display) para poder animarla. La direccion
 * depende del borde al que este anclada la barra.
 */
.cursohongosanuncios[data-cha-ocultar-scroll="si"] {
	transition: transform var(--chanun-dur) var(--chanun-ease), opacity var(--chanun-dur) var(--chanun-ease);
	will-change: transform;
}

.cursohongosanuncios--oculto {
	opacity: 0;
	pointer-events: none;
	transform: translateY(calc(-100% - var(--chanun-adminbar)));
}

.cursohongosanuncios[data-cha-pos="fijo-abajo"].cursohongosanuncios--oculto {
	transform: translateY(100%);
}

/* --- Animacion de entrada ----------------------------------------- */

.cursohongosanuncios[data-cha-entrada="deslizar"],
.cursohongosanuncios[data-cha-entrada="fundido"] {
	transition: transform var(--chanun-dur) var(--chanun-ease), opacity var(--chanun-dur) var(--chanun-ease);
}

.cursohongosanuncios[data-cha-entrada="fundido"]:not(.cursohongosanuncios--dentro) {
	opacity: 0;
}

.cursohongosanuncios[data-cha-entrada="deslizar"]:not(.cursohongosanuncios--dentro) {
	opacity: 0;
	transform: translateY(-100%);
}

.cursohongosanuncios[data-cha-pos="fijo-abajo"][data-cha-entrada="deslizar"]:not(.cursohongosanuncios--dentro) {
	transform: translateY(100%);
}

/* ===================================================================
 * PISTA Y ANUNCIOS
 * =================================================================== */

/*
 * Todos los anuncios ocupan la misma celda de rejilla: se apilan uno encima de
 * otro sin position:absolute, de modo que la barra conserva la altura del
 * anuncio mas alto y no da saltos al rotar.
 */
.cursohongosanuncios__pista {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
}

.cursohongosanuncios__item {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: var(--chanun-justificado);
	gap: var(--chanun-gap);
	min-width: 0;
	min-height: var(--chanun-min-alto);
	padding: var(--chanun-pad-y) var(--chanun-pad-x);
	text-align: center;
	white-space: nowrap;
	/*
	 * Limita el mensaje sin tocar el fondo, que sigue a sangre completa: el
	 * limite vive en el hijo, no en la raiz.
	 */
	width: 100%;
	max-width: var(--chanun-max-ancho);
	margin-left: auto;
	margin-right: auto;
}

/* Solo el texto cede espacio; el resto de piezas conservan su tamano. */
.cursohongosanuncios__item > * {
	flex-shrink: 0;
}

.cursohongosanuncios[data-cha-ajuste="recortar"] .cursohongosanuncios__texto {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cursohongosanuncios[data-cha-ajuste="envolver"] .cursohongosanuncios__item {
	white-space: normal;
}

.cursohongosanuncios[data-cha-ajuste="envolver"] .cursohongosanuncios__texto {
	flex-shrink: 1;
	min-width: 0;
}

/* --- Enlace de anuncio -------------------------------------------- */

a.cursohongosanuncios__item:hover .cursohongosanuncios__texto {
	text-decoration: var(--chanun-texto-deco, none);
	text-underline-offset: 2px;
}

/* --- Rotacion ------------------------------------------------------ */

.cursohongosanuncios[data-cha-rotar="si"] .cursohongosanuncios__item {
	transition: opacity var(--chanun-dur) var(--chanun-ease), transform var(--chanun-dur) var(--chanun-ease);
}

.cursohongosanuncios[data-cha-rotar="si"] .cursohongosanuncios__item[aria-hidden="true"] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.cursohongosanuncios[data-cha-rotar="si"][data-cha-efecto="deslizar"] .cursohongosanuncios__item[aria-hidden="true"] {
	transform: translateY(var(--chanun-desliz));
}

.cursohongosanuncios[data-cha-rotar="si"][data-cha-efecto="deslizar"] .cursohongosanuncios__item--saliente {
	transform: translateY(calc(var(--chanun-desliz) * -1));
}

.cursohongosanuncios[data-cha-rotar="si"][data-cha-efecto="lateral"] .cursohongosanuncios__item[aria-hidden="true"] {
	transform: translateX(var(--chanun-desliz));
}

.cursohongosanuncios[data-cha-rotar="si"][data-cha-efecto="lateral"] .cursohongosanuncios__item--saliente {
	transform: translateX(calc(var(--chanun-desliz) * -1));
}

/* ===================================================================
 * PIEZAS DEL ANUNCIO
 * =================================================================== */

/* --- Punto pulsante ------------------------------------------------ */

.cursohongosanuncios__punto {
	flex-shrink: 0;
	width: var(--chanun-punto-size);
	height: var(--chanun-punto-size);
	border-radius: 50%;
	background: var(--chanun-punto-color);
	box-shadow: var(--chanun-punto-halo);
}

.cursohongosanuncios__punto[data-cha-anim="pulso"] {
	animation: cursohongosanuncios-pulso var(--chanun-punto-dur) ease-in-out infinite;
}

.cursohongosanuncios__punto[data-cha-anim="parpadeo"] {
	animation: cursohongosanuncios-parpadeo var(--chanun-punto-dur) steps(1, end) infinite;
}

.cursohongosanuncios__punto[data-cha-anim="onda"] {
	position: relative;
}

.cursohongosanuncios__punto[data-cha-anim="onda"]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	animation: cursohongosanuncios-onda var(--chanun-punto-dur) ease-out infinite;
}

@keyframes cursohongosanuncios-pulso {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}

	50% {
		transform: scale(var(--chanun-punto-escala));
		opacity: var(--chanun-punto-op);
	}
}

@keyframes cursohongosanuncios-parpadeo {
	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: var(--chanun-punto-op);
	}
}

@keyframes cursohongosanuncios-onda {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}

	100% {
		transform: scale(calc(var(--chanun-punto-escala) + 1));
		opacity: 0;
	}
}

/* --- Icono --------------------------------------------------------- */

.cursohongosanuncios__icono {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--chanun-icono-size);
	line-height: 1;
	color: var(--chanun-icono-color);
}

.cursohongosanuncios__icono svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.cursohongosanuncios__icono i {
	font-size: inherit;
	line-height: 1;
}

/* --- Texto --------------------------------------------------------- */

.cursohongosanuncios__texto {
	display: inline-block;
}

/*
 * Version corta/larga. Por defecto manda la larga; el bloque <style> del
 * widget invierte el par dentro de su propio punto de ruptura. Si el anuncio
 * no define version corta, la larga se marca --solo y no se oculta nunca.
 */
.cursohongosanuncios__texto--corto {
	display: none;
}

.cursohongosanuncios__texto--largo,
.cursohongosanuncios__texto--solo {
	display: inline-block;
}

/* --- Flecha -------------------------------------------------------- */

.cursohongosanuncios__flecha {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	font-size: var(--chanun-flecha-size);
	line-height: 1;
	color: var(--chanun-flecha-color);
	transition: transform var(--chanun-dur) var(--chanun-ease);
}

.cursohongosanuncios__flecha svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

a.cursohongosanuncios__item:hover .cursohongosanuncios__flecha {
	transform: translateX(var(--chanun-flecha-desp));
}

.cursohongosanuncios[data-cha-flecha-pos="izquierda"] a.cursohongosanuncios__item:hover .cursohongosanuncios__flecha {
	transform: translateX(calc(var(--chanun-flecha-desp) * -1));
}

/* ===================================================================
 * CUENTA ATRAS
 * =================================================================== */

.cursohongosanuncios__cuenta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--chanun-cuenta-gap);
	color: var(--chanun-cuenta-color);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/*
 * El contador va fuera de la pista (se renderiza una sola vez, no una por
 * anuncio). Su sitio lo decide el orden en el DOM; aqui solo se separa del
 * borde por el lado que toca.
 */
.cursohongosanuncios__cuenta--fuera {
	align-self: center;
}

.cursohongosanuncios__cuenta--derecha {
	padding-right: var(--chanun-pad-x);
}

.cursohongosanuncios__cuenta--izquierda {
	padding-left: var(--chanun-pad-x);
}

.cursohongosanuncios__cuenta-bloque {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	padding: var(--chanun-cuenta-pad);
	border-radius: var(--chanun-cuenta-radio);
	background: var(--chanun-cuenta-fondo);
}

.cursohongosanuncios__cuenta-num {
	font-variant-numeric: tabular-nums;
	/* Evita el temblor al pasar de 9 a 10 en fuentes sin cifras tabulares. */
	min-width: 1.2em;
	text-align: center;
}

.cursohongosanuncios__cuenta-lbl {
	color: var(--chanun-cuenta-lbl-color);
	opacity: var(--chanun-cuenta-lbl-op);
}

.cursohongosanuncios__cuenta-sep {
	opacity: var(--chanun-cuenta-sep-op);
}

/* Aun sin resolver la primera vez: se oculta para no mostrar 00:00:00. */
.cursohongosanuncios__cuenta:not(.cursohongosanuncios__cuenta--activa) {
	visibility: hidden;
}

/* ===================================================================
 * BOTON CTA
 * =================================================================== */

.cursohongosanuncios__cta {
	flex-shrink: 0;
	align-self: center;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: var(--chanun-cta-margen);
	padding: var(--chanun-cta-pad);
	border-radius: var(--chanun-cta-radio);
	border: var(--chanun-cta-borde-ancho) solid var(--chanun-cta-borde-color);
	background: var(--chanun-cta-fondo);
	color: var(--chanun-cta-color);
	white-space: nowrap;
	transition: background-color var(--chanun-dur) var(--chanun-ease),
		color var(--chanun-dur) var(--chanun-ease),
		border-color var(--chanun-dur) var(--chanun-ease);
}

.cursohongosanuncios__cta:hover,
.cursohongosanuncios__cta:focus-visible {
	background: var(--chanun-cta-fondo-h);
	color: var(--chanun-cta-color-h);
	border-color: var(--chanun-cta-borde-color-h);
}

.cursohongosanuncios__cta svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ===================================================================
 * BOTON CERRAR
 * =================================================================== */

.cursohongosanuncios__cerrar {
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--chanun-cerrar-ancho);
	min-height: var(--chanun-min-alto);
	border-radius: var(--chanun-cerrar-radio);
	font-size: var(--chanun-cerrar-size);
	line-height: 1;
	color: var(--chanun-cerrar-color);
	opacity: var(--chanun-cerrar-op);
	transition: opacity var(--chanun-dur) var(--chanun-ease), color var(--chanun-dur) var(--chanun-ease);
}

.cursohongosanuncios__cerrar:hover,
.cursohongosanuncios__cerrar:focus-visible {
	color: var(--chanun-cerrar-color-h);
	opacity: var(--chanun-cerrar-op-h);
}

.cursohongosanuncios__cerrar svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

/* ===================================================================
 * ACCESIBILIDAD
 * =================================================================== */

.cursohongosanuncios a:focus-visible,
.cursohongosanuncios button:focus-visible {
	outline: var(--chanun-foco-ancho) solid var(--chanun-foco-color);
	outline-offset: var(--chanun-foco-offset);
}

/* Foco solo por teclado: se retira el anillo del click en navegadores viejos. */
.cursohongosanuncios a:focus:not(:focus-visible),
.cursohongosanuncios button:focus:not(:focus-visible) {
	outline: none;
}

.cursohongosanuncios__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cursohongosanuncios *,
	.cursohongosanuncios *::before,
	.cursohongosanuncios *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

@media print {
	.cursohongosanuncios {
		display: none !important;
	}
}

/* ===================================================================
 * AVISO EN EL EDITOR
 * =================================================================== */

/*
 * Con anclaje fijo el widget no ocupa sitio en el flujo: sin este asidero no
 * habria forma de volver a seleccionarlo en el lienzo. Nunca sale en el front.
 */
.cursohongosanuncios-editor-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px dashed #b4b4c0;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.03);
	color: #6b6b76;
	font-size: 12px;
	line-height: 1.4;
}