/* Levapan Elements — Dato destacado (tip box)
 *
 * Dos modos sobre el MISMO DOM (el nodo nunca se mueve, los handlers
 * sobreviven): tarjeta inline por defecto, y modo flotante cuando el JS añade
 * .lv-tip--floating al cruzar el breakpoint del widget. El breakpoint es por
 * widget, así que aquí no hay media queries de modo: el primer paint lo cubre
 * el <style> inline que imprime render().
 */

.lv-tip-box {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	background-color: #fceee3;
	border-radius: 12px;
	padding: 24px 32px;
}

/* Trigger inerte en modo tarjeta: solo es el icono decorativo. Selector
   compuesto a propósito: los estilos globales de botón del kit de Elementor
   (`.elementor-kit-N button`) ganan a una sola clase. */
.lv-tip-box .lv-tip-box__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	pointer-events: none;
	cursor: default;
	color: inherit;
}

.lv-tip-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--lv-tip-icon-size, 28px);
	line-height: 1;
	color: var(--lv-tip-icon-color, inherit);
}

.lv-tip-box__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.lv-tip-box__icon i {
	font-size: inherit;
}

.lv-tip-box__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.lv-tip-box__title {
	margin: 0;
	font-weight: 700;
}

.lv-tip-box__text > :last-child {
	margin-bottom: 0;
}

.lv-tip-box .lv-tip-box__close {
	display: none;
}

/* --- Modo flotante (clase añadida por el JS bajo el breakpoint) --- */

.lv-tip-box.lv-tip--floating {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.lv-tip-box.lv-tip--floating .lv-tip-box__trigger {
	pointer-events: auto;
	cursor: pointer;
	width: var(--lv-tip-btn-size, 48px);
	height: var(--lv-tip-btn-size, 48px);
	background-color: var(--lv-tip-btn-bg, #fceee3);
	border-radius: var(--lv-tip-btn-radius, 12px);
	transition: filter 0.2s ease;
}

.lv-tip-box.lv-tip--floating .lv-tip-box__trigger:hover,
.lv-tip-box.lv-tip--floating .lv-tip-box__trigger:focus-visible {
	filter: brightness(0.96);
}

.lv-tip-box.lv-tip--floating[data-lv-float="right"] .lv-tip-box__trigger {
	margin-left: auto;
}

.lv-tip-box.lv-tip--floating[data-lv-float="left"] .lv-tip-box__trigger {
	margin-right: auto;
}

/* Modo posicionado (data-lv-position, solo con la clase del JS). En absolute
   el containing block es el .e-con padre: el <style> inline de render() pone
   position:static al .elementor-widget, que Elementor posiciona. Misma
   limitación que el drawer del filtro: un ancestro con transform/filter
   permanente ancla el fixed al ancestro, no al viewport. */
.lv-tip-box.lv-tip--floating[data-lv-position="fixed"] {
	position: fixed;
}

.lv-tip-box.lv-tip--floating[data-lv-position="absolute"] {
	position: absolute;
}

.lv-tip-box.lv-tip--floating[data-lv-position] {
	z-index: var(--lv-tip-float-z, 999);
}

.lv-tip-box.lv-tip--floating[data-lv-position][data-lv-float="right"] {
	right: var(--lv-tip-float-x, 16px);
	left: auto;
}

.lv-tip-box.lv-tip--floating[data-lv-position][data-lv-float="left"] {
	left: var(--lv-tip-float-x, 16px);
	right: auto;
}

.lv-tip-box.lv-tip--floating[data-lv-position][data-lv-anchor="top"] {
	top: var(--lv-tip-float-y, 16px);
	bottom: auto;
}

.lv-tip-box.lv-tip--floating[data-lv-position][data-lv-anchor="bottom"] {
	bottom: var(--lv-tip-float-y, 16px);
	top: auto;
}

.lv-tip-box.lv-tip--floating .lv-tip-box__icon {
	font-size: var(--lv-tip-btn-icon-size, 22px);
	color: var(--lv-tip-btn-color, var(--lv-tip-icon-color, inherit));
}

/* Popover anclado bajo el botón, al lado elegido. En modo anclado siempre
   hacia abajo (en prosa de artículo siempre hay página debajo); en modo
   posicionado la dirección la decide data-lv-anchor más abajo. */
.lv-tip-box.lv-tip--floating .lv-tip-box__panel {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	z-index: 99;
	width: min(var(--lv-tip-pop-width, 320px), calc(100vw - 32px));
	background-color: var(--lv-tip-pop-bg, #fceee3);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.lv-tip-box.lv-tip--floating[data-lv-float="right"] .lv-tip-box__panel {
	right: 0;
}

.lv-tip-box.lv-tip--floating[data-lv-float="left"] .lv-tip-box__panel {
	left: 0;
}

/* Modo posicionado anclado abajo: el panel abre hacia arriba. Con anchor top
   no hace falta regla, la base ya abre hacia abajo. */
.lv-tip-box.lv-tip--floating[data-lv-anchor="bottom"] .lv-tip-box__panel {
	top: auto;
	bottom: calc(100% + 8px);
}

/* 4 clases: pisa el display:none del <style> inline anti-FOUC (2 clases). */
.lv-tip-box.lv-tip--floating.is-open .lv-tip-box__panel {
	display: flex;
}

/* Hueco para la ✕ sobre la primera línea del contenido. */
.lv-tip-box.lv-tip--floating .lv-tip-box__title,
.lv-tip-box.lv-tip--floating .lv-tip-box__text {
	padding-inline-end: 20px;
}

.lv-tip-box.lv-tip--floating .lv-tip-box__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	min-width: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: var(--lv-tip-close-size, 20px);
	line-height: 1;
	color: var(--lv-tip-close-color, inherit);
}

@media (prefers-reduced-motion: reduce) {
	.lv-tip-box.lv-tip--floating .lv-tip-box__trigger {
		transition: none;
	}
}

.lv-editor-notice {
	padding: 12px 16px;
	border: 1px dashed #cf1d1d;
	border-radius: 8px;
	background: #fdf3f3;
	color: #303030;
	font-size: 14px;
	line-height: 1.4;
}