/* ========================================================================= Tema claro do portal. Folha aditiva: o CSS original não foi tocado. Quase tudo aqui é só redefinição das variáveis de cor — o resto do site é feito de var(), então trocar a paleta já vira o tema inteiro. O que precisa de regra própria são os pontos onde a cor está escrita à mão no CSS antigo: fundo preto translúcido (rgba(0,0,0,…)) para "afundar" um bloco e branco translúcido (rgba(255,255,255,…)) para "levantar". No claro os dois invertem de papel — sem isso, aparece texto escuro sobre bloco escuro, que é o único jeito de ficar ilegível. Escopo em `html.tema-claro` (e não no body) porque a classe é aplicada pelo tema.js ainda dentro do : assim a página já nasce clara, sem aquele lampejo escuro antes de carregar. ========================================================================= */ html.tema-claro { --bg-dark: #f4f6fb; --bg-panel: rgba(255, 255, 255, 0.88); --bg-card: #ffffff; --bg-input: #ffffff; --border-light: rgba(15, 23, 42, 0.12); --border-active: rgba(99, 102, 241, 0.55); --text-main: #0f172a; --text-muted: #4b5563; --text-dim: #737f96; --shadow-main: 0 12px 30px rgba(15, 23, 42, 0.09); /* usados pelas regras abaixo, para não repetir número mágico */ --claro-afunda: rgba(15, 23, 42, 0.045); --claro-realce: rgba(15, 23, 42, 0.07); --claro-codigo: rgba(15, 23, 42, 0.06); --claro-trilho: rgba(15, 23, 42, 0.10); --claro-veu: rgba(15, 23, 42, 0.45); } html.tema-claro body { background-color: var(--bg-dark); /* o mesmo brilho de canto do tema escuro, mas discreto: fundo claro satura muito mais, e no forte vira lilás em vez de branco */ background-image: radial-gradient(at 10% 8%, rgba(99, 102, 241, 0.10) 0px, transparent 46%), radial-gradient(at 90% 92%, rgba(236, 72, 153, 0.07) 0px, transparent 46%); color: var(--text-main); } /* ---- barra de rolagem ---- */ html.tema-claro ::-webkit-scrollbar-track { background: var(--claro-afunda); } html.tema-claro ::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); } html.tema-claro ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ---- botões e realces de passar o mouse ---- */ html.tema-claro .btn-secondary { background: var(--claro-realce); color: var(--text-main); } html.tema-claro .btn-secondary:hover { background: rgba(15, 23, 42, 0.12); } html.tema-claro .icon-btn:hover { background: var(--claro-realce); } html.tema-claro .nav-tab:hover { background: var(--claro-afunda); } html.tema-claro .list-item:hover { background: var(--claro-afunda); } html.tema-claro .ai-conv-open:hover { background: var(--claro-afunda); } html.tema-claro .ai-tool-chip { background: var(--claro-afunda); } /* ---- blocos "afundados" ---- */ html.tema-claro .user-card-footer, html.tema-claro .comments-section, html.tema-claro .auth-tabs, html.tema-claro .topbar-cs2-banner, html.tema-claro .cs2-ip-display, html.tema-claro .historico-explicacao, html.tema-claro .ia-progresso-previa { background: var(--claro-afunda); } html.tema-claro .auth-tab-btn.active { background: #fff; color: var(--text-main); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); } /* ---- campos e blocos de código ---- */ html.tema-claro .form-control, html.tema-claro .ai-prompt-select { background: #fff; color: var(--text-main); } html.tema-claro .ai-bubble code, html.tema-claro .ai-md code, html.tema-claro .notas-conteudo code, html.tema-claro .modelo-fixo code, html.tema-claro .ai-tool-args, html.tema-claro .ai-tool-out, html.tema-claro kbd { background: var(--claro-codigo); color: var(--text-main); } html.tema-claro .ai-md a { color: #2563eb; } html.tema-claro .ai-hint-tip { border-top-color: var(--border-light); } html.tema-claro .trecho-linha { border-bottom-color: var(--border-light); } /* ---- trilhos de barra de progresso ---- */ html.tema-claro .flash-barra, html.tema-claro .foco-barra-valor.vazia, html.tema-claro .aula-medidor-caixa { background: var(--claro-trilho); } /* ---- véus de janela ---- */ html.tema-claro .modal-overlay, html.tema-claro .mobile-sidebar-backdrop, html.tema-claro .janela { background: var(--claro-veu); } /* ---- a barra de baixo do celular ---- Ela é uma faixa sólida escura no CSS antigo, mas o texto dela vem de var(--text-muted): no claro seria cinza-escuro sobre preto. É o ponto mais fácil de deixar passar, porque só aparece no telefone. */ html.tema-claro .nav-inferior { background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--border-light); box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.06); } /* ---- etiquetas de texto claro pensadas para fundo escuro ---- */ html.tema-claro .ai-tag, html.tema-claro .topico-tag, html.tema-claro .ai-tool-head { color: #4338ca; } html.tema-claro .notas-conteudo h2, html.tema-claro .notas-conteudo h3, html.tema-claro .notas-conteudo h4, html.tema-claro .notas-conteudo h5 { color: #3730a3; } html.tema-claro .flash-verso { color: #312e81; } html.tema-claro .ai-tag-admin { color: #9d174d; } html.tema-claro .busca-trecho mark { background: rgba(236, 72, 153, 0.22); color: #831843; } /* ---- texto colorido que some no branco ---- */ html.tema-claro .auth-error, html.tema-claro .auth-alert, html.tema-claro .erro-inline, html.tema-claro .txt-erro, html.tema-claro .aula-card-erro, html.tema-claro .ai-mcp-error, html.tema-claro .ai-pill-rec, html.tema-claro .recado.erro, html.tema-claro .fila-item.erro, html.tema-claro .estado-voz.erro { color: #b91c1c; } /* o original é !important; só um !important derruba o outro */ html.tema-claro .auth-alert-error { color: #b91c1c !important; } html.tema-claro .ip-text, html.tema-claro .ai-warn, html.tema-claro .cs2-ip-display code, html.tema-claro .arq-meta .aberto { color: #b45309; } html.tema-claro .btn-copy-widget { background: var(--claro-realce); color: var(--text-main); } /* ---- cards de ferramentas e itens da sidebar no tema claro ---- */ html.tema-claro .item-row { background: #ffffff; border-color: rgba(15, 23, 42, 0.09); color: var(--text-main); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } html.tema-claro .item-row:link, html.tema-claro .item-row:visited { color: var(--text-main); } html.tema-claro .item-row:hover { background: #f8fafc; border-color: rgba(99, 102, 241, 0.4); color: var(--text-main); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); } html.tema-claro .item-row.active { background: rgba(99, 102, 241, 0.08); border-color: var(--primary); } html.tema-claro .item-name { color: #0f172a; } html.tema-claro .item-sub { color: #64748b; } html.tema-claro .item-icon { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.07); } html.tema-claro .ferramenta-seta { color: #94a3b8; } html.tema-claro .ferramenta-card:hover .ferramenta-seta { color: var(--primary); } /* Ícones temáticos com contraste suave e vívido no claro */ html.tema-claro .icone-arquivos { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.25); } html.tema-claro .icone-relogio { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.25); } html.tema-claro .icone-transcrever { background: rgba(6, 182, 212, 0.12); border-color: rgba(6, 182, 212, 0.25); } html.tema-claro .icone-cambio { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.25); } html.tema-claro .icone-voz { background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.25); } html.tema-claro .icone-horario { background: rgba(236, 72, 153, 0.12); border-color: rgba(236, 72, 153, 0.25); } /* Botão de instalação no tema claro */ html.tema-claro .btn-instalar { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08)); border-color: rgba(99, 102, 241, 0.3); color: #0f172a; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08); } html.tema-claro .btn-instalar:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(236, 72, 153, 0.14)); border-color: rgba(236, 72, 153, 0.45); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.14); } html.tema-claro .btn-instalar strong { color: #0f172a; } html.tema-claro .btn-instalar small { color: #64748b; } html.tema-claro .btn-instalar .instalar-icone { background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(236, 72, 153, 0.18)); border-color: rgba(99, 102, 241, 0.2); } /* ---- suporte tema claro: dashboard, biblioteca, disciplinas, aula ---- */ html.tema-claro .dash-atalho-btn, html.tema-claro .dash-card-painel, html.tema-claro .dash-disc-card, html.tema-claro .aula-card, html.tema-claro .disc-stat-box, html.tema-claro .painel-radar, html.tema-claro .painel-pontos-importantes, html.tema-claro .painel-info-rapida, html.tema-claro .painel-acoes-inteligentes, html.tema-claro .tr-linha-interativa, html.tema-claro .aula-resumo-conteudo, html.tema-claro .topico-card, html.tema-claro .arquivo-item-card, html.tema-claro .tabela-aulas-container { background: #ffffff; border-color: rgba(15, 23, 42, 0.09); color: var(--text-main); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04); } html.tema-claro .dash-aula-mini-card, html.tema-claro .revisar-amostra-item, html.tema-claro .metrica-quadro, html.tema-claro .btn-acao-ia { background: #f8fafc; border-color: rgba(15, 23, 42, 0.09); } html.tema-claro .radar-trilho { background: rgba(15, 23, 42, 0.08); } html.tema-claro .topico-chip-mini { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.09); color: #475569; } html.tema-claro .btn-hover-acao { background: #ffffff; border-color: rgba(15, 23, 42, 0.12); color: #0f172a; } html.tema-claro .btn-hover-acao:hover { background: var(--primary); color: #ffffff; } html.tema-claro .tr-texto-conteudo { color: #0f172a; } html.tema-claro .revisar-alerta-banner { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(236, 72, 153, 0.08)); } /* ========================================================================= Botão de trocar o tema. Existe nos dois temas, então fica fora do escopo .tema-claro. ========================================================================= */ .btn-tema { background: none; border: 1px solid var(--border-light); color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 7px 9px; border-radius: var(--radius-sm, 8px); } .btn-tema:hover { color: var(--text-main); border-color: var(--border-active); } /* Nas páginas de ferramenta ele entra ao lado do "voltar ao portal". */ .btn-tema.solto { margin-left: 10px; vertical-align: middle; position: relative; top: -2px; }