/* ========================================================================== FinançasPro — Design System v2 Padrão: tema claro (extrato bancário). Dark mode é preferência do usuário, persistida via [data-theme="dark"] no . Ponto único de marca: --primary-color. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root{ /* ---- Superfícies — claro por padrão ---- */ --bg: #F3F4F7; --surface-0: #FFFFFF; /* topbar */ --surface-1: #FFFFFF; /* cards */ --surface-2: #EFF1F4; /* cabeçalho de tabela, hover, inputs */ --surface-3: #E4E7EC; /* estado ativo/pressionado */ --border: rgba(16,20,30,.09); --border-strong: rgba(16,20,30,.16); /* ---- Marca (único ponto de customização white-label) ---- */ --primary-color: #2F5BC4; --primary-color-hover:#254A9F; --primary-soft: rgba(47,91,196,.08); /* ---- Semântica de dados ---- */ --success: #16875A; --success-soft: rgba(22,135,90,.09); --danger: #C7293E; --danger-soft: rgba(199,41,62,.09); --warning: #B4740E; --warning-soft: rgba(180,116,14,.1); --info: #2F6FE0; --info-soft: rgba(47,111,224,.09); --neutral-accent: #6C6FB0; --neutral-accent-soft: rgba(108,111,176,.09); /* ---- Texto ---- */ --text-1: #10141C; --text-2: #5B6472; --text-3: #8A93A3; --font-ui: 'IBM Plex Sans', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius-sm: 4px; --radius-md: 6px; --topbar: 56px; --topbar2: 44px; } /* ---- Tema escuro (opcional, ativado via toggle) ---- */ [data-theme="dark"]{ --bg: #0A0D12; --surface-0: #0D1117; --surface-1: #12161D; --surface-2: #171C24; --surface-3: #1D232D; --border: rgba(255,255,255,.07); --border-strong: rgba(255,255,255,.14); --primary-color: #4C7EEF; --primary-color-hover:#5F8CF2; --primary-soft: rgba(76,126,239,.14); --success: #22B37E; --success-soft: rgba(34,179,126,.13); --danger: #E25569; --danger-soft: rgba(226,85,105,.13); --warning: #D6963C; --warning-soft: rgba(214,150,60,.13); --info: #5B96EE; --info-soft: rgba(91,150,238,.13); --neutral-accent: #9498D6; --neutral-accent-soft: rgba(148,152,214,.13); --text-1: #E7EAEF; --text-2: #98A2B3; --text-3: #5C6577; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font-ui);background:var(--bg);color:var(--text-1);display:flex;flex-direction:column;font-size:14px;-webkit-font-smoothing:antialiased;transition:background .15s,color .15s} /* ========================================================================== LAYOUT — TOPO ========================================================================== */ .app-wrap{min-height:100vh} .topbar{ position:fixed;top:0;left:0;right:0;height:var(--topbar); background:var(--surface-0);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; padding:0 20px;z-index:80;gap:16px; } .topbar-left{display:flex;align-items:center;gap:28px} .tb-brand{display:flex;align-items:center;gap:9px} .tb-brand .logo-mark{width:26px;height:26px} .tb-brand .logo-name{font-size:14.5px;font-weight:700;color:var(--text-1)} .topbar-title{font-size:14px;font-weight:600;color:var(--text-1)} .topbar-right{display:flex;align-items:center;gap:8px} .ham-btn{display:none;background:none;border:none;color:var(--text-1);font-size:18px;cursor:pointer;padding:4px} /* ---- Navegação agrupada (segunda linha) ---- */ .topnav{ position:fixed;top:var(--topbar);left:0;right:0;height:var(--topbar2); background:var(--surface-0);border-bottom:1px solid var(--border); display:flex;align-items:stretch;padding:0 14px;z-index:70;gap:2px; } .tn-group{position:relative} .tn-btn{ display:flex;align-items:center;gap:6px;height:100%;padding:0 12px; background:none;border:none;border-bottom:2px solid transparent; font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--text-2); cursor:pointer;transition:color .12s,border-color .12s; } .tn-btn:hover{color:var(--text-1)} .tn-btn svg.chev{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s} .tn-group.open .tn-btn{color:var(--primary-color);border-bottom-color:var(--primary-color)} .tn-group.open .tn-btn svg.chev{transform:rotate(180deg)} .tn-group.current .tn-btn{color:var(--text-1);font-weight:600} .tn-panel{ position:absolute;top:calc(var(--topbar2) + 1px);left:0;min-width:220px; background:var(--surface-1);border:1px solid var(--border-strong);border-radius:0 0 var(--radius-md) var(--radius-md); padding:6px;display:none;z-index:75; } .tn-group.open .tn-panel{display:block} .tn-link{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm); font-size:13px;color:var(--text-2);cursor:pointer;white-space:nowrap; } .tn-link:hover{background:var(--surface-2);color:var(--text-1)} .tn-link.active{background:var(--primary-soft);color:var(--primary-color);font-weight:600} .tn-link .nav-ico{width:15px;height:15px;color:inherit} .tn-link .nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:9px;font-weight:600;padding:1px 5px;border-radius:8px} .month-picker{display:flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 8px} .month-picker select{background:transparent;border:none;color:var(--text-1);font-family:var(--font-ui);font-size:12px;font-weight:500;outline:none;cursor:pointer} .month-picker select option{background:var(--surface-1)} .mp-arrow{background:none;border:none;color:var(--text-2);cursor:pointer;font-size:13px;padding:2px 4px} .mp-arrow:hover{color:var(--text-1)} .theme-toggle{background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);cursor:pointer;border-radius:var(--radius-sm);width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .theme-toggle:hover{color:var(--text-1)} .theme-toggle svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8} .user-menu{display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent} .user-menu:hover{background:var(--surface-2)} .user-avatar{width:26px;height:26px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0} .user-menu-name{font-size:12.5px;font-weight:600;color:var(--text-1)} .user-menu-role{font-size:10px;color:var(--text-2)} .main-content{margin-top:calc(var(--topbar) + var(--topbar2));padding:24px;padding-bottom:40px;max-width:1400px;margin-left:auto;margin-right:auto} .page{display:none}.page.active{display:block} .nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:69} .nav-overlay.open{display:block} /* ========================================================================== BOTÕES ========================================================================== */ .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);border:1px solid transparent;font-family:var(--font-ui);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s;text-decoration:none;white-space:nowrap} .btn-primary{background:var(--primary-color);color:#fff} .btn-primary:hover{background:var(--primary-color-hover)} .btn-outline{background:transparent;border-color:var(--border-strong);color:var(--text-1)} .btn-outline:hover{background:var(--surface-2)} .btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--text-1)} .btn-ghost:hover{background:var(--surface-3)} .btn-sm{padding:5px 10px;font-size:11.5px} .btn-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)} .btn-danger:hover{background:rgba(199,41,62,.16)} .btn-green{background:var(--success-soft);border-color:transparent;color:var(--success)} .btn-green:hover{background:rgba(22,135,90,.16)} .btn-purple{background:var(--neutral-accent-soft);border-color:transparent;color:var(--neutral-accent)} .btn-login{width:100%;padding:12px;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .12s} .btn-login:hover{background:var(--primary-color-hover)} .btn-login:disabled{opacity:.5;cursor:not-allowed} /* ========================================================================== CARDS / KPIs ========================================================================== */ .card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px} .card-sm{padding:14px} .card-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px} .card-title span{color:var(--text-1);font-size:14px;font-weight:600;letter-spacing:-.1px;text-transform:none} .kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px} .kpi{background:var(--surface-1);padding:14px 16px;border-top:2px solid transparent;position:relative} .kpi-lbl{font-size:10.5px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px} .kpi-val{font-family:var(--font-mono);font-size:19px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--text-1)} .kpi-sub{font-size:10.5px;color:var(--text-3);margin-top:5px} .kpi.green{border-top-color:var(--success)} .kpi.green .kpi-val{color:var(--success)} .kpi.red{border-top-color:var(--danger)} .kpi.red .kpi-val{color:var(--danger)} .kpi.yellow{border-top-color:var(--warning)} .kpi.yellow .kpi-val{color:var(--warning)} .kpi.accent{border-top-color:var(--primary-color)} .kpi.accent .kpi-val{color:var(--primary-color)} .kpi.purple{border-top-color:var(--neutral-accent)} .kpi.purple .kpi-val{color:var(--neutral-accent)} .chart-row{display:grid;grid-template-columns:1.6fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px} .chart-row .card{border:none;border-radius:0} .chart-wrap{position:relative;width:100%;min-height:200px} .chart-tabs{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--radius-sm);padding:2px;width:fit-content} .ct{padding:4px 10px;border-radius:3px;font-size:11px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--text-2);font-family:var(--font-ui);transition:background .12s,color .12s} .ct.active{background:var(--surface-1);color:var(--text-1)} .widgets-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:20px} .widgets-row .card{border:none;border-radius:0} /* ========================================================================== TABELAS ========================================================================== */ .tbl-wrap{overflow-x:auto;margin-top:8px} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:left;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-2)} td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-1)} tr:last-child td{border-bottom:none} tr:hover td{background:var(--surface-2)} .mono{font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums} .tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:3px;font-size:10.5px;font-weight:600} .tag-green{background:var(--success-soft);color:var(--success)} .tag-red{background:var(--danger-soft);color:var(--danger)} .tag-yellow{background:var(--warning-soft);color:var(--warning)} .tag-blue{background:var(--primary-soft);color:var(--primary-color)} .tag-purple{background:var(--neutral-accent-soft);color:var(--neutral-accent)} .tag-gray{background:var(--surface-2);color:var(--text-2)} /* ========================================================================== FORMULÁRIOS ========================================================================== */ .fg{margin-bottom:14px;position:relative} .fg label{display:block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin-bottom:5px} .fg input,.fg select,.fg textarea{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-1);font-family:var(--font-ui);font-size:13.5px;padding:9px 12px;border-radius:var(--radius-sm);outline:none;transition:border-color .12s} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--primary-color)} .fg select option{background:var(--surface-1)} .fg textarea{resize:vertical;min-height:70px} .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fg input.has-toggle{padding-right:42px} .pwd-toggle{position:absolute;right:10px;bottom:9px;background:none;border:none;color:var(--text-2);cursor:pointer;padding:4px;display:flex} .pwd-toggle:hover{color:var(--text-1)} .pwd-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6} .filter-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .filter-bar input,.filter-bar select{background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-1);font-family:var(--font-ui);font-size:12.5px;padding:7px 11px;border-radius:var(--radius-sm);outline:none;min-width:0} .filter-bar input:focus,.filter-bar select:focus{border-color:var(--primary-color)} .filter-bar input{flex:1;min-width:140px} .filter-bar select option{background:var(--surface-1)} /* ========================================================================== INDICADORES / PROGRESSO ========================================================================== */ .progress-bar-wrap{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:6px} .progress-bar{height:100%;border-radius:3px;transition:width .4s ease} .pb-green{background:var(--success)} .pb-yellow{background:var(--warning)} .pb-red{background:var(--danger)} .pb-accent{background:var(--primary-color)} .pb-purple{background:var(--neutral-accent)} /* ========================================================================== GRIDS DE CONTEÚDO ========================================================================== */ .debt-grid,.cards-grid,.subs-grid,.goals-grid{display:grid;gap:12px} .debt-grid,.cards-grid,.goals-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .subs-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .debt-card,.cc-card,.sub-card,.goal-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px} .debt-card.quitada{opacity:.5} .cc-card.estourado{border-color:var(--danger)} .dc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px} .dc-name{font-size:13.5px;font-weight:600} .dc-vals{display:flex;gap:16px;margin-bottom:10px} .dc-val-item{font-size:11px;color:var(--text-2)} .dc-val-item strong{display:block;font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text-1);font-variant-numeric:tabular-nums} .cc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .cc-icon{width:22px;height:22px;color:var(--text-2)} .cc-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5} .cc-name{font-size:13.5px;font-weight:600;margin-bottom:2px} .cc-bank{font-size:11px;color:var(--text-2)} .cc-util-nums{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11.5px;margin-bottom:4px;font-variant-numeric:tabular-nums} .cc-meta{display:flex;gap:14px;font-size:11px;color:var(--text-2);flex-wrap:wrap} .sub-ico{width:24px;height:24px;color:var(--text-2);margin-bottom:10px} .sub-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5} .sub-name{font-size:13.5px;font-weight:600;margin-bottom:2px} .sub-price{font-family:var(--font-mono);font-size:17px;color:var(--primary-color);margin-bottom:4px;font-variant-numeric:tabular-nums} .sub-cycle{font-size:11px;color:var(--text-2)} /* ========================================================================== FLUXOS / ANÉIS / ALERTAS ========================================================================== */ .purpose-flow{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px;margin-bottom:18px;flex-wrap:wrap} .pf-item{text-align:center;flex:1;min-width:110px} .pf-lbl{font-size:10.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .pf-val{font-family:var(--font-mono);font-size:20px;font-variant-numeric:tabular-nums} .pf-arrow{font-size:16px;color:var(--text-3);flex-shrink:0} .reserve-ring-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .ring-svg{width:110px;height:110px;flex-shrink:0} .ring-track{fill:none;stroke:var(--surface-3);stroke-width:6} .ring-fill{fill:none;stroke-width:6;stroke-linecap:butt;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .6s ease} .ring-text{font-family:var(--font-mono);font-size:14px;font-weight:500;fill:var(--text-1)} .ring-sub{font-size:9px;fill:var(--text-2)} .alert-list{display:flex;flex-direction:column;gap:8px} .alert-item{display:flex;align-items:flex-start;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px} .alert-item.unread{border-left:2px solid var(--warning)} .alert-item.alert-danger{border-left:2px solid var(--danger)} .alert-ico{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:var(--text-2)} .alert-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6} .alert-content{flex:1} .alert-title{font-size:13px;font-weight:600} .alert-time{font-size:11px;color:var(--text-2)} .import-zone{border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:36px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s} .import-zone:hover,.import-zone.dragover{border-color:var(--primary-color);background:var(--primary-soft)} .bill-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;flex-wrap:wrap} .bill-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0} .bill-info{flex:1;min-width:120px} .bill-desc{font-size:13px;font-weight:600} .bill-meta{font-size:11px;color:var(--text-2);margin-top:1px} .bill-amt{font-family:var(--font-mono);font-size:13.5px;margin-right:6px;font-variant-numeric:tabular-nums} .cascade-map{display:flex;flex-direction:column;gap:6px} .cascade-card{display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);flex:1} .cascade-arrow{font-size:12px;color:var(--text-3);text-align:center;padding:2px 8px} .member-list{display:flex;flex-direction:column;gap:10px} .member-item{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;flex-wrap:wrap} .member-avatar{width:36px;height:36px;border-radius:50%;background:var(--primary-color);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;flex-shrink:0} .member-info{flex:1;min-width:120px} .member-name{font-size:13.5px;font-weight:600} .member-email{font-size:11.5px;color:var(--text-2)} .member-actions{display:flex;gap:6px;flex-wrap:wrap} /* ========================================================================== MODAIS / TOASTS / ESTADOS ========================================================================== */ .modal-ov{position:fixed;inset:0;z-index:200;background:rgba(10,13,18,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s} .modal-ov.open{opacity:1;pointer-events:all} .modal{background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:24px;width:500px;max-width:calc(100vw - 24px);max-height:calc(100vh - 40px);overflow-y:auto} .modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .modal-ttl{font-size:16px;font-weight:600;letter-spacing:-.1px} .modal-close{background:none;border:none;color:var(--text-2);font-size:18px;cursor:pointer;line-height:1} .modal-close:hover{color:var(--text-1)} .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .page-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap} .page-ttl{font-size:19px;font-weight:700;letter-spacing:-.3px} .page-sub{font-size:13px;color:var(--text-2);margin-top:2px} .page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .toast{position:fixed;bottom:20px;right:20px;padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;z-index:9999;display:flex;align-items:center;gap:7px;border:1px solid var(--border-strong)} .t-ok{background:var(--surface-1);color:var(--success);border-color:var(--success)} .t-err{background:var(--surface-1);color:var(--danger);border-color:var(--danger)} .t-info{background:var(--surface-1);color:var(--primary-color);border-color:var(--primary-color)} .spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite} .empty-state{text-align:center;padding:48px 20px;color:var(--text-2)} .empty-state .empty-ico{width:36px;height:36px;margin:0 auto 12px;color:var(--text-3)} .empty-state .empty-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4} .empty-state p{font-size:13.5px} .divider{height:1px;background:var(--border);margin:16px 0} .err-box{background:var(--danger-soft);border:1px solid rgba(199,41,62,.28);color:var(--danger);border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;margin-bottom:10px;display:none} .err-box.show{display:block} .ok-box{background:var(--success-soft);border:1px solid rgba(22,135,90,.28);color:var(--success);border-radius:var(--radius-sm);padding:9px 12px;font-size:12.5px;margin-bottom:10px;display:none} .ok-box.show{display:block} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:var(--text-3)} *:focus-visible{outline:2px solid var(--primary-color);outline-offset:1px} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ========================================================================== RESPONSIVO ========================================================================== */ @media(max-width:900px){ .topnav{display:none} .ham-btn{display:block} .main-content{margin-top:var(--topbar)} .kpi-grid{grid-template-columns:repeat(2,1fr)} .chart-row,.widgets-row{grid-template-columns:1fr} .cards-grid,.debt-grid,.goals-grid{grid-template-columns:1fr} } @media(max-width:600px){ .main-content{padding:12px 10px 60px} .kpi-grid{grid-template-columns:repeat(2,1fr)} .fg-row{grid-template-columns:1fr} table{min-width:440px} .kpi-val{font-size:16px} .kpi-lbl{font-size:9.5px} .chart-wrap{height:180px!important;overflow:hidden} } @media(max-width:400px){ .kpi-grid{grid-template-columns:1fr 1fr} }