/*
* Estilos de design —
* Performance: blur baixo, sidebar sem backdrop (área grande), hovers leves,
* prefers-reduced-transparency / reduced-motion degradam ou removem blur.
*/
/* ========== Moderno — Urbanist, vidro moderado, barra de acento ========== */
[data-design="moderno"] {
--radius: 9px;
--radius-sm: 6px;
/* Vidro mais legível: base sólida + blur (bg-elevated sozinho é quase invisível) */
--mod-blur: blur(18px);
--mod-panel-bg: color-mix(in srgb, var(--bg) 58%, var(--bg-elevated) 42%);
}
[data-design="moderno"] body {
font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-design="moderno"] .glass,
[data-design="moderno"] .section-card,
[data-design="moderno"] .card-stat {
background: var(--mod-panel-bg);
backdrop-filter: var(--mod-blur);
-webkit-backdrop-filter: var(--mod-blur);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
transition: border-color 0.15s ease, border-left-color 0.15s ease;
}
[data-design="moderno"] .card-stat:hover,
[data-design="moderno"] .glass:hover {
border-color: var(--border-focus);
border-left-color: var(--accent);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}
/* Modais: mesmo vidro + blur (antes só herdavam bg-elevado sem backdrop-filter) */
[data-design="moderno"] .modal-glass {
position: relative;
background: var(--mod-panel-bg);
backdrop-filter: var(--mod-blur);
-webkit-backdrop-filter: var(--mod-blur);
border: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
[data-design="moderno"] .cofrinho-mov-acoes-card {
background: var(--mod-panel-bg);
backdrop-filter: var(--mod-blur);
-webkit-backdrop-filter: var(--mod-blur);
}
[data-design="moderno"] .mural-sonhos-gear-panel {
background: var(--mod-panel-bg);
backdrop-filter: var(--mod-blur);
-webkit-backdrop-filter: var(--mod-blur);
}
/* Camada do overlay: desfoca o conteúdo da página atrás do escurecimento */
[data-design="moderno"] .overlay {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
[data-design="moderno"] .page-title {
letter-spacing: -0.04em;
font-weight: 700;
}
[data-design="moderno"] .section-title {
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.7rem;
color: var(--text);
opacity: 1;
}
@media (min-width: 640px) {
[data-design="moderno"] .section-title {
font-size: 0.78rem;
}
}
[data-design="moderno"] .app-sidebar {
background: var(
--sidebar-bg,
linear-gradient(
165deg,
color-mix(in srgb, var(--bg-elevated) 100%, transparent) 0%,
color-mix(in srgb, var(--bg) 88%, var(--accent) 12%) 100%
)
);
}
[data-design="moderno"] .app-sidebar .app-nav a.active {
color: var(--text);
background: var(--accent-soft);
}
[data-design="moderno"] .app-sidebar .app-nav a.active .app-nav-icon {
background: var(--accent);
color: #fff;
}
[data-design="moderno"] .btn-primary {
box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
[data-design="moderno"] .page-dashboard {
background:
radial-gradient(ellipse 70% 50% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
var(--bg);
}
/* ========== Liquid glass — vidro leve (blur baixo; sidebar sem backdrop = menos GPU) ========== */
[data-design="liquid-glass"] {
--radius: 20px;
--radius-sm: 14px;
--lg-blur: blur(20px);
--lg-panel-bg: color-mix(in srgb, var(--bg) 52%, var(--bg-elevated) 48%);
/* Painel lateral: tinta sólida — evita blur em retângulo altura total (muito caro) */
--lg-sidebar-bg: color-mix(in srgb, var(--bg-elevated) 82%, transparent);
}
[data-design="liquid-glass"] body {
font-family: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}
/*
* Blur só em cartões/modais (área pequena). Sem saturate no backdrop.
* Hover: só borda + sombra — evita repintar backdrop a cada frame.
*/
[data-design="liquid-glass"] .glass,
[data-design="liquid-glass"] .section-card,
[data-design="liquid-glass"] .card-stat,
[data-design="liquid-glass"] .modal-glass {
position: relative;
border-radius: var(--radius);
background: var(--lg-panel-bg);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 4px 16px rgba(0, 0, 0, 0.1);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-design="liquid-glass"] .cofrinho-mov-acoes-card {
background: var(--lg-panel-bg);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 16px 48px color-mix(in srgb, var(--shadow) 55%, transparent);
}
[data-design="liquid-glass"] .mural-sonhos-gear-panel {
background: var(--lg-panel-bg);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.12),
0 24px 64px rgba(0, 0, 0, 0.45);
}
[data-design="liquid-glass"] .card-stat:hover,
[data-design="liquid-glass"] .glass:hover,
[data-design="liquid-glass"] .modal-glass:hover {
border-color: rgba(255, 255, 255, 0.26);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 6px 20px rgba(0, 0, 0, 0.12);
}
[data-design="liquid-glass"] .page-title {
letter-spacing: -0.035em;
font-weight: 600;
}
[data-design="liquid-glass"] .section-title {
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.68rem;
font-weight: 600;
color: var(--text);
}
[data-design="liquid-glass"] th {
color: var(--text);
}
[data-design="moderno"] th {
color: var(--text);
}
@media (min-width: 640px) {
[data-design="liquid-glass"] .section-title {
font-size: 0.75rem;
}
}
/* Sidebar: sem backdrop-filter (área × altura = custo alto no compositor) */
[data-design="liquid-glass"] .app-sidebar {
background: var(--sidebar-bg, var(--lg-sidebar-bg));
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-right: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}
[data-design="liquid-glass"] .app-sidebar-inner {
background: transparent;
}
/*
* Drawer no mobile: blur atrás do painel (área estreita; desktop mantém sidebar sem blur).
*/
@media (max-width: 1023px) {
[data-design="liquid-glass"] .app-sidebar {
-webkit-backdrop-filter: blur(22px);
backdrop-filter: blur(22px);
background: var(
--sidebar-bg,
color-mix(in srgb, var(--gray-950, #0d0f14) 82%, transparent)
);
}
[data-design="moderno"] .app-sidebar {
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
background: var(--sidebar-bg, color-mix(in srgb, var(--bg) 88%, var(--accent) 8%));
}
}
/* Sem segundo backdrop-filter no item ativo (aninhado = muito pesado) */
[data-design="liquid-glass"] .app-sidebar .app-nav a.active {
color: var(--text);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
[data-design="liquid-glass"] .app-sidebar .app-nav a.active .app-nav-icon {
background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
color: #fff;
box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 45%, transparent);
}
@media (min-width: 1024px) {
[data-design="liquid-glass"] .app-sidebar.collapsed .app-nav a.active {
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="liquid-glass"] .app-sidebar.collapsed .app-nav a.active .app-nav-icon {
background: transparent;
box-shadow: none;
}
}
[data-design="liquid-glass"] .btn-primary {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 3px 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
/*
* Brilho: fixed na viewport via ::before no .app-body (não no .app-main).
* isolation no main fazia alguns WebViews tratarem fixed como relativo ao main — faixa escura acima do margin-top
* e “encolhimento” no canto. Centro do radial levemente para dentro evita metade do círculo cortada na borda direita.
*/
[data-design="liquid-glass"] .app-body {
position: relative;
}
[data-design="liquid-glass"] .app-main {
position: relative;
z-index: 1;
min-height: 100%;
background-color: var(--bg);
}
[data-design="liquid-glass"] .app-body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(
ellipse clamp(280px, 52vmin, 620px) clamp(220px, 40vmin, 520px) at calc(100% - 4px) 0,
color-mix(in srgb, var(--accent) 42%, transparent) 0%,
color-mix(in srgb, var(--accent) 12%, transparent) 45%,
transparent 68%
);
background-repeat: no-repeat;
}
/* Dashboard: evita segundo radial no body (liquid-glass.css .page-dashboard) */
html[data-design="liquid-glass"] body.page-dashboard {
background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
[data-design="liquid-glass"] {
--lg-blur: blur(10px);
}
[data-design="moderno"] {
--mod-blur: blur(10px);
}
}
/* Acessibilidade + GPU: sem vidro quando o SO pede menos transparência */
@media (prefers-reduced-transparency: reduce) {
[data-design="liquid-glass"] {
--lg-blur: none;
--lg-panel-bg: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
--lg-sidebar-bg: var(--bg-elevated);
}
[data-design="liquid-glass"] .app-body::before {
display: none;
}
[data-design="liquid-glass"] .glass,
[data-design="liquid-glass"] .section-card,
[data-design="liquid-glass"] .card-stat,
[data-design="liquid-glass"] .modal-glass {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="moderno"] {
--mod-blur: none;
--mod-panel-bg: color-mix(in srgb, var(--bg) 85%, var(--bg-elevated) 15%);
}
[data-design="moderno"] .glass,
[data-design="moderno"] .section-card,
[data-design="moderno"] .card-stat,
[data-design="moderno"] .modal-glass {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="moderno"] .cofrinho-mov-acoes-card,
[data-design="moderno"] .cofrinho-mov-acoes-backdrop {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="moderno"] .cofrinho-mov-acoes-card {
background: var(--mod-panel-bg);
}
[data-design="liquid-glass"] .cofrinho-mov-acoes-card,
[data-design="liquid-glass"] .cofrinho-mov-acoes-backdrop {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="liquid-glass"] .cofrinho-mov-acoes-card {
background: var(--lg-panel-bg);
}
[data-design="moderno"] .mural-sonhos-gear-panel,
[data-design="liquid-glass"] .mural-sonhos-gear-panel {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="moderno"] .mural-sonhos-gear-panel {
background: var(--mod-panel-bg);
}
[data-design="liquid-glass"] .mural-sonhos-gear-panel {
background: var(--lg-panel-bg);
}
[data-design="moderno"] .overlay {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="liquid-glass"] .app-sidebar,
[data-design="moderno"] .app-sidebar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.sidebar-overlay.open {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* Fallback sem color-mix */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
[data-design="moderno"] .glass,
[data-design="moderno"] .section-card,
[data-design="moderno"] .card-stat,
[data-design="moderno"] .modal-glass {
background: rgba(26, 30, 45, 0.92);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
[data-design="liquid-glass"] .glass,
[data-design="liquid-glass"] .section-card,
[data-design="liquid-glass"] .card-stat,
[data-design="liquid-glass"] .modal-glass {
background: rgba(22, 28, 42, 0.62);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
[data-design="liquid-glass"] .app-sidebar {
background: rgba(18, 22, 36, 0.88);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
[data-design="liquid-glass"] .section-title {
color: var(--text);
}
[data-design="liquid-glass"] .app-body::before {
background-image: radial-gradient(
ellipse clamp(280px, 52vmin, 620px) clamp(220px, 40vmin, 520px) at calc(100% - 4px) 0,
rgba(68, 89, 252, 0.35) 0%,
rgba(68, 89, 252, 0.1) 45%,
transparent 68%
);
}
}