/* ══════════════════════════════════════════════════════════════════ theme.css — Sistema de tema Claro/Escuro do AprovaMais OAB Direção visual: Redesign "Editorial" (1a) — jul/2026. Tokens canônicos do handoff design_handoff_redesign_1a/README.md. Como funciona: - O snippet anti-flash no define html[data-theme="light|dark"] ANTES do primeiro paint (localStorage 'am-theme' → senão, sistema). - /public/js/theme.js injeta o botão ☀️/🌙 na topbar e salva a escolha. - Tokens claros ficam em :root (theme.css carrega por último no , então vence os :root das páginas em empates de especificidade); o modo escuro é 100% overrides em html[data-theme="dark"]. - Páginas ADMIN são dark-first (--adm-*): o modo CLARO delas usa os mesmos tokens claros, definidos em html[data-theme="light"]. - A sidebar do aluno permanece escura nos dois modos (âncora da marca). ══════════════════════════════════════════════════════════════════ */ /* ── TOKENS BASE (modo claro / fallbacks) ─────────────────────────── */ :root { /* núcleo Editorial */ --bg: #F1EDE4; --surface: #FFFFFF; --surface-2: #FBF9F4; --border: #E8E4DA; --hair: #F0ECE3; --text: #17130B; --muted: #7C7668; --muted-2: #ABA495; --gold: #FABE12; --gold-deep: #C99A0E; --gold-tint: #FDF6E3; --gold-line: #F2E4B4; --pos: #3F8F5B; --pos-soft: #EAF4EC; --neg: #C2503B; --neg-soft: #F7ECE8; --ring-track: #EEE9DE; --sh-sm: 0 2px 10px rgba(20, 16, 8, .05); --sh-md: 0 10px 30px rgba(20, 16, 8, .08); --sh-gold: 0 8px 26px rgba(250, 190, 18, .24); /* legado (páginas ainda não redesenhadas) — mapeado para o Editorial */ --border-warm: #E8E4DA; --gold-soft-a: #FDF6E3; --gold-soft-b: #F5E9C3; --gold-soft-border: #F2E4B4; --gold-text: #C99A0E; --green-soft: #EAF4EC; --red-soft: #F7ECE8; --c-green600: #3F8F5B; --c-green500: #3F8F5B; --c-red600: #C2503B; --c-red500: #C2503B; --c-amber: #C99A0E; --fg-rgb: 255, 255, 255; /* usado pelas telas admin (dark-first) */ --sidebar: 240px; /* shell Editorial */ } html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ── MODO ESCURO — tokens globais (páginas de aluno/parceiro/auth) ── "Vidro contínuo" (aprovado 17/07): um único céu de fundo para o site inteiro e superfícies TRANSLÚCIDAS — nada tem cor própria fechada. */ html[data-theme="dark"] { --bg: #0A0A0D; --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .07); --border: rgba(255, 255, 255, .08); --hair: rgba(255, 255, 255, .055); --surface-solid: #17171C; /* p/ modais e dropdowns que cobrem conteúdo */ --border-hover: rgba(250, 190, 18, .35); --text: #ECEAE2; --muted: #8E8E99; --muted-2: #5F5F69; --gold-deep: #E8B923; --gold-tint: #241E0C; --gold-line: #463A16; --pos: #5FCF86; --pos-soft: rgba(95, 207, 134, .12); --neg: #F08A72; --neg-soft: rgba(240, 138, 114, .12); --ring-track: rgba(255, 255, 255, .09); --sh-sm: 0 2px 10px rgba(0, 0, 0, .4); --sh-md: 0 12px 34px rgba(0, 0, 0, .5); --sh-gold: 0 8px 26px rgba(250, 190, 18, .16); /* legado */ --border-warm: #28282F; --gold-soft-a: #241E0C; --gold-soft-b: #332A0E; --gold-soft-border: #463A16; --gold-text: #E8B923; --gold-track: #463A16; --gold-dark: #E8B923; --green-soft: #12271B; --red-soft: #2A1712; --green: #5FCF86; --red: #F08A72; --orange: #E8B923; --c-green600: #5FCF86; --c-green500: #5FCF86; --c-red600: #F08A72; --c-red500: #F08A72; --c-amber: #E8B923; /* sombras do portal.css recalibradas p/ fundo escuro */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4); --shadow-md: 0 12px 34px rgba(0, 0, 0, .5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35); --shadow-gold: 0 8px 26px rgba(250, 190, 18, .16); } /* Transição suave só durante o toggle (classe temporária via theme.js) */ html.am-theme-anim, html.am-theme-anim *, html.am-theme-anim *::before, html.am-theme-anim *::after { transition: background-color .28s cubic-bezier(.4, 0, .2, 1), color .28s cubic-bezier(.4, 0, .2, 1), border-color .28s cubic-bezier(.4, 0, .2, 1), box-shadow .2s !important; } /* ── VIDRO CONTÍNUO: o "céu" único atrás de tudo ──────────────────── */ /* body::before fixo pinta o ambiente (calor dourado que emana da lateral e se dissolve). Excluímos o admin (dark-first próprio, opaco). */ html[data-theme="dark"] body { background: var(--bg); color: var(--text); } html[data-theme="dark"] body:not(:has(.adm-topbar))::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1400px 900px at 0% 0%, rgba(250, 190, 18, .13), transparent 50%), radial-gradient(1100px 700px at 100% 30%, rgba(120, 90, 10, .08), transparent 55%), radial-gradient(900px 900px at 30% 120%, rgba(250, 190, 18, .05), transparent 55%), linear-gradient(150deg, #0D0D11 0%, #0A0A0D 50%, #0C0B07 100%); } html[data-theme="light"] body:not(:has(.adm-topbar))::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1400px 900px at 0% 0%, rgba(250, 190, 18, .10), transparent 50%), radial-gradient(1100px 700px at 100% 30%, rgba(201, 154, 14, .06), transparent 55%), linear-gradient(160deg, #F5F1E8 0%, #F1EDE4 45%, #EFE7D6 100%); } /* Superfícies de vidro: blur + fio de luz nos containers principais. (lista contida de propósito — blur em excesso pesa na GPU) */ html[data-theme="dark"] :is(.card, .w-card, .stats, .banner, #previsao-widget, #dash-toolbar, #plano-estudos-widget > div, .diag-banner) { backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } html[data-theme="dark"] #previsao-widget { background: rgba(255, 255, 255, .045) !important; border: 1px solid rgba(255, 255, 255, .08); } /* Sidebar vira painel de vidro sobre o mesmo céu — sem emenda dura */ html[data-theme="dark"] .sidebar { background: rgba(8, 8, 10, .40) !important; backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border-right: none !important; box-shadow: none !important; } /* Sobreposições precisam ser OPACAS (flutuam sobre página translúcida) */ html[data-theme="dark"] :is(.custom-panel, .welcome-modal-card, .nav-block-box, .fase-confirm-box, .busca-box, .notif-dropdown) { background: var(--surface-solid, #17171C) !important; } @supports not (backdrop-filter: blur(1px)) { html[data-theme="dark"] { --surface: #15151A; --surface-2: #1C1C22; } html[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #0A0A0A 0%, #141414 58%, #241C00 100%) !important; } } html[data-theme="dark"] .topbar { background: rgba(21, 21, 26, .62) !important; backdrop-filter: blur(22px) saturate(1.8) !important; -webkit-backdrop-filter: blur(22px) saturate(1.8) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } @supports not (backdrop-filter: blur(1px)) { html[data-theme="dark"] .topbar { background: var(--surface) !important; } } html[data-theme="dark"] .topbar h1 { color: var(--text); } /* Formulários */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--surface-2); color: var(--text); border-color: var(--border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted-2); } /* Tabelas e divisórias */ html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--border); } html[data-theme="dark"] hr { border-color: var(--border); } /* Scrollbar */ html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33333c; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } html[data-theme="dark"] ::selection { background: rgba(250, 190, 18, .35); } /* Skeletons de boot (shimmer claro fica cegante no escuro) */ html[data-theme="dark"] .skel-row, html[data-theme="dark"] .skel-section, html[data-theme="dark"] [class*="skel"] { background: linear-gradient(90deg, #1B1B21 25%, #23232B 50%, #1B1B21 75%) !important; background-size: 200% 100% !important; } /* ── MODO ESCURO — shell mobile (mobile-app.css, ≤768px) ─────────── */ @media (max-width: 768px) { html[data-theme="dark"].am-pre body { background: var(--bg) !important; } html[data-theme="dark"] .am-tabbar { background: #15151A; border-color: rgba(255, 255, 255, .09); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); } html[data-theme="dark"] .am-h-streak, html[data-theme="dark"] .am-card, html[data-theme="dark"] .am-tile, html[data-theme="dark"] .am-sheet, html[data-theme="dark"] .am-sheet-item, html[data-theme="dark"] .ams-head, html[data-theme="dark"] .ams-bar, html[data-theme="dark"] .ams-card, html[data-theme="dark"] .ams-tip, html[data-theme="dark"] .ams-pager button, html[data-theme="dark"] .ams-alt, html[data-theme="dark"] .ams-prog-wrap, html[data-theme="dark"] .ams-group, html[data-theme="dark"] .ams-row, html[data-theme="dark"] .ams-cover-head, html[data-theme="dark"] .ams-choice, html[data-theme="dark"] .ams-ta, html[data-theme="dark"] .ams-proc-card { background: var(--surface); border-color: var(--border); color: var(--text); } html[data-theme="dark"] .am-skel { background: linear-gradient(90deg, #1B1B21 25%, #23232B 50%, #1B1B21 75%); background-size: 200% 100%; } } /* ── MODO CLARO — vidro contínuo (mesma linguagem do escuro) ──────── */ html[data-theme="light"] { --surface: rgba(255, 255, 255, .66); --surface-2: rgba(255, 255, 255, .55); --border: rgba(23, 19, 11, .09); --hair: rgba(23, 19, 11, .06); --ring-track: rgba(23, 19, 11, .09); --surface-solid: #FFFFFF; } html[data-theme="light"] :is(.card, .w-card, .stats, #dash-toolbar, #plano-estudos-widget > div) { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); } html[data-theme="light"] :is(.custom-panel, .welcome-modal-card, .nav-block-box, .fase-confirm-box) { background: var(--surface-solid, #FFFFFF) !important; } @supports not (backdrop-filter: blur(1px)) { html[data-theme="light"] { --surface: #FFFFFF; --surface-2: #FBF9F4; } } /* ── ADMIN (dark-first): MODO CLARO ───────────────────────────────── */ html[data-theme="light"] { --adm-bg: #F1EDE4; --adm-card: #FFFFFF; --adm-card2: #FBF9F4; --adm-border: #E8E4DA; --adm-muted: #7C7668; --adm-text: #17130B; /* o "foreground branco translúcido" do admin vira tinta escura no claro */ --fg-rgb: 23, 19, 11; } /* Tokens dark do admin (default e modo escuro) — Editorial dark-first */ html[data-theme="dark"] { --adm-bg: #0A0A0C; --adm-card: #111114; --adm-card2: #17171B; --adm-border: rgba(255, 255, 255, .09); --adm-muted: rgba(255, 255, 255, .48); --adm-text: #F1F0EC; } /* ── BOTÃO DE TEMA (☀️/🌙) — injetado pelo theme.js ──────────────── */ .am-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--border, rgba(0, 0, 0, .08)); background: var(--surface-2, rgba(0, 0, 0, .03)); color: var(--muted, #7C7668); cursor: pointer; transition: all .2s ease; padding: 0; flex-shrink: 0; } .am-theme-btn:hover { background: var(--gold-tint, rgba(250, 190, 18, .1)); border-color: var(--gold-line, rgba(250, 190, 18, .35)); color: var(--gold-deep, #b8860b); transform: translateY(-1px); } .am-theme-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .am-theme-btn .am-ic-sun { display: none; } .am-theme-btn .am-ic-moon { display: block; } html[data-theme="dark"] .am-theme-btn .am-ic-sun { display: block; } html[data-theme="dark"] .am-theme-btn .am-ic-moon { display: none; } /* Fallback flutuante (páginas sem topbar: login, registro, termos…) */ .am-theme-btn-fixed { position: fixed; top: 16px; right: 16px; z-index: 500; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0, 0, 0, .12); } html[data-theme="dark"] .am-theme-btn-fixed { background: rgba(21, 21, 26, .85); box-shadow: 0 2px 12px rgba(0, 0, 0, .5); }