/**
 * Visual comum da conta do aluno (etapa 0 do Painel do aluno).
 *
 * = O Que =
 * As peças das áreas da conta: cabeçalho slim (claro; `--forte` = degradê), abas em segmentos com contador, título de
 * seção, cartão, data em destaque, etiquetas, botões e estado vazio. Montadas por `LECO_Conta_UI` ou direto pelas
 * classes nos templates dos addons.
 *
 * = Como =
 * A cor principal é a cor de destaque do MasterStudy (`--accent-100`, configurada no LMS); as outras saem dela. Tudo
 * escopado em `leco-conta-*`, com as propriedades definidas aqui para o tema não mudar a cara das peças. Até 600 px,
 * versão do celular (cabeçalho mais baixo, etiquetas e ação embaixo, abas deslizando para o lado).
 *
 * = Porque =
 * Decisões do Douglas (2026-10-28): cabeçalho slim claro nas áreas e em degradê só no Início, abas em segmentos com
 * contador, ícones de linha, uma cor só.
 *
 * @package Libraria_Ecossistema
 * @since 1.91.0
 */

:root {
	--leco-conta-cor: var( --accent-100, #6648f0 );
	--leco-conta-cor-escura: #3c1e7f;
	--leco-conta-cor-clara: #f1edff;
	--leco-conta-texto: #1f1f29;
	--leco-conta-apagado: #6b7280;
	--leco-conta-linha: #e8e7f0;
	--leco-conta-trilho: #ecebf3;
	--leco-conta-ok: #0f7a45;
	--leco-conta-ok-claro: #e6f6ee;
	--leco-conta-aviso: #8a5300;
	--leco-conta-aviso-claro: #fff4e5;
	--leco-conta-erro: #c62828;
	--leco-conta-erro-claro: #fdecec;
}

@supports ( color: color-mix( in srgb, red, blue ) ) {
	:root {
		--leco-conta-cor-escura: color-mix( in srgb, var( --leco-conta-cor ) 55%, #120838 );
		--leco-conta-cor-clara: color-mix( in srgb, var( --leco-conta-cor ) 9%, #fff );
	}
}

/* Cabeçalho slim. */
.leco-conta-cabecalho {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 16px;
	padding: 11px 16px;
	overflow: hidden;
	border-radius: 12px;
	background: var( --leco-conta-cor-clara );
}

.leco-conta-cabecalho::before {
	position: absolute;
	top: -50px;
	right: -30px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: var( --leco-conta-cor );
	opacity: 0.1;
	content: "";
}

.leco-conta-cabecalho > * {
	position: relative;
	z-index: 1;
}

.leco-conta-cabecalho__icone {
	display: flex;
	flex: 0 0 34px;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 3px 10px rgba( 102, 72, 240, 0.15 );
	color: var( --leco-conta-cor );
	font-size: 19px;
	line-height: 1;
}

.leco-conta-cabecalho__texto {
	/* Ocupa o espaço que sobra: uma frase longa quebra dentro dele, ao lado do ícone (e não embaixo). */
	flex: 1 1 220px;
	min-width: 0;
}

.leco-conta-cabecalho .leco-conta-cabecalho__titulo {
	margin: 0;
	padding: 0;
	color: var( --leco-conta-cor-escura );
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: normal;
}

.leco-conta-cabecalho .leco-conta-cabecalho__frase {
	margin: 1px 0 0;
	color: #4b4470;
	font-size: 12px;
	line-height: 1.45;
}

.leco-conta-cabecalho .leco-conta-cabecalho__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 0 auto;
	padding: 0;
	list-style: none;
}

.leco-conta-cabecalho__etiquetas li {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: #fff;
	color: var( --leco-conta-cor-escura );
	font-size: 11px;
	line-height: 1.5;
	white-space: nowrap;
}

.leco-conta-cabecalho__etiquetas + .leco-conta-cabecalho__acao {
	margin-left: 0;
}

.leco-conta-cabecalho__acao {
	margin-left: auto;
}

/* Degradê: só no Início. */
.leco-conta-cabecalho--forte {
	background: linear-gradient( 110deg, var( --leco-conta-cor ) 0%, var( --leco-conta-cor-escura ) 100% );
	color: #fff;
}

.leco-conta-cabecalho--forte::before {
	background: #fff;
	opacity: 0.07;
}

.leco-conta-cabecalho--forte .leco-conta-cabecalho__icone {
	background: rgba( 255, 255, 255, 0.16 );
	box-shadow: none;
	color: #fff;
}

.leco-conta-cabecalho--forte .leco-conta-cabecalho__titulo {
	color: #fff;
}

.leco-conta-cabecalho--forte .leco-conta-cabecalho__frase {
	color: rgba( 255, 255, 255, 0.84 );
}

.leco-conta-cabecalho--forte .leco-conta-cabecalho__etiquetas li {
	background: rgba( 255, 255, 255, 0.16 );
	color: #fff;
}

.leco-conta-cabecalho--forte .leco-conta-cabecalho__acao {
	border-color: #fff;
	background: #fff;
	color: var( --leco-conta-cor );
}

/* Abas em segmentos. */
.leco-conta-abas {
	max-width: 100%;
	margin: 0 0 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.leco-conta-abas::-webkit-scrollbar {
	display: none;
}

.leco-conta-abas__trilho {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border-radius: 10px;
	background: var( --leco-conta-trilho );
}

.leco-conta-abas .leco-conta-abas__aba {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 7px;
	color: var( --leco-conta-apagado );
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.leco-conta-abas .leco-conta-abas__aba:hover,
.leco-conta-abas .leco-conta-abas__aba:focus-visible {
	color: var( --leco-conta-texto );
}

.leco-conta-abas .leco-conta-abas__aba[aria-current="page"] {
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.08 );
	color: var( --leco-conta-texto );
	font-weight: 600;
}

.leco-conta-abas__contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: #dcd9ea;
	color: #4b4470;
	font-size: 11px;
	font-weight: 600;
}

[aria-current="page"] > .leco-conta-abas__contador {
	background: var( --leco-conta-cor );
	color: #fff;
}

.leco-conta-abas__contador--alerta,
[aria-current="page"] > .leco-conta-abas__contador--alerta {
	background: #d63638;
	color: #fff;
}

/* Título de seção. */
.leco-conta-secao {
	margin: 4px 0 12px;
}

.leco-conta-secao .leco-conta-secao__titulo {
	margin: 0;
	color: var( --leco-conta-texto );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.leco-conta-secao .leco-conta-secao__frase {
	margin: 2px 0 0;
	color: var( --leco-conta-apagado );
	font-size: 13px;
}

/* Cartão, data e etiquetas. */
.leco-conta-cartao {
	margin: 0 0 12px;
	padding: 14px 16px;
	border: 1px solid var( --leco-conta-linha );
	border-radius: 12px;
	background: #fff;
}

.leco-conta-data {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	min-width: 52px;
	padding: 5px 6px;
	border-radius: 10px;
	background: var( --leco-conta-cor-clara );
	color: var( --leco-conta-cor-escura );
	font-size: 10px;
	line-height: 1.25;
	text-transform: uppercase;
}

.leco-conta-data strong {
	color: var( --leco-conta-cor );
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
}

.leco-conta-etiqueta {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var( --leco-conta-cor-clara );
	color: var( --leco-conta-cor-escura );
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
}

.leco-conta-etiqueta--vip {
	background: var( --leco-conta-aviso-claro );
	color: var( --leco-conta-aviso );
}

.leco-conta-etiqueta--ok {
	background: var( --leco-conta-ok-claro );
	color: var( --leco-conta-ok );
}

.leco-conta-etiqueta--erro {
	background: var( --leco-conta-erro-claro );
	color: var( --leco-conta-erro );
}

/* Botões (4 px). */
.leco-conta-botao,
a.leco-conta-botao {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var( --leco-conta-cor );
	border-radius: 4px;
	background: var( --leco-conta-cor );
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.leco-conta-botao:hover,
.leco-conta-botao:focus-visible,
a.leco-conta-botao:hover,
a.leco-conta-botao:focus-visible {
	border-color: var( --leco-conta-cor-escura );
	background: var( --leco-conta-cor-escura );
	color: #fff;
}

.leco-conta-botao--secundario,
a.leco-conta-botao--secundario {
	background: #fff;
	color: var( --leco-conta-cor );
}

.leco-conta-botao--secundario:hover,
.leco-conta-botao--secundario:focus-visible,
a.leco-conta-botao--secundario:hover,
a.leco-conta-botao--secundario:focus-visible {
	border-color: var( --leco-conta-cor );
	background: var( --leco-conta-cor-clara );
	color: var( --leco-conta-cor );
}

/* Estado vazio. */
.leco-conta-vazio {
	padding: 28px 18px;
	border: 1px dashed #d6d4e2;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}

.leco-conta-vazio__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 10px;
	border-radius: 50%;
	background: var( --leco-conta-cor-clara );
	color: var( --leco-conta-cor );
	font-size: 26px;
	line-height: 1;
}

.leco-conta-vazio .leco-conta-vazio__titulo {
	margin: 0 0 4px;
	color: var( --leco-conta-texto );
	font-size: 15px;
	font-weight: 600;
}

.leco-conta-vazio .leco-conta-vazio__frase {
	margin: 0 0 14px;
	color: var( --leco-conta-apagado );
	font-size: 13px;
}

.leco-conta-vazio .leco-conta-vazio__acoes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

/* Celular. */
@media ( max-width: 600px ) {
	.leco-conta-cabecalho {
		padding: 10px 12px;
		gap: 8px 10px;
	}

	.leco-conta-cabecalho__icone {
		flex-basis: 30px;
		width: 30px;
		height: 30px;
		border-radius: 9px;
		font-size: 17px;
	}

	.leco-conta-cabecalho .leco-conta-cabecalho__titulo {
		font-size: 15px;
	}

	.leco-conta-cabecalho .leco-conta-cabecalho__frase {
		font-size: 11px;
	}

	.leco-conta-cabecalho .leco-conta-cabecalho__etiquetas {
		width: 100%;
		margin-left: 0;
	}

	.leco-conta-cabecalho__acao,
	.leco-conta-cabecalho__etiquetas + .leco-conta-cabecalho__acao {
		width: 100%;
		margin-left: 0;
		text-align: center;
	}

	.leco-conta-abas .leco-conta-abas__aba {
		padding: 6px 11px;
		font-size: 12px;
	}
}