/* ============================================================
   Academia — interface
   O mundo visual é o da Kingdom Library: chão de pedra quente,
   cartões brancos de 22px, uma só voz laranja, tudo o que se carrega
   em pílula e Google Sans a 400/500.
   ============================================================ */

:root{
  color-scheme: light;
  --canvas:#f5f3f0; --canvas-2:#efece8;
  --surface:#ffffff; --surface-2:#fbfaf8; --sunken:#f1eeea;
  --line:#e8e3dd; --line-strong:#d9d3cb;
  --ink:#1c1a17; --ink-2:#3b3732; --muted:#6f6962; --faint:#7d766e;

  --orange-300:#ffb38a; --orange-400:#ff8a4c; --orange-500:#f4621d; --orange-600:#e14e0c;
  --orange-soft:#fff0e7; --orange-ink:#b8400a;
  --green:#15803d; --green-soft:#e3f6ea; --green-ink:#0f7a37;
  --red:#d42a39; --red-soft:#fde8ea; --red-ink:#b4202d;
  --amber-soft:#fff4d9; --amber-ink:#8a5b00;
  --blue-soft:#e6f1fb; --blue-ink:#1f5f9a;
  --violet-1:#7b72e8; --violet-2:#564cc9; --violet-soft:#ecebfc; --violet-ink:#4a42b8;

  /* A cor de destaque. Aparência pode trocá-la; por omissão é a da Library. */
  --accent:#f4621d; --accent-soft:#fff0e7; --accent-ink:#b8400a; --accent-line:rgba(244,98,29,.35);
  --cta:linear-gradient(180deg,#ff7f37 0%,#f2570f 100%);
  --cta-hover:linear-gradient(180deg,#ff8b47 0%,#f4621d 100%);
  --cta-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 16px -4px rgba(226,78,12,.55);
  --brand-panel:linear-gradient(160deg,#ff8a45 0%,#f25a12 55%,#d9470a 100%);
  --ring:0 0 0 3px rgba(244,98,29,.28);

  --card-bg:linear-gradient(180deg,#ffffff 0%,#fbfaf8 100%);
  --shadow-1:0 1px 2px rgba(28,22,16,.05), 0 6px 18px -8px rgba(28,22,16,.10);
  --shadow-2:0 2px 6px rgba(28,22,16,.06), 0 18px 40px -16px rgba(28,22,16,.22);
  --shadow-pop:0 12px 32px -8px rgba(28,22,16,.28), 0 2px 8px rgba(28,22,16,.08);
  --scrim:rgba(20,16,12,.42);

  --art-ink:#1d1b18;
  --field-sky:#d6ebf8; --field-sand:#ffe6b3; --field-meadow:#d9eed0; --field-blush:#f8d5cf;
  --field-lagoon:#cbedee; --field-lavender:#e8e2fb; --field-wheat:#f3e0c3; --field-apricot:#fde0c6;

  /* Cantos: a escala do Payflow (diálogo 20, cartão 16, interior 12, campo 10,
     mini 8), pedida pelo Shelton a 27/09/2026. As pílulas continuam 999px. */
  --r-panel:20px; --r-xl:20px; --r-lg:16px; --r-md:12px; --r-field:10px; --r-sm:8px;
  --font:"Google Sans","Product Sans","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-w:264px;

  /* Nomes antigos, ainda usados por estilos escritos no JS. */
  --bg:var(--canvas); --bg-panel:var(--canvas-2);
  --surface-hover:var(--sunken); --surface-raised:var(--surface-2);
  --border:var(--line); --border-strong:var(--line-strong);
  --text:var(--ink); --text-dim:var(--muted); --text-faint:var(--muted);
  --success:var(--green-ink); --success-soft:var(--green-soft);
  --danger:var(--red-ink); --danger-soft:var(--red-soft); --erro:var(--red-ink);
  --warning:var(--amber-ink); --warning-soft:var(--amber-soft);
  --radius-sm:var(--r-sm); --radius:var(--r-md); --radius-md:var(--r-md); --radius-lg:var(--r-lg); --radius-pill:999px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --canvas:#141311; --canvas-2:#1a1816;
    --surface:#1e1c19; --surface-2:#1b1917; --sunken:#26231f;
    --line:#2f2b27; --line-strong:#3d3833;
    --ink:#f4f0ea; --ink-2:#ddd6cd; --muted:#aaa298; --faint:#7f786f;
    --orange-soft:#3a2216; --orange-ink:#ffab7c;
    --green-soft:#15301f; --green-ink:#6fdc98;
    --red-soft:#3a1a1d; --red-ink:#ff8f98;
    --amber-soft:#352a12; --amber-ink:#f5c865;
    --violet-soft:#25234a; --violet-ink:#b3adff;
    --blue-soft:#16283a; --blue-ink:#8cc4f5;
    --accent-soft:#3a2216; --accent-ink:#ffab7c;
    --card-bg:linear-gradient(180deg,#211f1c 0%,#1c1a17 100%);
    --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6);
    --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
    --shadow-pop:0 12px 32px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
    --scrim:rgba(0,0,0,.6);
    --cta-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 16px -6px rgba(0,0,0,.7);
    --field-sky:#23384a; --field-sand:#4a3d22; --field-meadow:#2a3f28; --field-blush:#4a2c29;
    --field-lagoon:#1f4244; --field-lavender:#353052; --field-wheat:#453a2a; --field-apricot:#4a3426;
    --art-ink:#f4f0ea;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --canvas:#141311; --canvas-2:#1a1816;
  --surface:#1e1c19; --surface-2:#1b1917; --sunken:#26231f;
  --line:#2f2b27; --line-strong:#3d3833;
  --ink:#f4f0ea; --ink-2:#ddd6cd; --muted:#aaa298; --faint:#7f786f;
  --orange-soft:#3a2216; --orange-ink:#ffab7c;
  --green-soft:#15301f; --green-ink:#6fdc98;
  --red-soft:#3a1a1d; --red-ink:#ff8f98;
  --amber-soft:#352a12; --amber-ink:#f5c865;
  --violet-soft:#25234a; --violet-ink:#b3adff;
  --blue-soft:#16283a; --blue-ink:#8cc4f5;
  --accent-soft:#3a2216; --accent-ink:#ffab7c;
  --card-bg:linear-gradient(180deg,#211f1c 0%,#1c1a17 100%);
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6);
  --shadow-2:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-pop:0 12px 32px -8px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.4);
  --scrim:rgba(0,0,0,.6);
  --cta-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 6px 16px -6px rgba(0,0,0,.7);
  --field-sky:#23384a; --field-sand:#4a3d22; --field-meadow:#2a3f28; --field-blush:#4a2c29;
  --field-lagoon:#1f4244; --field-lavender:#353052; --field-wheat:#453a2a; --field-apricot:#4a3426;
  --art-ink:#f4f0ea;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4{ font-weight:500; line-height:1.25; margin:0 0 6px; letter-spacing:-.015em; text-wrap:balance; }
b,strong{ font-weight:500; }
p{ margin:0 0 12px; color:var(--muted); }
a{ color:inherit; text-decoration:none; text-underline-offset:3px; }
ul{ list-style:none; margin:0; padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:none; background:none; padding:0; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(244,98,29,.22); color:var(--ink); }
::placeholder{ color:var(--faint); opacity:1; }
input,textarea{ caret-color:var(--accent); }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }
.icon{ width:18px; height:18px; flex-shrink:0; stroke-linecap:round; stroke-linejoin:round; }
.icon-sm{ width:15px; height:15px; }
.hidden{ display:none !important; }
[hidden]{ display:none !important; }

* { scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:2px solid var(--canvas); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--faint); }

/* ============================================================
   Botões — tudo o que se carrega é uma pílula
   ============================================================ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 18px; border-radius:999px; border:1px solid transparent; font-size:14.5px; font-weight:500; line-height:1.2; white-space:nowrap; text-decoration:none; transition:background .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), color .18s, border-color .18s; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ border-radius:999px; }
.btn-primary{ background:var(--cta); color:#fff; box-shadow:var(--cta-shadow); }
.btn-primary:hover{ background:var(--cta-hover); }
.btn-secondary{ background:var(--surface); border-color:var(--line); color:var(--ink); box-shadow:0 1px 2px rgba(28,22,16,.04); }
.btn-secondary:hover{ background:var(--surface-2); border-color:var(--line-strong); }
.btn-sm{ min-height:34px; padding:0 14px; font-size:13.5px; }
.btn-lg{ min-height:52px; padding:0 26px; font-size:16px; }
.btn-block{ width:100%; }
.btn[disabled], .btn:disabled{ opacity:.55; pointer-events:none; }
.btn[data-done="true"]{ background:var(--green-soft); color:var(--green-ink); border-color:transparent; box-shadow:none; }
.btn-texto{ background:transparent; color:var(--ink-2); }
.btn-texto:hover{ background:var(--sunken); color:var(--ink); }
.btn-contorno{ background:var(--surface); border-color:var(--accent-line); color:var(--accent-ink); }
.btn-contorno:hover{ background:var(--accent-soft); }
.btn-perigo{ background:var(--red); color:#fff; box-shadow:0 6px 16px -6px rgba(212,42,57,.55); }
.btn-perigo:hover{ filter:brightness(1.06); }
.btn-perigo-suave{ background:var(--surface); border-color:var(--line); color:var(--red-ink); }
.btn-perigo-suave:hover{ background:var(--red-soft); border-color:transparent; }

.icon-btn{ width:40px; height:40px; border-radius:999px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); position:relative; transition:background .15s, border-color .15s; }
.icon-btn:hover{ background:var(--surface-2); border-color:var(--line-strong); color:var(--ink); }
.icon-btn .badge-dot{ position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:500; min-width:18px; height:18px; padding:0 5px; border-radius:99px; display:flex; align-items:center; justify-content:center; border:2px solid var(--canvas); font-variant-numeric:tabular-nums; }

.btn-icone{ width:34px; height:34px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--muted); display:grid; place-items:center; transition:background .15s, color .15s; }
.btn-icone:hover{ background:var(--sunken); color:var(--ink); }
.btn-icone.perigo:hover{ background:var(--red-soft); color:var(--red-ink); }
.btn-icone[disabled]{ opacity:.3; pointer-events:none; }

.seta-circulo{ width:1em; height:1em; vertical-align:-0.12em; flex-shrink:0; }

/* ============================================================
   Campos
   ============================================================ */
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13.5px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.field input,.field textarea,.field select{ width:100%; min-height:48px; background:var(--surface); border:1px solid var(--line-strong); color:var(--ink); padding:0 16px; border-radius:var(--r-field); font-size:15px; transition:border-color .15s, box-shadow .15s; }
.field textarea{ padding:12px 16px; min-height:96px; line-height:1.5; resize:vertical; }
.field select{ appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236f6962' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.field input[type=checkbox],.field input[type=radio]{ width:auto; min-height:0; }
.field input[type=color]{ padding:4px; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--faint); }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.field input[readonly]{ background:var(--sunken); color:var(--ink-2); border-color:var(--line); }
.field .hint, .hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.rotulo-solto{ display:block; font-size:13.5px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.campo-lido{ min-height:48px; display:flex; align-items:center; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-field); background:var(--sunken); color:var(--ink-2); font-weight:500; font-size:14.5px; }
.campo-codigo{ font-family:var(--mono); font-size:12.5px; line-height:1.6; white-space:pre; overflow-x:auto; }

.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer; }
.checkbox-row input{ accent-color:var(--accent); width:18px; height:18px; margin:0; }
.link-muted{ font-size:14px; color:var(--orange-ink); font-weight:500; }
.link-muted:hover{ text-decoration:underline; }

.search-pill{ position:relative; flex:1; min-width:200px; max-width:340px; }
.search-pill .icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.search-pill input{ width:100%; height:40px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:0 16px 0 40px; color:var(--ink); font-size:14px; box-shadow:0 1px 2px rgba(28,22,16,.04); transition:border-color .15s, box-shadow .15s; }
.search-pill input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.select-wrap{ position:relative; }
.select-wrap select{ appearance:none; -webkit-appearance:none; height:40px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:0 38px 0 16px; color:var(--ink); font-size:13.5px; font-weight:500; box-shadow:0 1px 2px rgba(28,22,16,.04); cursor:pointer; }
.select-wrap select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.select-wrap::after{ content:""; position:absolute; right:16px; top:50%; width:7px; height:7px; border:1.8px solid var(--muted); border-top:none; border-left:none; transform:translateY(-70%) rotate(45deg); pointer-events:none; }

/* Interruptor */
.toggle{ width:44px; height:26px; border-radius:99px; background:var(--line-strong); position:relative; flex-shrink:0; cursor:pointer; transition:background .2s var(--ease); }
.toggle.on{ background:var(--green); }
.toggle .knob{ width:20px; height:20px; border-radius:99px; background:#fff; position:absolute; top:3px; left:3px; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .2s var(--ease); }
.toggle.on .knob{ left:21px; }
.toggle.bloqueado{ opacity:.5; cursor:not-allowed; }

/* Controlo segmentado */
.segmented{ display:inline-flex; background:var(--sunken); border-radius:999px; padding:4px; gap:4px; }
.segmented button{ padding:7px 16px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--muted); white-space:nowrap; transition:background .15s, color .15s, box-shadow .15s; }
.segmented button:hover{ color:var(--ink); }
.segmented button.active{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(28,22,16,.12); }
.segmented-block{ display:flex; width:100%; }
.segmented-block button{ flex:1; text-align:center; padding:6px 10px; font-size:12.5px; }

/* ============================================================
   Marca
   ============================================================ */
.brand-mark{ display:flex; align-items:center; gap:11px; position:relative; z-index:1; min-width:0; }
.brand-mark .crest{ width:38px; height:38px; flex-shrink:0; filter:drop-shadow(0 4px 8px rgba(226,78,12,.28)); }
.brand-mark .crest.logo-imagem{ filter:none; }
.brand-mark .wordmark{ font-weight:700; font-size:17px; letter-spacing:-.02em; line-height:1.1; color:var(--ink); min-width:0; }
.brand-mark .wordmark small{ display:block; font-weight:500; font-size:12px; color:var(--muted); letter-spacing:.01em; margin-top:2px; }
.brand-mark .wordmark small:empty{ display:none; }
.logo-imagem{ object-fit:contain; border-radius:8px; }

/* ============================================================
   Arranque
   ============================================================ */
#view-arranque{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--canvas); padding:24px; }
.arranque-caixa{ text-align:center; display:grid; justify-items:center; gap:18px; }
.arranque-caixa .crest{ width:56px; height:56px; filter:drop-shadow(0 8px 18px rgba(226,78,12,.3)); animation:respirar 1.8s var(--ease) infinite; }
.arranque-caixa p{ font-size:15px; color:var(--muted); max-width:38ch; line-height:1.6; margin:0; }
@keyframes respirar{ 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.06); opacity:1 } }

/* ============================================================
   Entrar
   ============================================================ */
.login-shell{ min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); background:var(--canvas); }
.login-brandside{ position:relative; margin:14px; border-radius:var(--r-panel); overflow:hidden; background:var(--brand-panel); color:#fff; padding:40px; display:flex; flex-direction:column; justify-content:space-between; min-height:calc(100vh - 28px); isolation:isolate; }
.login-brandside::before{ content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.18), transparent 60%),
  radial-gradient(70% 55% at 0% 100%, rgba(120,30,0,.28), transparent 65%); }
.login-brandside::after{ content:""; position:absolute; z-index:-1; right:-120px; bottom:-120px; width:520px; height:520px; border-radius:50%; border:1.5px solid rgba(255,255,255,.18); box-shadow:0 0 0 70px rgba(255,255,255,.05), 0 0 0 140px rgba(255,255,255,.035); }
.login-brandside .brand-mark .wordmark{ color:#fff; }
.login-brandside .brand-mark .wordmark small{ color:rgba(255,255,255,.82); }
.login-brandside .brand-mark .crest{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)); }
.login-quote{ position:relative; z-index:1; max-width:520px; }
.login-quote h2{ font-size:clamp(28px,3vw,40px); letter-spacing:-.03em; line-height:1.1; color:#fff; margin:0 0 14px; max-width:18ch; }
.login-quote p{ color:rgba(255,255,255,.9); font-size:16px; max-width:44ch; margin:0; line-height:1.55; }
#login-rodape{ position:relative; z-index:1; margin:0; font-size:13px; color:rgba(255,255,255,.82) !important; }
.login-formside{ display:grid; place-items:center; padding:32px 20px; }
.login-card{ width:min(420px,100%); }
.login-card h1{ font-size:30px; letter-spacing:-.03em; margin-bottom:8px; }
.login-card .sub{ color:var(--muted); font-size:15px; margin-bottom:28px; }
.login-card form .btn-primary{ margin-top:4px; }
.login-foot{ margin:22px 0 0; text-align:center; font-size:14px; color:var(--muted); }
.login-foot a{ color:var(--orange-ink); font-weight:500; }
.login-foot a:hover{ text-decoration:underline; }
.login-note{ margin-top:24px; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:12px 14px; font-size:13px; color:var(--muted); line-height:1.5; }
.form-row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.login-aviso{ margin-top:18px; padding:14px 16px; border-radius:var(--r-md); font-size:14px; line-height:1.5; }
.login-aviso.erro{ background:var(--red-soft); color:var(--red-ink); }
.login-aviso.nota{ background:var(--blue-soft); color:var(--blue-ink); }

/* ============================================================
   Estrutura da aplicação
   ============================================================ */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--canvas-2); border-right:1px solid var(--line); display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:40; transition:transform .3s var(--ease); }
.sidebar-head{ padding:24px 22px 8px; }
.sidebar-nav{ padding:8px 14px 14px; flex:1; overflow-y:auto; }
.nav-label{ font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--muted); padding:16px 12px 6px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-field); color:var(--ink-2); font-size:15px; font-weight:500; margin-bottom:2px; cursor:pointer; transition:background .15s var(--ease), color .15s, box-shadow .15s; }
.nav-item .icon{ color:var(--muted); transition:color .15s; }
.nav-item:hover{ background:var(--sunken); color:var(--ink); }
.nav-item:hover .icon{ color:var(--ink-2); }
.nav-item.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
.nav-item.active .icon{ color:var(--accent); }
.nav-item .lock{ margin-left:auto; color:var(--muted); }
.nav-item .nav-dot{ margin-left:auto; width:8px; height:8px; border-radius:99px; background:var(--accent); flex-shrink:0; box-shadow:0 0 0 3px var(--accent-soft); }
#btn-logout{ margin-top:10px; }
.sidebar-foot{ padding:14px 18px 20px; }
.sidebar-foot:empty{ display:none; }
.sidebar-foot .progress-mini-label{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:500; }
.sidebar-foot .progress-mini-label span:last-child{ color:var(--ink); font-variant-numeric:tabular-nums; }
.user-chip{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); }
.user-chip .avatar{ width:36px; height:36px; font-size:13px; }
.user-chip-info{ flex:1; min-width:0; }
.user-chip-info .name{ font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip-info .role{ font-size:12.5px; color:var(--muted); }
.user-chip .chevron{ color:var(--muted); flex-shrink:0; }

.main-col{ margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px clamp(16px,3vw,40px) 0; }
.topbar-marca{ display:none; }
.topbar-search{ flex:1; max-width:420px; position:relative; }
.topbar-search input{ width:100%; height:46px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:0 18px 0 46px; color:var(--ink); font-size:15px; box-shadow:0 1px 2px rgba(28,22,16,.04); transition:border-color .15s, box-shadow .15s; }
.topbar-search input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.topbar-search .icon{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.avatar{ width:40px; height:40px; border-radius:99px; background:var(--brand-panel); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:500; font-size:13.5px; flex-shrink:0; letter-spacing:.01em; }
.menu-toggle{ display:none; }
.content{ flex:1; padding:26px clamp(16px,3vw,40px) 64px; max-width:1260px; width:100%; }
.backdrop{ display:none; position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(3px); z-index:35; }
.backdrop.show{ display:block; animation:esvanecer .2s var(--ease); }
.tabbar{ display:none; }

/* ============================================================
   Cabeçalhos de página e secção
   ============================================================ */
.page-head{ margin-bottom:24px; }
.page-head .eyebrow{ display:none; }
.page-head h1{ font-size:clamp(26px,3.2vw,34px); letter-spacing:-.025em; line-height:1.2; margin-bottom:6px; }
.page-head .desc{ color:var(--muted); font-size:15px; max-width:60ch; margin:0; }
.page-head .desc .data-hoje{ color:var(--ink-2); font-weight:500; }
.page-head-flex{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.page-head-flex .page-head{ margin-bottom:0; }
.section-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.section-title h2{ font-size:20px; letter-spacing:-.02em; margin:0; }
.section-title .see-all{ font-size:14px; font-weight:500; color:var(--orange-ink); cursor:pointer; }
.section-title .see-all:hover{ text-decoration:underline; }
.card + .section-title, .stat-row + .section-title, .widget-row + .section-title{ margin-top:30px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; font-weight:500; margin-bottom:18px; cursor:pointer; }
.back-link:hover{ color:var(--ink); }

/* ============================================================
   Cartões, estatísticas, pílulas
   ============================================================ */
.card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); }
.card.painel{ padding:22px; margin-bottom:22px; }

.stat-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:26px; }
.stat-row.tres{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat-card{ padding:18px 20px 20px; position:relative; display:grid; gap:14px; align-content:space-between; }
.stat-card .stat-label{ font-size:14px; color:var(--ink-2); font-weight:400; display:flex; align-items:center; gap:8px; padding-right:40px; margin:0; }
.stat-card .stat-value{ font-size:38px; font-weight:500; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.stat-card .stat-value span{ margin-left:6px; font-size:15px; letter-spacing:0; color:var(--muted); font-weight:400; }
.stat-icon{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:99px; background:var(--sunken); display:grid; place-items:center; color:var(--ink-2); }
.stat-icon .icon{ width:17px; height:17px; }
.stat-icon.accent{ background:var(--accent-soft); color:var(--accent); }

.pill{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:500; white-space:nowrap; background:var(--sunken); color:var(--muted); }
.pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.pill-quente{ background:var(--red-soft); color:var(--red-ink); }
.pill-morno{ background:var(--amber-soft); color:var(--amber-ink); }
.pill-frio{ background:var(--sunken); color:var(--muted); }
.pill-ativo, .pill-publicado{ background:var(--green-soft); color:var(--green-ink); }
.pill-concluido{ background:var(--green); color:#fff; }
.pill-risco{ background:var(--amber-soft); color:var(--amber-ink); }
.pill-inativo{ background:var(--sunken); color:var(--muted); }

.cat-tag{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--ink-2); }
.cat-tag::before{ content:""; width:8px; height:8px; border-radius:99px; background:var(--c,var(--accent)); flex-shrink:0; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.chip{ height:38px; padding:0 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s, border-color .15s; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; }
.chip:hover{ background:var(--surface-2); border-color:var(--line-strong); color:var(--ink); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--canvas); }
.chip .dot{ width:8px; height:8px; border-radius:99px; flex-shrink:0; background:var(--c,var(--muted)); }
.chip .chip-n{ min-width:22px; height:22px; padding:0 6px; display:inline-grid; place-items:center; border-radius:999px; background:var(--sunken); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-left:0; font-weight:500; }
.chip.active .chip-n{ background:rgba(255,255,255,.16); color:inherit; opacity:1; }

.filter-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }

.progress-track{ width:100%; height:8px; border-radius:999px; background:var(--sunken); overflow:hidden; }
.progress-track.thin{ height:6px; }
.progress-fill{ height:100%; border-radius:inherit; background:var(--cta); }
.progress-fill.mini{ background:var(--cta); }

.empty-note{ padding:48px 20px; text-align:center; color:var(--muted); font-size:14.5px; }

/* ============================================================
   Tabelas do painel
   ============================================================ */
.table-card{ padding:0; overflow:hidden; }
.table-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 16px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.table-card-head .count + .btn{ margin-left:auto; }
.table-card-head h3{ font-size:17px; margin:0; }
.table-card-head .count{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:14px; }
.admin-table th{ text-align:left; font-size:12.5px; color:var(--muted); font-weight:500; padding:12px 18px; white-space:nowrap; border-bottom:1px solid var(--line); background:var(--surface-2); }
.admin-table td{ padding:13px 18px; border-bottom:1px solid var(--line); white-space:nowrap; vertical-align:middle; }
.admin-table tbody tr{ transition:background .15s; }
.admin-table tbody tr:hover td{ background:var(--surface-2); }
.admin-table tr:last-child td{ border-bottom:0; }
.admin-table td.num{ text-align:right; font-variant-numeric:tabular-nums; font-weight:500; }
.cell-user{ display:flex; align-items:center; gap:11px; }
.cell-user .avatar{ width:34px; height:34px; font-size:12px; box-shadow:none; }
.cell-user .meta{ min-width:0; }
.cell-user .meta .nome{ font-weight:500; color:var(--ink); }
.cell-user .meta .sub{ font-size:12.5px; color:var(--muted); }
.mini-progress{ display:flex; align-items:center; gap:10px; min-width:100px; font-variant-numeric:tabular-nums; font-weight:500; }
.mini-progress .progress-track{ width:64px; }
.ligacao-tabela{ font:inherit; font-weight:500; color:var(--ink); padding:0; text-align:left; }
.ligacao-tabela:hover{ color:var(--orange-ink); }
.sub-celula{ font-size:12.5px; color:var(--muted); }
.celula-texto{ white-space:normal; max-width:340px; font-size:13.5px; color:var(--ink-2); }
.amostra-cor{ display:inline-block; width:18px; height:18px; border-radius:6px; border:1px solid var(--line-strong); vertical-align:middle; }
.acoes-linha{ display:flex; gap:4px; justify-content:flex-end; }
.estrelas-mini{ display:inline-flex; gap:2px; }
.estrelas-mini span{ width:14px; height:14px; color:var(--line-strong); display:inline-flex; }
.estrelas-mini span.cheia{ color:var(--accent); }
.estrelas-mini svg{ width:100%; height:100%; }
.mini-banner{ width:64px; height:36px; border-radius:6px; border:1px solid var(--line); flex-shrink:0; }
.admin-table .event-date-badge{ width:42px; height:42px; }
.admin-table .event-date-badge .day{ font-size:15px; }

.admin-placeholder{ padding:56px 30px; text-align:center; }
.admin-placeholder .ph-icon{ width:64px; height:64px; border-radius:var(--r-lg); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin:0 auto 18px; }
.admin-placeholder .ph-icon .icon{ width:28px; height:28px; }
.admin-placeholder h2{ font-size:21px; margin-bottom:8px; }
.admin-placeholder p{ max-width:420px; margin:0 auto; }

/* ============================================================
   Início do aluno
   ============================================================ */
.continue-card{ display:grid; grid-template-columns:168px minmax(0,1fr) auto; align-items:center; gap:22px; padding:14px 22px 14px 14px; margin-bottom:16px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.continue-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.continue-thumb{ aspect-ratio:16/10; border-radius:var(--r-md); background:var(--field, var(--field-apricot)); display:grid; place-items:center; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.continue-thumb .icon{ width:22px; height:22px; color:#fff; fill:#fff; stroke:none; margin-left:3px; position:relative; z-index:1; }
.continue-thumb::before{ content:""; width:52px; height:52px; border-radius:50%; background:var(--cta); box-shadow:var(--cta-shadow); position:absolute; }
.continue-body{ min-width:0; }
.continue-body .tag{ display:none; }
.continue-body h3{ font-size:21px; letter-spacing:-.02em; margin-bottom:4px; }
.continue-body .continue-onde{ font-size:14px; color:var(--muted); margin:0 0 14px; }
.continue-meta{ display:flex; align-items:center; gap:12px; }
.continue-meta .progress-track{ max-width:260px; }
.continue-meta .pct{ font-size:13px; color:var(--muted); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.continue-card > .btn{ align-self:center; }
.continue-row{ display:flex; gap:14px; overflow-x:auto; padding:2px 2px 8px; margin:0 -2px 26px; }
.continue-mini{ flex:0 0 250px; padding:16px 18px; cursor:pointer; display:grid; gap:10px; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.continue-mini:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.continue-mini h4{ font-size:15.5px; margin:0; }
.continue-mini .pct-label{ font-size:12.5px; color:var(--muted); font-weight:500; margin-top:-4px; font-variant-numeric:tabular-nums; }

.widget-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:26px; }
.widget-card{ padding:20px 22px 22px; display:flex; flex-direction:column; }
.widget-card .widget-label{ font-size:17px; font-weight:500; color:var(--ink); letter-spacing:-.015em; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.widget-card .widget-label .icon{ width:18px; height:18px; color:var(--accent); }
.widget-body{ display:flex; align-items:center; gap:14px; }
.widget-title{ font-size:15.5px; font-weight:500; color:var(--ink); margin-bottom:2px; }
.widget-sub{ font-size:13.5px; color:var(--muted); }
.widget-card .btn{ margin-top:18px; align-self:flex-start; }
.widget-card > p{ flex:1; }
.event-date-badge{ width:52px; height:56px; border-radius:var(--r-md); background:linear-gradient(160deg,var(--violet-1),var(--violet-2)); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 10px 20px -12px rgba(86,76,201,.8), inset 0 1px 0 rgba(255,255,255,.25); font-variant-numeric:tabular-nums; }
.event-date-badge .day{ font-size:19px; font-weight:500; line-height:1; letter-spacing:-.02em; }
.event-date-badge .mon{ font-size:11px; font-weight:500; margin-top:3px; opacity:.85; letter-spacing:.04em; }
.badge-icon-sm{ width:52px; height:52px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex-shrink:0; }

/* Trilha */
.trilha-card{ padding:20px 22px; margin-bottom:24px; }
.trilha-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.trilha-head .eyebrow{ display:none; }
.trilha-head h3{ font-size:17px; margin:0 0 2px; }
.trilha-passos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.trilha-passo{ display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:var(--r-md); cursor:pointer; transition:background .15s; }
.trilha-passo:hover{ background:var(--sunken); }
.trilha-num{ width:32px; height:32px; border-radius:99px; background:var(--sunken); color:var(--ink-2); font-size:13.5px; font-weight:500; display:grid; place-items:center; flex-shrink:0; font-variant-numeric:tabular-nums; }
.trilha-passo.concluido .trilha-num{ background:var(--green-soft); color:var(--green-ink); }
.trilha-txt{ flex:1; min-width:0; }
.trilha-txt strong{ display:block; font-size:15px; font-weight:500; }
.trilha-pct{ font-size:13px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; }

/* Banners */
.banner-carousel{ position:relative; margin-bottom:26px; }
.banner-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:var(--r-lg); scrollbar-width:none; box-shadow:var(--shadow-1); }
.banner-track::-webkit-scrollbar{ display:none; }
.banner-slide{ flex:0 0 100%; scroll-snap-align:start; min-height:200px; aspect-ratio:4/1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:10px; padding:clamp(22px,4vw,44px); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.banner-slide::after{ content:""; position:absolute; z-index:-1; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); box-shadow:0 0 0 56px rgba(255,255,255,.05); pointer-events:none; }
.banner-title{ font-size:clamp(20px,2.6vw,30px); font-weight:500; letter-spacing:-.025em; line-height:1.15; max-width:24ch; text-wrap:balance; margin:0; }
.banner-cta{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; background:#fff; color:#1c1a17; font-size:14px; font-weight:500; margin-top:4px; box-shadow:0 8px 18px -10px rgba(0,0,0,.45); }
.banner-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.banner-dot{ width:7px; height:7px; border-radius:99px; background:var(--line-strong); cursor:pointer; transition:background .2s; }
.banner-dot.active{ background:var(--accent); width:20px; }

/* ============================================================
   Cursos — o cartão
   ============================================================ */
.course-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.course-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.course-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.course-cover{ position:relative; aspect-ratio:16/10; margin:10px 10px 0; border-radius:var(--r-md); overflow:hidden; background:var(--field, var(--field-apricot)); display:grid; place-items:center; }
.course-cover.com-capa{ background-size:cover; background-position:center; }
.cover-sigla{ font-size:clamp(34px,4vw,46px); font-weight:500; letter-spacing:-.03em; color:var(--art-ink); opacity:.88; }
.course-cover .cover-badge{ position:absolute; top:10px; left:10px; z-index:1; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:999px; background:rgba(255,255,255,.92); color:#3b3732 !important; border:0 !important; font-size:12.5px; font-weight:500; box-shadow:0 4px 12px -6px rgba(28,22,16,.4); }
.course-cover .cover-badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c,var(--accent)); }
.course-cover .cover-badge.done{ left:auto; right:10px; background:var(--green) !important; color:#fff !important; }
.course-cover .cover-badge.done::before{ background:#fff; }
.cover-badge.estado{ left:auto; right:10px; background:var(--amber-soft) !important; color:var(--amber-ink) !important; }
.cover-badge.estado::before{ background:currentColor !important; }
.course-cover .cadeado{ position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(28,26,23,.82); color:#fff; z-index:1; box-shadow:0 6px 16px -6px rgba(0,0,0,.5); }
.course-cover .cadeado .icon{ width:17px; height:17px; }
.course-body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.course-body h3{ font-size:16.5px; line-height:1.3; margin-bottom:4px; }
.course-body .course-desc{ font-size:14px; margin-bottom:14px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.course-progress-row{ display:flex; align-items:center; justify-content:space-between; margin:auto 0 8px; }
.course-progress-row .pct{ font-size:13px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.course-legenda{ font-size:13px; color:var(--muted); }
.contagem-grelha{ font-size:13px; color:var(--muted); margin-bottom:14px; }

.course-card.bloqueado{ cursor:default; }
.course-card.bloqueado:hover{ transform:none; box-shadow:var(--shadow-1); }
.course-card.bloqueado .course-cover{ filter:saturate(.5); }
.course-card.vitrine{ cursor:pointer; }
.course-card.vitrine:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.course-card.vitrine .btn-block{ margin-top:14px; }
.oferta-linha{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.oferta-preco{ display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:999px; background:var(--orange-soft); color:var(--orange-ink); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; }
.oferta-preco span{ font-size:12.5px; color:inherit; opacity:.8; font-weight:400; margin-left:4px; }
/* Pré-venda (fase 4): a etiqueta vai em baixo, à esquerda, para não tapar a
   categoria nem o cadeado; a data vai na legenda, em violeta, como as datas
   dos encontros. */
.course-cover .cover-badge.em-breve{ top:auto; bottom:10px; left:10px; right:auto; background:var(--violet-soft) !important; color:var(--violet-ink) !important; }
.pre-venda{ color:var(--violet-ink); font-weight:500; }
.aviso-pre-venda{ display:flex; gap:14px; align-items:flex-start; padding:22px 24px; border-radius:var(--r-lg); background:var(--violet-soft); color:var(--violet-ink); }
.aviso-pre-venda .icon{ width:22px; height:22px; flex:none; margin-top:2px; }
.aviso-pre-venda h2{ margin:0 0 4px; font-size:17px; color:inherit; }
.aviso-pre-venda p{ margin:0; color:inherit; opacity:.9; }
button.chip{ font:inherit; font-size:14px; }
/* Painel › Vitrine: as retidas à vista, e a data da pré-venda. */
.aviso-retidas{ padding:18px 22px; margin-bottom:18px; background:var(--amber-soft); border-color:transparent; color:var(--amber-ink); }
.aviso-retidas h3{ margin:0 0 8px; font-size:15px; color:inherit; }
.aviso-retidas ul{ margin:0; padding-left:18px; display:grid; gap:4px; font-size:14px; }
.abre-em{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--muted); }
.abre-em input{ height:32px; padding:0 8px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:13px; }

.course-card-acoes{ position:absolute; bottom:10px; right:10px; display:flex; gap:6px; opacity:0; transition:opacity .2s var(--ease); z-index:2; }
.course-card:hover .course-card-acoes, .course-card-acoes:focus-within{ opacity:1; }
.course-card-acoes .btn-icone{ background:rgba(255,255,255,.94); color:#3b3732; box-shadow:0 4px 12px -6px rgba(28,22,16,.45); }
.course-card-acoes .btn-icone.perigo:hover{ background:#fde8ea; color:#b4202d; }
@media (hover:none){ .course-card-acoes{ opacity:1; } }

/* Hero do curso */
.curso-hero{ position:relative; overflow:hidden; margin-bottom:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); align-items:stretch; }
.curso-hero-arte{ grid-column:2; grid-row:1; margin:14px; border-radius:var(--r-lg); background-color:var(--field, var(--field-apricot)); background-size:cover; background-position:center; min-height:240px; display:grid; place-items:center; }
.curso-hero-arte .cover-sigla{ font-size:clamp(56px,6vw,84px); }
.curso-hero-conteudo{ grid-column:1; grid-row:1; position:relative; z-index:1; padding:32px 12px 32px 32px; }
.curso-hero-conteudo > .eyebrow{ display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px; border-radius:999px; background:var(--sunken); color:var(--ink-2); font-size:13px; font-weight:500; margin-bottom:14px; }
.curso-hero-conteudo > .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,var(--accent)); }
.curso-hero h1{ font-size:clamp(28px,3.6vw,40px); letter-spacing:-.03em; line-height:1.1; margin:0 0 10px; }
.curso-hero-desc{ font-size:16px; color:var(--ink-2); margin-bottom:16px; max-width:56ch; }
.curso-hero-meta{ display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; font-size:14px; color:var(--muted); margin-bottom:6px; }
.curso-hero-meta strong{ color:var(--ink); font-weight:500; }
.curso-hero-turma{ font-size:13.5px; color:var(--muted); margin:6px 0 0; }
.curso-hero-progresso{ display:flex; align-items:center; gap:14px; margin:20px 0 22px; max-width:440px; }
.curso-hero-progresso .progress-track{ flex:1; }
.curso-hero-progresso span{ font-size:13.5px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
.curso-hero-acoes{ display:flex; gap:10px; flex-wrap:wrap; }

/* Módulos e aulas */
.modulo{ margin-bottom:14px; overflow:hidden; }
.modulo-head{ display:flex; align-items:center; gap:16px; padding:16px 20px; cursor:pointer; user-select:none; transition:background .15s; }
.modulo-head:hover{ background:var(--surface-2); }
.modulo-num{ width:36px; height:36px; border-radius:99px; background:var(--sunken); display:grid; place-items:center; font-weight:500; font-size:14px; color:var(--ink-2); flex-shrink:0; font-variant-numeric:tabular-nums; }
.modulo-info{ flex:1; min-width:0; }
.modulo-info h3{ font-size:16.5px; margin-bottom:2px; }
.modulo-info .modulo-desc{ font-size:13.5px; color:var(--muted); margin:0; }
.modulo-meta{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.modulo-count{ font-size:13px; color:var(--muted); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.modulo-chevron{ color:var(--muted); transition:transform .25s var(--ease); }
.modulo.open .modulo-chevron{ transform:rotate(180deg); }
.modulo-body{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); border-top:1px solid transparent; }
.modulo.open .modulo-body{ border-top-color:var(--line); }
.aula-row{ display:flex; align-items:center; gap:14px; padding:13px 20px 13px 24px; border-top:1px solid var(--line); transition:background .15s; cursor:pointer; }
.aula-row:first-child{ border-top:none; }
.aula-row:hover{ background:var(--surface-2); }
.aula-status{ width:26px; height:26px; border-radius:99px; flex-shrink:0; display:grid; place-items:center; border:1.5px solid var(--line-strong); color:transparent; }
.aula-row[data-status="concluida"] .aula-status{ background:var(--green); border-color:transparent; color:#fff; }
.aula-row[data-status="progresso"] .aula-status{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.aula-info{ flex:1; min-width:0; }
.aula-info .titulo{ font-size:15px; font-weight:500; color:var(--ink); }
.aula-row[data-status="concluida"] .aula-info .titulo{ color:var(--muted); }
.aula-duracao{ font-size:13px; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; white-space:nowrap; }
.aula-arrow{ color:var(--muted); flex-shrink:0; transition:transform .2s var(--ease), color .2s; }
.aula-row:hover .aula-arrow{ color:var(--accent); transform:translateX(2px); }

/* A aula */
.aula-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:flex-start; }
.player-wrap{ aspect-ratio:16/9; background:#12110f; border-radius:var(--r-lg); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-2); }
.player-wrap.previa{ max-width:520px; }
.player-wrap .placeholder-inner{ text-align:center; color:#d9d3cb; padding:20px; }
.player-wrap .play-badge{ width:68px; height:68px; border-radius:99px; background:var(--cta); box-shadow:var(--cta-shadow); display:grid; place-items:center; margin:0 auto 16px; }
.player-wrap .play-badge .icon{ width:24px; height:24px; color:#fff; margin-left:3px; }
.player-wrap .placeholder-label{ font-size:15px; font-weight:500; color:#f4f0ea; text-transform:none; }
.player-wrap .placeholder-sub{ font-size:13.5px; color:#aaa298; margin-top:4px; }
.player-embed{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.aula-header-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:24px 0 8px; }
.aula-breadcrumb{ font-size:13.5px; color:var(--muted); font-weight:500; margin-bottom:6px; }
.aula-header-row h1{ font-size:clamp(22px,2.4vw,28px); letter-spacing:-.025em; }
.aula-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.aula-desc{ font-size:15px; color:var(--ink-2); max-width:64ch; margin-bottom:26px; }
.nav-pager{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding-top:20px; }
.pager-btn{ display:flex; align-items:center; gap:12px; max-width:46%; cursor:pointer; padding:8px 14px 8px 8px; border-radius:var(--r-md); transition:background .15s; }
.pager-btn:hover{ background:var(--sunken); }
.pager-btn.next{ margin-left:auto; text-align:right; flex-direction:row-reverse; padding:8px 8px 8px 14px; }
.pager-btn .pager-label{ font-size:12.5px; color:var(--muted); font-weight:500; display:block; }
.pager-btn .pager-title{ font-size:14.5px; font-weight:500; color:var(--ink); }
.pager-btn.disabled{ opacity:.35; pointer-events:none; }
.sidebar-lessons{ padding:10px; position:sticky; top:22px; max-height:calc(100vh - 44px); overflow:auto; }
.sidebar-lessons h4{ font-size:13px; color:var(--ink-2); font-weight:500; margin:10px 8px 8px; letter-spacing:0; }
.sidebar-lessons h4:first-child{ margin-top:6px; }
.mini-aula{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-sm); font-size:14px; margin-bottom:2px; cursor:pointer; transition:background .15s; }
.mini-aula:hover{ background:var(--sunken); }
.mini-aula.active{ background:var(--accent-soft); }
.mini-aula.active .mini-titulo{ color:var(--accent-ink); font-weight:500; }
.mini-status{ width:20px; height:20px; border-radius:99px; flex-shrink:0; border:1.5px solid var(--line-strong); display:grid; place-items:center; color:transparent; }
.mini-status .icon{ width:12px; height:12px; }
.mini-aula[data-status="concluida"] .mini-status{ background:var(--green); border-color:transparent; color:#fff; }
.mini-aula[data-status="progresso"] .mini-status{ border-color:var(--accent); color:var(--accent); }
.mini-titulo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2); }
.mini-dur{ font-size:12.5px; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; }

.avaliacao-aula{ padding:20px 22px; margin-bottom:22px; }
.avaliacao-aula h4{ font-size:17px; margin-bottom:12px; }
.estrelas{ display:flex; gap:6px; margin-bottom:16px; }
.estrela{ width:30px; height:30px; padding:0; color:var(--line-strong); transition:color .15s, transform .15s var(--ease); }
.estrela svg{ width:100%; height:100%; }
.estrela:hover{ transform:scale(1.1); }
.estrela.ativa{ color:var(--accent); }
.avaliacao-aula textarea{ width:100%; min-height:84px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-field); padding:12px 16px; color:var(--ink); font-size:15px; resize:vertical; margin-bottom:12px; }
.avaliacao-aula textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }

.conteudo-aula{ padding:24px 26px; margin-bottom:20px; font-size:15.5px; line-height:1.75; color:var(--ink-2); }
.conteudo-aula h3{ font-size:20px; margin:22px 0 8px; color:var(--ink); }
.conteudo-aula h3:first-child{ margin-top:0; }
.conteudo-aula ul{ list-style:disc; padding-left:22px; margin:10px 0; }
.conteudo-aula p{ color:var(--ink-2); max-width:68ch; }
.conteudo-aula a{ color:var(--orange-ink); text-decoration:underline; }
.conteudo-aula img{ border-radius:var(--r-md); margin:14px 0; }
.conteudo-aula pre{ background:var(--sunken); border-radius:var(--r-sm); padding:12px 14px; font-family:var(--mono); font-size:13px; overflow-x:auto; }
.conteudo-aula table{ width:100%; border-collapse:collapse; margin:12px 0; }
.conteudo-aula td{ border:1px solid var(--line); padding:8px 12px; font-size:14px; }

.materiais-aula{ padding:20px 22px; margin-bottom:20px; }
.materiais-aula h4{ font-size:17px; margin-bottom:14px; }
.material-linha{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; color:var(--ink); background:var(--surface); transition:border-color .15s, background .15s; }
.material-linha:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.material-linha .icon{ color:var(--accent); }
.material-info{ flex:1; min-width:0; }
.material-info strong{ display:block; font-size:14.5px; font-weight:500; }

.quiz-aula{ padding:22px; margin-bottom:20px; }
.quiz-aula h4{ font-size:17px; margin-bottom:16px; }
.quiz-pergunta-aluno{ margin-bottom:20px; }
.quiz-enunciado{ display:flex; align-items:flex-start; gap:10px; font-size:15.5px; font-weight:500; color:var(--ink); margin-bottom:10px; }
.quiz-opcoes-aluno{ display:flex; flex-direction:column; gap:8px; }
.quiz-opcao-aluno{ text-align:left; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-md); font-size:14.5px; color:var(--ink); background:var(--surface); transition:border-color .15s, background .15s; }
.quiz-opcao-aluno:hover:enabled{ border-color:var(--line-strong); background:var(--surface-2); }
.quiz-opcao-aluno.certa{ border-color:transparent; background:var(--green-soft); color:var(--green-ink); }
.quiz-opcao-aluno.errada{ border-color:transparent; background:var(--red-soft); color:var(--red-ink); }
.quiz-opcao-aluno:disabled{ cursor:default; }
.quiz-resultado{ padding:14px 16px; border-radius:var(--r-md); background:var(--sunken); font-size:14.5px; font-weight:500; }
.quiz-resultado.tudo-certo{ background:var(--green-soft); color:var(--green-ink); }

/* ============================================================
   Calendário
   ============================================================ */
.event-row{ display:block; padding:0; border-top:1px solid var(--line); }
.event-row:first-child{ border-top:none; }
.event-linha{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; cursor:pointer; transition:background .15s; }
.event-linha:hover{ background:var(--surface-2); }
.event-info{ flex:1; min-width:200px; }
.event-info h4{ font-size:16px; margin-bottom:4px; }
.event-meta{ font-size:13.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.event-status-pill{ display:inline-flex; align-items:center; height:28px; font-size:13px; font-weight:500; padding:0 12px; border-radius:99px; white-space:nowrap; }
.event-status-pill.upcoming{ background:var(--violet-soft); color:var(--violet-ink); }
.event-status-pill.past{ background:var(--sunken); color:var(--muted); }
.event-chevron{ color:var(--muted); transition:transform .25s var(--ease); flex-shrink:0; }
.event-row.aberto .event-chevron{ transform:rotate(180deg); }
.event-detalhe{ display:none; padding:0 20px 22px 88px; }
.event-row.aberto .event-detalhe{ display:block; animation:subir .28s var(--ease); }
.event-detalhe-corpo{ padding:18px 20px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); }
.event-descricao{ font-size:14.5px; color:var(--ink-2); margin-bottom:16px; max-width:64ch; }
.event-campos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:18px; }
.event-campos .rotulo{ display:block; font-size:12.5px; font-weight:500; color:var(--muted); margin-bottom:3px; }
.event-campos strong{ font-size:14.5px; font-weight:500; }
.event-campos strong.confirmada{ color:var(--green-ink); }
.event-acoes{ display:flex; gap:10px; flex-wrap:wrap; }
.etiqueta-acesso{ display:inline-flex; align-items:center; height:24px; font-size:12px; font-weight:500; padding:0 10px; border-radius:99px; }
.etiqueta-acesso.gratuito{ background:var(--green-soft); color:var(--green-ink); }
.etiqueta-acesso.exclusivo{ background:var(--orange-soft); color:var(--orange-ink); }
.etiqueta-acesso.pago{ background:var(--sunken); color:var(--ink-2); }

/* ============================================================
   Comunidade
   ============================================================ */
.post-composer{ display:flex; gap:12px; padding:18px 20px; margin-bottom:20px; align-items:flex-start; }
.post-composer textarea{ width:100%; min-height:56px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-field); padding:12px 16px; color:var(--ink); font-size:15px; line-height:1.5; resize:vertical; }
.post-composer textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.post-composer-actions{ display:flex; justify-content:flex-end; margin-top:10px; }
.post-card{ padding:18px 20px; margin-bottom:14px; }
.post-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.post-head .avatar{ width:38px; height:38px; font-size:12.5px; box-shadow:none; }
.post-author{ font-size:14.5px; font-weight:500; }
.post-meta{ font-size:12.5px; color:var(--muted); }
.post-tag{ margin-left:auto; }
.post-text{ font-size:15px; color:var(--ink); margin-bottom:14px; }
.post-actions{ display:flex; gap:6px; }
.post-action{ display:flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; font-size:13.5px; color:var(--muted); font-weight:500; cursor:pointer; }
.post-action:hover{ background:var(--sunken); color:var(--ink); }
.post-action.liked{ color:var(--accent-ink); background:var(--accent-soft); }

/* Comunidade (fase 5): a lista de grupos, como a do WhatsApp — fotografia
   redonda, nome, uma linha de descrição, o canal, e o botão à direita. */
.lista-comunidades{ padding:6px 0; }
.comunidade{ display:flex; align-items:center; gap:14px; padding:14px 20px; }
.comunidade + .comunidade{ border-top:1px solid var(--line); }
.comunidade-foto{ width:52px; height:52px; border-radius:50%; flex:none; background:var(--sunken) center/cover no-repeat; display:grid; place-items:center; }
.comunidade-foto.sem-foto{ background:color-mix(in srgb, var(--c) 16%, var(--surface)); color:color-mix(in srgb, var(--c) 50%, var(--ink)); font-size:16px; font-weight:600; }
.comunidade-info{ flex:1; min-width:0; }
.comunidade-nome{ font-size:15.5px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comunidade-desc{ font-size:14px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.comunidade-canal{ display:inline-flex; align-items:center; gap:5px; margin-top:6px; font-size:12.5px; font-weight:500; color:color-mix(in srgb, var(--c) 72%, var(--ink)); }
.comunidade-canal .icon{ width:14px; height:14px; color:var(--c); }
.comunidade-entrar{ flex:none; }

/* ============================================================
   Conquistas e certificados
   ============================================================ */
.xp-card{ display:flex; align-items:center; gap:22px; padding:22px; margin-bottom:24px; flex-wrap:wrap; }
.xp-badge{ width:72px; height:72px; border-radius:var(--r-lg); background:var(--cta); box-shadow:var(--cta-shadow); color:#fff; display:grid; place-items:center; font-weight:500; font-size:24px; letter-spacing:-.02em; flex-shrink:0; font-variant-numeric:tabular-nums; }
.xp-info{ flex:1; min-width:200px; }
.xp-info h3{ font-size:21px; }
.xp-info .progress-track{ max-width:360px; margin-top:10px; }
.streak-pill{ display:inline-flex; align-items:center; gap:8px; height:36px; background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:500; padding:0 16px; border-radius:999px; }
.badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.badge-card{ padding:22px 20px; text-align:center; }
.badge-card.locked{ background:var(--surface-2); box-shadow:none; }
.badge-card.locked h4, .badge-card.locked p{ color:var(--muted); }
.badge-icon{ width:56px; height:56px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin:0 auto 14px; }
.badge-card.locked .badge-icon{ background:var(--sunken); color:var(--muted); }
.badge-card h4{ font-size:15.5px; margin-bottom:4px; }
.badge-card p{ font-size:13.5px; margin:0; }

.cert-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.cert-card{ padding:0; overflow:hidden; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.cert-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); }
.cert-card.locked{ cursor:default; }
.cert-card.locked:hover{ transform:none; box-shadow:var(--shadow-1); }
.cert-preview{ aspect-ratio:1.6/1; margin:10px 10px 0; border-radius:var(--r-md); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; gap:10px; box-shadow:inset 0 0 0 6px #fff, inset 0 0 0 7px #eee8e1; border:1px solid var(--line); }
.cert-preview .icon{ width:34px; height:34px; color:#f4621d; position:relative; z-index:1; }
.cert-preview span{ position:relative; z-index:1; font-size:12.5px; font-weight:500; color:#6f6962; }
.cert-card.locked .cert-preview{ filter:grayscale(1); opacity:.6; }
.cert-body{ padding:14px 16px 16px; }
.cert-body h4{ font-size:16px; margin-bottom:6px; }
.cert-locked-note{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; margin-top:6px; }

/* O certificado é papel: fica claro em qualquer tema. */
.modal-cert{ background:#fff; color:#1c1a17; border-radius:var(--r-xl); width:100%; max-width:640px; padding:56px 44px 44px; text-align:center; position:relative; box-shadow:var(--shadow-pop); animation:subir .3s var(--ease); }
.modal-cert::before{ content:""; position:absolute; inset:12px; border:1px solid #eee8e1; border-radius:14px; pointer-events:none; }
.modal-cert::after{ content:""; position:absolute; inset:18px; border:1px solid rgba(244,98,29,.35); border-radius:10px; pointer-events:none; }
.modal-cert .crest{ width:52px; height:52px; margin:0 auto 18px; filter:drop-shadow(0 6px 12px rgba(226,78,12,.3)); }
.modal-cert h2{ color:#1c1a17; font-size:32px; letter-spacing:-.03em; margin-bottom:8px; }
.modal-cert p{ color:#6f6962 !important; }
.modal-cert .cert-course{ color:#b8400a; font-size:21px; font-weight:500; letter-spacing:-.02em; margin:12px 0; }
.modal-cert .cert-date{ font-size:13px; color:#6f6962; margin-top:20px; font-variant-numeric:tabular-nums; }
/* O código de um certificado gravado: para se confirmar que é verdadeiro. */
.modal-cert .cert-codigo{ font-size:12px; color:#6f6962; margin-top:4px; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.cert-emitido{ font-size:13px; color:var(--muted); margin:-2px 0 12px; }
.cert-codigo-celula{ font-size:12.5px; letter-spacing:.06em; color:var(--ink-2); }
.modal-cert .modal-close{ z-index:2; background:#fff; border-color:#e8e3dd; color:#3b3732; }
.cert-assinatura{ margin-top:26px; display:flex; flex-direction:column; align-items:center; gap:2px; position:relative; z-index:1; }
.cert-assinatura .linha{ width:170px; height:1px; background:#d9d3cb; margin-bottom:8px; }
.cert-assinatura strong{ font-size:14.5px; font-weight:500; }
.cert-assinatura .cargo{ font-size:12.5px; color:#6f6962; }
.cert-previa-wrap{ display:flex; justify-content:center; margin-bottom:24px; }
.cert-previa{ max-width:600px; width:100%; position:relative; animation:none; }

/* ============================================================
   Definições
   ============================================================ */
.settings-grid{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:18px; align-items:start; }
.settings-card{ padding:22px; margin-bottom:18px; }
.settings-card h3{ font-size:17px; margin-bottom:18px; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); gap:16px; }
.toggle-row:first-child{ border-top:none; padding-top:0; }
.toggle-row .t-title{ font-size:14.5px; font-weight:500; color:var(--ink); }
.toggle-row .t-sub{ font-size:13px; color:var(--muted); }
.toggle-row .t-icone{ width:36px; height:36px; border-radius:8px; background:var(--sunken); display:grid; place-items:center; color:var(--ink-2); flex-shrink:0; }
.toggle-row .t-icone .icon{ width:17px; height:17px; }
.toggle-row .t-icone + div{ flex:1; min-width:0; }
.account-row{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; font-size:14px; border-top:1px solid var(--line); }
.account-row:first-child{ border-top:none; }
.account-row span:first-child{ color:var(--muted); }
.account-row span:last-child{ font-weight:500; text-align:right; }
.avatar-upload-row{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.avatar-lg{ width:72px; height:72px; font-size:22px; overflow:hidden; flex-shrink:0; }
.avatar-lg img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
#avatar-iniciais{ cursor:pointer; overflow:hidden; }
#avatar-iniciais img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.bloco-apoio{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; margin-top:16px; flex-wrap:wrap; }

/* ============================================================
   Notificações, toasts, diálogos, gavetas, menus
   ============================================================ */
.notif-wrap{ position:relative; }
.notif-panel{ position:absolute; top:calc(100% + 10px); right:0; width:340px; max-width:88vw; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-pop); z-index:50; overflow:hidden; animation:subir .22s var(--ease); }
.notif-panel-head{ padding:16px 18px 12px; font-weight:500; font-size:17px; letter-spacing:-.015em; }
.notif-list{ max-height:360px; overflow-y:auto; padding:0 8px 8px; }
.notif-item{ padding:12px 10px; border-radius:var(--r-md); display:flex; gap:10px; align-items:flex-start; }
.notif-item.clicavel{ cursor:pointer; }
.notif-item.clicavel:hover{ background:var(--sunken); }
.notif-item .dot-unread{ width:8px; height:8px; border-radius:99px; background:var(--accent); margin-top:7px; flex-shrink:0; }
.notif-item .dot-unread.lida{ background:transparent; }
.notif-item .txt strong{ display:block; font-size:14px; font-weight:500; margin-bottom:2px; }
.notif-item .txt p{ font-size:13.5px; margin:0 0 4px; }
.notif-item .txt .tempo{ font-size:12.5px; color:var(--muted); }
.notif-empty{ padding:30px 18px; text-align:center; font-size:14px; color:var(--muted); }

.toast-wrap{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:200; display:grid; gap:8px; width:min(440px, calc(100% - 32px)); }
.toast{ display:flex; gap:12px; align-items:center; padding:13px 16px; border-radius:var(--r-md); background:var(--ink); color:var(--canvas); box-shadow:var(--shadow-pop); font-size:14.5px; font-weight:500; animation:subir .3s var(--ease); }
.toast .icon{ color:#5fd88d; flex-shrink:0; }

.modal-overlay{ position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(3px); z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; animation:esvanecer .2s var(--ease); }
.modal-overlay.hidden{ display:none; }
.modal-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:99px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); display:grid; place-items:center; transition:background .15s; }
.modal-close:hover{ background:var(--sunken); }
.confirm-card{ max-width:440px; width:100%; padding:26px; border-radius:var(--r-xl); box-shadow:var(--shadow-pop); animation:subir .28s var(--ease); background:var(--surface); }
.confirm-card h3{ font-size:21px; margin-bottom:8px; }
.confirm-card p{ font-size:15px; margin-bottom:22px; }
.confirm-acoes{ display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

.drawer-overlay{ position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(3px); z-index:150; display:flex; justify-content:flex-end; opacity:0; transition:opacity .25s var(--ease); }
.drawer-overlay.aberto{ opacity:1; }
.drawer{ width:min(480px,100%); background:var(--surface); height:100%; display:flex; flex-direction:column; transform:translateX(40px); transition:transform .3s var(--ease); box-shadow:var(--shadow-pop); border-radius:var(--r-xl) 0 0 var(--r-xl); overflow:hidden; }
.drawer-overlay.aberto .drawer{ transform:translateX(0); }
.drawer-head{ padding:24px 26px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.drawer-head h3{ font-size:22px; margin:0; }
.drawer-sub{ font-size:14px; color:var(--muted); margin:4px 0 0; }
.drawer-head .modal-close{ position:static; flex-shrink:0; }
.drawer-body{ padding:8px 26px 22px; flex:1; overflow-y:auto; }
.drawer-foot{ padding:16px 26px 20px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; background:var(--surface-2); }

.menu-flutuante{ position:absolute; z-index:200; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-pop); padding:6px; animation:subir .2s var(--ease); }
.menu-flutuante button{ display:block; width:100%; text-align:left; padding:10px 12px; border-radius:8px; font-size:14px; color:var(--ink-2); }
.menu-flutuante button:hover{ background:var(--sunken); color:var(--ink); }
.menu-flutuante button.perigo{ color:var(--red-ink); }
.menu-flutuante button.perigo:hover{ background:var(--red-soft); }
.menu-flutuante button:disabled{ opacity:.4; cursor:not-allowed; }

.aviso-previa{ position:sticky; top:12px; z-index:29; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px 10px 18px; background:var(--blue-soft); border-radius:999px; margin-bottom:22px; font-size:14px; font-weight:500; color:var(--blue-ink); flex-wrap:wrap; box-shadow:var(--shadow-1); }
.barra-falha{ position:fixed; left:0; right:0; bottom:0; z-index:400; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)); background:var(--red-soft); border-top:1px solid color-mix(in srgb, var(--red) 30%, transparent); color:var(--red-ink); font-size:14px; }
.barra-falha strong{ display:block; font-weight:500; opacity:.85; margin-top:2px; }

/* ============================================================
   Painel — formulários e gestão de conteúdo
   ============================================================ */
.campo-cor{ display:flex; align-items:center; gap:12px; }
.campo-cor input[type=color]{ width:52px; height:42px; min-height:0; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); padding:4px; cursor:pointer; }
.campo-cor span{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.campo-imagem{ display:flex; align-items:center; gap:14px; }
.previa-imagem{ width:96px; height:60px; border-radius:var(--r-sm); border:1.5px dashed var(--line-strong); background:var(--surface-2); background-size:cover; background-position:center; flex-shrink:0; }
.previa-imagem.tem-imagem{ border-style:solid; border-width:1px; border-color:var(--line); }

.checklist{ display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; border:1px solid var(--line-strong); border-radius:var(--r-field); padding:6px; background:var(--surface); }
.checklist-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:14px; cursor:pointer; }
.checklist-item:hover{ background:var(--sunken); }
.checklist-item.escolhido{ background:var(--accent-soft); color:var(--accent-ink); font-weight:500; }
.checklist-item input{ accent-color:var(--accent); width:17px; height:17px; }

.check-card{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md); margin-top:12px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s; }
.check-card:hover{ border-color:var(--line-strong); }
.check-card.marcado{ border-color:var(--accent-line); background:var(--accent-soft); }
.check-card .check-quadro{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); display:grid; place-items:center; flex-shrink:0; margin-top:1px; color:transparent; background:var(--surface); }
.check-card.marcado .check-quadro{ background:var(--accent); border-color:var(--accent); color:#fff; }
.check-card .check-quadro .icon{ width:12px; height:12px; }
.check-card strong{ display:block; font-size:14.5px; font-weight:500; }
.check-card span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }

.upload-box{ position:relative; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:22px; text-align:center; background-color:var(--surface-2); background-size:cover; background-position:center; transition:border-color .15s, background-color .15s; }
.upload-box:hover{ border-color:var(--accent); }
.upload-box.pequena{ min-height:150px; }
.upload-box.sem-fundo{ min-height:180px; }
.upload-box .upload-dica{ font-size:14px; color:var(--muted); max-width:34ch; }
.upload-box.tem-imagem{ border-style:solid; border-width:1px; border-color:var(--line); }
.upload-box.tem-imagem .upload-dica{ display:none; }
.upload-box.tem-imagem .upload-acoes{ background:rgba(28,26,23,.72); padding:8px; border-radius:999px; }
.upload-acoes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }

.form-page{ max-width:1080px; }
.form-topo{ padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.form-topo h1{ font-size:clamp(26px,3.2vw,34px); letter-spacing:-.025em; }
.form-topo .eyebrow{ display:none; }
.form-secao{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:32px; margin-bottom:32px; }
.form-secao-desc h3{ font-size:17px; margin-bottom:8px; }
.form-secao-desc p{ font-size:14px; color:var(--muted); line-height:1.6; }
.form-card{ padding:22px; }
.form-card .field:last-of-type{ margin-bottom:18px; }
.campo-linha{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.campo-linha.nome-sigla{ grid-template-columns:1fr 120px; }
.form-rodape{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); }
.form-rodape-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }

.gestao-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.gestao-head h2{ font-size:22px; }
.gestao-head p{ margin:0; font-size:14.5px; color:var(--muted); }
.gestao-acoes{ display:flex; gap:10px; flex-wrap:wrap; }
.gestao-grid{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:22px; align-items:start; }
.curso-resumo{ position:relative; }
.curso-resumo-capa{ aspect-ratio:16/10; border-radius:var(--r-lg); background:var(--field, var(--field-apricot)); background-size:cover; background-position:center; display:grid; place-items:center; margin-bottom:16px; position:relative; box-shadow:var(--shadow-1); }
.curso-resumo-capa .sigla-grande{ font-size:44px; font-weight:500; color:var(--art-ink); letter-spacing:-.03em; opacity:.88; }
.curso-resumo-capa .cover-badge{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; height:26px; background:var(--amber-soft); color:var(--amber-ink); font-size:12px; font-weight:500; padding:0 10px; border-radius:999px; }
.curso-resumo h3{ font-size:21px; margin-bottom:4px; }
.curso-resumo-sub{ font-size:14.5px; color:var(--muted); margin-bottom:10px; }
.curso-resumo-meta{ font-size:13.5px; color:var(--muted); margin-bottom:14px; }
.curso-resumo-meta .cat-ligacao{ font-weight:500; margin-left:8px; color:var(--orange-ink); }
.curso-resumo-pct{ display:block; text-align:right; font-size:13px; font-weight:500; color:var(--muted); margin:6px 0 16px; font-variant-numeric:tabular-nums; }
.curso-resumo .btn-block{ width:100%; }

.modulo-admin{ margin-bottom:14px; overflow:hidden; }
.modulo-admin-head{ display:flex; align-items:center; gap:16px; padding:16px 20px; flex-wrap:wrap; }
.aulas-admin{ border-top:1px solid var(--line); }
.aula-admin{ display:flex; align-items:center; gap:14px; padding:12px 20px 12px 24px; border-top:1px solid var(--line); }
.aula-admin:first-child{ border-top:none; }
.aula-admin-num{ font-size:13px; font-weight:500; color:var(--muted); font-variant-numeric:tabular-nums; min-width:28px; }
.aula-admin-info{ flex:1; min-width:0; }
.aula-admin-info .titulo{ display:block; font-size:14.5px; font-weight:500; }
.btn-nova-aula{ display:flex; align-items:center; gap:8px; width:100%; padding:13px 20px; border-top:1.5px dashed var(--line-strong); font-size:14px; font-weight:500; color:var(--muted); text-align:left; transition:background .15s, color .15s; }
.btn-nova-aula:hover{ color:var(--orange-ink); background:var(--accent-soft); }

.modulo-acordeao{ margin-bottom:14px; overflow:hidden; }
.modulo-acordeao-head{ display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; transition:background .15s; }
.modulo-acordeao-head:hover{ background:var(--surface-2); }
.modulo-acordeao-head .chevron{ color:var(--muted); transition:transform .2s var(--ease); transform:rotate(-90deg); }
.modulo-acordeao.aberto .modulo-acordeao-head .chevron{ transform:none; }
.modulo-acordeao-titulo{ flex:1; min-width:0; }
.modulo-acordeao-titulo h3{ font-size:16px; margin:0; }
.modulo-acordeao-titulo p{ margin:2px 0 0; font-size:13px; color:var(--muted); }
.modulo-acordeao-corpo{ display:none; border-top:1px solid var(--line); padding:8px 12px 12px; }
.modulo-acordeao.aberto .modulo-acordeao-corpo{ display:block; }
.aula-linha{ display:flex; align-items:center; gap:14px; padding:10px; border-radius:var(--r-sm); cursor:pointer; transition:background .15s; }
.aula-linha:hover{ background:var(--sunken); }
.aula-linha-capa{ width:60px; aspect-ratio:16/10; border-radius:8px; background:var(--sunken); background-size:cover; background-position:center; display:grid; place-items:center; font-size:11.5px; font-weight:500; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.aula-linha-info{ flex:1; min-width:0; }
.aula-linha-info .titulo{ display:block; font-size:14.5px; font-weight:500; }

/* Editor de aula */
.aula-form-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; margin-bottom:26px; }
.editor-abas{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; }
.editor-abas button{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s; }
.editor-abas button:hover{ color:var(--ink); }
.editor-abas button .icon{ width:16px; height:16px; }
.editor-abas button.active{ color:var(--ink); border-bottom-color:var(--accent); }
.editor-abas button.active .icon{ color:var(--accent); }
.editor-caixa{ overflow:hidden; }
.editor-toolbar{ display:flex; flex-wrap:wrap; gap:2px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.editor-toolbar button{ min-width:34px; height:34px; border-radius:8px; color:var(--ink-2); font-size:14px; display:inline-flex; align-items:center; justify-content:center; }
.editor-toolbar button:hover{ background:var(--sunken); color:var(--ink); }
.editor-toolbar button svg{ width:17px; height:17px; }
.editor-area{ min-height:340px; padding:20px 22px; font-size:15.5px; line-height:1.7; outline:none; color:var(--ink-2); }
.editor-area:empty::before{ content:"Escreve aqui o conteúdo da aula..."; color:var(--faint); }
.editor-area h3{ font-size:20px; margin:18px 0 8px; color:var(--ink); }
.editor-area ul{ list-style:disc; padding-left:22px; margin:10px 0; }
.editor-area pre{ background:var(--sunken); border-radius:8px; padding:12px 14px; font-family:var(--mono); font-size:13px; overflow-x:auto; }
.editor-area img{ border-radius:var(--r-md); margin:12px 0; }
.editor-caixa.ecra-inteiro{ position:fixed; inset:20px; z-index:300; overflow-y:auto; box-shadow:var(--shadow-pop); }
.editor-caixa.ecra-inteiro .editor-area{ min-height:calc(100vh - 160px); }
.tabela-conteudo{ width:100%; border-collapse:collapse; margin:12px 0; }
.tabela-conteudo td{ border:1px solid var(--line-strong); padding:8px 10px; font-size:14px; }

.lista-ficheiros{ display:flex; flex-direction:column; gap:8px; }
.ficheiro-linha{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.ficheiro-linha .icon{ color:var(--muted); }
.ficheiro-info{ flex:1; min-width:0; }
.ficheiro-info strong{ display:block; font-size:14px; font-weight:500; }
.ficheiro-info .sub-celula{ display:block; word-break:break-all; }

.quiz-bloco{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:12px; background:var(--surface); }
.quiz-bloco-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.quiz-num{ width:28px; height:28px; border-radius:99px; background:var(--accent-soft); color:var(--accent-ink); font-size:13px; font-weight:500; display:grid; place-items:center; flex-shrink:0; }
.quiz-pergunta{ flex:1; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--ink); font-size:15px; font-weight:500; padding:6px 0; }
.quiz-pergunta:focus{ outline:none; border-color:var(--accent); box-shadow:none; }
.quiz-opcoes{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.quiz-opcao{ display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-sm); }
.quiz-opcao.certa{ border-color:transparent; background:var(--green-soft); }
.quiz-opcao input[type=radio]{ accent-color:var(--green); width:16px; height:16px; flex-shrink:0; }
.quiz-texto{ flex:1; background:transparent; border:none; color:var(--ink); font-size:14px; }
.quiz-texto:focus{ outline:none; box-shadow:none; }

.estado-embed{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 14px; border-radius:var(--r-md); background:var(--sunken); font-size:13.5px; color:var(--muted); }
.estado-embed code{ font-family:var(--mono); font-size:12px; word-break:break-all; color:var(--ink-2); }
.estado-embed .icon{ width:15px; height:15px; flex-shrink:0; }
.estado-embed.bom{ background:var(--green-soft); color:var(--green-ink); }
.estado-embed.bom code{ color:inherit; opacity:.85; }
.estado-embed.mau{ background:var(--amber-soft); color:var(--amber-ink); }
.passos{ list-style:decimal; padding-left:20px; margin:0 0 14px; }
.passos li{ font-size:14px; color:var(--ink-2); margin-bottom:8px; line-height:1.6; }
.passos li strong{ color:var(--ink); font-weight:500; }

/* Aparência */
.amostra-cor.grande{ width:48px; height:48px; border-radius:10px; display:block; margin-bottom:10px; }
.previa-login{ padding:26px; margin-bottom:22px; }
.previa-marca{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.previa-login h3{ font-size:24px; letter-spacing:-.025em; line-height:1.2; margin:0 0 10px; max-width:30ch; }
.previa-login p{ color:var(--muted); font-size:15px; max-width:52ch; }
.previa-botoes{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.previa-botoes .btn{ cursor:default; }
.paleta-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:22px; }
.paleta-grid strong{ display:block; font-size:14px; font-weight:500; }
.paleta-grid .sub-celula{ display:block; }

/* Configurações */
.grelha-toggles{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px; }
.grelha-toggles .toggle-row{ border-top:1px solid var(--line); }
.grelha-toggles .toggle-row:nth-child(-n+2){ border-top:none; padding-top:0; }
.atalhos-config{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:16px; }
.atalho{ display:flex; align-items:center; gap:14px; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s, box-shadow .15s; }
.atalho:hover{ border-color:var(--line-strong); background:var(--surface-2); box-shadow:var(--shadow-1); }
.atalho strong{ display:block; font-size:14.5px; font-weight:500; }
.atalho .sub-celula{ display:block; }
.linha-acoes{ display:flex; gap:10px; flex-wrap:wrap; }

/* Integrações */
.lista-integracoes{ padding:4px 22px; margin-bottom:22px; }
.integracao{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.integracao:first-child{ border-top:none; }
.integracao-info{ flex:1; min-width:0; }
.integracao-info strong{ display:block; font-size:15px; font-weight:500; margin-bottom:2px; }
.integracao-info .sub-celula{ display:block; word-break:break-word; }
.bloco-codigo{ display:block; padding:12px 14px; background:var(--sunken); border-radius:var(--r-field); font-family:var(--mono); font-size:12.5px; word-break:break-all; color:var(--ink-2); }
.previa-player{ margin-top:16px; aspect-ratio:16/9; max-width:100%; border-radius:var(--r-md); overflow:hidden; background:#12110f; }
.previa-player iframe{ width:100%; height:100%; border:0; display:block; }

/* Relatórios */
.barra-linha{ display:flex; align-items:center; gap:14px; padding:9px 22px; }
.barra-rotulo{ width:160px; font-size:14px; font-weight:500; flex-shrink:0; color:var(--ink-2); }
.barra-track{ flex:1; height:10px; border-radius:99px; background:var(--sunken); overflow:hidden; }
.barra-fill{ height:100%; background:linear-gradient(90deg,var(--orange-400),var(--orange-500)); border-radius:99px; }
.barra-valor{ width:40px; text-align:right; font-size:14px; font-weight:500; color:var(--ink); flex-shrink:0; font-variant-numeric:tabular-nums; }
.relatorio-duplo{ margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:22px; }
.relatorio-duplo .card{ padding-bottom:14px; }

/* Assistente */
.aviso-honesto{ display:flex; gap:14px; align-items:flex-start; padding:16px 18px; margin-bottom:18px; background:var(--blue-soft); border-color:transparent; box-shadow:none; color:var(--blue-ink); }
.aviso-honesto .icon{ color:var(--blue-ink); flex-shrink:0; margin-top:2px; }
.aviso-honesto strong{ display:block; font-size:14.5px; font-weight:500; margin-bottom:4px; }
.aviso-honesto p{ margin:0; font-size:14px; color:var(--blue-ink); }
.ia-controlos{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding:22px; margin-bottom:16px; }
.ia-resultado{ padding:0 0 18px; }
.ia-resultado textarea{ width:100%; margin:0 0 16px; padding:18px 22px; background:transparent; border:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); font-size:14.5px; line-height:1.65; resize:vertical; }
.ia-resultado textarea:focus{ outline:none; background:var(--surface-2); box-shadow:none; }
.ia-resultado .linha-acoes{ padding:0 22px; }

/* ============================================================
   Primeira entrada
   ============================================================ */
.onboarding-overlay{ align-items:center; }
.onboarding-card{ width:100%; max-width:580px; padding:30px; max-height:88vh; overflow-y:auto; border-radius:var(--r-xl); box-shadow:var(--shadow-pop); animation:subir .3s var(--ease); background:var(--surface); }
.onboarding-card .eyebrow{ display:none; }
.onb-passos{ display:flex; gap:6px; margin-bottom:22px; }
.onb-passos span{ flex:1; height:6px; border-radius:99px; background:var(--sunken); }
.onb-passos span.feito{ background:var(--cta); }
.onboarding-card h2{ font-size:26px; letter-spacing:-.025em; margin:0 0 8px; }
.onb-sub{ font-size:15px; color:var(--muted); margin-bottom:22px; }
.onb-opcoes{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.onb-opcao{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r-md); color:var(--ink); background:var(--surface); transition:border-color .15s, background .15s, box-shadow .15s; }
.onb-opcao:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.onb-opcao.escolhida{ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring); }
.onb-opcao-txt{ flex:1; min-width:0; }
.onb-opcao-txt strong{ display:block; font-size:15px; font-weight:500; }
.onb-opcao-txt span{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
.onb-check{ width:22px; height:22px; border-radius:99px; border:1.5px solid var(--line-strong); display:grid; place-items:center; color:transparent; flex-shrink:0; }
.onb-opcao.escolhida .onb-check{ background:var(--accent); border-color:var(--accent); color:#fff; }
.onb-check .icon{ width:12px; height:12px; }
.onb-acoes{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.onb-acoes .btn-primary:disabled{ opacity:.45; cursor:not-allowed; }
.onb-trilha{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:10px; }
.onb-trilha li{ display:flex; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.onb-trilha-capa{ width:72px; aspect-ratio:16/10; border-radius:8px; background:var(--field, var(--field-apricot)); background-size:cover; background-position:center; display:grid; place-items:center; font-size:14px; font-weight:500; color:var(--art-ink); flex-shrink:0; }
.onb-trilha-txt strong{ display:block; font-size:15px; font-weight:500; }
.onb-trilha-txt span{ display:block; font-size:13.5px; color:var(--muted); }

/* ============================================================
   Movimento
   ============================================================ */
@keyframes subir{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
@keyframes esvanecer{ from{ opacity:0; } }
@keyframes toast-in{ from{ opacity:0; transform:translateY(10px); } }
#app-shell .content > div:not(.hidden){ animation:entrar .35s var(--ease); }
@keyframes entrar{ from{ opacity:0; transform:translateY(6px); } }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:1180px){
  .aula-layout{ grid-template-columns:minmax(0,1fr); }
  .sidebar-lessons{ position:static; max-height:none; }
  .settings-grid{ grid-template-columns:minmax(0,1fr); }
  .curso-hero{ grid-template-columns:minmax(0,1fr) 300px; }
}
@media (max-width:1000px){
  .form-secao, .gestao-grid, .aula-form-grid{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .form-secao-desc p{ max-width:60ch; }
}
@media (max-width:980px){
  .stat-row, .stat-row.tres{ grid-template-columns:1fr 1fr; }
  .widget-row{ grid-template-columns:minmax(0,1fr); }

  /* A barra lateral passa a gaveta; em cima fica uma barra desfocada com
     a marca, e em baixo a barra de separadores. */
  .sidebar{ transform:translateX(-100%); width:min(300px,86vw); box-shadow:none; border-radius:0 var(--r-xl) var(--r-xl) 0; }
  .sidebar.open{ transform:translateX(0); box-shadow:var(--shadow-pop); }
  .main-col{ margin-left:0; }
  .topbar{ position:sticky; top:0; z-index:30; padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top,0px)); background:color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
  .topbar-marca{ display:flex; flex:1; min-width:0; }
  .topbar-marca .crest{ width:32px; height:32px; }
  .topbar-marca .wordmark{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topbar-marca .wordmark small{ display:none; }
  .topbar-search{ display:none; }
  .menu-toggle{ display:grid; }
  #topbar-cta .btn{ min-height:34px; padding:0 12px; font-size:13px; }
  .content{ padding:18px 16px calc(100px + env(safe-area-inset-bottom,0px)); }
  .tabbar{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:34; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px -18px rgba(28,22,16,.35); }
  .tabbar button{ display:grid; justify-items:center; gap:3px; padding:6px 2px; color:var(--muted); font-size:11.5px; font-weight:500; border-radius:8px; min-width:0; }
  .tabbar button span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabbar button .icon{ width:22px; height:22px; }
  .tabbar button.active{ color:var(--accent-ink); }
  .tabbar button.active .icon{ color:var(--accent); }
  .toast-wrap{ bottom:calc(86px + env(safe-area-inset-bottom,0px)); }
  .aviso-previa{ top:74px; border-radius:var(--r-md); }
  .barra-falha{ bottom:calc(64px + env(safe-area-inset-bottom,0px)); }

  .login-shell{ grid-template-columns:minmax(0,1fr); }
  .login-brandside{ min-height:0; padding:24px; gap:28px; }
  .login-brandside::after{ width:320px; height:320px; right:-110px; bottom:-150px; }
  .login-quote h2{ font-size:26px; }
  .login-quote p{ font-size:15px; }
  #login-rodape{ display:none; }
  .curso-hero{ grid-template-columns:minmax(0,1fr); }
  .curso-hero-arte{ grid-column:1; grid-row:1; min-height:0; aspect-ratio:16/8; margin:10px 10px 0; }
  .curso-hero-conteudo{ grid-row:2; padding:20px 20px 22px; }
}
@media (max-width:900px){
  .paleta-grid{ grid-template-columns:repeat(2,1fr); }
  .grelha-toggles, .atalhos-config, .relatorio-duplo, .ia-controlos{ grid-template-columns:1fr; }
  .grelha-toggles .toggle-row:nth-child(2){ border-top:1px solid var(--line); padding-top:14px; }
  .barra-rotulo{ width:110px; }
}
@media (max-width:640px){
  body{ font-size:14.5px; }
  .stat-row, .stat-row.tres{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-card{ padding:14px; gap:10px; }
  .stat-card .stat-label{ font-size:13px; padding-right:0; }
  .stat-card .stat-value{ font-size:30px; }
  .stat-icon{ display:none; }
  .page-head{ margin-bottom:16px; }
  .course-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .course-cover{ margin:6px 6px 0; border-radius:13px; }
  .course-cover .cover-badge{ top:6px; left:6px; height:24px; padding:0 8px; font-size:11.5px; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis; }
  .course-cover .cover-badge.done, .cover-badge.estado{ top:auto; bottom:6px; right:6px; left:auto; }
  .course-cover .cover-badge.em-breve{ right:auto; left:6px; }
  .course-cover .cadeado{ width:30px; height:30px; top:6px; right:6px; }
  .cover-sigla{ font-size:30px; }
  .course-body{ padding:10px 12px 12px; }
  .course-body h3{ font-size:14.5px; }
  .course-body .course-desc{ display:none; }
  .course-legenda{ font-size:12px; }
  .oferta-linha{ flex-direction:column; align-items:flex-start; }
  .chip-row{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding-inline:16px; scrollbar-width:none; }
  .chip-row::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }
  .continue-card{ grid-template-columns:72px minmax(0,1fr); gap:12px; padding:10px; }
  .continue-thumb{ border-radius:8px; aspect-ratio:1; }
  .continue-thumb::before{ width:36px; height:36px; }
  .continue-thumb .icon{ width:16px; height:16px; }
  .continue-body h3{ font-size:15.5px; }
  .continue-body .continue-onde{ font-size:13px; margin-bottom:8px; }
  .continue-card > .btn{ display:none; }
  .continue-meta .pct{ display:none; }
  .banner-slide{ aspect-ratio:auto; min-height:170px; }
  .aula-header-row{ flex-direction:column; }
  .aula-actions{ width:100%; }
  .aula-actions .btn{ flex:1; }
  .campo-linha, .campo-linha.nome-sigla{ grid-template-columns:1fr; }
  .form-rodape-acoes{ width:100%; }
  .form-rodape-acoes .btn{ flex:1; }
  .editor-abas button{ padding:10px 10px; }
  .event-detalhe{ padding:0 16px 18px; }
  .event-linha{ padding:14px 16px; }
  .comunidade{ padding:12px 14px; gap:12px; }
  .comunidade-foto{ width:46px; height:46px; }
  .onboarding-card{ padding:22px 18px; }
  .drawer{ border-radius:0; }
  .drawer-head{ padding:20px 20px 12px; }
  .drawer-body{ padding:8px 20px 20px; }
  .drawer-foot{ padding:14px 20px 18px; }
  .modal-cert{ padding:44px 22px 30px; }
  .modal-cert h2{ font-size:25px; }
  .table-card-head{ padding:16px; }
  .admin-table th, .admin-table td{ padding-left:16px; padding-right:16px; }
  .xp-card{ padding:18px; gap:16px; }
  .badge-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .badge-card{ padding:16px 12px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Aparência — pré-visualização da entrada, igual à real */
.previa-login{ padding:10px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10px; }
.previa-painel{ border-radius:var(--r-lg); background:var(--brand-panel); color:#fff; padding:24px; display:flex; flex-direction:column; gap:10px; min-height:260px; }
.previa-painel .brand-mark .wordmark, .previa-painel .brand-mark .wordmark small{ color:#fff; }
.previa-painel h3{ color:#fff; margin-top:auto; }
.previa-painel p{ color:rgba(255,255,255,.9); margin:0; font-size:14.5px; }
.previa-painel .previa-rodape{ font-size:12.5px; color:rgba(255,255,255,.8); margin-top:8px; }
.previa-form{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:20px; }
.previa-form strong{ font-size:19px; font-weight:500; letter-spacing:-.02em; margin-bottom:4px; }
.previa-campo{ display:flex; align-items:center; height:44px; padding:0 14px; border-radius:var(--r-field); border:1px solid var(--line-strong); background:var(--surface); color:var(--faint); font-size:14px; }
.previa-form .btn{ margin-top:6px; pointer-events:none; }
@media (max-width:760px){ .previa-login{ grid-template-columns:minmax(0,1fr); } }
.oferta-preco .icon{ width:14px; height:14px; margin-right:6px; }
@media (max-width:980px){
  /* "Mais" na barra de baixo já abre a gaveta: o menu de cima sai, e a marca cabe. */
  .menu-toggle{ display:none; }
}
@media (max-width:420px){
  .topbar-actions{ gap:6px; }
  .topbar .icon-btn, .topbar .avatar{ width:36px; height:36px; }
}

/* Calendário: o encontro que já passou perde o violeta, que é do tempo por vir. */
.card:has(> .event-row){ overflow:hidden; }
.event-row.passado .event-date-badge{ background:var(--sunken); color:var(--ink-2); box-shadow:none; }
.event-acoes .btn .icon{ width:15px; height:15px; }

/* Etiquetas e preços que não podem partir-se em duas linhas */
.oferta-preco{ white-space:nowrap; }
.course-cover .cover-badge{ white-space:nowrap; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; display:inline-block; line-height:28px; }
.course-cover .cover-badge::before{ display:inline-block; vertical-align:middle; margin:-2px 6px 0 0; }
.course-card.vitrine .btn{ white-space:normal; text-align:center; line-height:1.2; }
@media (max-width:640px){
  .course-cover .cover-badge{ line-height:24px; }
  .oferta-preco{ font-size:13.5px; height:28px; padding:0 10px; }
  .oferta-preco span{ font-size:11.5px; }
  .course-card.vitrine .btn{ padding:6px 10px; font-size:13px; }
  .course-card.vitrine .btn .seta-circulo{ display:none; }
}

.onb-opcao .dot{ width:10px; height:10px; border-radius:50%; background:var(--c,var(--accent)); flex-shrink:0; }
@media (max-width:640px){
  .section-title{ flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
  .modulo-head{ padding:14px 16px; gap:12px; align-items:flex-start; }
  .modulo-num{ width:32px; height:32px; font-size:13px; }
  .modulo-info h3{ font-size:15.5px; }
  .modulo-meta{ gap:8px; padding-top:6px; }
  .modulo-count{ display:none; }
  .aula-row{ padding:12px 14px 12px 16px; gap:12px; }
  .aula-arrow{ display:none; }
}

/* ============================================================
   Correções da revisão final
   ============================================================ */
/* A etiqueta do banner é um selo no canto, não uma linha por cima do título. */
.banner-etiqueta{ position:absolute; top:16px; right:16px; display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.22); color:#fff; font-size:12.5px; font-weight:500; max-width:calc(100% - 32px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Estado de uma linha: um ponto no início, e não a linha toda pintada. */
.admin-table tr.tint-risco td:first-child, .admin-table tr.tint-concluido td:first-child{ position:relative; }
.admin-table tr.tint-risco td:first-child::before, .admin-table tr.tint-concluido td:first-child::before{ content:""; position:absolute; left:6px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; }
.admin-table tr.tint-risco td:first-child::before{ background:#d99a00; box-shadow:0 0 0 3px var(--amber-soft); }
.admin-table tr.tint-concluido td:first-child::before{ background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }

/* Visão geral: as colunas secundárias saem antes de a tabela passar da margem. */
.tabela-visao .sub-categoria{ display:none; margin-top:2px; }
@media (max-width:1560px){
  .tabela-visao .col-b{ display:none; }
  .tabela-visao .sub-categoria{ display:block; }
}
@media (max-width:1240px){ .tabela-visao .col-a{ display:none; } }

/* Barra lateral do painel: mais compacta para caber inteira num ecrã de 900px. */
.sidebar-nav .nav-item{ padding:8px 12px; }
.sidebar-nav .nav-label{ padding:12px 12px 4px; }
.rotulo-cta{ display:inline; }
@media (max-width:980px){
  #btn-ver-como-aluno{ width:36px; padding:0; }
  #btn-ver-como-aluno .rotulo-cta{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* Entrar: o formulário num cartão branco, como na Library. */
.login-card{ width:min(440px,100%); background:var(--card-bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); padding:30px 28px; }
@media (max-width:980px){ .login-formside{ padding:8px 16px 32px; } .login-card{ padding:24px 20px; } }

/* O título do certificado: uma linha de texto normal, sem maiúsculas espaçadas. */
.cert-titulo{ color:#6f6962 !important; font-size:15px; margin:0 0 10px; }
.aula-breadcrumb{ margin:4px 0 0; }
.evento-passado .event-date-badge{ background:var(--sunken); color:var(--ink-2); box-shadow:none; }

/* ============================================================
   Páginas internas (evento, oferta, página própria de um banner)
   O molde da página de produto da Kingdom Library: capa à esquerda,
   o texto à direita, um botão que resolve. Empilha no telemóvel.
   ============================================================ */
button.back-link{ background:none; border:0; padding:0; font:inherit; }
button.back-link:hover{ color:var(--ink); }
.pagina-destaque{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(24px,4vw,48px); align-items:start; }
.pagina-arte{ position:sticky; top:24px; }
.pagina-capa{ aspect-ratio:1/1; border-radius:var(--r-lg); background-color:var(--field, var(--field-apricot)); background-size:cover; background-position:center; display:grid; place-items:center; box-shadow:var(--shadow-2); }
.pagina-capa .cover-sigla{ font-size:clamp(56px,7vw,96px); }
.pagina-data{ aspect-ratio:1/1; border-radius:var(--r-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; background:linear-gradient(160deg,var(--violet-1),var(--violet-2)); box-shadow:0 18px 40px -18px rgba(86,76,201,.8), inset 0 1px 0 rgba(255,255,255,.25); }
.pagina-data .dia{ font-size:clamp(72px,9vw,120px); font-weight:500; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.pagina-data .mes{ font-size:clamp(18px,2vw,24px); font-weight:500; letter-spacing:.08em; opacity:.9; }
.pagina-data.passada{ background:var(--sunken); color:var(--ink-2); box-shadow:var(--shadow-1); }
.pagina-corpo{ padding-top:4px; }
.pagina-etiquetas{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.pagina-etiqueta{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px; border-radius:999px; background:var(--sunken); color:var(--ink-2); font-size:13.5px; font-weight:500; }
.pagina-etiqueta .icon{ width:15px; height:15px; }
.pagina-etiqueta.bloqueado{ background:var(--accent-soft); color:var(--accent-ink); }
.pagina-etiqueta.em-breve{ background:var(--violet-soft); color:var(--violet-ink); }
.pagina-etiqueta.tem-acesso, .pagina-etiqueta.acesso.gratuito{ background:var(--green-soft); color:var(--green-ink); }
.pagina-etiqueta.acesso.exclusivo{ background:var(--orange-soft, var(--accent-soft)); color:var(--accent-ink); }
.pagina-corpo h1{ font-size:clamp(28px,3.6vw,44px); letter-spacing:-.03em; line-height:1.12; margin:0 0 16px; text-wrap:balance; }
.pagina-texto{ font-size:16px; line-height:1.6; color:var(--ink-2); max-width:62ch; margin:0 0 20px; }
.pagina-detalhes{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-wrap:wrap; gap:8px; }
.pagina-detalhes li{ display:flex; flex-direction:column; gap:2px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); min-width:140px; }
.pagina-detalhes .rotulo{ font-size:12.5px; color:var(--muted); }
.pagina-detalhes strong{ font-size:14.5px; font-weight:500; color:var(--ink); }
.pagina-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.pagina-acoes .btn .icon{ width:18px; height:18px; }
.pagina-nota{ font-size:14px; color:var(--muted); max-width:56ch; margin:0; }
.pagina-vazia{ padding:32px; text-align:center; color:var(--ink-2); }
@media (max-width:860px){
  .pagina-destaque{ grid-template-columns:1fr; }
  .pagina-arte{ position:static; max-width:420px; }
  .pagina-acoes .btn{ flex:1 1 100%; }
}

/* O banner no telemóvel: só a imagem e uma pílula «Saber mais», do tamanho
   da etiqueta. O texto escrito por cima de uma imagem que já tem texto
   sobrepunha-se (pedido do Shelton a 27/09/2026). */
.banner-saber{ display:none; }
@media (max-width:640px){
  .banner-slide .banner-etiqueta, .banner-slide .banner-title, .banner-slide .banner-cta{ display:none; }
  .banner-saber{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.92); color:#1c1a17; font-size:12.5px; font-weight:500; box-shadow:0 6px 14px -8px rgba(0,0,0,.5); }
  .banner-saber .icon{ width:14px; height:14px; }
}

/* O cartão do curso, como o de uma oferta mas sem preço: duração, avaliação
   e quem o dá. O progresso só depois de começar (pedido de 27/09/2026). */
.course-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:0 0 12px; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.course-meta-item{ display:inline-flex; align-items:center; gap:5px; }
.course-meta-item svg{ width:15px; height:15px; flex-shrink:0; color:var(--muted); }
.course-meta-item.nota svg{ color:var(--accent); }
.course-meta-item .nota-n{ color:var(--muted); }
.course-facilitador{ display:flex; align-items:center; gap:8px; margin:auto 0 0; padding-top:10px; border-top:1px solid var(--line); }
.facilitador-foto{ width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--sunken) center/cover no-repeat; color:var(--ink-2); font-size:11px; font-weight:500; }
.facilitador-nome{ font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.course-progresso{ margin-top:12px; }
.course-progresso .course-progress-row{ margin:0 0 8px; }
@media (max-width:640px){
  .course-body .course-desc{ display:-webkit-box; font-size:12.5px; margin-bottom:10px; }
  .course-meta{ font-size:12px; gap:4px 10px; margin-bottom:10px; }
  .facilitador-foto{ width:22px; height:22px; font-size:10px; }
  .facilitador-nome{ font-size:12px; }
}
.campo-linha.facilitador{ display:grid; grid-template-columns:1fr 200px; gap:14px; align-items:start; }
@media (max-width:640px){ .campo-linha.facilitador{ grid-template-columns:1fr; } }
.course-facilitador.no-hero{ border:0; padding:0; margin:0; display:inline-flex; }

/* ============================================================
   Cartão de curso no molde do cartão de oferta do Payflow
   (pedido do Shelton, 28/09/2026): sem contorno, só a sombra quente;
   a capa de ponta a ponta; o preço grande em tinta; a duração e a
   avaliação em pílulas cinzentas; o botão suave a toda a largura.
   Vale para Meus cursos, Vitrine e o painel, que usam o mesmo cartão.
   ============================================================ */
.course-card{ border:0; box-shadow:var(--shadow-1); }
.course-card:hover, .course-card.vitrine:hover{ box-shadow:var(--shadow-2); }
.course-card.bloqueado:hover{ box-shadow:var(--shadow-1); }
.course-cover{ margin:0; border-radius:0; }
.course-body{ padding:16px 17px 17px; }
.course-body h3{ font-size:16px; font-weight:500; letter-spacing:-.022em; line-height:1.3; margin-bottom:4px; }
.course-body .course-desc{ font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.course-meta{ gap:6px; margin:0 0 12px; }
.course-meta-item{ height:26px; padding:0 10px; border-radius:999px; background:var(--sunken); color:var(--ink-2); font-size:12.5px; font-weight:500; }
.course-meta-item svg{ width:14px; height:14px; }
.course-facilitador, .oferta-linha{ border-top-color:var(--line); }
.oferta-linha{ margin-top:12px; padding-top:12px; }
.oferta-preco{ height:auto; padding:0; background:none; color:var(--ink); font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.oferta-preco .icon{ display:none; }
.oferta-preco span{ font-size:12.5px; color:var(--muted); opacity:1; letter-spacing:0; }
.course-card.vitrine .btn{ background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; box-shadow:none; font-weight:500; }
.course-card.vitrine .btn:hover{ background:color-mix(in srgb, var(--accent-soft) 80%, var(--accent) 20%); }

/* No telemóvel, um cartão por linha, como no Payflow: dois lado a lado não
   tinham largura para o preço nem para as pílulas. */
@media (max-width:640px){
  .course-grid{ grid-template-columns:1fr; gap:14px; }
  .course-cover{ margin:0; border-radius:0; }
  .course-cover .cover-badge{ top:10px; left:10px; height:28px; padding:0 11px; font-size:12.5px; line-height:28px; }
  .course-cover .cover-badge.done, .cover-badge.estado{ top:auto; bottom:10px; right:10px; left:auto; }
  .course-cover .cover-badge.em-breve{ right:auto; left:10px; }
  .course-cover .cadeado{ width:36px; height:36px; top:10px; right:10px; }
  .cover-sigla{ font-size:42px; }
  .course-body{ padding:15px 16px 16px; }
  .course-body h3{ font-size:16px; }
  .course-body .course-desc{ display:-webkit-box; font-size:13.5px; }
  .course-meta{ font-size:12.5px; gap:6px; }
  .oferta-linha{ flex-direction:row; align-items:center; }
  .oferta-preco{ font-size:21px; height:auto; padding:0; }
  .course-card.vitrine .btn{ padding:10px 14px; font-size:14px; }
  .course-card.vitrine .btn .seta-circulo{ display:inline-grid; }
}

/* ============================================================
   Convites — no molde do ecrã de convites da Library (29/09/2026):
   separadores por estado com a contagem, procura à direita, a pessoa com
   o avatar, o prazo à vista e o estado com um ponto.
   ============================================================ */
.so-leitor{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.convites-barra{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:20px 22px 18px; border-bottom:1px solid var(--line); }
.convites-estados{ display:flex; gap:8px; flex-wrap:wrap; }
.estado-chip{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 8px 0 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:15px; font-weight:500; transition:background .15s, border-color .15s, color .15s; }
.estado-chip:hover{ border-color:var(--line-strong); }
.estado-chip-conta{ min-width:28px; height:28px; padding:0 8px; border-radius:999px; background:var(--sunken); color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; display:inline-grid; place-items:center; }
.estado-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--surface); }
.estado-chip.active .estado-chip-conta{ background:color-mix(in srgb, var(--surface) 22%, transparent); color:var(--surface); }
.convites-busca{ max-width:300px; }

/* O «Ações» só para leitores de ecrã é absoluto: sem esta âncora, escapava
   da caixa que desliza e alargava a página inteira no telemóvel. */
.convites-card .table-wrap{ position:relative; }
.convites-tabela th, .convites-tabela td{ padding-left:14px; padding-right:14px; }
.convites-tabela td{ vertical-align:middle; }
.convites-tabela .convite-cursos{ white-space:normal; min-width:150px; max-width:240px; line-height:1.45; }
.convites-tabela .acoes-linha{ gap:2px; }
.pessoa-celula{ display:flex; align-items:center; gap:12px; }
.pessoa-celula .nome{ font-weight:500; }
.avatar-iniciais{ width:42px; height:42px; border-radius:999px; flex-shrink:0; display:grid; place-items:center; background:var(--c, var(--accent)); color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em; }
.etiqueta-idioma{ display:inline-grid; place-items:center; min-width:46px; height:32px; padding:0 10px; border-radius:999px; background:var(--sunken); color:var(--ink-2, var(--ink)); font-size:13px; font-weight:500; }
.convite-prazo{ white-space:nowrap; }
.prazo-perto{ color:var(--amber-ink); font-weight:500; }
.estado-convite{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:500; white-space:nowrap; }
.estado-ponto{ width:7px; height:7px; border-radius:99px; background:currentColor; }
.estado-convite.e-enviado{ background:var(--accent-soft); color:var(--accent-ink); }
.estado-convite.e-aberto{ background:var(--blue-soft); color:var(--blue-ink); }
.estado-convite.e-aceite{ background:var(--green-soft); color:var(--green-ink); }
.estado-convite.e-parado{ background:var(--sunken); color:var(--muted); }
.convites-tabela .acoes-linha{ justify-content:flex-end; }

/* A gaveta do convite: idioma e prazo lado a lado, os cursos em cartões. */
.campos-par{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.campos-par .field{ min-width:0; }
.field-rotulo{ display:block; font-size:13.5px; font-weight:500; color:var(--ink-2); margin-bottom:7px; }
.checklist.checklist-cartoes{ max-height:none; overflow:visible; border:0; padding:0; background:transparent; gap:10px; }
/* `.field label` é display:block e mais específico: o cartão tem de o vencer. */
.field label.checklist-cartao{ display:flex; margin-bottom:0; font-size:15px; font-weight:400; color:var(--ink); }
.checklist-cartao{ gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); font-size:15px; line-height:1.4; color:var(--ink); transition:border-color .15s, background .15s; }
.checklist-cartao:hover{ background:var(--surface); border-color:var(--line-strong); }
.checklist-cartao.escolhido{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--ink); font-weight:400; }
.checklist-cartao input{ flex-shrink:0; width:20px; height:20px; }
.cartao-mini{ width:50px; height:50px; border-radius:var(--r-md); flex-shrink:0; background:var(--sunken) center/cover no-repeat; }
.cartao-mini.sem-imagem{ display:grid; place-items:center; background:color-mix(in srgb, var(--c, var(--accent)) 18%, var(--surface)); color:color-mix(in srgb, var(--c, var(--accent)) 40%, var(--ink)); font-size:13px; font-weight:600; }
.cartao-nome{ flex:1; min-width:0; }
.cartao-etiqueta{ flex-shrink:0; padding:6px 12px; border-radius:999px; background:var(--sunken); color:var(--muted); font-size:13px; font-weight:500; white-space:nowrap; }

@media (max-width:640px){
  .convites-barra{ padding:16px; }
  .convites-busca{ max-width:none; flex-basis:100%; }
  .estado-chip{ height:38px; padding:0 6px 0 14px; font-size:14px; }
  .estado-chip-conta{ min-width:24px; height:24px; }
  .campos-par{ grid-template-columns:1fr; gap:0; }
}

/* ============================================================
   PT / EN — o mesmo selector na entrada e nas Definições, no molde do
   checkout: a sigla diz a língua (uma bandeira sozinha não diz).
   ============================================================ */
.seletor-idioma{ display:inline-flex; gap:2px; padding:3px; border-radius:999px; background:var(--sunken); }
.seletor-idioma button{ font:inherit; font-size:13px; font-weight:500; min-height:32px; min-width:44px; padding:0 12px;
  border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; }
.seletor-idioma button:hover{ color:var(--ink); }
.seletor-idioma button[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(28,22,16,.08); }
.seletor-idioma button:focus-visible{ outline:none; box-shadow:var(--ring); }
.login-idioma{ display:flex; justify-content:flex-end; margin:-8px -6px 12px 0; }
.login-idioma:empty{ display:none; }

/* Configurações › Endereço da área de membros (domínio próprio). */
.bloco-dominio .dominio-atual{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:18px; }
.bloco-dominio .dominio-atual a{ font-weight:500; color:var(--accent-ink, var(--accent)); word-break:break-all; }
.bloco-dominio .linha-campo{ display:flex; gap:10px; }
.bloco-dominio .linha-campo input{ flex:1; min-width:0; }
.bloco-dominio .linha-campo .btn{ flex-shrink:0; min-height:48px; }
.bloco-dominio .dominio-estado{ display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
.bloco-dominio .dominio-estado p{ margin:3px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.5; }
.bloco-dominio .dominio-instrucao{ margin:6px 0 10px; font-size:14.5px; color:var(--ink-2); }
.bloco-dominio .tabela-dns td{ white-space:normal; }
.bloco-dominio .dns-valor{ font-family:var(--mono); font-size:13px; background:var(--sunken); padding:3px 7px; border-radius:6px; word-break:break-all; }
.bloco-dominio .dominio-passos{ list-style:none; margin:16px 0 8px; padding:0; display:grid; gap:8px; }
.bloco-dominio .dominio-passos li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--muted); }
.bloco-dominio .dominio-passos li.feito{ color:var(--ink); }
.bloco-dominio .dominio-passos .marca{ width:22px; height:22px; border-radius:50%; display:inline-grid; place-items:center; font-size:12px; background:var(--sunken); color:var(--muted); flex-shrink:0; }
.bloco-dominio .dominio-passos li.feito .marca{ background:var(--green-soft); color:var(--green-ink); }
.bloco-dominio .linha-acoes{ margin-top:14px; }
@media (max-width:560px){
  .bloco-dominio .linha-campo{ flex-direction:column; }
  .bloco-dominio .dominio-estado{ flex-direction:column; gap:6px; }
  .bloco-dominio .tabela-dns thead{ display:none; }
  .bloco-dominio .tabela-dns tr{ display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  .bloco-dominio .tabela-dns td{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:5px 14px; border:0; }
  .bloco-dominio .tabela-dns td::before{ content:attr(data-rotulo); width:44px; flex-shrink:0; font-size:12.5px; color:var(--muted); }
  .bloco-dominio .tabela-dns tbody tr:hover td{ background:none; }
}