/**
 * Curso Hongos - Encuadernado / Binding
 *
 * Todo el estilo se consume desde variables CSS (--chbind-*). El widget imprime
 * un bloque <style> propio, cacheado por ID unico (#cursohongosbinding-<id>),
 * con los valores de escritorio, tablet y movil. De este modo el elemento puede
 * moverse al <body> ("portal") sin perder sus estilos, algo que no ocurriria si
 * dependiera del selector {{WRAPPER}} de Elementor.
 *
 * Aqui solo viven la estructura, los valores por defecto y el comportamiento.
 */

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

.cursohongosbinding {
	/* Caja */
	--chbind-ancho: 34px;
	--chbind-alto: 240px;
	--chbind-top: 0px;
	--chbind-bottom: 0px;
	--chbind-offset-lado: 0px;
	--chbind-adminbar: 0px;
	--chbind-z: 160;
	--chbind-display: block;
	--chbind-opacidad: 1;
	--chbind-blend: normal;
	--chbind-radio: 0px;

	/* Papel (capa de fondo) */
	--chbind-papel: linear-gradient(90deg, rgba(22, 21, 15, 0.05), transparent 70%);
	--chbind-sombra: none;
	--chbind-borde-ancho: 0px;
	--chbind-borde-estilo: solid;
	--chbind-borde-color: transparent;

	/* Anillas (capa de patron) */
	--chbind-anillas-img: none;
	--chbind-anillas-w: 70px;
	--chbind-anillas-h: 40px;
	--chbind-anillas-x: 0px;
	--chbind-anillas-y: 6px;
	--chbind-anillas-op: 1;
	--chbind-parallax: 0px;

	/* Linea de margen */
	--chbind-regla-offset: 48px;
	--chbind-regla-grosor: 1px;
	--chbind-regla-estilo: solid;
	--chbind-regla-color: rgba(0, 0, 0, 0.12);

	/* Etiqueta vertical */
	--chbind-etq-familia: inherit;
	--chbind-etq-size: 11px;
	--chbind-etq-peso: 600;
	--chbind-etq-ls: 0.18em;
	--chbind-etq-lh: 1.2;
	--chbind-etq-transform: uppercase;
	--chbind-etq-color: #8e8b80;
	--chbind-etq-hover: #f0f0f0;
	--chbind-etq-offset: 24px;

	/* Progreso de lectura */
	--chbind-prog-grosor: 3px;
	--chbind-prog-color: #00ff87;
	--chbind-prog-pista: rgba(0, 0, 0, 0.12);
	--chbind-prog-radio: 0px;
	--chbind-progreso: 0;

	/* Animacion */
	--chbind-dur: 0.5s;
	--chbind-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

.cursohongosbinding {
	display: var(--chbind-display);
	box-sizing: border-box;
	z-index: var(--chbind-z);
	opacity: var(--chbind-opacidad);
	mix-blend-mode: var(--chbind-blend);
	overflow: visible;
	pointer-events: none;
}

.cursohongosbinding *,
.cursohongosbinding *::before,
.cursohongosbinding *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* --- Modo de posicionamiento ------------------------------------- */

.cursohongosbinding[data-chb-modo="fijo"],
.cursohongosbinding[data-chb-modo="absoluto"] {
	top: calc(var(--chbind-top) + var(--chbind-adminbar));
	bottom: var(--chbind-bottom);
	width: var(--chbind-ancho);
}

.cursohongosbinding[data-chb-modo="fijo"] {
	position: fixed;
}

.cursohongosbinding[data-chb-modo="absoluto"] {
	position: absolute;
}

.cursohongosbinding[data-chb-modo="estatico"] {
	position: relative;
	width: var(--chbind-ancho);
	height: var(--chbind-alto);
	max-width: 100%;
}

/* --- Lado ---------------------------------------------------------- */

.cursohongosbinding[data-chb-modo="fijo"][data-chb-lado="izquierda"],
.cursohongosbinding[data-chb-modo="absoluto"][data-chb-lado="izquierda"] {
	left: var(--chbind-offset-lado);
}

.cursohongosbinding[data-chb-modo="fijo"][data-chb-lado="derecha"],
.cursohongosbinding[data-chb-modo="absoluto"][data-chb-lado="derecha"] {
	right: var(--chbind-offset-lado);
}

.cursohongosbinding[data-chb-modo="estatico"][data-chb-lado="izquierda"] {
	margin-right: auto;
	margin-left: var(--chbind-offset-lado);
}

.cursohongosbinding[data-chb-modo="estatico"][data-chb-lado="derecha"] {
	margin-left: auto;
	margin-right: var(--chbind-offset-lado);
}

/* ===================================================================
 * CAPA: PAPEL
 * =================================================================== */

.cursohongosbinding__papel {
	position: absolute;
	inset: 0;
	background: var(--chbind-papel);
	border-radius: var(--chbind-radio);
	box-shadow: var(--chbind-sombra);
	overflow: hidden;
}

.cursohongosbinding[data-chb-lado="izquierda"] .cursohongosbinding__papel {
	border-right: var(--chbind-borde-ancho) var(--chbind-borde-estilo) var(--chbind-borde-color);
}

.cursohongosbinding[data-chb-lado="derecha"] .cursohongosbinding__papel {
	border-left: var(--chbind-borde-ancho) var(--chbind-borde-estilo) var(--chbind-borde-color);
}

/* ===================================================================
 * CAPA: ANILLAS
 * =================================================================== */

.cursohongosbinding__anillas {
	position: absolute;
	inset: 0;
	background-image: var(--chbind-anillas-img);
	background-repeat: repeat-y;
	background-size: var(--chbind-anillas-w) var(--chbind-anillas-h);
	background-position: var(--chbind-anillas-x) calc(var(--chbind-anillas-y) + var(--chbind-parallax));
	opacity: var(--chbind-anillas-op);
	will-change: background-position;
}

/* ===================================================================
 * LINEA DE MARGEN
 * =================================================================== */

.cursohongosbinding__regla {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: var(--chbind-regla-grosor) var(--chbind-regla-estilo) var(--chbind-regla-color);
}

.cursohongosbinding[data-chb-lado="izquierda"] .cursohongosbinding__regla {
	left: var(--chbind-regla-offset);
}

.cursohongosbinding[data-chb-lado="derecha"] .cursohongosbinding__regla {
	right: var(--chbind-regla-offset);
}

/* ===================================================================
 * ETIQUETA VERTICAL
 * =================================================================== */

.cursohongosbinding__etiqueta {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	max-height: calc(100% - (var(--chbind-etq-offset) * 2));
}

.cursohongosbinding[data-chb-etq-align="arriba"] .cursohongosbinding__etiqueta {
	top: var(--chbind-etq-offset);
}

.cursohongosbinding[data-chb-etq-align="abajo"] .cursohongosbinding__etiqueta {
	bottom: var(--chbind-etq-offset);
}

.cursohongosbinding[data-chb-etq-align="centro"] .cursohongosbinding__etiqueta {
	top: 50%;
	transform: translate(-50%, -50%);
}

.cursohongosbinding__etiqueta-txt {
	writing-mode: vertical-rl;
	font-family: var(--chbind-etq-familia);
	font-size: var(--chbind-etq-size);
	font-weight: var(--chbind-etq-peso);
	letter-spacing: var(--chbind-etq-ls);
	line-height: var(--chbind-etq-lh);
	text-transform: var(--chbind-etq-transform);
	color: var(--chbind-etq-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	transition: color 0.25s ease;
}

.cursohongosbinding[data-chb-etq-dir="arriba"] .cursohongosbinding__etiqueta-txt {
	transform: rotate(180deg);
}

/* Solo la etiqueta recupera los eventos de puntero cuando es un enlace. */
a.cursohongosbinding__etiqueta-txt {
	pointer-events: auto;
	cursor: pointer;
}

a.cursohongosbinding__etiqueta-txt:hover,
a.cursohongosbinding__etiqueta-txt:focus-visible {
	color: var(--chbind-etq-hover);
}

a.cursohongosbinding__etiqueta-txt:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ===================================================================
 * PROGRESO DE LECTURA
 * =================================================================== */

.cursohongosbinding__progreso {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--chbind-prog-grosor);
	background: var(--chbind-prog-pista);
	border-radius: var(--chbind-prog-radio);
	overflow: hidden;
}

.cursohongosbinding[data-chb-prog-pos="interior"][data-chb-lado="izquierda"] .cursohongosbinding__progreso,
.cursohongosbinding[data-chb-prog-pos="exterior"][data-chb-lado="derecha"] .cursohongosbinding__progreso {
	right: 0;
}

.cursohongosbinding[data-chb-prog-pos="interior"][data-chb-lado="derecha"] .cursohongosbinding__progreso,
.cursohongosbinding[data-chb-prog-pos="exterior"][data-chb-lado="izquierda"] .cursohongosbinding__progreso {
	left: 0;
}

.cursohongosbinding[data-chb-prog-pos="centro"] .cursohongosbinding__progreso {
	left: 50%;
	transform: translateX(-50%);
}

.cursohongosbinding__progreso-fill {
	position: absolute;
	inset: 0;
	background: var(--chbind-prog-color);
	transform: scaleY(var(--chbind-progreso));
	transform-origin: top center;
}

/* ===================================================================
 * ENTRADA / REVELADO AL HACER SCROLL
 * =================================================================== */

.cursohongosbinding[data-chb-entrada="fade"],
.cursohongosbinding[data-chb-entrada="deslizar"] {
	transition: opacity var(--chbind-dur) var(--chbind-ease),
		transform var(--chbind-dur) var(--chbind-ease);
}

.cursohongosbinding[data-chb-entrada="fade"]:not(.cursohongosbinding--visible),
.cursohongosbinding[data-chb-entrada="deslizar"]:not(.cursohongosbinding--visible) {
	opacity: 0;
}

.cursohongosbinding[data-chb-entrada="deslizar"][data-chb-lado="izquierda"]:not(.cursohongosbinding--visible) {
	transform: translateX(-101%);
}

.cursohongosbinding[data-chb-entrada="deslizar"][data-chb-lado="derecha"]:not(.cursohongosbinding--visible) {
	transform: translateX(101%);
}

.cursohongosbinding--visible {
	opacity: var(--chbind-opacidad);
	transform: none;
}

/* ===================================================================
 * BARRA DE ADMINISTRACION DE WORDPRESS
 * =================================================================== */

body.admin-bar .cursohongosbinding[data-chb-adminbar="si"][data-chb-modo="fijo"] {
	--chbind-adminbar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .cursohongosbinding[data-chb-adminbar="si"][data-chb-modo="fijo"] {
		--chbind-adminbar: 46px;
	}
}

/* ===================================================================
 * MARCADOR EN EL EDITOR DE ELEMENTOR
 * El widget no ocupa espacio en el flujo, asi que sin este marcador seria
 * imposible seleccionarlo dentro del canvas.
 * =================================================================== */

.cursohongosbinding-editor-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px dashed #9da5ae;
	border-radius: 4px;
	background: rgba(157, 165, 174, 0.08);
	color: #6b7280;
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 12px;
	line-height: 1.3;
}

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

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

	.cursohongosbinding__anillas {
		--chbind-parallax: 0px;
	}
}

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