/**
 * Ecossistema Libraria — topo do celular (itens dos addons no cabeçalho do celular do tema).
 *
 * = O Que =
 * Ícones redondos (favoritos, carrinho) com contador, o botão "Entrar" e a foto da conta, alinhados com o logo e o menu
 * de três tracinhos. Com `.leco-topo-sem-painel`, o ícone do tema que abria o painel lateral some.
 *
 * Botões no padrão do site: cantos de 4 px, roxo #6648F0, letras maiúsculas (desde a 1.28.0; antes, bem arredondados).
 * No painel do menu de três tracinhos (lugar `menu`), os botões da conta ocupam a largura toda, e o título "Menu" do tema
 * some.
 *
 * Tudo com escopo em `.header_mobile .header_top` ou no painel do menu do celular (`.stm_lms_search_popup`): não muda o
 * computador.
 *
 * @package Libraria_Ecossistema
 * @since 1.27.0
 * @since 1.28.0 Padrão quadrado do site; botões no painel do menu (com ícone) e, logado, cartão "Olá, Nome!" com link.
 * @since 1.29.2 Retorno do toque: o item afunda e, enquanto a página seguinte carrega, mostra um círculo girando.
 */

.header_mobile .header_top .leco-topo-celular {
	--leco-topo-acento: #6648f0;
	--leco-topo-icone: #4a4a68;

	display: flex;
	align-items: center;
	gap: 2px;
}

.header_mobile .header_top .leco-topo-celular[hidden] {
	display: none;
}

.header_mobile .header_top .leco-topo-celular--antes {
	margin-left: auto;
}

.header_mobile .header_top .leco-topo-celular--fim {
	margin-left: 4px;
}

/* Com o id do cabeçalho do celular: a regra do tema que mostra o ícone (`#header-mobile … display: flex`) é mais forte que só as classes. */
#header-mobile .header_mobile .header_top.leco-topo-sem-painel .stm_header_top_toggler,
.header_mobile .header_top.leco-topo-sem-painel .stm_header_top_toggler {
	display: none;
}

.header_mobile .header_top .leco-topo__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--leco-topo-icone);
	text-decoration: none;
}

.header_mobile .header_top .leco-topo__item[hidden] {
	display: none;
}

.header_mobile .header_top .leco-topo__item svg {
	width: 24px;
	height: 24px;
}

.header_mobile .header_top .leco-topo__contador {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--leco-topo-acento);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.header_mobile .header_top .leco-topo__entrar {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 4px;
	background: var(--leco-topo-acento);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.header_mobile .header_top .leco-topo__entrar:hover,
.header_mobile .header_top .leco-topo__entrar:focus {
	color: #fff;
}

.header_mobile .header_top .leco-topo__foto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--leco-topo-acento);
	color: #fff;
	text-decoration: none;
}

.header_mobile .header_top .leco-topo__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header_mobile .header_top .leco-topo__foto svg {
	width: 22px;
	height: 22px;
}

/* Painel do menu de três tracinhos (lugar `menu`). */
.stm_lms_search_popup .leco-topo-celular--menu {
	--leco-topo-acento: #6648f0;

	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 22px;
}

.stm_lms_search_popup .leco-topo-celular--menu[hidden] {
	display: none;
}

/* Título "Menu" do tema fora do painel do menu do celular (pedido do Douglas): os botões ficam direto no topo. */
.stm_lms_search_popup .inner > h2 {
	display: none;
}

.stm_lms_search_popup .leco-topo-menu__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	border: 2px solid var(--leco-topo-acento);
	border-radius: 4px;
	background: var(--leco-topo-acento);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
}

.stm_lms_search_popup .leco-topo-menu__botao:hover,
.stm_lms_search_popup .leco-topo-menu__botao:focus {
	color: #fff;
}

.stm_lms_search_popup .leco-topo-menu__botao--contorno,
.stm_lms_search_popup .leco-topo-menu__botao--contorno:hover,
.stm_lms_search_popup .leco-topo-menu__botao--contorno:focus {
	background: #fff;
	color: var(--leco-topo-acento);
}

.stm_lms_search_popup .leco-topo-menu__botao svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Logado: cartão com foto, "Olá, Nome!" e "Bons estudos!", que leva ao painel do aluno. */
.stm_lms_search_popup .leco-topo-menu__perfil {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
	padding: 12px;
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
}

.stm_lms_search_popup .leco-topo-menu__perfil:hover,
.stm_lms_search_popup .leco-topo-menu__perfil:focus {
	text-decoration: none;
}

.stm_lms_search_popup .leco-topo-menu__seta {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-left: auto;
	color: var(--leco-topo-acento);
}

.stm_lms_search_popup .leco-topo-menu__foto {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--leco-topo-acento);
	color: #fff;
}

.stm_lms_search_popup .leco-topo-menu__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stm_lms_search_popup .leco-topo-menu__foto svg {
	width: 24px;
	height: 24px;
}

.stm_lms_search_popup .leco-topo-menu__quem {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.stm_lms_search_popup .leco-topo-menu__quem strong {
	overflow: hidden;
	color: #1d1b3a;
	font-size: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stm_lms_search_popup .leco-topo-menu__quem small {
	overflow: hidden;
	color: #6b6a80;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------------------------------
 * Retorno do toque (1.29.2): o toque "afunda" o item e, enquanto a página seguinte carrega, o item mostra que está
 * abrindo (`.leco-topo--abrindo`, posta pelo `topo-celular.js` só quando o link troca de página).
 * - Foto da conta: camada escura com um círculo branco girando por cima da foto.
 * - Ícones redondos (favoritos, carrinho): anel roxo girando em volta.
 * - Botões e cartão do menu de três tracinhos: esmaecidos, com um círculo pequeno girando à direita.
 * ------------------------------------------------------------------------------------------------------------------ */
.header_mobile .header_top .leco-topo-celular a,
.stm_lms_search_popup .leco-topo-celular--menu a {
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.12s ease, opacity 0.12s ease, filter 0.12s ease;
}

.header_mobile .header_top .leco-topo__item:active,
.header_mobile .header_top .leco-topo__foto:active,
.header_mobile .header_top .leco-topo__entrar:active {
	transform: scale(0.9);
	filter: brightness(0.85);
}

.stm_lms_search_popup .leco-topo-menu__botao:active,
.stm_lms_search_popup .leco-topo-menu__perfil:active {
	transform: scale(0.98);
	filter: brightness(0.92);
}

@keyframes leco-topo-girar {
	to {
		transform: rotate(360deg);
	}
}

/* Foto: escurece e gira um círculo branco por cima (a foto tem `overflow: hidden`, o círculo fica dentro). */
.header_mobile .header_top .leco-topo__foto {
	position: relative;
}

.header_mobile .header_top .leco-topo__foto.leco-topo--abrindo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(30, 20, 70, 0.55);
}

.header_mobile .header_top .leco-topo__foto.leco-topo--abrindo::after,
.header_mobile .header_top .leco-topo__item.leco-topo--abrindo::after,
.stm_lms_search_popup .leco-topo-celular--menu a.leco-topo--abrindo::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border-radius: 50%;
	animation: leco-topo-girar 0.7s linear infinite;
}

.header_mobile .header_top .leco-topo__foto.leco-topo--abrindo::after {
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
}

/* Ícones redondos: anel roxo em volta. */
.header_mobile .header_top .leco-topo__item.leco-topo--abrindo {
	color: var(--leco-topo-acento);
}

.header_mobile .header_top .leco-topo__item.leco-topo--abrindo::after {
	inset: 1px;
	border: 2px solid rgba(102, 72, 240, 0.2);
	border-top-color: var(--leco-topo-acento);
}

/* Menu de três tracinhos: esmaecido, com um círculo pequeno na cor do texto. */
.stm_lms_search_popup .leco-topo-celular--menu a.leco-topo--abrindo {
	position: relative;
	opacity: 0.7;
	pointer-events: none;
}

.stm_lms_search_popup .leco-topo-celular--menu a.leco-topo--abrindo::after {
	top: 50%;
	right: 14px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
}

/* O cartão "Olá, Nome!" tem a seta à direita: o círculo entra no lugar dela. */
.stm_lms_search_popup .leco-topo-menu__perfil.leco-topo--abrindo {
	color: var(--leco-topo-acento);
}

.stm_lms_search_popup .leco-topo-menu__perfil.leco-topo--abrindo .leco-topo-menu__seta {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.header_mobile .header_top .leco-topo__foto.leco-topo--abrindo::after,
	.header_mobile .header_top .leco-topo__item.leco-topo--abrindo::after,
	.stm_lms_search_popup .leco-topo-celular--menu a.leco-topo--abrindo::after {
		animation-duration: 2s;
	}
}