/**
 * Acabamento das telas do MasterStudy na conta: Meus cursos, Meus certificados e Configurações.
 *
 * = O Que =
 * Só CSS, por cima do HTML do MasterStudy (nada de template trocado): o título de cada tela vira a faixa lilás clara das
 * nossas abas (com o ícone de linha num quadrado branco), as abas de Meus cursos viram segmentos com o número no
 * mesmo contador, os títulos das partes de Configurações ficam no tamanho dos nossos títulos de seção e as listas
 * vazias (cursos, certificados) ganham a moldura do nosso estado vazio.
 *
 * = Como =
 * Tudo com escopo em `.masterstudy-account-container` e nas classes do MasterStudy de cada tela (BEM dele:
 * `masterstudy-enrolled-courses…`, `masterstudy-account-my-certificates…`, `masterstudy-account-settings…`), sempre com
 * o bloco pai da tela no seletor: o CSS do MasterStudy entra depois do nosso e tem seletores do mesmo peso, e assim o
 * nosso ganha sem `!important`. O ícone é
 * desenhado com dois pseudo-elementos: o `::before` é o quadrado branco e o `::after` é o SVG de `assets/icons/` como
 * máscara, na cor da conta. O círculo decorativo da faixa sai de um `radial-gradient`, porque os dois pseudo-elementos
 * já estão em uso. Cores pelos tokens de `conta.css` (`--leco-conta-*`).
 *
 * = Porque =
 * Etapa 0 do Painel do aluno (decisão do Douglas, 2026-10-28): as telas do MasterStudy ficam com o template dele (que
 * muda nas atualizações) e recebem só acabamento, para a conta inteira parecer uma coisa só. Se o MasterStudy trocar uma
 * classe, a tela volta ao visual dele, sem quebrar.
 *
 * @package Libraria_Ecossistema
 * @since 1.91.0
 */

/* ---------- Título de cada tela: a faixa lilás clara ---------- */
.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title,
.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title,
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 56px;
	margin: 0 0 16px;
	padding: 11px 16px 11px 62px;
	overflow: hidden;
	border-radius: 12px;
	background: radial-gradient( circle 65px at calc( 100% - 35px ) 15px, rgba( 102, 72, 240, 0.1 ) 64px, transparent 65px ), var( --leco-conta-cor-clara, #f1edff );
	color: var( --leco-conta-cor-escura, #3c1e7f );
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

@supports ( color: color-mix( in srgb, red, blue ) ) {
	.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title,
	.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title,
	.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title {
		background: radial-gradient( circle 65px at calc( 100% - 35px ) 15px, color-mix( in srgb, var( --leco-conta-cor ) 10%, transparent ) 64px, transparent 65px ), var( --leco-conta-cor-clara );
	}
}

/* O quadrado branco do ícone. */
.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title::before,
.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title::before,
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title::before {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 10px rgba( 102, 72, 240, 0.15 );
	content: "";
	transform: translateY( -50% );
}

/* O ícone de linha (máscara), na cor da conta. */
.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title::after,
.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title::after,
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title::after {
	position: absolute;
	top: 50%;
	left: 24px;
	width: 18px;
	height: 18px;
	background-color: var( --leco-conta-cor, #6648f0 );
	content: "";
	transform: translateY( -50% );
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title::after {
	-webkit-mask-image: url( ../icons/livro.svg );
	mask-image: url( ../icons/livro.svg );
}

.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title::after {
	-webkit-mask-image: url( ../icons/certificado.svg );
	mask-image: url( ../icons/certificado.svg );
}

.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title::after {
	-webkit-mask-image: url( ../icons/engrenagem.svg );
	mask-image: url( ../icons/engrenagem.svg );
}

/* ---------- Meus cursos: título em cima e as abas em segmentos embaixo ---------- */
.masterstudy-account-container .masterstudy-enrolled-courses-tabs {
	flex-wrap: wrap;
	align-items: flex-start;
	margin-bottom: 16px;
	border-bottom: 0;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title {
	/* Largura toda (e não `flex-basis: 100%`): no celular o MasterStudy põe este bloco em coluna. */
	flex: 0 0 auto;
	width: 100%;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__blocks {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 2px;
	max-width: 100%;
	margin: 0;
	padding: 4px;
	overflow-x: auto;
	border: 0;
	border-radius: 10px;
	background: var( --leco-conta-trilho, #ecebf3 );
	scrollbar-width: none;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block {
	margin: 0;
	padding: 7px 14px;
	border: 0;
	border-radius: 7px;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block.masterstudy-enrolled-courses-tabs__block_active {
	border: 0;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block-content {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block-title {
	color: var( --leco-conta-apagado, #6b6785 );
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block_active .masterstudy-enrolled-courses-tabs__block-title {
	color: var( --leco-conta-texto, #1f1b33 );
	font-weight: 600;
}

/* O número de cada aba no contador das nossas abas. */
.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin: 0;
	padding: 0 6px;
	border-radius: 999px;
	background: #dcd9ea;
	color: #4b4470;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block_active .masterstudy-enrolled-courses-tabs__block-value {
	background: var( --leco-conta-cor, #6648f0 );
	color: #fff;
}

/* ---------- Configurações: títulos das partes no tamanho dos nossos títulos de seção ---------- */
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__billing-title,
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__sessions-title,
.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__pass-title {
	margin-bottom: 12px;
	color: var( --leco-conta-texto, #1f1b33 );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

/* ---------- Listas vazias (Meus cursos, Meus certificados): a moldura do nosso estado vazio ---------- */
.masterstudy-account-container .masterstudy-enrolled-courses .masterstudy-enrolled-courses__empty,
.masterstudy-account-container .masterstudy-account-my-certificates__no-records {
	box-sizing: border-box;
	width: 100%;
	padding: 28px 18px;
	border: 1px dashed #d6d4e2;
	border-radius: 12px;
	background: #fff;
}

/* ---------- Celular ---------- */
@media ( max-width: 600px ) {
	.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title,
	.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title,
	.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title {
		min-height: 50px;
		padding: 10px 12px 10px 52px;
		font-size: 15px;
	}

	.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title::before,
	.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title::before,
	.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title::before {
		left: 12px;
		width: 30px;
		height: 30px;
		border-radius: 9px;
	}

	.masterstudy-account-container .masterstudy-enrolled-courses-tabs .masterstudy-enrolled-courses__title::after,
	.masterstudy-account-container .masterstudy-account-my-certificates .masterstudy-account-my-certificates__title::after,
	.masterstudy-account-container .masterstudy-account-settings .masterstudy-account-settings__title::after {
		left: 19px;
		width: 16px;
		height: 16px;
	}

	.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block {
		padding: 6px 11px;
	}

	.masterstudy-account-container .masterstudy-enrolled-courses-tabs__block-title {
		font-size: 12px;
	}
}