/* ══════════════════════════════════════════════════════════════════════════
TEMA — fonte unica de verdade das cores do Afrodite.
Regra da casa (a mesma do Apolo e do Argos): nenhum hex fora deste arquivo.
O hermes.css e o login.css consomem so var(--...). Quem precisar de uma cor
nova declara o token aqui e usa o token la.
Claro e escuro saem do atributo data-tema no , escrito pelo
script/tema.js. Sao tres preferencias — 'auto' (o padrao, que segue o
aparelho), 'claro' e 'escuro' — e o seletor fica na barra de topo.
Repare que NAO ha @media (prefers-color-scheme) aqui: quem consulta o
aparelho e o tema.js, e so quando a preferencia e 'auto'. Se o CSS tambem
consultasse, a paleta escura teria de ser escrita duas vezes (uma no @media,
outra no [data-tema=escuro]) e as duas copias divergiriam na primeira
manutencao. A contrapartida e depender de JS para ter cor — o que aqui nao
custa nada, porque sem JS o Afrodite nao monta tela nenhuma.
Os tokens --cor-* trocam de valor no bloco [data-tema="escuro"]. Por isso a
ponte para as variaveis --bs-* do Bootstrap mora num unico bloco :root:
ela aponta para os tokens, e os tokens e que viram claro ou escuro. Um lugar
so para mexer.
Por que a ponte funciona: o Bootstrap declara os --bs-* em :root E em
[data-bs-theme="dark"], e os dois seletores tem a mesma especificidade. Como
este arquivo carrega DEPOIS do bootstrap.min.css, o desempate por ordem de
origem cai para ca. Se um dia o tema.css subir para antes do Bootstrap no
, a ponte para de valer sem erro nenhum — so volta a cor de fabrica.
══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────────
1. TOKENS — CLARO (padrao)
───────────────────────────────────────────────────────────────────────── */
:root {
/* Pinta formulario nativo, barra de rolagem e fundo do canvas no tema
CERTO. Tem de ser o tema resolvido, e nao "light dark": com o aparelho no
escuro e a pessoa tendo escolhido claro, "light dark" deixaria o campo
nativo escuro dentro de uma tela clara. */
color-scheme: light;
/* Superficies, do fundo da pagina para o topo da pilha */
--cor-fundo: #eef2f7;
--cor-fundo-alt: #e3e9f0;
--cor-superficie: #ffffff;
--cor-superficie-alt: #f7f9fc;
--cor-superficie-tenue: #f1f5f9;
/* Barra de topo e menu lateral: translucidos sobre o fundo */
--cor-chrome: rgba(255, 255, 255, 0.82);
--cor-chrome-solido: #ffffff;
/* Bordas. --cor-borda separa (decorativa); --cor-borda-forte desenha o
contorno de campo e de botao, e por isso precisa de 3:1 contra a
superficie (WCAG 1.4.11) — dai ela ser bem mais escura do que a
borda cinza-clarinha de praxe. */
--cor-borda: #e2e8f0;
--cor-borda-forte: #8593a8;
--cor-borda-tenue: #eef2f7;
/* Texto, do mais forte ao mais apagado. Os tres primeiros passam 4.5:1
sobre superficie E sobre o fundo da pagina; o -desabil e so placeholder
e icone, com o minimo 3:1 de elemento de interface. */
--cor-texto: #0f172a;
--cor-texto-suave: #475569;
--cor-texto-tenue: #556071;
--cor-texto-desabil: #7d8b9f;
/* Acento — a cor da marca. Familia sky, vizinha do slate do resto.
E o sky-700, e nao o 600 mais vivo: o 600 da 4.10:1 sobre branco, e ele
e usado como TEXTO (link, item ativo do menu, titulo do login), nao so
como fundo de botao. */
--cor-acento: #0369a1;
--cor-acento-forte: #075985;
--cor-acento-claro: #38bdf8;
--cor-acento-tenue: rgba(3, 105, 161, 0.09);
--cor-acento-tenue-2: rgba(3, 105, 161, 0.16);
--cor-acento-anel: rgba(3, 105, 161, 0.20);
--cor-sobre-acento: #ffffff;
/* Semanticas. Cada cor tem dois papeis, e eles pedem coisas opostas:
--cor-X e o PREENCHIMENTO (botao, etiqueta), com --cor-sobre-X escrito
por cima; a mesma --cor-X tambem serve de TEXTO sobre a superficie
(toast, alerta, botao contornado).
Verde, vermelho e ciano fecham os dois papeis num tom so. O ambar nao:
escuro o bastante para ser lido sobre branco, ele deixa de aceitar texto
escuro por cima. Por isso — e so por isso — existe --cor-aviso-texto. */
--cor-sucesso: #15803d;
--cor-sucesso-tenue: rgba(21, 128, 61, 0.10);
--cor-sobre-sucesso: #ffffff;
--cor-perigo: #dc2626;
--cor-perigo-tenue: rgba(220, 38, 38, 0.10);
--cor-sobre-perigo: #ffffff;
--cor-aviso: #d97706;
--cor-aviso-texto: #a04708;
--cor-aviso-tenue: rgba(217, 119, 6, 0.12);
--cor-sobre-aviso: #2a1a02;
--cor-info: #0e7490;
--cor-info-tenue: rgba(14, 116, 144, 0.10);
--cor-sobre-info: #ffffff;
--cor-neutro: #64748b;
--cor-neutro-tenue: rgba(100, 116, 139, 0.12);
--cor-sobre-neutro: #ffffff;
/* Os mesmos tons em tripla R,G,B. Nao e duplicacao por desleixo: os
utilitarios do Bootstrap (.text-primary, .bg-primary, .border-primary)
sao montados como rgba(var(--bs-primary-rgb), var(--bs-text-opacity)),
e rgba() nao aceita um hex dentro. Sem a tripla, nao ha como reapontar
esses utilitarios para a paleta — e eles ficariam no azul de fabrica,
que sobre o fundo escuro nao passa contraste. */
/* Segundo nivel de veu de cada semantica: a linha contextual da tabela usa
o primeiro como fundo e este como realce sob o cursor. */
--cor-sucesso-tenue-2: rgba(21, 128, 61, 0.18);
--cor-perigo-tenue-2: rgba(220, 38, 38, 0.18);
--cor-aviso-tenue-2: rgba(217, 119, 6, 0.20);
--cor-info-tenue-2: rgba(14, 116, 144, 0.18);
--cor-neutro-tenue-2: rgba(100, 116, 139, 0.20);
--cor-acento-rgb: 3, 105, 161;
--cor-sucesso-rgb: 21, 128, 61;
--cor-perigo-rgb: 220, 38, 38;
--cor-aviso-rgb: 217, 119, 6;
--cor-info-rgb: 14, 116, 144;
--cor-neutro-rgb: 100, 116, 139;
/* Escala de conceito do diario (A..I). Fundo tenue + texto forte da mesma
matiz: legivel nos dois temas sem depender de branco. */
--cor-conceito-a-bg: rgba(22, 163, 74, 0.14);
--cor-conceito-a-fg: #166534;
--cor-conceito-b-bg: rgba(3, 105, 161, 0.14);
--cor-conceito-b-fg: #0369a1;
--cor-conceito-c-bg: rgba(217, 119, 6, 0.16);
--cor-conceito-c-fg: #92400e;
--cor-conceito-d-bg: rgba(220, 38, 38, 0.13);
--cor-conceito-d-fg: #b91c1c;
--cor-conceito-e-bg: rgba(15, 23, 42, 0.10);
--cor-conceito-e-fg: #1e293b;
--cor-conceito-i-bg: rgba(100, 116, 139, 0.14);
--cor-conceito-i-fg: #475569;
/* Sombras. Duas camadas: uma rasa para desenhar a borda, uma difusa para a
altura. Uma sombra sozinha sempre parece suja. */
--sombra-1: 0 1px 2px rgba(15, 23, 42, 0.04),
0 1px 3px rgba(15, 23, 42, 0.06);
--sombra-2: 0 1px 2px rgba(15, 23, 42, 0.04),
0 4px 12px rgba(15, 23, 42, 0.07);
--sombra-3: 0 2px 4px rgba(15, 23, 42, 0.05),
0 12px 32px rgba(15, 23, 42, 0.12);
--sombra-4: 0 4px 8px rgba(15, 23, 42, 0.06),
0 24px 56px rgba(15, 23, 42, 0.18);
/* Raios */
--raio-xs: 6px;
--raio-sm: 8px;
--raio-md: 10px;
--raio-lg: 14px;
--raio-xl: 20px;
--raio-pill: 999px;
/* Movimento */
--transicao: 150ms cubic-bezier(0.4, 0, 0.2, 1);
/* Tipografia. Sem fonte de CDN: o CSP nao libera o Google Fonts, e a pilha
do sistema ja entrega Segoe UI no Windows, que e onde a escola roda. */
--fonte: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
"Roboto", "Helvetica Neue", Arial, sans-serif;
--fonte-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", monospace;
}
/* ─────────────────────────────────────────────────────────────────────────
2. TOKENS — ESCURO
So os tokens mudam. Nenhuma regra de componente e reescrita aqui.
O atributo e escrito pelo script/tema.js; ver o cabecalho do arquivo.
───────────────────────────────────────────────────────────────────────── */
:root[data-tema="escuro"] {
color-scheme: dark;
--cor-fundo: #0a0f1c;
--cor-fundo-alt: #0f172a;
--cor-superficie: #151d2f;
--cor-superficie-alt: #1b2436;
--cor-superficie-tenue: #1e293b;
--cor-chrome: rgba(15, 23, 42, 0.78);
--cor-chrome-solido: #0f172a;
--cor-borda: rgba(148, 163, 184, 0.16);
/* Solido, e nao rgba: a 30% de opacidade sobre a superficie escura a
borda dava 1.74:1, e contorno de campo precisa de 3:1 para a pessoa
saber onde termina o controle. */
--cor-borda-forte: #64748b;
--cor-borda-tenue: rgba(148, 163, 184, 0.09);
--cor-texto: #f1f5f9;
--cor-texto-suave: #cbd5e1;
--cor-texto-tenue: #94a3b8;
--cor-texto-desabil: #64748b;
/* No escuro o acento clareia: sky-600 sobre #0a0f1c nao passa contraste. */
--cor-acento: #38bdf8;
--cor-acento-forte: #7dd3fc;
--cor-acento-claro: #67e8f9;
--cor-acento-tenue: rgba(56, 189, 248, 0.12);
--cor-acento-tenue-2: rgba(56, 189, 248, 0.20);
--cor-acento-anel: rgba(56, 189, 248, 0.22);
--cor-sobre-acento: #04121f;
--cor-sucesso: #4ade80;
--cor-sucesso-tenue: rgba(74, 222, 128, 0.14);
--cor-sobre-sucesso: #04210f;
--cor-perigo: #f87171;
--cor-perigo-tenue: rgba(248, 113, 113, 0.14);
--cor-sobre-perigo: #2b0707;
--cor-aviso: #fbbf24;
/* No escuro o ambar claro ja da 10:1 sobre a superficie: os dois papeis
cabem no mesmo tom, e o token existe so para o CSS nao ter de saber em
qual tema esta. */
--cor-aviso-texto: #fbbf24;
--cor-aviso-tenue: rgba(251, 191, 36, 0.15);
--cor-sobre-aviso: #2a1a02;
--cor-info: #22d3ee;
--cor-info-tenue: rgba(34, 211, 238, 0.14);
--cor-sobre-info: #04212a;
--cor-neutro: #94a3b8;
--cor-neutro-tenue: rgba(148, 163, 184, 0.16);
--cor-sobre-neutro: #0f172a;
--cor-sucesso-tenue-2: rgba(74, 222, 128, 0.22);
--cor-perigo-tenue-2: rgba(248, 113, 113, 0.22);
--cor-aviso-tenue-2: rgba(251, 191, 36, 0.22);
--cor-info-tenue-2: rgba(34, 211, 238, 0.22);
--cor-neutro-tenue-2: rgba(148, 163, 184, 0.24);
--cor-acento-rgb: 56, 189, 248;
--cor-sucesso-rgb: 74, 222, 128;
--cor-perigo-rgb: 248, 113, 113;
--cor-aviso-rgb: 251, 191, 36;
--cor-info-rgb: 34, 211, 238;
--cor-neutro-rgb: 148, 163, 184;
--cor-conceito-a-bg: rgba(74, 222, 128, 0.18);
--cor-conceito-a-fg: #86efac;
--cor-conceito-b-bg: rgba(56, 189, 248, 0.18);
--cor-conceito-b-fg: #7dd3fc;
--cor-conceito-c-bg: rgba(251, 191, 36, 0.18);
--cor-conceito-c-fg: #fcd34d;
--cor-conceito-d-bg: rgba(248, 113, 113, 0.18);
--cor-conceito-d-fg: #fca5a5;
--cor-conceito-e-bg: rgba(226, 232, 240, 0.14);
--cor-conceito-e-fg: #e2e8f0;
--cor-conceito-i-bg: rgba(148, 163, 184, 0.18);
--cor-conceito-i-fg: #cbd5e1;
/* No escuro a sombra some — a altura passa a ser dada pela borda clara.
Por isso as sombras ficam mais fundas e menos espalhadas. */
--sombra-1: 0 1px 2px rgba(0, 0, 0, 0.40);
--sombra-2: 0 2px 6px rgba(0, 0, 0, 0.42);
--sombra-3: 0 8px 24px rgba(0, 0, 0, 0.50);
--sombra-4: 0 20px 48px rgba(0, 0, 0, 0.60);
}
/* ─────────────────────────────────────────────────────────────────────────
3. PONTE PARA O BOOTSTRAP
Um bloco so: aponta para os tokens, que ja trocam com o data-tema.
───────────────────────────────────────────────────────────────────────── */
:root {
--bs-body-bg: var(--cor-fundo);
--bs-body-color: var(--cor-texto);
--bs-body-font-family: var(--fonte);
--bs-emphasis-color: var(--cor-texto);
--bs-secondary-color: var(--cor-texto-suave);
--bs-tertiary-color: var(--cor-texto-tenue);
--bs-secondary-bg: var(--cor-superficie-tenue);
--bs-tertiary-bg: var(--cor-fundo-alt);
--bs-border-color: var(--cor-borda);
--bs-heading-color: var(--cor-texto);
--bs-link-color: var(--cor-acento);
--bs-link-hover-color: var(--cor-acento-forte);
--bs-border-radius: var(--raio-md);
--bs-border-radius-sm: var(--raio-sm);
--bs-border-radius-lg: var(--raio-lg);
--bs-code-color: var(--cor-acento);
--bs-font-monospace: var(--fonte-mono);
/* Cores semanticas: o par hex + tripla existe porque o Bootstrap usa o hex
em alguns lugares e a tripla nos utilitarios. O bloco [data-bs-theme=dark]
dele NAO mexe nos --bs-*-rgb — sem estas linhas, .text-primary continuaria
no azul #0d6efd sobre o fundo escuro, com 3.2:1. */
--bs-primary: var(--cor-acento);
--bs-primary-rgb: var(--cor-acento-rgb);
--bs-success: var(--cor-sucesso);
--bs-success-rgb: var(--cor-sucesso-rgb);
--bs-danger: var(--cor-perigo);
--bs-danger-rgb: var(--cor-perigo-rgb);
--bs-warning: var(--cor-aviso);
--bs-warning-rgb: var(--cor-aviso-rgb);
--bs-info: var(--cor-info);
--bs-info-rgb: var(--cor-info-rgb);
--bs-secondary: var(--cor-neutro);
--bs-secondary-rgb: var(--cor-neutro-rgb);
--bs-link-color-rgb: var(--cor-acento-rgb);
}
/* ─────────────────────────────────────────────────────────────────────────
3b. PONTE PARA O ADMINLTE
Isto nao e enfeite: sem esta ponte o menu lateral ignora o tema.
O AdminLTE 4 pinta o menu com seletores mais especificos que os nossos —
`.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover)`
soma seis classes, contra tres de `.sidebar-menu .nav-link.active`. Brigar
por especificidade seria uma escalada de !important sem fim.
Mas ele le a cor de variaveis --lte-*. Reapontando as variaveis, as regras
dele continuam vencendo a disputa — e desenham com a nossa paleta.
E aqui vai por ID, e nao por :root, por um detalhe que quebra em silencio:
variavel de CSS resolve pelo ancestral MAIS PROXIMO que a declara, nao por
especificidade global. O AdminLTE declara os --lte-sidebar-* no proprio
`.app-sidebar`, entao um :root nosso nunca seria consultado — o elemento ja
tem valor local. E ele ainda declara de novo em
`[data-bs-theme=dark] .app-sidebar`, que sao duas classes.
`#app-sidebar` (o id ja esta no index.html) resolve os dois problemas de uma
vez: mesmo elemento, e um ID vence qualquer quantidade de classes nos dois
temas, sem depender de ordem de arquivo.
───────────────────────────────────────────────────────────────────────── */
#app-sidebar {
--lte-sidebar-color: var(--cor-texto-suave);
--lte-sidebar-hover-color: var(--cor-texto);
--lte-sidebar-hover-bg: var(--cor-superficie-tenue);
--lte-sidebar-active-color: var(--cor-acento);
--lte-sidebar-menu-active-color: var(--cor-acento);
--lte-sidebar-menu-active-bg: var(--cor-acento-tenue);
--lte-sidebar-header-color: var(--cor-texto-tenue);
--lte-sidebar-submenu-color: var(--cor-texto-tenue);
--lte-sidebar-submenu-hover-color: var(--cor-texto);
--lte-sidebar-submenu-hover-bg: var(--cor-superficie-tenue);
--lte-sidebar-submenu-active-color: var(--cor-acento);
--lte-sidebar-submenu-active-bg: var(--cor-acento-tenue);
--lte-sidebar-submenu-bg: transparent;
}
/* ─────────────────────────────────────────────────────────────────────────
4. BASE
───────────────────────────────────────────────────────────────────────── */
body {
font-family: var(--fonte);
background-color: var(--cor-fundo);
color: var(--cor-texto);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--cor-texto);
font-weight: 600;
letter-spacing: -0.011em;
}
/* text-muted e da era pre-5.3 e nao troca com o tema; o projeto usa em 17
lugares. Reapontar sai mais barato e mais seguro que trocar a classe em 17
arquivos. Vale para .text-secondary tambem. */
.text-muted,
.text-secondary {
color: var(--cor-texto-tenue) !important;
}
hr {
border-color: var(--cor-borda);
opacity: 1;
}
/* Foco visivel unico em toda a aplicacao. */
:focus-visible {
outline: 2px solid var(--cor-acento);
outline-offset: 2px;
}
::selection {
background-color: var(--cor-acento-tenue-2);
color: var(--cor-texto);
}
/* Barra de rolagem no tom do tema. Firefox pelo padrao, WebKit pelo prefixo. */
* {
scrollbar-color: var(--cor-borda-forte) transparent;
scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background-color: var(--cor-borda-forte);
border: 2px solid transparent;
border-radius: var(--raio-pill);
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--cor-texto-desabil); }
::-webkit-scrollbar-corner { background: transparent; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────
5. CASCA DA APLICACAO (AdminLTE)
O markup do index.html perdeu as classes bg-dark/navbar-dark: barra preta
fixa nao tem como virar clara. Aqui a casca e pintada por token, entao topo
e menu acompanham o tema sem classe condicional no HTML.
───────────────────────────────────────────────────────────────────────── */
/* --- Barra de topo --- */
.app-header.navbar {
background-color: var(--cor-chrome);
border-bottom: 1px solid var(--cor-borda);
box-shadow: none;
/* O blur precisa de fundo translucido; onde nao ha suporte o
--cor-chrome-solido do @supports abaixo assume. */
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
min-height: 56px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.app-header.navbar { background-color: var(--cor-chrome-solido); }
}
.app-header .nav-link {
color: var(--cor-texto-suave);
border-radius: var(--raio-sm);
padding: 0.45rem 0.6rem;
margin: 0 0.1rem;
transition: background-color var(--transicao), color var(--transicao);
}
.app-header .nav-link:hover,
.app-header .nav-link:focus {
color: var(--cor-acento);
background-color: var(--cor-acento-tenue);
}
/* A sigla SLR e a marca no topo: fica no tom do texto forte, nao do acento,
para nao competir com o item ativo do menu. */
.app-header .nav-link.fw-bold {
color: var(--cor-texto);
letter-spacing: 0.06em;
font-size: 0.95rem;
}
.app-header .bi { font-size: 1.05rem; vertical-align: -0.1em; }
/* Sino de notificacoes. Tamanho e posicao saíram do style inline do
index.html: com o CSP e mais facil auditar markup sem atributo style. */
#notif-badge {
top: 2px;
right: 0;
font-size: 0.55rem;
padding: 0.2em 0.4em;
border-radius: var(--raio-pill);
}
.notif-menu {
width: 360px;
max-width: calc(100vw - 1.5rem);
max-height: 400px;
overflow-y: auto;
}
/* O .dropdown-item do Bootstrap traz white-space: nowrap, pensado para menu de
uma linha. Aqui cada item tem titulo mais duas linhas de detalhe, e um
"3o Ano B - Matematica Aplicada" nao cabe nos 360px: com nowrap ele nao
quebra, transborda — e como o menu tem overflow-y, o overflow-x deixa de ser
visible e o texto vira barra de rolagem lateral. */
.notif-menu .dropdown-item {
white-space: normal;
border-radius: var(--raio-xs);
}
/* O icone nao encolhe para caber o texto, e o bloco de texto pode ficar menor
que o proprio conteudo — sem o min-width: 0, um item de flex se recusa a
encolher abaixo do min-content e volta a empurrar a largura. */
.notif-menu .dropdown-item > .d-flex > .bi { flex-shrink: 0; }
.notif-menu .dropdown-item > .d-flex > div { min-width: 0; }
/* Seletor de tema. O item marcado ganha o acento e um tique a direita — a
marca importa porque as tres opcoes convivem: saber que 'auto' esta ativo e
diferente de ver que a tela esta clara. */
#tema-opcoes { min-width: 11rem; }
.tema-opcao {
display: flex;
align-items: center;
gap: 0.6rem;
}
.tema-opcao .bi { font-size: 0.95rem; opacity: 0.75; }
.tema-opcao.active {
background-color: var(--cor-acento-tenue);
color: var(--cor-acento);
font-weight: 600;
}
.tema-opcao.active .bi { opacity: 1; }
.tema-opcao.active::after {
content: '\f272'; /* bi-check2 */
font-family: 'bootstrap-icons';
margin-left: auto;
font-size: 0.85rem;
}
/* --- Menu lateral --- */
.app-sidebar {
background-color: var(--cor-chrome-solido) !important;
border-right: 1px solid var(--cor-borda);
box-shadow: none !important;
}
.app-sidebar .sidebar-brand {
border-bottom: 1px solid var(--cor-borda-tenue);
min-height: 56px;
display: flex;
align-items: center;
}
.app-sidebar .brand-link {
color: var(--cor-texto);
font-weight: 600;
letter-spacing: -0.01em;
}
.app-sidebar .brand-text { font-weight: 600 !important; }
#sidebar-user {
border-bottom-color: var(--cor-borda-tenue) !important;
color: var(--cor-texto);
}
/* Troca de perfil (quem tem mais de um). O index.js so monta a estrutura e
deixa a aparencia aqui — antes vinha num atributo style com #fff fixo. */
#perfil-label { cursor: pointer; }
#perfil-options {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
margin-top: 4px;
min-width: 140px;
z-index: 999;
overflow: hidden;
background-color: var(--cor-superficie);
border: 1px solid var(--cor-borda);
border-radius: var(--raio-md);
box-shadow: var(--sombra-3);
}
.perfil-option {
cursor: pointer;
transition: background-color var(--transicao);
}
.perfil-option:hover { background-color: var(--cor-superficie-tenue); }
/* Item de menu: pilula com respiro lateral, no lugar da faixa de ponta a
ponta do AdminLTE. As cores vem da ponte --lte-* acima; aqui fica so a
forma, que o AdminLTE nao disputa.
A especificidade e casada de proposito com a do AdminLTE
(`.sidebar-menu .nav-item > .nav-link`, tres classes): ele declara
margin-bottom nesse seletor, e um `margin` nosso de duas classes perderia
so a metade de baixo — item com 1px em cima e 0.2rem embaixo. */
.sidebar-menu .nav-item > .nav-link {
border-radius: var(--raio-sm);
margin: 1px 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
font-weight: 500;
transition: background-color var(--transicao), color var(--transicao);
}
.sidebar-menu .nav-link .nav-icon {
color: currentColor;
opacity: 0.75;
transition: opacity var(--transicao);
}
.sidebar-menu .nav-link:hover .nav-icon,
.sidebar-menu .nav-link.active .nav-icon { opacity: 1; }
/* Ativo: barra no acento junto ao fundo tenue que vem do --lte-*. A barra e o
que faz o item ser achado de relance numa lista longa; so a cor de fundo
nao resolve. E propriedade que o AdminLTE nao usa, entao aplica sem briga. */
.sidebar-menu .nav-link.active {
font-weight: 600;
position: relative;
}
.sidebar-menu .nav-link.active::before {
content: '';
position: absolute;
/* Alinha com a borda do menu, cancelando o margin lateral da pilula. */
left: -0.5rem;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 1.15rem;
border-radius: 0 var(--raio-pill) var(--raio-pill) 0;
background-color: var(--cor-acento);
}
.sidebar-menu .nav-treeview { position: relative; }
/* Guia vertical ligando os filhos ao pai. */
.sidebar-menu .nav-treeview::before {
content: '';
position: absolute;
left: 1.55rem;
top: 0.15rem;
bottom: 0.15rem;
width: 1px;
background-color: var(--cor-borda);
}
.sidebar-menu .nav-treeview .nav-item > .nav-link { font-size: 0.86rem; }
/* .nav-arrow e a seta que o index.js coloca dentro do ; a rotacao no
menu-open e do AdminLTE. */
.sidebar-menu .nav-link .nav-arrow {
font-size: 0.7rem;
opacity: 0.6;
}
.sidebar-wrapper { padding-bottom: 1rem; }
/* NAO estilizar .sidebar-overlay aqui. Leia antes de "consertar" isto.
Parece um div sem aparencia esperando CSS, e nao e. O AdminLTE cria um
`