/* =========================================================
   TREZE HELP UI — TOOLTIP
   ========================================================= */


/* =========================================================
   ROOT
========================================================= */

#treze-help{
	position:fixed;
	right:20px;
	bottom:20px;
	z-index:9999;

	display:flex;
	flex-direction:column;
	align-items:flex-end;

	font-family:var(--font-sans);
}


/* =========================================================
   PANEL
========================================================= */

#treze-help-panel{
	position:relative;
	margin-bottom:12px;

	width:260px;
	padding:16px;

	background:var(--white);
	border-radius:var(--radius-md);
	box-shadow:var(--shadow-strong);

	opacity:0;
	transform:translateY(8px);
	pointer-events:none;

	transition:
		opacity .25s var(--ease-standard),
		transform .25s var(--ease-standard);
}

#treze-help-panel.is-open{
	opacity:1;
	transform:translateY(0);
	pointer-events:auto;
}


/* =========================================================
   TEXTO
========================================================= */

.treze-help-text{
	margin:0 0 10px;
	padding-right:18px;

	font-size:14px;
	line-height:1.45;

	color:var(--color-primary-900);
}

.treze-help-sign{
	font-size:12px;
	margin-bottom:12px;

	color:var(--color-primary-600);
}


/* =========================================================
   BOTONES BASE
========================================================= */

.treze-help-actions{
	display:flex;
	gap:10px;
}


/* BASE BUTTON */

.treze-btn{
	position:relative;

	display:flex;
	width:275px;
	height:41px;

	padding:0 20px;
	align-items:center;
	justify-content:center;

	border-radius:5px;
	text-decoration:none;

	font-size:13px;
	font-weight:600;

	color:var(--color-primary-900);

	background:linear-gradient(
	90deg,
	var(--color-accent-soft) 0%,
	var(--color-accent) 100%
	);

	box-shadow:0 2px 10.5px -1px rgba(0,0,0,.45);

	overflow:hidden;

	transition:
	transform .25s var(--ease-standard),
	box-shadow .25s var(--ease-standard),
	filter .25s var(--ease-standard);
}


/* =========================================================
   HOVER PRO
========================================================= */

.treze-btn::before{
	content:"";
	position:absolute;
	inset:0;

	background:linear-gradient(
	120deg,
	transparent 0%,
	rgba(255,255,255,.35) 50%,
	transparent 100%
	);

	transform:translateX(-120%);
	transition:transform .7s var(--ease-standard);
}

.treze-btn:hover{
	transform:translateY(-1px);

	box-shadow:
	0 6px 18px rgba(0,0,0,.35),
	0 0 0 1px rgba(255,255,255,.12) inset;

	filter:saturate(1.08);
}

.treze-btn:hover::before{
	transform:translateX(120%);
}

.treze-btn:active{
	transform:translateY(0);
	box-shadow:0 2px 8px rgba(0,0,0,.35);
}


/* =========================================================
   VARIANTES
========================================================= */

.treze-mail{
	background:linear-gradient(
	90deg,
	var(--color-primary-500) 0%,
	var(--color-primary-700) 100%
	);
	color:var(--white);
}

.treze-phone{
	background:linear-gradient(
	90deg,
	var(--color-primary-900) 0%,
	var(--color-primary-700) 100%
	);
	color:var(--white);
}


/* =========================================================
   TOGGLE
========================================================= */

#treze-help-toggle{
	height:41px;
	padding:0 14px;

	border:none;
	border-radius:5px;

	background:linear-gradient(
	180deg,
	var(--color-accent-soft) 0%,
	var(--color-accent) 100%
	);

	color:var(--color-primary-900);

	font-size:14px;
	font-weight:600;
	cursor:pointer;

	box-shadow:
	0 6px 18px rgba(201,128,40,.35),
	inset 0 1px 0 rgba(255,255,255,.35);

	transition:
	transform .2s var(--ease-standard),
	box-shadow .2s var(--ease-standard);
}

#treze-help-toggle:hover{
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(201,128,40,.45);
}


/* =========================================================
   CLOSE
========================================================= */

#treze-help-close{
	position:absolute;
	top:8px;
	right:10px;

	border:none;
	background:none;

	font-size:16px;
	cursor:pointer;
}

#treze-help-close:hover{
	color:var(--color-accent);
}