/*
 * EL Membros - identidade visual compartilhada.
 *
 * Cores e tipografia centralizadas em variaveis CSS para troca num unico lugar.
 *
 * Auburn Blue (--el-azul): #03244d, confirmado na spec da area do aluno
 * (spec-area-aluno-completa.md). O tom anterior #0b2341 fica registrado como
 * alternativo. Trocar AQUI caso o kit de identidade defina outro valor.
 */

:root {
	--el-azul: #03244d;        /* Auburn Blue - confirmado (titulos/estrutura). */
	--el-azul-alt: #0b2341;    /* Tom alternativo registrado. */
	--el-laranja: #e86100;     /* Auburn Orange - CONFIRMADO (acao/CTA). */
	--el-laranja-escuro: #c44f00;
	--el-branco: #ffffff;
	--el-cinza-claro: #f5f6f8;
	--el-cinza-borda: #d9dde3;
	--el-texto: #1c2733;

	--el-fonte-titulo: Georgia, "Times New Roman", serif;  /* 700 nos titulos. */
	--el-fonte-corpo: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	--el-raio: 8px;
	--el-sombra: 0 1px 3px rgba(11, 35, 65, 0.12);
}

/* Texto sempre a esquerda. Nunca justificar. */
.el-painel,
.el-ferramenta,
.el-aviso {
	font-family: var(--el-fonte-corpo);
	color: var(--el-texto);
	text-align: left;
	line-height: 1.5;
}

.el-painel__titulo,
.el-secao__titulo,
.el-secao__subtitulo {
	font-family: var(--el-fonte-titulo);
	font-weight: 700;
	color: var(--el-azul);
	text-align: left;
}

.el-painel__titulo { font-size: 1.8rem; margin: 0 0 1rem; }
.el-secao { margin: 1.5rem 0; padding: 1.25rem; background: var(--el-branco); border: 1px solid var(--el-cinza-borda); border-radius: var(--el-raio); box-shadow: var(--el-sombra); }
.el-secao__titulo { font-size: 1.3rem; margin: 0 0 .75rem; }
.el-secao__subtitulo { font-size: 1.05rem; margin: 1rem 0 .5rem; }

/* Listas */
.el-lista { list-style: none; margin: 0; padding: 0; }
.el-lista li { padding: .6rem 0; border-bottom: 1px solid var(--el-cinza-borda); }
.el-lista li:last-child { border-bottom: 0; }
.el-lista__titulo { font-weight: 600; display: block; }
.el-lista__meta { color: #5b6b7b; font-size: .9rem; }

/* Botao / CTA */
.el-botao {
	display: inline-block;
	background: var(--el-laranja);
	color: var(--el-branco) !important;
	font-weight: 600;
	text-decoration: none;
	padding: .65rem 1.2rem;
	border-radius: var(--el-raio);
	border: 0;
	cursor: pointer;
	transition: background .15s ease;
}
.el-botao:hover,
.el-botao:focus { background: var(--el-laranja-escuro); }

/* Aviso */
.el-aviso {
	background: var(--el-cinza-claro);
	border-left: 4px solid var(--el-laranja);
	padding: .85rem 1rem;
	border-radius: var(--el-raio);
}
.el-aviso a { color: var(--el-laranja); }

/* -----------------------------------------------------------------------
 * Area do aluno: cabecalho + cards (curso / ferramentas / materiais)
 * --------------------------------------------------------------------- */
.el-painel__cabecalho { margin: 0 0 1.5rem; }
.el-painel__subtitulo { margin: .25rem 0 0; color: #5b6b7b; }

.el-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.25rem;
	align-items: start;
}

.el-card {
	background: var(--el-branco);
	border: 1px solid var(--el-cinza-borda);
	border-radius: var(--el-raio);
	box-shadow: var(--el-sombra);
	padding: 1.25rem;
}
.el-card__titulo {
	font-family: var(--el-fonte-titulo);
	font-weight: 700;
	color: var(--el-azul);
	font-size: 1.25rem;
	text-align: left;
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--el-laranja);
}
.el-card__subtitulo {
	font-family: var(--el-fonte-titulo);
	font-weight: 700;
	color: var(--el-azul);
	font-size: 1.02rem;
	margin: 1rem 0 .4rem;
}
.el-card__texto { margin: 0 0 1rem; }
.el-card__texto--suave { color: #5b6b7b; }

/* Botao pequeno (acao por item de lista) */
.el-botao--peq { padding: .35rem .8rem; font-size: .85rem; white-space: nowrap; }

/* Lista de ferramentas: info a esquerda, botao a direita */
.el-lista--ferramentas .el-lista__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}
.el-lista__info { display: flex; flex-direction: column; }
.el-lista__pendente { color: #8a96a3; font-size: .8rem; font-style: italic; }

/* Card do curso: nome + progresso */
.el-card__nome-curso { font-family: var(--el-fonte-titulo); font-weight: 700; color: var(--el-azul); font-size: 1.1rem; margin: 0 0 .35rem; }
.el-progresso { margin: .25rem 0 1rem; }
.el-progresso__barra { background: var(--el-cinza-borda); border-radius: 999px; height: 8px; overflow: hidden; }
.el-progresso__barra > span { display: block; height: 100%; background: var(--el-laranja); border-radius: 999px; }
.el-progresso__texto { display: inline-block; margin-top: .3rem; font-size: .82rem; color: #5b6b7b; }

/* Card de materiais ocupa a largura toda (pastas em acordeao abaixo do grid) */
.el-card--full { grid-column: 1 / -1; }

/* Pastas de materiais (acordeao nativo via <details>) */
.el-pastas { display: flex; flex-direction: column; gap: .6rem; }
.el-pasta { border: 1px solid var(--el-cinza-borda); border-radius: var(--el-raio); background: var(--el-cinza-claro); overflow: hidden; }
.el-pasta__cabecalho {
	display: flex; align-items: center; justify-content: space-between; gap: .75rem;
	padding: .7rem 1rem; cursor: pointer; list-style: none;
	font-family: var(--el-fonte-titulo); font-weight: 700; color: var(--el-azul);
}
.el-pasta__cabecalho::-webkit-details-marker { display: none; }
.el-pasta__cabecalho::after { content: "+"; color: var(--el-laranja); font-weight: 700; font-size: 1.1rem; line-height: 1; }
.el-pasta[open] .el-pasta__cabecalho::after { content: "\2013"; } /* en dash quando aberto */
.el-pasta__nome { flex: 1; }
.el-pasta__contagem { background: var(--el-laranja); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; }
.el-pasta__tag { color: #8a96a3; font-size: .78rem; font-style: italic; font-family: var(--el-fonte-corpo); font-weight: 400; }
.el-pasta__corpo { padding: .25rem 1rem 1rem; background: var(--el-branco); }
.el-pasta__descricao { color: #5b6b7b; font-size: .88rem; margin: .5rem 0; }
.el-download { color: var(--el-laranja); text-decoration: none; font-weight: 600; }
.el-download:hover, .el-download:focus { text-decoration: underline; }

/* Responsivo */
@media (max-width: 600px) {
	.el-painel__titulo { font-size: 1.5rem; }
	.el-secao { padding: 1rem; }
	.el-cards { grid-template-columns: 1fr; }
	.el-card { padding: 1rem; }
}

/* -----------------------------------------------------------------------
 * Pagina de acolhimento (estado deslogado do [el_painel])
 * Layout: conteudo central (cresce) + faixa lateral direita STICKY (login).
 * --------------------------------------------------------------------- */
.el-acolhimento { font-family: var(--el-fonte-corpo); color: var(--el-texto); text-align: left; }

/* Desktop: centro ~66% (conteudo que cresce) + faixa lateral ~33% (login).
   minmax(0, ...) evita estouro do grid com conteudo/textos longos. */
.el-acolhimento--centro {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

/* Centro: container que aceita novos blocos (comunicados, materiais) no
   futuro, sem reprojetar a pagina. Espacamento uniforme via gap. */
.el-acolhimento__centro {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.el-acolhimento__titulo {
	font-family: var(--el-fonte-titulo);
	font-weight: 700;
	color: var(--el-azul);
	font-size: 1.35rem;
	margin: 0;
	text-align: left;
}

.el-ementa { margin: 0 0 .25rem; padding-left: 1.1rem; }
.el-ementa li { margin: 0 0 .4rem; }

/* Faixa lateral direita: o sticky fica NO ITEM do grid (align-self: start),
   cuja area equivale a altura do centro, permitindo acompanhar a rolagem. */
.el-acolhimento__login {
	position: sticky;
	top: 1rem;
	align-self: start;
}
.el-login-card {
	background: var(--el-branco);
	border: 1px solid var(--el-cinza-borda);
	border-top: 4px solid var(--el-laranja);
	border-radius: var(--el-raio);
	box-shadow: var(--el-sombra);
	padding: 1.5rem;
}
.el-login-card__arte { margin: 0 0 1rem; }
.el-login-card__arte .el-hero__img,
.el-login-card__arte img { max-width: 100%; height: auto; border-radius: var(--el-raio); display: block; }
.el-login-card__titulo {
	font-family: var(--el-fonte-titulo);
	font-weight: 700;
	color: var(--el-azul);
	font-size: 1.3rem;
	margin: 0 0 .5rem;
	text-align: left;
}
.el-login-card__texto { color: var(--el-texto); margin: 0 0 1rem; }
.el-login-card__ajuda { margin: .75rem 0 0; font-size: .9rem; }
.el-login-card__ajuda a { color: var(--el-laranja); }

/* Formulario de login (wp_login_form) com a identidade da marca. */
.el-login-form .login-username,
.el-login-form .login-password,
.el-login-form .login-remember,
.el-login-form .login-submit { margin: 0 0 .75rem; }
.el-login-form label {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	color: var(--el-texto);
	margin: 0 0 .25rem;
}
.el-login-form input[type="text"],
.el-login-form input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--el-fonte-corpo);
	font-size: 1rem;
	padding: .6rem .7rem;
	border: 1px solid var(--el-cinza-borda);
	border-radius: 6px;
	background: #fff;
	color: var(--el-texto);
}
.el-login-form .login-remember label { font-weight: 400; font-size: .85rem; }
.el-login-form .login-remember input { margin-right: .4rem; }
.el-login-form input[type="submit"] {
	width: 100%;
	background: var(--el-laranja);
	color: var(--el-branco);
	font-family: var(--el-fonte-corpo);
	font-weight: 600;
	font-size: 1.05rem;
	border: 0;
	border-radius: var(--el-raio);
	padding: .8rem 1.2rem;
	cursor: pointer;
	transition: background .15s ease;
}
.el-login-form input[type="submit"]:hover,
.el-login-form input[type="submit"]:focus { background: var(--el-laranja-escuro); }

.el-botao--grande { font-size: 1.05rem; padding: .8rem 1.6rem; }

/* Mobile: empilha em 1 coluna; a faixa de LOGIN vem PRIMEIRO (topo) e deixa
   de ser sticky (vira bloco normal). */
@media (max-width: 782px) {
	.el-acolhimento--centro { grid-template-columns: 1fr; }
	.el-acolhimento__login { order: -1; position: static; }
}

/* -----------------------------------------------------------------------
 * Correcao do item de menu "Area do Aluno" no cabecalho.
 * O tema pinta o item da pagina atual (current-menu-item) com fundo amarelo.
 * Forcamos texto BRANCO e fundo TRANSPARENTE em todos os estados. Como e um
 * override de estilo de tema (bloco de navegacao do WordPress), o !important e
 * necessario; mira nas classes do item e nos estados hover/focus/current.
 * --------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a:hover,
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a:focus,
.wp-block-navigation .wp-block-navigation-item.current_page_item > a,
.wp-block-navigation .wp-block-navigation-item a.current-menu-item,
.wp-block-navigation-item.current-menu-item > a,
.menu-item.current-menu-item > a,
.menu-item.current-menu-item > a:hover,
.menu-item.current-menu-item > a:focus,
.menu-item.current_page_item > a,
li.current-menu-item > a {
	color: #ffffff !important;
	background-color: transparent !important;
	background: transparent !important;
}

/* Estados normal/hover/focus do proprio item (cobre realce de fundo do tema). */
.wp-block-navigation .wp-block-navigation-item > a:hover,
.wp-block-navigation .wp-block-navigation-item > a:focus,
.menu-item > a:hover,
.menu-item > a:focus {
	color: #ffffff !important;
	background-color: transparent !important;
	background: transparent !important;
}