/*
 * Plataforma de Cursos Online - Estilo base
 * Paleta alinhada à logo (web/logo.webp) e referência institucional (fameccariri.edu.br)
 * Ajuste --primary, --secondary e --accent conforme as cores da sua logo
 */
:root {
	--primary: #0a2540;
	--primary-dark: #061a2d;
	--primary-light: #1a365d;
	--secondary: #1e3a5f;
	--accent: #2563eb;
	--accent-hover: #1d4ed8;
	--text: #1f2937;
	--text-muted: #6b7280;
	--bg: #ffffff;
	--bg-alt: #f8fafc;
	--border: #e2e8f0;
	--success: #059669;
	--warning: #d97706;
	--radius: 8px;
	--shadow: 0 1px 3px rgba(10, 37, 64, 0.1);
	--shadow-lg: 0 10px 25px rgba(10, 37, 64, 0.15);
	--header-height: 72px;
	--sidebar-width: 260px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-hover);
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- Layout público (header/footer) ---------- */
/* Header branco para destacar a logo azul */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	background: #ffffff;
	box-shadow: 0 1px 0 var(--border);
}

.site-header .container,
.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 100%;
	gap: 16px;
}
.site-header .site-nav {
	flex: 0 0 auto;
}
.site-header .site-logo {
	flex-shrink: 0;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--primary);
	font-weight: 700;
	font-size: 1.25rem;
}

.site-logo:hover {
	color: var(--primary);
}

.site-logo img {
	height: 44px;
	width: auto;
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav a {
	display: block;
	padding: 10px 16px;
	color: var(--text);
	font-weight: 500;
	border-radius: var(--radius);
	transition: background 0.2s, color 0.2s;
}

.site-nav a:hover {
	background: var(--bg-alt);
	color: var(--primary);
}

.site-nav .btn-nav {
	background: var(--accent);
	color: #fff !important;
}

.site-nav .btn-nav:hover {
	background: var(--accent-hover);
	color: #fff !important;
}

/* Hero (página inicial) - fundo com bannerprincipal.webp */
.hero {
	background: linear-gradient(135deg, rgba(10, 37, 64, 0.85) 0%, rgba(26, 54, 93, 0.75) 100%),
	            url('../bannerprincipal.webp') center center / cover no-repeat;
	background-color: var(--primary);
	color: #fff;
	padding: 80px 24px 100px;
	text-align: center;
	min-height: 380px;
	display: flex;
	align-items: center;
}

.hero-logo {
	display: inline-block;
	margin-bottom: 24px;
}
.hero-logo img {
	height: 56px;
	width: auto;
}

.hero h1 {
	margin: 0 0 16px;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.2;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.hero p {
	margin: 0 0 32px;
	font-size: 1.125rem;
	opacity: 0.95;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--radius);
	border: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.btn-primary {
	background: var(--accent);
	color: #fff;
}

.btn-primary:hover {
	background: var(--accent-hover);
}

.btn-outline {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255,255,255,0.8);
}

.btn-outline:hover {
	background: rgba(255,255,255,0.1);
	border-color: #fff;
}

/* Container e seções */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.section {
	padding: 64px 24px;
}

.section-title {
	margin: 0 0 8px;
	font-size: 1.75rem;
	color: var(--primary);
}

.section-subtitle {
	margin: 0 0 32px;
	color: var(--text-muted);
}

/* Cards (cursos, features) - ícones e hover */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.card {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 24px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	overflow: hidden;
}

.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 16px 40px rgba(10, 37, 64, 0.2);
	border-color: var(--accent);
}

.card {
	text-align: center;
}
.card-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
	color: #fff;
	border-radius: var(--radius);
	font-size: 1.5rem;
	margin: 0 auto 16px;
	transition: transform 0.3s ease, background 0.3s ease;
}

.card:hover .card-icon {
	transform: scale(1.1) rotate(5deg);
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
}

.card h3 {
	margin: 0 0 8px;
	font-size: 1.125rem;
	color: var(--primary);
	transition: color 0.3s ease;
}

.card:hover h3 {
	color: var(--accent);
}

.card p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.9375rem;
}

/* Footer */
.site-footer {
	background: var(--primary-dark);
	color: rgba(255,255,255,0.85);
	margin-top: 64px;
}

/* Parte superior do rodapé (logo) - fundo branco para contraste */
.footer-top {
	background: #fff;
	color: var(--text);
	padding: 40px 24px 36px;
	border-bottom: 1px solid var(--border);
}
.footer-top .container {
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}
.footer-top h3 {
	color: var(--primary);
	margin: 0 0 8px;
	font-size: 1.125rem;
}
.footer-top p {
	color: var(--text-muted);
	margin: 0;
	font-size: 0.9375rem;
}
.footer-top .footer-logo:hover {
	opacity: 0.85;
}

.site-footer > .container {
	padding: 48px 24px 24px;
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
}

.footer-logo {
	display: inline-block;
	margin-bottom: 12px;
}
.footer-logo img {
	height: 40px;
	width: auto;
}
.site-footer .footer-logo:hover {
	opacity: 0.9;
}

.site-footer .container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
}

.site-footer h3 {
	margin: 0 0 16px;
	font-size: 1rem;
	color: #fff;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: rgba(255,255,255,0.8);
}

.site-footer a:hover {
	color: #fff;
}

.footer-bottom {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.1);
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.6);
}

/* ---------- Área logada (aluno/gestor) com sidebar ---------- */
.layout-with-sidebar {
	display: flex;
	min-height: calc(100vh - var(--header-height));
}

.sidebar {
	width: var(--sidebar-width);
	background: var(--primary);
	color: #fff;
	padding: 24px 0;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--header-height));
}

/* Logo no canto inferior esquerdo da sidebar */
.sidebar-logo-bottom {
	display: block;
	margin-top: auto;
	padding: 20px 24px 0;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-logo-bottom img {
	height: 36px;
	width: auto;
}
.sidebar-logo-bottom:hover {
	opacity: 0.9;
}

.sidebar-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 24px;
	color: rgba(255,255,255,0.9);
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: all 0.3s ease;
	position: relative;
}

.sidebar-nav a i {
	font-size: 1.125rem;
	width: 20px;
	text-align: center;
}

.sidebar-nav a:hover {
	background: rgba(255,255,255,0.1);
	border-left-color: var(--accent);
	padding-left: 28px;
	transform: translateX(4px);
}

.sidebar-nav a.ativo {
	background: rgba(255,255,255,0.15);
	border-left-color: var(--accent);
	color: #fff;
	font-weight: 600;
}

.main-content {
	flex: 1;
	padding: 32px 24px;
	background: var(--bg-alt);
}

.page-title {
	margin: 0 0 24px;
	font-size: 1.5rem;
	color: var(--primary);
}

/* Formulários (login, registro) */
.form-card {
	max-width: 420px;
	margin: 48px auto;
	padding: 32px;
	background: var(--bg);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--border);
}

.form-card-logo {
	display: block;
	text-align: center;
	margin-bottom: 20px;
}
.form-card-logo img {
	height: 48px;
	width: auto;
}
.form-card-logo:hover {
	opacity: 0.9;
}

.form-card h1 {
	margin: 0 0 8px;
	font-size: 1.5rem;
	color: var(--primary);
}

.form-erro {
	background: #fef2f2;
	color: #b91c1c;
	padding: 10px 14px;
	border-radius: var(--radius);
	margin-bottom: 16px;
	font-size: 0.9375rem;
	border: 1px solid #fecaca;
}

.form-sucesso {
	background: #f0fdf4;
	color: #15803d;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	border: 1px solid #bbf7d0;
}

.btn-small {
	padding: 6px 12px;
	font-size: 0.875rem;
	margin-right: 8px;
}

.btn-danger {
	background: #b91c1c;
	color: #fff;
}
.btn-danger:hover {
	background: #991b1b;
	color: #fff;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}
.data-table th,
.data-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--border);
}
.data-table th {
	background: var(--bg-alt);
	font-weight: 600;
	color: var(--primary);
}
.data-table tr:hover td {
	background: var(--bg-alt);
}
.table-responsive {
	overflow-x: auto;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--text);
}

.form-group input {
	width: 100%;
	padding: 10px 14px;
	font-size: 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.form-group input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-card .btn {
	width: 100%;
	margin-top: 8px;
	padding: 12px;
}

.form-links {
	margin-top: 20px;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--text-muted);
}

.form-links a {
	color: var(--accent);
}

/* ========== ESTILOS MODERNOS PARA ÁREA DO ALUNO ========== */

/* Page Header Moderno */
.page-header-modern {
	margin-bottom: 32px;
	padding-bottom: 20px;
	border-bottom: 2px solid var(--border);
}

.page-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 8px 0;
}

.page-subtitle {
	color: var(--text-muted);
	font-size: 1.0625rem;
	margin: 0;
}

/* Action Bar */
.action-bar {
	margin-bottom: 24px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	background: var(--bg-alt);
	border-radius: var(--radius);
	border: 2px dashed var(--border);
}

.empty-icon {
	font-size: 4rem;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.empty-state h3 {
	margin: 0 0 12px 0;
	color: var(--primary);
}

.empty-state p {
	color: var(--text-muted);
	margin-bottom: 24px;
}

/* Alert Messages */
.alert {
	padding: 16px 20px;
	border-radius: var(--radius);
	margin-bottom: 24px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
	animation: slideIn 0.3s ease;
}

.alert-success {
	background: #d1fae5;
	color: #065f46;
	border-left: 4px solid var(--success);
}

.alert-error {
	background: #fee2e2;
	color: #991b1b;
	border-left: 4px solid #dc2626;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Courses Grid Moderno */
.courses-grid-modern {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.course-card-modern {
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--border);
	overflow: hidden;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow);
}

.course-card-modern:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
}

.course-card-header {
	padding: 20px;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.course-icon {
	font-size: 2.5rem;
	color: rgba(255,255,255,0.9);
}

.course-status-badge {
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.course-status-badge.completed {
	background: var(--success);
	color: #fff;
}

.course-status-badge.in-progress {
	background: var(--warning);
	color: #fff;
}

.course-card-body {
	padding: 20px;
	flex: 1;
}

.course-card-body h3 {
	margin: 0 0 12px 0;
	color: var(--primary);
	font-size: 1.25rem;
}

.course-card-body p {
	color: var(--text-muted);
	margin: 0 0 16px 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Progress Bar Moderno */
.progress-bar-modern {
	position: relative;
	height: 8px;
	background: var(--bg-alt);
	border-radius: 4px;
	overflow: hidden;
	margin-top: 12px;
}

.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
	border-radius: 4px;
	transition: width 0.5s ease;
	position: relative;
}

.progress-bar-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

.progress-text {
	position: absolute;
	right: 8px;
	top: -20px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--accent);
}

.course-card-footer {
	padding: 16px 20px;
	background: var(--bg-alt);
	display: flex;
	gap: 8px;
	border-top: 1px solid var(--border);
}

/* Dashboard Stats */
.dashboard-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.stat-card {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	color: #fff;
	padding: 24px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: var(--shadow-lg);
	transition: transform 0.3s ease;
}

.stat-card:hover {
	transform: translateY(-4px);
}

.stat-icon {
	font-size: 2.5rem;
	opacity: 0.9;
}

.stat-value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	font-size: 0.875rem;
	opacity: 0.9;
	margin-top: 4px;
}

/* Course Sections */
.course-sections {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.course-section {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
}

.section-title-modern {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border);
}

.section-title-modern i {
	color: var(--accent);
}

/* Lessons List */
.lessons-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lesson-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--bg-alt);
	border-radius: 8px;
	border: 1px solid var(--border);
	transition: all 0.3s ease;
}

.lesson-item:hover {
	background: #fff;
	box-shadow: var(--shadow);
	transform: translateX(4px);
}

.lesson-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

.text-success {
	color: var(--success);
}

.text-warning {
	color: var(--warning);
}

.lesson-content {
	flex: 1;
}

.lesson-content h4 {
	margin: 0 0 8px 0;
	color: var(--primary);
	font-size: 1.0625rem;
}

.lesson-content p {
	margin: 0 0 8px 0;
	color: var(--text-muted);
	font-size: 0.9375rem;
}

.lesson-meta {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.progress-badge {
	background: var(--accent);
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 600;
}

.lesson-actions {
	flex-shrink: 0;
}

/* Materials Grid */
.materials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

.material-card,
.material-card-modern {
	background: var(--bg-alt);
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--border);
	text-align: center;
	transition: all 0.3s ease;
}

.material-card:hover,
.material-card-modern:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: var(--accent);
}

.material-icon {
	font-size: 2.5rem;
	color: var(--accent);
	margin-bottom: 12px;
}

.material-card h4,
.material-card-modern h4 {
	margin: 0 0 8px 0;
	color: var(--primary);
	font-size: 1.0625rem;
}

/* Provas */
.provas-list,
.provas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.prova-card,
.prova-card-modern {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid var(--border);
	transition: all 0.3s ease;
}

.prova-card:hover,
.prova-card-modern:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
	transform: translateY(-2px);
}

.prova-icon {
	font-size: 2rem;
	color: var(--accent);
	margin-bottom: 12px;
}

.prova-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 12px 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}

/* Certificates */
.certificates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
}

.certificate-card {
	background: linear-gradient(135deg, #fff 0%, var(--bg-alt) 100%);
	padding: 32px;
	border-radius: 12px;
	border: 2px solid var(--border);
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
}

.certificate-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
}

.certificate-icon {
	font-size: 4rem;
	color: var(--accent);
	margin-bottom: 16px;
}

.certificate-card h3 {
	margin: 0 0 16px 0;
	color: var(--primary);
}

/* Certificate View */
.certificate-view {
	max-width: 900px;
	margin: 0 auto;
}

.certificate-paper {
	background: #fff;
	padding: 60px;
	border: 8px solid var(--primary);
	border-radius: 8px;
	text-align: center;
	box-shadow: var(--shadow-lg);
	margin-bottom: 32px;
}

.certificate-header h1 {
	font-size: 3rem;
	color: var(--primary);
	margin: 0 0 12px 0;
	font-weight: 700;
}

.certificate-name h2 {
	font-size: 2rem;
	color: var(--primary);
	margin: 24px 0;
	font-weight: 600;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 16px;
	display: inline-block;
}

.certificate-body h3 {
	font-size: 1.5rem;
	color: var(--primary);
	margin: 16px 0;
}

.certificate-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

/* Data Cards */
.data-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-bottom: 24px;
}

.data-card {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
}

.data-card h3 {
	margin: 0 0 20px 0;
	color: var(--primary);
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border);
}

.data-row {
	display: flex;
	justify-content: space-between;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

.data-row:last-child {
	border-bottom: none;
}

.data-row strong {
	color: var(--primary);
}

.badge {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.badge-success {
	background: #d1fae5;
	color: #065f46;
}

.badge-warning {
	background: #fef3c7;
	color: #92400e;
}

.badge-danger {
	background: #fee2e2;
	color: #991b1b;
}

.badge-info {
	background: #dbeafe;
	color: #1e40af;
}

/* Lesson Viewer */
.lesson-viewer {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.text-content {
	background: #fff;
	padding: 32px;
	border-radius: 12px;
	border: 1px solid var(--border);
	line-height: 1.8;
	font-size: 1.0625rem;
}

.lesson-description,
.lesson-attachments {
	background: var(--bg-alt);
	padding: 24px;
	border-radius: 8px;
	margin-top: 24px;
}

.lesson-attachments h3 {
	margin: 0 0 16px 0;
	color: var(--primary);
}

.attachments-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.attachments-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #fff;
	border-radius: 8px;
	margin-bottom: 8px;
}

.attachments-list-modern {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.attachment-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: #fff;
	border-radius: 8px;
	border: 1px solid var(--border);
}

.attachment-icon {
	font-size: 2rem;
	color: var(--accent);
}

.attachment-info {
	flex: 1;
}

.lesson-actions-panel {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 24px;
	background: var(--bg-alt);
	border-radius: 12px;
}

/* Prova Container */
.prova-container {
	max-width: 800px;
	margin: 0 auto;
}

.prova-info {
	background: var(--bg-alt);
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 24px;
	border-left: 4px solid var(--accent);
}

.questao-card {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--border);
	margin-bottom: 24px;
	box-shadow: var(--shadow);
}

.questao-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--border);
}

.questao-pontos {
	background: var(--accent);
	color: #fff;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.875rem;
	font-weight: 600;
}

.questao-texto {
	font-size: 1.0625rem;
	line-height: 1.8;
	margin-bottom: 20px;
	color: var(--primary);
}

.alternativas-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.alternativa-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--bg-alt);
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
}

.alternativa-item:hover {
	background: #fff;
	border-color: var(--accent);
	transform: translateX(4px);
}

.alternativa-item input[type="radio"] {
	margin: 0;
	cursor: pointer;
}

.prova-submit {
	text-align: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--border);
}

/* Buttons Modernos */
.btn-large {
	padding: 16px 32px;
	font-size: 1.0625rem;
}

.btn-outline {
	background: transparent;
	border: 2px solid var(--accent);
	color: var(--accent);
}

.btn-outline:hover {
	background: var(--accent);
	color: #fff;
}

/* ========== PERFIL EXPANDIDO ========== */
.profile-container {
	max-width: 1400px;
	margin: 0 auto;
}

/* Estatísticas do Perfil */
.profile-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-bottom: 32px;
}

.stat-card-modern {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.stat-card-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent), var(--accent-hover));
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.stat-card-modern:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
}

.stat-card-modern:hover::before {
	transform: scaleX(1);
}

.stat-icon-modern {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.75rem;
	flex-shrink: 0;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-content {
	flex: 1;
}

.stat-value-modern {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary);
	line-height: 1;
	margin-bottom: 4px;
}

.stat-label-modern {
	font-size: 0.875rem;
	color: var(--text-muted);
	font-weight: 500;
}

/* Grid de Conteúdo do Perfil */
.profile-content-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	margin-top: 24px;
}

/* Card Principal Expandido */
.profile-card-expanded {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.profile-card-header {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
	padding: 32px;
	color: #fff;
}

.profile-header-content {
	display: flex;
	align-items: center;
	gap: 24px;
}

.profile-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	border: 4px solid rgba(255,255,255,0.3);
	flex-shrink: 0;
}

.profile-header-info h2 {
	margin: 0 0 8px 0;
	font-size: 1.75rem;
	font-weight: 700;
}

.profile-email {
	margin: 0 0 12px 0;
	opacity: 0.9;
	font-size: 1rem;
}

.profile-badge {
	margin-top: 8px;
	display: inline-block;
}

.profile-card-body {
	padding: 32px;
}

.profile-section {
	margin-bottom: 0;
}

.section-title-inline {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 24px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--border);
}

.section-title-inline i {
	color: var(--accent);
}

/* Formulário Moderno */
.profile-form {
	margin: 0;
}

.form-row-modern {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

.form-group-modern {
	margin-bottom: 0;
}

.form-group-modern label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--primary);
	font-size: 0.9375rem;
}

.form-group-modern label i {
	color: var(--accent);
	font-size: 0.875rem;
}

.form-group-modern input {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	border: 2px solid var(--border);
	border-radius: 8px;
	transition: all 0.3s ease;
	background: var(--bg-alt);
}

.form-group-modern input:focus {
	outline: none;
	border-color: var(--accent);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-group-modern input:disabled {
	background: var(--bg-alt);
	color: var(--text-muted);
	cursor: not-allowed;
}

.form-help {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 0.8125rem;
	color: var(--text-muted);
}

.form-help i {
	font-size: 0.75rem;
}

.form-section-divider {
	height: 1px;
	background: var(--border);
	margin: 32px 0;
}

.form-actions-modern {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--border);
	flex-wrap: wrap;
}

/* Sidebar do Perfil */
.profile-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.info-card-modern {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	padding: 24px;
}

.info-card-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 20px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--border);
}

.info-card-title i {
	color: var(--accent);
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--text-muted);
	font-size: 0.9375rem;
}

.info-label i {
	color: var(--accent);
	font-size: 0.875rem;
}

.info-value {
	font-weight: 600;
	color: var(--primary);
	text-align: right;
}

/* Ações Rápidas */
.quick-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.quick-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px;
	background: var(--bg-alt);
	border-radius: 12px;
	border: 2px solid transparent;
	text-decoration: none;
	color: var(--primary);
	transition: all 0.3s ease;
	font-weight: 500;
}

.quick-action-btn i {
	font-size: 1.5rem;
	color: var(--accent);
}

.quick-action-btn span {
	font-size: 0.875rem;
}

.quick-action-btn:hover {
	background: #fff;
	border-color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

/* Atividades Recentes */
.recent-activities {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.activity-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	background: var(--bg-alt);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.activity-item:hover {
	background: #fff;
	box-shadow: var(--shadow);
}

.activity-icon {
	font-size: 1.25rem;
	flex-shrink: 0;
	margin-top: 2px;
}

.activity-content {
	flex: 1;
}

.activity-title {
	font-weight: 600;
	color: var(--primary);
	font-size: 0.9375rem;
	margin-bottom: 4px;
}

.activity-meta {
	display: flex;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--text-muted);
	flex-wrap: wrap;
}

/* Responsivo */
@media (max-width: 768px) {
	.site-nav ul {
		flex-wrap: wrap;
	}
	.hero h1 {
		font-size: 1.75rem;
	}
	.layout-with-sidebar {
		flex-direction: column;
	}
	.sidebar {
		width: 100%;
		padding: 16px 0;
	}
	.sidebar-nav a {
		border-left: none;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	.courses-grid-modern,
	.certificates-grid {
		grid-template-columns: 1fr;
	}
	.dashboard-stats {
		grid-template-columns: 1fr;
	}
	.page-title {
		font-size: 1.5rem;
	}
	.profile-content-grid {
		grid-template-columns: 1fr;
	}
	.profile-stats {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
	.form-row-modern {
		grid-template-columns: 1fr;
	}
	.quick-actions {
		grid-template-columns: 1fr;
	}
	.profile-header-content {
		flex-direction: column;
		text-align: center;
	}
}

/* ========== PAINEL ADMINISTRATIVO (GESTOR) ========== */
.dashboard-content-grid {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
}

.dashboard-section {
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
}

.empty-message {
	color: var(--text-muted);
	font-style: italic;
	padding: 20px;
	text-align: center;
}

.stat-link {
	position: absolute;
	bottom: 16px;
	right: 16px;
	font-size: 0.875rem;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: all 0.3s ease;
}

.stat-link:hover {
	color: var(--accent-hover);
	transform: translateX(4px);
}

.stat-card {
	position: relative;
	padding-bottom: 50px;
}

.form-card-modern {
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
	padding: 32px;
	margin-top: 24px;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 12px;
	background: var(--bg-alt);
	border-radius: 8px;
	border: 2px solid transparent;
	transition: all 0.3s ease;
}

.checkbox-label:hover {
	background: #fff;
	border-color: var(--accent);
}

.checkbox-label input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
	width: 18px;
	height: 18px;
}

.checkbox-label span {
	flex: 1;
	font-weight: 500;
	color: var(--primary);
}

.form-group-modern select {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	border: 2px solid var(--border);
	border-radius: 8px;
	background: var(--bg-alt);
	transition: all 0.3s ease;
	cursor: pointer;
}

.form-group-modern select:focus {
	outline: none;
	border-color: var(--accent);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-group-modern textarea {
	width: 100%;
	padding: 12px 16px;
	font-size: 1rem;
	border: 2px solid var(--border);
	border-radius: 8px;
	transition: all 0.3s ease;
	background: var(--bg-alt);
	font-family: inherit;
	resize: vertical;
}

.form-group-modern textarea:focus {
	outline: none;
	border-color: var(--accent);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* ========== FORMULÁRIO DE CURSO EXPANDIDO ========== */
.quick-links-bar {
	display: flex;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	background: #fff;
	padding: 16px;
	border-radius: 12px;
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
}

.quick-link {
	padding: 12px 20px;
	background: var(--bg-alt);
	border-radius: 8px;
	text-decoration: none;
	color: var(--primary);
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.quick-link:hover {
	background: #fff;
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.quick-link.active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}

.course-form-tabs {
	margin-top: 24px;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.tab-title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary);
	margin: 0 0 24px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--border);
}

.tab-title i {
	color: var(--accent);
}

/* Banner Preview */
.banner-preview {
	margin-bottom: 24px;
	text-align: center;
}

.banner-preview img {
	max-width: 100%;
	max-height: 400px;
	border-radius: 12px;
	box-shadow: var(--shadow-lg);
	margin-bottom: 12px;
}

.banner-placeholder {
	padding: 60px 20px;
	background: var(--bg-alt);
	border: 2px dashed var(--border);
	border-radius: 12px;
	color: var(--text-muted);
}

.banner-placeholder i {
	font-size: 4rem;
	margin-bottom: 16px;
	display: block;
}

/* Upload Area */
.upload-area {
	border: 2px dashed var(--border);
	border-radius: 12px;
	padding: 40px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	background: var(--bg-alt);
}

.upload-area:hover {
	border-color: var(--accent);
	background: #fff;
}

.upload-placeholder i {
	font-size: 3rem;
	color: var(--accent);
	margin-bottom: 12px;
	display: block;
}

.upload-placeholder p {
	margin: 0 0 8px 0;
	font-weight: 600;
	color: var(--primary);
}

.upload-placeholder small {
	color: var(--text-muted);
}

/* Certificado Banner Premium */
.certificado-banner-premium {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	color: #fff;
	padding: 50px 40px;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
	margin: 32px 0;
	text-align: center;
}

.certificado-banner-premium::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
	background-size: 50px 50px;
	animation: movePattern 20s linear infinite;
	pointer-events: none;
}

@keyframes movePattern {
	0% { transform: translate(0, 0); }
	100% { transform: translate(50px, 50px); }
}

.certificado-celebration {
	position: relative;
	margin-bottom: 30px;
}

.medal-large {
	font-size: 6rem;
	color: #ffd700;
	text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	animation: medalFloat 3s ease-in-out infinite;
	display: inline-block;
	margin-bottom: 20px;
}

@keyframes medalFloat {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(-10px) rotate(5deg); }
}

.confetti {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.confetti span {
	position: absolute;
	font-size: 2rem;
	animation: confettiFall 3s ease-in-out infinite;
}

.confetti span:nth-child(1) {
	left: 20%;
	animation-delay: 0s;
}

.confetti span:nth-child(2) {
	left: 50%;
	animation-delay: 1s;
}

.confetti span:nth-child(3) {
	left: 80%;
	animation-delay: 2s;
}

@keyframes confettiFall {
	0% {
		transform: translateY(-20px) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(100px) rotate(360deg);
		opacity: 0;
	}
}

.certificado-content-premium {
	position: relative;
	z-index: 1;
}

.certificado-content-premium h2 {
	margin: 0 0 16px 0;
	color: #fff;
	font-size: 2.5rem;
	font-weight: 700;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.certificado-content-premium h2 i {
	color: #ffd700;
}

.certificado-content-premium p {
	margin: 0 0 30px 0;
	color: rgba(255, 255, 255, 0.95);
	font-size: 1.25rem;
	line-height: 1.6;
}

.certificado-success-message {
	background: rgba(255, 255, 255, 0.2);
	padding: 12px 24px;
	border-radius: 50px;
	margin-bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	backdrop-filter: blur(10px);
}

.certificado-success-message i {
	color: #4ade80;
	font-size: 1.5rem;
}

.btn-certificado {
	background: #fff;
	color: var(--primary);
	border: none;
	font-weight: 700;
	font-size: 1.125rem;
	padding: 16px 32px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.btn-certificado:hover {
	background: #ffd700;
	color: var(--primary);
	transform: translateY(-3px) scale(1.05);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.certificado-hint {
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.875rem;
}

.certificado-hint i {
	margin-right: 6px;
}

/* Add Item Card */
.add-item-card {
	background: var(--bg-alt);
	padding: 24px;
	border-radius: 12px;
	border: 2px solid var(--border);
	margin-bottom: 32px;
}

.add-item-card h3 {
	margin: 0 0 20px 0;
	color: var(--primary);
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Items List */
.items-list {
	margin-top: 24px;
}

.item-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: #fff;
	border-radius: 12px;
	border: 1px solid var(--border);
	margin-bottom: 16px;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
}

.item-card:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--accent);
	transform: translateX(4px);
}

.item-icon {
	font-size: 2.5rem;
	color: var(--accent);
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-alt);
	border-radius: 12px;
}

.item-content {
	flex: 1;
}

.item-content h4 {
	margin: 0 0 8px 0;
	color: var(--primary);
	font-size: 1.125rem;
}

.item-content p {
	margin: 0 0 8px 0;
	color: var(--text-muted);
	font-size: 0.9375rem;
}

.item-content small {
	color: var(--text-muted);
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 4px;
}

.item-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* Responsivo para formulário de curso */
@media (max-width: 768px) {
	.quick-links-bar {
		flex-direction: column;
	}
	.quick-link {
		width: 100%;
		justify-content: center;
	}
	.item-card {
		flex-direction: column;
		text-align: center;
	}
	.item-actions {
		width: 100%;
		justify-content: center;
	}
}