/* body {
	margin: 0;
	padding: 0;
	background-color: #DCDCDC;
	height: 100%;
}

ul {
	padding-left: 7px;
}

a.link_admin {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
}

a.link_admin:hover {
	color: #F60;
}

a.link_adm {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
}

a.link_adm:hover {
	color: #F60;
}

table.bordasimples {
	border-collapse: collapse;
}

table.bordasimples tr td {
	border: 1px solid #999999;
}

.style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

.style2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
}

.style4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #3A3FC1;
}

.style5 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #F60;
}

.style6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #3A3FC1;
}

.style7 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.style8 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}

.style9 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
}

#limites {
	display: table;
	background: #FFF;
}

#banner {
	width: 100%;
}

#barra_menu {
	background: #19254b;
	width: 100%;
	line-height: 26px;
	display: table;
	border: 1px 0px 1px 0px solid #2877B9;
}

#pesquisa {
	float: right;
	background: #19254b;
	display: none !important;
}

#menu_superior {
	float: left;
	display: none !important;
}

#menu_superior a.item {
	font: 12px Arial, Helvetica, sans-serif;
	font-weight: bold;
	float: left;
	padding: 6px 4px;
	color: #FFF;
	text-decoration: none;
}

#menu_superior a.item:hover {
	text-decoration: underline;
	padding: 6px 4px;
	color: #F60;
}

#corpo {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	min-height: 100vh;
}

#col_esquerda {
	display: none !important;
	float: left;
	width: 247px;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

#menu {
	float: left;
	background: #FFF;
	width: 235px;
	text-align: left;
	color: #FFF;
	margin-top: 5px;
	padding: 0px 5px 5px 5px;
	clear: both;
	display: table;
}

#col_direita {
	width: 230px;
	float: right;
}

#processo_seletivo {
	width: 230px;
	float: right;
	background: #ecebe9;
	border: 1px solid #CCC;
	text-align: center;
	padding: 15px 0px 15px 0px;
	margin-bottom: 10px;
}


#links_coluna_direita {
	width: 230px;
	float: right;
	background: #ecebe9;
	border: 1px solid #CCC;
	text-align: center;
	padding: 10px 0;
	margin-bottom: 10px;
}

#links_coluna_direita a img {
	width: 200px;
	height: 84px;
	object-fit: contain;
	border: 2px solid #ecebe9;
	margin-bottom: 3px;
}

#links_coluna_direita a:hover img {
	border: 2px solid #F60;
}

.galeria_curso img {
	width: 75px;
	margin: 3px;
	height: 75px;
	object-fit: contain;
}

.galeria_curso img:hover {
	transform: scale(1.05);
	box-shadow: 3px 3px 5px rgba(0, 38, 255, 0.2);
}

#saladeestudos {
	width: 230px;
	float: right;
	border: 1px solid #CCC;
	text-align: center;
	margin-bottom: 10px;
	padding: 5px 0px 5px 0px;
	background: #ecebe9;
}

#eventos {
	width: 230px;
	float: right;
	border: 1px solid #CCC;
	padding-bottom: 10px;
	margin-bottom: 10px;
	background: #ecebe9;
}

#eventos.item {
	float: left;
	width: 222px;
	margin: 4px;
	display: table;
	padding: 5px 0px 5px 0px;
	background: #ecebe9;
	border: 1px solid #CCC;
	text-align: center;
}

#eventos a.banner img {
	border: 2px solid #ecebe9;
	margin-bottom: 3px;
}

#eventos a.titulo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #000000;
}

#eventos a.banner:hover img {
	border: 2px solid #F60;
}

#eventos a.titulo:hover {
	color: #F60;
}

a.link_submenu {
	text-decoration: none;
	color: #666;
	display: block;
}

li.menu {
	list-style-type: none;
	color: #03F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

li.menusub {
	list-style-type: none;
	color: #03F;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 100%;
}

li.submenu {
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
	width: 100%;
}

li.submenu a {
	width: 100%;
	border: 1px solid #fff;
}

li.submenu2 {
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	position: relative;
	float: left;
	width: 100%;
}

li.submenu2 a {
	width: 100%;
	border: 1px solid #fff;
}

li.menu_link {
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	position: relative;
	float: left;
	width: 100%;
}

li.menu_link a {
	width: 100%;
	border: 1px solid #fff;
}

li.submenu:hover a,
li.submenu.hover a,
li.submenu2:hover a,
li.submenu2.hover a,
li.menu_link:hover a,
li.menu_link.hover a {
	background: #DBDBDB;
	width: 100%;
	border: 1px solid #999;
	float: left;
	display: block;
}

a.link_submenu:hover {
	color: #F60;
	width: 100%;
	display: block;
}

#menu_admin {
	width: 100%;
	border: 1px solid #CCC;
	margin-top: 20px;
}

 html li a {
	width: 100%;
}

#climatempo {
	width: 230px;
	height: 170px;
	float: left;
	text-align: center;
	padding: 10px 0px 10px 0px;
}

#contador_acesso {
	width: 230px;
	float: left;
	text-align: center;
}

#titulo_calendario {
	text-align: center;
	width: 219px;
	height: 20px;
	display: table;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #3A3FC1;
}

#titulo_calendario span {
	display: table-cell;
	vertical-align: middle;
}

#calendario {
	width: 220px;
	display: table;
	border: 1px solid #CCC;
	padding: 0px 0px 10px 0px;
}

#seta_calendario {
	padding-top: 10px;
	width: 225px;
	position: relative;
	overflow: hidden;
}

#seta_calendario img.seta1 {
	position: absolute;
	top: 37px;
	left: 22px;
	border: 0px;
}

#seta_calendario img.seta2 {
	position: absolute;
	top: 37px;
	right: 22px;
	border: 0px;
}

#calendario table.tabela {
	border-collapse: collapse;
	width: 200px;
	height: 162px;
}

#calendario table.tabela td {
	border: 1px solid #CCC;
	padding: 0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#calendario table.tabela tr.cabecalho {
	background: #ecebe9;
}

#calendario table.resumo_legenda {
	width: 200px;
}

#calendario table.resumo_legenda td.cabecalho {
	margin: 0.5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
}

#calendario table.resumo_legenda td.normal {
	margin: 0.5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

#conteudo {
	color: #000;
	width: 746px;
	text-align: left;
	margin: 5px 0px 10px 0px;
	float: right;
	display: table;
}

#slide_show {
	width: 500px;
	float: left;
}

.banner_home {
	margin-top: 10px;
	width: 500px;
	float: left;
}

#noticias {
	width: 500px;
	margin: 10px 0px 0px 0px;
	float: left;
	display: table;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
}

#noticias_item {
	margin: 0px 5px 0px 5px;
	width: 488px;
	display: table;

}

#noticias_item .data_noticia {
	width: 78px;
	float: left;
}

#noticias_item .descricao_noticia {
	width: 406px;
	float: left;
	padding-top: 3.5px;
}

#noticias_item .titulo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #000000;
}

#noticias_item a.titulo:hover {
	color: #03F;
}

.noticias_item a {
	text-decoration: none;
}

#noticias_item .link_noticia {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #F60;
}

.lista_link {
	width: 100%;
	height: 20px;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 20px;
	display: table;
	color: #000000;
}

.link_data_hora {
	color: #03F;
	float: left;
	width: 137px;
}

.link_titulo a {
	float: left;
	width: 605px;
}

.link_titulo a {
	color: #000000;
	text-decoration: none;
}

.link_titulo a:hover {
	color: #F60;
}

#paginacao {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

#destaques {
	width: 500px;
	float: left;
	border: 0px;
	padding-bottom: 10px;
	background: #FFFFFF;
	margin: 10px 0px 5px 0px;
	border-bottom: 1px solid #CCC;
}

#destaque.item {
	float: left;
	width: 235px;
	margin: 5px;
	display: table;
	padding: 5px 0px 5px 0px;
	background: #FFFFFF;
	text-align: center;
}

#destaque a.banner img {
	border: 2px solid #FFFFFF;
	margin-bottom: 3px;
}

#destaque a.titulo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: #000000;
}

#destaque a.banner:hover img {
	border: 2px solid #03F;
}

#destaque a.titulo:hover {
	color: #03F;
}

.link_veja_mais {
	float: left;
	text-align: center;
	width: 100%;
}

.link_veja_mais a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #03F;
	text-decoration: none;
}

.link_veja_mais a:hover {
	color: #F60;
}

#exibe_conteudo {
	width: 700px;
	padding: 3px;
	margin-top: 20px;
	list-style-position: inside;
}

#exibe_texto_conteudo {
	margin: 40px 10px 0px 6px;
}

#informacao_publicacao_conteudo {
	margin-top: 10px;
}

#titulo_conteudo {
	margin-top: 30px;
	text-align: center;
}

#blog {
	width: 500px;
	margin-top: 10px;
	display: table;
	float: left;
	text-align: center;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
}

#convenio {
	width: 500px;
	margin-top: 10px;
	display: table;
	float: left;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
}

#parceiros {
	width: 500px;
	margin: 15px 0px 0px 0px;
	float: left;
	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
}

#col_centro {
	width: 500px;
	float: left;
}

#rodape {
	width: 1000px;
	height: 82px;
	text-align: center;
	line-height: 23.33px;
}

.cabecalho_geral {
	width: 100%;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #3A3FC1;
	margin-top: 40px;
}

#subtopo_contato {
	width: 100%;
	text-align: center;
	margin-top: 40px;
}

#email {
	margin-top: 25px;
	width: 100%;
	display: table;
	text-align: center;
}

.campos_email {
	width: 410px;
	margin-top: 3px;
	text-align: right;
}

#cursos {
	margin-top: 50px;
}

.tipo_curso {
	margin-left: 40px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
}

.link_curso {
	margin: 5px 40px 5px 60px;
}

.link_curso a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #03F;
	text-decoration: none;
}

.link_curso a:hover {
	color: #F60;
}

#aba table.tabela {
	border-collapse: separate;
	border: 1px solid #CCC;
	text-align: left;
	margin-left: 1px;
	border-spacing: 1px;
}

#aba {
	width: 100%;
	padding: 0px 0px 3px 0px;
}

#aba_off {
	padding: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	background: #EEE9E9;
	border: 1px solid #CCC;
}

#aba_off a {
	text-decoration: none;
	color: #696969;
	display: block;
}

#aba_off a:hover {
	color: #000000;
}

#aba_on {
	padding: 0px 10px 0px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	border-left: 1px solid #CCC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
}

#aba_caixa {
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-right: 1px solid #CCC;
	padding: 5px;
}

/*#################################EFEITOS EM CAMPOS############################################### */

/* .editNoFocus {
	background-color: #FFF;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

.editFocus {
	background-color: #ecebe9;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
} */

/* ############################## INSCRIÇÃO DO VESTIBULAR ############################# */

/* #quadro_inscricao {
	margin-top: 20px;
}

#dados {
	height: 25px;
}

#instrucao {
	background: #ecebe9;
	border: 1px solid #CCC;
	padding: 5px
}

a.link_consulta_vestibular {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
	text-decoration: none;
}

a.link_consulta_vestibular:hover {
	color: #F60;
}

*/
/* =============================================================================
   Área do Aluno — layout dashboard (rotas ?p=areaalu*)
   Escopo: — não altera modo-legado / site institucional.
   ============================================================================= */

@import url('https://googleapis.com');

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	box-sizing: border-box;
	font-family: Poppins, sans-serif;
}


:root {
	/* Colors — Brand */
	--color-primary: #144396;
	--color-secondary: #F4AC13;

	/* Colors — Background */
	--color-bg-white: #FFFFFF;
	--color-bg-black: #000000;
	--color-bg-main: #F6F6F6;
	--color-bg-muted: #D9D9D9;

	/* Colors — Text */
	--color-text-primary: #0C0C0C;
	--color-text-secondary: #535353;
	--color-text-tertiary: #9CA3AF;
	--color-text-contrast: #FFFFFF;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 2px 6px rgba(0, 0, 0, .10);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
	--shadow-lg: 0 12px 26px rgba(0, 0, 0, .14);

	/* Typography — Desktop */
	--text-h1-desktop: 600 35px/1.2 inherit;
	--text-h2-desktop: 600 28px/1.2 inherit;
	--text-h3-desktop: 600 24px/1.3 inherit;
	--text-body1-desktop: 400 22px/1.6 inherit;
	--text-body2-desktop: 400 18px/1.6 inherit;
	--text-body3-desktop: 400 14px/1.5 inherit;
	--text-btn-normal: 400 19px/1 inherit;
	--text-btn-medium: 400 16px/1 inherit;
	--text-btn-small: 400 13px/1 inherit;

	/* Typography — Mobile */
	--text-h1-mobile: 600 30px/1.2 inherit;
	--text-h2-mobile: 600 24px/1.2 inherit;
	--text-h3-mobile: 600 20px/1.3 inherit;
	--text-body1-mobile: 400 18px/1.6 inherit;
	--text-body2-mobile: 400 15px/1.6 inherit;
	--text-body3-mobile: 400 12px/1.5 inherit;
}

/* Main */
.app-dashboard {
	background-color: var(--color-bg-main);
	min-height: 100vh;
}

/* Cabeçalho */
.header-fateb {
	background: var(--color-bg-white);
	box-shadow: var(--shadow-sm);
	height: 100px;
	padding-left: 30px;
	position: sticky;
	z-index: 999;
	top: 0;
	display: flex;
	justify-content: start;
	align-items: center;
}

.logo-fateb img {
	width: 150px;
	height: auto;
}

.dash-shell {
	min-height: 80vh;
	width: 100%;
	padding: 0 clamp(12px, 4vw, 28px);
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}

.dash-shell.login #conteudo.dash-page {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Área do aluno logado — conteúdo em largura total (sobrepõe #conteudo legado) */
body.modo-area-aluno #conteudo.dash-page,
body.modo-area-aluno #conteudo {
	width: 100%;
	max-width: 100%;
	float: none;
	display: block;
	margin: 0;
	box-sizing: border-box;
}

body.modo-area-aluno .dash-shell.login:has(.area-aluno-layout) {
	align-items: stretch;
	justify-content: flex-start;
	min-height: calc(100vh - 100px);
	padding: 0;
}

body.modo-area-aluno .dash-shell.login:has(.area-aluno-layout) #conteudo.dash-page {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 100px);
}

/* Layout em duas colunas: sidebar (desktop) + main */
body.modo-area-aluno .area-aluno-layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 1;
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
}

body.modo-area-aluno .dash-shell.login:has(.area-aluno-layout) .area-aluno-layout {
	flex: 1;
	min-height: 0;
}

body.modo-area-aluno .area-aluno-desktop-nav {
	display: none;
	flex: 0 0 280px;
	width: 280px;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--color-bg-main);
	color: #f4f4f5;
	padding: 20px 0 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 768px) {
	body.modo-area-aluno .area-aluno-desktop-nav {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 100px);
	}

	body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-tree {
		flex: 1;
	}
}

body.modo-area-aluno .area-aluno-main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	box-sizing: border-box;
	padding: clamp(16px, 3vw, 28px);
	background: var(--color-bg-main);
	overflow-x: auto;
}

@media (max-width: 767px) {
	body.modo-area-aluno .area-aluno-main {
		padding-top: max(56px, calc(16px + env(safe-area-inset-top)));
	}
}

/* Navegação lateral (desktop) — mesma árvore que no drawer mobile */
body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 8px 15px;
	border-bottom: 1px solid var(--color-bg-muted);
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-avatar {
	flex-shrink: 0;
	width: 35px;
	height: 35px;
	border-radius: var(--radius-full);
	background: var(--color-bg-muted);
	color: var(--color-text-contrast);
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-user-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-user-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-user-ra {
	font-size: 0.75rem;
	color: var(--color-text-secondary);
	letter-spacing: 0.02em;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-tree > ul {
	list-style: none;
	margin: 0;
	padding: 0 8px;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-tree > ul > li {
	margin-top: 4px;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-tree > ul > li > span {
	display: block;
	color: var(--color-text-secondary);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 14px 14px 6px;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-tree ul ul {
	list-style: none;
	margin: 0;
	padding: 0 0 8px 0;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text-tertiary);
	text-decoration: none;
	font-size: 0.9rem;
	padding: 10px 14px;
	border-radius: 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-link i {
	width: 1.1rem;
	text-align: center;
	color: var(--color-text-tertiary);
	opacity: 0.95;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-text-primary);
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-home {
	font-weight: 600;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-footer {
	margin-top: auto;
	padding: 16px 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-sair{
	color: #ff0000;
}

body.modo-area-aluno .area-aluno-desktop-nav .areaalu-nav-sair:hover {
	background: rgba(255, 0, 0, 0.12);
	color: #7c0000;
}

/* Painel administrativo — reutiliza layout da área do aluno */
body.modo-admin-panel.modo-area-aluno .dash-shell.login:has(.area-aluno-layout) {
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	min-height: calc(100vh - 100px);
	background: var(--color-bg-main, #f6f6f6);
}

body.modo-admin-panel.modo-area-aluno .area-aluno-main {
	background: var(--color-bg-main, #f6f6f6);
}

/* Login Área do Aluno */
.areaalu-login-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 50vh;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.areaalu-login-card {
	background: var(--color-bg-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
}

.areaalu-login-form {
	width: 100%;
	max-width: 380px;
	padding: clamp(24px, 5vw, 40px) clamp(18px, 4vw, 28px);
	display: flex;
	justify-content: center;
	align-items: start;
	flex-direction: column;
	gap: 15px;
	text-align: left;

	& .title-form {
		width: 100%;
		font-size: 24px;
		font-weight: 600;
		color: var(--color-text-primary);
	}

	& .subTitle-form {
		width: 100%;
		font-size: 16px;
		font-weight: 400;
		color: var(--color-text-secondary);
	}
}

.div-input {
	position: relative;
	width: 100%;
}

.div-input label {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--color-text-tertiary);
	background: var(--color-bg-white);
	padding: 0 4px;
	transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
	pointer-events: none;
	z-index: 1;
}

.div-input label.active {
	top: 0;
	font-size: 0.72rem;
	color: var(--color-text-tertiary, #9ca3af);
}

.div-input label.focused {
	color: var(--color-primary);
}

.div-input input {
	width: 100%;
	padding: 12px;
	font-size: 0.95rem;
	border: 1.5px solid var(--color-bg-muted);
	border-radius: 8px;
	outline: none;
	background: transparent;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	z-index: 0;
	text-align: left;
}

.div-input input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 60, 255, 0.12);
}

.div-input select {
	width: 100%;
	padding: 12px;
	font-size: 0.95rem;
	border: 1.5px solid var(--color-bg-muted);
	border-radius: var(--radius-md, 8px);
	outline: none;
	background: transparent;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	z-index: 0;
	appearance: auto;
	cursor: pointer;
	text-align: left;
}

.div-input select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(0, 60, 255, 0.12);
}

.div-input input:disabled {
	cursor: not-allowed;
	color: var(--color-text-secondary, #535353);
	opacity: 1;
}

/* Área do aluno: padding 12px explícito em formulários (.div-input), alinhado ao login */
body.modo-area-aluno .area-aluno-main .div-input input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="image"]):not([type="hidden"]),
body.modo-area-aluno .area-aluno-main .div-input select,
body.modo-area-aluno .area-aluno-main .div-input textarea {
	padding: 12px;
	box-sizing: border-box;
	text-align: left;
}

body.modo-area-aluno .area-aluno-main .div-input.div-input--password input {
	padding-right: 2.75rem;
}

.div-input--password input {
	padding-right: 2.75rem;
}

/* Ícone olho */
.div-input i {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	color: #94a3b8;
	cursor: pointer;
	z-index: 2;
	transition: color 0.2s;
}


/* ───── Link "Esqueceu senha?" ───── */
.areaalu-links {
	font-size: 14px;
	color: var(--color-text-secondary);
}

.areaalu-links a {
	color: var(--color-primary);
	text-decoration: underline;
	font-weight: 600;
	transition: all 0.1s ease-in;
}

.areaalu-links a:hover {
	text-decoration: underline;
	color: var(--color-secondary);
}

.areaalu-submit {
	background-color: var(--color-bg-black);
	width: 100%;
	color: var(--color-text-contrast);
	font-size: 16px;
	font-weight: 500;
	padding: 10px 6px;
	border: none;
	cursor: pointer;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	transition: all 0.1s ease-in-out;
}

.areaalu-submit:hover {
	background-color: var(--color-primary);
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.header-fateb {
		height: auto;
		min-height: 80px;
		padding: 14px 16px;
	}

	.logo-fateb img {
		width: min(140px, 42vw);
	}

	.dash-shell {
		min-height: calc(100vh - 88px);
		align-items: flex-start;
		padding-top: clamp(16px, 4vh, 32px);
	}

	.areaalu-login-wrap {
		min-height: auto;
	}

	.areaalu-login-card {
		max-width: 100%;
		border-radius: var(--radius-lg);
	}

	.areaalu-login-form .title-form {
		font-size: clamp(1.125rem, 4.2vw, 1.35rem);
	}

	.areaalu-login-form .subTitle-form {
		font-size: clamp(0.875rem, 2.8vw, 1rem);
	}
}

@media (max-width: 480px) {
	.header-fateb {
		min-height: 72px;
		padding: 12px 14px;
	}

	.logo-fateb img {
		width: 118px;
	}

	.dash-shell {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
		padding-bottom: max(16px, env(safe-area-inset-bottom));
	}

	.areaalu-login-form {
		padding: 22px 16px;
		gap: 12px;
	}

	/* Evita zoom automático no foco (iOS) */
	.div-input input {
		font-size: 16px;
	}

	.areaalu-links {
		font-size: 13px;
		line-height: 1.45;
	}

	.areaalu-submit {
		font-size: 16px;
		padding: 14px 10px;
		min-height: 48px;
	}

	.areaalu-submit:active {
		transform: translateY(0);
	}
}

@media (max-width: 380px) {
	.areaalu-login-card {
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-sm);
	}

	.div-input label {
		left: 10px;
		font-size: 0.85rem;
	}

	.div-input input {
		padding: 12px;
	}

	.div-input i {
		right: 12px;
	}
}