/* ============================================================
   Chabra EAD — Shared design system
   Green institutional product theme. Used by every page.
   ============================================================ */
:root {
  /* Brand green ramp (hue ~152) */
  --brand-900: oklch(0.30 0.055 156);
  --brand-800: oklch(0.36 0.070 156);
  --brand-700: oklch(0.45 0.095 154);
  --brand-600: oklch(0.55 0.120 152);
  --brand-500: oklch(0.64 0.135 150);
  --brand-100: oklch(0.94 0.040 152);
  --brand-50:  oklch(0.975 0.020 152);

  /* Neutrals (cool, faint green tint) */
  --bg:        oklch(0.975 0.004 160);
  --surface:   oklch(1 0 0);
  --ink:       oklch(0.24 0.012 160);
  --muted:     oklch(0.50 0.012 160);
  --faint:     oklch(0.62 0.010 160);
  --line:      oklch(0.915 0.006 160);
  --line-soft: oklch(0.945 0.005 160);

  /* Semantic status + indicator colors (🔴🔵🟡🟢) */
  --success:    oklch(0.56 0.13 150);  --success-bg: oklch(0.95 0.045 150);
  --progress:   oklch(0.60 0.13 151);  --progress-bg: oklch(0.95 0.040 151);
  --warning:    oklch(0.62 0.13 70);   --warning-bg: oklch(0.95 0.055 78);
  --danger:     oklch(0.56 0.18 27);   --danger-bg:  oklch(0.955 0.040 27);
  --info:       oklch(0.58 0.13 245);  --info-bg:    oklch(0.95 0.045 245);
  --gold:       oklch(0.66 0.115 80);  --gold-bg:    oklch(0.95 0.045 85);

  --dot-req:  var(--danger);    /* 🔴 obrigatório */
  --dot-new:  var(--info);      /* 🔵 novo */
  --dot-prog: var(--warning);   /* 🟡 em andamento */
  --dot-done: var(--success);   /* 🟢 concluído */

  /* On-dark sidebar text */
  --on-dark: oklch(0.96 0.01 156);
  --on-dark-soft: oklch(0.82 0.02 156);
  --on-dark-faint: oklch(0.68 0.025 156);

  --r-card: 16px; --r-ctl: 10px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px oklch(0.30 0.03 156 / 0.06), 0 1px 3px oklch(0.30 0.03 156 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.30 0.03 156 / 0.07), 0 2px 4px oklch(0.30 0.03 156 / 0.05);
  --shadow-lg: 0 14px 34px oklch(0.30 0.04 156 / 0.13), 0 4px 10px oklch(0.30 0.03 156 / 0.07);

  --sidebar-w: 264px; --sidebar-rail: 78px; --header-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --z-rail: 30; --z-header: 40; --z-drawer-backdrop: 50;
  --z-drawer: 60; --z-dropdown: 70; --z-modal-backdrop: 80; --z-modal: 81; --z-toast: 90;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
svg.ic { width: 20px; height: 20px; flex: none; }
:focus-visible { outline: 2.5px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ============================================================ App shell */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.app.is-collapsed { grid-template-columns: var(--sidebar-rail) 1fr; }

/* ============================================================ Sidebar */
.sidebar {
  grid-row: 1 / -1;
  background: linear-gradient(178deg, var(--brand-800), var(--brand-900) 78%);
  color: var(--on-dark); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: var(--z-rail);
  border-right: 1px solid oklch(0.30 0.05 156 / 0.5);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px; min-height: var(--header-h); border-bottom: 1px solid oklch(1 0 0 / 0.08); }
.brand-logo { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand-500), var(--brand-700));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.25), 0 4px 10px oklch(0.30 0.05 156 / 0.4); color: oklch(0.99 0.01 156); }
.brand-logo svg { width: 23px; height: 23px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; }
.brand-text strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.brand-text span { font-size: 11.5px; color: var(--on-dark-faint); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

.nav { padding: 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; }
.nav-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-faint); padding: 14px 12px 6px; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: var(--r-ctl);
  color: var(--on-dark-soft); font-weight: 500; font-size: 14.5px; position: relative; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease); }
.nav-item svg { color: currentColor; opacity: 0.92; }
.nav-item:hover { background: oklch(1 0 0 / 0.07); color: var(--on-dark); }
.nav-item.is-active { background: oklch(1 0 0 / 0.12); color: oklch(1 0 0); font-weight: 600; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07); }
.nav-item.is-active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: var(--brand-500); }
.nav-item .badge-count { margin-left: auto; font-size: 11.5px; font-weight: 700; background: var(--brand-500); color: oklch(0.18 0.03 156); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center; }

.sidebar-foot { padding: 14px; border-top: 1px solid oklch(1 0 0 / 0.08); }
.mini-progress { background: oklch(1 0 0 / 0.06); border: 1px solid oklch(1 0 0 / 0.08); border-radius: 12px; padding: 13px 14px; }
.mini-progress .mp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.mini-progress .mp-top small { color: var(--on-dark-faint); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.mini-progress .mp-top b { font-size: 15px; font-weight: 800; color: var(--on-dark); }
.mini-bar { height: 7px; border-radius: var(--r-pill); background: oklch(1 0 0 / 0.12); overflow: hidden; }
.mini-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-500), oklch(0.74 0.13 148)); width: calc(var(--p, 0) * 1%); transition: width 1.1s var(--ease); }

.app.is-collapsed .brand-text, .app.is-collapsed .nav-label, .app.is-collapsed .nav-item span,
.app.is-collapsed .nav-item .badge-count, .app.is-collapsed .sidebar-foot { display: none; }
.app.is-collapsed .brand { justify-content: center; padding-inline: 0; }
.app.is-collapsed .nav-item { justify-content: center; padding-inline: 0; }
.app.is-collapsed .nav-item.is-active::before { left: 0; }

/* ---------- Sidebar: submenus expansíveis (acordeão) ---------- */
.nav-parent { display: flex; flex-direction: column; }
.nav-toggle { width: 100%; text-align: left; }
.nav-toggle .nav-caret { margin-left: auto; width: 16px; height: 16px; opacity: 0.7; transition: transform .22s var(--ease); }
.nav-parent.is-open > .nav-toggle { color: var(--on-dark); }
.nav-parent.is-open > .nav-toggle .nav-caret { transform: rotate(180deg); }
.nav-sub {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 18px; padding-left: 9px; border-left: 1px solid oklch(1 0 0 / 0.12);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s var(--ease), opacity .2s var(--ease), margin-top .28s var(--ease);
}
.nav-parent.is-open > .nav-sub { max-height: 340px; opacity: 1; margin-top: 3px; }
.nav-subitem { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-ctl);
  color: var(--on-dark-soft); font-weight: 500; font-size: 13.8px; position: relative; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease); }
.nav-subitem svg { width: 17px; height: 17px; color: currentColor; opacity: 0.85; }
.nav-subitem:hover { background: oklch(1 0 0 / 0.06); color: var(--on-dark); }
.nav-subitem.is-active { background: oklch(1 0 0 / 0.12); color: oklch(1 0 0); font-weight: 600; }
.nav-subitem.is-active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; border-radius: 0 4px 4px 0; background: var(--brand-500); }
.nav-subitem .badge-count { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--brand-500); color: oklch(0.18 0.03 156); min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center; }

/* Acordeão no modo rail (recolhido): tira de ícones, sem caret/labels, sempre "aberto" */
.app.is-collapsed .nav-caret { display: none; }
.app.is-collapsed .nav-sub { max-height: none; opacity: 1; overflow: visible; margin: 0; padding: 0; border-left: none; }
.app.is-collapsed .nav-subitem { justify-content: center; padding-inline: 0; }
.app.is-collapsed .nav-subitem span, .app.is-collapsed .nav-subitem .badge-count { display: none; }
.app.is-collapsed .nav-subitem.is-active::before { left: 0; }

/* ============================================================ Header */
.main { min-width: 0; display: flex; flex-direction: column; }
.header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
  background: oklch(1 0 0 / 0.82); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 24px; }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r-ctl); display: grid; place-items: center; color: var(--muted); transition: background .15s var(--ease), color .15s var(--ease); position: relative; }
.icon-btn:hover { background: var(--brand-50); color: var(--brand-700); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); border: 2px solid var(--surface); }
.header h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.header .crumb { color: var(--faint); font-size: 13px; font-weight: 500; margin-top: 1px; }
.header-search { margin-left: 8px; flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px; color: var(--muted); transition: border-color .15s var(--ease), background .15s var(--ease); }
.header-search:focus-within { border-color: var(--brand-500); background: var(--surface); }
.header-search input { border: none; background: none; outline: none; flex: 1; color: var(--ink); font-size: 14px; }
.header-search input::placeholder { color: var(--faint); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header-divider { width: 1px; height: 30px; background: var(--line); margin: 0 6px; }

.user-menu { position: relative; }
.user-trigger { display: flex; align-items: center; gap: 11px; padding: 6px 10px 6px 6px; border-radius: var(--r-pill); transition: background .15s var(--ease); }
.user-trigger:hover { background: var(--brand-50); }
.avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: oklch(0.99 0.01 156); background: linear-gradient(145deg, var(--brand-500), var(--brand-700)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.25); }
.user-trigger .u-meta { text-align: left; line-height: 1.2; }
.user-trigger .u-meta b { font-size: 14px; font-weight: 600; }
.user-trigger .u-meta small { font-size: 12px; color: var(--faint); }
.user-trigger .chev { color: var(--faint); transition: transform .2s var(--ease); width: 16px; height: 16px; }
.user-menu.open .chev { transform: rotate(180deg); }

.dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 252px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 7px; z-index: var(--z-dropdown); opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.user-menu.open .dropdown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dropdown-head { padding: 12px; display: flex; gap: 11px; align-items: center; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.dropdown-head .u-meta b { display: block; font-size: 14px; }
.dropdown-head .u-meta small { font-size: 12.5px; color: var(--muted); }
.dropdown-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left; transition: background .14s var(--ease), color .14s var(--ease); }
.dropdown-item svg { color: var(--muted); }
.dropdown-item:hover { background: var(--brand-50); color: var(--brand-700); }
.dropdown-item:hover svg { color: var(--brand-700); }
.dropdown-item.danger { color: var(--danger); } .dropdown-item.danger svg { color: var(--danger); }
.dropdown-item.danger:hover { background: var(--danger-bg); color: var(--danger); }
.dropdown-sep { height: 1px; background: var(--line-soft); margin: 6px 4px; }

/* ============================================================ Content + typography helpers */
.content { padding: 28px 32px 56px; max-width: 1320px; width: 100%; margin: 0 auto; }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.greet h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; }
.greet p { color: var(--muted); margin-top: 4px; font-size: 14.5px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 34px 2px 16px; }
.section-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.section-head h3 svg { color: var(--brand-600); }
.section-head .muted-count { color: var(--faint); font-weight: 500; font-size: 13.5px; }
.link-more { color: var(--brand-600); font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 8px; transition: background .15s var(--ease); }
.link-more:hover { background: var(--brand-50); }

/* ============================================================ Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; border-radius: var(--r-ctl); padding: 10px 16px; transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease), border-color .15s var(--ease); white-space: nowrap; }
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-600); color: oklch(0.99 0.01 156); box-shadow: 0 2px 6px oklch(0.45 0.1 152 / 0.35); }
.btn-primary:hover { background: var(--brand-700); box-shadow: 0 4px 12px oklch(0.45 0.1 152 / 0.4); }
.btn-ghost { background: var(--surface); color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brand-500); background: var(--brand-50); }
.btn-danger { background: var(--danger); color: oklch(0.99 0.01 27); }
.btn-danger:hover { filter: brightness(1.07); }
.btn-icon-only { width: 42px; padding: 10px; }
.btn-sm { padding: 8px 12px; font-size: 13px; }
.btn-block { width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--bg); color: var(--faint); }
.btn[disabled]:active { transform: none; }

/* ============================================================ Badges + indicator dots */
.badge { align-self: flex-start; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.01em; }
.badge svg { width: 13px; height: 13px; }
.badge .dotc { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.s-done { background: var(--success-bg); color: var(--success); }
.badge.s-prog { background: var(--progress-bg); color: var(--progress); }
.badge.s-pend { background: var(--warning-bg); color: var(--warning); }
.badge.s-req  { background: var(--danger-bg); color: var(--danger); }
.badge.s-new  { background: var(--info-bg); color: var(--info); }
.badge.s-cert { background: var(--gold-bg); color: var(--gold); }
.badge.s-neutral { background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
/* Estados de gestão (matrículas / grupos) */
.badge.s-ativa     { background: var(--success-bg); color: var(--success); }
.badge.s-congelada { background: var(--info-bg);    color: var(--info); }
.badge.s-cancelada { background: var(--danger-bg);  color: var(--danger); }
.badge.s-inativo   { background: var(--bg);         color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* ============================================================ Progress bar */
.progress-wrap { margin: 14px 0; }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.progress-top small { color: var(--muted); font-size: 12px; font-weight: 500; }
.progress-top b { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar { height: 8px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
.bar > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); transition: width 1.1s var(--ease); }
.bar.is-done > i { background: linear-gradient(90deg, var(--success), oklch(0.66 0.14 150)); }

/* ============================================================ Stat cards (overview) */
.stat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card.is-highlight { background: linear-gradient(150deg, var(--brand-600), var(--brand-800)); border-color: transparent; color: var(--on-dark); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-ic { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; }
.stat-ic.c-lib { background: var(--info-bg); color: var(--info); }
.stat-ic.c-prog { background: var(--progress-bg); color: var(--progress); }
.stat-ic.c-done { background: var(--success-bg); color: var(--success); }
.stat-ic.c-eval { background: var(--warning-bg); color: var(--warning); }
.is-highlight .stat-ic { background: oklch(1 0 0 / 0.16); color: var(--on-dark); }
.stat-num { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 13px; font-weight: 500; }
.is-highlight .stat-label { color: var(--on-dark-soft); }
.stat-card .resume-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.stat-card .resume-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: oklch(0.99 0.01 156); }

/* ============================================================ Toolbar: search + filter chips */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 14px 16px; }
.search-field { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 16px; color: var(--muted); transition: border-color .15s var(--ease), background .15s var(--ease); }
.search-field:focus-within { border-color: var(--brand-500); background: var(--surface); }
.search-field input { border: none; background: none; outline: none; flex: 1; color: var(--ink); font-size: 14.5px; }
.search-field input::placeholder { color: var(--faint); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: all .15s var(--ease); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-500); }
.chip.is-active { background: var(--brand-600); color: oklch(0.99 0.01 156); box-shadow: 0 2px 6px oklch(0.45 0.1 152 / 0.3); }
.chip .dotc { width: 8px; height: 8px; border-radius: 50%; }
.no-results { padding: 40px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-card); }

/* ============================================================ Course cards (grid) */
.grid-courses { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.course { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.course:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--brand-100); }
.course.is-featured { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500), var(--shadow-md); }
.thumb { height: 132px; position: relative; overflow: hidden; display: grid; place-items: center; color: oklch(1 0 0 / 0.95); }
.thumb::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(1 0 0 / 0.18) 1.4px, transparent 1.5px); background-size: 17px 17px; opacity: 0.5; }
.thumb svg { width: 52px; height: 52px; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px oklch(0.2 0.05 156 / 0.35)); }
.th-safety { background: linear-gradient(140deg, var(--brand-500), var(--brand-800)); }
.th-book   { background: linear-gradient(140deg, oklch(0.62 0.11 196), oklch(0.40 0.10 220)); }
.th-aid    { background: linear-gradient(140deg, oklch(0.62 0.14 18), oklch(0.45 0.13 12)); }
.th-height { background: linear-gradient(140deg, oklch(0.66 0.13 70), oklch(0.48 0.12 55)); }
.th-fire   { background: linear-gradient(140deg, oklch(0.64 0.16 35), oklch(0.45 0.15 25)); }
.th-leader { background: linear-gradient(140deg, oklch(0.58 0.13 300), oklch(0.40 0.12 295)); }
.th-env    { background: linear-gradient(140deg, oklch(0.66 0.14 145), oklch(0.45 0.12 160)); }
.thumb .ribbon { position: absolute; z-index: 2; top: 12px; left: 12px; background: oklch(0.20 0.04 156 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: oklch(0.99 0.01 156); font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; }
.thumb .ribbon.r-new { background: oklch(0.45 0.14 245 / 0.7); }
.thumb .chip-hours { position: absolute; z-index: 2; bottom: 12px; right: 12px; background: oklch(0.20 0.04 156 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: oklch(0.99 0.01 156); font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 5px; }
.thumb .chip-hours svg { width: 13px; height: 13px; filter: none; }
.course-body { padding: 16px 17px 17px; display: flex; flex-direction: column; flex: 1; gap: 2px; }
.course-cat { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-600); }
.course-body h4 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 0; }
.course-meta { color: var(--faint); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.course-meta svg { width: 14px; height: 14px; }
.course .actions { margin-top: auto; display: flex; gap: 10px; padding-top: 14px; }
.course .actions .btn { flex: 1; }
.course .actions .btn-icon-only { flex: 0 0 auto; }

/* ============================================================ List rows (required, in-progress, completed) */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel.is-priority { border-color: oklch(0.80 0.10 30); box-shadow: 0 0 0 1px oklch(0.80 0.10 30 / 0.5), var(--shadow-sm); }
.panel-banner { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 13px; font-weight: 600; background: var(--danger-bg); color: var(--danger); border-bottom: 1px solid oklch(0.80 0.10 30 / 0.3); }
.row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); transition: background .15s var(--ease); }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--brand-50); }
.row-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px color-mix(in oklch, currentColor 16%, transparent); }
.row-dot.d-req { background: var(--dot-req); color: var(--dot-req); }
.row-dot.d-new { background: var(--dot-new); color: var(--dot-new); }
.row-dot.d-prog { background: var(--dot-prog); color: var(--dot-prog); }
.row-dot.d-done { background: var(--dot-done); color: var(--dot-done); }
.row-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--brand-700); }
.row-ic.gold { background: var(--gold-bg); color: var(--gold); }
.row-main { min-width: 0; flex: 1; }
.row-main b { font-size: 14.5px; font-weight: 600; display: block; }
.row-main small { color: var(--muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.row-main small svg { width: 13px; height: 13px; }
.row-mid { width: 180px; flex: none; }
.row-mid .progress-wrap { margin: 0; }
.row-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.deadline { font-size: 12.5px; font-weight: 600; color: var(--warning); display: inline-flex; align-items: center; gap: 5px; }
.deadline.is-urgent { color: var(--danger); }
.deadline svg { width: 14px; height: 14px; }

/* ============================================================ Evaluations */
.eval-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.eval-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.eval-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.eval-head { display: flex; align-items: center; gap: 12px; }
.eval-head .row-ic { background: var(--warning-bg); color: var(--warning); }
.eval-head b { font-size: 15px; font-weight: 700; }
.eval-stats { display: flex; gap: 10px; }
.eval-stat { flex: 1; background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.eval-stat .k { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.eval-stat .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* ============================================================ History timeline */
.timeline { position: relative; padding-left: 8px; }
.tl-item { display: flex; gap: 16px; padding: 4px 0; }
.tl-rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.tl-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); z-index: 1; }
.tl-node.n-lesson { box-shadow: inset 0 0 0 2px var(--progress); color: var(--progress); }
.tl-node.n-eval { box-shadow: inset 0 0 0 2px var(--warning); color: var(--warning); }
.tl-node.n-cert { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.tl-node svg { width: 17px; height: 17px; }
.tl-line { width: 2px; flex: 1; background: var(--line); margin: 2px 0; min-height: 14px; }
.tl-item:last-child .tl-line { display: none; }
.tl-body { padding-bottom: 18px; flex: 1; min-width: 0; }
.tl-body b { font-size: 14px; font-weight: 600; }
.tl-body .tl-meta { color: var(--faint); font-size: 12.5px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.tl-result { font-weight: 700; }
.tl-result.ok { color: var(--success); }
.tl-result.fail { color: var(--danger); }

/* ============================================================ Table */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg); }
table.tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line-soft); }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr { transition: background .14s var(--ease); }
table.tbl tbody tr:hover { background: var(--brand-50); }
.cell-strong { font-weight: 600; }
.cell-mono { font-variant-numeric: tabular-nums; color: var(--muted); }

/* ============================================================ Tabs (reusable: [data-tabs]) */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { padding: 13px 16px; font-size: 14px; font-weight: 600; color: var(--muted); border-radius: 10px 10px 0 0; position: relative; display: inline-flex; align-items: center; gap: 8px; transition: color .15s var(--ease), background .15s var(--ease); }
.tab svg { width: 16px; height: 16px; }
.tab:hover { color: var(--brand-700); background: var(--brand-50); }
.tab.is-active { color: var(--brand-700); }
.tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--brand-600); }
.tab .cnt { font-size: 11.5px; font-weight: 700; background: var(--bg); color: var(--muted); padding: 1px 8px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }
.tab.is-active .cnt { background: var(--brand-100); color: var(--brand-700); box-shadow: none; }
.tab-panel { padding: 22px 2px 2px; }
.tab-panel[hidden] { display: none; }

/* Toolbar inline select (filtro por grupo etc.) */
.toolbar-select { display: inline-flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 6px 0 14px; color: var(--muted); }
.toolbar-select svg { width: 16px; height: 16px; }
.toolbar-select select { border: none; background: none; outline: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); padding: 10px 6px; cursor: pointer; }

/* ============================================================ Lesson page */
.lesson-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.player { background: oklch(0.16 0.02 220); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-md); }
.player-stage { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; background:
  radial-gradient(120% 120% at 50% 0%, oklch(0.32 0.05 230), oklch(0.14 0.02 235)); color: oklch(0.95 0.01 220); }
.player-stage::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(oklch(1 0 0 / 0.05) 1px, transparent 1.5px); background-size: 22px 22px; }
.play-btn { width: 78px; height: 78px; border-radius: 50%; background: oklch(1 0 0 / 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; color: oklch(1 0 0); position: relative; z-index: 1; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3); transition: transform .2s var(--ease), background .2s var(--ease); }
.play-btn:hover { transform: scale(1.06); background: oklch(1 0 0 / 0.22); }
.play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.player-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: oklch(0.85 0.01 220); font-size: 13px; }
.player-bar .pseudo-track { flex: 1; height: 5px; border-radius: var(--r-pill); background: oklch(1 0 0 / 0.16); overflow: hidden; }
.player-bar .pseudo-track > i { display: block; height: 100%; width: 34%; background: var(--brand-500); border-radius: inherit; }
.lesson-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 20px 0 6px; }
.lesson-sub { color: var(--muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px 20px; }
.card-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.card-title svg { color: var(--brand-600); width: 18px; height: 18px; }
.prose { color: oklch(0.34 0.012 160); font-size: 14.5px; line-height: 1.7; max-width: 70ch; }
.material { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .15s var(--ease), background .15s var(--ease); }
.material + .material { margin-top: 10px; }
.material:hover { border-color: var(--brand-500); background: var(--brand-50); }
.material .m-ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--brand-700); }
.material .m-ic.pdf { background: var(--danger-bg); color: var(--danger); }
.material .m-ic.zip { background: var(--warning-bg); color: var(--warning); }
.material b { font-size: 14px; font-weight: 600; display: block; }
.material small { font-size: 12px; color: var(--faint); }
.material .dl { margin-left: auto; }

.complete-box { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-card); background: var(--brand-50); border: 1px solid var(--brand-100); transition: background .2s var(--ease), border-color .2s var(--ease); }
.complete-box.done { background: var(--success-bg); border-color: color-mix(in oklch, var(--success) 35%, transparent); }
.checkbox { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--brand-500); color: transparent; transition: all .18s var(--ease); }
.complete-box.done .checkbox { background: var(--success); box-shadow: none; color: oklch(0.99 0 0); }
.checkbox svg { width: 16px; height: 16px; }
.complete-box .ct b { font-size: 14.5px; font-weight: 600; display: block; }
.complete-box .ct small { font-size: 12.5px; color: var(--muted); }

.lesson-list { display: flex; flex-direction: column; }
.ll-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-ctl); font-size: 14px; transition: background .14s var(--ease); }
.ll-item:hover { background: var(--brand-50); }
.ll-item.current { background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-100); font-weight: 600; }
.ll-num { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--bg); color: var(--muted); }
.ll-item.done .ll-num { background: var(--success); color: oklch(0.99 0 0); }
.ll-item.current .ll-num { background: var(--brand-600); color: oklch(0.99 0 0); }
.ll-item.locked { color: var(--faint); }
.ll-item.locked .ll-num { background: var(--bg); }
.ll-item .ll-time { margin-left: auto; font-size: 12px; color: var(--faint); }

.comment { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.comment:first-of-type { border-top: none; }
.comment .avatar { width: 36px; height: 36px; font-size: 13px; }
.comment .c-body b { font-size: 13.5px; font-weight: 600; }
.comment .c-body .c-time { font-size: 12px; color: var(--faint); margin-left: 8px; font-weight: 400; }
.comment .c-body p { font-size: 14px; color: oklch(0.34 0.012 160); margin-top: 3px; }
.comment-form { display: flex; gap: 12px; margin-top: 16px; }
.comment-form textarea { flex: 1; resize: vertical; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 11px 14px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); outline: none; transition: border-color .15s var(--ease), background .15s var(--ease); }
.comment-form textarea:focus { border-color: var(--brand-500); background: var(--surface); }

/* ============================================================ Library */
.lib-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.lib-cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 20px; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.lib-cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-100); }
.lib-ic { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; }
.lib-cat h4 { font-size: 16px; font-weight: 700; }
.lib-cat p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.lib-count { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--brand-600); display: inline-flex; align-items: center; gap: 6px; }
.doc-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); transition: background .14s var(--ease); }
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--brand-50); }

/* ============================================================ Comunicados */
.comunicado { display: flex; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line-soft); }
.comunicado:last-child { border-bottom: none; }
.com-img { width: 130px; height: 86px; flex: none; border-radius: 12px; display: grid; place-items: center; color: oklch(1 0 0 / 0.9); overflow: hidden; position: relative; }
.com-img svg { width: 34px; height: 34px; z-index: 1; }
.com-body { flex: 1; min-width: 0; }
.com-body h4 { font-size: 16px; font-weight: 700; }
.com-body .com-meta { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 12.5px; color: var(--faint); }
.com-body .com-meta span { display: inline-flex; align-items: center; gap: 5px; }
.com-body .com-meta svg { width: 13px; height: 13px; }
.com-body p { font-size: 14px; color: oklch(0.34 0.012 160); }
.com-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--info); flex: none; margin-top: 7px; }

/* ============================================================ Reports / charts */
.report-grid { display: grid; gap: 20px; grid-template-columns: repeat(12, 1fr); }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 20px 22px; }
.chart-card h4 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.chart-card h4 svg { color: var(--brand-600); width: 18px; height: 18px; }
.chart-card .sub { color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 180px; margin-top: 22px; padding-bottom: 4px; }
.bars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars .col .stack { width: 100%; max-width: 46px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); height: calc(var(--h, 0) * 1%); transition: height 1s var(--ease); min-height: 4px; }
.bars .col .stack.alt { background: linear-gradient(180deg, oklch(0.78 0.10 150), oklch(0.66 0.12 150)); }
.bars .col label { font-size: 12px; color: var(--muted); font-weight: 500; }
.donut-wrap { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.donut { width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--success) 0 var(--a,0%), var(--warning) var(--a,0%) var(--b,0%), var(--danger) var(--b,0%) 100%); }
.donut::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--surface); }
.donut .donut-num { position: relative; z-index: 1; font-size: 24px; font-weight: 800; }
.legend { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.legend .li { display: flex; align-items: center; gap: 9px; }
.legend .sw { width: 12px; height: 12px; border-radius: 4px; }
.legend b { font-variant-numeric: tabular-nums; }
.kpi-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi { background: var(--bg); border-radius: 12px; padding: 14px 16px; }
.kpi .kpi-v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .kpi-k { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kpi.warn .kpi-v { color: var(--warning); } .kpi.bad .kpi-v { color: var(--danger); } .kpi.good .kpi-v { color: var(--success); }

/* ============================================================ Uploader (certificados / cursos) */
.uploader { border: 2px dashed var(--line); border-radius: var(--r-card); background: var(--surface); padding: 38px 24px; text-align: center; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); }
.uploader:hover, .uploader.dragover { border-color: var(--brand-500); background: var(--brand-50); }
.uploader .up-ic { width: 62px; height: 62px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.uploader.dragover .up-ic { background: var(--brand-600); color: oklch(0.99 0.01 156); transform: translateY(-3px); }
.uploader .up-ic svg { width: 30px; height: 30px; }
.uploader h4 { font-size: 16px; font-weight: 700; }
.uploader h4 .brand-link { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.uploader p { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.up-formats { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fmt-pill { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--bg); padding: 4px 11px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line); }
.up-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.up-file { display: flex; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); }
.up-file .uf-ic { width: 40px; height: 40px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--bg); color: var(--brand-700); }
.up-file.is-error .uf-ic { background: var(--danger-bg); color: var(--danger); }
.up-file.is-done .uf-ic { background: var(--success-bg); color: var(--success); }
.up-file .uf-main { flex: 1; min-width: 0; }
.up-file .uf-main b { font-size: 14px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-file .uf-main small { font-size: 12px; color: var(--faint); }
.up-file.is-error .uf-main small { color: var(--danger); font-weight: 500; }
.up-file.is-done .uf-main small { color: var(--success); font-weight: 500; }
.up-file .uf-bar { height: 6px; border-radius: var(--r-pill); background: var(--bg); overflow: hidden; margin-top: 7px; box-shadow: inset 0 0 0 1px var(--line-soft); }
.up-file .uf-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); border-radius: inherit; transition: width .35s var(--ease); }
.up-file.is-done .uf-bar > i { background: var(--success); }
.up-file .uf-x { color: var(--faint); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; transition: background .14s var(--ease), color .14s var(--ease); flex: none; }
.up-file .uf-x:hover { background: var(--danger-bg); color: var(--danger); }

/* ============================================================ Certificate status cards */
.cert-status-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
.cert-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 18px; display: flex; gap: 14px; align-items: flex-start; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cert-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cert-card.expired { border-color: color-mix(in oklch, var(--danger) 30%, transparent); }
.cert-card .cc-ic { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--gold-bg); color: var(--gold); }
.cert-card.expiring .cc-ic { background: var(--warning-bg); color: var(--warning); }
.cert-card.expired .cc-ic { background: var(--danger-bg); color: var(--danger); }
.cert-card .cc-main { min-width: 0; flex: 1; }
.cert-card .cc-main b { font-size: 14.5px; font-weight: 700; display: block; }
.cert-card .cc-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cert-card .cc-meta { font-size: 12.5px; color: var(--muted); margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.cert-card .cc-meta svg { width: 14px; height: 14px; }
.cert-card .cc-meta.danger { color: var(--danger); font-weight: 600; }

/* ============================================================ Selectable list (available certificate models) */
.select-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .14s var(--ease); }
.select-row:last-child { border-bottom: none; }
.select-row:hover { background: var(--brand-50); }
.select-row.selected { background: var(--brand-50); }
.radio { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px var(--line); display: grid; place-items: center; transition: box-shadow .15s var(--ease); }
.select-row:hover .radio { box-shadow: inset 0 0 0 2px var(--brand-500); }
.select-row.selected .radio { box-shadow: inset 0 0 0 2px var(--brand-600); }
.select-row.selected .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-600); }
.select-row .sr-main { flex: 1; min-width: 0; }
.select-row .sr-main b { font-size: 14.5px; font-weight: 600; }
.select-row .sr-main small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.select-tag { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* ============================================================ Field forms (shared) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--faint); font-weight: 400; }
.field input, .field select, .field textarea { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); outline: none; transition: border-color .15s var(--ease), background .15s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-500); background: var(--surface); }
.form-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ============================================================ Toast */
.toast-host { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--ink); color: oklch(0.97 0.005 160); padding: 13px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; min-width: 250px; transform: translateY(16px); opacity: 0; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.toast.show { transform: translateY(0); opacity: 1; }
.toast .t-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--success); color: oklch(0.99 0 0); }
.toast .t-ic svg { width: 16px; height: 16px; }

/* ============================================================ Modal (email certificate, confirmations) */
.modal-backdrop { position: fixed; inset: 0; background: oklch(0.2 0.03 156 / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: var(--z-modal-backdrop); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .2s var(--ease); }
.modal-backdrop.show { opacity: 1; }
.modal-backdrop[hidden] { display: none; }
.modal { width: 100%; max-width: 448px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: 26px; position: relative; z-index: var(--z-modal); transform: translateY(10px) scale(0.98); transition: transform .2s var(--ease); }
.modal-backdrop.show .modal { transform: none; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: background .14s var(--ease), color .14s var(--ease); }
.modal-x:hover { background: var(--bg); color: var(--ink); }
.modal-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-100); color: var(--brand-700); margin-bottom: 16px; }
.modal-ic svg { width: 26px; height: 26px; }
.modal h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.modal-sub { color: var(--muted); font-size: 13.5px; margin: 5px 0 18px; }
.modal-sub b { color: var(--ink); }
.modal .field { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; margin-top: 6px; }
.modal-actions .btn { flex: 1; }

/* ============================================================ Mobile drawer */
.backdrop { position: fixed; inset: 0; background: oklch(0.2 0.03 156 / 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: var(--z-drawer-backdrop); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.backdrop.show { opacity: 1; pointer-events: auto; }
.hamburger { display: none; }

/* ============================================================ Responsive */
@media (max-width: 1180px) { .header-search { display: none; } .lesson-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) {
  .app { grid-template-columns: var(--sidebar-rail) 1fr; }
  .brand-text, .nav-label, .nav-item span, .nav-item .badge-count, .sidebar-foot { display: none; }
  .brand { justify-content: center; padding-inline: 0; }
  .nav-item { justify-content: center; padding-inline: 0; }
  .nav-item.is-active::before { left: 0; }
  /* acordeão -> tira de ícones */
  .nav-caret { display: none; }
  .nav-sub { max-height: none; opacity: 1; overflow: visible; margin: 0; padding: 0; border-left: none; }
  .nav-subitem { justify-content: center; padding-inline: 0; }
  .nav-subitem span, .nav-subitem .badge-count { display: none; }
  .nav-subitem.is-active::before { left: 0; }
  #collapseBtn { display: none; }
  .content { padding: 24px; }
  .col-4, .col-6, .col-8 { grid-column: span 6; }
  .row-mid { display: none; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: var(--sidebar-w); height: 100dvh; transform: translateX(-105%); transition: transform .28s var(--ease); z-index: var(--z-drawer); }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand-text, .sidebar .nav-item span, .sidebar .nav-item .badge-count, .sidebar .sidebar-foot { display: flex; }
  .sidebar .nav-label { display: block; }
  .sidebar .brand { justify-content: flex-start; padding-inline: 20px; }
  .sidebar .nav-item { justify-content: flex-start; padding-inline: 13px; }
  .sidebar .nav-item.is-active::before { left: -14px; }
  /* acordeão restaurado dentro do drawer */
  .sidebar .nav-caret { display: block; }
  .sidebar .nav-subitem span { display: flex; }
  .sidebar .nav-subitem .badge-count { display: grid; }
  .sidebar .nav-sub { max-height: 0; opacity: 0; overflow: hidden; margin-left: 18px; padding-left: 9px; border-left: 1px solid oklch(1 0 0 / 0.12); }
  .sidebar .nav-parent.is-open > .nav-sub { max-height: 340px; opacity: 1; margin-top: 3px; }
  .sidebar .nav-subitem { justify-content: flex-start; padding-inline: 12px; }
  .sidebar .nav-subitem.is-active::before { left: -10px; }
  .hamburger { display: grid; }
  .header { padding-inline: 16px; }
  .user-trigger .u-meta, .user-trigger .chev { display: none; }
  .content { padding: 18px 16px 48px; }
  .page-intro { flex-direction: column; align-items: stretch; gap: 14px; }
  .page-intro > .btn { align-self: flex-start; }
  .col-4, .col-6, .col-8, .col-12 { grid-column: span 12; }
  .row { flex-wrap: wrap; }
  .row-end { width: 100%; margin-left: 58px; }
}
@media (max-width: 540px) {
  .header h1 { font-size: 17px; }
  .toast-host { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; }
  .eval-grid, .grid-courses { grid-template-columns: 1fr; }
}

/* ============================================================ Chat (auxílio) */
.channel-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--brand-50); color: var(--brand-700); font-size: 13.5px; margin-bottom: 18px; }
.channel-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.channel-note b { color: var(--ink); }

.chat { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; }
.chat-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; min-height: 560px; }
.chat-list-head { padding: 14px; border-bottom: 1px solid var(--line-soft); }
.chat-search { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 9px 14px; color: var(--muted); transition: border-color .15s var(--ease), background .15s var(--ease); }
.chat-search:focus-within { border-color: var(--brand-500); background: var(--surface); }
.chat-search svg { width: 17px; height: 17px; }
.chat-search input { border: none; background: none; outline: none; flex: 1; color: var(--ink); font-size: 14px; }
.chat-convs { overflow-y: auto; flex: 1; }
.chat-conv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); transition: background .14s var(--ease); }
.chat-conv:hover { background: var(--brand-50); }
.chat-conv.is-active { background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }
.chat-conv-av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: oklch(0.99 0.01 156); background: linear-gradient(145deg, var(--brand-500), var(--brand-700)); }
.chat-conv-main { flex: 1; min-width: 0; }
.chat-conv-main b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-main small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.chat-conv-end { flex: none; }

.chat-thread { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden; min-height: 560px; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); padding: 40px; display: flex; flex-direction: column; align-items: center; }
.chat-empty-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-50); color: var(--brand-600); display: grid; place-items: center; margin-bottom: 14px; }
.chat-empty-ic svg { width: 26px; height: 26px; }
.chat-empty h3 { font-size: 16px; font-weight: 700; color: var(--ink); }
.chat-empty p { font-size: 13.5px; margin-top: 4px; max-width: 32ch; }

.chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.chat-head-main { flex: 1; min-width: 0; }
.chat-head-main b { font-size: 15px; font-weight: 700; display: block; }
.chat-head-main small { font-size: 12.5px; color: var(--muted); }
.chat-head-end { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--bg); }
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 10px 14px; border-radius: 14px; border-bottom-left-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink); }
.msg.mine .msg-bubble { background: var(--brand-600); color: oklch(0.99 0.01 156); border-color: transparent; border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.msg-text { white-space: pre-wrap; word-wrap: break-word; }
.msg-meta { font-size: 11.5px; color: var(--faint); margin-top: 4px; padding: 0 4px; }

.chat-composer { display: flex; gap: 10px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--line-soft); background: var(--surface); }
.chat-composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 11px 13px; font: inherit; font-size: 14px; color: var(--ink); background: var(--bg); outline: none; max-height: 120px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.chat-composer textarea:focus { border-color: var(--brand-500); background: var(--surface); }
.chat-composer .btn { padding: 11px 14px; }

@media (max-width: 860px) {
  .chat { grid-template-columns: 1fr; }
  .chat-list { min-height: 0; max-height: 300px; }
  .chat-thread { min-height: 480px; }
}

/* ============================================================ Notificações (overlay do sino) */
.notif-pop { position: fixed; top: 60px; right: 18px; z-index: var(--z-modal, 1000); width: 340px; max-width: calc(100vw - 32px); opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.notif-pop.show { opacity: 1; transform: translateY(0) scale(1); }
.notif-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg, 0 18px 50px oklch(0.2 0.03 250 / 0.22)); overflow: hidden; }
.notif-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.notif-head b { font-size: 14px; font-weight: 700; }
.notif-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.notif-x { margin-left: auto; border: none; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 5px; border-radius: 8px; }
.notif-x:hover { background: var(--bg); color: var(--ink); }
.notif-x svg { width: 17px; height: 17px; }
.notif-count { font-weight: 700; color: var(--brand-700); background: var(--brand-100); border-radius: var(--r-pill); padding: 1px 9px; }
.notif-body { max-height: min(62vh, 460px); overflow-y: auto; padding: 4px 0 8px; }
.notif-cat { display: flex; align-items: center; gap: 8px; padding: 13px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.notif-cat svg { width: 14px; height: 14px; color: var(--brand-600); }
.notif-cat i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-100); border-radius: var(--r-pill); padding: 1px 8px; }
.notif-link { display: flex; gap: 11px; padding: 11px 16px; text-decoration: none; color: inherit; border-top: 1px solid var(--line-soft); transition: background .14s var(--ease); }
.notif-cat + .notif-link { border-top: none; }
.notif-link:hover { background: var(--brand-50); }
.notif-lic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--bg); color: var(--brand-700); }
.notif-lic svg { width: 17px; height: 17px; }
.notif-lmain { min-width: 0; }
.notif-lmain b { font-size: 13.5px; font-weight: 600; display: block; }
.notif-lmain p { font-size: 12.5px; color: oklch(0.34 0.012 160); margin-top: 2px; line-height: 1.45; }
.notif-lmain small { font-size: 11.5px; color: var(--faint); display: block; margin-top: 3px; }
.notif-empty { font-size: 13.5px; color: var(--muted); text-align: center; padding: 28px 0; }
@media (max-width: 540px) { .notif-pop { left: 12px; right: 12px; width: auto; top: 58px; } }

/* ============================================================ Visualizador de PDF (modal) */
.pdf-modal { position: fixed; inset: 0; z-index: var(--z-modal, 1000); background: oklch(0.2 0.03 250 / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; opacity: 0; transition: opacity .18s var(--ease); }
.pdf-modal.show { opacity: 1; }
.pdf-frame-wrap { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-lg, 0 18px 50px oklch(0.2 0.03 250 / 0.3)); width: min(960px, 100%); height: min(88vh, 100%); display: flex; flex-direction: column; overflow: hidden; }
.pdf-frame-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.pdf-frame-head b { font-size: 14.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-frame-head .pf-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pdf-frame { flex: 1; border: none; width: 100%; background: var(--bg); }
.pdf-empty { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; padding: 24px; }

/* ============================================================ Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}