:root {
/* ═══════════════════════════════════════════
Du Soluções Solar — Identidade Visual
PALETA PROVISÓRIA (não confirmada com a marca)
═══════════════════════════════════════════ */
--cor-primaria: #F7941D; /* laranja-sol */
--cor-secundaria: #0B3C5D; /* azul-profundo */
--cor-acento: #FFC20E; /* amarelo-destaque */
--cor-fundo: #0E1A24; /* fundo escuro navy */
--cor-fundo-secundario: #152433; /* card escuro */
--cor-texto: #FFFFFF;
--cor-texto-secundario: #94A3B8;
--cor-borda: #1E3A4D;
--cor-destaque: var(--cor-primaria);
--cor-destaque-rgb: 247, 148, 29;
--cor-receita: #22C55E;
--cor-despesa: #EF4444;
--cor-transferencia: var(--cor-acento);
--sombra-padrao: 0 4px 6px rgba(0, 0, 0, 0.3);
--espaco-lateral-conteudo: 16px;
--largura-maxima-conteudo: 1200px;
/* Aliases para compatibilidade interna */
--cor-texto-primario: var(--cor-texto);
--cor-texto-principal: var(--cor-texto);
--cor-fundo-card: var(--cor-fundo-secundario);
--cor-fundo-terciario: var(--cor-borda);
}
body.tema-claro {
--cor-fundo: #F5F7FA;
--cor-fundo-secundario: #FFFFFF;
--cor-texto: #1F2937;
--cor-texto-secundario: #6B7280;
--cor-borda: #E5E7EB;
--cor-destaque: var(--cor-primaria);
--cor-destaque-rgb: 247, 148, 29;
--cor-receita: #22C55E;
--cor-despesa: #EF4444;
--cor-transferencia: var(--cor-acento);
--sombra-padrao: 0 4px 6px rgba(0, 0, 0, 0.08);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--cor-fundo);
color: var(--cor-texto);
min-height: 100vh;
display: flex;
flex-direction: column;
}
#app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
background: rgba(24, 24, 27, 0.95);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.tema-claro .app-header {
background: rgba(255, 255, 255, 0.85);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.app-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.app-logo {
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(var(--cor-destaque-rgb),0.35), rgba(var(--cor-destaque-rgb),0.15));
color: #111;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 20px rgba(var(--cor-destaque-rgb),0.25);
}
.app-titles {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.app-title {
font-weight: 700;
color: #fff;
font-size: 0.95rem;
}
.app-subtitle {
font-size: 0.8rem;
color: var(--cor-destaque);
font-weight: 600;
}
.app-header-right {
display: flex;
align-items: center;
gap: 10px;
}
.btn-tema-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 999px;
padding: 5px 14px;
cursor: pointer;
color: #fff;
font-size: 13px;
transition: background 0.2s;
}
.btn-tema-toggle:hover {
background: rgba(255, 255, 255, 0.18);
}
body.tema-claro .btn-tema-toggle {
background: rgba(0, 0, 0, 0.07);
border: 1px solid rgba(0, 0, 0, 0.15);
color: #1F2937;
}
body.tema-claro .btn-tema-toggle:hover {
background: rgba(0, 0, 0, 0.13);
}
.nav-pill-item {
color: rgba(255,255,255,0.45);
}
.nav-pill-item.text-amber-500 {
color: #f59e0b !important;
}
body.tema-claro .nav-pill-item {
color: rgba(0,0,0,0.45);
}
.app-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 8px 20px rgba(var(--cor-destaque-rgb),0.25);
}
body.tema-claro .app-avatar {
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.conteudo {
flex: 1;
padding: 16px var(--espaco-lateral-conteudo) 80px;
max-width: 100%;
overflow-x: hidden;
}
.container {
max-width: var(--largura-maxima-conteudo);
margin: 0 auto;
}
.admin-container .dashboard-header {
width: 100%;
margin-left: 0;
margin-right: 0;
left: auto;
}
.conteudo-interno {
padding: 0 20px;
}
/* Ocultar headers locais das páginas quando houver header global */
.pagina-transacoes .transacoes-header { display: none; }
.dashboard-header #btn-seletor-periodo {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
height: 36px;
padding: 0 1rem;
border-radius: 18px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dashboard-header #btn-seletor-periodo:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
body.tema-claro .dashboard-header #btn-seletor-periodo {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
color: #1F2937;
box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}
body.tema-claro .dashboard-header #btn-seletor-periodo:hover {
background: #f9fafb;
}
.glass-panel {
background: rgba(24, 24, 27, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
body.tema-claro .glass-panel {
background: rgba(255, 255, 255, 0.90);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
body.tema-claro .glass-panel * {
color: var(--cor-texto);
}
body.tema-claro .perfil-resumo {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
body.tema-claro .perfil-section-title { color: #6B7280; }
body.tema-claro .perfil-item {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
body.tema-claro .perfil-item:hover {
box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}
body.tema-claro .perfil-item-title { color: #1F2937; }
body.tema-claro .perfil-item-desc,
body.tema-claro .perfil-item-arrow { color: #6B7280; }
body.tema-claro .app-title { color: var(--cor-texto); }
body.tema-claro .text-white { color: var(--cor-texto) !important; }
body.tema-claro .text-zinc-50,
body.tema-claro .text-gray-50,
body.tema-claro .text-slate-50 { color: var(--cor-texto) !important; }
body.tema-claro .text-zinc-200,
body.tema-claro .text-zinc-300,
body.tema-claro .text-gray-300 { color: var(--cor-texto-secundario) !important; }
body.tema-claro h1,
body.tema-claro h2,
body.tema-claro h3 { color: var(--cor-texto); }
body.tema-claro p { color: var(--cor-texto-secundario); }
.cabecalho-pagina {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 20px;
}
.cabecalho-pagina h1 {
font-size: 1.8rem;
font-weight: 600;
}
.card {
background-color: var(--cor-fundo-secundario);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: var(--sombra-padrao);
}
.card-resumo-completo {
background: var(--cor-fundo-card);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
box-shadow: var(--sombra-padrao);
}
@media (max-width: 600px) {
:root {
--espaco-lateral-conteudo: 16px;
}
.conteudo-interno {
padding: 0 12px;
}
.card {
padding: 16px;
margin-bottom: 12px;
border-radius: 12px;
}
.card-resumo-completo {
padding: 18px;
margin-bottom: 14px;
}
}
.saldo-principal {
text-align: center;
position: relative;
margin-bottom: 24px;
}
.titulo-saldo {
font-size: 0.9rem;
color: var(--cor-texto-secundario);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.valor-saldo-principal {
font-size: 2.2rem;
font-weight: 700;
color: var(--cor-texto);
margin-bottom: 8px;
}
.entradas-saidas {
display: flex;
gap: 140px;
justify-content: center;
align-items: center;
}
.entrada-item, .saida-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
}
.entrada-icone, .saida-icone {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
flex-shrink: 0;
}
.entrada-icone {
background-color: rgba(76, 175, 80, 0.15);
color: var(--cor-receita);
}
.saida-icone {
background-color: rgba(244, 67, 54, 0.15);
color: var(--cor-despesa);
}
.entrada-info, .saida-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.entrada-titulo, .saida-titulo {
font-size: 0.85rem;
color: var(--cor-texto-secundario);
margin-bottom: 2px;
}
.entrada-valor, .saida-valor {
font-size: 1.4rem;
font-weight: 600;
}
.entrada-valor {
color: var(--cor-receita);
}
.saida-valor {
color: var(--cor-despesa);
}
.valor-medio {
font-size: 1.8rem;
font-weight: 600;
}
.valor-pequeno {
font-size: 1.2rem;
}
.titulo-secao {
font-size: 1.2rem;
color: var(--cor-texto-secundario);
margin-bottom: 10px;
}
.valor-receita {
color: var(--cor-receita);
}
.valor-despesa {
color: var(--cor-despesa);
}
.container-grafico {
height: 300px;
margin: 20px 0;
padding: 20px;
background: var(--cor-fundo-secundario);
border-radius: 12px;
border: 1px solid var(--cor-borda);
position: relative;
}
.container-grafico canvas {
max-height: 100%;
width: 100% !important;
height: 100% !important;
}
.cards-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 992px) {
.cards-row {
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
}
.card-donuts-categorias {
padding: 1.5rem;
}
.conteudo-donuts-categorias {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
margin-top: 1rem;
}
.container-grafico-donuts {
position: relative;
width: 300px;
height: 300px;
flex-shrink: 0;
}
.container-grafico-donuts canvas {
width: 100% !important;
height: 100% !important;
}
.grid-graficos-duplos {
display: grid;
grid-template-columns: repeat(2, minmax(240px, 1fr));
gap: 24px;
align-items: center;
justify-items: center;
margin-bottom: 20px;
}
@media (max-width: 900px) {
.grid-graficos-duplos {
grid-template-columns: 1fr;
}
}
.total-centro {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
}
.valor-total {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--cor-texto-primario);
line-height: 1;
}
.label-total {
display: block;
font-size: 1rem;
color: var(--cor-texto-secundario);
margin-top: 0.25rem;
}
.listagem-categorias {
width: 100%;
max-width: 600px;
}
.categoria-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid var(--cor-borda);
}
.categoria-item:last-child {
border-bottom: none;
}
.categoria-info {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.categoria-cor {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.categoria-nome {
font-weight: 600;
color: var(--cor-texto-primario);
flex: 1;
}
.categoria-porcentagem {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-texto-primario);
margin-left: auto;
}
.categoria-barra {
width: 100%;
height: 4px;
background: var(--cor-fundo-terciario);
border-radius: 2px;
margin-top: 0.5rem;
overflow: hidden;
}
.categoria-progresso {
height: 100%;
width: 100%;
border-radius: 2px;
transform-origin: left center;
transition: transform 0.3s ease;
}
@media (max-width: 768px) {
.conteudo-donuts-categorias {
gap: 1.5rem;
}
.container-grafico-donuts {
width: 250px;
height: 250px;
}
.valor-total {
font-size: 2rem;
}
}
.espaco-central {
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.botao-adicionar {
width: 60px;
height: 60px;
background-color: var(--cor-destaque);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 4px 10px rgba(var(--cor-destaque-rgb), 0.5);
position: relative;
bottom: 20px;
cursor: pointer;
transition: transform 0.3s;
}
.botao-adicionar:hover {
transform: scale(1.1);
box-shadow: 0 6px 14px rgba(var(--cor-destaque-rgb), 0.6);
}
.botao-adicionar-central {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background-color: var(--cor-destaque);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.5rem;
text-decoration: none;
box-shadow: 0 4px 10px rgba(var(--cor-destaque-rgb), 0.5);
cursor: pointer;
transition: transform 0.3s;
z-index: 101;
}
.botao-adicionar-central:hover {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 6px 14px rgba(var(--cor-destaque-rgb), 0.6);
}
.botao-adicionar-central.ativo {
transform: translateX(-50%) rotate(45deg);
}
.botao-adicionar-central.ativo:hover {
transform: translateX(-50%) rotate(45deg) scale(1.1);
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 89;
}
.menu-overlay.ativo {
opacity: 1;
visibility: visible;
}
.overlay-seletor {
position: fixed;
inset: 0;
background: transparent;
z-index: 999;
display: none;
pointer-events: none;
}
.bloquear-scroll {
overflow: hidden;
}
.menu-circular {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
opacity: 0;
transition: opacity 0.3s;
z-index: 90;
pointer-events: none;
}
.menu-circular.ativo {
opacity: 1;
pointer-events: all;
}
.opcao-menu {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
transform: scale(0);
text-decoration: none;
}
.menu-circular.ativo .opcao-menu {
transform: scale(1);
}
.menu-circular.ativo .opcao-menu:nth-child(1) {
transform: scale(1);
}
.opcao-menu:nth-child(1) { /* Receita - Superior centro */
top: -40px;
left: calc(50% - 30px);
transition-delay: 0s;
}
.opcao-menu:nth-child(2) { /* Despesa - Inferior esquerda */
bottom: 70px;
left: -25px;
transition-delay: 0s;
}
.opcao-menu:nth-child(3) { /* Categoria - Inferior direita */
bottom: 70px;
right: -25px;
transition-delay: 0s;
}
.opcao-menu:nth-child(4) { /* Fechar - Centro, alinhado com o + */
bottom: -5px;
left: calc(50% - 30px);
transition-delay: 0s;
}
.opcao-menu i {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 8px;
font-size: 1.4rem;
color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 8px rgba(128, 128, 128, 0.15);
}
body.tema-claro .opcao-menu i {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 0 0 8px rgba(108, 99, 255, 0.08);
}
body.tema-claro .menu-overlay {
background-color: rgba(0, 0, 0, 0.35);
}
.opcao-menu span {
font-size: 0.75rem;
color: var(--cor-texto);
text-align: center;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
text-decoration: none;
}
body.tema-claro .opcao-menu span {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.opcao-menu.receita i {
background-color: var(--cor-receita);
}
.opcao-menu.despesa i {
background-color: var(--cor-despesa);
}
.opcao-menu.transferencia i {
background-color: var(--cor-transferencia);
}
.opcao-menu.categoria i {
background-color: #8b5cf6;
}
.opcao-menu.fechar-menu i {
background-color: #4b5563;
}
.opcao-menu:hover {
transform: scale(1.1);
}
.opcao-menu:hover i {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(128, 128, 128, 0.25);
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.admin-container { padding: 0; max-width: 100%; margin: 0; font-size: 0.95rem; }
.form-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: center; }
.admin-novo-form { display: flex; flex-direction: column; gap: 10px; }
.admin-novo-campos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.admin-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.admin-card-header .titulo-secao { margin-bottom: 0; }
.admin-form-row { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 14px; }
.admin-form-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-checkbox-grupo { margin: 12px 0; }
.admin-checkbox-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.95rem; }
.admin-checkbox { width: 18px; height: 18px; accent-color: var(--cor-destaque); cursor: pointer; flex-shrink: 0; }
.admin-status { font-size: 0.875rem; color: var(--cor-texto-secundario); padding: 4px 0; }
.admin-descricao { color: var(--cor-texto-secundario); font-size: 0.9rem; margin-bottom: 16px; line-height: 1.5; }
.admin-resultado { background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 12px 16px; font-size: 0.82rem; font-family: monospace; overflow: auto; margin-top: 14px; max-height: 300px; min-height: 0; }
.admin-resultado:empty { display: none; }
.botao-sm { padding: 8px 14px !important; font-size: 0.85rem !important; }
.lista-tabela { margin-top: 14px; overflow: hidden; border-radius: 10px; border: 1px solid var(--cor-borda); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th,
.tabela td { padding: 11px 14px; border-bottom: 1px solid var(--cor-borda); text-align: left; font-size: 0.875rem; }
.tabela thead th {
background: rgba(0,0,0,0.12);
font-weight: 600;
font-size: 0.72rem;
color: var(--cor-texto-secundario);
text-transform: uppercase;
letter-spacing: 0.06em;
}
body.tema-claro .tabela thead th { background: rgba(0,0,0,0.03); }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: rgba(255,255,255,0.03); }
body.tema-claro .tabela tbody tr:hover td { background: rgba(0,0,0,0.025); }
.tabela td:last-child, .tabela th:last-child { text-align: right; }
.tabela th.col-criado-em, .tabela td.col-criado-em { text-align: center !important; }
.tabela code { font-size: 0.78rem; opacity: 0.65; background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 4px; }
body.tema-claro .tabela code { background: rgba(0,0,0,0.06); }
.transacao-linha { border-color: rgba(255,255,255,0.06); }
.transacao-linha:hover { background: rgba(255,255,255,0.04); }
body.tema-claro .transacao-linha { border-color: var(--cor-borda); }
body.tema-claro .transacao-linha:hover { background: rgba(0,0,0,0.025); }
.transacao-data { color: var(--cor-texto-secundario); }
.transacao-descricao { color: var(--cor-texto); }
.transacao-conta-badge {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.75);
border: 1px solid rgba(255,255,255,0.12);
}
body.tema-claro .transacao-conta-badge {
background: rgba(0,0,0,0.06);
color: var(--cor-texto);
border: 1px solid var(--cor-borda);
}
.admin-page-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0 16px;
}
.admin-page-header-left {
display: flex;
align-items: center;
gap: 14px;
}
.admin-page-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(var(--cor-destaque-rgb),.25), rgba(var(--cor-destaque-rgb),.1));
color: var(--cor-destaque);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.admin-page-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-texto);
margin: 0 0 2px;
line-height: 1.2;
}
.admin-page-sub {
font-size: 0.8rem;
color: var(--cor-texto-secundario);
margin: 0;
}
.admin-metrics { margin: 0 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.admin-metrics:empty { display: none; margin: 0; }
.admin-metrics .resumo-card { min-height: 78px; padding: 1rem 1.15rem; transition: transform 0.15s ease; }
.admin-metrics .resumo-valor { font-size: 1.3rem; }
.admin-metrics .resumo-icon {
width: 38px; height: 38px; border-radius: 10px;
background: linear-gradient(135deg, rgba(var(--cor-destaque-rgb),.22), rgba(var(--cor-destaque-rgb),.08));
color: var(--cor-destaque);
}
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
border-bottom: 1px solid var(--cor-borda);
}
.admin-toolbar .filtros-lista {
margin: 0;
display: flex;
gap: 0;
flex-wrap: wrap;
}
.admin-toolbar .filtro-btn {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 9px 14px 11px;
color: var(--cor-texto-secundario);
font-weight: 500;
font-size: 0.845rem;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
box-shadow: none;
margin-bottom: -1px;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.admin-toolbar .filtro-btn i {
font-size: 0.78rem;
opacity: 0.75;
}
.admin-toolbar .filtro-btn:hover {
color: var(--cor-texto);
border-bottom-color: var(--cor-borda);
transform: none;
}
.admin-toolbar .filtro-btn.ativo {
color: var(--cor-destaque);
background: transparent;
border-bottom-color: var(--cor-destaque);
font-weight: 600;
box-shadow: none;
}
.admin-toolbar .filtro-btn.ativo i { opacity: 1; }
.admin-toolbar .toolbar-direita {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
}
.admin-container #seletor-bonito-periodo { position: relative; overflow: visible; z-index: 1000; }
.seletor-bonito { position: relative; }
.seletor-botao {
background: var(--cor-fundo-secundario);
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
height: 36px;
padding: 0 14px;
border-radius: 999px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.875rem;
cursor: pointer;
transition: all 0.2s ease;
}
.seletor-botao:hover { border-color: var(--cor-destaque); transform: translateY(-1px); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.status-ok { background: rgba(76,175,80,0.12); color: #4CAF50; border: 1px solid rgba(76,175,80,0.3); }
.status-pending { background: rgba(244,67,54,0.12); color: #F44336; border: 1px solid rgba(244,67,54,0.3); }
.status-error { background: rgba(255,193,7,0.12); color: #d4a017; border: 1px solid rgba(255,193,7,0.3); }
.icon-btn {
background: rgba(255,255,255,0.06);
color: var(--cor-texto);
border: 1px solid var(--cor-borda);
border-radius: 8px;
padding: 7px 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
body.tema-claro .icon-btn { background: rgba(0,0,0,0.04); }
body.tema-claro .icon-btn:hover { background: rgba(0,0,0,0.09); }
.icon-btn i { pointer-events: none; }
.icon-btn.danger { color: #F44336; border-color: rgba(244,67,54,0.3); }
.icon-btn.danger:hover { background: rgba(244,67,54,0.1); }
@media (max-width: 900px) {
.admin-toolbar { flex-direction: column; align-items: stretch; border-bottom: none; }
.admin-toolbar .filtros-lista { border-bottom: 1px solid var(--cor-borda); overflow-x: auto; flex-wrap: nowrap; }
.admin-toolbar .toolbar-direita { padding-bottom: 0; padding-top: 4px; }
.admin-novo-campos { grid-template-columns: repeat(2, 1fr); }
.admin-form-row { grid-template-columns: 1fr; }
.admin-page-header { padding: 14px 0 12px; }
}
@media (max-width: 560px) {
.admin-novo-campos { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
.admin-toolbar .filtro-btn { padding: 8px 10px 10px; font-size: 0.8rem; }
.admin-toolbar .filtro-btn span { display: none; }
.admin-toolbar .filtro-btn i { font-size: 0.9rem; opacity: 1; }
}
.modal.ativo {
opacity: 1;
pointer-events: all;
}
.form-grupo {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
color: var(--cor-texto-secundario);
}
.form-input, .form-select {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background-color: var(--cor-fundo-secundario);
color: var(--cor-texto);
font-size: 1rem;
}
.form-input::placeholder {
color: var(--cor-texto-secundario);
}
.form-input:-webkit-autofill,
.form-select:-webkit-autofill {
-webkit-text-fill-color: var(--cor-texto) !important;
box-shadow: 0 0 0px 1000px var(--cor-fundo-secundario) inset;
}
.form-input:focus, .form-select:focus {
border-color: var(--cor-destaque);
outline: none;
}
.botao-primario {
background-color: var(--cor-destaque);
color: white;
}
.botao-secundario {
background-color: transparent;
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
}
.botao-primario:hover {
background-color: #e6a800;
transform: translateY(-2px);
}
.botao-secundario:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.lista-transacoes {
margin-top: 20px;
padding: 0 20px;
}
.grupo-data {
margin-bottom: 15px;
}
.data-transacao {
font-size: 0.9rem;
color: var(--cor-texto-secundario);
margin-bottom: 10px;
}
.item-transacao {
display: flex;
align-items: center;
padding: 15px;
background-color: var(--cor-fundo-secundario);
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.item-transacao:hover {
transform: translateX(5px);
}
.icone-transacao {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
font-size: 1rem;
flex-shrink: 0;
}
.info-transacao {
flex: 1;
}
.nome-transacao {
font-weight: 600;
margin-bottom: 5px;
}
.detalhe-transacao {
font-size: 0.8rem;
color: var(--cor-texto-secundario);
}
.valor-transacao {
font-weight: 600;
text-align: right;
}
.lista-categorias {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 20px;
padding: 0 20px;
}
.item-categoria {
background-color: var(--cor-fundo-secundario);
border-radius: 10px;
padding: 15px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
}
.item-categoria:hover {
transform: translateY(-5px);
}
.cor-categoria {
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 10px;
}
.nome-categoria {
font-weight: 600;
text-align: center;
}
.tipo-categoria {
font-size: 0.8rem;
color: var(--cor-texto-secundario);
margin-top: 5px;
}
@media (max-width: 768px) {
.resumo-financeiro {
flex-direction: column;
}
.resumo-item {
margin-bottom: 20px;
}
.lista-categorias {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
}
.filtros-container {
padding: 0 20px;
margin-bottom: 25px;
}
.filtros-lista {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.filtro-btn {
background: var(--cor-fundo-secundario);
color: var(--cor-texto);
border: 2px solid transparent;
padding: 10px 20px;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
font-size: 0.9rem;
text-decoration: none;
}
.filtro-btn:hover {
background: var(--cor-destaque);
color: white;
transform: translateY(-2px);
}
.filtro-btn.ativo {
background: var(--cor-destaque);
color: white;
border-color: var(--cor-destaque);
box-shadow: 0 4px 15px rgba(108, 99, 255, 0.3);
}
.categorias-container {
padding: 0 20px;
margin-bottom: 30px;
}
.lista-categorias,
.categorias-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
padding: 20px;
}
.categoria-card {
background: var(--cor-fundo-secundario);
border-radius: 15px;
padding: 20px;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
border: 2px solid transparent;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.categoria-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: var(--cor-primaria);
}
.categoria-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.categoria-cor-indicador {
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 0.75rem;
}
.categoria-cor-indicador i {
color: inherit;
font-size: 0.7rem;
line-height: 1;
}
.categoria-tipo-icon {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
font-size: 1rem;
}
.categoria-body h3 {
margin: 0 0 8px 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--cor-texto);
}
.categoria-body p {
margin: 0 0 15px 0;
color: var(--cor-texto-secundario);
font-size: 0.9rem;
}
.categoria-footer {
display: flex;
align-items: center;
gap: 8px;
color: var(--cor-primaria);
font-weight: 600;
font-size: 0.9rem;
}
.estado-vazio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 20px;
background: var(--cor-fundo-secundario);
border-radius: 20px;
margin: 20px;
border: 2px dashed var(--cor-borda);
}
.estado-vazio .icone-vazio {
font-size: 4rem;
color: var(--cor-texto-secundario);
margin-bottom: 20px;
opacity: 0.5;
}
.estado-vazio h3 {
margin: 0 0 10px 0;
font-size: 1.5rem;
color: var(--cor-texto);
font-weight: 600;
}
.estado-vazio p {
margin: 0 0 25px 0;
color: var(--cor-texto-secundario);
font-size: 1rem;
max-width: 400px;
line-height: 1.5;
}
.btn-criar-primeira {
background: var(--cor-primaria);
color: white;
border: none;
padding: 15px 30px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 10px;
}
.btn-criar-primeira:hover {
background: var(--cor-secundaria);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
}
@media (max-width: 768px) {
.categorias-header {
padding: 25px 15px;
border-radius: 0 0 20px 20px;
}
.header-content {
flex-direction: column;
gap: 20px;
text-align: center;
}
.header-info {
flex: none;
}
.categorias-header h1 {
font-size: 1.6rem;
justify-content: center;
}
.btn-nova-categoria {
padding: 10px 18px;
font-size: 0.9rem;
}
.lista-categorias {
grid-template-columns: 1fr;
gap: 15px;
}
.categoria-card {
padding: 15px;
}
.filtros-lista {
gap: 8px;
}
.filtro-btn {
padding: 8px 16px;
font-size: 0.85rem;
}
.estado-vazio {
padding: 40px 15px;
margin: 15px;
}
.estado-vazio .icone-vazio {
font-size: 3rem;
}
.estado-vazio h3 {
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
.header-content {
gap: 15px;
}
.btn-nova-categoria span {
display: none;
}
.btn-nova-categoria {
width: 45px;
height: 45px;
padding: 0;
border-radius: 50%;
justify-content: center;
}
.dashboard-header .header-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
.transacoes-header {
background: var(--cor-destaque);
color: white;
padding: 24px var(--espaco-lateral-conteudo) 20px;
margin-bottom: 16px;
border-radius: 0 0 30px 30px;
position: relative;
overflow: hidden;
}
.transacoes-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.dashboard-header {
background: var(--cor-destaque);
border-radius: 0 0 30px 30px;
padding: 24px var(--espaco-lateral-conteudo) 20px;
margin-bottom: 16px;
color: white;
position: relative;
overflow: visible;
}
.dashboard-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
/* Admin: header compacto (legado removido — usa .admin-page-header) */
.admin-container .dashboard-header { display: none; }
.admin-container .card {
padding: 20px;
border-radius: 12px;
margin-bottom: 14px;
border: 1px solid var(--cor-borda);
}
.admin-container .titulo-secao {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 16px;
color: var(--cor-texto);
letter-spacing: 0.01em;
}
.admin-container .form-input,
.admin-container .form-select {
padding: 9px 12px;
font-size: 0.9rem;
border-radius: 8px;
}
.admin-container .botao { padding: 9px 18px; font-size: 0.9rem; border-radius: 8px; }
.admin-container .form-label { font-size: 0.8rem; font-weight: 600; color: var(--cor-texto-secundario); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; display: block; }
.dashboard-header .header-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 5;
}
.dashboard-header .header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.dashboard-header .header-info h1 {
font-size: 1.75rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.dashboard-header .header-info h1 i {
font-size: 1.5rem;
}
.dashboard-header .header-info p {
font-size: 1rem;
opacity: 0.9;
margin: 0;
}
.dashboard-header .controle-periodo {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 0.75rem;
flex-wrap: wrap;
}
.dashboard-header .seletor-bonito {
position: relative;
}
.dashboard-header .seletor-botao {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.35);
color: #ffffff;
height: 36px;
padding: 0 1rem;
border-radius: 18px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dashboard-header .seletor-botao:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
}
.dashboard-header .seletor-painel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 320px;
max-width: 90vw;
background: #ffffff;
color: #222;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
overflow: hidden;
z-index: 20;
max-height: 70vh;
overflow-y: auto;
}
/* Garantir sobreposição correta quando usado fora do .dashboard-header */
#seletor-bonito-periodo .seletor-painel {
z-index: 1000;
}
.dashboard-header .seletor-painel .painel-topo {
background: var(--cor-destaque);
color: #fff;
display: grid;
grid-template-columns: 40px 1fr 40px 40px;
align-items: center;
padding: 10px 12px;
}
.dashboard-header .seletor-painel .painel-topo .painel-nav {
background: transparent;
border: none;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.dashboard-header .seletor-painel .mes-nav-botao {
background: #fff;
color: var(--cor-destaque);
border: none;
height: 34px;
border-radius: 17px;
font-weight: 800;
cursor: pointer;
}
.dashboard-header .seletor-painel .painel-editar {
background: transparent;
border: none;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.dashboard-header .seletor-painel .painel-opcoes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 12px;
}
.dashboard-header .seletor-painel .painel-personalizado {
display: none;
align-items: center;
gap: 8px;
padding: 12px;
}
.dashboard-header .seletor-painel .painel-personalizado .grupo-data {
display: inline-flex;
align-items: center;
gap: 8px;
background: #f4f4f8;
border: 1px solid #e5e6ea;
padding: 8px 10px;
border-radius: 10px;
}
.dashboard-header .seletor-painel .painel-personalizado .grupo-data i {
color: #6C63FF;
}
.dashboard-header .seletor-painel .painel-personalizado .painel-input {
background: transparent;
border: none;
color: #222;
height: 24px;
}
.dashboard-header .seletor-painel .painel-personalizado .painel-input::-webkit-calendar-picker-indicator {
opacity: 0.8;
cursor: pointer;
}
.dashboard-header .seletor-painel .painel-personalizado .painel-ate {
color: #666;
font-weight: 600;
}
.dashboard-header .seletor-painel .opcao-periodo {
background: #f4f4f8;
border: 1px solid #e5e6ea;
color: #333;
height: 38px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.dashboard-header .seletor-painel .opcao-periodo:hover {
background: #ececf4;
}
.dashboard-header .painel-calendario {
padding: 10px 12px;
}
.dashboard-header .calendario-cabecalho {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
color: #666;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
}
.dashboard-header .calendario-dias {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.dashboard-header .calendario-dia {
background: #f4f4f8;
border: 1px solid #e5e6ea;
color: #333;
height: 38px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.dashboard-header .calendario-dia:hover { background: #ececf4; }
.dashboard-header .calendario-dia.vazio { visibility: hidden; }
.dashboard-header .calendario-dia.hoje { border-color: var(--cor-destaque); }
.dashboard-header .calendario-dia.selecionado-inicio,
.dashboard-header .calendario-dia.selecionado-fim {
background: var(--cor-destaque);
color: #fff;
}
.dashboard-header .calendario-dia.intervalo {
background: rgba(var(--cor-destaque-rgb), 0.15);
color: #222;
}
/* Seletor de período - regras globais para uso fora do .dashboard-header */
.seletor-painel {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 320px;
max-width: 90vw;
background: #ffffff;
color: #222;
border-radius: 18px;
box-shadow: 0 12px 30px rgba(0,0,0,0.25);
overflow: hidden;
z-index: 1000;
max-height: 78vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.seletor-painel .painel-topo {
background: var(--cor-destaque);
color: #fff;
display: grid;
grid-template-columns: 40px 1fr 40px 40px;
align-items: center;
padding: 10px 12px;
}
.seletor-painel .painel-topo .painel-nav {
background: transparent;
border: none;
color: #fff;
font-size: 1rem;
cursor: pointer;
}
.seletor-painel .mes-nav-botao {
background: #fff;
color: var(--cor-destaque);
border: none;
height: 34px;
border-radius: 17px;
font-weight: 800;
cursor: pointer;
}
.seletor-painel .painel-opcoes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 12px;
}
.seletor-painel .painel-calendario { padding: 10px 12px; }
.seletor-painel .calendario-cabecalho {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
color: #666;
font-weight: 700;
text-align: center;
margin-bottom: 8px;
}
.seletor-painel .calendario-dias {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.seletor-painel .calendario-dia {
background: #f4f4f8;
border: 1px solid #e5e6ea;
color: #333;
height: 38px;
border-radius: 10px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.seletor-painel .calendario-dia:hover { background: #ececf4; }
.seletor-painel .calendario-dia.vazio { visibility: hidden; }
.seletor-painel .calendario-dia.hoje { border-color: var(--cor-destaque); }
.seletor-painel .calendario-dia.selecionado-inicio,
.seletor-painel .calendario-dia.selecionado-fim {
background: var(--cor-destaque);
color: #fff;
}
.seletor-painel .calendario-dia.intervalo {
background: rgba(var(--cor-destaque-rgb), 0.15);
color: #222;
}
.seletor-painel .painel-acoes {
display: flex;
justify-content: space-between;
padding: 12px;
border-top: 1px solid #eee;
}
.seletor-painel .acao-cancelar {
background: transparent;
border: none;
color: var(--cor-destaque);
font-weight: 700;
cursor: pointer;
}
.seletor-painel .acao-padrao {
background: var(--cor-destaque);
border: none;
color: #fff;
font-weight: 700;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
}
@media (max-width: 600px) {
.seletor-painel {
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
}
.seletor-painel .painel-opcoes { grid-template-columns: 1fr; }
.seletor-painel .calendario-dia {
height: 34px;
border-radius: 8px;
font-weight: 600;
}
}
.dashboard-header .seletor-painel .painel-acoes {
display: flex;
justify-content: space-between;
padding: 12px;
border-top: 1px solid #eee;
}
.dashboard-header .seletor-painel .acao-cancelar {
background: transparent;
border: none;
color: var(--cor-destaque);
font-weight: 700;
cursor: pointer;
}
.dashboard-header .seletor-painel .acao-padrao {
background: var(--cor-destaque);
border: none;
color: #fff;
font-weight: 700;
cursor: pointer;
padding: 8px 12px;
border-radius: 10px;
}
@media (max-width: 600px) {
.dashboard-header .seletor-painel {
left: 50%;
transform: translateX(-50%);
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
}
.dashboard-header .seletor-painel .painel-opcoes {
grid-template-columns: 1fr;
}
.dashboard-header .calendario-dia {
height: 34px;
border-radius: 8px;
font-weight: 600;
}
}
.dashboard-header .controle-personalizado {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.dashboard-header .grupo-data {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.35rem 0.6rem;
border-radius: 0.6rem;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
height: 36px;
}
.dashboard-header .grupo-data:hover {
background: rgba(255, 255, 255, 0.26);
transform: translateY(-1px);
}
.dashboard-header .grupo-data i {
color: #ffffff;
opacity: 0.95;
font-size: 0.95rem;
}
.dashboard-header .controle-select,
.dashboard-header .controle-input {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.45rem 0.7rem;
border-radius: 0.5rem;
font-size: 0.9rem;
appearance: none;
color-scheme: dark;
height: 36px;
min-width: 150px;
}
.dashboard-header .controle-select option {
color: #111111;
background-color: #ffffff;
}
.dashboard-header .controle-select:focus,
.dashboard-header .controle-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.6);
}
.dashboard-header .controle-ate {
color: #ffffff;
opacity: 0.9;
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 4px;
}
.dashboard-header .controle-input[type="date"] {
background: transparent;
border: none;
padding: 0;
min-width: 9.5rem;
}
.dashboard-header .controle-input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: 0.9;
cursor: pointer;
}
.dashboard-header .controle-input[type="date"]::-webkit-clear-button,
.dashboard-header .controle-input[type="date"]::-webkit-inner-spin-button {
display: none;
}
.dashboard-header .controle-input[type="date"]::-webkit-datetime-edit {
color: #ffffff;
padding: 0.1rem 0;
}
.transacoes-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.1);
z-index: 1;
}
.transacoes-header .header-content {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.transacoes-header .header-info h1 {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.transacoes-header .header-info p {
margin: 0;
opacity: 0.9;
font-size: 1rem;
}
.btn-nova-transacao {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn-nova-transacao:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
.resumo-transacoes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}
.resumo-card {
background: var(--cor-fundo-secundario);
border-radius: 1rem;
padding: 1.5rem;
box-shadow: var(--sombra-padrao);
display: flex;
align-items: center;
gap: 1rem;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
border: 1px solid var(--cor-borda);
}
.resumo-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.resumo-icon {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
}
.resumo-card.receitas .resumo-icon {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
}
.resumo-card.despesas .resumo-icon {
background: linear-gradient(135deg, #F44336, #EF5350);
}
.resumo-card.saldo .resumo-icon {
background: var(--cor-destaque);
}
.resumo-info {
flex: 1;
}
.resumo-label {
display: block;
font-size: 0.875rem;
color: var(--cor-texto-secundario);
margin-bottom: 0.25rem;
font-weight: 500;
}
.resumo-valor {
display: block;
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-texto-principal);
}
.resumo-valor.positivo {
color: #4CAF50;
}
.resumo-valor.negativo {
color: #F44336;
}
.transacoes-filtros {
background: var(--cor-fundo-secundario);
border-radius: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
box-shadow: var(--sombra-padrao);
border: 1px solid var(--cor-borda);
}
.filtros-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.filtro-grupo {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filtro-grupo label {
font-size: 0.875rem;
font-weight: 600;
color: var(--cor-texto);
}
.filtro-select {
padding: 0.75rem 1rem;
border: 2px solid var(--cor-borda);
border-radius: 0.75rem;
font-size: 0.875rem;
background: var(--cor-fundo);
color: var(--cor-texto);
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
cursor: pointer;
}
.filtro-select:focus {
outline: none;
border-color: var(--cor-destaque);
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}
.transacoes-content {
position: relative;
}
.transacoes-lista {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#paginador-container { margin-top: 8px; }
.paginador {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--cor-fundo-secundario);
border: 1px solid var(--cor-borda);
border-radius: 12px;
box-shadow: var(--sombra-padrao);
position: static;
margin: 10px auto;
width: max-content;
}
.paginador-info {
color: var(--cor-texto-secundario);
font-size: 0.9rem;
}
.paginador-controles {
display: flex;
align-items: center;
gap: 6px;
}
.paginador-btn {
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: 10px;
border: 1px solid var(--cor-borda);
background: rgba(255,255,255,0.06);
color: var(--cor-texto);
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.paginador-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.paginador-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.paginador-btn.ativo {
background: var(--cor-destaque);
border-color: var(--cor-destaque);
color: #fff;
}
.paginador-seletor {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 6px;
color: var(--cor-texto-secundario);
font-size: 0.85rem;
}
.paginador-seletor select {
height: 36px;
border-radius: 10px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo);
color: var(--cor-texto);
padding: 0 10px;
}
@media (max-width: 600px) {
.paginador { flex-direction: column; gap: 10px; padding: 10px 12px; }
.paginador-controles { flex-wrap: wrap; justify-content: center; }
}
.grupo-data {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.cabecalho-data {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--cor-fundo-secundario);
border-radius: 0.75rem;
margin-bottom: 0.75rem;
border: 1px solid var(--cor-borda);
}
.data-label {
font-weight: 600;
color: var(--cor-texto);
font-size: 0.875rem;
}
.total-dia {
font-weight: 700;
font-size: 0.875rem;
}
.total-dia.positivo {
color: #4CAF50;
}
.total-dia.negativo {
color: #F44336;
}
.transacoes-do-dia {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.transacao-card {
background: var(--cor-fundo-secundario);
border-radius: 1rem;
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--sombra-padrao);
border: 1px solid var(--cor-borda);
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
transform: translateY(20px);
}
.transacao-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.transacao-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.transacao-icon.receita {
background: linear-gradient(135deg, #4CAF50, #66BB6A);
}
.transacao-icon.despesa {
background: linear-gradient(135deg, #F44336, #EF5350);
}
.transacao-info {
flex: 1;
min-width: 0;
}
.transacao-principal {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.25rem;
}
.transacao-descricao {
font-weight: 600;
color: var(--cor-texto-principal);
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.transacao-valor {
font-weight: 700;
font-size: 1rem;
}
.transacao-valor.receita {
color: #4CAF50;
}
.transacao-valor.despesa {
color: #F44336;
}
.transacao-detalhes {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--cor-texto-secundario);
}
.transacao-categoria {
display: flex;
align-items: center;
gap: 0.25rem;
}
.transacao-acoes {
display: flex;
gap: 0.5rem;
}
.btn-acao {
width: 2rem;
height: 2rem;
border: none;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
font-size: 0.8rem;
}
.btn-acao:not(.excluir) {
background: #F3F4F6;
color: var(--cor-texto-secundario);
}
.btn-acao:not(.excluir):hover {
background: var(--cor-destaque);
color: white;
}
.btn-acao.excluir {
background: #FEF2F2;
color: #F44336;
}
.btn-acao.excluir:hover {
background: #F44336;
color: white;
}
.estado-vazio {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
background: var(--cor-fundo-secundario);
border-radius: 1.5rem;
box-shadow: var(--sombra-padrao);
border: 1px solid var(--cor-borda);
position: relative;
overflow: hidden;
}
.vazio-ilustracao {
position: relative;
margin-bottom: 2rem;
}
.vazio-icon {
width: 5rem;
height: 5rem;
background: linear-gradient(135deg, var(--cor-destaque), #8B7EFF);
border-radius: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
margin: 0 auto 1rem;
position: relative;
z-index: 2;
}
.vazio-decoracao {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.circulo {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, var(--cor-destaque), #8B7EFF);
opacity: 0.1;
animation: float 6s ease-in-out infinite;
will-change: transform;
contain: layout style;
}
.circulo-1 {
width: 8rem;
height: 8rem;
top: -4rem;
left: -4rem;
animation-delay: 0s;
}
.circulo-2 {
width: 6rem;
height: 6rem;
top: -3rem;
right: -3rem;
animation-delay: 2s;
}
.circulo-3 {
width: 4rem;
height: 4rem;
bottom: -2rem;
left: -2rem;
animation-delay: 4s;
}
.vazio-content h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--cor-texto);
margin: 0 0 0.75rem 0;
}
.vazio-content p {
font-size: 1rem;
color: var(--cor-texto-secundario);
margin: 0 0 2rem 0;
max-width: 300px;
line-height: 1.5;
}
.btn-criar-primeira {
background: var(--cor-destaque);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 1rem;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-criar-primeira:hover {
background: #5A52E8;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(108, 99, 255, 0.3);
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@media (max-width: 768px) {
.transacoes-header {
padding: 1.5rem 1rem;
margin: -1rem -1rem 1.5rem -1rem;
}
.transacoes-header .header-content {
flex-direction: column;
text-align: center;
}
.transacoes-header .header-info h1 {
font-size: 1.5rem;
}
.resumo-transacoes {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.filtros-container {
grid-template-columns: 1fr;
}
.transacao-principal {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.transacao-descricao {
max-width: none;
}
.transacao-detalhes {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
@media (max-width: 480px) {
.transacoes-header .header-content {
gap: 1rem;
}
.btn-nova-transacao span {
display: none;
}
.transacao-card {
padding: 0.75rem;
}
.transacao-icon {
width: 2rem;
height: 2rem;
font-size: 0.875rem;
}
.vazio-content {
padding: 0 1rem;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.fade-in {
animation: fadeIn 0.3s ease-in-out;
}
.slide-up {
animation: slideUp 0.3s ease-in-out;
}
.primeiros-passos {
margin-top: 30px;
}
.progresso-passos {
height: 8px;
background-color: var(--cor-borda);
border-radius: 4px;
margin-bottom: 30px;
overflow: hidden;
}
.barra-progresso {
height: 100%;
width: 100%;
background-color: var(--cor-destaque);
border-radius: 4px;
transform-origin: left center;
transition: transform 0.3s;
}
.lista-passos {
list-style: none;
}
.item-passo {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.icone-passo {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
flex-shrink: 0;
border: 2px solid var(--cor-borda);
color: var(--cor-texto-secundario);
}
.icone-passo.completo {
background-color: var(--cor-destaque);
border-color: var(--cor-destaque);
color: white;
}
.texto-passo {
flex: 1;
}
.texto-passo.completo {
text-decoration: line-through;
color: var(--cor-texto-secundario);
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
color: var(--cor-texto-secundario);
text-decoration: none;
font-size: 0.8rem;
padding: 8px 0;
width: 20%;
text-align: center;
transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
border-radius: 12px;
position: relative;
}
.menu-item i {
font-size: 1.2rem;
margin-bottom: 5px;
}
.menu-item span {
font-size: inherit;
}
.menu-item.ativo {
color: var(--cor-destaque);
background: rgba(108, 99, 255, 0.1);
transform: translateY(-2px);
}
.menu-item.ativo i {
transform: scale(1.1);
color: var(--cor-destaque);
}
.menu-item.ativo span {
font-weight: 600;
color: var(--cor-destaque);
}
.menu-item.ativo::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
background: var(--cor-destaque);
border-radius: 0 0 3px 3px;
}
.menu-item:hover {
color: var(--cor-destaque);
transform: translateY(-1px);
}
.menu-item:hover:not(.ativo) {
background: rgba(108, 99, 255, 0.05);
}
.pagina-perfil {
display: flex;
flex-direction: column;
gap: 16px;
}
.perfil-hero {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 24px 16px 20px;
background: var(--cor-fundo-secundario);
border: 1px solid var(--cor-borda);
border-radius: 20px;
text-align: center;
}
.perfil-hero-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid rgba(var(--cor-destaque-rgb), 0.5);
box-shadow: 0 0 0 5px rgba(var(--cor-destaque-rgb), 0.1);
object-fit: cover;
margin-bottom: 4px;
}
.perfil-hero-nome {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-texto);
}
.perfil-hero-email {
font-size: 0.88rem;
color: var(--cor-texto-secundario);
margin-bottom: 8px;
}
.perfil-hero-saldo {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(var(--cor-destaque-rgb), 0.08);
border: 1px solid rgba(var(--cor-destaque-rgb), 0.2);
border-radius: 12px;
padding: 10px 28px;
margin-bottom: 8px;
}
.perfil-hero-saldo-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--cor-texto-secundario);
}
.perfil-hero-saldo-valor {
font-size: 1.5rem;
font-weight: 700;
}
.perfil-hero-saldo-valor.positivo { color: var(--cor-receita); }
.perfil-hero-saldo-valor.negativo { color: var(--cor-despesa); }
.perfil-hero-editar {
margin-top: 4px;
padding: 7px 18px;
background: rgba(var(--cor-destaque-rgb), 0.12);
border: 1px solid rgba(var(--cor-destaque-rgb), 0.3);
border-radius: 20px;
color: var(--cor-destaque);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.perfil-hero-editar:hover {
background: rgba(var(--cor-destaque-rgb), 0.22);
transform: translateY(-1px);
}
.perfil-item-tema {
grid-template-columns: 44px 1fr 44px;
}
.perfil-tema-toggle {
width: 42px;
height: 24px;
background: var(--cor-borda);
border-radius: 12px;
position: relative;
transition: background 0.25s;
pointer-events: none;
flex-shrink: 0;
justify-self: end;
}
.perfil-tema-toggle::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
transition: transform 0.25s;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.perfil-tema-toggle.ativo {
background: var(--cor-destaque);
}
.perfil-tema-toggle.ativo::after {
transform: translateX(18px);
}
.perfil-icon-export {
background: linear-gradient(135deg, rgba(79,172,254,0.25), rgba(0,242,254,0.12)) !important;
border-color: rgba(79,172,254,0.35) !important;
}
.perfil-icon-plano {
background: linear-gradient(135deg, rgba(108,99,255,0.25), rgba(139,126,255,0.12)) !important;
border-color: rgba(108,99,255,0.35) !important;
}
.pagina-perfil .container { all: unset; display: contents; }
.perfil-section {
padding: 0;
margin-bottom: 18px;
}
.perfil-section-title {
margin: 0 0 8px 0;
font-size: 0.85rem;
color: #b3b3b3;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.perfil-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.perfil-item {
background: rgba(24,24,27,0.65);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 12px 14px;
display: grid;
grid-template-columns: 44px 1fr 20px;
align-items: center;
gap: 12px;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
color: inherit;
}
.perfil-item:hover {
border-color: rgba(var(--cor-destaque-rgb),0.4);
box-shadow: 0 10px 26px rgba(0,0,0,0.18);
transform: translateY(-1px);
}
.perfil-item-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #111;
background: linear-gradient(180deg, rgba(var(--cor-destaque-rgb),0.18), rgba(var(--cor-destaque-rgb),0.08));
border: 1px solid rgba(var(--cor-destaque-rgb),0.25);
box-shadow: 0 4px 12px rgba(var(--cor-destaque-rgb),0.18);
}
.perfil-item-content {
display: flex;
flex-direction: column;
gap: 3px;
}
.perfil-item-title {
font-size: 1.02rem;
font-weight: 600;
color: #fff;
}
.perfil-item-desc {
font-size: 0.88rem;
color: #b3b3b3;
}
.perfil-item-arrow {
color: #b3b3b3;
font-size: 1rem;
justify-self: end;
transition: transform 0.2s ease, color 0.2s ease;
}
.perfil-item:hover .perfil-item-arrow {
transform: translateX(4px);
color: var(--cor-destaque);
}
.perfil-item-danger .perfil-item-icon {
background: linear-gradient(180deg, rgba(244,67,54,0.35), rgba(244,67,54,0.14));
border: 1px solid rgba(244,67,54,0.45);
box-shadow: 0 6px 16px rgba(244,67,54,0.25);
}
.perfil-item-danger:hover { border-color: rgba(244,67,54,0.5); }
/* Remover barra amarela antiga do perfil */
.perfil-header { display: none; }
.perfil-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.perfil-content {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 20px;
}
.avatar-container {
position: relative;
}
.avatar {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
border: 4px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.avatar-badge {
position: absolute;
bottom: 5px;
right: 5px;
width: 24px;
height: 24px;
background: #4CAF50;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 0.8rem;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.user-info {
flex: 1;
color: white;
}
.user-info h1 {
margin: 0 0 5px 0;
font-size: 1.8rem;
font-weight: 600;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.user-info p {
margin: 0 0 15px 0;
opacity: 0.9;
font-size: 1rem;
}
.saldo-card {
background: rgba(255, 255, 255, 0.15);
padding: 15px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.saldo-label {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 5px;
}
.saldo-valor {
font-size: 1.5rem;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.perfil-resumo {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 18px 20px;
margin: 0 0 16px;
background: rgba(24,24,27,0.95);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.perfil-resumo-left {
display: grid;
grid-template-columns: 56px 1fr;
align-items: center;
gap: 12px;
}
.perfil-resumo-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px rgba(var(--cor-destaque-rgb),0.25), 0 8px 18px rgba(var(--cor-destaque-rgb),0.22);
}
.perfil-resumo-avatar-img {
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.14);
box-shadow: 0 8px 18px rgba(var(--cor-destaque-rgb),0.22);
object-fit: cover;
}
.perfil-resumo-info h1 {
margin: 0;
font-size: 1.15rem;
color: #fff;
font-weight: 700;
}
.perfil-resumo-info p {
margin: 2px 0 0 0;
color: #b3b3b3;
font-size: 0.9rem;
}
.perfil-resumo-saldo .saldo-label {
color: #b3b3b3;
font-size: 0.82rem;
margin-bottom: 2px;
letter-spacing: 0.02em;
}
.perfil-resumo-saldo .saldo-valor {
font-size: 1.25rem;
font-weight: 700;
color: var(--cor-texto);
}
.perfil-resumo-saldo .saldo-valor.positivo { color: var(--cor-receita); }
.perfil-resumo-saldo .saldo-valor.negativo { color: var(--cor-despesa); }
@media (max-width: 600px) {
.perfil-resumo { grid-template-columns: 1fr; }
.perfil-resumo-saldo {
width: 100%;
display: flex;
align-items: baseline;
justify-content: space-between;
margin-top: 10px;
}
}
.opcoes-menu {
padding: 0 20px;
margin-bottom: 24px;
}
.opcoes-grid {
display: flex;
flex-direction: column;
gap: 15px;
}
.pagina-perfil .opcao-card {
background: rgba(24,24,27,0.65);
border-radius: 14px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.pagina-perfil .opcao-card:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
border-color: rgba(var(--cor-destaque-rgb),0.4);
}
.opcao-card:active {
transform: translateY(0);
}
.pagina-perfil .opcao-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
color: white;
flex-shrink: 0;
background: linear-gradient(180deg, rgba(var(--cor-destaque-rgb),0.28), rgba(var(--cor-destaque-rgb),0.12));
border: 1px solid rgba(var(--cor-destaque-rgb),0.35);
box-shadow: 0 6px 16px rgba(var(--cor-destaque-rgb),0.25);
}
.opcao-icon.edit {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.opcao-icon.theme {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.opcao-icon.export {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.opcao-icon.logout-icon {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.opcao-icon.assinatura {
background: linear-gradient(135deg, #6C63FF 0%, #8B7EFF 100%);
}
.opcao-content {
flex: 1;
}
.pagina-perfil .opcao-content h3 {
margin: 0 0 3px 0;
font-size: 1.02rem;
font-weight: 600;
color: #fff;
}
.pagina-perfil .opcao-content p {
margin: 0;
font-size: 0.88rem;
color: #b3b3b3;
}
.pagina-perfil .opcao-arrow {
color: #b3b3b3;
font-size: 1rem;
transition: transform 0.25s ease, color 0.25s ease;
}
.pagina-perfil .opcao-card:hover .opcao-arrow {
transform: translateX(4px);
color: var(--cor-destaque);
}
.opcao-card.logout:hover {
border-color: #ff6b6b;
}
.opcao-card.logout:hover .opcao-arrow {
color: #ff6b6b;
}
.perfil-footer {
padding: 20px;
text-align: center;
font-size: 0.8rem;
color: var(--cor-texto-secundario);
opacity: 0.6;
}
.app-info {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
color: var(--cor-texto-secundario);
font-size: 0.9rem;
opacity: 0.7;
}
.app-info i {
font-size: 1rem;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.opcao-card {
animation: fadeInUp 0.6s ease forwards;
}
.opcao-card:nth-child(1) { animation-delay: 0.1s; }
.opcao-card:nth-child(2) { animation-delay: 0.2s; }
.opcao-card:nth-child(3) { animation-delay: 0.3s; }
.opcao-card:nth-child(4) { animation-delay: 0.4s; }
.modal-cabecalho h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-texto);
margin: 0;
}
.fechar {
background: none;
border: none;
color: var(--cor-texto-secundario);
font-size: 1.8rem;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s, color 0.2s;
}
.fechar:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--cor-texto);
}
.campo-formulario {
margin-bottom: 20px;
}
.campo-formulario label {
display: block;
margin-bottom: 8px;
color: var(--cor-texto);
font-weight: 500;
font-size: 0.95rem;
}
.campo-formulario input,
.campo-formulario select {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background-color: var(--cor-fundo);
color: var(--cor-texto);
font-size: 1rem;
transition: border-color 0.2s;
box-sizing: border-box;
}
.campo-formulario input:focus,
.campo-formulario select:focus {
border-color: var(--cor-destaque);
outline: none;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}
.campo-formulario input[type="color"] {
height: 45px;
padding: 4px;
cursor: pointer;
}
.icone-preview {
margin-top: 10px;
padding: 12px;
background-color: var(--cor-fundo);
border: 1px solid var(--cor-borda);
border-radius: 8px;
text-align: center;
}
.icone-preview i {
font-size: 1.5rem;
color: var(--cor-destaque);
}
.acoes-formulario {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--cor-borda);
}
.botao {
padding: 12px 24px;
border-radius: 8px;
border: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
min-width: 100px;
}
.botao.primario {
background-color: var(--cor-destaque);
color: white;
}
.botao.primario:hover {
background-color: #5a52e0;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
}
.botao.secundario {
background-color: transparent;
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
}
.botao.secundario:hover {
background-color: var(--cor-fundo);
border-color: var(--cor-texto-secundario);
transform: translateY(-1px);
}
.modal-conteudo {
background-color: var(--cor-fundo-secundario);
border-radius: 16px;
width: 90%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-cabecalho {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid var(--cor-borda);
background: linear-gradient(135deg, var(--cor-fundo-secundario) 0%, rgba(108, 99, 255, 0.05) 100%);
border-radius: 16px 16px 0 0;
}
.modal-corpo {
padding: 24px;
}
.modal {
background: rgba(0, 0, 0, 0.6);
}
.modal.ativo .modal-conteudo {
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 480px) {
.perfil-content {
flex-direction: column;
text-align: center;
gap: 15px;
}
.user-info h1 {
font-size: 1.5rem;
}
.saldo-valor {
font-size: 1.3rem;
}
.opcao-card {
padding: 15px;
}
.opcao-icon {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.modal-conteudo {
width: 95%;
margin: 20px;
}
.modal-cabecalho {
padding: 16px 20px;
}
.modal-corpo {
padding: 20px;
}
.acoes-formulario {
flex-direction: column;
}
.botao {
width: 100%;
}
}
.importacao-controles {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 12px;
}
.importacao-controles label { font-weight: 600; display:block; margin-bottom: 6px; }
.importacao-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.importacao-tabs .tab-botao {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: var(--cor-texto);
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
}
.importacao-tabs .tab-botao.ativo { background: var(--cor-destaque); border-color: var(--cor-destaque); }
.upload-area { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.upload-area i { font-size: 1.2rem; color: var(--cor-destaque); }
.preview-tabela { max-height: 240px; overflow:auto; border:1px solid rgba(255,255,255,0.1); border-radius: 10px; }
.tabela-preview { width:100%; border-collapse: collapse; }
.tabela-preview th, .tabela-preview td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tabela-preview th { text-align:left; opacity:0.9; }
.aviso-pdf { font-size: 0.9rem; opacity: 0.8; margin-bottom: 8px; }
.import-status { margin-top: 10px; font-size: 0.95rem; }
.modal select,
.modal input[type="file"],
.modal input[type="password"] {
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: var(--cor-texto);
height: 36px;
padding: 0 10px;
border-radius: 10px;
appearance: none;
color-scheme: dark;
}
.modal input[type="file"] {
padding: 6px 10px;
width: 100%;
}
.modal select:focus,
.modal input[type="file"]:focus,
.modal input[type="password"]:focus {
outline: none;
border-color: var(--cor-destaque);
}
@media (max-width: 600px) {
.importacao-controles { grid-template-columns: 1fr; }
}
.importacao-controles .controle-col { display:flex; flex-direction:column; gap:6px; }
.upload-area {
display: grid;
grid-template-columns: 28px 1fr;
align-items: center;
gap: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
padding: 10px 12px;
border-radius: 10px;
}
.upload-area i { font-size: 1rem; color: var(--cor-destaque); }
.upload-area input[type="file"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
height: 36px;
width: 100%;
color: var(--cor-texto);
align-self: center;
}
.modal select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat !important;
background-position: right 10px center;
background-size: 16px;
padding-right: 34px;
}
.modal select option {
background: var(--cor-fundo-secundario);
color: var(--cor-texto);
}
.modal input[type="file"]::file-selector-button {
background: var(--cor-fundo);
border: 1px solid rgba(255,255,255,0.25);
color: var(--cor-texto);
padding: 0 14px;
border-radius: 8px;
cursor: pointer;
margin-right: 10px;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
height: 36px;
display: inline-flex;
align-items: center;
}
.modal input[type="file"]::file-selector-button:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.4);
}
/* Modo claro: reforço de contraste em selects e upload */
body.tema-claro .modal select,
body.tema-claro .modal input[type="file"],
body.tema-claro .modal input[type="password"] {
background: #F3F4F6;
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
color-scheme: light;
}
body.tema-claro .modal select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat !important;
background-position: right 10px center;
background-size: 16px;
padding-right: 34px;
}
body.tema-claro .modal select option {
background: #ffffff;
color: #1F2937;
}
body.tema-claro .upload-area {
background: #F9FAFB;
border: 1px solid var(--cor-borda);
}
body.tema-claro .modal input[type="file"]::file-selector-button {
background: #FFFFFF;
border: 1px solid var(--cor-borda);
color: #1F2937;
}
.barra-selecao {
display: none;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(var(--cor-destaque-rgb), 0.12);
border: 1px solid rgba(var(--cor-destaque-rgb), 0.35);
color: var(--cor-texto);
padding: 10px 12px;
border-radius: 10px;
margin-bottom: 12px;
}
.barra-selecao-acoes { display:flex; gap:8px; }
.transacoes-content.modo-selecao .transacao-acoes { display: flex; }
.transacoes-content.modo-selecao .transacao-card { position: relative; cursor: pointer; }
.transacoes-content.modo-selecao .transacao-card.selecionado {
border: 1px solid var(--cor-destaque);
box-shadow: 0 0 0 2px rgba(var(--cor-destaque-rgb),0.25);
background: rgba(var(--cor-destaque-rgb),0.08);
}
/* Ocultar marcador por padrão */
.selecao-marcador { display: none; }
/* Marcador de seleção sem ícone externo */
.transacoes-content.modo-selecao .transacao-card .selecao-marcador {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 22px;
height: 22px;
border-radius: 6px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.35);
display: none;
align-items: center;
justify-content: center;
color: var(--cor-texto);
font-weight: 800;
line-height: 1;
z-index: 1;
pointer-events: none;
}
.transacoes-content.modo-selecao .transacao-card.selecionado .selecao-marcador {
background: var(--cor-destaque);
border-color: var(--cor-destaque);
color: #fff;
display: flex;
}
/* Mobile: marcador substitui o ícone, igual ao PC */
@media (max-width: 767px) {
.transacoes-content.modo-selecao .transacao-card .selecao-marcador {
position: absolute;
top: calc(50% - 1rem);
left: 0.75rem;
transform: none;
width: 2rem;
height: 2rem;
border-radius: 0.75rem;
z-index: 2;
}
.transacoes-content.modo-selecao .transacao-card.selecionado .transacao-icon {
visibility: hidden;
}
}
/* Desktop: marcador próximo ao ícone à esquerda, longe do valor */
@media (min-width: 992px) {
.transacoes-content.modo-selecao .transacao-card .selecao-marcador {
position: absolute;
top: calc(50% - 1.25rem);
left: 1rem;
transform: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.75rem;
display: none;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.35);
align-items: center;
justify-content: center;
color: var(--cor-texto);
font-weight: 800;
font-size: 1rem;
box-shadow: var(--sombra-padrao);
z-index: 2;
}
.transacoes-content.modo-selecao .transacao-card.selecionado .selecao-marcador {
display: flex;
background: var(--cor-destaque);
border-color: var(--cor-destaque);
color: #fff;
}
.transacoes-content.modo-selecao .transacao-card.selecionado .transacao-icon {
visibility: hidden;
}
}
#cancelar-selecao {
background-color: var(--cor-despesa);
color: #fff;
border: none;
}
#cancelar-selecao:hover {
background-color: #dc2626;
}
@media (max-width: 600px) {
.barra-selecao { gap: 6px; }
.barra-selecao-acoes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
width: 100%;
}
.barra-selecao .botao {
min-width: unset;
width: 100%;
padding: 6px 8px;
font-size: 0.8rem;
border-radius: 6px;
line-height: 1.1;
min-height: 32px;
}
#contador-selecao {
font-size: 0.85rem;
}
}
.container-config-recorrencia {
background: var(--cor-fundo-secundario);
border: 1px solid var(--cor-borda);
padding: 10px;
border-radius: 8px;
margin-bottom: 15px;
}
.btn-dia-mes {
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
padding: 5px 0;
border-radius: 4px;
cursor: pointer;
font-size: 0.8em;
transition: transform 0.2s, opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-dia-mes:hover { background: var(--cor-borda); }
.btn-dia-mes.ativo {
background: #ffc107;
color: #000;
border-color: #ffc107;
font-weight: bold;
}
.btn-dia-semana {
flex: 1;
background: var(--cor-fundo);
border: 1px solid var(--cor-borda);
color: var(--cor-texto);
padding: 8px 0;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
transition: transform 0.2s, opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn-dia-semana:hover { background: var(--cor-borda); }
.btn-dia-semana.ativo {
background: #ffc107;
color: #000;
border-color: #ffc107;
font-weight: bold;
}
/* input[type="month"] — mesmo estilo dos inputs de data */
.campo-formulario input[type="month"] {
width: 100%;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background: var(--cor-fundo-secundario);
color: var(--cor-texto);
font-size: 0.95em;
box-sizing: border-box;
color-scheme: dark;
}
body.tema-claro .campo-formulario input[type="month"] {
color-scheme: light;
background: #F3F4F6;
}
.campo-formulario input[type="month"]:focus {
border-color: var(--cor-destaque);
outline: none;
}
.label-checkbox-fim {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9em;
color: var(--cor-texto-secundario);
}
.label-checkbox-fim input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--cor-destaque);
cursor: pointer;
}
/* Compromissos - Barra de seleção */
#barra-selecao-comp {
animation: fadeIn 0.2s ease;
}
#barra-selecao-comp .botao {
cursor: pointer;
}
.compromisso-linha input[type="checkbox"] {
cursor: pointer;
width: 16px;
height: 16px;
}
/* Transações - Barra de pesquisa */
#filtro-pesquisa {
width: 100%;
padding: 10px 14px;
border-radius: 8px;
border: 1px solid var(--cor-borda);
background-color: var(--cor-fundo);
color: var(--cor-texto);
font-size: 0.95rem;
transition: border-color 0.2s;
}
#filtro-pesquisa:focus {
border-color: var(--cor-destaque);
outline: none;
box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}
#filtro-pesquisa::placeholder {
color: var(--cor-texto-secundario);
opacity: 0.6;
}
/* Clickable dashboard cards */
.glass-panel.cursor-pointer {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.glass-panel.cursor-pointer:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}