/**
 * MoradaVest Redações — Portal do Professor
 *
 * Identidade visual preto & ouro. Namespaced em .mv-prof-* para não
 * colidir com o Portal do Aluno (student-portal.css) nem com o admin.
 */

:root {
	--mvp-black: #0f0f10;
	--mvp-ink: #1c1c1e;
	--mvp-gold: #c9a227;
	--mvp-gold-soft: #e7c65a;
	--mvp-line: #e5e2d8;
	--mvp-muted: #6b6a63;
	--mvp-bg: #faf9f5;
	--mvp-warn: #b8860b;
	--mvp-ok: #1d7a54;
	--mvp-danger: #a12d2d;
	--mvp-radius: 14px;
	--mvp-shadow: 0 10px 30px rgba(15, 15, 16, 0.08);
}

/* ---------- Login ---------- */

.mv-prof-login {
	display: flex;
	justify-content: center;
	padding: 32px 16px;
}

.mv-prof-login__card {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border: 1px solid var(--mvp-line);
	border-radius: var(--mvp-radius);
	box-shadow: var(--mvp-shadow);
	overflow: hidden;
}

.mv-prof-login__head {
	background: var(--mvp-black);
	color: #fff;
	padding: 28px 28px 22px;
	text-align: center;
}

.mv-prof-login__head h2 {
	margin: 12px 0 6px;
	font-size: 22px;
	color: #fff;
}

.mv-prof-login__head p {
	margin: 0;
	font-size: 14px;
	color: #cfcdc4;
}

.mv-prof-badge {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--mvp-black);
	background: var(--mvp-gold);
	padding: 5px 12px;
	border-radius: 999px;
	font-weight: 600;
}

.mv-prof-form {
	padding: 24px 28px 28px;
}

.mv-prof-field {
	display: block;
	margin-bottom: 16px;
}

.mv-prof-field > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--mvp-ink);
	margin-bottom: 6px;
}

.mv-prof-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--mvp-line);
	border-radius: 10px;
	font-size: 15px;
	background: var(--mvp-bg);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.mv-prof-field input:focus {
	outline: none;
	border-color: var(--mvp-gold);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
	background: #fff;
}

/* ---------- Buttons ---------- */

.mv-prof-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.05s, background 0.15s, border-color 0.15s;
}

.mv-prof-btn:active {
	transform: translateY(1px);
}

.mv-prof-btn--primary {
	background: var(--mvp-black);
	color: #fff;
	width: 100%;
}

.mv-prof-btn--primary:hover {
	background: #000;
}

.mv-prof-form .mv-prof-btn--primary {
	margin-top: 4px;
}

.mv-prof-btn--ghost {
	background: #fff;
	color: var(--mvp-ink);
	border-color: var(--mvp-line);
}

.mv-prof-btn--ghost:hover {
	border-color: var(--mvp-gold);
	color: var(--mvp-black);
}

.mv-prof-btn--sm {
	padding: 7px 12px;
	font-size: 13px;
	width: auto;
}

/* ---------- Hub ---------- */

.mv-prof-hub {
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 0 24px;
}

.mv-prof-hub__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--mvp-black);
	border-radius: var(--mvp-radius);
	margin-bottom: 20px;
}

.mv-prof-hub__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
}

.mv-prof-hub__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mvp-gold);
	color: var(--mvp-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
}

.mv-prof-hub__identity strong {
	display: block;
	font-size: 15px;
	color: #fff;
}

.mv-prof-hub__identity span {
	display: block;
	font-size: 12px;
	color: var(--mvp-gold-soft);
}

/* ---------- Stats ---------- */

.mv-prof-stats {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}

.mv-prof-stat {
	background: #fff;
	border: 1px solid var(--mvp-line);
	border-radius: 12px;
	padding: 16px 14px;
	text-align: center;
}

.mv-prof-stat__value {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--mvp-black);
	line-height: 1.1;
}

.mv-prof-stat__label {
	display: block;
	font-size: 12px;
	color: var(--mvp-muted);
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.mv-prof-stat--warn { border-top: 3px solid var(--mvp-warn); }
.mv-prof-stat--ok { border-top: 3px solid var(--mvp-ok); }
.mv-prof-stat--accent { border-top: 3px solid var(--mvp-gold); }

/* ---------- Grid / Panels ---------- */

.mv-prof-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.mv-prof-panel {
	background: #fff;
	border: 1px solid var(--mvp-line);
	border-radius: var(--mvp-radius);
	padding: 18px 20px 20px;
}

.mv-prof-panel--full {
	grid-column: 1 / -1;
}

.mv-prof-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--mvp-line);
}

.mv-prof-panel__head h3 {
	margin: 0;
	font-size: 16px;
	color: var(--mvp-black);
}

.mv-prof-count {
	background: var(--mvp-bg);
	border: 1px solid var(--mvp-line);
	color: var(--mvp-muted);
	font-size: 12px;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 999px;
}

.mv-prof-empty {
	color: var(--mvp-muted);
	font-size: 14px;
	padding: 10px 0;
	margin: 0;
}

/* ---------- Lists ---------- */

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

.mv-prof-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mvp-line);
}

.mv-prof-list__item:last-child {
	border-bottom: none;
}

.mv-prof-list__main {
	min-width: 0;
}

.mv-prof-list__main strong {
	display: block;
	font-size: 14px;
	color: var(--mvp-ink);
}

.mv-prof-list__meta {
	display: block;
	font-size: 13px;
	color: var(--mvp-black);
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 320px;
}

.mv-prof-list__sub {
	display: block;
	font-size: 12px;
	color: var(--mvp-muted);
	margin-top: 2px;
}

.mv-prof-list__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.mv-prof-nota {
	font-size: 18px;
	font-weight: 700;
	color: var(--mvp-black);
}

.mv-prof-nota small {
	font-size: 12px;
	color: var(--mvp-muted);
	font-weight: 500;
}

/* ---------- Table ---------- */

.mv-prof-table-wrap {
	overflow-x: auto;
}

.mv-prof-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.mv-prof-table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--mvp-muted);
	padding: 8px 12px;
	border-bottom: 2px solid var(--mvp-line);
}

.mv-prof-table td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--mvp-line);
	color: var(--mvp-ink);
}

.mv-prof-pill {
	display: inline-block;
	min-width: 26px;
	text-align: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.mv-prof-pill--warn {
	background: rgba(184, 134, 11, 0.14);
	color: var(--mvp-warn);
}

.mv-prof-pill--ok {
	background: rgba(29, 122, 84, 0.12);
	color: var(--mvp-ok);
}

/* ---------- Entrance animation ---------- */

.mv-prof-stat,
.mv-prof-panel {
	opacity: 0;
	transform: translateY(8px);
	animation: mv-prof-in 0.32s ease forwards;
}

.mv-prof-stat:nth-child(2) { animation-delay: 0.03s; }
.mv-prof-stat:nth-child(3) { animation-delay: 0.06s; }
.mv-prof-stat:nth-child(4) { animation-delay: 0.09s; }
.mv-prof-stat:nth-child(5) { animation-delay: 0.12s; }
.mv-prof-stat:nth-child(6) { animation-delay: 0.15s; }

@keyframes mv-prof-in {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-prof-stat,
	.mv-prof-panel {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
	.mv-prof-stats {
		grid-template-columns: repeat(3, 1fr);
	}
	.mv-prof-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.mv-prof-stats {
		grid-template-columns: repeat(2, 1fr);
	}
	.mv-prof-list__meta {
		max-width: 180px;
	}
}

/* ---------- Relatórios ---------- */

.mv-prof-report .mv-prof-hub__avatar i{font-style:normal}

.mv-report-bars{display:flex;flex-direction:column;gap:14px}
.mv-report-bar-row{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:12px}
.mv-report-bar-label{font-size:13px;font-weight:600;color:var(--mvp-ink)}
.mv-report-bar-track{background:#eef0e9;border-radius:999px;height:12px;overflow:hidden}
.mv-report-bar-fill{display:block;height:100%;border-radius:999px;background:var(--mvp-gold);min-width:2px}
.mv-report-bar-val{font-size:15px;font-weight:700;color:var(--mvp-black);text-align:right}
.mv-report-bar-val small{font-size:11px;color:var(--mvp-muted);font-weight:500}

.mv-report-turma{border:1px solid var(--mvp-line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.mv-report-turma>summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:700;color:var(--mvp-black);display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none}
.mv-report-turma>summary::-webkit-details-marker{display:none}
.mv-report-turma[open]>summary{border-bottom:1px solid var(--mvp-line);background:var(--mvp-bg)}
.mv-report-turma .mv-prof-table-wrap{padding:0 4px}

@media(max-width:560px){
	.mv-report-bar-row{grid-template-columns:110px 1fr 60px;gap:8px}
	.mv-report-bar-label{font-size:12px}
}

.mv-prof-hub__actions{display:flex;align-items:center;gap:10px}

/* Sair/Voltar sempre acessível no mobile (mesmo problema do .mv-pf-topbar,
   namespace legado usado por area-coordenador.php e relatorios-professor.php). */
.mv-prof-hub__avatar, .mv-prof-hub__actions{flex-shrink:0;}
@media(max-width:560px){
	.mv-prof-hub__bar{flex-wrap:nowrap; gap:10px; padding:12px 14px;}
	.mv-prof-hub__identity{min-width:0; overflow:hidden;}
	.mv-prof-hub__identity strong, .mv-prof-hub__identity span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
}

/* =====================================================================
 * Área do Professor v3.9 — shell + telas internas (namespace .mv-pf-*)
 * ===================================================================== */

/*
 * Identidade por área: as três áreas (Professor, Aluno, Coordenador)
 * reaproveitam literalmente as mesmas classes estruturais .mv-pf-*
 * (topbar, hero, actions, stats, cols, card, table...) — só o valor
 * das variáveis de cor muda, conforme o wrapper (.mv-pf / .mv-al /
 * .mv-co). Isso garante a mesma organização visual nas três áreas,
 * cada uma com sua cor: azul (Professor), verde (Aluno), dourado
 * (Coordenador). Preto/branco/neutros seguem como cores auxiliares.
 */
.mv-pf, .mv-al, .mv-co, .mv-ad{
	--pf-black:#0f0f10; --pf-ink:#1c1c1e;
	--pf-line:#e7e4da; --pf-muted:#6b6a63; --pf-bg:#f7f6f1; --pf-card:#ffffff;
	--pf-ok:#1d7a54; --pf-warn:#b8860b; --pf-danger:#a12d2d;
	--pf-radius:16px; --pf-radius-sm:10px; --pf-radius-lg:20px;
	--pf-shadow:0 12px 34px rgba(15,15,16,.09);
	--pf-shadow-sm:0 2px 8px rgba(15,15,16,.05);
	--pf-shadow-md:0 8px 22px rgba(15,15,16,.08);
	--pf-c1:#E53935; --pf-c2:#FB8C00; --pf-c3:#F9A825; --pf-c4:#1E88E5; --pf-c5:#43A047;

	/*
	 * Design tokens (Fase 1 — Design System): escala de espaçamento (8
	 * passos) e tipografia, reutilizados pelos componentes .mv-pf-* e
	 * pelo novo shell (.mv-shell-*). Cor-agnósticos — não variam por
	 * área, só os --pf-gold/--pf-gold-2/--pf-accent abaixo variam.
	 */
	--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
	--space-5:20px; --space-6:24px; --space-7:32px; --space-8:48px;
	--text-xs:12px; --text-sm:13.5px; --text-base:14.5px; --text-lg:16.5px; --text-xl:20px; --text-2xl:28px;
	--transition-fast:120ms cubic-bezier(.4,0,.2,1);
	--transition-base:200ms cubic-bezier(.4,0,.2,1);

	background:var(--pf-bg); min-height:100vh;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--pf-ink);
}
.mv-pf *, .mv-al *, .mv-co *, .mv-ad *{box-sizing:border-box;}
.mv-pf *:focus-visible, .mv-al *:focus-visible, .mv-co *:focus-visible, .mv-ad *:focus-visible{
	outline:2px solid var(--pf-accent); outline-offset:2px;
}
.mv-sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}

@media(prefers-reduced-motion:reduce){
	.mv-pf *, .mv-al *, .mv-co *, .mv-ad *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* Área Docente — azul (identidade principal do Professor). */
.mv-pf{ --pf-gold:#2563eb; --pf-gold-2:#60a5fa; --pf-accent:#1d4ed8; }

/* Área Discente — verde. */
.mv-al{ --pf-gold:#15803d; --pf-gold-2:#4ade80; --pf-accent:#0f5c3c; }

/* Área Pedagógica — dourado/amarelo. */
.mv-co{ --pf-gold:#c9a227; --pf-gold-2:#e7c65a; --pf-accent:#8a6508; }

/* Área Administrativa — vermelho. */
.mv-ad{ --pf-gold:#dc2626; --pf-gold-2:#f87171; --pf-accent:#b91c1c; }

/* Borda dos cards estatísticos e dos cards de gráfico (`.mv-pf-card--chart`,
   marcado à mão só nos cards de gráfico do hub de cada área — nunca
   `.mv-pf-card` genérico, que também é usado por formulários, Edições,
   Turmas, Disciplinas etc., que devem continuar com a borda padrão
   `--pf-line`) na cor de cada área, num tom suave/dessaturado — não a
   cor viva de texto/ícone (`--pf-accent`/`--pf-gold`), só pra essa
   borda, por pedido explícito de não ficar "viva" demais. Mesma
   fórmula (H da área, S~50%, L~73%) aplicada nas 4 áreas, pra manter
   a família de tons consistente. Chart.js em si usa
   `mv_chart_colors_red_shades()`/paleta categórica, à parte (o
   <canvas> não resolve var() CSS). */
.mv-pf .mv-pf-stat,
.mv-pf .mv-pf-card--chart{ border-color:#98a9dd; }

.mv-al .mv-pf-stat,
.mv-al .mv-pf-card--chart{ border-color:#98ddc0; }

.mv-co .mv-pf-stat,
.mv-co .mv-pf-card--chart{ border-color:#ddc998; }

.mv-ad .mv-pf-stat,
.mv-ad .mv-pf-card--chart{ border-color:#d59a94; }

/* ---------- Topbar (2 linhas: menu em cima, card do usuário embaixo) ---------- */
.mv-pf-topbar{
	display:flex; flex-direction:column;
	background:var(--pf-black); color:#fff;
	position:sticky; top:0; z-index:20;
}
.mv-pf-topbar__row1{
	display:flex; align-items:center; gap:20px;
	padding:14px clamp(16px,4vw,40px);
}
.mv-pf-topbar__row2{
	display:flex; align-items:center; justify-content:flex-end;
	padding:8px clamp(16px,4vw,40px); gap:12px;
	background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.08);
}
.mv-pf-brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; flex-shrink:0;}
.mv-pf-brand svg{width:34px; height:auto; color:var(--pf-gold-2);}
.mv-pf-brand strong{display:block; font-size:16px; line-height:1;}
.mv-pf-brand small{display:block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#b9b7ad; margin-top:3px;}
.mv-pf-nav{display:flex; gap:4px; margin-left:12px; flex:1; flex-wrap:wrap; min-width:0;}
.mv-pf-nav__link{
	padding:8px 14px; border-radius:9px; text-decoration:none; color:#d7d5cc;
	font-size:14px; font-weight:600; transition:background .15s,color .15s; white-space:nowrap;
}
.mv-pf-nav__link:hover{background:rgba(255,255,255,.08); color:#fff;}
.mv-pf-nav__link.is-active{background:var(--pf-gold); color:#1a1600;}
.mv-pf-user{display:flex; align-items:center; gap:12px; position:relative;}
.mv-pf-user__meta{text-align:right; line-height:1.2; min-width:0;}
.mv-pf-user__meta strong{display:block; font-size:13.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-pf-user__meta span{font-size:11.5px; color:#b9b7ad; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-pf-avatar{
	width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
	background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2)); color:#1a1600;
	font-weight:800; font-size:15px; flex-shrink:0; overflow:hidden;
	box-shadow:0 0 0 2px var(--pf-black), 0 0 0 4px var(--pf-gold);
}
.mv-pf-logout{display:grid; place-items:center; width:36px; height:36px; border-radius:9px; color:#d7d5cc; background:rgba(255,255,255,.06); flex-shrink:0;}
.mv-pf-logout svg{width:18px; height:18px;}
.mv-pf-logout:hover{background:rgba(255,255,255,.14); color:#fff;}

/* ---------- Menu do usuário (foto + anel + dropdown) ---------- */
.mv-user-menu{position:relative; flex-shrink:0;}
.mv-user-menu__trigger{border:none; padding:0; margin:0; cursor:pointer; font-family:inherit;}
.mv-user-menu__trigger:focus-visible{outline:2px solid var(--pf-gold-2); outline-offset:2px;}
.mv-user-menu__photo{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;}
.mv-user-menu__panel{
	position:absolute; top:calc(100% + 10px); right:0; z-index:60; min-width:220px;
	background:var(--pf-card); color:var(--pf-ink); border:1px solid var(--pf-line);
	border-radius:14px; box-shadow:var(--pf-shadow); padding:8px;
}
.mv-user-menu__head{padding:8px 12px 10px; margin-bottom:6px; border-bottom:1px solid var(--pf-line);}
.mv-user-menu__head strong{display:block; font-size:13.5px; color:var(--pf-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-user-menu__head span{display:block; font-size:11.5px; color:var(--pf-muted); margin-top:2px;}
.mv-user-menu__item{
	display:flex; align-items:center; gap:10px; width:100%; text-align:left;
	background:none; border:none; padding:9px 12px; border-radius:9px;
	font-family:inherit; font-size:13.5px; font-weight:600; color:var(--pf-ink);
	text-decoration:none; cursor:pointer;
}
.mv-user-menu__item svg{width:16px; height:16px; flex-shrink:0; color:var(--pf-muted);}
.mv-user-menu__item:hover{background:var(--pf-bg);}
.mv-user-menu__item--danger{color:var(--pf-danger);}
.mv-user-menu__item--danger svg{color:var(--pf-danger);}
.mv-user-menu__photo-form{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Sino de notificações (Central de Notificações) ---------- */
.mv-user-menu__bell{
	position:relative; display:grid; place-items:center; width:36px; height:36px;
	border-radius:9px; color:#d7d5cc; background:rgba(255,255,255,.06); flex-shrink:0; text-decoration:none;
}
.mv-user-menu__bell:hover{background:rgba(255,255,255,.14); color:#fff;}
.mv-user-menu__bell svg{width:18px; height:18px;}
.mv-user-menu__bell-badge{
	position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px;
	display:grid; place-items:center; border-radius:999px; background:var(--pf-danger,#a12d2d);
	color:#fff; font-size:10px; font-weight:800; line-height:1; border:2px solid var(--pf-black,#0f0f10);
}

/*
 * ≤768px: a navegação em duas linhas (row1: marca+links, row2: usuário)
 * dá lugar à barra compacta + menu lateral (.mv-mobile-bar/.mv-drawer,
 * definidos uma única vez em mv-auth.css e compartilhados com o menu
 * público). Acima de 768px nada muda — row1/row2 continuam exatamente
 * como sempre foram.
 */
@media(max-width:768px){
	.mv-pf-topbar__row1,
	.mv-pf-topbar__row2{display:none;}
}

/* ---------- Main ---------- */
.mv-pf-main{max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,36px) clamp(16px,4vw,40px) 64px;}

/* ---------- Rodapé (créditos, todas as áreas) ---------- */
.mv-shell-footer{
	margin-top:40px; padding-top:14px; border-top:1px solid var(--pf-line);
	display:flex; flex-direction:column; gap:4px; text-align:center;
}
.mv-shell-footer__line{font-size:12px; color:var(--pf-muted);}

/* ---------- Flash ---------- */
.mv-pf-flash{padding:13px 18px; border-radius:12px; font-size:14.5px; font-weight:600; margin-bottom:20px; border:1px solid;}
.mv-pf-flash--success{background:#eaf7f0; color:#0f5c3c; border-color:#b8e6cf;}
.mv-pf-flash--error{background:#fdeeee; color:#912626; border-color:#f3caca;}
.mv-pf-flash--notice,.mv-pf-flash--warning{background:#fdf6e6; color:#7a5c0e; border-color:#f0dfae;}

/* ---------- Hero ---------- */
.mv-pf-hero{
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	background:linear-gradient(150deg,var(--pf-black),#23231f); color:#fff;
	border-radius:var(--pf-radius-lg); padding:clamp(24px,4vw,38px); margin-bottom:24px;
	box-shadow:var(--pf-shadow); overflow:hidden;
}
.mv-pf-hero__eyebrow{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--pf-gold-2); font-weight:700;}
.mv-pf-hero__title{margin:8px 0 4px; font-size:clamp(24px,3.5vw,32px); color:#fff;}
.mv-pf-hero__role{margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--pf-gold-2);}
.mv-pf-hero__sub{margin:0; color:#c9c7bd; font-size:15px; max-width:560px; line-height:1.55;}
.mv-pf-hero__mark{flex-shrink:0; opacity:.9;}
.mv-pf-hero__mark svg{width:96px; height:auto; color:var(--pf-gold);}
.mv-pf-hero__photo-wrap{flex-shrink:0; position:relative; display:inline-flex; text-decoration:none;}
.mv-pf-hero__photo{
	width:132px; height:132px; border-radius:50%; overflow:hidden;
	display:grid; place-items:center; background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2));
	color:#1a1600; font-weight:800; font-size:46px;
	box-shadow:0 0 0 4px rgba(255,255,255,.12), 0 0 0 1px var(--pf-gold);
}
.mv-pf-hero__photo img{width:100%; height:100%; object-fit:cover; display:block;}
@media(max-width:560px){.mv-pf-hero__photo{width:100px; height:100px; font-size:34px;}}

/* Indicador de notificação na foto do hero (substitui o sino que ficava
   sozinho na topbar, removido — `templates/area-shell.php`,
   `mv_render_hero_photo_notif()`): número vermelho quando há
   notificação não lida, ou um sino discreto quando não há nenhuma —
   mesma posição/tamanho nos 2 casos, no canto superior direito da foto. */
.mv-pf-hero__notif{
	position:absolute; top:-2px; right:-2px; min-width:22px; height:22px; padding:0 5px;
	border-radius:999px; display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:800; line-height:1; box-shadow:0 0 0 2px var(--pf-black);
}
.mv-pf-hero__notif--count{background:#e0384c; color:#fff;}
.mv-pf-hero__notif--bell{background:#fff; color:var(--pf-black);}
.mv-pf-hero__notif--bell svg{width:12px; height:12px;}

/* Área Discente: mesmo layout em linha (texto à esquerda, foto à
   direita) do desktop, mantido também no mobile — a regra genérica de
   herói empilhado/centralizado abaixo de 768px (usada pelas outras 3
   áreas) é sobrescrita aqui só pra Área Discente, conforme referência
   visual do usuário. Fundo troca do preto liso pra um degradê esverdeado
   com "ondas" decorativas (blobs radiais) atrás do texto/foto, e o
   rótulo "ÁREA DISCENTE" ganha um pequeno traço verde abaixo dele. */
.mv-al .mv-pf-hero{
	position:relative;
	background:radial-gradient(135% 160% at 12% 15%,#12301f 0%,#0a1f14 30%,#071307 58%,#050f08 100%);
}
.mv-al .mv-pf-hero::before,
.mv-al .mv-pf-hero::after{
	content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
}
.mv-al .mv-pf-hero::before{
	width:380px; height:380px; right:-140px; bottom:-160px;
	background:radial-gradient(circle,var(--pf-gold-2) 0%,var(--pf-gold) 45%,transparent 72%);
	opacity:.5;
}
.mv-al .mv-pf-hero::after{
	width:220px; height:220px; left:-70px; top:-90px;
	background:radial-gradient(circle,var(--pf-gold-2) 0%,transparent 70%);
	opacity:.3;
}
.mv-al .mv-pf-hero__text,
.mv-al .mv-pf-hero__photo-wrap,
.mv-al .mv-pf-hero__mark,
.mv-al .mv-pf-hero__title,
.mv-al .mv-pf-hero__role{position:relative; z-index:1;}
.mv-al .mv-pf-hero__eyebrow{position:relative; z-index:1; display:inline-block; padding-bottom:7px;}
.mv-al .mv-pf-hero__eyebrow::after{
	content:''; position:absolute; left:0; bottom:0; width:34px; height:2px;
	background:var(--pf-gold-2); border-radius:2px;
}
/* Só no mobile: empilhado e centralizado (Área Discente, foto,
   saudação+nome, "Aluno"), sem a linha "Turma · e-mail — acompanhe..."
   (removida, não só escondida, a pedido do usuário). Desktop continua
   em linha (regra acima), com a __sub visível normalmente. */
@media(max-width:768px){
	.mv-al .mv-pf-hero{
		flex-direction:column; align-items:center; text-align:center;
		height:auto; padding:20px; gap:10px;
	}
	.mv-al .mv-pf-hero__text{display:contents;}
	.mv-al .mv-pf-hero__eyebrow{order:1;}
	.mv-al .mv-pf-hero__eyebrow::after{left:50%; transform:translateX(-50%);}
	.mv-al .mv-pf-hero__mark,
	.mv-al .mv-pf-hero__photo-wrap{order:2; align-self:center;}
	.mv-al .mv-pf-hero__title{order:3; margin:0;}
	.mv-al .mv-pf-hero__role{order:4; margin:0;}
	.mv-al .mv-pf-hero__sub{display:none;}
}

/* Área Discente: cards informativos (não clicáveis — sem o modificador
   --clickable nem link <a> em volta) ganham borda na cor da própria
   área, em tom leve — mesmo espírito visual dos cards estatísticos
   (.mv-pf-stat), que ganham o mesmo tratamento aqui. Cobre qualquer
   card não-clicável de uma vez (Semana Atual da Agenda, cards de
   pessoa dentro de Turma, etc.) sem precisar tocar em cada template. */
.mv-al .mv-pf-stat,
.mv-al .mv-pf-card:not(.mv-pf-card--clickable):not(.mv-pf-card--zero){
	border-color:color-mix(in srgb, var(--pf-accent) 28%, #fff);
}

/* Área Discente: título principal da página centralizado (pedido do
   usuário, reverte a 6.105/6.107 que tinham deixado à esquerda). O
   cabeçalho fica empilhado em coluna — o bloco título+descrição
   centralizado, mas o botão de ação (ex.: "Gerar PDF"/"+ Iniciar Novo
   Chat"), quando existe, fica ABAIXO dele (6.111) e alinhado à DIREITA,
   não centralizado (6.112 — usuário pediu os 2: abaixo E à direita,
   que pareciam contraditórios até esclarecido — `align-self:flex-end`
   só no botão, sem afetar o bloco do título, que continua centralizado
   pelo `align-items:center` do container).
   Título ganha destaque próprio pra se diferenciar do secundário (ex.:
   "Semana Atual"/"Meses" na Agenda, que continua só maior que o texto
   normal, sem traço): fonte um pouco maior (24px→26px) e um traço
   curto na cor da área (`--pf-accent`, contraste pra fundo claro —
   diferente do `--pf-gold-2` usado no traço do eyebrow do hero escuro)
   logo abaixo do ÚLTIMO texto do bloco título+descrição — sob o título
   quando não há descrição, sob a descrição quando ela existe (o traço
   não deve ficar "no meio", cortando entre os 2 textos). */
.mv-al .mv-pf-pagehead{flex-direction:column; align-items:center; gap:10px;}
.mv-al .mv-pf-pagehead > div:first-child{text-align:center;}
.mv-al .mv-pf-pagehead > a.mv-pf-btn,
.mv-al .mv-pf-pagehead > button.mv-pf-btn,
.mv-al .mv-pf-pagehead > .mv-pf-btngroup{align-self:flex-end;}
.mv-al .mv-pf-pagehead h1{font-size:26px; margin:0 0 4px;}
.mv-al .mv-pf-pagehead > div:first-child > h1:last-child,
.mv-al .mv-pf-pagehead > div:first-child > p:last-child{
	position:relative; padding-bottom:12px;
}
.mv-al .mv-pf-pagehead > div:first-child > h1:last-child::after,
.mv-al .mv-pf-pagehead > div:first-child > p:last-child::after{
	content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
	width:44px; height:3px; border-radius:2px; background:var(--pf-accent);
}
.mv-al .mv-pf-subtitle{text-align:center;}
.mv-al .mv-pf-subtitle + p{text-align:center;}

/* Área Docente: mesmo tratamento visual da Área Discente (6.105-6.112),
   replicado aqui trocando só o seletor (.mv-al → .mv-pf) — hero com
   fundo em degradê + blobs decorativos na cor da própria área (azul,
   via var(--pf-gold)/var(--pf-gold-2) já redefinidas em .mv-pf acima),
   traço sob o rótulo "ÁREA DOCENTE", empilhado/centralizado só no
   mobile, bordas coloridas nos cards não-clicáveis e cabeçalho de
   página centralizado com traço sob o último texto do bloco. Nenhuma
   cor está fixa aqui — tudo resolve via var(), então já sai azul sem
   precisar trocar nenhum valor. */
.mv-pf .mv-pf-hero{
	position:relative;
	background:radial-gradient(135% 160% at 12% 15%,#13234a 0%,#0a1730 30%,#070f22 58%,#050b19 100%);
}
.mv-pf .mv-pf-hero::before,
.mv-pf .mv-pf-hero::after{
	content:''; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
}
.mv-pf .mv-pf-hero::before{
	width:380px; height:380px; right:-140px; bottom:-160px;
	background:radial-gradient(circle,var(--pf-gold-2) 0%,var(--pf-gold) 45%,transparent 72%);
	opacity:.5;
}
.mv-pf .mv-pf-hero::after{
	width:220px; height:220px; left:-70px; top:-90px;
	background:radial-gradient(circle,var(--pf-gold-2) 0%,transparent 70%);
	opacity:.3;
}
.mv-pf .mv-pf-hero__text,
.mv-pf .mv-pf-hero__photo-wrap,
.mv-pf .mv-pf-hero__mark,
.mv-pf .mv-pf-hero__title,
.mv-pf .mv-pf-hero__role{position:relative; z-index:1;}
.mv-pf .mv-pf-hero__eyebrow{position:relative; z-index:1; display:inline-block; padding-bottom:7px;}
.mv-pf .mv-pf-hero__eyebrow::after{
	content:''; position:absolute; left:0; bottom:0; width:34px; height:2px;
	background:var(--pf-gold-2); border-radius:2px;
}
/* Texto fantasma (bug real corrigido na 6.108, ver .mv-al acima): no
   mobile, .mv-pf-hero__text vira display:contents pra intercalar
   eyebrow/foto/nome/papel via order — um elemento display:contents não
   gera caixa própria, então position/z-index nele não tem efeito. Já
   coberto pelas regras fora do media query acima (__title/__role/
   __eyebrow com z-index:1 direto no elemento, não no pai). */
@media(max-width:768px){
	.mv-pf .mv-pf-hero{
		flex-direction:column; align-items:center; text-align:center;
		height:auto; padding:20px; gap:10px;
	}
	.mv-pf .mv-pf-hero__text{display:contents;}
	.mv-pf .mv-pf-hero__eyebrow{order:1;}
	.mv-pf .mv-pf-hero__eyebrow::after{left:50%; transform:translateX(-50%);}
	.mv-pf .mv-pf-hero__mark,
	.mv-pf .mv-pf-hero__photo-wrap{order:2; align-self:center;}
	.mv-pf .mv-pf-hero__title{order:3; margin:0;}
	.mv-pf .mv-pf-hero__role{order:4; margin:0;}
	.mv-pf .mv-pf-hero__sub{display:none;}
}

.mv-pf .mv-pf-stat,
.mv-pf .mv-pf-card:not(.mv-pf-card--clickable):not(.mv-pf-card--zero){
	border-color:color-mix(in srgb, var(--pf-accent) 28%, #fff);
}

.mv-pf .mv-pf-pagehead{flex-direction:column; align-items:center; gap:10px;}
.mv-pf .mv-pf-pagehead > div:first-child{text-align:center;}
.mv-pf .mv-pf-pagehead > a.mv-pf-btn,
.mv-pf .mv-pf-pagehead > button.mv-pf-btn,
.mv-pf .mv-pf-pagehead > .mv-pf-btngroup{align-self:flex-end;}
.mv-pf .mv-pf-pagehead h1{font-size:26px; margin:0 0 4px;}
.mv-pf .mv-pf-pagehead > div:first-child > h1:last-child,
.mv-pf .mv-pf-pagehead > div:first-child > p:last-child{
	position:relative; padding-bottom:12px;
}
.mv-pf .mv-pf-pagehead > div:first-child > h1:last-child::after,
.mv-pf .mv-pf-pagehead > div:first-child > p:last-child::after{
	content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
	width:44px; height:3px; border-radius:2px; background:var(--pf-accent);
}
.mv-pf .mv-pf-subtitle{text-align:center;}
.mv-pf .mv-pf-subtitle + p{text-align:center;}

/* Título secundário centralizado (ex.: "Minhas Conversas" do Chat,
   `.mv-pf-card__head` compartilhado pelas 4 áreas — modificador
   opcional, só usado onde pedido, pra não centralizar outros
   cabeçalhos de card que já têm o próprio propósito à esquerda). */
.mv-pf .mv-pf-card__head--center{justify-content:center;}

/* ---------- Action cards ---------- */
.mv-pf-actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:26px;}

/*
 * Grid de cards "de gestão" (não são links inteiros como .mv-pf-action
 * — têm cabeçalho + um rodapé com ações separadas, ex.: Editar/Excluir
 * das disciplinas do catálogo dentro de uma área do conhecimento).
 * Cada item é um .mv-pf-card normal; só o container muda.
 */
.mv-pf-cardgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-bottom:26px;}
/* Cards estreitos (240px) cabem só 2-3 links do .mv-pf-rowactions numa
   linha só — sem quebra, os links extrapolam a margem do card em vez
   de ficarem escondidos atrás do overflow (que aqui é visível). */
.mv-pf-cardgrid .mv-pf-rowactions{margin-top:14px; flex-wrap:wrap; row-gap:8px; white-space:normal;}
/* Card inteiro clicável (ex.: Edições/Turmas/Disciplinas da Gestão
   Acadêmica) — um link "esticado" (position:absolute;inset:0) cobre o
   card inteiro como alvo de navegação principal, sem aninhar <a> (HTML
   inválido); as ações secundárias (Editar/Excluir) ficam num z-index
   acima do link esticado, continuando clicáveis independentemente. */
.mv-pf-card--clickable{position:relative;}
.mv-pf-card--clickable:hover{border-color:var(--pf-gold);}
.mv-pf-card__stretch{position:absolute; inset:0; z-index:0;}
.mv-pf-card--clickable .mv-pf-card__head,
.mv-pf-card--clickable > p,
.mv-pf-card--clickable .mv-pf-rowactions{position:relative; z-index:1;}
/* <details class="mv-pf-card"> usado como card colapsável (ex.: turma
   com alunos aninhados) — remove o marcador nativo e estiliza o
   <summary> pra parecer o cabeçalho de card já usado em outro lugar. */
details.mv-pf-card{padding:18px;}
details.mv-pf-card > summary{list-style:none; cursor:pointer; user-select:none;}
details.mv-pf-card > summary::-webkit-details-marker{display:none;}
.mv-co-turma-card__head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.mv-co-turma-card__head small{display:block; margin-top:2px;}
.mv-co-aluno-card{padding:14px; display:flex; flex-direction:column; gap:4px;}
.mv-co-aluno-card .mv-pf-pill{align-self:flex-start;}
.mv-pf-action{
	display:flex; flex-direction:column; gap:6px; padding:22px; text-decoration:none;
	background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius);
	color:var(--pf-ink); box-shadow:var(--pf-shadow-sm);
	transition:transform var(--transition-base),box-shadow var(--transition-base),border-color var(--transition-base);
}
.mv-pf-action:hover{transform:translateY(-3px); box-shadow:var(--pf-shadow-md); border-color:var(--pf-gold);}
.mv-pf-action__ic{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--pf-black),#2c2c28); color:var(--pf-gold-2); margin-bottom:6px;}
.mv-pf-action__ic svg{width:22px; height:22px;}
.mv-pf-action strong{font-size:16px;}
.mv-pf-action small{color:var(--pf-muted); font-size:13.5px; line-height:1.45;}

/* Área Administrativa: cards de ação centralizados (pedido específico
   desta área — as outras 3 continuam alinhadas à esquerda). */
.mv-ad .mv-pf-action{align-items:center; text-align:center;}

/* ---------- Panorama do sistema (Área Administrativa, hub) — lista de barras ---------- */
.mv-pf-barlist{display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0;}
.mv-pf-barlist__row{display:grid; grid-template-columns:150px 1fr 48px; align-items:center; gap:14px; padding:9px 6px; border-radius:8px; transition:background var(--transition-base);}
.mv-pf-barlist__row:hover{background:var(--pf-bg);}
.mv-pf-barlist__label{font-size:13.5px; color:var(--pf-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-pf-barlist__track{position:relative; height:10px; border-radius:5px; background:var(--pf-line); overflow:hidden;}
.mv-pf-barlist__fill{position:absolute; top:0; left:0; bottom:0; width:0; border-radius:5px; background:var(--pf-accent);}
.mv-pf-barlist__value{font-size:14px; font-weight:800; color:var(--pf-black); text-align:right;}
@media (max-width:560px){
	.mv-pf-barlist__row{grid-template-columns:92px 1fr 36px; gap:8px;}
	.mv-pf-barlist__label{font-size:12px;}
	.mv-pf-barlist__value{font-size:13px;}
}

/* ---------- Stats ---------- */
.mv-pf-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:14px; margin-bottom:26px;}
.mv-pf-stat{background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius-sm); padding:18px; text-align:center; box-shadow:var(--pf-shadow-sm); transition:box-shadow var(--transition-base);}
.mv-pf-stat:hover{box-shadow:var(--pf-shadow-md);}
.mv-pf-stat__value{display:block; font-size:26px; font-weight:800; color:var(--pf-accent); line-height:1;}
.mv-pf-stat__label{display:block; margin-top:6px; font-size:12.5px; color:var(--pf-muted); text-transform:uppercase; letter-spacing:.5px;}
.mv-pf-stat--warn{border-color:#f0dfae;} .mv-pf-stat--warn .mv-pf-stat__value{color:var(--pf-warn);}
.mv-pf-stat--ok{border-color:#b8e6cf;} .mv-pf-stat--ok .mv-pf-stat__value{color:var(--pf-ok);}
.mv-pf-stat--accent{border-color:#c7d3e6;} .mv-pf-stat--accent .mv-pf-stat__value{color:var(--pf-accent);}
.mv-pf-stat__spark{display:block; width:100%; height:32px; margin-top:10px;}

/* ---------- Cards / columns ---------- */
.mv-pf-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:22px;}
@media(max-width:820px){.mv-pf-cols{grid-template-columns:1fr;}}
/* Coluna de cards (ex.: alunos de uma turma divididos em 2 blocos
   contíguos e alfabéticos, não intercalados) dentro de .mv-pf-cols. */
.mv-pf-cols__col{display:flex; flex-direction:column; gap:18px; min-width:0;}
/* Itens de grid têm min-width:auto implícito — sem isso, um <canvas>
   (Chart.js calcula sua largura interna em px na primeira renderização)
   pode forçar a coluna 1fr a crescer além do espaço disponível e
   estourar a margem da página (reproduzido com o menu lateral do
   desktop expandido, que estreita o .mv-pf-main). */
.mv-pf-cols > *{min-width:0;}
.mv-pf-chartwrap{position:relative; height:260px; width:100%; max-width:100%; overflow:hidden;}
.mv-pf-chartwrap canvas{max-width:100% !important;}
@media(max-width:620px){.mv-pf-chartwrap{height:220px;}}

/* Ranking: "Alunos por nível, em cada competência" — 5 mini-gráficos
   (um por competência) em grade responsiva; no mobile cada um ocupa a
   largura cheia (mesmo princípio de min-width:0 do .mv-pf-cols acima,
   pra não estourar margem com a sidebar do desktop expandida). */
.mv-pf-niveis-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:14px;}
.mv-pf-niveis-grid__item{min-width:0;}
.mv-pf-niveis-grid__item h4{margin:0 0 8px; font-size:13.5px; font-weight:700; color:var(--pf-muted);}
.mv-pf-niveis-grid__item .mv-pf-chartwrap{height:180px;}

/* Ranking: "Alunos por grupo de nota" — lista de nomes por grupo, só
   pra Docente/Coordenador/Administrador (Aluno nunca vê esta lista). */
.mv-pf-grupos-lista{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin-top:16px;}
.mv-pf-card--grupo{padding:12px 16px;}
.mv-pf-card--grupo > summary{display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700; font-size:13.5px;}
.mv-pf-grupo-alunos{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.mv-pf-grupo-alunos li{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--pf-line);}
.mv-pf-grupo-alunos li:first-child{border-top:0;}
.mv-pf-grupo-alunos b{color:var(--pf-accent);}
.mv-pf-card{background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius); padding:var(--space-6); box-shadow:var(--pf-shadow-sm); transition:box-shadow var(--transition-base);}
.mv-pf-card:hover{box-shadow:var(--pf-shadow-md);}
.mv-pf-card--full{margin-bottom:22px;}
.mv-pf-card__head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.mv-pf-card__head h3{margin:0; font-size:16.5px;}
.mv-pf-card__head-meta{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--pf-muted);}
.mv-pf-badge{background:var(--pf-black); color:#fff; font-size:12px; font-weight:700; border-radius:999px; padding:2px 10px;}
.mv-pf-empty{color:var(--pf-muted); font-size:14.5px; padding:12px 0; margin:0;}

/* ---------- Grade de cards de redação (tela Redações, após escolher turma+tema) ---------- */
.mv-pf-essay-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;}
.mv-pf-essay-card{display:flex; flex-direction:column; gap:6px;}
.mv-pf-essay-card__head{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.mv-pf-essay-card__head strong{font-size:15.5px;}
.mv-pf-essay-card__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--pf-line);}

/* ---------- Lists ---------- */
.mv-pf-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mv-pf-item{display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--pf-line);}
.mv-pf-item:first-child{border-top:0;}
.mv-pf-item__main{flex:1; min-width:0;}
.mv-pf-item__main strong{display:block; font-size:14.5px;}
.mv-pf-item__meta{display:block; font-size:13.5px; color:var(--pf-ink); opacity:.85; margin-top:1px;}
.mv-pf-item__sub{display:block; font-size:12.5px; color:var(--pf-muted); margin-top:2px;}
.mv-pf-item__end{display:flex; align-items:center; gap:10px;}
.mv-pf-nota{font-weight:800; color:var(--pf-accent); font-size:18px; white-space:nowrap;}
.mv-pf-nota small{font-size:11px; color:var(--pf-muted); font-weight:600;}

/* ---------- Central de Notificações ---------- */
.mv-notif-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mv-notif-item{
	display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
	padding:14px 4px; border-top:1px solid var(--pf-line);
}
.mv-notif-item:first-child{border-top:0;}
.mv-notif-item--unread{background:linear-gradient(90deg,rgba(201,162,39,.07),transparent 40%);}
.mv-notif-item--unread .mv-notif-item__main strong::before{
	content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
	background:var(--pf-gold); margin-right:8px; vertical-align:middle;
}
.mv-notif-item__main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.mv-notif-item__main strong{font-size:14.5px;}
.mv-notif-item__msg{font-size:13.5px; color:var(--pf-ink); opacity:.85; line-height:1.45;}
.mv-notif-item__meta{font-size:12px; color:var(--pf-muted);}
.mv-notif-item__actions{display:flex; align-items:center; gap:12px; flex-shrink:0; padding-top:2px;}
@media(max-width:480px){
	.mv-notif-item{flex-direction:column;}
	.mv-notif-item__actions{padding-top:6px;}
}

/* ---------- Painel de revisão (aprovar/reprovar) ---------- */
.mv-pf-review-panel{border-left:4px solid var(--pf-gold); margin-top:20px;}

/* ---------- Tables ---------- */
.mv-pf-tablewrap{overflow-x:auto;}
.mv-pf-table{width:100%; border-collapse:collapse; font-size:14px;}
.mv-pf-table th{text-align:left; padding:11px 12px; font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--pf-muted); border-bottom:2px solid var(--pf-line);}
.mv-pf-table td{padding:12px; border-bottom:1px solid var(--pf-line); vertical-align:middle; transition:background var(--transition-fast);}
.mv-pf-table tr:hover td{background:#faf9f4;}

/* ---------- Pills ---------- */
.mv-pf-pill{display:inline-block; padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700; background:#efece3; color:#5f5d55;}
.mv-pf-pill--ok{background:#e4f5ec; color:#0f5c3c;}
.mv-pf-pill--warn{background:#fbf0d5; color:#8a6508;}
.mv-pf-pill--accent{background:#e6ecf6; color:#1a3a63;}
.mv-pf-pill--danger{background:#fdeeee; color:#912626;}
.mv-pf-pill--archived{background:#e8e6e1; color:#6b6a63; border:1px dashed #b9b6ac;}

/* ---------- Minha Turma (Área do Aluno) ---------- */
.mv-al-classmates{display:flex; flex-wrap:wrap; gap:10px;}
.mv-al-classmate{display:flex; align-items:center; gap:8px; background:var(--pf-bg); border:1px solid var(--pf-line); border-radius:999px; padding:6px 16px 6px 6px; font-size:13.5px; font-weight:600; color:var(--pf-ink);}
.mv-al-classmate__photo{flex-shrink:0; width:28px; height:28px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2)); color:#1a1600; font-weight:800; font-size:12px;}
.mv-al-classmate__photo img{width:100%; height:100%; object-fit:cover; display:block;}

/* Cards de pessoa (Turma → Administração/Coordenação/Professores/Discentes): foto maior + nome/função ao lado. */
.mv-al-pessoa-card{display:flex; align-items:flex-start; gap:14px;}
.mv-al-pessoa-card__photo{width:76px; height:76px; font-size:26px;}
.mv-al-pessoa-card strong{display:block; font-size:15.5px; margin-bottom:2px;}
.mv-al-pessoa-card__numero{display:inline-block; margin-bottom:4px;}

/* 6.126: a foto virou o gatilho da bio (clique abre o <dialog> abaixo)
   — reset de <button> nativo, mantendo o visual idêntico ao <span>
   que existia antes. */
.mv-al-pessoa-card__photo-btn{border:0; padding:0; -webkit-tap-highlight-color:transparent; transition:box-shadow var(--transition-fast);}
.mv-al-pessoa-card__photo-btn:hover,.mv-al-pessoa-card__photo-btn:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--pf-accent) 35%, transparent); outline:none;}

/* Fotos de aluno na Frequência por Aula: bem maiores que as da Turma —
   pedido explícito do usuário, pro professor reconhecer o aluno pela
   foto na hora de marcar presença (desktop e mobile, por isso sem
   redução no breakpoint mobile abaixo). */
.mv-freq-aluno .mv-al-pessoa-card__photo{width:104px; height:104px; font-size:34px;}

.mv-pf-bio-dialog{width:min(92vw,480px); border:1px solid var(--pf-line); border-radius:var(--pf-radius); padding:22px 24px; box-shadow:var(--pf-shadow-md);}
.mv-pf-bio-dialog::backdrop{background:rgba(15,15,16,.55);}
.mv-pf-bio-dialog__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--pf-line);}
.mv-pf-bio-dialog__head strong{font-size:16.5px;}
.mv-pf-bio-dialog__close{flex-shrink:0; width:30px; height:30px; border-radius:50%; border:0; background:var(--pf-bg); color:var(--pf-muted); font-size:18px; line-height:1; cursor:pointer;}
.mv-pf-bio-dialog__close:hover{background:var(--pf-line); color:var(--pf-ink);}
.mv-pf-bio-dialog .mv-al-pessoa-card__bio{margin-top:0;}

/* BIOS + Currículo dentro do card de pessoa — Formação Acadêmica (até 2) visível, resto atrás de "Ler mais". */
.mv-al-pessoa-card__bio{margin-top:8px;}
/* Bio do Aluno é 1 frase só (compute_bio()) — sem lista/"ler mais" dos cards de staff. */
.mv-al-pessoa-card__bio-simple{margin:8px 0 0; font-size:12.5px; color:var(--pf-muted); line-height:1.45;}
.mv-al-pessoa-card__formacoes{list-style:none; margin:6px 0 0; padding:0; font-size:12.5px; color:var(--pf-muted);}
.mv-al-pessoa-card__formacoes li{padding:1px 0;}
.mv-al-pessoa-card__lermais{display:inline-block; margin-top:6px; background:none; border:none; padding:0; font-size:12.5px;}
.mv-al-pessoa-card__full{margin-top:10px; padding-top:10px; border-top:1px solid var(--pf-line);}
.mv-al-pessoa-card__full-label{margin:10px 0 4px; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--pf-muted);}
.mv-al-pessoa-card__full-label:first-child{margin-top:0;}
.mv-al-pessoa-card__full ul{list-style:none; margin:0; padding:0; font-size:13px;}
.mv-al-pessoa-card__full li{padding:3px 0;}

/* Cards de disciplina (Área Discente): recolhidos por padrão, o aluno toca pra ver professor/dias/horário/cronograma. */
.mv-pf-disc-card{padding:0; cursor:pointer;}
.mv-pf-disc-card > summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; font-weight:700; font-size:16.5px; color:var(--pf-black); user-select:none;}
.mv-pf-disc-card > summary::-webkit-details-marker{display:none;}
.mv-pf-disc-card > summary::after{content:''; flex-shrink:0; width:10px; height:10px; border-right:2px solid var(--pf-muted); border-bottom:2px solid var(--pf-muted); transform:rotate(45deg); transition:transform var(--transition-fast); margin-left:8px;}
.mv-pf-disc-card[open] > summary::after{transform:rotate(-135deg);}
.mv-pf-disc-card[open] > summary{border-bottom:1px solid var(--pf-line);}
.mv-pf-disc-card__body{padding:18px 22px;}

/* ---------- Buttons ----------
 * Regra única pras 4 áreas (pedido do usuário): todo botão tem fundo
 * na cor da própria área (--pf-accent, já redefinida por área em
 * .mv-pf/.mv-al/.mv-co/.mv-ad acima) e letra branca; o hover só
 * inverte essas 2 cores (fundo branco, letra na cor da área) — sem
 * mais distinção visual entre --primary (antes preto universal) e
 * --ghost (antes branco/cinza universal), que agora só diferem por
 * continuarem existindo como classes pra não quebrar marcação já
 * escrita nas páginas. */
.mv-pf-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 20px; border-radius:var(--pf-radius-sm); font-size:var(--text-base); font-weight:700; text-decoration:none; border:1.5px solid var(--pf-accent); cursor:pointer; background:var(--pf-accent); color:#fff; transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);}
.mv-pf-btn:hover{background:#fff; color:var(--pf-accent); box-shadow:var(--pf-shadow-sm);}
.mv-pf-btn:active{transform:translateY(1px);}
.mv-pf-btn--primary{background:var(--pf-accent); color:#fff; border-color:var(--pf-accent);}
.mv-pf-btn--primary:hover{background:#fff; color:var(--pf-accent);}
.mv-pf-btn--ghost{background:var(--pf-accent); color:#fff; border-color:var(--pf-accent);}
.mv-pf-btn--ghost:hover{background:#fff; color:var(--pf-accent);}
.mv-pf-btn--sm{padding:7px 14px; font-size:13px; border-radius:calc(var(--pf-radius-sm) - 1px);}

/* ---------- Subnav (abas secundárias dentro de um módulo, ex.: Gestão Acadêmica) ---------- */
.mv-pf-subnav{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--pf-line);}
.mv-pf-subnav__link{
	padding:8px 14px; border-radius:9px; text-decoration:none; color:var(--pf-muted);
	font-size:13.5px; font-weight:700; transition:background .15s,color .15s;
}
.mv-pf-subnav__link:hover{background:var(--pf-bg); color:var(--pf-ink);}
.mv-pf-subnav__link.is-active{background:var(--pf-black); color:#fff;}

/* ---------- Crumb / pagehead / filters ---------- */
.mv-pf-crumb{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--pf-muted); margin-bottom:18px;}
.mv-pf-crumb a{color:var(--pf-accent); text-decoration:none; font-weight:600;}
.mv-pf-crumb span{opacity:.5;}
@media(max-width:768px){
	.mv-pf-crumb{display:none;}
}
.mv-pf-pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.mv-pf-btngroup{display:flex; gap:8px; flex-wrap:wrap;}
/* Navegação "Semana anterior"/"Semana seguinte" (Cronograma "Ver todas"
   e Agenda Semanal) — gap explícito garante distância entre os 2
   botões mesmo quando eles quebram linha (mobile estreito, onde
   `justify-content:space-between` sozinho não afasta nada porque os 2
   ficam empilhados sem nenhum espaço vertical entre si); margem
   inferior própria garante distância até o rodapé da página nas 2
   larguras de tela. */
.mv-pf-weeknav{display:flex; justify-content:space-between; gap:12px; margin:20px 0 32px; flex-wrap:wrap;}
@media(max-width:560px){
	.mv-pf-weeknav{flex-direction:column; gap:12px;}
	.mv-pf-weeknav .mv-pf-btn{width:100%;}
}
.mv-pf-pagehead h1{margin:0 0 4px; font-size:24px;}
.mv-pf-pagehead h2{margin:0 0 4px; font-size:16px; font-weight:700;}
.mv-pf-pagehead p{margin:0; color:var(--pf-muted); font-size:14px;}
/* Subtítulo de seção dentro de uma página (ex.: "Semana Atual"/"Meses"
   na Agenda Semanal) — mesma família tipográfica do título principal
   (.mv-pf-pagehead h1), só menor e sem negrito, pra marcar hierarquia
   sem competir visualmente com o h1. */
.mv-pf-subtitle{margin:22px 0 10px; font-size:18px; font-weight:400; color:var(--pf-ink);}
.mv-pf-subtitle:first-of-type{margin-top:0;}
.mv-pf-section-label{margin:26px 0 12px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--pf-muted);}
.mv-pf-section-label:first-of-type{margin-top:4px;}
.mv-pf-section-label small{display:block; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; margin-top:2px; color:var(--pf-muted); opacity:.85;}
.mv-pf-filters{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.mv-pf-filters input[type="search"]{flex:1; min-width:200px; padding:11px 14px; border:1px solid var(--pf-line); border-radius:11px; font-size:14px;}
.mv-pf-filters select{padding:11px 14px; border:1px solid var(--pf-line); border-radius:11px; font-size:14px; background:#fff;}

/* ---------- Row actions / links ---------- */
.mv-pf-rowactions{white-space:nowrap; display:flex; gap:12px; align-items:center;}
.mv-pf-link{color:var(--pf-accent); text-decoration:none; font-weight:600; font-size:13.5px; cursor:pointer;}
.mv-pf-link:hover{text-decoration:underline;}
.mv-pf-link--danger{color:var(--pf-danger);}

/* ---------- Forms ---------- */
.mv-pf-formcard{max-width:760px; margin-bottom:22px;}
.mv-pf-field{display:block; margin-bottom:18px;}
.mv-pf-field>span{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--pf-ink);}
.mv-pf-field input[type="text"],.mv-pf-field input[type="email"],.mv-pf-field input[type="date"],.mv-pf-field input[type="number"],.mv-pf-field input[type="search"],.mv-pf-field select,.mv-pf-field textarea{
	width:100%; padding:12px 14px; border:1px solid var(--pf-line); border-radius:var(--pf-radius-sm); font-size:var(--text-base); font-family:inherit; background:#fff;
	transition:border-color var(--transition-fast),box-shadow var(--transition-fast);
}
.mv-pf-field textarea{resize:vertical; line-height:1.5;}
.mv-pf-hint{display:block; margin-top:6px; font-size:12.5px; color:var(--pf-muted); line-height:1.45;}
.mv-pf-hint--danger{color:#c0392b; font-weight:600;}

/* Workspace de correção: "Situações que levam à nota zero" — card com
   acento vermelho (ação séria/rara) + banner de aviso fixo quando a
   redação está zerada (nível 0 na Competência 2 ou situação marcada). */
.mv-pf-card--zero{border-color:#e3a8a8; margin-bottom:20px;}
.mv-pf-card--zero > summary{font-weight:700; color:#912626;}
.mv-pf-zero-banner{position:sticky; top:8px; z-index:20;}
.mv-pf-checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:12px;}
.mv-pf-checklist__item{display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--pf-line); border-radius:10px; font-size:13.5px; cursor:pointer;}
.mv-pf-checklist__item:has(input:checked){border-color:#c0392b; background:#fdeeee;}
.mv-pf-checklist__item input{margin-top:2px;}
#mv-zero-justificativa-wrap{margin-top:16px;}
.mv-pf-nivel-select:disabled{opacity:.55; cursor:not-allowed;}

/* Currículo/Carreira (Meu Perfil): sub-blocos (Formação Acadêmica, Exercício Profissional...) e formulários de cadastro que abrem sob demanda. */
.mv-pf-subcard{margin-top:18px; background:var(--pf-bg);}
.mv-pf-subcard:first-of-type{margin-top:0;}
.mv-pf-subform{margin-top:16px; padding-top:16px; border-top:1px solid var(--pf-line);}
.mv-pf-inline-radio{display:inline-flex; align-items:center; gap:6px; margin-right:18px; font-size:13.5px; font-weight:500;}
.mv-pf-inline-radio input{margin:0;}
.mv-pf-field input:focus,.mv-pf-field select:focus,.mv-pf-field textarea:focus{outline:none; border-color:var(--pf-gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);}
.mv-pf-field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:620px){.mv-pf-field-row{grid-template-columns:1fr;}}
.mv-pf-checkgroup{display:flex; flex-wrap:wrap; gap:10px 16px; padding:12px 0 4px;}
.mv-pf-check{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--pf-ink); cursor:pointer;}
.mv-pf-check input{accent-color:var(--pf-gold); width:15px; height:15px;}
.mv-pf-check--block{display:grid; grid-template-columns:auto 1fr; align-items:start; column-gap:10px; row-gap:2px; padding:10px 12px; border:1px solid var(--pf-line); border-radius:12px; margin-bottom:8px;}
.mv-pf-check--block input{margin-top:3px;}
.mv-pf-check--block strong{grid-column:2; font-size:13.5px;}
.mv-pf-check--block small{grid-column:2; color:var(--pf-muted); font-weight:400;}
.mv-pf-check--block:has(input:checked){border-color:var(--pf-accent); background:color-mix(in srgb, var(--pf-accent) 8%, transparent);}
.mv-pf-formactions{display:flex; justify-content:flex-end; gap:12px; margin-top:8px;}

/* ---------- Toggle ---------- */
.mv-pf-toggle{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--pf-line); border-radius:14px; background:#fbfaf6; cursor:pointer; margin-bottom:20px;}
.mv-pf-toggle input{position:absolute; opacity:0;}
.mv-pf-toggle__box{flex-shrink:0; width:46px; height:26px; border-radius:999px; background:#d8d5ca; position:relative; transition:background .2s; margin-top:2px;}
.mv-pf-toggle__box::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
.mv-pf-toggle input:checked+.mv-pf-toggle__box{background:var(--pf-ok);}
.mv-pf-toggle input:checked+.mv-pf-toggle__box::after{transform:translateX(20px);}
.mv-pf-toggle input:focus+.mv-pf-toggle__box{box-shadow:0 0 0 3px rgba(29,122,84,.25);}
.mv-pf-toggle__text strong{display:block; font-size:14.5px;}
.mv-pf-toggle__text small{display:block; color:var(--pf-muted); font-size:13px; margin-top:3px; line-height:1.45;}

/* ---------- Upload ---------- */
.mv-pf-upload{position:relative; border:2px dashed var(--pf-line); border-radius:14px; padding:28px; text-align:center; background:#fbfaf6; transition:border-color .15s;}
.mv-pf-upload:hover{border-color:var(--pf-gold);}
.mv-pf-upload input[type="file"]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.mv-pf-upload__hint strong{display:block; font-size:15px;}
.mv-pf-upload__hint span{display:block; font-size:13px; color:var(--pf-muted); margin-top:3px;}
.mv-pf-upload__name{margin-top:10px; font-size:13.5px; font-weight:700; color:var(--pf-accent);}

.mv-pf-upload-progress{margin-top:14px;}
.mv-pf-upload-progress progress{-webkit-appearance:none; appearance:none; height:10px; border:none; border-radius:999px; overflow:hidden; background:#efece3;}
.mv-pf-upload-progress progress::-webkit-progress-bar{background:#efece3; border-radius:999px;}
.mv-pf-upload-progress progress::-webkit-progress-value{background:var(--pf-gold); border-radius:999px; transition:width .2s;}
.mv-pf-upload-progress progress::-moz-progress-bar{background:var(--pf-gold); border-radius:999px;}
.mv-pf-upload-progress small{display:block; margin-top:6px; font-size:12.5px; color:var(--pf-muted);}

/* ---------- Meu Perfil (foto + dados + troca de senha) ---------- */
.mv-perfil-card{display:flex; flex-direction:column;}
.mv-perfil-photo{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.mv-perfil-photo__preview{
	width:84px; height:84px; border-radius:50%; overflow:hidden; flex-shrink:0;
	display:grid; place-items:center; background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2));
	color:#1a1600; font-weight:800; font-size:30px;
	box-shadow:0 0 0 3px var(--pf-card), 0 0 0 5px var(--pf-gold);
}
.mv-perfil-photo__preview img{width:100%; height:100%; object-fit:cover; display:block;}
.mv-perfil-photo__form{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.mv-perfil-photo__visibility{margin-top:16px; padding-top:16px; border-top:1px solid var(--pf-line);}

@media(max-width:480px){
	.mv-perfil-photo{gap:14px;}
	.mv-perfil-photo__preview{width:68px; height:68px; font-size:24px;}
}

/* ---------- Correction workspace (redação em foco, layout de coluna única) ---------- */

/* Área do Professor mais larga apenas no Workspace de correção, para dar à
   redação o máximo de espaço possível — as demais telas mantêm mv-pf-main. */
.mv-pf-main--wide{max-width:1680px;}

/* mv-workspace / mv-workspace-v15 / v17 / v18 e o motor de anotação (mv-preview,
   mv-canvas-stage, mv-ribbon, mv-comp-card, mv-levels...) vêm do mv-annotation-engine
   (assets/css/admin.css), reaproveitado sem alterações do Módulo Avaliativo do
   wp-admin — aqui só ajustamos o encaixe dentro da identidade da Área do Professor. */
.mv-pf-correcao{display:flex; flex-direction:column; gap:18px;}

.mv-pf-correcao__bar{display:flex; align-items:center; gap:18px; flex-wrap:wrap; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:14px; padding:14px 18px; box-shadow:var(--pf-shadow);}
.mv-pf-correcao__meta{display:flex; flex-direction:column; gap:2px; margin-right:auto;}
.mv-pf-correcao__meta strong{font-size:15.5px; color:var(--pf-black);}
.mv-pf-correcao__meta span{font-size:13px; color:#5f5d55;}
.mv-pf-correcao__meta small{font-size:12px; color:var(--pf-muted);}
.mv-pf-correcao__label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--pf-muted);}
#mv-total{font-size:26px; font-weight:800; color:var(--pf-black); line-height:1;}
#mv-total small{font-size:12px; color:var(--pf-muted); font-weight:600;}

.mv-pf-correcao__timer strong{font-family:'SF Mono',Consolas,monospace; font-size:22px; font-weight:700; color:var(--pf-black); line-height:1;}

/* Overlay que trava o Workspace inteiro (ribbon + redação + barra de
   comentário fixa no rodapé) até o professor clicar em "Iniciar
   Correção" — position:fixed cobrindo a viewport toda é o único jeito
   de bloquear também a barra de comentário, que fica fora de
   .mv-workspace/<form> (fixa na tela por conta própria). */
.mv-corrigir-bloqueio{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(250,248,243,.94); padding:20px;}
.mv-corrigir-bloqueio__card{background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius); box-shadow:var(--pf-shadow-md); padding:32px; max-width:420px; text-align:center;}
.mv-corrigir-bloqueio__card h2{margin:0 0 8px; font-size:20px;}
.mv-corrigir-bloqueio__card p{margin:0 0 20px; color:var(--pf-muted); font-size:14px; line-height:1.5;}

.mv-pf-chips{display:flex; gap:6px; flex-wrap:wrap;}
.mv-pf-chip{font-size:12px; font-weight:700; padding:3px 9px; border-radius:8px; background:#efece3; color:#4a4841;}
.mv-pf-chip b{font-weight:800;}
.mv-pf-chip--c1{background:color-mix(in srgb,var(--pf-c1) 16%,#fff); color:#7a3568;}
.mv-pf-chip--c2{background:color-mix(in srgb,var(--pf-c2) 20%,#fff); color:#9c445f;}
.mv-pf-chip--c3{background:color-mix(in srgb,var(--pf-c3) 16%,#fff); color:#2a6f88;}
.mv-pf-chip--c4{background:color-mix(in srgb,var(--pf-c4) 18%,#fff); color:#9a4e28;}
.mv-pf-chip--c5{background:color-mix(in srgb,var(--pf-c5) 18%,#fff); color:#2f6b4a;}

/* Nível oficial ENEM (0-5) por competência — select embutido no próprio
   chip, herdando a cor da competência; o corretor escolhe aqui o nível
   que define a nota (nível×40), sempre visível (inclusive no mobile). */
.mv-pf-chip--nivel{display:inline-flex; align-items:center; gap:5px; padding:4px 6px 4px 10px;}
.mv-pf-nivel-select{border:0; background:transparent; font:inherit; font-weight:700; color:inherit; cursor:pointer; padding:0 2px;}
.mv-pf-nivel-select:focus-visible{outline:2px solid currentColor; outline-offset:2px; border-radius:4px;}

/* Barra de ferramentas do Workspace sempre fixa/visível ao rolar a página,
   logo abaixo da topbar da Área do Professor. */
#mv-ribbon{position:sticky; top:68px; z-index:15; margin-bottom:8px;}
@media(max-width:720px){ #mv-ribbon{position:static;} }

/* O admin.css assume a altura da barra do wp-admin (top:166px) para o
   .mv-comp-tabs-sticky; na Área do Professor essa referência não existe,
   então a barra de competências fica no fluxo normal da página. */
.mv-pf .mv-comp-tabs-sticky{position:static !important; top:auto !important;}

.mv-pf-essay__open{display:block; text-align:center; padding:12px; font-size:13.5px; font-weight:600; color:var(--pf-accent); text-decoration:none;}

.mv-pf-comment{display:block; margin-top:14px;}
.mv-pf-comment span{display:block; font-size:13px; font-weight:600; margin-bottom:6px;}
.mv-pf-comment textarea{width:100%; padding:11px 13px; border:1px solid var(--pf-line); border-radius:11px; font-family:inherit; font-size:14px; resize:vertical; line-height:1.5;}
.mv-pf-comment textarea:focus{outline:none; border-color:var(--pf-gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);}
.mv-pf-comment--geral{padding:18px; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius); border-left:4px solid var(--pf-gold); margin-top:10px;}

.mv-pf-correcao__foot{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:14px; padding:16px 18px;}

@media(max-width:720px){
	.mv-pf-correcao__bar{flex-direction:column; align-items:stretch; gap:12px;}
	.mv-pf-correcao__meta{margin-right:0;}
	.mv-pf-correcao__foot{flex-direction:column-reverse;}
	.mv-pf-correcao__foot .mv-pf-btn{width:100%; justify-content:center;}
}

/* ---------- Report ---------- */
.mv-pf-report{background:#fff; border:1px solid var(--pf-line); border-radius:var(--pf-radius); padding:clamp(24px,4vw,44px); max-width:820px; margin:0 auto;}
.mv-pf-report h1{margin:0; font-size:22px; text-align:center; color:var(--pf-black);}
.mv-pf-report h2{margin:4px 0 20px; font-size:15px; text-align:center; color:var(--pf-muted); font-weight:600;}
.mv-pf-report__meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; padding:16px 0; border-top:2px solid var(--pf-black); border-bottom:1px solid var(--pf-line); font-size:14px; margin-bottom:16px;}
.mv-pf-report__zerada{background:#fdeeee; border:2px solid #c0392b; border-radius:10px; padding:14px 18px; margin-bottom:20px;}
.mv-pf-report__zerada h3{margin:0 0 8px; font-size:16px; color:#912626; letter-spacing:.03em;}
.mv-pf-report__zerada p{margin:5px 0; font-size:13.5px; line-height:1.55; color:#5a2020;}
.mv-pf-report__strip{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}
.mv-pf-report__comp{padding:14px 0; border-bottom:1px solid var(--pf-line);}
.mv-pf-report__comp h3{margin:0 0 6px; font-size:15px; display:flex; justify-content:space-between; gap:12px;}
.mv-pf-report__comp p{margin:5px 0; font-size:13.5px; line-height:1.55; color:#3d3b34;}
.mv-pf-report__comp--c1{border-left:3px solid var(--pf-c1); padding-left:12px;}
.mv-pf-report__comp--c2{border-left:3px solid var(--pf-c2); padding-left:12px;}
.mv-pf-report__comp--c3{border-left:3px solid var(--pf-c3); padding-left:12px;}
.mv-pf-report__comp--c4{border-left:3px solid var(--pf-c4); padding-left:12px;}
.mv-pf-report__comp--c5{border-left:3px solid var(--pf-c5); padding-left:12px;}

/*
 * Arquivo da redação dentro do relatório do professor (view "relatorio",
 * .mv-pf-report). O motor de anotação (admin.css, carregado nesta mesma
 * página) tem uma regra `.mv-preview.annotatable{display:flex!important;
 * overflow:auto}` pensada para o Workspace interativo — sem um limite de
 * largura próprio aqui (esta página não usa o wrapper `.mv-report-file`
 * que o admin.css espera pra aplicar max-width), a imagem/PDF da redação
 * (geralmente maior que a tela) vazava e causava rolagem horizontal no
 * mobile. `!important` necessário pra vencer a regra do admin.css.
 */
.mv-pf-report .mv-preview.report{
	display:block!important; position:relative; overflow:hidden!important;
	width:100%!important; max-width:100%!important; box-sizing:border-box!important; background:#fff;
}
.mv-pf-report .mv-preview.report img{display:block!important; max-width:100%!important; width:100%!important; height:auto!important; margin:0 auto;}
.mv-pf-report .mv-preview.report iframe{display:block!important; max-width:100%!important; width:100%!important; height:70vh!important; border:0;}

.mv-pf-actions-row{display:flex; gap:12px; justify-content:center; margin-bottom:22px; flex-wrap:wrap;}
.mv-pf-actions-row__tabs,.mv-pf-actions-row__extra{display:contents;}

/* Rótulo com versão completa (desktop) e curta (mobile) — ver
   mv_btn_label() em templates/area-shell.php. Por padrão (desktop) só a
   versão completa aparece; a troca acontece só dentro de .mv-pf-actions-row,
   já que é a única tela que usa o helper por enquanto. */
.mv-pf-actions-row .mv-lbl-short{display:none;}

/* Mobile: botões lado a lado (não empilhados em largura cheia) com
 * rótulo encurtado, pra caber vários por linha em vez de uma pilha
 * comprida de pílulas de texto longo — pedido explícito do usuário
 * depois que a versão empilhada (largura cheia) ainda pareceu
 * desorganizada. Quando a página agrupa em __tabs/__extra (visualização
 * da redação), um traço separa as duas seções. */
@media(max-width:640px){
	.mv-pf-actions-row{gap:8px;}
	.mv-pf-actions-row .mv-pf-btn{flex:0 1 auto; padding:8px 14px; font-size:13.5px;}
	.mv-pf-actions-row .mv-lbl-full{display:none;}
	.mv-pf-actions-row .mv-lbl-short{display:inline;}
	.mv-pf-actions-row__tabs,.mv-pf-actions-row__extra{display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; width:100%;}
	.mv-pf-actions-row__extra{padding-top:10px; margin-top:4px; border-top:1px solid rgba(0,0,0,.08);}
}

/* =====================================================================
 * Shell novo (Fase 1 do Design System — piloto na Área Docente).
 * Prefixo .mv-shell-* para não colidir com o shell antigo (.mv-pf-topbar/
 * .mv-mobile-bar/.mv-drawer, em mv-auth.css), que continua servindo as
 * outras 3 áreas até a Fase 2. Um único breakpoint (1024px) decide entre
 * sidebar fixa (desktop) e Drawer + bottom nav (mobile/tablet). O botão
 * ☰ sempre abre o Drawer (menu completo, com avatar/conta/sistema),
 * independente do breakpoint — a sidebar é só um atalho persistente no
 * desktop, com seu próprio controle de recolher.
 * ===================================================================== */

.mv-shell{display:flex; flex-direction:column; min-height:100vh; width:100%; max-width:100vw; overflow-x:hidden;}

/* ---------- Topbar único (☰ | marca centralizada | sair) ---------- */
/* Fixo (não sticky) em todas as larguras — desktop e mobile. Como sai do
   fluxo normal, .mv-shell-layout ganha padding-top equivalente à altura
   (60px) pra não deixar o <main> nascendo debaixo dele.
   Grid de 3 colunas simétricas (44px | 1fr | 44px): antes tinha uma 4ª
   coluna reservada pro sino de notificações (removido na 6.108, só
   "sair" ficou nas ações) — com as 2 pontas desiguais (44px vs 88px),
   a marca "MoradaVest" (centralizada só dentro da coluna do meio)
   ficava visualmente fora do centro real da barra. Com as 2 pontas
   iguais agora, o centro da coluna do meio coincide com o centro
   real — sem precisar de nenhum CSS extra pra "forçar" a centralização. */
.mv-shell-topbar{
	position:fixed; top:0; left:0; right:0; z-index:40; height:60px; flex-shrink:0;
	display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px;
	padding:0 var(--space-4); background:var(--pf-black); color:#fff;
}
.mv-shell-topbar__menu{
	grid-column:1; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--pf-radius-sm);
	background:rgba(255,255,255,.08); color:#fff; border:none; cursor:pointer; transition:background var(--transition-fast);
}
.mv-shell-topbar__menu:hover{background:rgba(255,255,255,.16);}
.mv-shell-topbar__menu svg{width:20px; height:20px;}
.mv-shell-topbar__brand{
	grid-column:2; justify-self:center; display:flex; align-items:center; gap:8px; text-decoration:none; color:#fff; font-weight:800; min-width:0;
}
.mv-shell-topbar__brand span{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mv-shell-topbar__actions{grid-column:3; display:flex; align-items:center; justify-content:flex-end; gap:6px;}
.mv-shell-topbar__bell,.mv-shell-topbar__logout{
	position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--pf-radius-sm);
	color:#d7d5cc; background:rgba(255,255,255,.06); text-decoration:none; transition:background var(--transition-fast),color var(--transition-fast);
}
.mv-shell-topbar__bell:hover,.mv-shell-topbar__logout:hover{background:rgba(255,255,255,.16); color:#fff;}
.mv-shell-topbar__bell svg,.mv-shell-topbar__logout svg{width:19px; height:19px;}
.mv-shell-topbar__bell-badge{
	position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
	display:grid; place-items:center; border-radius:999px; background:var(--pf-danger);
	color:#fff; font-size:10px; font-weight:800; line-height:1; border:2px solid var(--pf-black);
}

/*
 * ---------- Layout (sidebar + conteúdo) ----------
 * .mv-shell-layout contém SÓ .mv-shell-sidebar e <main> — Drawer,
 * form de foto e bottom nav são irmãos dela (fora), não filhos, pra
 * não virarem itens da mesma linha flex que o <main> (era a causa do
 * conteúdo sendo empurrado pra fora da tela no mobile: a bottom nav,
 * sendo display:flex e não display:none, entrava na mesma linha do
 * <main> e disputava largura com ele).
 */
.mv-shell-layout{display:flex; flex:1; align-items:flex-start; width:100%; min-width:0; order:1; padding-top:60px;}
.mv-shell-layout > .mv-pf-main{flex:1 1 0%; min-width:0;}

/* ---------- Sidebar (≥1024px) ---------- */
/* Fixa (não sticky) — sai do fluxo, então <main> recebe margin-left
   equivalente à largura da sidebar (ver regra em @media(min-width:1024px)
   logo abaixo) pra não ficar encoberto por ela. */
.mv-shell-sidebar{
	display:none; flex-direction:column; flex-shrink:0;
	width:248px; position:fixed; top:60px; left:0; z-index:35; height:calc(100vh - 60px); overflow-y:auto;
	background:var(--pf-accent); border-right:1px solid rgba(0,0,0,.08); padding:var(--space-4) var(--space-3);
	transition:width var(--transition-base);
}
.mv-shell-sidebar__nav{display:flex; flex-direction:column; gap:2px;}
.mv-shell-sidebar__link{
	display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--pf-radius-sm);
	text-decoration:none; color:rgba(255,255,255,.82); font-size:var(--text-base); font-weight:600;
	white-space:nowrap; overflow:hidden; border:none; background:none; cursor:pointer; width:100%; text-align:left;
	transition:background var(--transition-fast),color var(--transition-fast);
}
.mv-shell-sidebar__link:hover{background:rgba(255,255,255,.12); color:#fff;}
.mv-shell-sidebar__link.is-active{background:rgba(255,255,255,.16); color:#fff; box-shadow:inset 3px 0 0 #fff;}
.mv-shell-sidebar__icon{display:grid; place-items:center; width:20px; height:20px; flex-shrink:0;}
.mv-shell-sidebar__icon svg{width:20px; height:20px;}
.mv-shell-sidebar__label{overflow:hidden; text-overflow:ellipsis;}
.mv-shell-sidebar__badge{
	margin-left:auto; flex-shrink:0; min-width:18px; height:18px; padding:0 5px;
	display:grid; place-items:center; border-radius:999px; background:var(--pf-danger);
	color:#fff; font-size:11px; font-weight:800; line-height:1;
}
.mv-shell-sidebar.is-collapsed .mv-shell-sidebar__badge{display:none;}
.mv-shell-sidebar__collapse{
	margin-bottom:var(--space-3); padding-bottom:var(--space-3); border-bottom:1px solid rgba(255,255,255,.18);
}
.mv-shell-sidebar__collapse svg{width:16px; height:16px; transition:transform var(--transition-base);}

.mv-shell-sidebar.is-collapsed{width:72px;}
.mv-shell-sidebar.is-collapsed .mv-shell-sidebar__label{display:none;}
.mv-shell-sidebar.is-collapsed .mv-shell-sidebar__link{justify-content:center;}
.mv-shell-sidebar.is-collapsed .mv-shell-sidebar__collapse svg{transform:rotate(180deg);}

@media(min-width:1024px){
	.mv-shell-sidebar{display:flex;}
	/*
	 * Sem o limite de 1120px/1680px (herdado de .mv-pf-main/--wide) — no
	 * desktop, banner e cards da Área Docente ocupam todo o espaço que
	 * sobra ao lado da sidebar, encolhendo/esticando sozinhos conforme
	 * ela está expandida (248px) ou recolhida (72px).
	 */
	.mv-shell-layout > .mv-pf-main{margin:0 0 0 248px; max-width:none; transition:margin-left var(--transition-base);}
	.mv-shell-sidebar.is-collapsed ~ .mv-pf-main{margin-left:72px;}
}

/* ---------- Drawer (menu completo — todas as larguras) ---------- */
.mv-shell-drawer{display:none;}
.mv-shell-drawer[hidden]{display:none;}
.mv-shell-drawer:not([hidden]){
	display:block; position:fixed; inset:0; z-index:200;
}
.mv-shell-drawer__backdrop{position:absolute; inset:0; background:rgba(15,15,16,.55); opacity:0; transition:opacity var(--transition-base);}
.mv-shell-drawer.is-open .mv-shell-drawer__backdrop{opacity:1;}
.mv-shell-drawer__panel{
	position:absolute; top:0; left:0; height:100%; width:min(86vw,320px);
	background:var(--pf-card); color:var(--pf-ink); display:flex; flex-direction:column;
	transform:translateX(-100%); transition:transform var(--transition-base); box-shadow:8px 0 28px rgba(0,0,0,.25); overflow-y:auto;
}
.mv-shell-drawer.is-open .mv-shell-drawer__panel{transform:translateX(0);}
.mv-shell-drawer__close{
	position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px;
	border:none; border-radius:var(--pf-radius-sm); background:var(--pf-bg); color:var(--pf-ink); cursor:pointer;
}
.mv-shell-drawer__close svg{width:17px; height:17px;}
.mv-shell-drawer__user{
	display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
	padding:var(--space-7) var(--space-4) var(--space-5); background:linear-gradient(150deg,var(--pf-black),#23231f); color:#fff;
}
.mv-shell-drawer__avatar{
	width:76px; height:76px; border-radius:50%; display:grid; place-items:center; overflow:hidden; margin-bottom:var(--space-2);
	background:linear-gradient(135deg,var(--pf-gold),var(--pf-gold-2)); color:#1a1600; font-weight:800; font-size:28px;
	box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
.mv-shell-drawer__avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.mv-shell-drawer__name{font-size:16px;}
.mv-shell-drawer__role{font-size:13px; color:var(--pf-gold-2); font-weight:600;}
.mv-shell-drawer__extra{font-size:12px; color:#b9b7ad;}
.mv-shell-drawer__nav{display:flex; flex-direction:column; padding:var(--space-3);}
.mv-shell-drawer__section-title{
	padding:var(--space-3) var(--space-2) var(--space-1); font-size:11px; font-weight:700; text-transform:uppercase;
	letter-spacing:.6px; color:var(--pf-muted);
}
.mv-shell-drawer__link{
	display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--pf-radius-sm);
	text-decoration:none; color:var(--pf-ink); font-size:var(--text-base); font-weight:600; background:none; border:none;
	text-align:left; width:100%; cursor:pointer; transition:background var(--transition-fast);
}
.mv-shell-drawer__link:hover{background:var(--pf-bg);}
.mv-shell-drawer__link.is-active{background:var(--pf-bg); color:var(--pf-accent);}
.mv-shell-drawer__link svg{width:19px; height:19px; flex-shrink:0; color:var(--pf-muted);}
.mv-shell-drawer__link--danger,.mv-shell-drawer__link--danger svg{color:var(--pf-danger);}
.mv-shell-drawer__badge{
	margin-left:auto; min-width:18px; height:18px; padding:0 5px;
	display:grid; place-items:center; border-radius:999px; background:var(--pf-danger);
	color:#fff; font-size:11px; font-weight:800; line-height:1;
}

/* ---------- Bottom nav (<1024px) ---------- */
.mv-shell-bottomnav{
	display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--pf-card); border-top:1px solid var(--pf-line);
	width:100%; flex-shrink:0; order:2; /* fixa na tela durante toda a navegação; "order" mantém a posição visual após .mv-shell-layout */
}
.mv-shell-bottomnav__row{
	display:flex; padding:6px var(--space-2) calc(6px + env(safe-area-inset-bottom));
}
/* 2ª linha (itens "Ver mais") — aparece ABAIXO da linha principal (que
   fica sempre no mesmo lugar), não acima; mesmo esquema hidden/:not([hidden])
   já usado no Drawer, pra não brigar com o display:none do atributo `hidden`. */
.mv-shell-bottomnav__more{display:none;}
.mv-shell-bottomnav__more[hidden]{display:none;}
.mv-shell-bottomnav__more:not([hidden]){
	display:flex; padding:6px var(--space-2) calc(6px + env(safe-area-inset-bottom)); border-top:1px solid var(--pf-line);
}
.mv-shell-bottomnav__link{
	position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px;
	text-decoration:none; background:none; border:none; color:var(--pf-muted); font-size:11px; font-weight:600;
	border-radius:var(--pf-radius-sm); cursor:pointer; transition:color var(--transition-fast);
}
.mv-shell-bottomnav__link svg{width:21px; height:21px; transition:transform var(--transition-fast);}
.mv-shell-bottomnav__link.is-active{color:var(--pf-accent);}
.mv-shell-bottomnav__link span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mv-shell-bottomnav__badge{
	position:absolute; top:2px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px;
	display:grid; place-items:center; border-radius:999px; background:var(--pf-danger);
	color:#fff; font-size:10px; font-weight:800; line-height:1;
}
.mv-shell-bottomnav__more-toggle svg{transition:transform var(--transition-fast);}
.mv-shell-bottomnav__more-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

@media(min-width:1024px){
	.mv-shell-bottomnav{display:none;}
}
@media(max-width:1023px){
	.mv-shell-layout .mv-pf-main{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
}

/* =====================================================================
 * Conteúdo mobile (≤768px) — não herda o layout desktop. A sidebar já
 * fica display:none abaixo de 1024px (ver acima); aqui é o conteúdo em
 * si: hero vertical, cards em 1 coluna, stats em grade 2 colunas,
 * tabelas viram cards empilhados (sem rolagem horizontal).
 * ===================================================================== */
@media(max-width:768px){

	html, body{overflow-x:hidden;}
	.mv-shell, .mv-shell *{max-width:100%;}

	/* Container principal: 100% da largura disponível. */
	.mv-pf-main{width:100%; max-width:none; margin:0; padding:16px;}
	.mv-pf-main--wide{max-width:none;}

	/*
	 * Sub-navegação de módulo (ex.: Edições/Turmas/Disciplinas/
	 * Cronogramas na Gestão Acadêmica; Professores/Alunos na Gestão de
	 * Pessoas) some no mobile — a navegação entre essas páginas já
	 * acontece pela sidebar/Drawer/bottom-nav do shell; a barra extra
	 * ocupava espaço vertical sem necessidade numa tela pequena. Fica
	 * só no desktop, onde a sidebar já reduz a tela útil de qualquer
	 * forma e a barra funciona como atalho rápido dentro do módulo.
	 */
	.mv-pf-subnav{display:none;}

	/*
	 * Hero: totalmente centralizado, nesta ordem: título da área, foto,
	 * nome em destaque, cargo, descrição. `.mv-pf-hero__text` vira
	 * display:contents pra que seus filhos (eyebrow/título/cargo/sub)
	 * disputem `order` diretamente com `.mv-pf-hero__photo` dentro do
	 * mesmo flex container (`.mv-pf-hero`) — sem isso, `order` não
	 * conseguiria intercalar elementos de dois pais diferentes.
	 */
	.mv-pf-hero{
		flex-direction:column; align-items:center; text-align:center;
		height:auto; padding:18px; gap:10px;
	}
	.mv-pf-hero__text{display:contents;}
	.mv-pf-hero__eyebrow{order:1;}
	.mv-pf-hero__mark,.mv-pf-hero__photo-wrap{order:2; align-self:center;}
	.mv-pf-hero__title{order:3; margin:0;}
	.mv-pf-hero__role{order:4; margin:0;}
	.mv-pf-hero__sub{order:5; margin:0; max-width:none;}

	/*
	 * Cards de ação: layout horizontal (ícone à esquerda, título+descrição
	 * ao lado, seta à direita), unificado nas 4 áreas — pedido do usuário,
	 * 2026-07-20, layout aprovado à parte. Só ≤768px; desktop (incluindo o
	 * grid 2-colunas/centralizado que a Administrativa tinha desde
	 * 6.30-6.32) continua exatamente como estava. Implementado com CSS
	 * Grid (não flex) porque o `<a>` tem `<span class="__ic">`, `<strong>`
	 * e `<small>` como filhos diretos, sem wrapper em volta do texto —
	 * grid posiciona os 3 nas 2 linhas/3 colunas sem precisar de markup
	 * novo (ícone ocupa as 2 linhas da coluna 1, texto empilha na coluna
	 * 2, seta ocupa as 2 linhas da coluna 3).
	 */
	.mv-pf-actions,.mv-ad .mv-pf-actions{grid-template-columns:1fr; gap:12px;}
	.mv-pf-action,.mv-ad .mv-pf-action{
		display:grid; grid-template-columns:48px 1fr 20px; grid-template-rows:auto auto;
		column-gap:14px; row-gap:2px; align-items:center; text-align:left;
		width:100%; padding:16px; border:0; border-radius:16px;
		box-shadow:0 2px 8px rgba(0,0,0,.08);
		-webkit-tap-highlight-color:transparent;
		transition:background 150ms ease;
	}
	.mv-pf-action:hover,.mv-ad .mv-pf-action:hover{
		transform:none; box-shadow:0 2px 8px rgba(0,0,0,.08); border-color:transparent;
	}
	.mv-pf-action__ic,.mv-ad .mv-pf-action__ic{
		grid-column:1; grid-row:1/3; width:48px; height:48px; margin-bottom:0;
		border-radius:12px; color:var(--pf-gold);
	}
	.mv-pf-action__ic svg,.mv-ad .mv-pf-action__ic svg{width:24px; height:24px;}
	.mv-pf-action strong,.mv-ad .mv-pf-action strong{
		grid-column:2; grid-row:1; align-self:end;
		font-weight:600; font-size:16px; line-height:1.25; color:var(--pf-ink);
	}
	.mv-pf-action small,.mv-ad .mv-pf-action small{
		grid-column:2; grid-row:2; align-self:start;
		font-weight:400; font-size:13.5px; line-height:1.35; color:var(--pf-ink);
		display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	}
	.mv-pf-action::after,.mv-ad .mv-pf-action::after{
		content:''; grid-column:3; grid-row:1/3; justify-self:center; align-self:center;
		width:20px; height:20px; background-color:var(--pf-gold);
		-webkit-mask-image: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
		mask-image: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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
		-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
		-webkit-mask-position:center; mask-position:center;
		-webkit-mask-size:20px 20px; mask-size:20px 20px;
		-webkit-mask-mode:alpha; mask-mode:alpha;
	}
	.mv-pf-action:active,.mv-ad .mv-pf-action:active{
		background:color-mix(in srgb, var(--pf-gold) 10%, #ffffff);
	}

	/* Stats: grade 2 colunas (1 coluna só abaixo de 360px — ver regra própria). */
	.mv-pf-stats{grid-template-columns:repeat(2,1fr); gap:10px;}

	/* Colunas/painéis/cards: sempre largura total. */
	.mv-pf-cols{grid-template-columns:1fr;}
	.mv-pf-card,.mv-pf-action,.mv-pf-stat{width:100%;}

	/* Tabelas → cards empilhados, um registro por bloco, sem rolagem horizontal. */
	.mv-pf-tablewrap{overflow-x:visible;}
	.mv-pf-table{border:0; width:100%;}
	.mv-pf-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;}
	.mv-pf-table tbody{display:block;}
	.mv-pf-table tr{
		display:block; margin-bottom:12px; padding:14px; border:1px solid var(--pf-line);
		border-radius:var(--pf-radius-sm); background:var(--pf-card); box-shadow:var(--pf-shadow-sm);
	}
	.mv-pf-table tr:last-child{margin-bottom:0;}
	.mv-pf-table tr:hover td{background:none;}
	.mv-pf-table td{padding:8px 0; border-bottom:1px solid var(--pf-line);}
	.mv-pf-table tr td:first-child{padding-top:0;}
	.mv-pf-table tr td:last-child{border-bottom:0; padding-bottom:0;}
	.mv-pf-table td[data-label]{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; text-align:right;}
	.mv-pf-table td[data-label]::before{
		content:attr(data-label); font-size:11px; font-weight:700; color:var(--pf-muted);
		text-transform:uppercase; letter-spacing:.4px; text-align:left; flex-shrink:0;
		padding-top:1px;
	}
	/* Valor da célula: quebra em várias linhas em vez de estourar a
	   largura do card — sem isso, um valor sem espaço pra quebrar
	   (e-mail, link, texto livre longo) empurra o card pra fora da
	   margem da página. overflow-wrap:anywhere (não só break-word)
	   também reduz a largura mínima que o flex item exige pra caber,
	   que é a causa raiz do estouro em telas estreitas. */
	.mv-pf-table td[data-label]{overflow-wrap:anywhere; word-break:break-word;}
	.mv-pf-table td:not([data-label]){text-align:left;}
	.mv-pf-table .mv-pf-rowactions{flex-wrap:wrap; row-gap:8px;}

	/* Tabela "Papéis" (Gestão de Permissões): valores são frases longas,
	   não dados curtos — o padrão label-esquerda/valor-direita fica
	   ilegível aqui. Rótulo empilhado acima do valor, tudo centralizado. */
	.mv-pf-table--center td[data-label]{flex-direction:column; align-items:center; text-align:center; gap:4px;}
	.mv-pf-table--center td[data-label]::before{text-align:center;}

	/* Alvos de toque e tipografia. */
	.mv-pf-btn{min-height:44px;}
	.mv-shell-topbar__menu,.mv-shell-topbar__bell,.mv-shell-topbar__logout{width:44px; height:44px;}
	.mv-shell-bottomnav__link{min-height:48px;}
	.mv-pf-pagehead h1{font-size:21px;}
}

@media(max-width:360px){
	.mv-pf-stats{grid-template-columns:1fr;}
}

/* ---------- Print ---------- */
@media print{
	.mv-pf-topbar,.mv-pf-nav,.mv-pf-user,.mv-shell-topbar,.mv-shell-sidebar,.mv-shell-bottomnav,.no-print,.mv-pf-actions-row{display:none !important;}
	.mv-pf,.mv-pf-main{background:#fff; padding:0; margin:0;}
	.mv-pf-report{border:0; box-shadow:none; max-width:none; padding:0;}
	.mv-pf-report__comp{break-inside:avoid;}
}

/* ---------- Chat (Discente/Docente/Pedagógica ↔ Administração) ----------
 * v1: texto simples, sem anexo, atualização por polling (ver
 * frontend/pages/partials/chat-content.php). Bolhas estilo WhatsApp —
 * mensagem própria à direita (cor de destaque da área via --pf-accent),
 * mensagem do outro lado à esquerda (neutra). */
.mv-chat{display:flex; flex-direction:column; height:min(70vh,640px); background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius); overflow:hidden; box-shadow:var(--pf-shadow-sm);}
.mv-chat__mensagens{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:#f4f2ec;}
.mv-chat__bolha{max-width:72%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.4; box-shadow:var(--pf-shadow-sm);}
.mv-chat__bolha--eu{align-self:flex-end; background:var(--pf-accent); color:#fff; border-bottom-right-radius:3px;}
.mv-chat__bolha--admin{align-self:flex-start; background:#fff; color:var(--pf-ink); border:1px solid var(--pf-line); border-bottom-left-radius:3px;}
.mv-chat__texto{white-space:pre-wrap; overflow-wrap:anywhere;}
.mv-chat__quando{margin-top:4px; font-size:10.5px; opacity:.75;}
.mv-chat__bolha--eu .mv-chat__quando{color:rgba(255,255,255,.85);}
.mv-chat__bolha--admin .mv-chat__quando{color:var(--pf-muted);}
.mv-chat__form{display:flex; gap:10px; padding:12px; border-top:1px solid var(--pf-line); background:var(--pf-card);}
.mv-chat__form textarea{flex:1; resize:none; padding:9px 12px; border:1px solid var(--pf-line); border-radius:var(--pf-radius-sm); font:inherit; font-size:14px;}
.mv-chat__form .mv-pf-btn{align-self:flex-end;}

/* Caixa de entrada do Administrador (lista de conversas). */
.mv-chat-inbox{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.mv-chat-inbox__item{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius-sm); text-decoration:none; color:inherit; box-shadow:var(--pf-shadow-sm); transition:border-color var(--transition-fast);}
.mv-chat-inbox__item:hover{border-color:var(--pf-accent);}
.mv-chat-inbox__item.is-active{border-color:var(--pf-accent); background:color-mix(in srgb,var(--pf-accent) 6%,var(--pf-card));}
.mv-chat-inbox__info{flex:1; min-width:0;}
.mv-chat-inbox__nome{font-weight:700; font-size:14.5px;}
.mv-chat-inbox__papel{font-size:12px; color:var(--pf-muted);}
.mv-chat-inbox__preview{font-size:12.5px; color:var(--pf-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px;}
.mv-chat-inbox__meta{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0;}
.mv-chat-inbox__quando{font-size:11px; color:var(--pf-muted);}
.mv-chat-inbox__item--form{cursor:default;}
.mv-chat-inbox__nome{display:flex; align-items:center; gap:8px;}

/* Conversa encerrada (somente leitura) e denúncia — Chat. */
.mv-chat__encerrado{padding:14px 16px; text-align:center; font-size:13px; color:var(--pf-muted); border-top:1px solid var(--pf-line); background:var(--pf-card);}
.mv-chat__denuncia{margin-top:18px;}
.mv-chat__denuncia summary{cursor:pointer; font-weight:700; color:#a12d2d; font-size:13.5px;}
.mv-chat__denuncia textarea{width:100%; margin-top:10px; padding:9px 12px; border:1px solid var(--pf-line); border-radius:var(--pf-radius-sm); font:inherit; font-size:13.5px; resize:vertical;}

@media print{
	.mv-chat,.mv-chat-inbox{display:none !important;}
}