/* =====================================================================
CCA-Aluno · Grine Design System (redesign 11/06/2026)
Papel-creme + verde institucional + dourado de autoridade.
Fraunces = títulos · Instrument Serif = display/acentos · Geist = UI ·
Geist Mono = eyebrows/labels/códigos.
Os NOMES de variável legados (--paper/--carbon/--gold/--ink/--line)
foram mantidos com valores novos pra não quebrar componentes antigos.
===================================================================== */
:root {
/* Paleta Grine — verdes */
--green-950: #0a1612;
--green-900: #0f2419;
--green-800: #143524;
--green-700: #1b4632;
--green-400: #4a8e6e;
--green-300: #7ab094;
--green-100: #dde9e2;
--green-50: #eef4ef;
/* Paleta Grine — dourados */
--gold-800: #785822;
--gold-700: #946d2c;
--gold-500: #c89a44;
--gold-400: #d6ae64;
--gold-300: #e3c489;
--gold-100: #f5ead4;
/* Status técnicos */
--status-emitido-bg: #dde9e2;
--status-emitido-fg: #1b4632;
--status-processo-bg: #f5ead4;
--status-processo-fg: #785822;
--status-falha-bg: #f4dcd0;
--status-falha-fg: #7a3520;
--status-rascunho-bg: #e6e7df;
--status-rascunho-fg: #565b52;
/* Tokens legados remapeados (modo claro) */
--paper: #f5f1e8;
--paper-deep: #ede8db;
--surface: #fbf8f0;
--carbon: var(--green-800);
--carbon-soft: var(--green-700);
--gold: var(--gold-700);
--gold-deep: var(--gold-800);
--gold-soft: var(--gold-300);
--gold-strong: var(--gold-800);
--ink: #1a201a;
--ink-2: #565b52;
--ink-3: #666961; /* AA 4.5 vs paper-deep (auditoria contraste 07/07) */
--ink-4: #9a9d92;
--line: #d8d1bf;
--line-soft: #e3ddc9;
--line-strong: #a89e80;
--success: #1b4632;
--error: #7a3520;
--shadow-soft: rgba(20, 30, 20, 0.05);
--shadow-strong: rgba(20, 30, 20, 0.18);
--card-shadow: 0 1px 0 rgba(20,30,20,0.04), 0 8px 24px -12px rgba(20,30,20,0.12);
/* Accent (CTA, foco) */
--accent: var(--green-800);
--accent-hover: var(--green-700);
--accent-fg: #f5f1e8;
--focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
/* Sistema tipográfico Grine */
--font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
--font-serif: "Fraunces", "Instrument Serif", Georgia, serif;
--font-display: "Instrument Serif", "Fraunces", Georgia, serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* Transições Grine */
--t-fast: 120ms cubic-bezier(.2,.6,.3,1);
--t-med: 220ms cubic-bezier(.2,.6,.3,1);
--t-slow: 380ms cubic-bezier(.2,.6,.3,1);
/* Ícones de sistema (mask + currentColor; traço 1.8, round caps) */
--ico-info: url('data:image/svg+xml;utf8,');
--ico-alert: url('data:image/svg+xml;utf8,');
--ico-check: url('data:image/svg+xml;utf8,');
--ico-lock: url('data:image/svg+xml;utf8,');
--ico-circle: url('data:image/svg+xml;utf8,');
--ico-medal: url('data:image/svg+xml;utf8,');
--ico-download: url('data:image/svg+xml;utf8,');
--ico-spark: url('data:image/svg+xml;utf8,');
--ico-terminal: url('data:image/svg+xml;utf8,');
--ico-plug: url('data:image/svg+xml;utf8,');
--ico-book: url('data:image/svg+xml;utf8,');
--ico-x: url('data:image/svg+xml;utf8,');
}
/* ── Dark mode (editorial, NAO frio default) ────────────────── */
[data-theme="dark"] {
--paper: #0a0c0b; /* quase-preto com leve verde (Grine dark) */
--paper-deep: #111311;
--surface: #111311;
--carbon: #e8e4d6; /* inverte (texto/headers viram papel) */
--carbon-soft: #d4d6cc;
--gold: var(--gold-400); /* mais brilhante p/ contraste WCAG */
--gold-deep: var(--gold-500);
--gold-soft: #2a2218;
--gold-strong: var(--gold-300);
--ink: #e8e4d6;
--ink-2: #9da89c;
--ink-3: #768076;
--ink-4: #4f574e;
--line: #2a342c;
--line-soft: #1e2620;
--line-strong: #3e4c40;
--success: #7ab094;
--error: #f4c4ac;
--shadow-soft: rgba(0, 0, 0, 0.4);
--shadow-strong: rgba(0, 0, 0, 0.6);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
--accent: #dab24e;
--accent-hover: #e8c264;
--accent-fg: #0a0c0b;
--status-emitido-bg: #1b4632;
--status-emitido-fg: #b5d3c3;
--status-processo-bg: #3a2c12;
--status-processo-fg: #ecd8b0;
--status-falha-bg: #3a1e15;
--status-falha-fg: #f4c4ac;
--status-rascunho-bg: #232925;
--status-rascunho-fg: #9da89c;
color-scheme: dark;
}
[data-mode="dark"] .alerta-info { color: var(--ink-2); }
[data-mode="dark"] .nps-btn-aula.on { color: var(--paper); }
[data-mode="dark"] .nps-btn.on { color: var(--paper); }
[data-mode="dark"] .material-pacote .icon { color: var(--paper); }
[data-mode="dark"] .toast-sub { color: var(--gold-300); }
[data-mode="dark"] .badge-admin { color: var(--paper); }
[data-mode="dark"] .toggle-visto.checked .marker { color: var(--paper); }
[data-mode="dark"] .kpi-online { background: linear-gradient(135deg, rgba(214, 174, 100,0.15), rgba(214, 174, 100,0.04)); }
/* ── Temas bônus (recompensas por progresso no plano de gamificação;
hoje a galeria com todos só aparece pro admin, pra revisar e ajustar).
Cada bloco remapeia os MESMOS tokens legados que o dark remapeia, então
toda a UI re-tematiza sozinha. ──────────────────────────────────────── */
/* Aurora — amanhecer quente (claro) */
[data-theme="aurora"] {
--paper: #fbf3ea; --paper-deep: #f3e6d7; --surface: #fffaf3;
--carbon: #4a2218; --carbon-soft: #6e3526;
--gold: #a85f2c; --gold-deep: #7d4620; --gold-soft: #f0dcc8; --gold-strong: #7d4620;
--ink: #4a2a1e; --ink-2: #7a5446; --ink-3: #7e6255; --ink-4: #c1a796;
--line: #ecd9c9; --line-soft: #f4e6d8; --line-strong: #cdab93;
--success: #2f6b3f; --error: #a3331f;
--shadow-soft: rgba(74,34,24,0.05); --shadow-strong: rgba(74,34,24,0.16);
--card-shadow: 0 1px 0 rgba(74,34,24,0.04), 0 8px 24px -12px rgba(74,34,24,0.14);
--accent: #b8501f; --accent-hover: #9c4015; --accent-fg: #fff7f0;
--status-emitido-bg: #e6ecd9; --status-emitido-fg: #2f6b3f;
--status-processo-bg: #f7e6cf; --status-processo-fg: #7d4620;
--status-falha-bg: #f7ddcf; --status-falha-fg: #8a3320;
--status-rascunho-bg: #efe6dc; --status-rascunho-fg: #6e5a4e;
color-scheme: light;
}
/* Linho — calmo frio (claro) */
[data-theme="linho"] {
--paper: #eef1f2; --paper-deep: #e3e8e7; --surface: #f8fafa;
--carbon: #16221f; --carbon-soft: #28403a;
--gold: #5d7a6a; --gold-deep: #46624f; --gold-soft: #d7e1dc; --gold-strong: #46624f;
--ink: #1f2d2a; --ink-2: #566460; --ink-3: #606966; --ink-4: #a6b0ac;
--line: #d4dbd9; --line-soft: #e2e8e6; --line-strong: #aeb8b4;
--success: #2f6b4a; --error: #9a3320;
--shadow-soft: rgba(20,30,28,0.05); --shadow-strong: rgba(20,30,28,0.16);
--card-shadow: 0 1px 0 rgba(20,30,28,0.04), 0 8px 24px -12px rgba(20,30,28,0.12);
--accent: #2f5d4d; --accent-hover: #244a3d; --accent-fg: #f6faf8;
--status-emitido-bg: #dde9e2; --status-emitido-fg: #2f5d4d;
--status-processo-bg: #e9e7d6; --status-processo-fg: #6a6a3c;
--status-falha-bg: #f0ddd5; --status-falha-fg: #8a3320;
--status-rascunho-bg: #e6eae8; --status-rascunho-fg: #566460;
color-scheme: light;
}
/* Âmbar — brilho de âmbar/whisky sobre quase-preto quente (escuro) */
[data-theme="ambar"] {
--paper: #120f0a; --paper-deep: #1a150e; --surface: #1e1810;
--carbon: #efe6d6; --carbon-soft: #d8c9af;
--gold: #bd9a52; --gold-deep: #c49a52; --gold-soft: #281f12; --gold-strong: #e8cf94;
--ink: #efe6d6; --ink-2: #b0a48f; --ink-3: #887e6f; --ink-4: #595045;
--line: #2c2418; --line-soft: #201810; --line-strong: #443827;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.45); --shadow-strong: rgba(10,6,2,0.65);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(10,6,2,0.65);
--accent: #dfa84a; --accent-hover: #ecb85a; --accent-fg: #120f0a;
--status-emitido-bg: #1f3322; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #3a2c12; --status-processo-fg: #ecca8e;
--status-falha-bg: #3a1e15; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #241c12; --status-rascunho-fg: #b0a48f;
color-scheme: dark;
}
/* Champanhe — dourado pálido e elegante sobre preto quente (escuro) */
[data-theme="champanhe"] {
--paper: #100e0a; --paper-deep: #181510; --surface: #1c1810;
--carbon: #f0e9da; --carbon-soft: #ddd2bb;
--gold: #b09a64; --gold-deep: #c7b078; --gold-soft: #221d12; --gold-strong: #ece0c0;
--ink: #f0e9da; --ink-2: #b5ac96; --ink-3: #877e6c; --ink-4: #58513f;
--line: #2a2418; --line-soft: #1e1910; --line-strong: #423a28;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.45); --shadow-strong: rgba(8,6,2,0.65);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(8,6,2,0.65);
--accent: #e4ce93; --accent-hover: #eedba8; --accent-fg: #100e0a;
--status-emitido-bg: #1f3322; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #3a2e14; --status-processo-fg: #ecd29a;
--status-falha-bg: #3a1e15; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #241e12; --status-rascunho-fg: #b5ac96;
color-scheme: dark;
}
/* Ouro Velho — prestígio, dourado sobre quase-preto (escuro) */
[data-theme="ouro-velho"] {
--paper: #0b0a06; --paper-deep: #100e09; --surface: #14110a;
--carbon: #f3e9d2; --carbon-soft: #e0cfa6;
--gold: #e3c489; --gold-deep: #d6ae64; --gold-soft: #241d10; --gold-strong: #efd9a8;
--ink: #f1e7d1; --ink-2: #b6a479; --ink-3: #8a7c58; --ink-4: #5f553c;
--line: #2a2415; --line-soft: #1e1a0f; --line-strong: #423921;
--success: #b9c47a; --error: #f0b08c;
--shadow-soft: rgba(0,0,0,0.45); --shadow-strong: rgba(0,0,0,0.7);
--card-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 8px 24px -12px rgba(0,0,0,0.7);
--accent: #d6ae64; --accent-hover: #e3c489; --accent-fg: #0b0a06;
--status-emitido-bg: #233316; --status-emitido-fg: #cfdca0;
--status-processo-bg: #3a2e12; --status-processo-fg: #ecd29a;
--status-falha-bg: #3a2414; --status-falha-fg: #f4c8ac;
--status-rascunho-bg: #221d12; --status-rascunho-fg: #b6a479;
color-scheme: dark;
}
/* Os ajustes de contraste da família escura agora vivem nas regras
[data-mode="dark"] acima (setado no applyTheme), então qualquer tema
escuro novo herda tudo só por estar no DARK_THEMES do app.js. */
/* ── Mais temas bônus (lote 2) ─────────────────────────────────── */
/* Manuscrito à Luz de Velas — marfim de livro velho + filete de terracota (claro) */
[data-theme="manuscrito"] {
--paper: #f2eee4; --paper-deep: #e8e2d4; --surface: #fbf8f1;
--carbon: #26221b; --carbon-soft: #403a30;
--gold: #6b6648; --gold-deep: #565236; --gold-soft: #ece6d2; --gold-strong: #565236;
--ink: #26221b; --ink-2: #5c564b; --ink-3: #6a6459; --ink-4: #a8a08e;
--line: #ded7c6; --line-soft: #ece5d6; --line-strong: #bfb6a0;
--success: #3b6d2e; --error: #9a3318;
--shadow-soft: rgba(60,50,30,0.05); --shadow-strong: rgba(60,50,30,0.16);
--card-shadow: 0 1px 0 rgba(60,50,30,0.04), 0 8px 24px -12px rgba(60,50,30,0.14);
--accent: #a23c12; --accent-hover: #8a3210; --accent-fg: #fbf8f1;
--status-emitido-bg: #e3e9d6; --status-emitido-fg: #3b6d2e;
--status-processo-bg: #f1e6cf; --status-processo-fg: #565236;
--status-falha-bg: #f3ddce; --status-falha-fg: #8a3218;
--status-rascunho-bg: #ece6d8; --status-rascunho-fg: #5c564b;
color-scheme: light;
}
/* Névoa — neutro frio (claro) */
[data-theme="nevoa"] {
--paper: #eef0f2; --paper-deep: #e2e5e9; --surface: #f9fafb;
--carbon: #1b1f24; --carbon-soft: #333a42;
--gold: #5a6675; --gold-deep: #434d59; --gold-soft: #dde1e6; --gold-strong: #434d59;
--ink: #1f2329; --ink-2: #535b65; --ink-3: #60676e; --ink-4: #a7adb5;
--line: #d6dadf; --line-soft: #e4e7eb; --line-strong: #b0b6bd;
--success: #2f6b4a; --error: #a3331f;
--shadow-soft: rgba(20,25,32,0.05); --shadow-strong: rgba(20,25,32,0.16);
--card-shadow: 0 1px 0 rgba(20,25,32,0.04), 0 8px 24px -12px rgba(20,25,32,0.12);
--accent: #3a4a5a; --accent-hover: #2c3a47; --accent-fg: #f9fafb;
--status-emitido-bg: #dde9e2; --status-emitido-fg: #2f6b4a;
--status-processo-bg: #e8e6da; --status-processo-fg: #6a6650;
--status-falha-bg: #f0ddd5; --status-falha-fg: #8a3320;
--status-rascunho-bg: #e6e9ec; --status-rascunho-fg: #535b65;
color-scheme: light;
}
/* Lavanda — violeta suave (claro) */
[data-theme="lavanda"] {
--paper: #f1eef7; --paper-deep: #e6e0f1; --surface: #faf8fd;
--carbon: #281f44; --carbon-soft: #3e335f;
--gold: #7a5cc0; --gold-deep: #5b4aa8; --gold-soft: #e3dcf3; --gold-strong: #5b4aa8;
--ink: #2a2440; --ink-2: #5a5378; --ink-3: #67617d; --ink-4: #aaa4c4;
--line: #ddd5ed; --line-soft: #e9e3f4; --line-strong: #b8aedb;
--success: #2f6b4a; --error: #a3331f;
--shadow-soft: rgba(40,30,70,0.05); --shadow-strong: rgba(40,30,70,0.16);
--card-shadow: 0 1px 0 rgba(40,30,70,0.04), 0 8px 24px -12px rgba(40,30,70,0.13);
--accent: #5b4aa8; --accent-hover: #483a8c; --accent-fg: #faf8fd;
--status-emitido-bg: #dde9e2; --status-emitido-fg: #2f6b4a;
--status-processo-bg: #ece4f3; --status-processo-fg: #5b4aa8;
--status-falha-bg: #f1ddd5; --status-falha-fg: #8a3320;
--status-rascunho-bg: #e8e4f0; --status-rascunho-fg: #5a5378;
color-scheme: light;
}
/* Conhaque — couro e conhaque à noite: espresso quente + âmbar-mel (escuro) */
[data-theme="conhaque"] {
--paper: #17110d; --paper-deep: #1f1712; --surface: #251c14;
--carbon: #ede2d2; --carbon-soft: #d6c6b2;
--gold: #c4a05c; --gold-deep: #c8a45e; --gold-soft: #2a2014; --gold-strong: #e6cd96;
--ink: #ede2d2; --ink-2: #b3a48f; --ink-3: #8b8071; --ink-4: #5a5246;
--line: #30241a; --line-soft: #241a12; --line-strong: #463526;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.45); --shadow-strong: rgba(12,6,2,0.65);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(12,6,2,0.65);
--accent: #d9a24e; --accent-hover: #e6b260; --accent-fg: #17110d;
--status-emitido-bg: #1f3322; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #3a2c14; --status-processo-fg: #ecca8e;
--status-falha-bg: #3a1e15; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #261d14; --status-rascunho-fg: #b3a48f;
color-scheme: dark;
}
/* Risógrafo — papel jornal + coral fora de registro + verde-petróleo (claro) */
[data-theme="risografo"] {
--paper: #ece6d8; --paper-deep: #e0d9c8; --surface: #f7f2e8;
--carbon: #1c2b2a; --carbon-soft: #33403e;
--gold: #2f6e5f; --gold-deep: #255849; --gold-soft: #dfeae3; --gold-strong: #255849;
--ink: #1c2b2a; --ink-2: #4c5b59; --ink-3: #57615f; --ink-4: #9aa5a2;
--line: #d5ccb8; --line-soft: #e6ddcb; --line-strong: #bcb29a;
--success: #2f6b4a; --error: #b03a1f;
--shadow-soft: rgba(40,45,40,0.05); --shadow-strong: rgba(40,45,40,0.16);
--card-shadow: 0 1px 0 rgba(40,45,40,0.04), 0 8px 24px -12px rgba(40,45,40,0.14);
--accent: #c0401c; --accent-hover: #a83716; --accent-fg: #f7f2e8;
--status-emitido-bg: #dde9df; --status-emitido-fg: #2f6b4a;
--status-processo-bg: #e9e7d2; --status-processo-fg: #5a5a30;
--status-falha-bg: #f1ddd2; --status-falha-fg: #a83a1f;
--status-rascunho-bg: #e7e1d2; --status-rascunho-fg: #4c5b59;
color-scheme: light;
}
/* Bronze Patinado — bronze envelhecido sob oliva escura (escuro) */
[data-theme="bronze"] {
--paper: #14150d; --paper-deep: #1b1d11; --surface: #1f2113;
--carbon: #e9e6d2; --carbon-soft: #d2cdb2;
--gold: #b0a85e; --gold-deep: #b8ac5e; --gold-soft: #22240f; --gold-strong: #d8cf8e;
--ink: #e9e6d2; --ink-2: #aab09a; --ink-3: #82866f; --ink-4: #545843;
--line: #2a2c19; --line-soft: #1f2112; --line-strong: #43472c;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.45); --shadow-strong: rgba(8,9,4,0.65);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(8,9,4,0.65);
--accent: #bfa14e; --accent-hover: #d0b25e; --accent-fg: #14150d;
--status-emitido-bg: #233516; --status-emitido-fg: #cfdca0;
--status-processo-bg: #34300f; --status-processo-fg: #e4d68e;
--status-falha-bg: #34201a; --status-falha-fg: #f0c0a8;
--status-rascunho-bg: #22240f; --status-rascunho-fg: #aab09a;
color-scheme: dark;
}
/* Vitrine — a paleta da landing /partners: creme editorial + preto + ouro (claro) */
[data-theme="vitrine"] {
--paper: #faf8f3; --paper-deep: #f3efe6; --surface: #fffdf8;
--carbon: #0a0a0a; --carbon-soft: #1a1a1a;
--gold: #a07a3f; --gold-deep: #7e5f31; --gold-soft: #d9c8a3; --gold-strong: #6a4f28;
--ink: #1a1a1a; --ink-2: #3a3a3a; --ink-3: #6b6b6b; --ink-4: #9a9a9a;
--line: #d9d3c5; --line-soft: #ebe6da; --line-strong: #c4bba3;
--success: #3b6d2e; --error: #9a3318;
--shadow-soft: rgba(20,16,8,0.05); --shadow-strong: rgba(20,16,8,0.14);
--card-shadow: 0 1px 0 rgba(20,16,8,0.03), 0 8px 24px -12px rgba(20,16,8,0.12);
--accent: #8a6733; --accent-hover: #6f5228; --accent-fg: #ffffff;
--status-emitido-bg: #e3e9d6; --status-emitido-fg: #3b6d2e;
--status-processo-bg: #f1e7cf; --status-processo-fg: #7e5f31;
--status-falha-bg: #f3ddce; --status-falha-fg: #9a3318;
--status-rascunho-bg: #ece7da; --status-rascunho-fg: #6b6b6b;
color-scheme: light;
}
/* Vitrine Noturna — a /partners ao anoitecer: carbono quase-preto + ouro antigo + creme (escuro) */
[data-theme="vitrine-noturna"] {
--paper: #0c0a07; --paper-deep: #12100b; --surface: #18140d;
--carbon: #f3ede0; --carbon-soft: #ddd4c2;
--gold: #c2a05a; --gold-deep: #c8a45e; --gold-soft: #2a2014; --gold-strong: #e0cda0;
--ink: #f3ede0; --ink-2: #b6ab95; --ink-3: #847b68; --ink-4: #58513f;
--line: #2a241a; --line-soft: #1d1810; --line-strong: #423927;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.5); --shadow-strong: rgba(8,6,2,0.7);
--card-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -12px rgba(8,6,2,0.7);
--accent: #c2a05a; --accent-hover: #d0b06a; --accent-fg: #0c0a07;
--status-emitido-bg: #1f3322; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #3a2e14; --status-processo-fg: #e0c98e;
--status-falha-bg: #3a1e15; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #221d12; --status-rascunho-fg: #b6ab95;
color-scheme: dark;
}
/* Ônix — Vitrine Noturna em breu total: fundo PRETO puro + ouro antigo + creme (escuro) */
[data-theme="onix"] {
--paper: #000000; --paper-deep: #060504; --surface: #110d09;
--carbon: #f3ede0; --carbon-soft: #ddd4c2;
--gold: #c2a05a; --gold-deep: #c8a45e; --gold-soft: #221a0e; --gold-strong: #e0cda0;
--ink: #f3ede0; --ink-2: #b6ab95; --ink-3: #847b68; --ink-4: #58513f;
--line: #28221a; --line-soft: #161109; --line-strong: #423927;
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.6); --shadow-strong: rgba(0,0,0,0.8);
--card-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 8px 24px -12px rgba(0,0,0,0.8);
--accent: #c2a05a; --accent-hover: #d0b06a; --accent-fg: #000000;
--status-emitido-bg: #14281a; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #2e2410; --status-processo-fg: #e0c98e;
--status-falha-bg: #2e1610; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #161109; --status-rascunho-fg: #b6ab95;
color-scheme: dark;
}
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--paper);
font-weight: 400;
line-height: 1.5;
}
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.eyebrow {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-deep);
}
.label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 5.5vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3.5vw, 32px); line-height: 1.18; letter-spacing: -0.015em; margin: 0; }
.h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; line-height: 1.4; margin: 0; }
.lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); font-weight: 400; }
@media (max-width: 768px) { .lead { font-size: 16px; } }
/* Gutters fluidos: ~22px no celular, cresce ate 48px em telas grandes.
padding-inline isola o horizontal pra que .section (padding-block) nao zere. */
.container { max-width: 920px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 48px); }
.container-narrow { max-width: 560px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 48px); }
.container-wide { max-width: 1240px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 48px); }
/* So vertical: nao toca o padding-inline herdado do container (corrige texto colado na borda) */
.section { padding-block: 72px; }
@media (max-width: 768px) { .section { padding-block: 40px; } }
.rule { border: none; border-top: 1px solid var(--line); margin: 32px 0; }
/* ── Cards ────────────────────────────────────────────────── */
.card { background: var(--paper); border: 1px solid var(--line); padding: 24px; transition: border-color .15s ease; }
.card-frame { background: var(--paper); border: 1px solid var(--line); padding: 28px; position: relative; }
.card-frame::before { content: ""; position: absolute; top: -1px; left: -1px; width: 24px; height: 1px; background: var(--gold); }
.card-frame::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 24px; background: var(--gold); }
.card-deep { background: var(--paper-deep); border: 1px solid var(--line); padding: 24px; }
.card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.card-link:hover { border-color: var(--gold); }
.card-link:hover .card-titulo { color: var(--gold-deep); }
/* ── Botoes ───────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 500; padding: 12px 24px; min-height: 48px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-fg); font-size: 15px; letter-spacing: 0.01em; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); text-decoration: none; border-radius: 6px; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Primário da plataforma (classe legada .btn-gold = CTA principal, agora accent) */
.btn-gold { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 500; min-height: 52px; font-size: 15.5px; }
.btn-gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-gold:disabled { opacity: .6; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--paper-deep); color: var(--ink); border-color: var(--ink-3); }
.btn-full { display: flex; width: 100%; }
.btn-link { background: none; border: none; color: var(--ink-2); cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); }
.btn-link:hover { color: var(--ink); }
/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0.01em; font-weight: 500; }
.form-group input,
.form-group textarea {
width: 100%;
min-height: 56px;
padding: 15px 16px;
font-family: var(--font-sans);
font-size: 16px; /* >=16px evita zoom automático no iOS */
background: var(--paper);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink);
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-4); }
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
.form-group input.codigo {
text-align: center;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 500;
font-size: 26px;
letter-spacing: 0.35em;
padding: 14px 8px 14px calc(8px + 0.35em);
}
.form-hint { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.form-hint::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat; }
.form-preview { margin-top: 10px; padding: 10px 14px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
[data-mode="dark"] .form-preview { background: var(--paper-deep); border-color: var(--line); }
.form-preview-label { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.form-preview strong { font-size: 15px; color: var(--success); font-weight: 600; }
.login-fallback { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); text-align: center; }
.muted-tiny { font-size: 12px; color: var(--ink-3); margin: 0 0 8px; }
.btn-full-link { display: block; width: 100%; text-align: center; padding: 8px; font-size: 13px; }
/* Alertas: sempre cor + ícone + texto (nunca só cor) */
.alerta { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; border: 1px solid; border-radius: 6px; }
.alerta::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; background: currentColor; -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat; }
.alerta-erro { background: var(--status-falha-bg); border-color: color-mix(in srgb, var(--status-falha-fg) 25%, transparent); color: var(--status-falha-fg); }
.alerta-erro::before { -webkit-mask-image: var(--ico-alert); mask-image: var(--ico-alert); }
.alerta-info { background: var(--paper-deep); border-color: var(--line); color: var(--ink-2); }
.alerta-sucesso { background: var(--status-emitido-bg); border-color: color-mix(in srgb, var(--status-emitido-fg) 25%, transparent); color: var(--status-emitido-fg); }
.alerta-sucesso::before { -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check); }
/* Links dentro de alertas e o estado de erro usam o dourado do tema, nao o azul-padrao do browser */
.alerta a, .link-tema { color: var(--gold-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.alerta a:hover, .link-tema:hover { color: var(--gold); }
/* ── Header ───────────────────────────────────────────────── */
.app-header {
background: var(--carbon);
color: var(--paper);
padding: 16px 0;
border-bottom: 1px solid rgba(217, 200, 163, 0.15);
}
.app-header .container-wide { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-header .brand {
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-soft);
text-decoration: none;
}
.app-header .brand:hover { color: var(--paper); }
.app-header .nav { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-4); }
.app-header .nav a, .app-header .nav button { color: var(--gold-soft); background: none; border: none; cursor: pointer; font-size: 13px; text-decoration: none; font-family: inherit; padding: 0; }
.app-header .nav a:hover, .app-header .nav button:hover { color: var(--paper); }
/* ── Login (index.html) ──────────────────────────────────── */
.login-wrap {
min-height: 100vh;
min-height: 100dvh;
background: var(--paper);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
position: relative;
}
/* Fundo: formas orgânicas em cores chapadas do sistema (Grine) */
.login-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.login-bg .blob-verde { position: absolute; width: 560px; height: 520px; left: -180px; top: -140px; background: var(--green-50); border-radius: 42% 58% 55% 45% / 50% 44% 56% 50%; }
.login-bg .blob-ouro { position: absolute; width: 460px; height: 430px; right: -150px; bottom: -160px; background: var(--gold-100); opacity: .55; border-radius: 58% 42% 45% 55% / 45% 56% 44% 55%; }
.login-bg .anel { position: absolute; width: 280px; height: 280px; right: 8%; top: -90px; border: 1px dashed var(--line-strong); opacity: .5; border-radius: 50%; }
[data-mode="dark"] .login-bg .blob-verde { background: #11181a; opacity: .8; }
[data-mode="dark"] .login-bg .blob-ouro { background: var(--gold-soft); opacity: .45; }
.login-card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: 6px;
box-shadow: var(--card-shadow);
padding: 40px 36px;
max-width: 440px;
width: 100%;
position: relative;
}
@media (max-width: 720px) {
.login-card { padding: 28px 24px; }
}
/* Marca no topo do cartão */
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand img { width: 44px; height: 44px; border-radius: 6px; flex: 0 0 auto; display: block; }
.login-brand .wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); line-height: 1; }
.login-brand .wordmark span { color: var(--ink-2); }
.login-brand .sub { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
/* Indicador de progresso do fluxo (3 segmentos, sem texto novo) */
.login-steps { display: flex; gap: 6px; margin: 10px 0 24px; }
.login-steps span { height: 3px; flex: 1; border-radius: 999px; background: var(--line); transition: background var(--t-med); }
.login-steps span.feito { background: var(--green-300); }
.login-steps span.atual { background: var(--accent); }
.login-card .eyebrow { margin-bottom: 8px; }
.login-card .h2 { margin-bottom: 12px; }
.login-card .lead { margin-bottom: 24px; font-size: 15px; color: var(--ink-2); }
/* Rodapé tracejado do cartão */
.login-foot { margin-top: 28px; padding-top: 14px; border-top: 1px dashed var(--line-strong); display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.timer { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 14px; }
.timer.expirado { color: var(--status-falha-fg); }
/* Boas-vindas: painel verde full-viewport (toma a tela quando deixa de ser .hidden) */
#tela-sucesso:not(.hidden) {
position: fixed; inset: 0; z-index: 100;
background: var(--green-900);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 24px; text-align: center; overflow: hidden;
}
#tela-sucesso::before {
content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none;
background-image:
linear-gradient(rgba(245,234,212,.4) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,234,212,.4) 1px, transparent 1px);
background-size: 40px 40px;
}
#tela-sucesso::after {
content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px;
border-radius: 50%; pointer-events: none;
background: radial-gradient(circle, rgba(200,154,68,.2), transparent 70%);
}
#tela-sucesso .eyebrow { position: relative; color: var(--gold-300); margin-bottom: 18px; }
#tela-sucesso .h2 {
position: relative; font-family: var(--font-display); font-weight: 400;
font-size: clamp(30px, 6vw, 46px); line-height: 1.1; letter-spacing: -0.02em;
color: #f5f1e8; text-wrap: balance; max-width: 560px;
}
#tela-sucesso .h2 span { font-style: italic; color: var(--gold-300); }
#tela-sucesso .lead { position: relative; color: rgba(245,241,232,.75); margin-top: 12px; margin-bottom: 0; }
#tela-sucesso .welcome-spinner {
position: relative; margin-top: 32px; width: 18px; height: 18px;
border: 1.5px solid rgba(245,234,212,.6); border-top-color: transparent;
border-radius: 50%; animation: spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
#tela-sucesso .welcome-spinner { animation-duration: 2s; }
}
/* ── Trilha (trilha.html) ────────────────────────────────── */
/* Linha de resumo: tracejado em cima, info mono + barra de progresso */
.trilha-resumo { margin: 20px 0 28px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.progresso-bar { background: var(--line-soft); height: 4px; width: 100%; position: relative; border-radius: 999px; overflow: hidden; }
.progresso-bar .fill { background: var(--green-400); height: 100%; transition: width .3s ease; border-radius: 999px; }
[data-mode="dark"] .progresso-bar .fill { background: var(--green-300); }
.progresso-info { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
/* Lista de módulos: linhas com separador tracejado; o atual vira cartão */
.modulo-card { padding: 18px 4px; border: 0; border-bottom: 1px dashed var(--line); background: transparent; margin: 0; display: flex; gap: 16px; align-items: center; text-decoration: none; color: inherit; transition: background var(--t-fast); cursor: pointer; }
.modulo-card:hover .titulo { color: var(--gold-deep); }
.modulo-card .num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-3); line-height: 1; letter-spacing: 0.02em; width: 26px; flex: 0 0 auto; }
.modulo-card .mod-main { flex: 1; min-width: 0; }
.modulo-card .titulo { font-family: var(--font-serif); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; transition: color var(--t-fast); }
.modulo-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.modulo-card .mod-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
/* Ícones de estado (mask + currentColor) */
.modulo-card .status { width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; color: var(--ink-4); -webkit-mask: var(--ico-circle) center / contain no-repeat; mask: var(--ico-circle) center / contain no-repeat; }
.modulo-card .status.visto { color: var(--status-emitido-fg); -webkit-mask-image: var(--ico-check); mask-image: var(--ico-check); }
.modulo-card .status.bloqueado { color: var(--ink-4); width: 16px; height: 16px; -webkit-mask-image: var(--ico-lock); mask-image: var(--ico-lock); }
/* Badges de estado (mono, uppercase) */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 4px; white-space: nowrap; }
.badge-emitido { background: var(--status-emitido-bg); color: var(--status-emitido-fg); }
.badge-processo { background: var(--status-processo-bg); color: var(--status-processo-fg); }
.badge-rascunho { background: var(--status-rascunho-bg); color: var(--status-rascunho-fg); }
[data-mode="dark"] .badge-rascunho { background: #232925; color: #9da89c; }
/* opacity de grupo derruba contraste do cadeado/badge -> dim por cor, nao por opacity do pai */
.modulo-card.sem-video { cursor: not-allowed; } /* dim por COR (titulo/num ink-2), nao opacity de grupo */
.modulo-card.sem-video .titulo { color: var(--ink-2); }
.modulo-card.sem-video:hover .titulo { color: inherit; }
/* badge "Em breve" em temas claros quentes: status-rascunho-fg claro demais -> ink-2 (theme-aware) */
[data-theme="vitrine"] .badge-rascunho, [data-theme="risografo"] .badge-rascunho { color: var(--ink-2); }
/* Módulo atual: cartão destacado com CTA */
.modulo-card.proxima { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin: 6px 0; }
.modulo-card.proxima .num { color: var(--gold); }
.modulo-card.proxima:hover { border-color: var(--line-strong); }
.modulo-card .mod-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); border-radius: 6px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background var(--t-fast); }
.modulo-card.proxima:hover .mod-cta { background: var(--accent-hover); }
@media (max-width: 600px) {
.modulo-card .badge { display: none; } /* fica o ícone */
.modulo-card .mod-cta { padding: 10px 14px; }
}
/* Coluna de leitura da trilha + rodapé tracejado */
.trilha-page { max-width: 720px; }
.trilha-foot { margin-top: 48px; padding-top: 16px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
/* ── Aula (aula.html) ────────────────────────────────────── */
.breadcrumb { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
.breadcrumb a { color: var(--gold-deep); text-decoration: none; }
.breadcrumb a:hover { color: var(--carbon); }
/* bg fixo escuro (NAO var(--carbon), que vira creme no dark e dava flash branco enquanto o YouTube carrega) */
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0a0a; margin-bottom: 32px; border-radius: 12px; overflow: hidden; }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; object-fit: contain; }
/* ── Painel "Momentos da aula" (capitulos clicaveis) ───────────────── */
.momentos { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.momentos-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; background: var(--paper-deep); border: 0; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--font-sans); transition: background .15s ease; }
.momentos-head:hover { background: rgba(148, 109, 44, 0.06); }
.momentos-head .ic { color: var(--gold); flex: 0 0 auto; display: flex; }
.momentos-head .ttl { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.momentos-head .cnt { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); margin-left: auto; }
.momentos-head .chev { transition: transform .2s ease; color: var(--ink-3); display: flex; }
.momentos[data-open="false"] .chev { transform: rotate(-90deg); }
.momentos[data-open="false"] .momentos-body { display: none; }
.momentos-body { max-height: 380px; overflow-y: auto; padding: 6px; }
.momento { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 11px 12px; background: transparent; border: 0; border-radius: 10px; cursor: pointer; text-align: left; color: var(--ink-2); font-family: var(--font-sans); transition: background .12s ease, color .12s ease; }
.momento:hover { background: rgba(148, 109, 44, 0.07); color: var(--ink); }
.momento .ts { flex: 0 0 auto; font-family: var(--font-sans); font-size: 12.5px; color: var(--gold-deep); background: rgba(148, 109, 44, 0.12); padding: 3px 8px; border-radius: 6px; min-width: 58px; text-align: center; margin-top: 1px; }
.momento .lbl { font-size: 14.5px; line-height: 1.45; }
.momento.active { background: rgba(148, 109, 44, 0.16); color: var(--ink); }
.momento.active .ts { background: var(--gold); color: #1a1a1a; }
.momento.active .lbl { font-weight: 600; }
[data-mode="dark"] .momento.active .ts { color: #14110d; }
/* ── Resumo da aula (retratil) ─────────────────────────────────────── */
.resumo-fold { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
.resumo-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; background: var(--paper-deep); border: 0; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--font-sans); transition: background .15s ease; }
.resumo-head:hover { background: rgba(148, 109, 44, 0.06); }
.resumo-head .ic { color: var(--gold); flex: 0 0 auto; display: flex; }
.resumo-head .ttl { font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.resumo-head .chev { margin-left: auto; transition: transform .2s ease; color: var(--ink-3); display: flex; }
.resumo-fold[data-open="false"] .chev { transform: rotate(-90deg); }
.resumo-fold[data-open="false"] .resumo-body { display: none; }
.resumo-body { padding: 6px; }
.resumo-body .aula-resumo { border-left: 0; background: transparent; padding: 14px 16px; }
/* ── Materiais da aula (dentro do fold) ────────────────────────────── */
.materiais-body { padding: 8px 10px 4px; }
.materiais-body .material-item { border-radius: 10px; }
.material-pacote { border-color: var(--gold); background: rgba(148, 109, 44, 0.06); }
.material-pacote .icon { background: var(--gold); color: #fff; }
.material-pacote:hover { background: rgba(148, 109, 44, 0.12); }
.material-howto { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper-deep); }
.material-howto .mh-title { margin: 0 0 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.material-howto ol { margin: 0; padding-left: 20px; }
.material-howto li { margin: 6px 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.material-howto li::marker { color: var(--gold-deep); }
.material-howto code { font-family: var(--font-mono); font-size: 12.5px; background: rgba(148, 109, 44, 0.12); color: var(--gold-deep); padding: 1px 5px; border-radius: 4px; }
.material-howto strong { color: var(--ink); font-weight: 600; }
.aula-section { margin-bottom: 40px; }
.aula-section .label { margin-bottom: 14px; }
.toggle-visto {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 24px;
background: var(--paper-deep);
border: 1px solid var(--line);
cursor: pointer;
font-size: 15px;
transition: all .15s ease;
font-family: var(--font-sans);
width: 100%;
text-align: left;
}
.toggle-visto:hover { border-color: var(--gold); }
.toggle-visto.checked { background: rgba(148, 109, 44, .08); border-color: var(--gold); color: var(--ink); }
.toggle-visto .marker { width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; flex-shrink: 0; }
.toggle-visto.checked .marker { border-color: var(--gold-deep); background: var(--gold); color: #fff; }
.toggle-visto.checked .marker::after { content: "✓"; font-size: 13px; font-weight: 700; }
.material-item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); margin-bottom: 8px; text-decoration: none; color: var(--ink); background: var(--paper); transition: all .15s ease; }
.material-item:hover { border-color: var(--gold); background: var(--paper-deep); }
.material-item .icon { font-family: var(--font-sans); font-size: 11px; color: var(--gold-deep); padding: 4px 8px; background: rgba(148, 109, 44, .1); letter-spacing: 0.06em; text-transform: uppercase; }
.material-item .nome { flex: 1; font-size: 15px; }
.comentario-form textarea {
width: 100%;
box-sizing: border-box;
min-height: 104px;
padding: 14px 16px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--paper-deep);
border: 1px solid var(--line);
border-radius: 12px;
resize: vertical;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.comentario-form textarea::placeholder { color: var(--ink-4); opacity: 1; }
.comentario-form textarea:hover { border-color: var(--gold-soft); }
.comentario-form textarea:focus {
outline: none;
background: var(--paper);
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(148, 109, 44, 0.14);
}
[data-mode="dark"] .comentario-form textarea:focus { box-shadow: 0 0 0 3px rgba(214, 174, 100, 0.18); }
.comentario-form .ctrl { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; gap: 16px; }
.comentario-form .contagem { font-size: 12px; color: var(--ink-4); font-family: var(--font-sans); letter-spacing: 0.03em; }
.comentario-form .contagem.warn { color: var(--error); }
.comentario-form .ctrl .btn { border-radius: 10px; padding: 11px 24px; }
/* ── Threads de comentário (top-level + replies admin) ─────────────── */
.thread { border-bottom: 1px solid var(--line-soft); padding-bottom: 4px; }
.thread:last-child { border-bottom: none; }
.thread-replies { margin-left: 28px; border-left: 2px solid var(--line-soft); padding-left: 18px; margin-top: 4px; margin-bottom: 8px; }
.comentario-reply { padding: 12px 0; }
.comentario-admin .meta .autor { color: var(--gold-deep); }
.comentario-admin.comentario-reply { background: rgba(148, 109, 44, 0.04); padding: 12px 14px; margin: 4px 0; }
.thread-replies .comentario-admin { border-left: 2px solid var(--gold); padding-left: 12px; }
.badge-admin {
display: inline-block;
margin-left: 6px;
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--gold);
color: #fff;
padding: 2px 7px;
border-radius: 2px;
font-weight: 600;
vertical-align: 1px;
}
.reply-compose { padding: 12px 0 4px; }
.reply-textarea {
width: 100%; min-height: 70px; resize: vertical;
font-family: var(--font-sans); font-size: 14.5px;
padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
background: var(--paper); color: var(--ink); box-sizing: border-box; line-height: 1.5;
transition: border-color .15s ease, box-shadow .15s ease;
}
.reply-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(148, 109, 44, 0.12); }
.reply-actions { display: flex; gap: 12px; justify-content: flex-end; align-items: center; margin-top: 8px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.comentario { padding: 16px 0; }
.thread > .comentario { border-bottom: none; }
.comentario.em-edicao { background: var(--paper-deep); padding: 16px; border-radius: 4px; border-bottom: none; margin: 8px 0; }
.comentario .meta { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.comentario .meta .autor { color: var(--gold-deep); font-weight: 500; }
.comentario .meta .editado-tag { color: var(--ink-4); font-size: 10px; margin-left: 6px; text-transform: none; letter-spacing: 0.04em; font-weight: 400; cursor: help; }
.comentario .texto { font-size: 15px; color: var(--ink); line-height: 1.55; white-space: pre-wrap; }
.comentario-acoes { margin-top: 8px; display: flex; gap: 14px; }
.comentario-acoes.hidden { display: none; }
/* padding + margin negativa = alvo de toque ~40px sem mexer no layout visual */
.link-acao { background: none; border: none; padding: 10px 8px; margin: -10px -8px; font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); cursor: pointer; letter-spacing: 0.02em; text-decoration: none; border-bottom: 1px dashed transparent; transition: all .15s ease; }
.link-acao:hover { color: var(--gold-deep); border-bottom-color: var(--gold-soft); }
.link-acao-warn:hover { color: #a02f2f; border-bottom-color: #d8a1a1; }
.link-acao-strong { color: var(--gold-deep); font-weight: 500; }
.link-acao-strong:hover { color: var(--carbon); }
.edit-textarea { width: 100%; min-height: 100px; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; resize: vertical; box-sizing: border-box; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; }
.edit-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(148, 109, 44, 0.12); }
.edit-acoes { display: flex; gap: 14px; justify-content: flex-end; margin-top: 10px; }
.aula-nav { display: flex; justify-content: space-between; gap: 16px; padding-top: 32px; border-top: 1px solid var(--line); margin-top: 40px; }
.aula-nav a { font-family: var(--font-sans); font-size: 12px; color: var(--gold-deep); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.aula-nav a:hover { color: var(--carbon); }
.aula-nav a.disabled { color: var(--ink-4); pointer-events: none; }
/* ── Loading + utility ───────────────────────────────────── */
.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--paper); border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }
.text-center { text-align: center; }
.muted { color: var(--ink-3); font-size: 13px; }
/* ── Rating modal (pos-marcar-como-assistido) ─────────────── */
.rating-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(3px); z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rating-overlay.aberto { animation: fadeIn .2s ease; }
.rating-card { background: var(--paper); border: 1px solid var(--line); max-width: 480px; width: 100%; padding: 32px 28px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); }
.rating-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 32px; height: 1px; background: var(--gold); }
.rating-card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 32px; background: var(--gold); }
.rating-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 26px; color: var(--ink-3); cursor: pointer; line-height: 1; padding: 0; }
.rating-close:hover { color: var(--carbon); }
.stars-row { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
.star-btn { background: none; border: none; font-size: 38px; cursor: pointer; color: var(--ink-3); padding: 4px 6px; transition: transform .1s ease, color .15s ease; line-height: 1; }
.star-btn:hover { transform: scale(1.15); color: var(--gold); }
.star-btn.on { color: var(--gold); }
.rating-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Check-in card na trilha ──────────────────────────────── */
.check-in-card { display: block; background: var(--gold-100); border: 1px solid var(--gold-300); border-radius: 6px; padding: 22px 24px; margin-bottom: 28px; text-decoration: none; color: var(--ink); position: relative; transition: border-color var(--t-fast); }
.check-in-card:hover { border-color: var(--gold); }
[data-mode="dark"] .check-in-card { background: var(--gold-soft); border-color: #3a2c12; }
.check-in-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--gold-deep); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; font-weight: 500; }
.check-in-titulo { font-family: var(--font-serif); font-size: 24px; font-weight: 500; color: var(--ink); margin-bottom: 4px; line-height: 1.2; }
.check-in-sub { font-size: 14px; color: var(--ink-2); margin-bottom: 12px; }
.check-in-cta { font-family: var(--font-sans); font-size: 12px; color: var(--gold-deep); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
/* ── Check-in page (NPS) ──────────────────────────────────── */
.checkin-wrap { max-width: 640px; margin: 32px auto 0; }
.nps-label { display: block; font-size: 15px !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; margin-bottom: 14px !important; line-height: 1.4; }
.checkin-wrap .nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; margin-bottom: 8px; }
@media (max-width: 600px) { .checkin-wrap .nps-scale { grid-template-columns: repeat(6, 1fr); } }
.nps-btn { background: var(--paper-deep); border: 1px solid var(--line); padding: 14px 0; font-family: var(--font-sans); font-size: 16px; color: var(--ink-2); cursor: pointer; transition: all .15s ease; font-weight: 500; }
.nps-btn:hover { background: var(--paper); border-color: var(--gold-soft); color: var(--ink); }
.nps-btn.on { background: var(--gold); border-color: var(--gold-deep); color: #fff; transform: scale(1.05); box-shadow: 0 4px 12px rgba(148, 109, 44, 0.3); }
.nps-anchors { display: flex; justify-content: space-between; }
/* ── Admin (admin.html) ───────────────────────────────────── */
.admin-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.admin-atualizado { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 32px; }
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--paper); border: 1px solid var(--line); padding: 18px 20px; }
.kpi-online { border-color: var(--gold); background: linear-gradient(135deg, rgba(148, 109, 44,0.08), rgba(148, 109, 44,0.02)); }
.kpi-num { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--ink); font-weight: 500; }
.kpi-online .kpi-num { color: var(--gold-deep); }
.kpi-de { font-family: var(--font-sans); font-size: 16px; color: var(--ink-2); font-weight: 400; }
.kpi-label { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.admin-table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.admin-table thead th { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 12px 14px; background: var(--paper-deep); border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr.row-online { background: rgba(148, 109, 44, 0.045); }
.admin-table .c-nome { font-weight: 500; color: var(--ink); white-space: nowrap; }
.admin-table .c-ultimo { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.admin-table .c-num { text-align: center; font-variant-numeric: tabular-nums; }
.star-mini { color: var(--gold); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot-online { background: var(--success); box-shadow: 0 0 0 3px rgba(47, 122, 58, 0.18); animation: pulseDot 2s ease-in-out infinite; }
.dot-off { background: var(--ink-4); opacity: 0.5; }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 3px rgba(47, 122, 58, 0.18); } 50% { box-shadow: 0 0 0 5px rgba(47, 122, 58, 0.08); } }
.admin-pagina { font-family: var(--font-sans); font-size: 11px; color: var(--gold-deep); letter-spacing: 0.04em; }
.mini-bar { display: inline-block; width: 60px; height: 4px; background: var(--line-soft); vertical-align: middle; margin-right: 8px; }
.mini-fill { height: 100%; background: var(--gold); transition: width .3s ease; }
.prog-txt { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); }
.flag { display: inline-block; font-family: var(--font-sans); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; font-weight: 500; }
.flag-warn { background: rgba(122, 53, 32, 0.1); color: var(--error); }
.flag-cold { background: var(--paper-deep); color: var(--ink-4); border: 1px solid var(--line); }
/* ── Resumo da aula (Markdown renderizado) ─────────────────────────── */
.aula-resumo {
background: var(--paper-deep);
border-left: 3px solid var(--gold);
padding: 24px 28px;
font-size: 15.5px;
line-height: 1.65;
color: var(--ink);
}
.aula-resumo > *:first-child { margin-top: 0; }
.aula-resumo > *:last-child { margin-bottom: 0; }
.aula-resumo h2 {
font-family: var(--font-serif);
font-weight: 500;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 28px 0 10px;
color: var(--carbon);
}
.aula-resumo h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
letter-spacing: 0.01em;
margin: 22px 0 8px;
color: var(--ink);
}
.aula-resumo h4 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 18px 0 6px;
}
.aula-resumo p { margin: 10px 0; }
.aula-resumo ul, .aula-resumo ol { margin: 10px 0 14px; padding-left: 22px; }
.aula-resumo li { margin: 6px 0; }
.aula-resumo li::marker { color: var(--gold-deep); }
.aula-resumo strong { color: var(--carbon); font-weight: 600; }
.aula-resumo em { color: var(--ink-2); }
.aula-resumo code {
font-family: var(--font-mono);
font-size: 13px;
background: rgba(148, 109, 44, 0.08);
padding: 1px 6px;
border-radius: 2px;
color: var(--carbon);
}
.aula-resumo a {
color: var(--gold-deep);
text-decoration: none;
border-bottom: 1px solid var(--gold-soft);
transition: all .15s ease;
}
.aula-resumo a:hover { color: var(--carbon); border-bottom-color: var(--carbon); }
@media (max-width: 640px) {
.aula-resumo { padding: 18px 18px; font-size: 15px; }
.aula-resumo h2 { font-size: 22px; }
}
/* ── NPS por aula (card privado no rodapé da aula) ─────────────────── */
.nps-aula-section .label { margin-bottom: 14px; }
.nps-card {
background: var(--paper);
border: 1px solid var(--line);
padding: 24px 26px;
}
.nps-intro {
font-size: 15.5px;
line-height: 1.55;
color: var(--ink);
margin: 0 0 18px;
}
.nps-privacy {
display: inline-block;
margin-left: 8px;
font-family: var(--font-sans);
font-size: 11px;
color: var(--gold-deep);
letter-spacing: 0.04em;
background: rgba(148, 109, 44, 0.08);
padding: 2px 8px;
border-radius: 2px;
vertical-align: 2px;
white-space: nowrap;
}
.nps-card .nps-scale {
display: grid;
grid-template-columns: repeat(11, 1fr);
gap: 6px;
margin: 8px 0 4px;
}
.nps-btn-aula {
appearance: none;
background: var(--paper-deep);
border: 1px solid var(--line);
padding: 12px 0;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: all .15s ease;
}
.nps-btn-aula:hover { border-color: var(--gold); color: var(--carbon); }
.nps-btn-aula.on { background: var(--gold); color: #fff; border-color: var(--gold-deep); }
.nps-btn-aula.on.detractor { background: #a02f2f; border-color: #7a1f1f; }
.nps-btn-aula.on.passivo { background: #c89a2a; border-color: #9c7414; }
.nps-btn-aula.on.promotor { background: #2e7d4f; border-color: #1d5a37; }
.nps-extremes {
display: flex; justify-content: space-between;
font-family: var(--font-sans);
font-size: 10px;
color: var(--ink-3);
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 18px;
}
.nps-textareas { display: grid; gap: 14px; margin: 18px 0; }
.nps-textareas .form-group label {
display: block;
font-size: 13px;
color: var(--ink-2);
margin-bottom: 6px;
font-weight: 500;
}
.nps-textareas textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 14.5px;
padding: 10px 12px;
border: 1px solid var(--line);
background: var(--paper);
color: var(--ink);
resize: vertical;
box-sizing: border-box;
line-height: 1.5;
}
.nps-textareas textarea:focus { outline: none; border-color: var(--gold); }
.nps-actions {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
margin-top: 10px;
}
@media (max-width: 640px) {
.nps-card { padding: 18px; }
.nps-card .nps-scale { grid-template-columns: repeat(11, 1fr); gap: 4px; }
.nps-btn-aula { padding: 8px 0; font-size: 13px; }
.nps-privacy { display: block; margin: 6px 0 0; }
}
/* =====================================================================
GAMIFICACAO SOLO (Premium editorial, NAO arcade)
===================================================================== */
/* ── Ícones SVG (premium, substituem emojis) ───────────────── */
.ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; color: inherit; }
.ico svg { width: 1.05em; height: 1.05em; display: block; }
.ico-badge svg { width: 30px; height: 30px; }
.guia-ic { color: var(--gold-deep); }
.guia-ic svg { width: 20px; height: 20px; }
.bv-ic-svg { color: var(--gold-deep); }
.bv-ic-svg svg { width: 22px; height: 22px; }
.toast .ico svg { width: 20px; height: 20px; }
/* ── Theme toggle (header) ─────────────────────────────────── */
.theme-toggle {
background: none; border: 1px solid transparent; color: var(--gold-soft);
cursor: pointer; padding: 6px 8px; font-size: 16px; line-height: 1;
display: inline-flex; align-items: center; gap: 6px;
transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--paper); border-color: rgba(217, 200, 163, 0.25); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle .ic { font-size: 14px; }
/* ── Seletor de tema (admin: galeria com todos os temas) ───── */
.theme-pop { position: fixed; z-index: 200; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--card-shadow); min-width: 212px; max-height: min(72vh, 560px); overflow-y: auto; }
.theme-pop .grp { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 8px 8px 4px; }
.theme-pop .grp:first-child { margin-top: 2px; }
.theme-pop .opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 8px; cursor: pointer; color: var(--ink); font-family: var(--font-sans); font-size: 13px; line-height: 1; }
.theme-pop .opt:hover { background: var(--paper-deep); }
.theme-pop .opt.on { background: var(--paper-deep); font-weight: 500; }
.theme-pop .opt .sw { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-strong); flex: none; }
.theme-pop .opt .ck { margin-left: auto; display: inline-flex; color: var(--accent); }
.theme-pop .opt .ck svg { width: 16px; height: 16px; }
/* Tema travado (recompensa por pontos): dim no SWATCH, texto/custo legivel (ink-2) */
.theme-pop .opt.locked { cursor: not-allowed; color: var(--ink-2); }
.theme-pop .opt.locked:hover { background: none; }
.theme-pop .opt.locked .sw { filter: saturate(.35); opacity: .5; }
.theme-pop .opt.locked .lock { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }
.theme-pop .opt.locked .lock svg { width: 13px; height: 13px; }
.theme-pop .tp-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px 9px; margin: 0 0 4px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.theme-pop .tp-head .ico { display: inline-flex; color: var(--gold-deep); }
.theme-pop .tp-head .ico svg { width: 13px; height: 13px; }
.theme-pop .tp-head .tp-prox { color: var(--ink-2); margin-left: auto; }
/* ── Banner do modo aluno (admin testando a jornada) ───────── */
.modo-aluno-banner {
background: var(--gold);
color: #fff;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 20px;
font-size: 13px;
position: sticky; top: 0; z-index: 9996;
}
[data-mode="dark"] .modo-aluno-banner { color: var(--paper); }
.modo-aluno-banner .mab-eyebrow { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0.06em; white-space: nowrap; }
.modo-aluno-banner .mab-txt { opacity: 0.95; }
.modo-aluno-banner .mab-link {
background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.45);
color: inherit; padding: 4px 12px; border-radius: 3px; cursor: pointer;
font-family: var(--font-sans); font-size: 12px;
}
.modo-aluno-banner .mab-link:hover { background: rgba(255,255,255,0.28); }
.modo-aluno-banner .mab-faixa { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.modo-aluno-banner .mab-faixa select {
background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45);
color: inherit; font-family: var(--font-sans); font-size: 12px;
padding: 3px 8px; border-radius: 3px; cursor: pointer;
}
.modo-aluno-banner .mab-faixa select option { color: #1a1a1a; }
.modo-aluno-banner [data-mab-rever] { margin-left: auto; }
.modo-aluno-banner .mab-strong { background: #fff; color: var(--gold-deep); font-weight: 600; border-color: #fff; }
@media (max-width: 600px) {
.modo-aluno-banner { font-size: 12px; gap: 8px; padding: 8px 14px; }
.modo-aluno-banner .mab-faixa { width: 100%; order: 3; }
}
/* ── Card "Sua jornada" ─────────────────────────────────────── */
.jornada-card {
background: var(--paper);
border: 1px solid var(--line);
padding: 24px 28px;
margin-bottom: 28px;
display: grid;
grid-template-columns: 1fr auto;
gap: 18px 24px;
align-items: center;
position: relative;
}
.jornada-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 28px; height: 1px; background: var(--gold); }
.jornada-card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 28px; background: var(--gold); }
.jornada-titulo {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.15;
color: var(--ink);
margin: 0 0 4px;
font-weight: 500;
}
/* Pontinhos dos ultimos 7 dias (frequencia sem ansiedade de "nao quebre a corrente") */
.jornada-semana { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jornada-semana-label {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.04em;
}
.jornada-dots { display: inline-flex; gap: 5px; }
.dot-dia {
font-size: 13px;
line-height: 1;
color: var(--ink-4);
opacity: 0.5;
cursor: default;
}
.dot-dia.on { color: var(--gold); opacity: 1; }
.dot-dia.hoje { text-shadow: 0 0 0 currentColor; transform: scale(1.15); }
.dot-dia.hoje.on { color: var(--gold-deep); }
/* Pontos (XP traduzido + 1 frase de contexto). Linha de baixo, full width. */
.jornada-pontos {
grid-column: 1 / -1;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--line-soft);
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.jornada-pontos-num {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--gold-deep);
white-space: nowrap;
}
.jornada-pontos-hint {
font-size: 12.5px;
color: var(--ink-3);
line-height: 1.45;
flex: 1;
min-width: 200px;
}
.jornada-acao {
background: none; border: none; padding: 0;
font-family: var(--font-sans);
font-size: 11px;
color: var(--gold-deep);
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px dashed var(--gold-soft);
transition: color .15s, border-color .15s;
}
.jornada-acao:hover { color: var(--carbon); border-bottom-color: var(--carbon); }
@media (max-width: 600px) {
.jornada-card { grid-template-columns: 1fr; padding: 20px; }
}
/* ── Modal Conquistas ──────────────────────────────────────── */
.modal-overlay {
position: fixed; inset: 0;
background: rgba(10,10,10,0.6); backdrop-filter: blur(4px);
z-index: 9990;
display: flex; align-items: center; justify-content: center;
padding: 16px;
animation: fadeIn .2s ease;
}
.modal-card {
background: var(--paper);
border: 1px solid var(--line);
max-width: 720px; width: 100%;
max-height: 90vh; overflow-y: auto;
padding: 32px 28px;
position: relative;
box-shadow: 0 20px 60px var(--shadow-strong);
}
.modal-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 32px; height: 1px; background: var(--gold); }
.modal-card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 32px; background: var(--gold); }
.modal-close {
position: absolute; top: 14px; right: 18px;
background: none; border: none;
font-size: 24px; color: var(--ink-3);
cursor: pointer; line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--carbon); }
.modal-tabs { display: flex; gap: 18px; margin: 16px 0 24px; border-bottom: 1px solid var(--line-soft); }
.modal-tab {
background: none; border: none;
padding: 8px 0;
font-family: var(--font-sans);
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.modal-tab.on { color: var(--gold-deep); border-bottom-color: var(--gold); }
/* ── Conquistas: hero (anel + stats) ───────────────────────────────── */
.conq-hero {
display: flex; align-items: center; gap: 26px;
padding: 4px 0 26px; margin-bottom: 26px;
border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 560px) { .conq-hero { flex-direction: column; align-items: flex-start; gap: 18px; text-align: left; } }
.conq-ring { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.conq-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.conq-ring-bg { fill: none; stroke: var(--line); stroke-width: 5; }
.conq-ring-fg {
fill: none; stroke: var(--gold); stroke-width: 5; stroke-linecap: round;
transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1);
}
.conq-ring-num {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; line-height: 1;
}
.conq-ring-num b { font-family: var(--font-serif); font-size: 26px; color: var(--ink); }
.conq-ring-num span { font-family: var(--font-sans); font-size: 10px; color: var(--ink-3); margin-top: 3px; letter-spacing: .03em; }
.conq-hero-main { flex: 1; min-width: 0; }
.conq-hero-title {
font-family: var(--font-serif); font-weight: 500;
font-size: clamp(22px, 4vw, 30px); line-height: 1.12;
color: var(--ink); margin: 6px 0 8px;
}
.conq-hero-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; max-width: 46ch; margin: 0; }
.conq-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 16px; }
.conq-stat { display: flex; align-items: baseline; gap: 7px; }
.conq-stat .ico { color: var(--gold-deep); align-self: center; }
.conq-stat .ico svg { width: 16px; height: 16px; }
.conq-stat b { font-family: var(--font-serif); font-size: 19px; color: var(--ink); }
.conq-stat span { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); letter-spacing: .02em; }
/* ── Conquistas: secao por categoria ───────────────────────────────── */
.conq-cat { margin-top: 30px; }
.conq-cat:first-of-type { margin-top: 26px; }
.conq-cat-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
padding-bottom: 9px; border-bottom: 1px solid var(--line-soft);
}
.conq-cat-label { font-family: var(--font-serif); font-size: 17px; color: var(--ink); line-height: 1.1; }
.conq-cat-hint { font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.conq-cat-count { font-family: var(--font-mono); font-size: 15px; color: var(--gold-deep); white-space: nowrap; }
.conq-cat-count span { color: var(--ink-4); font-size: 12px; }
.badges-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 600px) { .badges-grid { grid-template-columns: repeat(2, 1fr); } }
.badge-cel {
background: var(--paper-deep);
border: 1px solid var(--line);
padding: 16px 12px;
text-align: center;
position: relative;
transition: all .15s ease;
}
/* opacity de grupo funde nome+fundo -> dim por filter/emoji, nome legivel por cor */
.badge-cel.locked { filter: saturate(0.45); }
.badge-cel.locked .emoji { opacity: 0.5; }
.badge-cel.locked .nome { color: var(--ink-2); }
.badge-cel.secret .emoji { opacity: 0.45; }
.badge-cel.secret .nome { color: var(--ink-3); }
.badge-cel.unlocked:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 6px 18px var(--shadow-soft); }
.badge-cel .emoji { font-size: 32px; line-height: 1; margin-bottom: 8px; display: block; }
.badge-cel .nome { font-family: var(--font-serif); font-size: 15px; color: var(--ink); margin-bottom: 4px; line-height: 1.2; }
.badge-cel .raridade {
position: absolute; top: 7px; right: 8px;
font-family: var(--font-sans);
font-size: 8.5px;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-3);
opacity: .85;
}
.badge-cel.locked .raridade { opacity: .55; }
.badge-cel.raridade-raro .raridade { color: var(--gold-deep); }
.badge-cel.raridade-epico .raridade { color: #6b3a8f; }
.badge-cel.raridade-lendario .raridade { color: #c89a44; font-weight: 600; }
.badge-cel.unlocked.raridade-lendario {
border-color: var(--gold);
background: linear-gradient(135deg, rgba(148, 109, 44,0.12), rgba(148, 109, 44,0.02));
}
.badge-cel .dica {
font-size: 11px; color: var(--ink-3);
margin-top: 6px; line-height: 1.35;
font-style: italic;
}
.badge-cel .data {
font-family: var(--font-sans);
font-size: 10px; color: var(--ink-4); margin-top: 4px;
letter-spacing: 0.04em;
}
.proximas-metas {
margin-top: 24px;
border-top: 1px solid var(--line-soft);
padding-top: 18px;
}
.proximas-metas .label { margin-bottom: 12px; }
.meta-item {
display: grid; grid-template-columns: 24px 1fr auto; gap: 10px;
align-items: center; padding: 8px 0;
font-size: 13px;
}
.meta-item .meta-bar { grid-column: 1 / -1; height: 2px; background: var(--paper-deep); position: relative; }
.meta-item .meta-fill { position: absolute; inset: 0 auto 0 0; background: var(--gold); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.meta-item .meta-prog { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); }
.meta-item .meta-dica { grid-column: 1 / -1; font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }
.historico-eventos { display: grid; gap: 6px; }
.hist-linha {
display: grid; grid-template-columns: 70px 1fr auto;
gap: 12px; padding: 6px 0;
font-family: var(--font-sans); font-size: 12px;
border-bottom: 1px solid var(--line-soft);
}
.hist-linha:last-child { border-bottom: none; }
.hist-data { color: var(--ink-4); }
.hist-tipo { color: var(--ink-2); }
.hist-xp { color: var(--gold-deep); font-weight: 500; }
/* ── Toasts ──────────────────────────────────────────────── */
.toast-stack {
position: fixed; bottom: 24px; right: 24px;
display: flex; flex-direction: column; gap: 10px;
z-index: 9995;
pointer-events: none;
}
.toast {
background: var(--carbon);
color: var(--paper);
padding: 14px 18px;
border-left: 3px solid var(--gold);
font-size: 14px;
box-shadow: 0 8px 28px var(--shadow-strong);
min-width: 240px;
pointer-events: auto;
animation: toastIn .25s cubic-bezier(.2,.7,.2,1);
display: flex; gap: 10px; align-items: center;
}
[data-mode="dark"] .toast { background: var(--paper-deep); color: var(--ink); }
.toast-emoji { font-size: 22px; line-height: 1; }
.toast-nome { font-weight: 600; }
.toast-sub { font-family: var(--font-sans); font-size: 11px; color: var(--gold-soft); letter-spacing: 0.04em; }
.toast.saindo { animation: toastOut .25s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }
/* ── Confetti container (inline canvas) ─────────────────── */
#confetti-canvas {
position: fixed; inset: 0;
pointer-events: none;
z-index: 9994;
}
/* ── Daily drop card ────────────────────────────────────── */
.drop-card {
background: var(--paper);
border: 1px solid var(--gold);
padding: 20px 24px;
margin-bottom: 28px;
position: relative;
cursor: pointer;
transition: all .15s ease;
}
.drop-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--shadow-soft); }
.drop-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 36px; height: 1px; background: var(--gold); }
.drop-card::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 36px; background: var(--gold); }
.drop-eyebrow {
font-family: var(--font-sans);
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-deep); margin-bottom: 6px;
}
.drop-titulo {
font-family: var(--font-serif);
font-size: 22px; line-height: 1.2;
color: var(--ink); margin-bottom: 6px;
}
.drop-preview { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.drop-cta {
margin-top: 12px;
font-family: var(--font-sans);
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--gold-deep);
}
.drop-card.visto { opacity: 0.85; }
.drop-card.visto .drop-cta::before { content: "✓ "; }
.drop-conteudo {
font-size: 15px; line-height: 1.6;
margin-top: 14px; padding-top: 14px;
border-top: 1px dashed var(--line);
color: var(--ink);
white-space: pre-wrap;
}
.drop-conteudo a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-soft); text-decoration: none; }
.drop-yt-wrap { position: relative; aspect-ratio: 16/9; margin-top: 12px; background: var(--carbon); }
.drop-yt-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ── Modulo card: indicador "em andamento" ────────────────── */
.modulo-card .badge-progresso {
display: inline-block;
font-family: var(--font-sans);
font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
background: rgba(148, 109, 44, 0.12);
color: var(--gold-deep);
padding: 2px 8px; border-radius: 2px;
margin-top: 6px;
}
/* =====================================================================
ADMIN V2
===================================================================== */
.admin-grid { display: grid; gap: 28px; margin-bottom: 32px; }
.admin-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .admin-grid-2 { grid-template-columns: 1fr; } }
.admin-section { background: var(--paper); border: 1px solid var(--line); padding: 20px 22px; }
.admin-section-h {
font-family: var(--font-sans);
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3); margin: 0 0 14px;
display: flex; justify-content: space-between; align-items: baseline;
}
.admin-section-h .export {
font-size: 10px; color: var(--gold-deep); cursor: pointer;
background: none; border: none; padding: 0;
font-family: inherit; letter-spacing: 0.08em;
}
.admin-section-h .export:hover { color: var(--carbon); }
/* Funil */
.funil { display: grid; gap: 6px; }
.funil-linha { display: grid; grid-template-columns: 140px 1fr 60px; gap: 10px; align-items: center; font-size: 13px; }
.funil-rotulo { color: var(--ink-2); font-size: 12px; }
.funil-bar { background: var(--paper-deep); height: 22px; position: relative; }
.funil-fill {
position: absolute; inset: 0 auto 0 0;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.funil-bar.pequeno { background: var(--paper-deep); }
.funil-n { font-family: var(--font-sans); font-size: 12px; color: var(--ink-2); text-align: right; }
/* Heatmap */
.heatmap-wrap { overflow-x: auto; }
.heatmap {
display: grid;
grid-template-columns: 40px repeat(24, 1fr);
gap: 2px;
min-width: 720px;
font-family: var(--font-sans); font-size: 10px;
}
.heatmap-cell { aspect-ratio: 1; background: var(--paper-deep); position: relative; }
.heatmap-cell.lv1 { background: rgba(148, 109, 44,0.18); }
.heatmap-cell.lv2 { background: rgba(148, 109, 44,0.36); }
.heatmap-cell.lv3 { background: rgba(148, 109, 44,0.55); }
.heatmap-cell.lv4 { background: rgba(148, 109, 44,0.78); }
.heatmap-cell.lv5 { background: var(--gold); }
.heatmap-cell[title]:hover { outline: 1px solid var(--gold); z-index: 1; }
.heatmap-rotulo { color: var(--ink-3); padding: 2px 6px; align-self: center; text-transform: uppercase; letter-spacing: 0.04em; }
.heatmap-corner, .heatmap-hour { color: var(--ink-4); text-align: center; padding: 2px 0; }
/* Retencao coorte */
.coorte-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 600px) { .coorte-grid { grid-template-columns: repeat(2, 1fr); } }
.coorte-cel { background: var(--paper-deep); border: 1px solid var(--line); padding: 12px; text-align: center; }
.coorte-cel .label { margin-bottom: 4px; font-size: 9px; }
.coorte-cel .num { font-family: var(--font-serif); font-size: 28px; color: var(--gold-deep); line-height: 1; }
.coorte-cel .pct { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
/* Drop-off por aula */
.dropoff-table { font-size: 13px; }
.dropoff-table .barwrap { display: grid; grid-template-columns: 60px 1fr 60px; gap: 8px; align-items: center; }
.dropoff-table .bar { background: var(--paper-deep); height: 8px; position: relative; }
.dropoff-table .bar-iniciados { position: absolute; inset: 0 auto 0 0; background: var(--gold-soft); }
.dropoff-table .bar-concluidos { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
/* Detractors */
.detractor-item {
padding: 12px 14px;
border: 1px solid rgba(122, 53, 32, 0.25);
background: rgba(122, 53, 32, 0.05);
margin-bottom: 8px;
}
.detractor-item .top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.detractor-item .nome { font-weight: 600; color: var(--ink); }
.detractor-item .nps { font-family: var(--font-sans); color: var(--error); font-weight: 600; }
.detractor-item .meta-info { font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); margin-bottom: 6px; letter-spacing: 0.04em; }
.detractor-item .quote { font-size: 13px; color: var(--ink-2); margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--error); white-space: pre-wrap; }
/* Engagement top/bottom */
.eng-table { font-size: 13px; }
.eng-row { display: grid; grid-template-columns: 28px 1fr 70px 70px 70px; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); align-items: center; font-family: var(--font-sans); }
.eng-row:last-child { border-bottom: none; }
.eng-rank { color: var(--ink-4); }
.eng-nome { font-family: var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eng-num { text-align: right; color: var(--ink-2); }
.eng-score { color: var(--gold-deep); font-weight: 600; text-align: right; }
/* =====================================================================
PREMIUM POLISH (skeleton, empty, focus, transitions, cmd+k)
===================================================================== */
/* Skeleton */
.skeleton {
background: linear-gradient(90deg, var(--paper-deep) 0%, var(--line-soft) 50%, var(--paper-deep) 100%);
background-size: 200% 100%;
animation: skelShimmer 1.4s infinite ease-in-out;
}
.skeleton-line { height: 12px; margin: 8px 0; border-radius: 2px; }
.skeleton-card { height: 80px; border-radius: 2px; }
@keyframes skelShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Empty states */
.empty-state {
text-align: center; padding: 40px 20px;
color: var(--ink-3); font-size: 14px;
}
.empty-state .empty-emoji { font-size: 40px; opacity: 0.5; margin-bottom: 10px; display: block; }
.empty-state .empty-titulo { font-family: var(--font-serif); font-size: 22px; color: var(--ink-2); margin-bottom: 6px; }
.empty-state .empty-sub { font-size: 13px; color: var(--ink-3); }
/* Focus states (a11y + premium) */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* Section reveal (Intersection Observer adiciona .visivel) */
.reveal {
opacity: 0; transform: translateY(8px);
transition: opacity .35s ease, transform .35s ease;
}
.reveal.visivel { opacity: 1; transform: none; }
/* Hover lift padronizado em cards-link */
.card, .card-frame, .card-deep, .modulo-card, .material-item {
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Cmd+K palette */
/* Onboarding — bullets do card de boas-vindas (1a vez) */
.boasvindas-bullets { display: grid; gap: 14px; }
.bv-item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.bv-item strong { color: var(--ink); font-weight: 600; }
.bv-ic { font-size: 22px; line-height: 1.3; }
/* Mini-quiz de perfil (pergunta so o que falta) */
.quiz-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.qp-dot { height: 3px; flex: 1; background: var(--paper-deep); border-radius: 2px; transition: background .3s ease; }
.qp-dot.on { background: var(--gold); }
.quiz-opcoes { display: grid; gap: 10px; }
.quiz-opt {
text-align: left;
background: var(--paper-deep);
border: 1px solid var(--line);
color: var(--ink);
padding: 16px 18px;
font-family: var(--font-sans);
font-size: 15px;
cursor: pointer;
transition: all .15s ease;
border-radius: 2px;
}
.quiz-opt:hover { border-color: var(--gold); background: var(--paper); transform: translateY(-1px); box-shadow: 0 4px 14px var(--shadow-soft); }
.quiz-opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Guia de acesso (mini-modulos expansiveis) */
.guia-wrap { margin-bottom: 28px; }
.guia-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.guia-sub { font-size: 13px; color: var(--ink-3); }
.guia-item { border: 1px solid var(--line); background: var(--paper); margin-bottom: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
.guia-item[open] { border-color: var(--gold); box-shadow: 0 4px 14px var(--shadow-soft); }
.guia-item summary {
list-style: none; cursor: pointer;
display: grid; grid-template-columns: 24px 1fr auto 16px; gap: 12px; align-items: center;
padding: 14px 18px;
}
.guia-item summary::-webkit-details-marker { display: none; }
.guia-emoji { font-size: 18px; line-height: 1; }
.guia-tit { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); }
.guia-resumo { font-size: 12px; color: var(--ink-3); font-style: italic; text-align: right; }
.guia-item summary::after { content: "+"; font-family: var(--font-sans); font-size: 18px; color: var(--gold-deep); text-align: center; }
.guia-item[open] summary::after { content: "\2212"; } /* minus */
.guia-passos { margin: 0; padding: 2px 20px 16px 54px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.guia-passos li { margin: 7px 0; }
.guia-passos a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-soft); text-decoration: none; }
.guia-passos a:hover { color: var(--carbon); }
.guia-passos strong { color: var(--ink); font-weight: 600; }
.guia-aviso { margin-top: 12px; padding: 12px 16px; background: var(--paper-deep); border-left: 3px solid var(--gold); font-size: 13px; color: var(--ink-2); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
.guia-aviso .ico { color: var(--gold-deep); flex-shrink: 0; margin-top: 1px; }
/* Botão "já fiz isso" (checklist pontuável) */
.guia-acao { padding: 2px 20px 16px 54px; }
.guia-feito-btn {
display: inline-flex; align-items: center; gap: 7px;
background: var(--paper-deep); border: 1px solid var(--line);
color: var(--gold-deep); font-family: var(--font-sans); font-size: 13px; font-weight: 500;
padding: 8px 14px; border-radius: 3px; cursor: pointer; transition: all .15s ease;
}
.guia-feito-btn .ico svg { width: 16px; height: 16px; }
.guia-feito-btn:hover:not(:disabled) { border-color: var(--gold); background: var(--paper); transform: translateY(-1px); }
.guia-feito-btn.feito { color: var(--success); border-color: rgba(47,122,58,0.35); background: rgba(47,122,58,0.07); cursor: default; }
.guia-item.feito > summary .guia-tit { color: var(--ink-3); }
.guia-item.feito > summary .guia-ic { color: var(--success); }
/* Estrela dos pontos + ícones de badge */
.ico-pts { color: var(--gold); }
.ico-pts svg { width: 15px; height: 15px; }
.badge-cel.unlocked .ico-badge { color: var(--gold-deep); }
.badge-cel.locked .ico-badge { color: var(--ink-4); }
.badge-cel .emoji { line-height: 1; }
@media (max-width: 600px) {
.guia-item summary { grid-template-columns: 24px 1fr 16px; }
.guia-resumo { display: none; }
.guia-passos { padding-left: 20px; }
.guia-acao { padding-left: 20px; }
}
/* Reduced motion: desliga animacao, confetti, transicoes */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
#confetti-canvas { display: none !important; }
.reveal { opacity: 1; transform: none; }
}
/* =====================================================================
CASCA DE NAVEGACAO — topbar + sidebar (rail no desktop, gaveta no mobile)
===================================================================== */
:root { --rail: 248px; --topbar-h: 56px; --sb-break: 880px; }
/* Reserva o espaco do rail antes do JS hidratar (anti-flash de layout).
has-shell e setado por JS quando renderShell roda. */
.app-frame { display: flex; flex-direction: column; min-height: 100vh; }
/* Trava o scroll lateral acidental (clip nao cria scroll container -> nao
quebra o sticky da topbar/sidebar). Rede de seguranca contra overflow. */
.has-shell { overflow-x: clip; }
/* ── Topbar ──────────────────────────────────────────────────── */
/* Chrome segue o tema (full escuro no dark / full claro no light): usa
paper/ink/line em vez de --carbon (que invertia e gerava a "barra clara"
no dark). Acento dourado se mantem. */
.app-topbar {
position: sticky; top: 0; z-index: 60;
display: flex; align-items: center; gap: 14px;
background: var(--surface); color: var(--ink);
border-bottom: 1px solid var(--line-soft);
min-height: var(--topbar-h);
padding-block: 8px;
padding-inline: clamp(16px, 4vw, 28px);
max-width: 100%;
}
.app-topbar .brand {
font-family: var(--font-mono);
font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--gold-deep); text-decoration: none; white-space: nowrap;
/* encolhe e corta com reticencias em vez de empurrar a pagina pro lado */
flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.app-topbar .brand:hover { color: var(--ink); }
.app-topbar .topbar-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 14px; }
.app-topbar .topbar-right #header-nome { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
/* Em telas estreitas, esconde o nome pra sobrar espaco (a marca ja corta) */
@media (max-width: 600px) { .app-topbar .topbar-right #header-nome { display: none; } }
.app-topbar [data-theme-toggle].theme-toggle {
background: none; border: 1px solid var(--line); color: var(--ink-2);
cursor: pointer; font-family: var(--font-sans); font-size: 12px;
display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 4px;
}
.app-topbar [data-theme-toggle].theme-toggle:hover { color: var(--ink); border-color: var(--gold); }
/* Toggle icon-only (solzinho): dimensiona o svg do icon() dentro do botao */
.theme-toggle .ico svg { width: 17px; height: 17px; }
.hamburger {
display: none;
background: none; border: none; color: var(--ink-2); cursor: pointer;
padding: 4px; width: 34px; height: 34px; align-items: center; justify-content: center;
}
.hamburger svg { width: 22px; height: 22px; }
.hamburger:hover { color: var(--ink); }
/* ── Body (sidebar + main) ───────────────────────────────────── */
.app-body { display: flex; flex: 1; min-height: 0; align-items: flex-start; }
.sidebar {
flex: none; width: var(--rail);
position: sticky; top: var(--topbar-h);
height: calc(100vh - var(--topbar-h));
background: var(--paper-deep); color: var(--ink);
border-right: 1px solid var(--line);
display: flex; flex-direction: column;
padding: 14px 12px;
overflow-y: auto;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.sidebar-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 6px;
color: var(--ink-2); text-decoration: none;
font-family: var(--font-sans); font-size: 14px; font-weight: 500;
border: none; background: none; cursor: pointer; width: 100%; text-align: left;
position: relative; transition: background .14s ease, color .14s ease;
}
/* tint dourado funciona em fundo claro E escuro */
.sidebar-item:hover { background: rgba(148, 109, 44,0.10); color: var(--ink); }
.sidebar-item.active { color: var(--gold-deep); background: rgba(148, 109, 44,0.14); }
.sidebar-item.active::before {
content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
background: var(--gold); border-radius: 0 2px 2px 0;
}
.sidebar-item .sb-ico { display: inline-flex; flex: none; }
.sidebar-item .sb-ico svg { width: 19px; height: 19px; }
.sidebar-item .sb-ext-mark { margin-left: auto; font-size: 12px; opacity: 0.6; }
.sidebar-item.sair { color: var(--ink-3); }
.sidebar-item.sair:hover { color: var(--ink); background: rgba(148, 109, 44,0.10); }
/* main ocupa o resto e rola */
.has-shell .app-body > main { flex: 1; min-width: 0; }
/* ── Backdrop da gaveta (so mobile) ──────────────────────────── */
.sidebar-backdrop {
position: fixed; inset: 0; z-index: 55;
background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none;
transition: opacity .2s ease; display: none;
}
/* ── Mobile: gaveta off-canvas ───────────────────────────────── */
@media (max-width: 880px) {
.hamburger { display: inline-flex; }
.sidebar {
position: fixed; inset: 0 auto 0 0; top: 0; height: 100vh;
width: min(86vw, 320px); z-index: 70;
transform: translateX(-100%); transition: transform .22s ease;
border-right: 1px solid var(--line);
box-shadow: 0 0 40px rgba(0,0,0,0.4);
padding-top: 18px;
}
body.sidebar-open .sidebar { transform: none; }
.sidebar-backdrop { display: block; }
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.has-shell .app-body > main { width: 100%; }
}
/* ── Modo aluno (banner): topbar nao gruda sob o banner ──────── */
body.tem-banner-aluno .app-topbar { position: static; }
/* Painel "Visao geral" — 4 blocos equilibrados */
.painel-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .painel-grid { grid-template-columns: 1fr; } }
.pn-card {
background: var(--paper); border: 1px solid var(--line);
padding: 22px 24px; display: flex; flex-direction: column; gap: 6px;
position: relative;
}
.pn-eyebrow {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 2px;
}
.pn-continue { grid-column: 1 / -1; }
.pn-continue::before { content: ""; position: absolute; top: -1px; left: -1px; width: 28px; height: 1px; background: var(--gold); }
.pn-continue::after { content: ""; position: absolute; top: -1px; left: -1px; width: 1px; height: 28px; background: var(--gold); }
.pn-aula-num { font-family: var(--font-sans); font-size: 12px; color: var(--ink-3); }
.pn-aula-tit { font-family: var(--font-serif); font-size: 26px; line-height: 1.12; font-weight: 500; color: var(--ink); }
.pn-prox-sub { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; max-width: 52ch; }
.pn-cta, .pn-cta-link { color: var(--gold-deep); font-weight: 600; font-size: 14px; margin-top: 6px; }
.pn-cta-link { text-decoration: none; }
.pn-conq-num { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--ink); font-weight: 500; }
.pn-conq-sub { font-size: 13px; color: var(--ink-3); }
.pn-pts { font-family: var(--font-sans); font-size: 12px; color: var(--gold-deep); margin-top: 4px; }
/* O drop card preenche a propria celula do grid; se nao houver drop hoje, colapsa */
.pn-drop-cell:empty { display: none; }
.pn-drop-cell .drop-card { margin: 0; height: 100%; }
.pn-guia-nudge {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 18px; padding: 16px 20px;
background: var(--paper-deep); border: 1px solid var(--line); border-left: 3px solid var(--gold);
text-decoration: none; color: inherit;
}
.pn-guia-nudge:hover { border-color: var(--gold); }
.pn-guia-nudge-tit { font-size: 15px; color: var(--ink); font-weight: 500; }
/* ════════════════════════════════════════════════════════════════════
ÔNIX CRISTAL — experimento de taste (19/06/2026)
Cópia do Ônix + 3 movimentos, TUDO escopado em [data-theme="onix-cristal"]
pra NÃO tocar nos outros 16 temas. Fica no fim do arquivo de propósito:
garante que os overrides de empate de especificidade (progresso/seleção)
vençam por ordem de fonte. Decode das refs e racional no plano.
════════════════════════════════════════════════════════════════════ */
/* A) Tokens — parte do Ônix; ouro CLARO (Architect #d9c8a3) + teal (família terra) */
[data-theme="onix-cristal"] {
--paper: #000000; --paper-deep: #060504; --surface: #110d09;
--carbon: #f5efe3; --carbon-soft: #ddd4c2;
--gold: #d9c8a3; --gold-deep: #cdbb92; --gold-soft: #221a0e; --gold-strong: #ece0c6;
--ink: #f3ede0; --ink-2: #b6ab95; --ink-3: #847b68; --ink-4: #58513f;
--line: #28221a; --line-soft: #161109; --line-strong: #423927;
/* teal counter-accent (família "terra" do cca-system.css de claude.hibra.pro) */
--terra: #6cb6ad; --terra-deep: #2c7269; --terra-soft: rgba(108,182,173,.14);
--success: #8fc49a; --error: #f0b48c;
--shadow-soft: rgba(0,0,0,0.6); --shadow-strong: rgba(0,0,0,0.85);
--card-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 8px 24px -12px rgba(0,0,0,0.85);
--accent: #d9c8a3; --accent-hover: #ece0c6; --accent-fg: #1a140a;
--status-emitido-bg: #14281a; --status-emitido-fg: #a9dcbd;
--status-processo-bg: #2e2410; --status-processo-fg: #e0c98e;
--status-falha-bg: #2e1610; --status-falha-fg: #f4c4ac;
--status-rascunho-bg: #161109; --status-rascunho-fg: #b6ab95;
color-scheme: dark;
}
/* B) Topo = pílula de vidro flutuante (receita do .nav de claude.hibra.pro) */
[data-theme="onix-cristal"] .app-topbar {
top: 8px; margin: 8px clamp(12px,3vw,24px) 0; border-radius: 16px;
border: 1px solid rgba(255,255,255,.16);
background: linear-gradient(180deg, rgba(22,22,28,.55), rgba(8,8,12,.40));
-webkit-backdrop-filter: blur(40px) saturate(150%);
backdrop-filter: blur(40px) saturate(150%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 0 0 1px rgba(255,255,255,.03),
0 18px 40px -18px rgba(0,0,0,.7),
0 2px 10px -3px rgba(0,0,0,.5);
}
/* brand em ouro claro (Architect); branco no hover = o fallback "se não passar o efeito" */
[data-theme="onix-cristal"] .app-topbar .brand { color: #d9c8a3; }
[data-theme="onix-cristal"] .app-topbar .brand:hover { color: #fff; }
/* a pílula flutua com margem (ocupa 8..64px) → realinhar o sidebar só no desktop
pra ele grudar logo abaixo da pílula; mobile usa gaveta fixed, não mexer */
@media (min-width: 881px) {
[data-theme="onix-cristal"] .sidebar {
top: calc(var(--topbar-h) + 8px);
height: calc(100vh - var(--topbar-h) - 8px);
}
}
/* C) Sidebar: matar o marrom hardcoded rgba(148,109,44) → âncora NEUTRA + ativo TEAL */
[data-theme="onix-cristal"] .sidebar-item:hover { background: rgba(243,237,224,.06); color: var(--ink); }
[data-theme="onix-cristal"] .sidebar-item.active { background: rgba(108,182,173,.12); color: var(--ink); }
[data-theme="onix-cristal"] .sidebar-item.active .sb-ico { color: var(--terra); }
[data-theme="onix-cristal"] .sidebar-item.active::before { background: var(--terra); }
[data-theme="onix-cristal"] .sidebar-item.sair:hover { background: rgba(243,237,224,.06); color: var(--ink); }
/* estados teal sutis: seleção de texto e barra de progresso (a régua-piso segue no ouro/marca) */
[data-theme="onix-cristal"] ::selection { background: rgba(108,182,173,.30); color: #fff; }
[data-theme="onix-cristal"] .progresso-bar .fill { background: var(--terra); }
/* ════════════════════════════════════════════════════════════════════
PATCH DE CONTRASTE WCAG AA (casca / reader / admin) — 19/06/2026
Auditoria de 17 temas. Invariante: quem pinta o fundo e dono da cor do
texto; quem esmaece, esmaece por COR, nunca por opacity. Detalhe no
relatorio scratchpad/contrast-report.md.
════════════════════════════════════════════════════════════════════ */
/* --- B: vitrine (gold claro) — escopado so ao tema --- */
[data-theme="vitrine"] .sidebar-item.active { color: var(--gold-strong); }
[data-theme="vitrine"] .toggle-visto.checked .marker { color: var(--carbon); }
[data-theme="vitrine"] .nps-btn.on { color: var(--carbon); }
[data-theme="vitrine"] .badge-admin { background: var(--gold-deep); }
[data-theme="vitrine"] .modo-aluno-banner { color: var(--carbon); }
[data-theme="vitrine"] .modo-aluno-banner .mab-strong { color: var(--gold-deep); }
/* --- B mid-tone no MODO CLARO: gold -> gold-deep / par soft+carbon --- */
[data-mode="light"] .modulo-card.proxima .num { color: var(--gold-deep); }
.dot-dia.on { color: var(--gold-deep); opacity: 1; }
[data-mode="light"] .momento.active .ts { background: var(--gold-deep); color: var(--accent-fg); }
/* --- mab-strong forte: fundo #fff fixo; no escuro gold-deep claro some --- */
[data-mode="dark"] .modo-aluno-banner .mab-strong { color: var(--paper); }
/* --- D: tokens hint usados como CORPO de texto -> ink-2 --- */
.modulo-card .num,
.modulo-card .meta,
.trilha-foot,
.guia-item.feito > summary .guia-tit { color: var(--ink-2); }
.comentario-form .contagem,
.muted, .muted-tiny, .form-hint, .form-preview-label { color: var(--ink-2); }
/* --- D (1.4.11): icones de status PENDENTE/BLOQUEADO de ink-4 -> ink-2/3 --- */
.modulo-card .status { color: var(--ink-3); }
.modulo-card .status.bloqueado { color: var(--ink-2); }
/* --- F: NPS aula — fundo de status fixo, texto por MODIFICADOR (independe do modo) --- */
.nps-btn-aula.on.detractor,
[data-mode="dark"] .nps-btn-aula.on.detractor,
.nps-btn-aula.on.promotor,
[data-mode="dark"] .nps-btn-aula.on.promotor { color: #fff; }
.nps-btn-aula.on.passivo,
[data-mode="dark"] .nps-btn-aula.on.passivo { color: #1a1208; }
/* --- conquistas: raridade hardcoded mono-modo --- */
[data-mode="dark"] .badge-cel.raridade-epico .raridade { color: #c79be0; }
[data-mode="light"] .badge-cel.raridade-lendario .raridade { color: #6e4a12; }
/* --- tint + token claro nos temas claros quentes (success/error) --- */
[data-mode="light"] .guia-feito-btn.feito { color: #245a38; }
[data-theme="risografo"] .flag-warn { color: #9a3318; }
[data-theme="vitrine"] .alerta-erro a { color: var(--status-falha-fg); }
/* --- (1.4.11) barra de progresso: fill claro vs trilho creme (light/risografo).
onix-cristal (terra, +1 classe) e [data-mode="dark"] (green-300) vencem por especificidade. --- */
.progresso-bar .fill { background: #3f7d61; }
/* ══════════ DETALHES PREMIUM (camada de tato/movimento, 04/07/2026) ══════════
Fisica de clique, selecao, scrollbar, entrada de pagina, pop nas estrelas.
Nada aqui muda layout; tudo desligavel no bloco reduced-motion do final. */
/* Troca de tema respira em vez de piscar (o pre-apply no evita flash no load). */
body { transition: background-color .25s ease, color .25s ease; }
/* Fisica de clique: o botao afunda no dedo. */
.btn:active:not(:disabled), .theme-toggle:active, .cm-seg-btn:active,
.hamburger:active, .link-acao:active { transform: translateY(1px) scale(.99); }
.btn, .theme-toggle, .cm-seg-btn, .hamburger { transition: transform .12s ease, color .15s ease, background .15s ease, border-color .15s ease; }
/* Estrela do rating: pop com mola ao selecionar, afunda no toque. */
.star-btn { transition: transform .14s cubic-bezier(.34,1.56,.64,1), color .14s ease; }
.star-btn.on { transform: scale(1.14); }
.star-btn:active { transform: scale(.9); }
/* Card de aula: desliza 3px no hover, convite discreto. */
.modulo-card { transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.modulo-card:hover:not(.sem-video) { transform: translateX(3px); }
/* Selecao de texto na cor da casa (ouro quente; onix-cristal mantem o teal proprio). */
::selection { background: rgba(197, 164, 105, .32); }
[data-mode="dark"]:not([data-theme="onix-cristal"]) ::selection { background: rgba(217, 180, 110, .30); color: #fff; }
/* Scrollbar fina e quente, some no fundo ate precisar. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); border: 2px solid transparent; background-clip: padding-box; }
/* Entrada de pagina: o conteudo respira pra dentro (curto, uma vez so). */
@keyframes pagIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main { animation: pagIn .3s cubic-bezier(.2, .7, .2, 1) both; }
/* Numeros que nao dancam enquanto mudam (timer do codigo, contadores). */
#timer, .codigo, .contagem { font-variant-numeric: tabular-nums; }
/* Respeito a quem pediu menos movimento. */
@media (prefers-reduced-motion: reduce) {
main { animation: none; }
body, .star-btn, .modulo-card { transition: none; }
.star-btn.on, .modulo-card:hover:not(.sem-video) { transform: none; }
}
/* =====================================================================
HITBOX MOBILE — complemento (sweep 08/07/2026). Cobre o que o bloco
principal logo abaixo nao alcanca:
- pill de XP: o ::after de la e clipado pelo overflow:hidden do strip
da topbar (hit-test clipado junto), entao o box real precisa crescer;
min-height/min-width nao existem no estilo inline, a regra pega direto
e o strip acompanha (topbar tem 56px, sobra folga).
- .aula-nav a: padding 14px sobre linha de ~14px da ~42px; o piso de 44
garante o alvo (a margem negativa de la segue devolvendo o layout).
- .momento (capitulos da aula): piso de 44 por item.
===================================================================== */
@media (max-width: 880px) {
[data-xp-pill] { min-height: 44px; min-width: 44px; justify-content: center; }
.aula-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.momento { min-height: 44px; }
}
/* ══════════ HITBOX MOBILE >=44px (lei de Fitts — sweep 08/07/2026) ══════════
So area de toque no breakpoint mobile (880px, o mesmo da gaveta); zero
mudanca visual no desktop. Onde nao da pra crescer o box sem mexer no
layout, o alvo expande via pseudo-elemento invisivel ou padding + margem
negativa (mesmo padrao do .link-acao la em cima). */
@media (max-width: 880px) {
/* Hamburger: box 34x34 -> 44x44; margem negativa devolve os 10px pro
layout da topbar (footprint continua 34px, svg centrado nao muda). */
.hamburger { width: 44px; height: 44px; margin: -5px; }
/* Pill de XP (estilo inline no app.js: padding 3px 9px, ~24px de altura):
::after invisivel estica o alvo pra ~44px sem tocar no visual da pill. */
[data-xp-pill] { position: relative; }
[data-xp-pill]::after { content: ""; position: absolute; inset: -10px -6px; }
/* X dos modais (glifo de ~16-26px, padding 0): hitbox 44x44 centrada no
glifo via ::after; posicao e visual do x ficam identicos. */
.rating-close, .modal-close { position: absolute; }
.rating-close::after, .modal-close::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* Estrelas do rating: garante 44px nos dois eixos (botao sem fundo nem
borda, o minimo extra e invisivel; 5x44 + gaps cabe no rating-card). */
.star-btn { min-width: 44px; min-height: 44px; }
/* Navegacao anterior/proxima da aula (links de 12px, sem padding):
padding + margem negativa = alvo ~46px sem mexer no layout visual. */
.aula-nav a { padding: 14px 10px; margin: -14px -10px; }
}