/* * Front do WP EAD. * * A linguagem visual é a do cartão: bloco sólido na cor primária, campos * claros por dentro, botão na cor de ação. Cores e arredondamento vêm de * EAD > Configurações > Aparência e entram como variáveis inline, então este * arquivo nunca traz cor fixa de cliente (regra 13 do CLAUDE.md). * * Classes em BEM com prefixo .ead- para o tema conseguir mirar sem adivinhar. */ :root { /* Sobrescritos pelas Configurações; estes são só o fallback. */ --ead-primaria: #0b5ea8; --ead-primaria-texto: #ffffff; --ead-acao: #3fae5a; --ead-acao-texto: #ffffff; --ead-campo: #eaf1fb; --ead-raio: 8px; /* Trocada em EAD > Configurações > Aparência. */ --ead-fonte: Roboto, "Helvetica Neue", Arial, sans-serif; --ead-fonte-tamanho: inherit; --ead-espaco: 1rem; --ead-borda: color-mix(in srgb, currentColor 18%, transparent); --ead-fundo-suave: color-mix(in srgb, currentColor 4%, transparent); --ead-sombra: 0 2px 10px rgba(0, 0, 0, .10); } /* * Tipografia. `inherit` por padrão: sem nada configurado, o EAD usa a fonte do * tema e não decide nada por conta própria. */ .ead-login, .ead-curso, .ead-aula, .ead-grade, .ead-card, .ead-capa, .ead-meta, .ead-curriculo, .ead-progresso, .ead-navegacao, .ead-professor, .ead-painel, .ead-duvidas, .ead-validar, .ead-anexos-lista, .ead-concluir, .ead-bloqueio, .ead-cartao-bloco { font-family: var(--ead-fonte); font-size: var(--ead-fonte-tamanho); } /* * Espaço em branco do código-fonte. * * O tema envolve o conteúdo da página num `
`. Com `white-space: pre`, a
 * indentação dos templates vira espaço de verdade na tela: primeira linha
 * recuada, vão entre a caixa e o texto do checkbox. Parecia CSS de alinhamento
 * e não era — era o HTML sendo levado ao pé da letra.
 *
 * Uma declaração resolve os 21 templates de uma vez, hoje e no que vier.
 */
.ead-login,
.ead-login *,
.ead-curso,
.ead-curso *,
.ead-aula,
.ead-aula *,
.ead-curriculo,
.ead-curriculo *,
.ead-card,
.ead-card *,
.ead-capa,
.ead-capa *,
.ead-duvidas,
.ead-duvidas *,
.ead-validar,
.ead-validar *,
.ead-painel,
.ead-painel *,
.ead-professor,
.ead-professor *,
.ead-anexos-lista,
.ead-anexos-lista *,
.ead-navegacao,
.ead-navegacao *,
.ead-bloqueio,
.ead-bloqueio *,
.ead-concluir,
.ead-concluir *,
.ead-meta,
.ead-meta *,
.ead-progresso,
.ead-progresso * {
	white-space: normal;
	text-indent: 0;
}

/* Bloco de código dentro de uma dúvida continua sendo bloco de código. */
.ead-duvidas pre,
.ead-duvidas code {
	white-space: pre-wrap;
}

/* -------------------------------------------------- Cartão, a peça base */

.ead-cartao-bloco {
	padding: calc(var(--ead-espaco) * 1.6);
	border-radius: calc(var(--ead-raio) * 1.6);
	background: var(--ead-primaria);
	color: var(--ead-primaria-texto);
	box-shadow: var(--ead-sombra);
}

.ead-cartao-bloco a {
	color: inherit;
}

/* -------------------------------------------------- Grade e cards */

.ead-grade {
	display: grid;
	gap: calc(var(--ead-espaco) * 1.5);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.ead-grade--2,
	.ead-grade--3,
	.ead-grade--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.ead-grade--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ead-grade--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * O card é uma coluna: imagem, título, resumo, e o rodapé (meta e progresso)
 * empurrado para baixo. Sem isso, card com resumo curto deixa a barra de
 * progresso subindo no meio e a grade fica desalinhada.
 */
.ead-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ead-borda);
	border-radius: var(--ead-raio);
	background: var(--ead-fundo-suave);
	transition: box-shadow .15s ease, transform .15s ease;
}

.ead-card:hover {
	box-shadow: var(--ead-sombra);
	transform: translateY(-2px);
}

.ead-card > * {
	margin: 0;
}

/*
 * `.ead-card > *` nao alcanca o que esta dentro do link, entao a margem que o
 * tema da ao h3 sobrevivia e abria um vao entre o titulo e a ficha tecnica.
 * Quem esta dentro do link zera a propria margem.
 */
.ead-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ead-card__link > * {
	margin: 0;
}

.ead-card__imagem {
	aspect-ratio: 16 / 9;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.ead-card__imagem img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ead-card__titulo {
	margin: 0;
	padding: var(--ead-espaco) var(--ead-espaco) 0;
	font-size: 1.05em;
	line-height: 1.3;
}

.ead-card__resumo {
	padding: .5em var(--ead-espaco) 0;
	font-size: .92em;
	line-height: 1.45;
	opacity: .8;
}

/*
 * Sobretitulo, igual ao do single do curso. Escopado no bloco porque a ficha
 * tecnica reaproveita `.ead-meta`, que vem depois neste arquivo e ganharia o
 * desempate por ordem.
 */
.ead-card__nivel {
	display: block;
	padding: var(--ead-espaco) var(--ead-espaco) 0;
	color: var(--ead-acao);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Com sobretitulo em cima, o titulo nao precisa do respiro inteiro. */
.ead-card__nivel + .ead-card__titulo {
	padding-top: .3em;
}

/* Empurra o rodapé para a base, alinhando os cards da linha. */
.ead-card .ead-card__meta {
	margin: auto 0 0;
	padding: var(--ead-espaco) var(--ead-espaco) 0;
	font-size: .85em;
}

.ead-card .ead-progresso {
	padding: .8em var(--ead-espaco) var(--ead-espaco);
}

/* Card sem rodapé nenhum ainda precisa de respiro embaixo. */
.ead-card__resumo:last-child,
.ead-card__titulo:last-child {
	padding-bottom: var(--ead-espaco);
}

/* -------------------------------------------------- Curso montado */

.ead-curso {
	display: flex;
	flex-direction: column;
	gap: calc(var(--ead-espaco) * 2.5);
}

.ead-curso__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--ead-espaco) * 1.5);
	align-items: center;
}

@media (min-width: 782px) {
	.ead-curso__hero {
		grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
	}

	/* Espelha as colunas sem mexer na ordem do HTML, que segue a da leitura. */
	.ead-curso--esquerda .ead-curso__imagem {
		order: -1;
	}
}

.ead-curso__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .8rem;
}

.ead-curso__categoria {
	margin: 0;
	color: var(--ead-acao);
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ead-curso__titulo {
	margin: 0;
	line-height: 1.1;
}

.ead-curso__resumo {
	max-width: 48ch;
	margin: 0;
	font-size: 1.05em;
	opacity: .75;
}

/* Metadados e progresso na mesma linha, como uma ficha tecnica. */
.ead-curso__dados {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1.4rem;
}

.ead-curso__acao {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	margin-top: .4rem;
}

.ead-curso__imagem img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 320px;
	height: auto;
	margin-inline: auto;
	border-radius: calc(var(--ead-raio) * 1.5);
}

.ead-curso__secao {
	margin: 0 0 var(--ead-espaco);
}

/* Dentro do painel quem espaca e o gap. */
.ead-curso .ead-meta,
.ead-curso .ead-progresso,
.ead-curso .ead-curriculo {
	margin-bottom: 0;
}

/* -------------------------------------------------- Capa e metadados */

/*
 * Sem recorte aqui. No card do catalogo o 16/9 existe para alinhar a grade;
 * no single nao ha grade para alinhar, e recortar destroi capa que seja logo
 * ou arte em pe. Limita a altura e deixa a proporcao original.
 */
.ead-capa__imagem {
	display: flex;
	justify-content: center;
}

.ead-capa__imagem img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 320px;
	height: auto;
	border-radius: var(--ead-raio);
}

.ead-capa__texto {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

/* So separa do que veio antes; capa sem imagem nao ganha vao no topo. */
.ead-capa__imagem + .ead-capa__texto {
	margin-top: var(--ead-espaco);
}

.ead-capa__titulo {
	margin: 0;
	line-height: 1.2;
}

.ead-capa__resumo {
	margin: 0;
	font-size: 1.05em;
	opacity: .8;
}
/*
 * Blocos avulsos empilhados encostam um no outro quando o Elementor nao poe
 * espaco entre os widgets. Dentro do painel e do card o gap zera isto.
 */
.ead-capa,
.ead-meta,
.ead-progresso,
.ead-professor {
	margin-bottom: var(--ead-espaco);
}

.ead-card .ead-progresso {
	margin-bottom: 0;
}

.ead-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem 1.4rem;
	margin: 0 0 var(--ead-espaco);
	padding: 0;
	list-style: none;
	font-size: .92em;
}

.ead-meta__item {
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

.ead-meta__valor {
	font-weight: 700;
}

.ead-meta__rotulo {
	opacity: .7;
}

/*
 * Icone por mascara e nao por : a cor sai de currentColor, entao segue o
 * tema, o modo escuro e a cor que o cliente escolher, sem uma segunda arte.
 */
.ead-meta__item--duracao::before,
.ead-meta__item--aulas::before,
.ead-meta__item--modulos::before,
.ead-meta__item--nivel::before,
.ead-meta__item--professores::before,
.ead-progresso--percentual::before,
.ead-progresso--fracao::before {
	content: "";
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--ead-icone) center / contain no-repeat;
	mask: var(--ead-icone) center / contain no-repeat;
	opacity: .55;
}

.ead-meta__item--duracao {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.ead-meta__item--aulas {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='2'/%3E%3Cpath d='M10 8.5l4.5 2.5-4.5 2.5z'/%3E%3C/svg%3E");
}

.ead-meta__item--modulos {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.ead-meta__item--nivel {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 19v-5M12 19V9M19 19V5'/%3E%3C/svg%3E");
}

.ead-meta__item--professores {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E");
}

.ead-progresso--percentual,
.ead-progresso--fracao {
	--ead-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- Progresso */

.ead-progresso {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.ead-progresso--barra {
	flex-direction: column;
	align-items: stretch;
	gap: .3rem;
}

/*
 * Cor no proprio fundo, e nao currentColor com opacity: `opacity` vale para o
 * elemento inteiro, entao a barra de progresso saia desbotada junto.
 */
.ead-progresso__trilho {
	height: 8px;
	border-radius: 999px;
	background: var(--ead-borda);
	overflow: hidden;
}

.ead-progresso__barra {
	height: 100%;
	border-radius: inherit;
	background: var(--ead-acao);
	transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ead-progresso__barra {
		transition: none;
	}
}

.ead-progresso__rotulo {
	font-size: .85em;
	opacity: .75;
}

/* -------------------------------------------------- Currículo */

.ead-curriculo {
	margin-bottom: var(--ead-espaco);
	border: 1px solid var(--ead-borda);
	border-radius: calc(var(--ead-raio) * 1.5);
	overflow: hidden;
}

.ead-curriculo__modulo + .ead-curriculo__modulo {
	border-top: 1px solid var(--ead-borda);
}

.ead-curriculo__cabecalho {
	margin: 0;
	font-size: 1em;
}

/*
 * Escopado pelo bloco pai de proposito. Tema que estiliza `button` por seletor
 * descendente (`.page-content button`, 0,1,1) ganha de uma classe sozinha, e o
 * cabecalho encolhia para a largura do texto, com a borda do tema em volta.
 */
.ead-curriculo .ead-curriculo__toggle {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	max-width: none;
	padding: 1.1em 1.3em;
	border: 0;
	border-radius: 0;
	background: var(--ead-fundo-suave);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

/*
 * A cor precisa vir junto do fundo. Tema que declara `button:hover` por seletor
 * descendente (`.page-content button:hover`, 0,2,1) ganha da regra base do
 * plugin (0,2,0) e pinta o texto de claro: nome do modulo, contador e seta
 * sumiam no fundo do hover. Escopar pelo bloco pai devolve o controle.
 */
.ead-curriculo .ead-curriculo__toggle:hover,
.ead-curriculo .ead-curriculo__toggle:focus-visible {
	background: var(--ead-borda);
	color: inherit;
}

.ead-curriculo__nome {
	display: flex;
	flex-direction: column;
	gap: .25em;
	min-width: 0;
}

.ead-curriculo__ordem {
	color: var(--ead-acao);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/*
 * Cor declarada, e nao herdada do