:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #0b1120; color: #e5e7eb; }
* { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button, input, select { font: inherit; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; height: 100dvh; padding: 28px 16px; border-right: 1px solid #1e293b; background: #0f172a; display: flex; flex-direction: column; z-index: 100; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }
.brand { font-weight: 750; font-size: 20px; margin: 0 12px 36px; color: #fff; display: flex; align-items: center; width: 100%; }.brand span { color: #60a5fa; margin-right: 6px; } nav { display: grid; gap: 5px; } nav a { color: #94a3b8; text-decoration: none; padding: 11px 12px; border-radius: 9px; font-size: 14px; } nav a.active, nav a:hover { background: #172554; color: #dbeafe; }.reset-button { margin: auto 8px 0; border: 0; background: transparent; color: #64748b; cursor: pointer; text-align: left; font-size: 12px; }.reset-button:hover { color: #fca5a5; }
.menu-toggle { display: block; position: fixed; top: 16px; left: 16px; z-index: 90; background: #111c32; border: 1px solid #334155; color: #f8fafc; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1); transition: background .15s; }
.menu-toggle:hover { background: #1e293b; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(2, 6, 23, 0.7); z-index: 95; opacity: 0; transition: opacity 0.3s ease; }
.close-menu-btn { display: block; background: transparent; border: 0; color: #94a3b8; font-size: 20px; cursor: pointer; margin-left: auto; padding: 4px; line-height: 1; }
.close-menu-btn:hover { color: #f8fafc; }
.main { margin: 0 auto; max-width: 1450px; padding: 72px clamp(24px, 5vw, 74px) 44px; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@media (min-width: 901px) { .main.menu-open { margin-left: 240px; } }
header { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 35px; } h1, h2, p { margin-top: 0; } h1 { font-size: clamp(28px, 4vw, 38px); letter-spacing: -.045em; margin-bottom: 9px; color: #f8fafc; } h2 { font-size: 18px; color: #f8fafc; margin-bottom: 9px; }.subtitle, .panel p { color: #94a3b8; line-height: 1.55; }.eyebrow { color: #60a5fa !important; font-size: 11px; letter-spacing: .13em; font-weight: 750; margin-bottom: 8px; }.import-button, .modal button[type="submit"] { background: #2563eb; color: #fff; padding: 11px 16px; border-radius: 9px; font-weight: 650; cursor: pointer; border: 0; white-space: nowrap; }.import-button:hover, .modal button[type="submit"]:hover { background: #3b82f6; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 17px; }.metrics article, .panel { border: 1px solid #1e293b; border-radius: 16px; background: linear-gradient(145deg, #111c32, #0f172a); }.metrics article { padding: 20px; }.metrics span { display: block; font-size: 13px; color: #94a3b8; margin-bottom: 12px; }.metrics strong { font-size: 25px; color: #f8fafc; letter-spacing: -.04em; }.content-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 17px; margin-bottom: 17px; }.panel { padding: 24px; }.upload-panel { display: flex; justify-content: space-between; align-items: center; gap: 28px; }.dropzone { border: 1px dashed #3b82f6; color: #bfdbfe; padding: 24px; min-width: 220px; border-radius: 12px; text-align: center; cursor: pointer; transition: .15s; }.dropzone:hover, .dropzone.is-dragging { background: #172554; border-color: #93c5fd; }.table-panel { padding: 0; overflow: hidden; }.section-heading { display: flex; justify-content: space-between; padding: 24px 24px 9px; color: #94a3b8; font-size: 13px; }.section-heading h2 { margin-bottom: 0; }.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 680px; } th { color: #64748b; font-size: 11px; letter-spacing: .08em; text-align: left; text-transform: uppercase; } td, th { padding: 14px 24px; border-bottom: 1px solid #1e293b; font-size: 13px; } td { color: #cbd5e1; } tr:last-child td { border-bottom: 0; }.amount { text-align: right; font-variant-numeric: tabular-nums; color: #f8fafc; }.badge { border: 1px solid color-mix(in srgb, var(--badge-color), transparent 50%); color: var(--badge-color); background: color-mix(in srgb, var(--badge-color), transparent 88%); padding: 4px 8px; border-radius: 999px; font-size: 12px; }.pending { color: #fbbf24; }.empty { text-align: center; padding: 42px; color: #64748b; }.toast { position: fixed; bottom: 24px; right: 24px; transform: translateY(20px); opacity: 0; background: #1e293b; color: #f8fafc; padding: 13px 16px; border-radius: 10px; border: 1px solid #334155; transition: .2s; max-width: 360px; }.toast.visible { transform: translateY(0); opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; background: rgb(2 6 23 / .72); padding: 18px; z-index: 10; }.modal { width: min(100%, 440px); padding: 28px; border: 1px solid #334155; border-radius: 17px; background: #0f172a; box-shadow: 0 20px 70px rgb(0 0 0 / .5); }.modal > p:not(.eyebrow) { color: #94a3b8; font-size: 14px; }.modal label:not(.check) { display: grid; gap: 7px; color: #cbd5e1; font-size: 13px; margin-top: 17px; }.modal select, .modal input[type="text"], .modal input[type="number"], .modal input[type="date"], .modal input[type="month"] { color: #e5e7eb; background: #111c32; border: 1px solid #334155; border-radius: 8px; padding: 10px; }.check { display: block; margin: 20px 0; color: #cbd5e1; font-size: 13px; }.modal-actions { display: flex; justify-content: end; gap: 10px; }.modal button { padding: 10px 15px; border-radius: 8px; cursor: pointer; }.modal .secondary { background: transparent; color: #cbd5e1; border: 1px solid #334155; }
.modal--list { width: min(100%, 800px); max-height: calc(100vh - 36px); display: flex; flex-direction: column; }.classification-list { display: grid; gap: 10px; overflow-y: auto; padding: 4px 2px 4px 0; margin: 12px 0 20px; }.classification-item { min-width: 0; border: 1px solid #26354c; border-radius: 10px; padding: 14px; }.classification-summary { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }.classification-summary h3 { font-size: 14px; margin: 0 0 4px; color: #e2e8f0; }.classification-summary p { margin: 0; color: #94a3b8; font-size: 12px; }.classification-summary > span { color: #93c5fd; font-size: 11px; white-space: nowrap; }.classification-fields { display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: end; gap: 12px; }.classification-fields .check { margin: 0 0 10px; white-space: nowrap; }.classification-fields label:not(.check) { margin-top: 14px; }
.text-button, .secondary-filter { border: 0; background: transparent; color: #93c5fd; cursor: pointer; font-size: 13px; }.filters { display: flex; align-items: end; gap: 14px; margin-bottom: 17px; }.filters label { display: grid; gap: 7px; color: #94a3b8; font-size: 12px; }.filters input, .filters select { min-height: 38px; padding: 8px 10px; border: 1px solid #334155; border-radius: 8px; color: #e5e7eb; background: #111c32; }.secondary-filter { border: 1px solid #334155; padding: 10px 13px; border-radius: 8px; color: #cbd5e1; }.table-wrap small { display: block; color: #64748b; margin-top: 3px; font-size: 11px; }.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.category-card { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid #1e293b; border-radius: 14px; background: #111c32; }.category-card h2 { margin: 0 0 4px; font-size: 15px; }.category-card p { margin: 0; color: #94a3b8; font-size: 12px; }.category-card strong { font-size: 14px; white-space: nowrap; margin-left: auto; }.category-actions { display: flex; gap: 2px; align-items: center; }.category-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: var(--category-color); }
.selection-cell { width: 34px; padding-right: 0; }.selection-cell input { accent-color: #2563eb; cursor: pointer; }.danger-button { border: 1px solid #7f1d1d; background: #450a0a; color: #fecaca; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }.danger-button:hover { background: #7f1d1d; }.danger-button:disabled { opacity: .45; cursor: not-allowed; }.warning-button { border: 1px solid #78350f; background: #451a03; color: #fde68a; padding: 10px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }.warning-button:hover { background: #78350f; }.warning-button:disabled { opacity: .45; cursor: not-allowed; }.primary-button-sm { background: #2563eb; color: #fff; padding: 8px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; border: 0; font-size: 12px; }.primary-button-sm:hover { background: #3b82f6; }.action-cell { width: 60px; text-align: center; }.icon-button { border: 0; background: transparent; cursor: pointer; padding: 6px; border-radius: 6px; font-size: 14px; opacity: .75; transition: opacity .15s, background .15s; }.icon-button:hover { opacity: 1; background: #1e293b; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.settings-card { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.color-picker-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }.color-picker-row input[type="color"] { width: 38px; height: 38px; padding: 2px; border: 1px solid #334155; border-radius: 8px; background: #111c32; cursor: pointer; }.preset-colors { display: flex; flex-wrap: wrap; gap: 6px; }.color-chip { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; }.color-chip:hover { transform: scale(1.25); border-color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.secondary-button { background: #111c32; color: #cbd5e1; border: 1px solid #334155; padding: 8px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.secondary-button:hover:not(:disabled) { background: #172554; border-color: #3b82f6; color: #93c5fd; }
.secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.filter-menu-trigger { display: inline-flex; align-items: center; gap: 8px; background: #111c32; color: #cbd5e1; border: 1px solid #334155; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.filter-menu-trigger:hover, .filter-menu-trigger.is-open { background: #172554; border-color: #3b82f6; color: #93c5fd; }
.filter-menu-trigger.is-active { border-color: #3b82f6; color: #93c5fd; background: #172554; }
.filter-badge { background: #2563eb; color: #ffffff; font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.import-button-minimal { display: inline-flex; align-items: center; gap: 8px; background: #1e293b; color: #38bdf8; border: 1px solid #334155; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.import-button-minimal:hover { background: #172554; border-color: #3b82f6; color: #60a5fa; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.filter-menu-panel { margin-bottom: 24px; animation: slideDown 0.18s ease-out; padding: 20px 24px; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.filter-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; border-bottom: 1px solid #1e293b; padding-bottom: 12px; }
.filter-menu-header h3 { font-size: 14px; margin: 0; color: #f8fafc; font-weight: 650; }
.filter-menu-body { display: flex; flex-direction: column; gap: 16px; }
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-group-title { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.filter-group-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.filter-group-row label { display: grid; gap: 7px; color: #94a3b8; font-size: 12px; }
.filter-group-row input, .filter-group-row select { min-height: 38px; padding: 8px 12px; border: 1px solid #334155; border-radius: 8px; color: #e5e7eb; background: #111c32; }
.preset-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.preset-btn { background: #111c32; border: 1px solid #334155; color: #94a3b8; padding: 8px 12px; border-radius: 8px; font-size: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.preset-btn:hover { background: #172554; color: #dbeafe; border-color: #3b82f6; }
.preset-btn.active { background: #1e40af; color: #ffffff; border-color: #3b82f6; font-weight: 600; }
.metrics.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-card { padding: 20px; border: 1px solid #1e293b; border-radius: 16px; background: linear-gradient(145deg, #111c32, #0f172a); display: flex; flex-direction: column; justify-content: space-between; gap: 8px; transition: transform .15s, border-color .15s; }
.kpi-card:hover { border-color: #334155; transform: translateY(-2px); }
.kpi-card.kpi-warning { border-color: rgba(245, 158, 11, 0.4); background: linear-gradient(145deg, #1e1b13, #0f172a); }
.kpi-header { display: flex; justify-content: space-between; align-items: center; }
.kpi-header span { font-size: 13px; color: #94a3b8; margin-bottom: 0; font-weight: 500; }
.kpi-icon { font-size: 16px; opacity: 0.9; }
.kpi-card strong { font-size: 24px; color: #f8fafc; letter-spacing: -.04em; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: #64748b; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-top-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1200px) { .metrics.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sidebar-backdrop.open { display: block; opacity: 1; } .metrics { grid-template-columns: repeat(2, 1fr); }.metrics.kpi-grid { grid-template-columns: repeat(2, 1fr); }.content-grid { grid-template-columns: 1fr; }.settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .main { padding: 72px 20px 28px; } header, .upload-panel { flex-direction: column; }.import-button, .dropzone { width: 100%; }.metrics { grid-template-columns: 1fr 1fr; }.metrics.kpi-grid { grid-template-columns: 1fr; }.preset-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); }.metrics article { padding: 16px; }.metrics strong { font-size: 21px; } }
@media (max-width: 560px) { .classification-fields { grid-template-columns: 1fr; gap: 0; }.classification-fields .check { margin: 8px 0 0; }.modal { padding: 20px; } }
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.filters { flex-wrap: wrap; } }
@media (max-width: 560px) { .category-grid { grid-template-columns: 1fr; }.filters { display: grid; }.filters label, .secondary-filter { width: 100%; } }

/* ── Login Screen ── */
.login-backdrop { position: fixed; inset: 0; display: grid; place-items: center; background: #0b1120; z-index: 200; padding: 20px; }
.login-card { width: min(100%, 400px); padding: 40px 32px; border: 1px solid #1e293b; border-radius: 20px; background: linear-gradient(145deg, #111c32, #0f172a); box-shadow: 0 24px 80px rgb(0 0 0 / .6); text-align: center; }
.login-brand { margin-bottom: 32px; }
.login-icon { font-size: 48px; display: block; margin-bottom: 8px; color: #60a5fa; }
.login-brand h1 { font-size: 28px; font-weight: 750; color: #f8fafc; margin: 0; }
.login-brand p { color: #64748b; font-size: 14px; margin: 6px 0 0; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { text-align: left; }
.login-field label { display: block; font-size: 13px; color: #94a3b8; margin-bottom: 6px; font-weight: 600; }
.login-field input { width: 100%; padding: 12px 14px; background: #111c32; border: 1px solid #334155; border-radius: 10px; color: #e5e7eb; font-size: 15px; transition: border-color 0.2s; box-sizing: border-box; }
.login-field input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.login-button { width: 100%; padding: 13px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 650; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; }
.login-button:hover { background: #3b82f6; }
.login-button:disabled { opacity: .6; cursor: not-allowed; }
.login-spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
.login-spinner.hidden { display: none; }
.login-error { color: #fca5a5; font-size: 13px; margin: 0; padding: 8px 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.2); }
.login-footer { color: #475569; font-size: 12px; margin: 20px 0 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
.shake { animation: shake 0.5s ease-in-out; }

/* ── Sync Badge (Sidebar) ── */
.sync-badge { padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; text-align: center; margin-top: auto; transition: all 0.3s ease; }
.sync-saved { background: rgba(34, 197, 94, 0.1); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.2); }
.sync-pending { background: rgba(250, 204, 21, 0.1); color: #fbbf24; border: 1px solid rgba(250, 204, 21, 0.2); }
.sync-error { background: rgba(239, 68, 68, 0.1); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.2); }
.sync-saving { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.2); animation: pulse-sync 1.5s ease-in-out infinite; }
@keyframes pulse-sync { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }

/* ── Sync Controls (Settings) ── */
.sync-controls { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; }
.sync-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #e5e7eb; }
.sync-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2563eb; cursor: pointer; }
.sync-interval { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #cbd5e1; }
.sync-interval select { padding: 6px 10px; background: #111c32; border: 1px solid #334155; border-radius: 8px; color: #e5e7eb; font-size: 13px; cursor: pointer; }
.sync-last-saved { font-size: 13px; color: #64748b; }

/* ── Sync History ── */
.sync-history { margin-top: 16px; padding-top: 16px; border-top: 1px solid #1e293b; }
.sync-history-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; color: #cbd5e1; border-bottom: 1px solid rgba(30, 41, 59, 0.5); }
.sync-history-item:last-child { border-bottom: none; }
.sync-history-item button { font-size: 12px; }

/* ── Farol Module (KPI Style) ── */
.farol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 20px; }
.farol-kpi-card { padding: 18px 20px; border: 1px solid #1e293b; border-radius: 16px; background: linear-gradient(145deg, #111c32, #0f172a); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; transition: transform .15s, border-color .15s; position: relative; }
.farol-kpi-card:hover { border-color: #334155; transform: translateY(-2px); }
.farol-kpi-card.farol-status-green { border-left: 4px solid #22c55e; }
.farol-kpi-card.farol-status-yellow { border-left: 4px solid #eab308; background: linear-gradient(145deg, #1e1b13, #0f172a); }
.farol-kpi-card.farol-status-red { border-left: 4px solid #ef4444; background: linear-gradient(145deg, #2a1215, #0f172a); animation: farolPulseRed 3s infinite; }
@keyframes farolPulseRed { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); } 50% { box-shadow: 0 0 16px 0 rgba(239, 68, 68, 0.2); } }
.farol-cat-title-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.farol-actions-top { display: flex; align-items: center; gap: 4px; }
.farol-actions-top button { background: transparent; border: none; cursor: pointer; padding: 4px 6px; font-size: 14px; border-radius: 6px; transition: background 0.15s, opacity 0.15s; opacity: 0.8; }
.farol-actions-top button:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.farol-actions-top button.danger:hover { background: rgba(239, 68, 68, 0.2); }
.farol-kpi-main { display: flex; flex-direction: column; gap: 8px; }
.farol-kpi-main strong { font-size: 24px; color: #f8fafc; letter-spacing: -.04em; margin-top: 2px; }
.farol-progress-track { height: 6px; background: #1e293b; border-radius: 999px; overflow: hidden; position: relative; }
.farol-progress-bar { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.farol-progress-bar.green { background: #22c55e; }
.farol-progress-bar.yellow { background: #eab308; }
.farol-progress-bar.red { background: #ef4444; }
.farol-kpi-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #64748b; margin-top: 4px; }
.farol-trigger-pct { font-weight: 500; display: flex; align-items: center; gap: 4px; }
.farol-trigger-pct.green { color: #4ade80; }
.farol-trigger-pct.yellow { color: #facc15; }
.farol-trigger-pct.red { color: #fca5a5; }
.farol-spent-info { color: #94a3b8; font-weight: 500; }
.farol-period-badge { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #1e293b; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.farol-dashboard-toggle { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #1e293b; border-radius: 8px; background: #0f172a; font-size: 13px; color: #cbd5e1; cursor: pointer; user-select: none; transition: border-color 0.15s, background 0.15s; }
.farol-dashboard-toggle:hover { border-color: #334155; background: #1e293b; }
.farol-dashboard-toggle input[type="checkbox"] { cursor: pointer; accent-color: #3b82f6; }
@media (max-width: 640px) { .farol-grid { grid-template-columns: 1fr; } }

/* ── Responsividade Mobile (Telas até 430px no Navegador) ── */
html, body {
  overflow-x: hidden;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 430px) {
  /* Prevenção de Auto-Zoom em iOS Safari/Chrome ao focar inputs */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="month"],
  input[type="password"],
  select {
    font-size: 16px !important;
  }

  /* Safe Area e Padding Principal */
  .main {
    padding: max(60px, calc(48px + env(safe-area-inset-top))) 12px max(24px, env(safe-area-inset-bottom)) 12px;
  }

  /* Botão Menu Hamburguer */
  .menu-toggle {
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    padding: 10px 14px;
    font-size: 20px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Menu Lateral (Sidebar) */
  .sidebar {
    width: min(280px, 85vw);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* Cabeçalhos e Títulos das Páginas */
  header, .dashboard-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 20px;
  }
  header h1, .dashboard-header h1 {
    font-size: clamp(22px, 6.5vw, 28px);
  }
  .subtitle {
    font-size: 13px;
  }
  .header-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .header-actions button,
  .header-actions label {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  /* Painel de Filtros e Presets no Dashboard */
  .filter-menu-panel {
    padding: 14px 12px;
  }
  .filter-group-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .filter-group-row label,
  .filter-group-row input,
  .filter-group-row select {
    width: 100%;
  }
  .preset-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
  }
  .preset-btn {
    text-align: center;
    padding: 10px 6px;
  }

  /* Cards de Métricas e KPIs */
  .metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .metrics.kpi-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .kpi-card, .metrics article {
    padding: 14px 16px;
  }
  .kpi-card strong, .metrics strong {
    font-size: 21px;
    word-break: break-word;
  }
  .kpi-top-cat {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Módulo Farol */
  .farol-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .farol-kpi-card {
    padding: 14px;
  }
  .farol-kpi-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Painel de Upload (Dropzone) */
  .upload-panel {
    flex-direction: column;
    padding: 16px;
  }
  .dropzone {
    width: 100%;
    min-width: 0;
    padding: 18px 12px;
  }

  /* Tabelas de Lançamentos e Regras */
  .table-panel .section-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 14px 10px;
  }
  .table-panel .section-heading > div:last-child {
    width: 100%;
    flex-direction: column;
  }
  .table-panel .section-heading button {
    width: 100%;
    justify-content: center;
  }
  .table-wrap {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 540px;
  }
  th, td {
    padding: 10px 8px;
    font-size: 12px;
  }
  .action-cell {
    width: 70px;
  }
  .icon-button {
    padding: 8px;
    font-size: 16px;
    min-width: 36px;
    min-height: 36px;
  }

  /* Modais (Popups e Listas) */
  .modal-backdrop {
    padding: 10px;
    align-items: flex-end;
  }
  .modal {
    width: 100%;
    padding: 18px 14px;
    border-radius: 16px 16px 16px 16px;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-bottom)));
    overflow-y: auto;
  }
  .modal-actions {
    flex-direction: column-reverse;
    width: 100%;
    gap: 8px;
  }
  .modal-actions button {
    width: 100%;
  }
  .modal label:not(.check) {
    margin-top: 12px;
  }

  /* Lista de Reclassificação / Regras em Modal */
  .modal--list {
    max-height: calc(100dvh - 20px);
  }
  .classification-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .classification-fields {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* Filtros em Transações */
  .filters {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .filters label, .secondary-filter {
    width: 100%;
  }

  /* Categorias e Configurações */
  .category-grid, .settings-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .category-card {
    padding: 14px;
  }
  .settings-card {
    padding: 16px 14px;
  }
  .sync-history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Tela de Login */
  .login-backdrop {
    padding: 12px;
  }
  .login-card {
    padding: 28px 18px;
    border-radius: 16px;
  }
}

/* ════════════════════════════════════════════════════
   GRÁFICO DE PROJEÇÃO DE GASTOS
   ════════════════════════════════════════════════════ */

/* Painel do gráfico */
.projection-panel { padding: 24px 24px 20px; }
.projection-panel.projection-empty { padding: 20px 24px; }

/* Toolbar e controles de data exclusivos da projeção */
.projection-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
.projection-dates-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #111c32;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 4px 8px;
}
.projection-dates-wrap input[type="date"] {
  background: transparent;
  border: 0;
  color: #e2e8f0;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.projection-dates-wrap .date-sep {
  font-size: 11px;
  color: #64748b;
}

/* Header do gráfico */
.projection-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.projection-ceiling-badge {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  background: rgba(124,58,237,.15); color: #a78bfa;
  border: 1px solid rgba(124,58,237,.3); border-radius: 6px;
  padding: 3px 10px;
}
.projection-status-text {
  font-size: 13px; color: #94a3b8;
}
.projection-status-text.exceeded { color: #f87171; font-weight: 600; }

/* Canvas */
.projection-chart-wrap { position: relative; width: 100%; margin: 4px 0 8px; }
.projection-canvas {
  display: block; width: 100%; height: 260px;
  border-radius: 10px;
  cursor: crosshair;
}

/* Legenda */
.projection-legend {
  display: flex; align-items: center; gap: 20px;
  font-size: 12px; color: #64748b; margin-top: 6px; flex-wrap: wrap;
}
.proj-legend-item { display: flex; align-items: center; gap: 6px; }
.proj-legend-line {
  display: inline-block; width: 24px; height: 3px; border-radius: 2px;
}
.proj-legend-proj {
  background: repeating-linear-gradient(
    90deg, #7c3aed 0px, #7c3aed 8px, transparent 8px, transparent 13px
  );
  opacity: .8;
}
.proj-legend-actual { background: #22c55e; }
.proj-legend-actual.exceeded { background: #ef4444; }
.proj-legend-period { margin-left: auto; font-size: 11px; opacity: .6; font-family: monospace; }

/* Tooltip */
.proj-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: #e2e8f0;
  pointer-events: none;
  z-index: 50;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  backdrop-filter: blur(6px);
}
.proj-tooltip-date { font-size: 11px; color: #64748b; margin-bottom: 6px; font-weight: 600; letter-spacing: .05em; }
.proj-tooltip-row { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
.proj-tooltip-row.exceeded b { color: #f87171; }
.proj-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.proj-dot-proj { background: #7c3aed; }
.proj-dot-actual { background: #22c55e; }
.proj-dot-actual.exceeded { background: #ef4444; }

/* Estado vazio (sem teto / sem filtro) */
.projection-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 24px 0 16px; color: #64748b; text-align: center;
}
.projection-prompt-icon { font-size: 32px; opacity: .7; }
.projection-prompt p { margin: 0; font-size: 14px; max-width: 420px; line-height: 1.6; }
.projection-prompt strong { color: #94a3b8; }

/* Card de teto de gastos (Configurações) */
.spending-ceiling-form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.spending-ceiling-input-wrap {
  display: flex; align-items: center;
  background: #111c32; border: 1px solid #1e293b; border-radius: 8px;
  padding: 0 12px; height: 38px;
  transition: border-color .15s;
}
.spending-ceiling-input-wrap:focus-within { border-color: #7c3aed; }
.spending-ceiling-prefix { color: #64748b; font-size: 14px; margin-right: 4px; }
.spending-ceiling-input {
  background: transparent; border: none; outline: none;
  color: #f8fafc; font-size: 15px; font-weight: 600;
  width: 140px;
  -moz-appearance: textfield;
}
.spending-ceiling-input::-webkit-outer-spin-button,
.spending-ceiling-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.spending-ceiling-current { font-size: 13px; color: #64748b; margin: 8px 0 0; }
.spending-ceiling-current.muted { color: #475569; }
.spending-ceiling-current strong { color: #a78bfa; }
.danger-text { color: #f87171 !important; border-color: rgba(239,68,68,.4) !important; }
.danger-text:hover { background: rgba(239,68,68,.1) !important; }

@media (max-width: 640px) {
  .projection-canvas { height: 200px; }
  .projection-header-right { align-items: flex-start; }
  .projection-legend { gap: 12px; }
  .proj-legend-period { margin-left: 0; }
  .spending-ceiling-form { flex-direction: column; align-items: flex-start; }
}

/* Menu Indicadores Extras */
.indicadores-menu-wrapper {
  position: relative;
  display: inline-block;
}
.indicadores-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 220px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.indicadores-menu-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 2px;
}
.indicador-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #e2e8f0;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.indicador-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
  cursor: pointer;
}
.indicador-option:hover {
  color: #fff;
}