:root{
  --red:#ed1c24;
  --black:#000;
  --white:#fff;
  --gray-100:#f5f5f5;
  --gray-200:#eee;
  --gray-300:#ddd;
  --gray-600:#666;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
@font-face{
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("./fonts/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Poppins";
  src: url("./fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html,body{height:100%}
body{
  margin:0;
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:#111;
  background:var(--gray-100);
  display:flex;
  min-height:100vh;
}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.sidebar{width:320px;background:#000;color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:12px;padding:20px 16px;border-bottom:1px solid #111}
.logo{width:40px;height:40px;border-radius:10px;background:var(--red);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:inset 0 -6px 10px rgba(0,0,0,.2)}
.brand-text small{opacity:.8}
.nav{padding:8px 8px 24px}
.nav-group{margin:8px 0;border-bottom:1px solid #111;padding-bottom:8px}
.group-toggle{font-family: "Poppins";width:100%;text-align:left;background:#0a0a0a;border:1px solid #111;color:#fff;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer}
.submenu{list-style:none;margin:8px 0 0;padding:0;display:none}
.submenu.open{display:block}
.submenu li{margin:4px 0}
.nav-link{font-family: "Poppins";width:100%;text-align:left;border:0;background:transparent;color:#fff;opacity:.9;padding:8px 12px;border-radius:10px;cursor:pointer}
.nav-link:hover{background:#111}
.nav-link.active{background:var(--red);color:#fff;opacity:1}
.nav-section{opacity:.6;margin:8px 12px;font-size:12px}
.sidebar-footer{padding:16px;border-top:1px solid #111;opacity:.7}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--gray-200);padding:12px 20px;position:sticky;top:0;z-index:10}
.actions {margin-top:20px}
.top-actions{display:flex;gap:8px}
.btn{font-family: "Poppins";display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--red);color:#fff;border:1px solid var(--red);padding:10px 14px;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(.95)}
.btn.outline{background:transparent;color:var(--red);border-color:var(--red)}
.btn.ghost{background:transparent;color:#333;border-color:var(--gray-300)}
.btn.small{padding:6px 10px;font-size:12px}
.main .view{display:none;animation:fade .2s ease-out}
.main .view.active{display:block}
.page{padding:20px;display:grid;gap:20px}
.page.two-col{grid-template-columns:1.1fr .9fr}
.page.one-col-centered{display:grid;place-items:start center;gap:20px}
.max-520{max-width:520px;margin:0 auto}
.center{text-align:center}
.card{width:75%;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card2{width:75%;margin:auto;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card3{width:100%;margin:auto;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px}
.card h3{margin:8px 0}
.trilhasselect {margin-bottom:10px;}
.matriculas, .indic {margin:inherit;}
.lista, .meio {margin:auto;}
.lista2 {margin:20px auto;}
label{display:block;margin:10px 0 4px;font-weight:600}
input, select, textarea{font-family: "Poppins";padding:10px 12px;border-radius:10px;border:1px solid var(--gray-300);background:#fff}
.matriculas .matric, #curso-nome, #curso-valor, #mat-nome, #mat-valor {width:100%}
.stat-num {font-width:700;font-size:28px}
#tabela-trilhas {margin-bottom:10px;}
.mgt {margin-top:10px;}
#trilha-atual, #trilha-proximo, #curso-periodos, #curso-material, #mat-desc, #mat-curso, #user-nome, #user-email, #user-funcoes, #user-unidades {width:100%;}
textarea{resize:vertical}
.inline{display:flex;gap:8px}
.inline > *:first-child{flex:1}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:1024px){.page.two-col{grid-template-columns:1fr}}
@media (max-width:820px){.grid-2,.grid-3{grid-template-columns:1fr}}
.fieldset{border:1px dashed var(--gray-300);padding:10px;border-radius:10px;margin-top:12px}
.fieldset legend{padding:0 6px}
.hidden{display:none}
.table{width:100%;border-collapse:collapse;border:1px solid var(--gray-200)}
.table th,.table td{padding:10px;border-bottom:1px solid var(--gray-200);text-align:left}
.table thead th{background:#fafafa}
.filters{display:flex;gap:8px;margin-bottom:12px;margin-top:10px}
.bullets{padding-left:18px}
.bullets li{margin:4px 0}
.muted{color:var(--gray-600); margin-top:10px;}
.summary{border:1px solid var(--gray-200);border-radius:12px;padding:12px;margin-top:12px;background:#fcfcfc}
.range-output{margin-top:6px;color:#333}
.note{padding:10px 12px;border-radius:10px;background:#f3f3f3;border:1px solid #e5e5e5;margin-top:10px;}
.footer{padding:18px;text-align:center;color:#555}
.ok{color:#0c6b1f;font-weight:700}
body.dark{background:#0e0e0e;color:#f2f2f2;}
body.dark .topbar, body.dark .card, body.dark .table thead th{background:#111;color:#fff;border-color:#222;}
body.dark .card, body.dark .table, body.dark input, body.dark select, body.dark textarea{border-color:#222;background:#0f0f0f;color:#fff;}
body.dark .summary{background:#111;border-color:#222}
body.dark .note{background:#161616;border-color:#222;color:#ddd}
.list .aluno-item{display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--gray-200); border-radius:10px; margin-bottom:8px}
.list .aluno-item input[type="checkbox"]{margin-top:2px}
.aluno-info{display:flex; flex-direction:column}
.aluno-info .nome{font-weight:700}
.aluno-info .curso{color:var(--gray-600); font-size:14px}
.periodo-card label{display:flex; align-items:center; gap:8px; font-weight:600}
.periodo-card input[type="radio"]{margin:0}
.detalhamento-lista .lista{display:grid; gap:8px}
.detalhamento-lista .linha{display:grid; grid-template-columns:1.2fr 1.2fr .6fr; gap:8px; padding:10px; border:1px solid var(--gray-200); border-radius:10px}
.detalhamento-lista .total{margin-top:10px; text-align:right; font-weight:500}
.icon-success{width:64px; height:64px; border-radius:999px; background:#dff5e1; color:#0c6b1f; display:grid; place-items:center;font-size:34px; margin:0 auto 10px; border:2px solid #bfe8c4}
.wysiwyg{border:1px solid var(--gray-300); border-radius:10px; overflow:hidden; background:#fff}
.wysiwyg .toolbar{display:flex; gap:6px; padding:6px; border-bottom:1px solid var(--gray-200); background:#fafafa}
.wysiwyg .toolbar button{border:1px solid var(--gray-300); background:#fff; border-radius:6px; padding:6px 8px; cursor:pointer}
.wysiwyg .editor{min-height:120px; padding:10px}
.tag{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid #ddd;background:#f7f7f7;font-size:12px}
.tag.success{border-color:#bfe8c4;background:#dff5e1;color:#0c6b1f}
@keyframes fade{from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}