/* ============================================================
   Reuma Acceso — control de usuario en el header (íconos de fuente)
   ============================================================ */

.reuma-acceso-header {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
}
.reuma-acceso-header a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	transition: color .2s ease, opacity .2s ease;
}
.reuma-acceso-header i,
.reuma-acceso-header .dashicons {
	line-height: 1;
	vertical-align: middle;
}
/* El ícono de usuario hereda el tamaño de los íconos del tema.
   El dashicon de logout lo igualamos a ese tamaño. */
.reuma-acceso-header .dashicons {
	font-size: 19px;
	width: 19px;
	height: 19px;
}

/* ---------- Color por defecto: BLANCO (header oscuro) ---------- */
.reuma-acceso-header,
.reuma-acceso-header a,
.reuma-acceso-header i,
.reuma-acceso-header .dashicons,
.reuma-acceso-header__name {
	color: #ffffff !important;
}

/* Hover: acento cian (nunca desaparece) */
.reuma-acceso-header a:hover,
.reuma-acceso-header a:hover i,
.reuma-acceso-header a:hover .dashicons {
	color: #31e0ff !important;
	opacity: 1;
}

/* ---------- Header claro / sticky: AZUL MARINO ---------- */
.themestek-sticky-header .reuma-acceso-header,
.themestek-sticky-header .reuma-acceso-header a,
.themestek-sticky-header .reuma-acceso-header i,
.themestek-sticky-header .reuma-acceso-header .dashicons,
.themestek-sticky-header .reuma-acceso-header__name,
.is_stuck .reuma-acceso-header,
.is_stuck .reuma-acceso-header a,
.is_stuck .reuma-acceso-header i,
.is_stuck .reuma-acceso-header .dashicons,
.is_stuck .reuma-acceso-header__name,
.ts-header-light .reuma-acceso-header,
.ts-header-light .reuma-acceso-header a,
.ts-header-light .reuma-acceso-header i,
.ts-header-light .reuma-acceso-header .dashicons,
.ts-header-light .reuma-acceso-header__name {
	color: #031b4e !important;
}
/* Hover en sticky/claro */
.themestek-sticky-header .reuma-acceso-header a:hover,
.themestek-sticky-header .reuma-acceso-header a:hover i,
.themestek-sticky-header .reuma-acceso-header a:hover .dashicons,
.is_stuck .reuma-acceso-header a:hover,
.is_stuck .reuma-acceso-header a:hover i,
.is_stuck .reuma-acceso-header a:hover .dashicons,
.ts-header-light .reuma-acceso-header a:hover,
.ts-header-light .reuma-acceso-header a:hover i,
.ts-header-light .reuma-acceso-header a:hover .dashicons {
	color: #0a8ea8 !important;
}

/* Nombre del usuario logueado */
.reuma-acceso-header__name {
	font-size: 14px;
	font-weight: 600;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Separador sutil entre nombre y logout */
.reuma-acceso-header--in .reuma-acceso-header__logout {
	padding-left: 9px;
	border-left: 1px solid currentColor;
}

@media (max-width: 767px) {
	.reuma-acceso-header__name { max-width: 110px; font-size: 13px; }
}