/* ============================================================
   GUIA_AYUDA — guía de ayuda paso a paso (JS en
   assets/js/modulos/guia_ayuda.js). Mismo componente y aspecto que
   ALPHA_CLOUD (public/assets/css/components/guia-ayuda.css): panel
   flotante no bloqueante abajo a la izquierda, con el borde de marca, y
   resaltado del elemento del paso. Aquí el panel va por encima del botón
   flotante de navegación (.nav_funciones_flotante, también abajo a la
   izquierda) para no taparlo cuando la ayuda lo señala. Colores derivados
   del color corporativo/personalizado (--nav_a_hover_COLOR).
   ============================================================ */

/* Botón de icono (estilo ALPHA_CLOUD: cuadrado de 36px, contorno de marca;
   --principal = relleno de marca). Sirve para el botón "i" y para los del panel. */
.guia_boton_icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--nav_a_hover_COLOR, #0076A5);
	border-radius: 10px;
	background: #ffffff;
	color: var(--nav_a_hover_COLOR, #0076A5);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.guia_boton_icono svg,
.guia_boton_icono i {
	width: 1em;
	height: 1em;
	margin: 0;
}
.guia_boton_icono:hover,
.guia_boton_icono:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
	outline: none;
}
.guia_boton_icono--principal,
.guia_boton_icono[aria-pressed="true"] {
	border-color: transparent;
	background: linear-gradient(135deg, var(--nav_a_hover_COLOR, #0076A5), var(--nav_a_hover_COLOR_medio, #3391b7));
	color: #ffffff;
}
.guia_boton_icono:disabled {
	opacity: .4;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* Panel flotante */
.guia_panel {
	position: fixed;
	left: 16px;
	/* por encima del botón flotante de navegación (4.2em + 10px) */
	bottom: calc(10px + 4.2em + 16px);
	z-index: 1100;
	box-sizing: border-box;
	width: min(22rem, calc(100vw - 32px));
	padding: 10px 16px 16px;
	border: 1px solid rgba(0, 118, 165, .25);
	border-left: 4px solid var(--nav_a_hover_COLOR, #0076A5);
	border-radius: 16px;
	background: #ffffff;
	color: #0f172a;
	box-shadow: 0 24px 70px rgba(15, 23, 42, .18);
	font-family: inherit;
}
.guia_panel[hidden] { display: none; }
.guia_cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.guia_contador {
	color: var(--nav_a_hover_COLOR, #0076A5);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.guia_titulo {
	margin: 6px 0;
	color: var(--nav_a_hover_COLOR, #0076A5);
	font-size: 1rem;
	font-weight: 700;
}
.guia_texto {
	margin: 0 0 12px;
	color: #0f172a;
	font-size: .875rem;
	line-height: 1.5;
}
.guia_acciones {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}

/* Elemento del paso actual: contorno y aro que late en el rojo de peligro de
   ALPHA_CLOUD (--app-danger, #dc3545), fijo e independiente del color
   personalizado del cliente, para que se localice al momento (también el
   botón flotante de la esquina). Los textos de la ayuda lo nombran como
   "marcado en rojo" y nunca por el color de la marca, que puede cambiar. */
.guia_resaltado {
	--guia-resaltado: #dc3545;
	z-index: 2;
	outline: 3px solid var(--guia-resaltado) !important;
	outline-offset: 4px;
	animation: guia_resaltado_pulso 1.4s ease-out infinite;
}
@keyframes guia_resaltado_pulso {
	0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, .45); }
	70%  { box-shadow: 0 0 0 16px rgba(220, 53, 69, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
/* La tarjeta "abrir apartados" de LOPD tiene su propia animación de entrada */
.lopd_boton_apartados .btn.guia_resaltado {
	animation: guia_resaltado_pulso 1.4s ease-out infinite;
}
/* El botón flotante se despliega con su rótulo mientras se señala */
.nav_funciones.nav_funciones_flotante .nav-link.guia_resaltado {
	max-width: 22em;
	gap: .8em;
}
.nav_funciones.nav_funciones_flotante .nav-link.guia_resaltado .nav_funciones_flotante_texto {
	opacity: 1;
}

@media screen and (max-width: 600px) {
	.guia_panel {
		left: 8px;
		right: 8px;
		width: auto;
		bottom: calc(10px + 3.4em + 12px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.guia_resaltado { animation: none; box-shadow: 0 0 0 8px rgba(220, 53, 69, .2); }
	.guia_boton_icono { transition: none; }
}