/* ============================================================
   EAD Play — Design system do painel (v2)
   Tokens compartilhados com a nova área do aluno (mesma marca:
   índigo→violeta, superfícies escuras por padrão, modo claro via
   [data-theme="light"]). Sem framework CSS; ~1 arquivo, sem build.
   Seções: tokens · reset · layout · sidebar · topbar · componentes ·
   tabelas · modais · toasts · utilitários · responsivo
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
    --primary-50:#eef2ff; --primary-100:#dbe4ff; --primary-200:#bac8ff; --primary-300:#91a7ff;
    --primary-400:#748ffc; --primary-500:#5c7cfa; --primary-600:#4c6ef5; --primary-700:#4263eb; --primary-800:#3b5bdb;
    --violet:#7c3aed; --primary-rgb:76,110,245;
    --gradient-primary:linear-gradient(135deg,#4c6ef5 0%,#7c3aed 100%);

    --success:#10b981; --success-rgb:16,185,129;
    --warning:#f59e0b; --warning-rgb:245,158,11;
    --danger:#ef4444;  --danger-rgb:239,68,68;
    --info:#06b6d4;    --info-rgb:6,182,212;
    --orange:#f97316;  --orange-rgb:249,115,22;
    --pink:#ec4899;    --pink-rgb:236,72,153;
    --teal:#14b8a6;    --teal-rgb:20,184,166;
    --purple:#8b5cf6;  --purple-rgb:139,92,246;
    --blue:#3b82f6;    --blue-rgb:59,130,246;
    --green:#22c55e;   --green-rgb:34,197,94;

    /* superfícies (dark) */
    --bg:#0f1117; --bg-elev:#13161f; --surface:#1a1d2e; --surface-2:#232640; --surface-3:#2a2d4a;
    --surface-glass:rgba(26,29,46,.72);
    --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.14);
    --sidebar-bg:linear-gradient(180deg,#171a2b 0%,#12141f 100%); --sidebar-border:rgba(255,255,255,.06);
    --topbar-bg:rgba(15,17,23,.75);
    --text:#e6e8f2; --text-2:#aab0c6; --text-3:#7c8199; --text-on-primary:#fff;
    --primary-text:var(--primary-400); --primary-soft:rgba(var(--primary-rgb),.14); --primary-soft-2:rgba(var(--primary-rgb),.26);
    --ring:rgba(var(--primary-rgb),.35);
    --skeleton:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 50%,rgba(255,255,255,.04) 75%);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --shadow-md:0 6px 16px -4px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.3);
    --shadow-lg:0 18px 40px -12px rgba(0,0,0,.55),0 6px 14px -6px rgba(0,0,0,.35);
    --shadow-glow:0 0 0 1px rgba(var(--primary-rgb),.25),0 8px 30px rgba(var(--primary-rgb),.25);

    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.875rem; --fs-base:.9375rem; --fs-lg:1.0625rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.875rem;
    --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.25rem; --r-full:999px;
    --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:200ms;
    --sidebar-w:264px; --topbar-h:64px; --content-max:1400px; --page-pad:clamp(1rem,2.4vw,2rem);
    --z-sidebar:200; --z-topbar:150; --z-dropdown:300; --z-modal:400; --z-toast:500; --z-progress:600;
    color-scheme:dark;
}
[data-theme="light"] {
    --bg:#f0f2f8; --bg-elev:#f6f7fb; --surface:#ffffff; --surface-2:#f3f5fa; --surface-3:#e9ecf5;
    --surface-glass:rgba(255,255,255,.8);
    --border:#e3e6f0; --border-strong:#cfd4e6;
    --sidebar-bg:linear-gradient(180deg,#ffffff 0%,#f7f8fc 100%); --sidebar-border:#e6e8f2;
    --topbar-bg:rgba(240,242,248,.82);
    --text:#1a1d2e; --text-2:#525870; --text-3:#8b90a6;
    --primary-text:var(--primary-700); --primary-soft:rgba(var(--primary-rgb),.10); --primary-soft-2:rgba(var(--primary-rgb),.18);
    --ring:rgba(var(--primary-rgb),.25);
    --skeleton:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.09) 50%,rgba(0,0,0,.04) 75%);
    --shadow-sm:0 1px 3px rgba(16,24,40,.07);
    --shadow-md:0 6px 16px -4px rgba(16,24,40,.12),0 2px 6px -2px rgba(16,24,40,.06);
    --shadow-lg:0 18px 40px -12px rgba(16,24,40,.18),0 6px 14px -6px rgba(16,24,40,.08);
    --shadow-glow:0 0 0 1px rgba(var(--primary-rgb),.18),0 8px 30px rgba(var(--primary-rgb),.18);
    color-scheme:light;
}
[data-theme="light"] .only-dark { display:none !important; }
html:not([data-theme="light"]) .only-light { display:none !important; }

/* ── Reset ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-md); line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh; }
a { color:var(--primary-text); text-decoration:none; }
a:hover { color:var(--primary-500); }
img,svg { display:block; max-width:100%; }
h1,h2,h3,h4 { margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
p { margin:0 0 .75em; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
code,.mono { font-family:var(--mono); font-size:.9em; }
table { border-collapse:collapse; width:100%; }
hr { border:0; border-top:1px solid var(--border); margin:8px 0; }
:focus-visible { outline:2px solid var(--primary-400); outline-offset:2px; border-radius:4px; }
::selection { background:var(--primary-soft-2); }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ── Layout ───────────────────────────────────────────────── */
.app { display:flex; min-height:100vh; }
.main { flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; transition:margin var(--dur) var(--ease); }
.content { flex:1; width:100%; max-width:var(--content-max); margin:0 auto; padding:var(--page-pad); }
.app-footer { padding:14px var(--page-pad); font-size:var(--fs-xs); color:var(--text-3); display:flex; gap:8px; align-items:center; border-top:1px solid var(--border); }
.app-footer .sep { opacity:.5; }
.nav-progress { position:fixed; top:0; left:0; height:3px; width:0; background:var(--gradient-primary); z-index:var(--z-progress); opacity:0; transition:width .3s var(--ease),opacity .3s; pointer-events:none; }
.nav-progress.running { opacity:1; width:70%; transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .2s; }
.nav-progress.done { width:100%; opacity:0; transition:width .2s,opacity .4s .2s; }

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-w); z-index:var(--z-sidebar); background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); display:flex; flex-direction:column; transition:transform .3s var(--ease-out); }
.sidebar-brand { height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid var(--sidebar-border); flex-shrink:0; }
.brand-link { display:flex; align-items:center; }
.brand-img { max-height:30px; max-width:150px; width:auto; object-fit:contain; }
.sidebar-close { display:none; }
.sidebar-nav { flex:1; overflow-y:auto; padding:10px 12px 16px; scrollbar-width:thin; }
.sidebar-nav::-webkit-scrollbar { width:4px; } .sidebar-nav::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
.nav-section { margin-top:8px; }
.nav-label { width:100%; display:flex; align-items:center; gap:8px; padding:12px 10px 6px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); cursor:pointer; user-select:none; }
.nav-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--border-strong),transparent); }
.nav-label .chev { order:2; font-size:9px; opacity:.5; transition:transform var(--dur); }
.nav-label:hover { color:var(--text); }
.nav-section.collapsed .nav-section-body { display:none; }
.nav-section.collapsed .nav-label .chev { transform:rotate(-90deg); }
.nav-item,.nav-subitem { width:100%; display:flex; align-items:center; gap:11px; padding:9px 12px; margin:2px 0; border-radius:10px; color:var(--text-2); font-weight:500; font-size:13.5px; text-align:left; transition:background .15s,color .15s; position:relative; }
.nav-item i:first-child { width:18px; text-align:center; font-size:14px; color:var(--text-3); transition:color .15s; flex-shrink:0; }
.nav-item span,.nav-subitem span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover,.nav-subitem:hover { background:var(--surface-3); color:var(--text); }
.nav-item:hover i:first-child { color:var(--primary-text); }
.nav-item.active { background:var(--primary-soft); color:var(--primary-text); font-weight:600; }
.nav-item.active i:first-child { color:var(--primary-text); }
.nav-item.active::before { content:''; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gradient-primary); }
.nav-group .chev { font-size:10px; opacity:.5; transition:transform var(--dur); margin-left:auto; }
.nav-group.open .nav-group-toggle .chev { transform:rotate(180deg); }
.nav-sub { display:none; padding:2px 0 4px 20px; border-left:1px solid var(--border); margin-left:21px; }
.nav-group.open .nav-sub { display:block; }
.nav-subitem { padding:7px 10px; font-size:13px; }
.nav-subitem.active { color:var(--primary-text); font-weight:600; background:var(--primary-soft); }
.nav-pill { margin-left:auto; font-size:10.5px; font-weight:800; min-width:20px; height:20px; padding:0 7px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(var(--danger-rgb),.16); color:#fca5a5; flex-shrink:0; }
[data-theme="light"] .nav-pill { color:#991b1b; }
.nav-pill.orange { background:rgba(var(--orange-rgb),.16); color:#fdba74; } [data-theme="light"] .nav-pill.orange { color:#9a3412; }
.nav-pill.blue { background:rgba(var(--blue-rgb),.16); color:#93c5fd; } [data-theme="light"] .nav-pill.blue { color:#1e40af; }
.nav-pill.green { background:rgba(var(--green-rgb),.16); color:#86efac; } [data-theme="light"] .nav-pill.green { color:#166534; }
.sidebar-foot { padding:10px 12px; border-top:1px solid var(--sidebar-border); display:flex; align-items:center; gap:6px; }
.user-chip { display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:12px; flex:1; min-width:0; color:inherit; }
.user-chip:hover { background:var(--surface-3); color:inherit; }
.u-info { min-width:0; display:flex; flex-direction:column; line-height:1.15; }
.u-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.u-role { font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-backdrop { position:fixed; inset:0; background:rgba(5,7,15,.55); z-index:calc(var(--z-sidebar) - 1); opacity:0; pointer-events:none; transition:opacity .25s; backdrop-filter:blur(2px); }
body.sidebar-open .sidebar-backdrop { opacity:1; pointer-events:auto; }

/* ── Topbar ───────────────────────────────────────────────── */
.topbar { position:sticky; top:0; z-index:var(--z-topbar); height:var(--topbar-h); display:flex; align-items:center; gap:12px; padding:0 var(--page-pad); background:var(--topbar-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.menu-toggle { display:none; }
.topbar-title { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.topbar-title .t-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-text); font-size:15px; flex-shrink:0; }
.topbar-title h1 { font-size:var(--fs-lg); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-title .t-sub { display:block; font-size:var(--fs-xs); color:var(--text-3); }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.icon-btn { width:38px; height:38px; border-radius:10px; display:inline-grid; place-items:center; color:var(--text-2); background:transparent; border:1px solid transparent; transition:background .15s,color .15s; }
.icon-btn:hover { background:var(--surface-3); color:var(--text); }
.user-menu .user-chip { padding:4px 8px 4px 4px; border:1px solid var(--border); background:var(--surface); flex:0 0 auto; }
.user-menu .u-name { max-width:120px; }
.u-chev { font-size:10px; color:var(--text-3); }
.avatar { width:34px; height:34px; border-radius:10px; display:inline-grid; place-items:center; background:var(--gradient-primary); color:#fff; font-weight:800; font-size:12px; flex-shrink:0; letter-spacing:.02em; }
.avatar-lg { width:64px; height:64px; border-radius:18px; font-size:20px; }

/* Theme toggle */
.theme-toggle { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-3); font-size:12px; height:34px; }
.theme-toggle-track { width:30px; height:16px; border-radius:999px; background:var(--surface-3); position:relative; transition:background .2s; }
.theme-toggle-thumb { position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--primary-500); transition:transform .25s var(--ease-out); }
[data-theme="light"] .theme-toggle-thumb { transform:translateX(14px); }
[data-theme="light"] .theme-toggle-sun { color:var(--warning); }
html:not([data-theme="light"]) .theme-toggle-moon { color:var(--primary-300); }

/* Dropdown */
.dropdown { position:relative; }
.dropdown-menu { position:absolute; top:calc(100% + 6px); left:0; min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; z-index:var(--z-dropdown); display:none; }
.dropdown-menu.dropdown-right { left:auto; right:0; }
.dropdown.open .dropdown-menu { display:block; animation:fadeUp .15s var(--ease-out); }
.dropdown-menu a,.dropdown-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; color:var(--text-2); font-size:13px; font-weight:500; text-align:left; }
.dropdown-menu a:hover,.dropdown-menu button:hover { background:var(--surface-3); color:var(--text); }
.dropdown-menu a.danger { color:#f87171; } .dropdown-menu a.danger:hover { background:rgba(var(--danger-rgb),.12); }
.dropdown-menu i { width:16px; text-align:center; color:var(--text-3); }
.dropdown-head { padding:8px 10px 10px; border-bottom:1px solid var(--border); margin-bottom:6px; display:flex; flex-direction:column; gap:2px; }
.dropdown-head strong { font-size:13px; } .dropdown-head span { font-size:12px; color:var(--text-3); }
.dropdown-head .badge { align-self:flex-start; margin-top:4px; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.crumbs { display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-3); margin-bottom:18px; flex-wrap:wrap; }
.crumbs a { color:var(--text-2); } .crumbs a:hover { color:var(--primary-text); }
.crumbs .sep { font-size:9px; opacity:.6; } .crumbs .cur { color:var(--text); font-weight:600; }

/* ── Botões ───────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 16px; border-radius:10px; font-weight:600; font-size:var(--fs-sm); line-height:1.2; border:1px solid transparent; transition:all .15s var(--ease); white-space:nowrap; text-decoration:none; }
.btn:disabled,.btn.loading { opacity:.6; pointer-events:none; }
.btn-primary { background:var(--gradient-primary); color:#fff; box-shadow:0 4px 14px -4px rgba(var(--primary-rgb),.6); }
.btn-primary:hover { color:#fff; filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(var(--primary-rgb),.7); }
.btn-secondary { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--surface-3); color:var(--text); }
.btn-ghost { background:transparent; color:var(--text-2); } .btn-ghost:hover { background:var(--surface-3); color:var(--text); }
.btn-danger { background:var(--danger); color:#fff; } .btn-danger:hover { background:#dc2626; color:#fff; }
.btn-success { background:var(--success); color:#fff; } .btn-success:hover { background:#059669; color:#fff; }
.btn-outline-danger { color:#f87171; border-color:rgba(var(--danger-rgb),.4); } .btn-outline-danger:hover { background:rgba(var(--danger-rgb),.12); color:#f87171; }
.btn-sm { padding:6px 11px; font-size:var(--fs-xs); border-radius:8px; }
.btn-lg { padding:12px 20px; font-size:var(--fs-base); border-radius:12px; }
.btn-block { width:100%; }
.btn-icon { width:34px; height:34px; padding:0; border-radius:9px; }
.btn .spin { animation:spin 1s linear infinite; }

/* ── Formulários ──────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label,.label { font-size:var(--fs-xs); font-weight:600; color:var(--text-2); letter-spacing:.02em; }
.label-row { display:flex; justify-content:space-between; align-items:center; }
.link-sm { font-size:var(--fs-xs); font-weight:500; }
.input,.select,.textarea { width:100%; padding:10px 13px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:10px; color:var(--text); font-size:var(--fs-md); transition:border-color .15s,box-shadow .15s,background .15s; }
.input::placeholder,.textarea::placeholder { color:var(--text-3); }
.input:hover,.select:hover,.textarea:hover { border-color:var(--primary-300); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--primary-500); box-shadow:0 0 0 4px var(--ring); background:var(--surface); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid, select.is-invalid, textarea.is-invalid { border-color:var(--danger); }
.input[readonly] { opacity:.75; }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b90a6' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }
.textarea { min-height:96px; resize:vertical; }
.input-sm { padding:7px 10px; font-size:var(--fs-sm); border-radius:8px; }
.input-icon { position:relative; }
.input-icon > i:first-child { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:13px; pointer-events:none; }
.input-icon .input { padding-left:38px; }
.input-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:8px; color:var(--text-3); display:grid; place-items:center; }
.input-eye:hover { color:var(--text); background:var(--surface-3); }
.input-icon .input.has-eye,.input-icon .input-eye ~ .input { padding-right:40px; }
.help { font-size:var(--fs-xs); color:var(--text-3); }
.field-error { font-size:var(--fs-xs); color:#f87171; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 16px; }
.check { display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); cursor:pointer; color:var(--text-2); }
.check input { width:16px; height:16px; accent-color:var(--primary-500); }
.switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:var(--surface-3); border-radius:999px; transition:.2s; border:1px solid var(--border-strong); }
.switch .slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .slider { background:var(--primary-500); border-color:var(--primary-500); }
.switch input:checked + .slider::before { transform:translateX(18px); }
.switch input:disabled + .slider { opacity:.5; cursor:not-allowed; }
.pw-meter { height:4px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin-top:2px; }
.pw-meter span { display:block; height:100%; width:0; background:var(--danger); transition:width .3s,background .3s; }
.pw-meter[data-score="2"] span { background:var(--warning); } .pw-meter[data-score="3"] span { background:var(--success); }

/* ── Cards ────────────────────────────────────────────────── */
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); margin-bottom:20px; overflow:hidden; }
.card-head { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.card-head h3 { font-size:var(--fs-base); font-weight:700; }
.card-head p { margin:2px 0 0; font-size:var(--fs-xs); color:var(--text-3); }
.card-head .spacer { flex:1; }
.card-icon { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-text); font-size:15px; flex-shrink:0; }
.card-icon.warning { background:rgba(var(--warning-rgb),.14); color:#fbbf24; } .card-icon.danger { background:rgba(var(--danger-rgb),.14); color:#f87171; } .card-icon.success { background:rgba(var(--success-rgb),.14); color:#34d399; }
.card-body { padding:22px; }
.card-foot { padding:14px 22px; border-top:1px solid var(--border); background:var(--surface-2); display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.card-toolbar { display:flex; align-items:center; gap:10px; padding:14px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.card-toolbar .spacer { flex:1; }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin:26px 0 12px; }
.section-head h3 { font-size:var(--fs-base); font-weight:700; }

/* Hero / KPIs / atalhos */
.hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 28px; border-radius:18px; background:var(--gradient-primary); color:#fff; margin-bottom:20px; position:relative; overflow:hidden; box-shadow:var(--shadow-glow); }
.hero::after { content:''; position:absolute; right:-60px; top:-80px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.12); filter:blur(10px); }
.hero-kicker { font-size:var(--fs-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.hero h2 { font-size:var(--fs-2xl); font-weight:800; margin:4px 0 6px; }
.hero p { margin:0; opacity:.9; }
.hero-side { position:relative; z-index:1; }
.hero-stat { text-align:right; } .hero-stat .n { display:block; font-size:var(--fs-3xl); font-weight:800; line-height:1; } .hero-stat .l { font-size:var(--fs-xs); opacity:.85; text-transform:capitalize; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:8px; }
.kpi { display:flex; align-items:center; gap:14px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); transition:transform .2s,box-shadow .2s; }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.kpi-icon.blue { background:rgba(var(--blue-rgb),.15); color:#60a5fa; } .kpi-icon.green { background:rgba(var(--green-rgb),.15); color:#4ade80; } .kpi-icon.purple { background:rgba(var(--purple-rgb),.15); color:#a78bfa; } .kpi-icon.orange { background:rgba(var(--orange-rgb),.15); color:#fb923c; } .kpi-icon.pink { background:rgba(var(--pink-rgb),.15); color:#f472b6; } .kpi-icon.teal { background:rgba(var(--teal-rgb),.15); color:#2dd4bf; } .kpi-icon.red { background:rgba(var(--danger-rgb),.15); color:#f87171; }
.kpi-info { display:flex; flex-direction:column; min-width:0; }
.kpi-value { font-size:var(--fs-2xl); font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.kpi-label { font-size:var(--fs-xs); color:var(--text-3); font-weight:500; }
.quick-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.quick-card { display:flex; flex-direction:column; gap:4px; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:14px; color:inherit; transition:transform .2s,box-shadow .2s,border-color .2s; }
.quick-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--primary-300); color:inherit; }
.qc-icon { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:17px; margin-bottom:8px; }
.qc-icon.purple { background:rgba(var(--purple-rgb),.15); color:#a78bfa; } .qc-icon.green { background:rgba(var(--green-rgb),.15); color:#4ade80; } .qc-icon.blue { background:rgba(var(--blue-rgb),.15); color:#60a5fa; } .qc-icon.pink { background:rgba(var(--pink-rgb),.15); color:#f472b6; } .qc-icon.orange { background:rgba(var(--orange-rgb),.15); color:#fb923c; } .qc-icon.teal { background:rgba(var(--teal-rgb),.15); color:#2dd4bf; }
.qc-title { font-weight:700; font-size:var(--fs-sm); } .qc-desc { font-size:var(--fs-xs); color:var(--text-3); }

/* Perfil */
.profile-hero { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.profile-name { font-size:var(--fs-lg); font-weight:700; }
.dl { display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; margin:0; font-size:var(--fs-sm); }
.dl dt { color:var(--text-3); font-weight:500; } .dl dd { margin:0; color:var(--text); font-weight:500; }

/* ── Badges / alerts ──────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1.4; white-space:nowrap; }
.badge-primary { background:var(--primary-soft); color:var(--primary-text); }
.badge-success { background:rgba(var(--success-rgb),.15); color:#34d399; } [data-theme="light"] .badge-success { color:#065f46; }
.badge-warning { background:rgba(var(--warning-rgb),.15); color:#fbbf24; } [data-theme="light"] .badge-warning { color:#92400e; }
.badge-danger { background:rgba(var(--danger-rgb),.15); color:#f87171; } [data-theme="light"] .badge-danger { color:#991b1b; }
.badge-info { background:rgba(var(--info-rgb),.15); color:#22d3ee; } [data-theme="light"] .badge-info { color:#155e75; }
.badge-muted { background:var(--surface-3); color:var(--text-2); }
.alert { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:var(--fs-sm); border:1px solid; margin-bottom:16px; line-height:1.5; }
.alert i { margin-top:2px; flex-shrink:0; }
.alert-lg { padding:16px 18px; font-size:var(--fs-md); }
.alert-danger { background:rgba(var(--danger-rgb),.1); border-color:rgba(var(--danger-rgb),.3); color:#fca5a5; } [data-theme="light"] .alert-danger { color:#991b1b; }
.alert-success { background:rgba(var(--success-rgb),.1); border-color:rgba(var(--success-rgb),.3); color:#6ee7b7; } [data-theme="light"] .alert-success { color:#065f46; }
.alert-warning { background:rgba(var(--warning-rgb),.1); border-color:rgba(var(--warning-rgb),.3); color:#fcd34d; } [data-theme="light"] .alert-warning { color:#92400e; }
.alert-info { background:rgba(var(--info-rgb),.1); border-color:rgba(var(--info-rgb),.3); color:#67e8f9; } [data-theme="light"] .alert-info { color:#155e75; }

/* ── Tabelas ──────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
.table { font-size:var(--fs-sm); }
.table th { text-align:left; padding:11px 16px; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.table th.sortable { cursor:pointer; user-select:none; } .table th.sortable:hover { color:var(--text); }
.table th.sortable::after { content:'\f0dc'; font-family:'Font Awesome 6 Free'; font-weight:900; margin-left:6px; opacity:.35; font-size:10px; }
.table th.sorted-asc::after { content:'\f0de'; opacity:1; color:var(--primary-text); } .table th.sorted-desc::after { content:'\f0dd'; opacity:1; color:var(--primary-text); }
.table td { padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text-2); }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background:var(--surface-2); }
.table td.strong,.table .strong { color:var(--text); font-weight:600; }
.table .actions { display:flex; gap:4px; justify-content:flex-end; white-space:nowrap; }
.table .center { text-align:center; } .table .right { text-align:right; }
.table-empty td,.table-loading td { text-align:center; padding:40px 16px !important; color:var(--text-3); }
.table-empty .lista-retry { margin-left:6px; vertical-align:middle; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:1px solid var(--border); font-size:var(--fs-xs); color:var(--text-3); flex-wrap:wrap; }
.pager-pages { display:flex; gap:4px; }
.pager-btn { min-width:32px; height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-size:var(--fs-xs); font-weight:600; display:inline-grid; place-items:center; }
.pager-btn:hover { background:var(--surface-3); color:var(--text); }
.pager-btn.active { background:var(--primary-500); border-color:var(--primary-500); color:#fff; }
.pager-btn:disabled { opacity:.4; pointer-events:none; }
.search-box { position:relative; min-width:220px; }
.search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:12px; }
.search-box .input { padding-left:34px; }
.count-pill { font-size:var(--fs-xs); color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:999px; white-space:nowrap; }

/* Tabs */
.tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.tab { display:inline-flex; align-items:center; gap:8px; padding:11px 18px; font-size:var(--fs-sm); font-weight:600; color:var(--text-2); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; }
.tab:hover { color:var(--text); } .tab.active { color:var(--primary-text); border-bottom-color:var(--primary-500); }
.seg-tabs { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); padding:3px; border-radius:10px; gap:2px; }
.seg-tab { padding:6px 12px; border-radius:8px; font-size:var(--fs-xs); font-weight:600; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; }
.seg-tab.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.seg-tab .n { background:var(--surface-3); border-radius:999px; padding:0 6px; font-size:10px; }
.seg-tab.active .n { background:var(--primary-soft); color:var(--primary-text); }

/* Empty state */
.empty-state { text-align:center; padding:48px 20px; color:var(--text-2); }
.empty-state-lg { min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; }
.empty-icon { width:84px; height:84px; border-radius:50%; background:var(--primary-soft); color:var(--primary-text); display:grid; place-items:center; font-size:32px; margin-bottom:8px; }
.empty-icon.danger { background:rgba(var(--danger-rgb),.12); color:#f87171; }
.empty-state h2 { font-size:var(--fs-xl); color:var(--text); }
.empty-state p { max-width:460px; margin:0 auto 8px; }
.empty-state .btn { margin-top:10px; }

/* Skeleton */
.sk,.sk-text { position:relative; overflow:hidden; }
.sk-text.loading { color:transparent !important; border-radius:6px; background:var(--skeleton); background-size:200% 100%; animation:shimmer 1.3s infinite; }
.sk { border-radius:8px; background:var(--skeleton); background-size:200% 100%; animation:shimmer 1.3s infinite; }

/* ── Modais ───────────────────────────────────────────────── */
.modal-backdrop { position:fixed; inset:0; background:rgba(5,7,15,.6); backdrop-filter:blur(4px); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-backdrop.open { display:flex; animation:fadeIn .15s; }
.modal { width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); animation:popIn .2s var(--ease-out); max-height:calc(100vh - 40px); display:flex; flex-direction:column; }
.modal-sm { max-width:420px; } .modal-lg { max-width:820px; }
.modal-head { display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-head h3 { font-size:var(--fs-base); } .modal-head p { margin:2px 0 0; font-size:var(--fs-xs); color:var(--text-3); }
.modal-head .modal-close { margin-left:auto; }
.modal-body { padding:22px; overflow-y:auto; }
.modal-foot { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; background:var(--surface-2); border-radius:0 0 18px 18px; }
.modal-foot.between { justify-content:space-between; }

/* ── Toasts ───────────────────────────────────────────────── */
.toasts { position:fixed; right:18px; bottom:18px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:10px; max-width:380px; }
.toast { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--primary-500); border-radius:12px; box-shadow:var(--shadow-lg); font-size:var(--fs-sm); animation:slideIn .25s var(--ease-out); }
.toast i { margin-top:2px; } .toast div { flex:1; }
.toast.success { border-left-color:var(--success); } .toast.success i { color:var(--success); }
.toast.danger { border-left-color:var(--danger); } .toast.danger i { color:var(--danger); }
.toast.warning { border-left-color:var(--warning); } .toast.warning i { color:var(--warning); }
.toast.info i { color:var(--info); }
.t-close { color:var(--text-3); font-size:16px; line-height:1; }
.toast.leaving { opacity:0; transform:translateX(12px); transition:all .3s; }

/* ── Utilitários ──────────────────────────────────────────── */
.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; } .justify-between { justify-content:space-between; } .justify-end { justify-content:flex-end; } .wrap { flex-wrap:wrap; }
.gap-1 { gap:4px; } .gap-2 { gap:8px; } .gap-3 { gap:12px; } .gap-4 { gap:16px; }
.mt-1 { margin-top:4px; } .mt-2 { margin-top:8px; } .mt-3 { margin-top:12px; } .mt-4 { margin-top:16px; } .mt-6 { margin-top:24px; }
.mb-0 { margin-bottom:0; } .mb-2 { margin-bottom:8px; } .mb-3 { margin-bottom:12px; } .mb-4 { margin-bottom:16px; }
.text-muted { color:var(--text-3); } .text-2 { color:var(--text-2); } .text-danger { color:#f87171; } .text-success { color:#34d399; } .text-right { text-align:right; } .text-center { text-align:center; }
.small { font-size:var(--fs-xs); } .strong { font-weight:600; color:var(--text); }
.w-100 { width:100%; } .nowrap { white-space:nowrap; } .truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spacer { flex:1; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.status-dot.on { background:var(--success); box-shadow:0 0 0 3px rgba(var(--success-rgb),.2); } .status-dot.off { background:var(--text-3); } .status-dot.warn { background:var(--warning); }

/* ── Loader personalizado (EAD.loaderHtml / EAD.loader / EAD.overlay) ── */
.ead-loader { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:44px 20px; color:var(--text-3); font-size:var(--fs-sm); font-weight:500; }
.ead-loader .orb { position:relative; width:48px; height:48px; flex-shrink:0; }
.ead-loader .orb::before,.ead-loader .orb::after { content:''; position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--primary-500); border-right-color:var(--violet); animation:spin 1s linear infinite; }
.ead-loader .orb::after { inset:8px; border-top-color:var(--violet); border-right-color:var(--primary-400); animation-direction:reverse; animation-duration:.75s; }
.ead-loader .orb i { position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:var(--primary-text); animation:pulse 1.5s ease-in-out infinite; }
.ead-loader-text::after { content:''; display:inline-block; width:1.1em; text-align:left; animation:dots 1.2s steps(4,end) infinite; }
.ead-loader.inline { flex-direction:row; padding:6px 0; gap:10px; }
.ead-loader.inline .orb { width:22px; height:22px; }
.ead-loader.inline .orb::before,.ead-loader.inline .orb::after { border-width:2px; } .ead-loader.inline .orb::after { inset:5px; } .ead-loader.inline .orb i { font-size:8px; }
.has-overlay { position:relative; }
.ead-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:var(--surface-glass); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); border-radius:inherit; animation:fadeIn .15s; }

/* ── Combo (select com busca — EAD.combo) ─────────────────── */
.combo { position:relative; }
.combo .combo-native { position:absolute !important; opacity:0; pointer-events:none; width:1px; height:1px; margin:0; padding:0; border:0; }
.combo-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; }
.combo-label { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .combo-label.placeholder { color:var(--text-3); }
.combo-chev { font-size:11px; color:var(--text-3); transition:transform .2s; flex-shrink:0; } .combo.open .combo-chev { transform:rotate(180deg); }
.combo-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:var(--z-dropdown); background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; box-shadow:var(--shadow-lg); display:none; overflow:hidden; }
.combo.open .combo-panel { display:block; animation:fadeUp .15s var(--ease-out); }
.combo-search { position:relative; padding:8px; border-bottom:1px solid var(--border); }
.combo-search i { position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:12px; pointer-events:none; }
.combo-search .input { padding-left:30px; }
.combo-list { list-style:none; margin:0; padding:6px; max-height:240px; overflow-y:auto; }
.combo-opt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:var(--fs-sm); color:var(--text-2); cursor:pointer; }
.combo-opt i { width:16px; text-align:center; color:var(--text-3); } .combo-opt span { flex:1; min-width:0; } .combo-opt small { color:var(--text-3); font-size:var(--fs-xs); white-space:nowrap; }
.combo-opt:hover,.combo-opt.hover { background:var(--surface-3); color:var(--text); }
.combo-opt.selected { background:var(--primary-soft); color:var(--primary-text); font-weight:600; }
.combo-opt.disabled { opacity:.45; cursor:not-allowed; }
.combo-empty { padding:14px; text-align:center; color:var(--text-3); font-size:var(--fs-sm); }
.combo.disabled .combo-btn { opacity:.6; pointer-events:none; }
.combo.is-invalid .combo-btn { border-color:var(--danger); }

/* ── Chips de seleção (checkbox/radio estilizados) ────────── */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip-check { position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-2); font-size:var(--fs-sm); font-weight:600; color:var(--text-2); cursor:pointer; user-select:none; transition:all .15s; }
.chip-check input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.chip-check .chip-ic { width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); display:grid; place-items:center; font-size:8px; color:transparent; transition:all .15s; flex-shrink:0; }
.chip-check:hover { border-color:var(--primary-300); color:var(--text); }
.chip-check.selected { border-color:var(--primary-500); background:var(--primary-soft); color:var(--primary-text); }
.chip-check.selected .chip-ic { background:var(--primary-500); border-color:var(--primary-500); color:#fff; }
.chip-check:focus-within { box-shadow:0 0 0 4px var(--ring); }
.chips.is-invalid .chip-check { border-color:var(--danger); }

/* ── Animações ────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes dots { 0%,20% { content:''; } 40% { content:'.'; } 60% { content:'..'; } 80%,100% { content:'...'; } }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.82); opacity:.55; } }
@keyframes fadeUp { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@keyframes popIn { from { opacity:0; transform:scale(.96) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes slideIn { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width:1024px) {
    .sidebar { transform:translateX(-100%); box-shadow:none; }
    body.sidebar-open .sidebar { transform:none; box-shadow:var(--shadow-lg); }
    .sidebar-close { display:inline-grid; }
    .main { margin-left:0; }
    .menu-toggle { display:inline-grid; }
}
@media (max-width:640px) {
    :root { --page-pad:16px; --topbar-h:58px; }
    .topbar-title .t-icon { display:none; }
    .user-menu .u-name,.user-menu .u-chev { display:none; }
    .user-menu .user-chip { padding:3px; }
    .hero { flex-direction:column; align-items:flex-start; padding:20px; }
    .hero-stat { text-align:left; }
    .card-body,.card-head { padding:16px; }
    .modal-foot { flex-wrap:wrap; } .modal-foot .btn { flex:1; }
    .toasts { left:12px; right:12px; bottom:12px; max-width:none; }
    .dl { grid-template-columns:1fr; gap:2px 0; } .dl dd { margin-bottom:8px; }
}
@media print { .sidebar,.topbar,.app-footer,.sidebar-backdrop { display:none !important; } .main { margin:0; } }