/* ==========================================================================
   Onisne | TEMA VISUAL (claro/escuro) — carrega por último e redefine o visual de todo o site.
   A paleta nasce de UMA cor (instituicao.js): tema.js escreve as variáveis abaixo e o camaleão assume essa tonalidade.
   Os valores abaixo são o padrão (roxo da Escola Liberdade), usados caso o JavaScript demore a carregar.
   ========================================================================== */
:root {
  --marca: hsl(263 54% 60%); --marca-forte: hsl(263 48% 44%); --marca-2: hsl(321 93% 61%);
  --marca-btn: hsl(263 52% 52%); --marca-2-btn: hsl(321 82% 47%);
  --bg: hsl(305 100% 98%); --surface: #ffffff; --surface-2: hsl(263 70% 97.5%); --track: hsl(263 55% 94%);
  --ink: hsl(253 38% 17%); --muted: hsl(263 12% 45%); --line: hsl(263 35% 91%);
  --side-1: hsl(267 85% 94%); --side-2: hsl(322 77% 85%);
  --sombra: 0 12px 32px hsl(263 50% 40% / .10); --sombra-forte: 0 24px 60px hsl(263 50% 35% / .20);
  --ok: #1d7a46; --erro: #b3261e; --aviso: #9a5b00;
  --grad: linear-gradient(100deg, var(--marca-btn), var(--marca-2-btn));
  --grad-vivo: linear-gradient(100deg, var(--marca), var(--marca-2));
  --raio: 22px; --moldura: 20px;
  --fonte: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-titulo: 'Poppins', 'Roboto', system-ui, sans-serif;
  --menu-largura: 252px;
  /* nomes antigos do projeto, ligados à nova paleta (os módulos antigos continuam funcionando) */
  --principal: var(--marca-forte); --botao: var(--marca-btn); --cartao: var(--surface-2); --fundo: var(--bg);
  --texto: var(--ink); --texto-suave: var(--muted); --borda: var(--line); --destaque: var(--marca-2); --apoio: var(--marca);
}
html { color-scheme: light; }
html[data-tema="escuro"] { color-scheme: dark; }

/* ---------- base ---------- */
body {
  font-family: var(--fonte); color: var(--ink); background-color: var(--bg);
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--marca-2) 16%, transparent) 0 9px, transparent 10px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--marca-2) 16%, transparent) 0 9px, transparent 10px);
  background-size: 68px 68px; background-position: 0 0, 34px 34px;
  -webkit-font-smoothing: antialiased; transition: background-color .4s, color .4s;
}
h1, h2, h3, .logo { font-family: var(--fonte-titulo); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
h2 { font-size: 1.15rem; } h3 { font-size: 1.05rem; }
.cartao > h2, .stat + h2 { margin-bottom: 1rem; }
:focus-visible { outline: 3px solid var(--marca-forte); outline-offset: 3px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--marca-2) 35%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--marca) 45%, transparent) transparent; }
canvas { max-height: 300px; }
.pular { background: var(--grad); color: #fff; border-radius: 0 0 14px 0; }

/* ---------- camaleão: assinatura da Onisne ---------- */
.camaleao { display: block; width: 100%; height: auto; color: var(--marca); overflow: visible; transition: color .9s ease; }
.camaleao path { stroke-dasharray: 1; animation: cam-traco 1.7s cubic-bezier(.6, 0, .2, 1) both; }
.camaleao .cam-cristas { animation-delay: .5s; } .camaleao .cam-perna { animation-delay: .7s; }
.camaleao .cam-olho { transform-box: fill-box; transform-origin: center; animation: cam-olho .5s .3s both; }
.cam-mascote .cam-olho { animation: cam-olho .5s .3s both, cam-pisca 7s 2.4s infinite; }
@keyframes cam-traco { 0% { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cam-olho { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cam-pisca { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.logo-marca { display: inline-block; width: 42px; flex: none; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.marca-logo, .menu-topo { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.marca-logo:hover .logo-marca, .menu-topo:hover .logo-marca { transform: rotate(-6deg) scale(1.08); }
.logo { font-weight: 700; font-size: 1.55rem; line-height: 1; margin: 0; }

/* ---------- moldura do aplicativo ---------- */
#app, #tela-entrada { background: var(--bg); color: var(--ink); }
#app { display: flex; min-height: 100vh; }
@media (min-width: 1100px) {
  #app, #tela-entrada { max-width: 1760px; margin: var(--moldura) auto; border-radius: 38px; box-shadow: var(--sombra-forte); overflow: clip; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  #app { min-height: calc(100vh - 2 * var(--moldura)); }
}

/* ---------- menu lateral ---------- */
.menu { width: var(--menu-largura); background: linear-gradient(180deg, var(--side-1), var(--side-2)); color: var(--ink); position: relative; top: auto; height: auto; z-index: 30; }
.menu-interno { position: sticky; top: var(--moldura); height: calc(100vh - 2 * var(--moldura)); display: flex; flex-direction: column; padding: 1.5rem 1.1rem 1.1rem; }
@media (max-width: 1099px) { .menu-interno { top: 0; height: 100vh; } }
.menu-topo { flex-direction: row; align-items: center; padding: 0 .4rem 1.1rem; }
.menu-topo .logo { font-size: 1.4rem; color: var(--ink); display: block; }
.menu-topo small { color: var(--muted); font-weight: 500; font-size: .76rem; }
.menu-topo .logo { margin: 0; }
.menu-criar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin: 0 0 1rem; padding: .8rem 1rem .8rem 1.2rem; border: 0; border-radius: 20px; background: var(--surface); color: var(--ink); text-align: left; font: 500 .85rem/1.25 var(--fonte); box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s; }
.menu-criar:hover { transform: translateY(-2px); }
.menu-criar-mais { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.menu-criar:hover .menu-criar-mais { transform: rotate(90deg); }
.menu-criar-mais .ico { width: 18px; height: 18px; }
.menu-nav { flex: 1; position: relative; overflow-y: auto; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); padding: .15rem 0 .6rem; margin: 0 -.2rem; padding-inline: .2rem; }
.menu-pilula { position: absolute; left: .2rem; right: .2rem; top: 0; height: 44px; border-radius: 999px; background: var(--grad); box-shadow: 0 10px 22px color-mix(in srgb, var(--marca-2) 34%, transparent); transition: transform .5s cubic-bezier(.3, 1.25, .45, 1), height .3s, opacity .25s; pointer-events: none; z-index: 0; }
.menu-item { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem 1.05rem; margin: 1px 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 .92rem/1.2 var(--fonte); text-align: left; transition: color .25s, background .25s, transform .2s; }
.menu-item .ico { width: 19px; height: 19px; flex: none; }
.menu-item:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); transform: translateX(3px); }
.menu-item.ativo { background: none; border: 0; color: #fff; font-weight: 600; transform: none; }
.menu-item:focus-visible { outline-offset: -2px; }
.menu-acess { margin: .5rem 0; padding: .9rem 1rem; border-radius: 20px; background: var(--surface); box-shadow: var(--sombra); }
.menu-acess strong { font: 700 1rem var(--fonte-titulo); background: var(--grad-vivo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu-acess p { margin: .2rem 0 .6rem; font-size: .76rem; line-height: 1.35; color: var(--muted); }
.menu-usuario { display: grid; grid-template-columns: auto 1fr auto auto; gap: .55rem; align-items: center; padding: .85rem .3rem 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.menu-usuario strong { font-size: .88rem; line-height: 1.2; } .menu-usuario small { color: var(--muted); font-size: .74rem; line-height: 1.2; }
.menu-usuario > div:nth-child(2) { min-width: 0; } .menu-usuario small { color: var(--muted); }
.menu-usuario strong, .menu-usuario small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario .btn.btn-sair { display: inline-grid; place-items: center; width: 36px; height: 36px; min-width: 0; padding: 0; font-size: 0; border-radius: 50%; grid-column: auto; gap: 0; }
.btn-sair .ico { width: 17px; height: 17px; }
@media (max-height: 800px) { .menu-acess { display: none; } }

/* ---------- avatar ---------- */
.avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--grad); color: #fff; font: 600 .85rem var(--fonte-titulo); flex: none; box-shadow: 0 6px 14px color-mix(in srgb, var(--marca-2) 30%, transparent); }
.avatar-grande { width: 4.4rem; height: 4.4rem; font-size: 1.2rem; outline: 3px solid color-mix(in srgb, var(--marca-2) 40%, transparent); outline-offset: 3px; }

/* ---------- barra superior ---------- */
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: 1.1rem clamp(1rem, 2.5vw, 2rem); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(16px); border: 0; }
.barra h1 { flex: none; margin: 0; font: 600 1.2rem var(--fonte-titulo); color: var(--ink); }
.barra-acoes { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.busca-geral { position: relative; flex: 0 1 340px; }
.busca-geral input { padding-left: 2.8rem; border-radius: 999px; background: var(--surface); border-color: color-mix(in srgb, var(--line) 80%, transparent); min-height: 44px; box-shadow: var(--sombra); }
.busca-ico { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--muted); display: grid; pointer-events: none; }
.busca-ico .ico { width: 18px; height: 18px; }
#busca-resultados { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + .5rem); padding: .4rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sombra-forte); max-height: 340px; overflow-y: auto; animation: surge .22s both; }
#busca-resultados li { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 14px; cursor: pointer; font-size: .92rem; }
#busca-resultados li .ico { width: 18px; height: 18px; color: var(--marca-forte); }
#busca-resultados li.sel, #busca-resultados li:hover { background: color-mix(in srgb, var(--marca) 16%, transparent); }
.btn-icone { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--sombra); transition: transform .25s, box-shadow .25s, color .25s; }
.btn-icone:hover { transform: translateY(-2px); color: var(--marca-forte); }
.btn-icone .ico { width: 20px; height: 20px; }
.btn-icone .contador { position: absolute; top: -3px; right: -3px; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; display: grid; place-items: center; background: var(--grad); color: #fff; font: 700 .68rem/1 var(--fonte); border-radius: 99px; border: 2px solid var(--bg); }
.btn-icone .contador:empty, .btn-icone .contador[data-zero] { display: none; }
.tema-ico { position: relative; display: grid; width: 20px; height: 20px; }
.tema-ico .ico { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .35s; }
.e-sol .ico-lua { transform: rotate(-90deg) scale(.3); opacity: 0; } .e-lua .ico-sol { transform: rotate(90deg) scale(.3); opacity: 0; }
.btn-menu { display: none; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.btn-menu .ico { width: 20px; height: 20px; }
.painel-notif { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sombra-forte); padding: .6rem 1.1rem; animation: surge .25s both; transform-origin: top right; }
.painel-notif:not([hidden]) { display: block; }
.painel-notif li { border-bottom: 1px solid var(--line); }
.area-principal { max-width: none; padding: .4rem clamp(1rem, 2.5vw, 2rem) 2.4rem; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.troca-tema::view-transition-old(root) { z-index: 1; } .troca-tema::view-transition-new(root) { z-index: 2; }

/* ---------- painel lateral (perfil e agenda) ---------- */
.painel-direito { width: 312px; flex: none; border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.painel-direito[hidden] { display: none !important; }
.pd-interno { position: sticky; top: var(--moldura); max-height: calc(100vh - 2 * var(--moldura)); overflow-y: auto; padding: 1.5rem 1.2rem 1.5rem; }
.pd-titulo { font-size: 1rem; margin-bottom: 1rem; }
.pd-perfil { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; }
.pd-perfil strong { display: block; font: 600 .98rem var(--fonte-titulo); }
.pd-perfil p { margin: .1rem 0; font-size: .8rem; color: var(--muted); }
.pd-perfil .btn { margin-top: .6rem; }
.pd-agenda h2 { font-size: 1rem; }
.mini-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mini-topo strong { font-size: .85rem; } .mini-topo strong::first-letter { text-transform: uppercase; }
.btn-mini { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); transition: background .2s, color .2s; }
.btn-mini:hover { background: var(--grad); color: #fff; } .btn-mini .ico { width: 15px; height: 15px; }
.mini-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; margin-bottom: 1rem; }
.mini-sem { font-size: .68rem; color: var(--muted); padding-bottom: .3rem; }
.mini-dia { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); font: 500 .75rem var(--fonte); transition: background .2s, transform .2s; }
.mini-dia.fora { color: color-mix(in srgb, var(--muted) 45%, transparent); }
button.mini-dia:hover { background: color-mix(in srgb, var(--marca) 18%, transparent); transform: scale(1.1); }
.mini-dia.hoje { background: var(--grad); color: #fff; font-weight: 700; box-shadow: 0 6px 14px color-mix(in srgb, var(--marca-2) 35%, transparent); }
.mini-dia.tem::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--marca-2); }
.mini-dia.hoje.tem::after { background: #fff; }
.agenda-lista { display: grid; gap: .55rem; margin-bottom: 1rem; }
.agenda-lista li { display: grid; grid-template-columns: 2.9rem 1fr; gap: .6rem; align-items: center; animation: sobe .5s calc(var(--i, 0) * 70ms + .2s) both; }
.agenda-lista time { font-size: .72rem; color: var(--muted); font-weight: 500; }
.agenda-pilula { display: block; padding: .5rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--marca) 16%, var(--surface)); border-left: 4px solid var(--marca); min-width: 0; }
.agenda-pilula strong { display: block; font-size: .78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-pilula small { color: var(--muted); font-size: .68rem; }
.agenda-pilula.tp-prova { background: color-mix(in srgb, var(--marca-2) 16%, var(--surface)); border-left-color: var(--marca-2); }
@media (max-width: 1279px) { .painel-direito { display: none !important; } }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.4rem; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 600 .92rem/1.2 var(--fonte); text-decoration: none; box-shadow: 0 10px 22px color-mix(in srgb, var(--marca-2) 26%, transparent); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s, background .25s, filter .25s; }
.btn:hover { background: var(--grad); border: 0; transform: translateY(-2px); box-shadow: 0 14px 28px color-mix(in srgb, var(--marca-2) 34%, transparent); filter: saturate(1.08); }
.btn:active { transform: translateY(0) scale(.97); }
.btn-destaque { background: var(--grad); color: #fff; border: 0; padding: .85rem 1.7rem; }
.btn-destaque:hover { background: var(--grad); border: 0; }
.btn-claro { background: var(--surface); color: var(--marca-forte); border: 1.5px solid color-mix(in srgb, var(--marca) 50%, transparent); box-shadow: none; }
.btn-claro:hover { background: color-mix(in srgb, var(--marca) 13%, var(--surface)); color: var(--marca-forte); border: 1.5px solid var(--marca); box-shadow: 0 8px 18px color-mix(in srgb, var(--marca) 18%, transparent); }
.btn-pequeno { padding: .42rem 1rem; font-size: .82rem; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn .ico { width: 17px; height: 17px; }
.link-seta { display: inline-flex; align-items: center; gap: .3rem; align-self: center; padding: .3rem .2rem; border: 0; background: none; color: var(--marca-forte); font: 600 .85rem var(--fonte); }
.link-seta .ico { width: 16px; height: 16px; transition: transform .25s; } .link-seta:hover .ico { transform: translateX(4px); }

.cartao { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: var(--raio); padding: 1.4rem; box-shadow: var(--sombra); transition: transform .3s cubic-bezier(.3, 1, .4, 1), box-shadow .3s, background-color .4s; }
.cartao:hover { transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--marca) 16%, transparent); }
.cartao-acesso:hover, .cartao.chat:hover, .editor:hover, .atlas-map-card:hover { transform: none; }

.stat { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico val" "ico lab"; column-gap: .9rem; align-items: center; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 20px; background: var(--surface); box-shadow: var(--sombra); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--marca) 18%, transparent); }
.stat strong { grid-area: val; font: 600 1.55rem/1.15 var(--fonte-titulo); color: var(--ink); }
.stat > span:not(.stat-icone) { grid-area: lab; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.stat-icone { grid-area: ico; display: flex; align-items: flex-end; gap: 4px; width: 34px; height: 34px; }
.stat-icone i { flex: 1; height: calc(var(--v) * 100%); border-radius: 4px; background: linear-gradient(180deg, var(--marca-2), var(--marca)); transform-origin: bottom; }
.entra .stat-icone i { animation: cresce .8s cubic-bezier(.3, 1.4, .5, 1) both; } .entra .stat-icone i:nth-child(2) { animation-delay: .1s; } .entra .stat-icone i:nth-child(3) { animation-delay: .2s; }

.form label { font-weight: 500; font-size: .86rem; color: var(--ink); }
input, select, textarea { padding: .72rem 1rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: 400 .95rem var(--fonte); transition: border-color .2s, box-shadow .25s, background .25s; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--line)); }
input:focus, select:focus, textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 20%, transparent); background: var(--surface); outline: none; }
select { appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7fa6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 1.05rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); width: 1.1rem; height: 1.1rem; padding: 0; box-shadow: none; }
input[type="search"] { appearance: none; }
.escolha-perfil label { font-weight: 400; } .escolha-perfil legend { font-weight: 500; color: var(--muted); }
.erro { color: var(--erro); } .dica { color: var(--muted); } .vazio { color: var(--muted); }

.abas { display: flex; width: fit-content; max-width: 100%; gap: .3rem; padding: .3rem; margin-bottom: 1.2rem; border: 0; border-radius: 999px; background: var(--surface-2); }
.aba { padding: .55rem 1.15rem; margin: 0; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 .9rem var(--fonte); transition: background .3s, color .3s, box-shadow .3s; }
.aba:hover { color: var(--marca-forte); }
.aba.ativa { background: var(--grad); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--marca-2) 28%, transparent); }
.chip { padding: .45rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 .86rem var(--fonte); transition: all .25s; }
.chip:hover { border-color: var(--marca); color: var(--marca-forte); transform: translateY(-1px); }
.chip.ativo { background: var(--grad); border-color: transparent; color: #fff; }

.tag { padding: .2rem .75rem; border-radius: 99px; font: 600 .72rem var(--fonte); background: color-mix(in srgb, var(--marca) 16%, var(--surface)); color: var(--marca-forte); }
.tag-prova { background: var(--grad); color: #fff; }
.tag-aviso, .tag-projeto, .tag-evento { background: color-mix(in srgb, var(--marca-2) 18%, var(--surface)); color: var(--ink); }
.tag-conversa, .tag-duvida, .tag-trabalho { background: color-mix(in srgb, var(--marca) 22%, var(--surface)); color: var(--ink); }

.lista > li { padding: .8rem 1rem; margin-bottom: .55rem; border: 0; border-radius: 16px; background: var(--surface-2); transition: transform .25s, background .25s; }
.lista > li:last-child { margin-bottom: 0; border-bottom: 0; } .lista > li:hover { transform: translateX(3px); background: color-mix(in srgb, var(--marca) 10%, var(--surface-2)); }
.lista > li .tag { justify-self: start; align-self: flex-start; width: fit-content; }
.lista > li.vazio { background: none; padding-inline: 0; } .lista small { color: var(--muted); }
.lista-colegas li { background: var(--surface-2); }

.tabela { background: transparent; border-radius: 16px; font-size: .9rem; border-collapse: separate; border-spacing: 0; }
.tabela th { background: var(--surface-2); color: var(--muted); font: 500 .78rem var(--fonte); padding: .8rem 1rem; }
.tabela th:first-child { border-radius: 14px 0 0 14px; } .tabela th:last-child { border-radius: 0 14px 14px 0; }
.tabela td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.tabela tbody tr { transition: background .2s; } .tabela tbody tr:hover { background: color-mix(in srgb, var(--marca) 8%, transparent); }
.tabela .bom { color: var(--ok); } .tabela .atencao { color: var(--erro); } .atencao { color: var(--erro); font-weight: 700; } .bom { color: var(--ok); font-weight: 700; }
.progresso { height: 10px; background: var(--track); } .progresso-barra { background: var(--grad-vivo); transition: width 1s cubic-bezier(.3, .7, .2, 1); }

.toast { background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: .8rem 1.5rem; box-shadow: var(--sombra-forte); font-weight: 500; }
.toast:not([hidden]) { animation: toast-in .4s cubic-bezier(.3, 1.4, .5, 1) both; }
.modal { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--sombra-forte); padding: 1.8rem; }
.modal[open] { animation: modal-in .35s cubic-bezier(.3, 1.3, .5, 1) both; }
.modal::backdrop { background: color-mix(in srgb, var(--bg) 40%, rgb(10 8 30 / .65)); backdrop-filter: blur(6px); }
.modal .fechar { background: var(--surface-2); color: var(--ink); transition: transform .3s, background .2s; } .modal .fechar:hover { background: var(--grad); color: #fff; transform: rotate(90deg); }

/* calendário */
.cal-semana span { color: var(--muted); font-weight: 500; }
.cal-dia { background: var(--surface-2); border: 0; border-radius: 16px; color: var(--ink); transition: transform .2s, box-shadow .2s, background .2s; }
.cal-dia:hover { border: 0; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--marca); }
.cal-dia.hoje { border: 0; box-shadow: inset 0 0 0 2px var(--marca-2); }
.cal-dia.selecionado { background: var(--grad); color: #fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--marca-2) 30%, transparent); }
.ponto { border: 0; background: var(--marca-forte); } .ponto.prova { background: var(--marca-2); } .ponto.trabalho { background: var(--marca); } .ponto.projeto, .ponto.evento { background: #f2a93b; } .ponto.pessoal { background: var(--muted); }
/* chat, mural, biblioteca */
.chat-mensagens { background: var(--surface-2); border-radius: 20px; }
.msg { background: var(--surface); border-radius: 18px 18px 18px 4px; box-shadow: var(--sombra); } .msg small { color: var(--marca-forte); }
.msg.minha { background: var(--grad); color: #fff; border-radius: 18px 18px 4px 18px; } .msg.minha small { color: #fff; opacity: .85; }
.destaque-lateral { border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.post { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: var(--raio); box-shadow: var(--sombra); }
.post-topo .avatar { background: var(--grad); color: #fff; }
.post-acoes button { border: 1.5px solid var(--line); background: var(--surface-2); color: var(--marca-forte); font-weight: 600; transition: transform .2s, background .2s; }
.post-acoes button:hover { transform: translateY(-1px); border-color: var(--marca); }
.post-acoes button.curtido { background: var(--grad); border-color: transparent; color: #fff; animation: pulo .45s cubic-bezier(.3, 1.6, .5, 1); }
.comentarios { background: var(--surface-2); border-radius: 16px; }
.btn-denuncia { color: var(--muted); }
.prateleira { border-bottom: 8px solid var(--track); border-radius: 0 0 8px 8px; padding-bottom: 1rem; }
.livro { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 18px; box-shadow: var(--sombra); overflow: hidden; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.livro:hover { transform: translateY(-6px) rotate(-.6deg); }
.capa { background: linear-gradient(150deg, var(--marca-btn), var(--marca-2-btn)) !important; color: #fff; font: 600 1.02rem/1.25 var(--fonte-titulo); }
.livro:nth-child(4n+2) .capa { background: linear-gradient(210deg, var(--marca-2-btn), var(--marca-btn)) !important; }
.livro:nth-child(4n+3) .capa { background: linear-gradient(120deg, var(--marca-btn), color-mix(in srgb, var(--marca-btn) 55%, #101030)) !important; }
.livro:nth-child(4n) .capa { background: linear-gradient(170deg, color-mix(in srgb, var(--marca-2-btn) 60%, #101030), var(--marca-2-btn)) !important; }
.status.disponivel { color: var(--ok); } .status.emprestado { color: var(--erro); }
.conversa { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-left: 0; border-radius: var(--raio); box-shadow: var(--sombra), inset 5px 0 0 var(--marca); }
.pergunta-bloco { background: var(--surface-2); border-radius: 16px; }
/* sobre, caderno, achados, domínio, mapas mentais */
.foto-escola { background: var(--surface); border: 1px solid var(--line); overflow: hidden; } .foto-escola img { border-radius: 14px; }
.linha-tempo { border-left: 3px solid color-mix(in srgb, var(--marca) 45%, transparent); }
.linha-tempo li::before { background: var(--grad); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--marca); }
.linha-tempo strong { color: var(--marca-forte); }
.a-completar { background: var(--surface-2); border: 2px dashed color-mix(in srgb, var(--marca-2) 60%, transparent); border-radius: 20px; }
.fonte, .fonte a { color: var(--muted); } .fonte a { color: var(--marca-forte); text-decoration-thickness: 2px; }
.nota-item { color: #282333; border: 1.5px solid transparent; border-radius: 16px; box-shadow: var(--sombra); transition: transform .2s, border-color .2s; }
.nota-item small, .nota-item span { color: #5b5368; } .nota-item:hover { border-color: var(--marca); transform: translateX(3px); }
.nota-item.ativa { border-color: var(--marca-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca-2) 30%, transparent); }
.folha { color: #282333; border-radius: 16px; background-image: linear-gradient(90deg, transparent 2.5rem, #f2a1d4 2.5rem, #f2a1d4 calc(2.5rem + 2px), transparent calc(2.5rem + 2px)), repeating-linear-gradient(transparent 0, transparent calc(2rem - 1px), rgba(100, 120, 200, .3) calc(2rem - 1px), rgba(100, 120, 200, .3) 2rem); }
.achado { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: var(--raio); box-shadow: var(--sombra), inset 0 5px 0 var(--marca-2); }
.achado.resolvido { box-shadow: var(--sombra), inset 0 5px 0 var(--marca); } .achado-contatos { background: var(--surface-2); border-radius: 14px; }
.dom-tile { border-radius: 18px; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); } .dom-tile:hover { transform: translateY(-4px) scale(1.03); }
.n-forte { background: var(--grad); color: #fff; } .n-bom { background: color-mix(in srgb, var(--marca) 30%, var(--surface)); color: var(--ink); }
.n-atencao { background: color-mix(in srgb, var(--marca-2) 28%, var(--surface)); color: var(--ink); } .n-foco { background: #b3261e; color: #fff; }
.mm-palco { background-color: var(--surface); border: 1px solid var(--line); border-radius: 24px; background-image: radial-gradient(color-mix(in srgb, var(--marca) 35%, transparent) 1px, transparent 1px); }
.mm-cor { border-color: var(--surface); } .mm-cor.ativa { box-shadow: 0 0 0 3px var(--marca); }
.etapas li { border-top-color: var(--line); } .etapas li.feita { border-color: var(--marca); } .etapas li.atual { border-color: var(--marca-2); }
/* química */
.qm-barra .aba { border: 0; background: var(--surface-2); color: var(--muted); } .qm-barra .aba.ativa { background: var(--grad); color: #fff; }
.qm-barra .abas { background: none; padding: 0; } .pt-el.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--marca); border-color: #282333; }
#mol-3d { background: var(--surface-2); } .qm-eq { color: var(--marca-forte); } .aviso-val { color: var(--aviso); }
.resultado { background: var(--surface-2); border-radius: 16px; }
.resultado h3 { color: var(--marca-forte); }

/* ==========================================================================
   PAINÉIS (dashboard), ANÉIS E SAUDAÇÃO
   ========================================================================== */
.boas-vindas { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding: 1.8rem 2rem; min-height: 168px; border-radius: 26px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); box-shadow: var(--sombra); overflow: hidden; }
.bv-texto { position: relative; z-index: 1; max-width: 460px; }
.bv-texto p { margin: 0; color: var(--muted); font-size: .9rem; } .bv-texto .bv-pequeno { font-size: .85rem; margin-bottom: .3rem; }
.bv-texto h2 { margin: 0 0 .45rem; font: 600 clamp(1.25rem, 2.2vw, 1.65rem)/1.25 var(--fonte-titulo); }
.bv-arte { position: relative; flex: 0 0 min(330px, 42%); height: 140px; }
.bv-arte [data-camaleao] { position: absolute; right: 54px; bottom: -4px; width: 168px; }
.nota { position: absolute; display: block; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--marca), var(--marca-2)); box-shadow: 0 10px 20px color-mix(in srgb, var(--marca-2) 30%, transparent); animation: flutua 5s ease-in-out infinite alternate; }
.nota::before, .nota::after { content: ''; position: absolute; left: 7px; height: 4px; border-radius: 3px; background: rgb(255 255 255 / .85); }
.nota::before { top: 10px; width: 16px; } .nota::after { top: 19px; width: 22px; }
.nota.n1 { left: 4%; top: 4px; } .nota.n2 { left: 40%; top: -4px; width: 30px; height: 30px; background: var(--surface-2); box-shadow: var(--sombra); animation-delay: -1.5s; }
.nota.n2::before, .nota.n2::after { background: var(--marca); } .nota.n3 { right: 2%; top: 30px; animation-delay: -3s; width: 32px; height: 32px; background: linear-gradient(135deg, var(--marca-2), var(--marca)); }
.nota.n4 { left: 14%; bottom: 8px; width: 26px; height: 26px; animation-delay: -2.2s; background: var(--track); box-shadow: none; } .nota.n4::before, .nota.n4::after { background: var(--marca); left: 5px; }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.pg-a, .pg-b { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.pg-a > .cartao, .pg-b > .cartao, .pg-a > .grade-stats { margin: 0; }
.grade-stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.anel-card { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; }
.anel { position: relative; display: grid; place-items: center; }
.anel svg { display: block; width: 100%; height: 100%; }
.anel-trilho { fill: none; stroke: var(--track); stroke-width: 11; }
.anel-valor { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray 1.5s cubic-bezier(.3, .7, .2, 1); }
.anel-grande { width: 156px; height: 156px; }
.anel-texto { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.anel-numero { font: 600 1.7rem/1 var(--fonte-titulo); color: var(--ink); } .anel-texto span { margin-top: .25rem; font-size: .68rem; color: var(--muted); }
.anel-mini { width: 62px; height: 62px; flex: none; } .anel-mini .anel-trilho, .anel-mini .anel-valor { stroke-width: 13; }
.anel-mini .anel-numero { position: absolute; font-size: .78rem; }
.anel-legenda { display: grid; gap: .6rem; width: 100%; text-align: left; }
.anel-legenda li { display: flex; gap: .65rem; align-items: flex-start; font-size: .84rem; }
.anel-legenda small { display: block; color: var(--muted); font-size: .74rem; }
.pt { flex: none; width: 10px; height: 10px; margin-top: .38rem; border-radius: 50%; } .pt-a { background: var(--grad-vivo); } .pt-b { background: var(--track); box-shadow: inset 0 0 0 1.5px var(--line); }
.estudo-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .6rem; }
.estudo-cab h2 { order: 2; margin: 0; font: 500 .85rem var(--fonte); color: var(--muted); text-align: right; max-width: 12ch; }
.estudo-total { display: block; font: 600 1.75rem/1.1 var(--fonte-titulo); } .estudo-sub { color: var(--muted); font-size: .78rem; }
.estudo-corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; }
.estudo-aneis { display: grid; gap: 1rem; } .mini-anel-bloco { display: flex; align-items: center; gap: .7rem; }
.mini-anel-bloco small { display: block; color: var(--muted); font-size: .7rem; line-height: 1.2; max-width: 9ch; } .mini-anel-bloco strong { font: 600 .95rem var(--fonte-titulo); }
.form-estudo > label { flex: 1 1 200px; }
.form-estudo .btn { align-self: flex-end; }

/* ==========================================================================
   TELA DE ENTRADA
   ========================================================================== */
#tela-entrada { display: flex; flex-direction: column; min-height: 100vh; padding: 0 clamp(1rem, 3vw, 2.4rem) 1.2rem; }
@media (min-width: 1100px) { #tela-entrada { min-height: calc(100vh - 2 * var(--moldura)); } }
.topo-entrada { display: flex; align-items: center; justify-content: space-between; padding: 1.4rem 0; background: none; border: 0; }
.topo-entrada .logo-marca { width: 48px; } .topo-entrada .logo { font-size: 1.7rem; color: var(--ink); }
.topo-direita { display: flex; align-items: center; gap: .8rem; }
.selo-escola { padding: .5rem 1.1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--marca-forte); font: 600 .82rem var(--fonte); box-shadow: var(--sombra); }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.4rem, 3.5vw, 3rem); border-radius: 32px; background: linear-gradient(135deg, var(--side-1), var(--side-2)); color: var(--ink); max-width: none; margin: 0 0 1.5rem; }
html[data-tema="escuro"] .hero { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 70%, var(--marca-2-btn))); }
.hero-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.hero h1 { max-width: 15ch; margin: 0; font: 700 clamp(2rem, 4.4vw, 3.3rem)/1.1 var(--fonte-titulo); color: var(--ink); }
.hero-texto > p { margin: 0; max-width: 52ch; color: color-mix(in srgb, var(--ink) 78%, transparent); font-size: 1.02rem; }
.hero-arte { position: relative; width: min(340px, 100%); height: 132px; }
.hero-arte [data-camaleao] { position: absolute; left: 6px; bottom: 0; width: 150px; }
.hero-arte .nota.n1 { left: 48%; top: 6px; } .hero-arte .nota.n2 { left: 66%; top: 44px; } .hero-arte .nota.n3 { right: 0; top: -2px; }
.equipe { width: 100%; max-width: 560px; margin-top: .6rem; padding: 1.1rem 1.3rem; border-radius: 22px; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px); box-shadow: var(--sombra); }
.equipe h2 { margin: 0 0 .7rem; font-size: 1rem; } .equipe ul { display: flex; flex-wrap: wrap; gap: .45rem; }
.equipe li h3, .chefe { margin: 0; font: 600 .86rem var(--fonte-titulo); color: var(--ink); }
.equipe li h3 { padding: .35rem .95rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.turma-equipe { margin: .8rem 0 0; font-size: .82rem; color: var(--muted); }
.cartao-acesso { align-self: start; padding: 1.8rem; border-radius: 28px; box-shadow: var(--sombra-forte); }
.cartao-acesso h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.cartao-acesso .abas { width: 100%; } .cartao-acesso .aba { flex: 1; }
.grade-recursos { padding-inline: 0; max-width: none; margin-inline: 0; }
.grade-recursos .cartao { border-left: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.grade-recursos .cartao::before { content: ''; display: block; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 14px; background: linear-gradient(#fff, #fff) 12px 21px / 5px 12px no-repeat, linear-gradient(#fff, #fff) 20px 12px / 5px 21px no-repeat, linear-gradient(#fff, #fff) 28px 17px / 5px 16px no-repeat, var(--grad); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.grade-recursos .cartao:hover::before { transform: rotate(-8deg) scale(1.1); }
.rodape { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: auto; padding: 1rem; background: none; color: var(--muted); font-size: .82rem; border: 0; }
.rodape .logo-marca { width: 24px; }

/* ==========================================================================
   ANIMAÇÕES
   ========================================================================== */
@keyframes sobe { from { opacity: 0; transform: translateY(22px); } }
@keyframes surge { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes cresce { from { transform: scaleY(0); } }
@keyframes flutua { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9px) rotate(4deg); } }
@keyframes pulo { 40% { transform: scale(1.18); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 24px) scale(.9); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.view.entra > * { animation: sobe .65s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
#tela-entrada .hero-texto > *, #tela-entrada .cartao-acesso { animation: sobe .8s cubic-bezier(.2, .8, .2, 1) both; }
#tela-entrada .hero-texto > :nth-child(2) { animation-delay: .1s; } #tela-entrada .hero-texto > :nth-child(3) { animation-delay: .2s; }
#tela-entrada .hero-texto > :nth-child(4) { animation-delay: .3s; } #tela-entrada .hero-texto > :nth-child(5) { animation-delay: .4s; }
#tela-entrada .cartao-acesso { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .camaleao path, .camaleao .cam-olho, .nota, .view.entra > *, .menu-pilula { animation: none !important; transition: none !important; }
}
html.a11y-sem-anim .camaleao path, html.a11y-sem-anim .nota, html.a11y-sem-anim .view.entra > *, html.a11y-sem-anim .menu-pilula, html.a11y-sem-anim .anel-valor { animation: none !important; transition: none !important; }

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1099px) { #app, #tela-entrada { margin: 0; border-radius: 0; box-shadow: none; border: 0; } }
@media (max-width: 1100px) { .painel-grade { grid-template-columns: 1fr; } .pg-b { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; } .selo-escola { display: none; } .busca-geral { flex-basis: 220px; } }
@media (max-width: 860px) {
  .btn-menu { display: grid; }
  .menu { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-105%); transition: transform .4s cubic-bezier(.3, 1, .4, 1); box-shadow: var(--sombra-forte); }
  .menu.aberto, .menu.aberta { transform: translateX(0); }
  .barra { flex-wrap: wrap; gap: .6rem; } .barra h1 { font-size: 1.05rem; } .busca-geral { order: 5; flex: 1 1 100%; } .barra-acoes { margin-left: auto; }
  .bv-arte { display: none; } .boas-vindas { min-height: 0; padding: 1.4rem; }
  .estudo-corpo { grid-template-columns: 1fr; } .estudo-aneis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .topo-entrada { flex-wrap: nowrap; gap: .6rem; } .topo-entrada .logo { font-size: 1.4rem; } .grade-stats { grid-template-columns: 1fr 1fr; } .stat { padding: .9rem; grid-template-columns: 1fr; grid-template-areas: "ico" "val" "lab"; row-gap: .3rem; } .stat-icone { width: 28px; height: 28px; } }

/* ==========================================================================
   ALTO CONTRASTE (mantém a função de acessibilidade existente)
   ========================================================================== */
html[data-tema].a11y-contraste {
  --marca: #ffe600; --marca-forte: #ffe600; --marca-2: #00e5ff; --marca-btn: #ffe600; --marca-2-btn: #ffe600;
  --bg: #000; --surface: #000; --surface-2: #121212; --track: #3a3a3a; --ink: #fff; --muted: #f2f2f2; --line: #fff;
  --side-1: #000; --side-2: #000; --sombra: none; --sombra-forte: none; --ok: #7dffa8; --erro: #ff8a80; --aviso: #ffd54f;
}
html.a11y-contraste body { background-image: none; }
html.a11y-contraste #app, html.a11y-contraste #tela-entrada { border: 2px solid #fff; }
html.a11y-contraste .btn, html.a11y-contraste .menu-item.ativo, html.a11y-contraste .avatar, html.a11y-contraste .tag-prova, html.a11y-contraste .aba.ativa, html.a11y-contraste .chip.ativo,
html.a11y-contraste .cal-dia.selecionado, html.a11y-contraste .msg.minha, html.a11y-contraste .mini-dia.hoje, html.a11y-contraste .menu-criar-mais, html.a11y-contraste .post-acoes button.curtido,
html.a11y-contraste .capa, html.a11y-contraste .n-forte, html.a11y-contraste .btn-icone .contador { color: #000 !important; }
html.a11y-contraste .btn.btn-claro, html.a11y-contraste .btn-icone, html.a11y-contraste .link-seta { color: #ffe600 !important; border-color: #fff; }
html.a11y-contraste .menu-usuario .btn-sair { background: #000; }
html.a11y-contraste .menu-pilula { box-shadow: none; } html.a11y-contraste .stat-icone i { background: #ffe600; }
html.a11y-contraste .camaleao { color: #ffe600; }
html.a11y-contraste .cartao, html.a11y-contraste .stat, html.a11y-contraste .boas-vindas, html.a11y-contraste .post { border: 2px solid #fff; }
html.a11y-contraste .anel-valor { stroke: #ffe600; }
html.a11y-contraste .nota-item, html.a11y-contraste .folha { color: #000; }