/* Fontes carregadas via no do index.html (EB Garamond + Inter) */ :root { /* Paleta escura — Dashboard.jsx */ --color-paper: #000000; --color-paper-card: #141414; --color-paper-elev: #1F1F1F; --color-ink: #F4F1EA; --color-ink-soft: #B8B4AC; --color-ink-faint: #6E6A63; --color-line: #262626; --color-line-soft: #1C1C1C; --color-gold: #C4A968; --color-gold-deep: #A98E4E; --color-gold-wash: #17140C; --color-wine: #C97A6D; --color-wine-wash: #1E1513; --color-green: #7FA66F; --color-green-wash: #12160F; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--color-ink); background-color: var(--color-paper); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ——— Layout ——— */ .app-container { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--color-paper); } .dashboard { display: flex; flex-direction: column; min-height: 100vh; } /* ——— Header ——— */ .header { background-color: var(--color-paper); border-bottom: 1px solid var(--color-line); padding: 30px 34px; } .header-inner { max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .header-logo { flex-shrink: 0; } .logo-image { display: block; } .header-info { flex: 1; text-align: right; } .header-date { font-family: 'Inter', sans-serif; font-size: 9.5px; letter-spacing: 0.2em; color: var(--color-ink-soft); text-transform: uppercase; } .header-cref { font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.14em; color: var(--color-ink-faint); margin-top: 4px; text-transform: uppercase; } .btn-logout { padding: 8px 16px; background-color: transparent; color: var(--color-ink); border: 1px solid var(--color-line); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s; border-radius: 0; } .btn-logout:hover { border-color: var(--color-ink-soft); } /* ——— Main Content ——— */ .main-content { max-width: 1160px; margin: 0 auto; padding: 34px; flex: 1; width: 100%; } /* ——— Eyebrow (linha de ouro + título) ——— */ .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); } .eyebrow::before { content: ''; width: 26px; height: 2px; background-color: var(--color-gold); display: inline-block; flex-shrink: 0; } /* ——— Cards ——— */ .card { background-color: var(--color-paper-card); border: 1px solid var(--color-line); border-radius: 0; padding: 28px; display: flex; flex-direction: column; margin-bottom: 30px; } .card-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .card-hint { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--color-ink-faint); } /* ——— Card: Hero (Índice OH) ——— */ .card-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0; margin-bottom: 30px; border: 1px solid var(--color-line); background-color: var(--color-paper-card); padding: 0; } .hero-left { padding: 34px 34px 30px; display: flex; flex-direction: column; } .hero-index { display: flex; align-items: flex-end; gap: 6px; margin-top: 0; margin-bottom: 6px; } .index-number { font-family: 'EB Garamond', serif; font-size: 76px; line-height: 0.9; color: var(--color-ink); font-weight: 400; } .index-slash { font-family: 'EB Garamond', serif; font-size: 30px; color: #4A473F; margin-bottom: 8px; font-weight: 400; } .index-zone { font-family: 'EB Garamond', serif; font-size: 20px; color: var(--color-green); margin-top: 6px; margin-bottom: 14px; font-weight: 400; } .hero-description { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink-soft); line-height: 1.65; max-width: 440px; margin: 0; } .hero-right { background-color: var(--color-gold-wash); border-left: 1px solid var(--color-line); padding: 34px 30px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 30px; align-items: stretch; } .hero-col { display: flex; flex-direction: column; justify-content: center; gap: 20px; } .mini-stat { display: flex; flex-direction: column; gap: 2px; } .no-year-head { margin-bottom: 2px; } .mini-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); } .mini-label.no-year { font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--color-gold); text-transform: uppercase; margin-bottom: 8px; } .mini-value { font-family: 'EB Garamond', serif; font-size: 26px; color: var(--color-ink); font-weight: 400; margin-top: 2px; } .hero-divider { background-color: var(--color-line); width: 1px; align-self: stretch; } /* ——— Card: Chart ——— */ .card-chart { border: 1px solid var(--color-line); background-color: var(--color-paper-card); padding: 26px 28px 18px; margin-bottom: 30px; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .chart-legend { display: flex; gap: 18px; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-soft); } .legend-item { display: flex; align-items: center; gap: 6px; } .legend-line { width: 14px; height: 2px; display: inline-block; } .legend-line.green { background-color: var(--color-green); } .legend-line.wine { background-color: var(--color-wine); } /* ——— Grid 2-colunas ——— */ .grid-2col { display: grid; grid-template-columns: 1fr 420px; gap: 30px; align-items: start; } .col-main { display: flex; flex-direction: column; } .col-sidebar { display: flex; flex-direction: column; } .col-sidebar { gap: 30px; } .sticky-card { position: static; } /* ——— Chat/Assistente ——— */ .chat-log { background-color: transparent; padding: 4px 2px 14px; overflow-y: auto; margin-bottom: 14px; } .chat-msg { max-width: 80%; padding: 10px 14px; font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.5; border-radius: 0; } .chat-sys { align-self: flex-start; background-color: var(--color-paper-elev); border: 1px solid var(--color-line); color: var(--color-ink-soft); } .chat-user { align-self: flex-end; background-color: var(--color-ink); color: var(--color-paper); } .chat-form { display: flex; gap: 10px; align-items: stretch; padding-top: 14px; border-top: 1px solid var(--color-line); } .btn-mic { width: 46px; border: 1px solid var(--color-line); background-color: transparent; color: var(--color-ink-soft); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0; transition: border-color 0.15s, background-color 0.15s; } .btn-mic.listening { border-color: var(--color-gold); background-color: var(--color-gold-wash); color: var(--color-gold); } .btn-mic:hover { border-color: var(--color-ink-soft); } .chat-input { flex: 1; margin-bottom: 0; } /* ——— Fluxo do Mês (2-col span) ——— */ .card-span2 { grid-column: span 2; } .flow-row { display: flex; gap: 30px; align-items: stretch; margin-top: 6px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--color-line); } .flow-col { flex: 1; text-align: center; padding: 8px 0; display: flex; flex-direction: column; } .flow-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); margin-bottom: 8px; } .flow-value { font-family: 'EB Garamond', serif; font-size: 26px; font-weight: 400; line-height: 1; color: var(--color-ink); } .flow-value.green { color: var(--color-green); } .flow-value.wine { color: var(--color-wine); } .flow-col.flow-big .flow-value { font-size: 34px; } .flow-divider { width: 1px; background-color: var(--color-line); } .tx-form { display: grid; grid-template-columns: auto 1fr 1.4fr auto; gap: 10px; margin-top: 26px; } /* ——— Reserva ——— */ .reserve-display { text-align: center; padding: 10px 0 4px; margin-bottom: 20px; } .reserve-amount { font-family: 'EB Garamond', serif; font-size: 46px; color: var(--color-gold); line-height: 1; font-weight: 400; } .reserve-goal { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--color-ink-faint); margin-top: 8px; margin-bottom: 0; } .reserve-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; } .progress-bar { flex: 1; height: 3px; background-color: var(--color-line-soft); overflow: hidden; border-radius: 0; } .progress-fill { height: 100%; background-color: var(--color-gold); width: 0%; transition: width 0.4s ease; } .progress-text { font-family: 'EB Garamond', serif; font-size: 17px; color: var(--color-gold); min-width: 46px; text-align: right; font-weight: 400; } .savings-form { display: flex; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-line); } /* ——— Próximas Entradas ——— */ .upcoming-summary { background-color: var(--color-gold-wash); border: 1px solid var(--color-line); padding: 16px 18px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: baseline; } .upcoming-summary-label { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); } .upcoming-summary-value { font-family: 'EB Garamond', serif; font-size: 24px; color: var(--color-gold); font-weight: 400; } .upcoming-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } /* ——— Iniciativas ——— */ .initiatives-form { display: flex; gap: 10px; } .initiatives-list { margin-top: 16px; } /* ——— Compromissos ——— */ .commitments-list { margin-top: 0; margin-bottom: 18px; } .commitments-divider { height: 1px; background-color: var(--color-line); margin: 18px -28px 20px -28px; width: calc(100% + 56px); } .commitment-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); } .commitment-time { font-family: 'EB Garamond', serif; font-size: 16px; color: var(--color-gold); margin-right: 14px; font-weight: 400; } .commitment-title { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink); font-weight: 500; } .commitment-item:last-child { border-bottom: none; } .analysis-box { background-color: var(--color-gold-wash); margin: -28px -28px -28px -28px; padding: 20px 28px 24px; margin-left: -28px; margin-right: -28px; margin-bottom: -28px; } .analysis-title { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 8px; } .analysis-critique { font-family: 'EB Garamond', serif; font-size: 16px; font-style: italic; color: var(--color-ink-soft); line-height: 1.6; margin: 0; font-weight: 400; } /* ——— Coerência (2-col span) ——— */ .coherence-desc { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink-soft); line-height: 1.6; margin: 0 0 18px 0; max-width: 620px; } .coherence-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; } .coherence-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; } .coherence-label.green { color: var(--color-green); } .coherence-label.faint { color: var(--color-ink-faint); } .coherence-list { display: flex; flex-direction: column; gap: 7px; } .coherence-item { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink); display: flex; gap: 10px; padding: 7px 0; } .coherence-item.untouched, .coherence-item.faint { color: var(--color-ink-faint); } .coherence-item.touched::before { content: '◆'; color: var(--color-green); font-size: 9px; line-height: 1.6; } .coherence-item.faint::before { content: '·'; color: var(--color-ink-faint); } .coherence-head-right { display: flex; align-items: center; gap: 14px; } .coherence-percent { font-family: 'EB Garamond', serif; font-size: 26px; color: var(--color-gold); line-height: 1; } .coherence-suggestion { font-family: 'EB Garamond', serif; font-size: 15px; font-style: italic; color: var(--color-ink-soft); line-height: 1.6; margin: 0; padding-top: 16px; border-top: 1px solid var(--color-line); font-weight: 400; } /* ——— Sidebar: Micro Conquistas ——— */ .wins-list { display: flex; flex-direction: column; } .win-item { display: flex; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); } .win-item:last-child { border-bottom: none; } .win-icon { color: var(--color-gold); font-size: 14px; line-height: 1; flex-shrink: 0; } .win-content { display: flex; flex-direction: column; flex: 1; } .win-text { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink); line-height: 1.45; } .win-date { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--color-ink-faint); margin-top: 3px; } .sidebar-desc { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--color-ink-faint); line-height: 1.55; margin: 0 0 18px 0; } /* ——— Análise Diária Automática ——— */ .auto-analysis { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--color-line); } .auto-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .auto-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); } .auto-badge { font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); border: 1px solid var(--color-line); padding: 3px 9px; display: inline-flex; align-items: center; gap: 6px; } .auto-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-green); display: inline-block; } .auto-desc { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--color-ink-soft); line-height: 1.55; margin: 0 0 12px 0; } .auto-result { background-color: var(--color-paper-elev); border: 1px solid var(--color-line); padding: 12px 14px; } .auto-result-label { font-family: 'Inter', sans-serif; font-size: 10.5px; color: var(--color-ink-faint); margin-bottom: 4px; } .auto-result-value { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink); } /* ——— Desejos & Upgrades ——— */ .card-wishes { grid-column: span 1; } .wishes-desc { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink-soft); line-height: 1.6; margin: 0 0 8px 0; max-width: 620px; } .wishes-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 18px 0; padding-bottom: 12px; border-bottom: 1px solid var(--color-line-soft); } .legend-badge { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 0; text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; border: 1px solid; } .legend-badge.saude { background-color: #12160F; color: #7FA66F; border-color: #7FA66F; } .legend-badge.negocio { background-color: #1E1513; color: #C97A6D; border-color: #C97A6D; } .legend-badge.casa { background-color: #17140C; color: #C4A968; border-color: #C4A968; } .legend-badge.arte { background-color: #1F1F1F; color: #B8B4AC; border-color: #B8B4AC; } .legend-badge.financeiro { background-color: #12160F; color: #7FA66F; border-color: #7FA66F; } .wishes-list { margin-top: 16px; } .wish-item { display: grid; grid-template-columns: auto auto 1fr; column-gap: 12px; row-gap: 3px; align-items: center; padding: 12px 0 12px 12px; border-bottom: 1px solid var(--color-line-soft); border-left: 2px solid var(--color-gold); transition: background-color 0.15s; cursor: grab; } .wish-handle { grid-column: 1; grid-row: 1 / 3; } .wish-check { grid-column: 2; grid-row: 1 / 3; } .wish-text { grid-column: 3; grid-row: 1; } .wish-dates { grid-column: 3; grid-row: 2; } .wish-item:hover { background-color: var(--color-paper-elev); } .wish-item:last-child { border-bottom: none; } .wish-item.dragging { opacity: 0.5; background-color: var(--color-paper-elev); } .wish-handle { cursor: grab; color: var(--color-ink-faint); font-size: 15px; line-height: 1; user-select: none; margin-left: -12px; padding-right: 6px; } .wish-check { width: 17px; height: 17px; cursor: pointer; accent-color: var(--color-gold); } .wish-text { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--color-ink); font-weight: 500; } .wish-text.done { color: var(--color-ink-faint); text-decoration: line-through; text-decoration-color: var(--color-ink-faint); font-weight: 400; } .wish-dates { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-faint); text-align: left; white-space: normal; } .wishes-form { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line); } /* Lista de desejos: expande por completo (sem scroll interno) — usa o espaço da coluna. */ /* ——— Forms ——— */ .form-control { width: 100%; padding: 11px 12px; border: 1px solid var(--color-line); background-color: var(--color-paper-card); color: var(--color-ink); font-family: 'Inter', sans-serif; font-size: 14px; outline: none; border-radius: 0; transition: border-color 0.15s; } .form-control::placeholder { color: var(--color-ink-faint); } .form-control:focus { border-color: var(--color-gold); background-color: var(--color-paper-elev); } /* ——— Buttons ——— */ .btn-primary, .btn-ghost, .btn-solid { padding: 10px 18px; font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: 0; transition: opacity 0.15s; white-space: nowrap; } .btn-primary { background-color: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); } .btn-primary:hover { opacity: 0.85; } .btn-ghost { background-color: transparent; color: var(--color-ink); border: 1px solid var(--color-line); } .btn-ghost:hover { border-color: var(--color-ink-soft); } .btn-solid { background-color: var(--color-ink); color: var(--color-paper); border: 1px solid var(--color-ink); } .btn-solid:hover { opacity: 0.85; } /* ——— Lists ——— */ .transaction-item, .upcoming-item, .initiative-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); } .transaction-item:last-child, .upcoming-item:last-child, .initiative-item:last-child { border-bottom: none; } .transaction-desc, .upcoming-desc, .initiative-title { flex: 1; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: var(--color-ink); } .initiative-main { flex: 1; display: flex; flex-direction: column; gap: 2px; } .initiative-date { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-faint); } .upcoming-date { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink-faint); margin-right: 10px; } .transaction-amount, .upcoming-amount { font-family: 'EB Garamond', serif; font-size: 16px; font-weight: 400; margin-left: 12px; } .transaction-amount.income { color: var(--color-green); } .transaction-amount.expense { color: var(--color-wine); } .empty-state { font-family: 'EB Garamond', serif; font-style: italic; font-size: 14px; color: var(--color-ink-faint); text-align: center; padding: 22px 0; margin: 0; } .empty-state-small { font-family: 'EB Garamond', serif; font-style: italic; font-size: 13px; color: var(--color-ink-faint); margin: 0; } /* ——— Modal ——— */ .modal { display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; z-index: 200; } .modal.hidden { display: none; } .modal-content { background-color: var(--color-paper-card); border: 1px solid var(--color-line); border-radius: 0; max-width: 400px; width: 90%; } .modal-body { padding: 30px 30px; text-align: center; } .modal-body h2 { font-family: 'EB Garamond', serif; font-size: 24px; font-weight: 500; margin: 0 0 12px 0; color: var(--color-ink); } .modal-body p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--color-ink-soft); margin: 0 0 30px 0; } #login-form { display: grid; gap: 12px; } #login-form input { padding: 11px 12px; border: 1px solid var(--color-line); border-radius: 0; font-size: 14px; background-color: var(--color-paper-elev); color: var(--color-ink); font-family: 'Inter', sans-serif; } #login-form input::placeholder { color: var(--color-ink-faint); } #login-form input:focus { outline: none; border-color: var(--color-gold); } #login-form button { margin-top: 12px; } .error-message { color: var(--color-wine); font-family: 'Inter', sans-serif; font-size: 12px; margin-top: 12px; } /* ——— Importar extrato / fatura ——— */ .upload-desc { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink-soft); line-height: 1.6; margin: 0 0 18px; max-width: 620px; } .upload-desc strong { color: var(--color-ink); font-weight: 600; } .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--color-line); background-color: var(--color-paper-elev); padding: 34px 20px; cursor: pointer; text-align: center; transition: border-color 0.15s; } .dropzone:hover, .dropzone.dragover { border-color: var(--color-gold); } .dropzone-icon { font-size: 22px; color: var(--color-gold); } .dropzone-title { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink); } .dropzone-hint { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-faint); } .upload-status { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--color-ink-faint); margin-top: 12px; min-height: 16px; } .upload-status.error { color: var(--color-wine); } .upload-status.loading { color: var(--color-gold); } .review-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink-soft); } .review-head .review-count { color: var(--color-gold); font-size: 12px; } .review-sub { font-family: 'Inter', sans-serif; font-size: 11.5px; color: var(--color-ink-faint); margin: 0 0 16px; } .review-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); } .review-row.ignored { opacity: 0.5; } .review-check { width: 16px; height: 16px; accent-color: var(--color-gold); cursor: pointer; } .review-check:disabled { cursor: default; } .review-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink); } .review-meta { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-faint); margin-top: 2px; } .review-meta .reason { color: var(--color-gold); } .review-dir { font-family: 'Inter', sans-serif; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; padding: 3px 8px; cursor: pointer; border-radius: 0; } .review-dir.in { color: var(--color-green); border: 1px solid var(--color-green); } .review-dir.out { color: var(--color-wine); border: 1px solid var(--color-wine); } .review-dir.ignore { color: var(--color-gold); border: 1px solid var(--color-line); cursor: pointer; } .review-amount { font-family: 'EB Garamond', serif; font-size: 16px; min-width: 110px; text-align: right; } .review-amount.in { color: var(--color-green); } .review-amount.out { color: var(--color-wine); } .review-amount.ignore { color: var(--color-ink-faint); } .review-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-line); } /* ——— Fluxo do ano: legenda, lista, edição ——— */ .flow-scope { font-family: 'Inter', sans-serif; font-size: 11px; color: var(--color-ink-faint); margin: -6px 0 16px; } .transaction-list { max-height: 420px; overflow-y: auto; } .transaction-date { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--color-ink-faint); min-width: 62px; margin-right: 10px; } .tx-list-footer { display: flex; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-line); } .tx-editing { display: grid; grid-template-columns: 140px 96px 108px 1fr auto; gap: 8px; align-items: center; } .tx-editing .form-control { padding: 7px 8px; font-size: 12.5px; } .tx-editing .tx-e-del { background: none; border: none; cursor: pointer; color: var(--color-wine); font-size: 18px; line-height: 1; } @media (max-width: 640px) { .tx-editing { grid-template-columns: 1fr 1fr auto; } .tx-editing .tx-e-desc { grid-column: 1 / -1; } } /* ——— Placar de Captação ST23 ——— */ .anchor-banner { display: flex; align-items: flex-start; gap: 12px; background-color: var(--color-gold-wash); border: 1px solid var(--color-gold-deep); padding: 16px 20px; margin-bottom: 24px; font-family: 'EB Garamond', serif; font-size: 17px; font-style: italic; line-height: 1.5; color: var(--color-ink); } .anchor-banner .anchor-mark { color: var(--color-gold); font-style: normal; font-size: 12px; margin-top: 4px; } .card-captacao { margin-bottom: 30px; } .captacao-days { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-gold); } .captacao-indicators { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 18px 0 24px; } .cap-indicator { display: flex; flex-direction: column; gap: 6px; } .cap-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint); } .cap-value { font-family: 'EB Garamond', serif; font-size: 30px; color: var(--color-ink); line-height: 1; } .cap-indicator .progress-bar { margin-top: 4px; } .cap-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--color-ink-soft); } .captacao-checks { border-top: 1px solid var(--color-line); padding-top: 18px; } .cap-checks-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .cap-checks-title { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); } .cap-checks-count { font-family: 'EB Garamond', serif; font-size: 20px; color: var(--color-gold); } .cap-check { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line-soft); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--color-ink); } .cap-check:last-child { border-bottom: none; } .cap-check input { width: 17px; height: 17px; accent-color: var(--color-green); cursor: pointer; } .cap-check.done span { color: var(--color-ink-faint); text-decoration: line-through; } .captacao-history { border-top: 1px solid var(--color-line); padding-top: 16px; margin-top: 8px; } .cap-hist-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); } .cap-hist-row { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 12px; } .cap-hist-bar { flex: 1; height: 100%; background-color: var(--color-paper-elev); display: flex; align-items: flex-end; max-width: 22px; } .cap-hist-fill { width: 100%; background-color: var(--color-ink-faint); min-height: 2px; } .cap-hist-fill.full { background-color: var(--color-green); } .captacao-backlog { margin-top: 18px; border-top: 1px solid var(--color-line); padding-top: 14px; } .captacao-backlog summary { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-faint); cursor: pointer; } .cap-backlog-item { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--color-ink-faint); padding: 8px 0 8px 14px; border-bottom: 1px solid var(--color-line-soft); } .cap-backlog-item:last-child { border-bottom: none; } @media (max-width: 768px) { .captacao-indicators { grid-template-columns: 1fr; gap: 20px; } } /* ——— Placar de Prospecção ——— */ .card-prospeccao { margin-bottom: 30px; } .prosp-total { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-gold); } .prosp-desc { font-family: 'Inter', sans-serif; font-size: 12.5px; color: var(--color-ink-soft); line-height: 1.6; margin: 8px 0 20px; max-width: 620px; } .prosp-desc strong { color: var(--color-ink); font-weight: 600; } .prosp-today { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 4px 0 20px; border-bottom: 1px solid var(--color-line); } .prosp-today-num { font-family: 'EB Garamond', serif; font-size: 52px; line-height: 0.9; color: var(--color-ink); } .prosp-today-status { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--color-ink-faint); margin-top: 6px; } .prosp-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .prosp-buttons .prosp-undo { color: var(--color-ink-faint); } .prosp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--color-line); } .prosp-stat { display: flex; flex-direction: column; gap: 4px; } .prosp-stat-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-faint); } .prosp-stat-val { font-family: 'EB Garamond', serif; font-size: 26px; color: var(--color-gold); line-height: 1; } .prosp-history { padding-top: 16px; } .prosp-hist-label { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-faint); } .prosp-hist-row { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 12px; } .prosp-hist-bar { flex: 1; height: 100%; background-color: var(--color-paper-elev); display: flex; align-items: flex-end; max-width: 22px; } .prosp-hist-fill { width: 100%; background-color: var(--color-ink-faint); min-height: 2px; } .prosp-hist-fill.met { background-color: var(--color-green); } .prosp-hist-fill.extra { background-color: var(--color-gold); } @media (max-width: 640px) { .prosp-stats { grid-template-columns: 1fr; gap: 14px; } .prosp-today { flex-direction: column; align-items: flex-start; } } /* ——— Responsive ——— */ @media (max-width: 980px) { .grid-2col { grid-template-columns: 1fr; } .sticky-card { position: static; } .card-hero { grid-template-columns: 1fr; } .hero-right { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--color-line); } .hero-divider { display: none; } } @media (max-width: 768px) { .main-content { padding: 20px 16px; } .header-inner { flex-wrap: wrap; gap: 12px; } .header-info { order: 3; width: 100%; text-align: left; } .card-span2 { grid-column: span 1; } .card-chart { grid-column: span 1; } .tx-form { grid-template-columns: 1fr; } .flow-row { flex-direction: column; gap: 16px; } .flow-divider { display: none; } .upcoming-form { grid-template-columns: 1fr; } .coherence-cols { grid-template-columns: 1fr; gap: 12px; } .wish-item { grid-template-columns: auto auto 1fr; } .wish-dates { grid-column: 3; text-align: left; min-width: 0; white-space: normal; margin-top: 4px; } }