:root { --bg: #f4f5f9; --surface: #ffffff; --text: #1f2430; --text-muted: #6b7280; --border: #e5e7eb; --primary: #4f46e5; --primary-dark: #4338ca; --success: #10b981; --danger: #ef4444; --warning: #f59e0b; --radius: 10px; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --alert-error-bg: #fee2e2; --alert-error-text: #991b1b; --alert-success-bg: #d1fae5; --alert-success-text: #065f46; --alert-warning-bg: #fef3c7; --alert-warning-text: #92400e; } /* Tema escuro: aplicado via [data-theme="dark"] no , definido o mais cedo possível (script inline no , antes do CSS pintar a página) para não haver flash da paleta clara antes de trocar. */ :root[data-theme="dark"] { --bg: #12131a; --surface: #1b1d27; --text: #e7e9ee; --text-muted: #9ca0ae; --border: #2d303c; --primary: #6366f1; --primary-dark: #818cf8; --success: #34d399; --danger: #f87171; --warning: #fbbf24; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5); --alert-error-bg: #3f1d1d; --alert-error-text: #fca5a5; --alert-success-bg: #163527; --alert-success-text: #6ee7b7; --alert-warning-bg: #3a2c0f; --alert-warning-text: #fcd34d; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 220px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; } .brand { font-weight: 700; font-size: 16px; margin-bottom: 24px; padding: 0 8px; } .brand small { display: block; font-weight: 400; color: var(--text-muted); font-size: 12px; } .nav-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius); color: var(--text); font-weight: 500; margin-bottom: 2px; } .nav-link:hover { background: var(--bg); text-decoration: none; } .nav-link.active { background: var(--primary); color: #fff; } .sidebar-footer { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--border); } .user-name { font-size: 13px; color: var(--text-muted); padding: 0 8px 8px; } .btn-logout { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 8px; } .btn-logout:hover { color: var(--danger); } main { flex: 1; padding: 28px 32px; min-width: 0; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .page-header h1 { margin: 0; font-size: 22px; } .month-nav { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; } .month-nav a { color: var(--text); font-weight: 600; } .month-nav span { min-width: 140px; text-align: center; text-transform: capitalize; font-weight: 600; } .user-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } .user-filter-label { font-size: 13px; color: var(--text-muted); font-weight: 600; } .user-filter-chip { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; } .user-filter-chip:hover { background: var(--bg); text-decoration: none; } .user-filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: block; text-decoration: none; transition: border-color .15s; position: relative; } a.card:hover { border-color: var(--primary); text-decoration: none; } .card .label { color: var(--text-muted); font-size: 13px; margin-bottom: 6px; padding-right: 20px; } .card .value { font-size: 24px; font-weight: 700; } .card .value.positive { color: var(--success); } .card .value.negative { color: var(--danger); } /* Modo de reorganização dos cards (arrastar e soltar) — ver dashboard.html */ .cards.reorder-mode .card { cursor: grab; user-select: none; border-style: dashed; } .cards.reorder-mode .card:active { cursor: grabbing; } .card.dragging { opacity: 0.4; } .cards-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin: -10px 0 10px; } .card-eye { position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 13px; color: var(--text-muted); opacity: 0.55; cursor: pointer; } .card-eye:hover { opacity: 1; background: var(--bg); } .grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 24px; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; } .chart-box { position: relative; height: 260px; } .chart-box canvas { width: 100% !important; height: 100% !important; } .category-chart-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .category-chart-box { flex: 1 1 220px; max-width: 260px; } .category-chart-info { flex: 1 1 200px; min-width: 180px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; } .category-chart-info-total { font-size: 20px; font-weight: 700; margin: 6px 0 10px; } .category-chart-info-pct { font-size: 13px; font-weight: 600; color: var(--text-muted); } .category-chart-info-subs { display: flex; flex-direction: column; gap: 6px; } .category-chart-info-sub { display: flex; align-items: baseline; align-self: flex-start; gap: 14px; font-size: 13px; color: var(--text-muted); padding-left: 16px; } .category-chart-info-sub span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; } .chat-panel { display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 360px; padding: 0; overflow: hidden; } .chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); } .chat-bubble-user { align-self: flex-end; background: var(--primary); color: #fff; border-color: var(--primary); } .chat-bubble-assistant { align-self: flex-start; } .chat-bubble-content { white-space: pre-wrap; font-size: 14px; } .chat-pending-card { margin-top: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 4px; } .chat-pending-actions { display: flex; gap: 8px; margin-top: 8px; } .chat-input-row { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); } .chat-input-row input { flex: 1; } table { width: 100%; border-collapse: collapse; font-size: 14px; } /* Lançamentos: o formulário "Novo lançamento" e a barra de filtros ficam fixos na tela (fora desta área) — só a lista de lançamentos rola, na sua própria barra de rolagem, com o cabeçalho da tabela grudado no topo enquanto rola. */ .scroll-panel { max-height: 65vh; overflow-y: auto; /* position: sticky gruda no topo da PADDING BOX do contêiner com scroll — com o padding-top herdado de .panel, sobrava uma faixa de ~18px entre a borda do painel e o cabeçalho grudado onde as linhas roladas ainda apareciam por trás (o "cabeçalho se misturando com as linhas" reportado). Zerando o padding-top aqui (e devolvendo o respiro só no th, abaixo) o cabeçalho fica rente à borda, sem vão. */ padding-top: 0; } .scroll-panel table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-top: 18px; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); } th { color: var(--text); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } tr:last-child td { border-bottom: none; } td.amount-entrada { color: var(--success); font-weight: 600; } td.amount-saida { color: var(--danger); font-weight: 600; } .tx-totals { font-size: 14px; margin: -6px 0 16px; color: var(--text-muted); } .tx-totals strong.amount-entrada { color: var(--success); } .tx-totals strong.amount-saida { color: var(--danger); } .couple-category-row { cursor: pointer; } .couple-category-row:hover { background: var(--bg); } .couple-toggle { display: inline-block; width: 12px; color: var(--text-muted); } .couple-detail-row td { padding: 0 8px 12px 24px; border-bottom: 1px solid var(--border); } .couple-detail-row table { font-size: 13px; } /* Categorias com muitos lançamentos no período (ex.: visão anual) geram uma lista de detalhe grande — trava a altura com rolagem própria e o cabeçalho grudado no topo, igual à lista de Lançamentos. Sem padding no eixo do scroll (ver .scroll-panel), então não precisa do ajuste de padding-top usado lá. */ .detail-scroll { max-height: 320px; overflow-y: auto; } .detail-scroll table thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg); } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 20px; } .form-card h2 { margin: 0 0 14px; font-size: 15px; } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; } label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--text-muted); } .help-text { font-size: 12px; color: var(--warning); margin: 4px 0 0; } /* Ícone de "dica" (💡) que substitui um parágrafo de texto explicativo fixo na tela: fica escondido até passar o cursor (ou focar via teclado), quando revela um balão com o texto — usado no canto direito do cabeçalho de um card/painel. Ver .panel-header-row abaixo para o posicionamento padrão ao lado de um

. */ .info-hint { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; cursor: help; font-size: 13px; line-height: 1; flex-shrink: 0; } .info-hint:hover, .info-hint:focus { background: var(--bg); } .info-hint-bubble { position: absolute; top: 100%; left: 50%; margin-top: 8px; transform: translateX(-50%) translateY(-4px); width: 260px; max-width: min(320px, 80vw); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text-muted); text-align: left; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease; z-index: 30; } .info-hint:hover .info-hint-bubble, .info-hint:focus .info-hint-bubble, .info-hint:focus-within .info-hint-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* No cabeçalho de um card ou da página (canto direito), o balão abre pra esquerda em vez de centralizado — senão vazaria pra fora do card ou da tela. */ .panel-header-row .info-hint-bubble, .page-header .info-hint-bubble { left: auto; right: 0; transform: translateY(-4px); } .panel-header-row .info-hint:hover .info-hint-bubble, .page-header .info-hint:hover .info-hint-bubble, .panel-header-row .info-hint:focus .info-hint-bubble, .page-header .info-hint:focus .info-hint-bubble, .panel-header-row .info-hint:focus-within .info-hint-bubble, .page-header .info-hint:focus-within .info-hint-bubble { transform: translateY(0); } .panel-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .panel-header-row h2 { margin: 0; } input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); } input[type="color"] { padding: 2px; height: 38px; width: 70px; } input[type="range"] { padding: 0; border: none; background: transparent; height: 20px; accent-color: var(--primary); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; border: none; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; } .btn:hover { background: var(--primary-dark); } .btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } .btn-danger { background: var(--danger); } .btn-danger:hover { background: #dc2626; } .btn-sm { padding: 5px 10px; font-size: 12px; } .alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .alert-warning { background: var(--alert-warning-bg); color: var(--alert-warning-text); } .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; } .filter-bar .field { min-width: 140px; } .filter-bar label { margin-bottom: 3px; } .checkbox-dropdown { position: relative; } .checkbox-dropdown-toggle { width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkbox-dropdown-toggle::after { content: '▾'; float: right; margin-left: 6px; color: var(--text-muted); } .checkbox-dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); } .checkbox-dropdown-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; } .checkbox-dropdown-item:hover { background: var(--bg); } .checkbox-dropdown-item input { width: auto; margin: 0; } .empty-state { color: var(--text-muted); text-align: center; padding: 30px 10px; font-size: 14px; } .emoji-popover { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; width: 260px; max-height: 180px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 8px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; } .emoji-popover[hidden] { display: none; } .emoji-popover button { border: none; background: none; font-size: 18px; line-height: 1; padding: 5px 0; border-radius: 6px; cursor: pointer; } .emoji-popover button:hover { background: var(--bg); } .icon-select-trigger { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; } .icon-select-trigger:hover { background: var(--bg); } .icon-select-trigger:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .icon-popover { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; width: 220px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; } .icon-popover[hidden] { display: none; } .icon-popover button { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none; font-size: 13px; color: var(--text); padding: 7px 8px; border-radius: 6px; cursor: pointer; text-align: left; } .icon-popover button:hover { background: var(--bg); } .progress-bar { position: relative; background: var(--bg); border-radius: 999px; height: 8px; overflow: hidden; margin-top: 6px; } .progress-bar-fill { height: 100%; border-radius: 999px; transition: width 0.15s linear; } .progress-bar-fill.ok { background: var(--success); } .progress-bar-fill.processing { animation: cf-progress-pulse 1.2s ease-in-out infinite; } @keyframes cf-progress-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .progress-bar-fill.warn { background: var(--warning); } /* Balizadores: marcam onde ficam os limiares do semáforo (50%/90%) na régua da barra, como referência visual fixa — independente de onde o preenchimento atual está. mix-blend-mode faz a marca aparecer tanto sobre a trilha vazia quanto sobre o preenchimento colorido. */ .progress-bar-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: #888; mix-blend-mode: difference; pointer-events: none; } .progress-bar-fill.over { background: var(--danger); } .budget-amount-form { min-width: 160px; } .budget-amount-value { font-weight: 600; margin-bottom: 4px; } .budget-amount-form input[type="range"] { margin: 0; } .budget-flag { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .budget-flag.ok { background: var(--alert-success-bg); color: var(--alert-success-text); } .budget-flag.warn { background: var(--alert-warning-bg); color: var(--alert-warning-text); } .budget-flag.over { background: var(--alert-error-bg); color: var(--alert-error-text); } .visibility-icon { display: inline-flex; color: var(--alert-success-text); } .visibility-icon.private { color: var(--alert-warning-text); } .visibility-icon-btn { display: inline-flex; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; } .visibility-icon-btn:hover { opacity: 0.7; } .btn-link-edit { background: none; border: none; padding: 0; margin-left: 4px; cursor: pointer; font-size: 12px; opacity: 0.6; } .btn-link-edit:hover { opacity: 1; } .category-badge { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .account-icon { width: 16px; height: 16px; border-radius: 3px; display: inline-block; vertical-align: middle; object-fit: contain; } .subcategory-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .subcategory-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 14px; font-size: 13px; color: var(--text); } .subcategory-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: none; background: var(--border); color: var(--text-muted); font-size: 14px; line-height: 1; cursor: pointer; padding: 0; } .subcategory-chip-remove:hover { background: var(--danger); color: #fff; } /* Numa , display:flex tira a célula do modo "célula de tabela" e quebra o alinhamento de colunas da tabela inteira — por isso o flex só é aplicado quando .actions-cell é uma
(fora de tabela, como em categories.html); dentro de , o espaçamento vem de margin. */ .actions-cell { white-space: nowrap; } .actions-cell > :not(:last-child) { margin-right: 6px; } div.actions-cell { display: flex; gap: 6px; } div.actions-cell > :not(:last-child) { margin-right: 0; } .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(79, 70, 229, 0.75), rgba(124, 58, 237, 0.75)), url("/static/img/familia.jpg") center / cover no-repeat; } .login-card { background: var(--surface); padding: 32px 30px; border-radius: 14px; width: 100%; max-width: 360px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .login-card h1 { font-size: 18px; margin: 0 0 4px; } .login-card p.subtitle { color: var(--text-muted); font-size: 13px; margin: 0 0 20px; } .login-card .btn { width: 100%; justify-content: center; margin-top: 6px; } .settings-section { margin-bottom: 22px; } .settings-section h2 { font-size: 15px; margin: 0 0 4px; } .settings-section p.help { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; } .checkbox-row { display: flex; align-items: center; gap: 8px; } .checkbox-row input { width: auto; } /* Modal de confirmação (substitui o confirm() nativo do navegador para todo hx-confirm — ver o listener de htmx:confirm em layout.html). */ .confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; } .confirm-overlay[hidden] { display: none; } .confirm-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; max-width: 420px; width: 100%; } .confirm-box p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-line; } .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; } @media (max-width: 720px) { .app-shell { flex-direction: column; } .sidebar { width: 100%; flex-direction: row; overflow-x: auto; align-items: center; } .sidebar-footer { display: none; } .brand { display: none; } main { padding: 18px; } .chat-panel { height: calc(100vh - 150px); } .chat-bubble { max-width: 90%; } .chat-input-row { padding: 12px 14px; } }