/* ═══════════════════════════════════════════ TOKENS — LIGHT MODE (default) ═══════════════════════════════════════════ */ :root{ /* Surfaces */ --bg-page:#f3f5ff; --surface-card:#fafbff; --surface-secondary:#f2f8fd; --surface-sidebar:#fafbff; /* Borders */ --border-subtle:#e3edf7; --border-strong:#c5d3e0; /* Text */ --text-primary:#111e2e; --text-secondary:#5b6b80; --text-tertiary:#8b97ab; --text-on-accent:#ffffff; /* Accent — primary (indigo) */ --accent-primary:#6378d9; --accent-primary-hover:#4a63d3; --accent-primary-light:#6379d920; /* Accent — success (green) */ --accent-success:#1ab374; --accent-success-light:#1ab37320; /* Accent — warning (yellow, decoration/icons only) */ --accent-warning:#fed867; --accent-warning-light:#fff8dc; /* Accent — caution (dark amber, safe for text on light bg) */ --accent-caution:#d97706; --accent-caution-light:#fef3c7; /* Accent — error */ --accent-error:#f25757; --accent-error-light:rgba(242, 87, 87, 0.20); /* Accent — purple (Segurança Social) */ --accent-purple:#8d6a9f; --accent-purple-light:rgba(141,106,159,.12); /* Progress track */ --track-bg:#d3dbff; /* Layout */ --sw:230px;--hh:62px; /* Radius */ --radius-sm:8px; --radius-md:10px; --radius-lg:16px; --radius-xl:18px; /* Shadows — modals and overlays only, not cards */ --shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); --shadow-md:0 4px 14px rgba(0,0,0,.09); --shadow-lg:0 8px 32px rgba(0,0,0,.13); /* Typography */ --font-body:'Merriweather Sans',sans-serif; --font-ui:'Space Grotesk',sans-serif; --font-data:'JetBrains Mono',monospace; /* TYPE SCALE (base 16px) */ --text-2xs:.65rem; /* ~9.75px — micro labels */ --text-xs:.72rem; /* ~10.8px — timestamps, metadata */ --text-sm:.8rem; /* ~12px — secondary text */ --text-base:.88rem; /* ~13.2px — body / default */ --text-md:1rem; /* ~16px — medium */ --text-lg:1.1rem; /* ~17.6px — card headings */ --text-xl:1.35rem; /* ~21.6px — page sub-headings */ --text-2xl:1.55rem; /* ~24.8px — KPI values */ --text-3xl:1.9rem; /* ~30.4px — hero values */ --text-hero:2rem; /* ~32px — page hero */ /* FONT WEIGHTS */ --fw-light:300; --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; /* LINE HEIGHTS */ --lh-tight:1.2; --lh-snug:1.4; --lh-base:1.6; --lh-relaxed:1.7; /* LETTER SPACINGS */ --ls-tight:-.5px; --ls-normal:0; --ls-wide:.08em; --ls-wider:.1em; } /* ═══════════════════════════════════════════ TOKENS — DARK MODE Applied via .dark class on ═══════════════════════════════════════════ */ html.dark{ --bg-page:#0c1622; --surface-card:#142539; --surface-secondary:#1a2e42; --surface-sidebar:#111e2e; --border-subtle:#263344; --border-strong:#2e4157; --text-primary:#d5e5f4; --text-secondary:#8b97ab; --text-tertiary:#6b7a8d; --text-on-accent:#0c1622; --accent-primary:#28a8f1; --accent-primary-hover:#4fb9f5; --accent-primary-light:rgba(40,168,241,.12); --accent-success:#22b67e; --accent-success-light:rgba(34,182,126,.12); --accent-warning:#ffd45c; --accent-warning-light:rgba(255,212,92,.12); --accent-caution:#f0b429; --accent-caution-light:rgba(240,180,41,.12); --accent-error:#e05252; --accent-error-light:rgba(220,82,82,.12); --accent-purple:#a78bfa; --accent-purple-light:rgba(167,139,250,.12); --track-bg:#1c2b40; --shadow-sm:0 1px 4px rgba(0,0,0,.3); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 8px 32px rgba(0,0,0,.5); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px} body{font-family:var(--font-body);background:var(--bg-page);color:var(--text-primary);line-height:1.6;min-height:100vh} a{color:inherit;text-decoration:none}ul{list-style:none} button{cursor:pointer;font-family:inherit;border:none;background:none} input,select,textarea{font-family:inherit} :focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px} ::-webkit-scrollbar{width:4px;height:4px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px} /* HEADING FONT — applied to all heading and subheading elements */ .tb-title,.tb-sub, .cal-title,.act-title, .cd-name,.up-title, .sug-title,.kpi-s-title, .modal-title,.rec-title, .muz-title,.lim-lbl, .logo-name{font-family:var(--font-ui)} /* ═══════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════ */ .shell{display:flex;min-height:100vh} /* SIDEBAR */ .sidebar{width:var(--sw);flex-shrink:0;background:var(--surface-sidebar);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;overflow-y:auto} .sb-logo{display:flex;align-items:center;gap:9px;padding:18px 20px 16px;border-bottom:1px solid var(--border-subtle)} .logo-mark{width:30px;height:30px;background:var(--accent-primary);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:800;flex-shrink:0} .logo-name{font-size:.95rem;font-weight:700;color:var(--accent-primary);letter-spacing:-.3px} .nav-sec{padding:14px 12px 6px} .nav-lbl{font-size:.62rem;font-weight:700;color:var(--text-tertiary);padding:0 8px;margin-bottom:4px} .nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);font-size:.86rem;font-weight:500;color:var(--text-secondary);width:100%;text-align:left;transition:background .12s,color .12s} .nav-item:hover{background:var(--bg-page);color:var(--text-primary)} .nav-item.active{background:var(--accent-primary-light);color:var(--accent-primary);font-weight:600} .ni{width:16px;height:16px;flex-shrink:0;opacity:.6;font-size:14px;text-align:center} .nav-item.active .ni{opacity:1} .sb-upgrade{margin:0 12px 16px;background:#ffffff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px} .up-title{font-size:.8rem;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:6px} .up-desc{font-size:.72rem;color:var(--text-secondary);margin-bottom:9px;line-height:1.5} .up-btn{display:block;width:100%;background:var(--accent-primary);color:#fff;border-radius:var(--radius-sm);padding:7px;font-size:.78rem;font-weight:600;text-align:center;transition:background .12s} .up-btn:hover{background:var(--accent-primary-hover)} .sb-user{margin-top:auto;padding:13px 16px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px} .u-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700;flex-shrink:0} .u-name{font-size:.82rem;font-weight:600} .u-role{font-size:.7rem;color:var(--text-tertiary)} /* MAIN */ .main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-height:100vh} .topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface-card) 95%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle);height:var(--hh);display:flex;align-items:center;padding:0 26px;gap:12px} .tb-title{font-size:1.35rem;font-weight:700;letter-spacing:-.5px;color:var(--text-primary)} .tb-sub{font-size:.85rem;color:var(--text-secondary);margin-top:1px} .tb-right{display:flex;align-items:center;gap:7px;margin-left:auto} .page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 0px 16px;} .page-actions{display:flex;align-items:center;gap:8px;flex-shrink:0} .ico-btn{width:32px;height:32px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);position:relative;transition:background .12s} .ico-btn:hover{background:var(--bg-page)} .notif-n{position:absolute;top:3px;right:3px;background:var(--accent-primary);color:#fff;font-size:.58rem;font-weight:700;border-radius:99px;padding:1px 4px;border:1.5px solid #fff} .user-menu{position:relative} .user-menu-trigger{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:5px 8px;border-radius:var(--radius-sm);transition:background .12s} .user-menu-trigger:hover{background:var(--bg-page)} .user-av-sm{width:30px;height:30px;border-radius:50%;background:var(--accent-primary);color:#fff;font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:var(--text-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0} .user-av-lg{width:56px;height:56px;border-radius:50%;background:var(--accent-primary);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:1.4rem;display:flex;align-items:center;justify-content:center;flex-shrink:0} .user-menu-info{display:flex;flex-direction:column;align-items:flex-start} .user-menu-name{font-size:var(--text-sm);font-weight:var(--fw-semibold);color:var(--text-primary);font-family:var(--font-ui);line-height:1.2} .user-menu-role{font-size:var(--text-xs);color:var(--text-tertiary);line-height:1.2} .user-menu-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-md);min-width:200px;padding:6px;z-index:200;display:none} .user-menu-dropdown.open{display:block} .umd-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary);text-decoration:none;width:100%;background:none;border:none;cursor:pointer;font-family:var(--font-body);text-align:left;transition:background .12s} .umd-item:hover{background:var(--bg-page);color:var(--text-primary)} .umd-sep{height:1px;background:var(--border-subtle);margin:4px 0} .umd-signout{color:var(--accent-error)} .umd-signout:hover{background:var(--accent-error-light)!important;color:var(--accent-error)} .page-content{padding:24px 26px 48px;flex:1} .page{display:none} .page.active{display:block;animation:fu .2s ease} @keyframes fu{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ═══════════════════════════════════════════ SHARED COMPONENTS ═══════════════════════════════════════════ */ .card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)} .sec-lbl{font-size:.95rem;font-weight:700;color:var(--text-secondary);margin-top:2rem;margin-bottom:12px} .btn{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-sm);padding:7px 14px;font-size:.82rem;font-weight:600;transition:all .12s;border:1px solid transparent;white-space:nowrap} .btn-p{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)}.btn-p:hover{background:var(--accent-primary-hover)} .btn-s{background:var(--surface-card);color:var(--text-primary);border-color:var(--border-subtle)}.btn-s:hover{background:var(--bg-page)} .btn-g{color:var(--text-secondary);padding:5px 9px;border-radius:var(--radius-sm)}.btn-g:hover{background:var(--bg-page)} .btn-sm{padding:5px 11px;font-size:.77rem} .btn-xs{padding:3px 8px;font-size:.7rem} .btn-danger{background:var(--accent-error);color:#fff;border-color:var(--accent-error)}.btn-danger:hover:not(:disabled){background:#991b1b;border-color:#991b1b} .btn-danger:disabled{opacity:.4;cursor:not-allowed} .pg-wrap{height:7px;background:var(--border-subtle);border-radius:99px;overflow:hidden;margin:6px 0} .pg-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)} .pg-fill.g{background:var(--accent-success)}.pg-fill.a{background:var(--accent-caution)}.pg-fill.r{background:var(--accent-error)}.pg-fill.b{background:var(--accent-primary)} .badge{display:inline-block;font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:99px} .bg-g{background:var(--accent-success-light);color:var(--accent-success)}.bg-a{background:var(--accent-caution-light);color:var(--accent-caution)}.bg-r{background:var(--accent-error-light);color:var(--accent-error)}.bg-b{background:var(--accent-primary-light);color:var(--accent-primary)}.bg-n{background:var(--bg-page);color:var(--text-tertiary)}.bg-p{background:var(--accent-purple-light);color:var(--accent-purple)} .mono{font-family:var(--font-data);letter-spacing:-.3px} .link{color:var(--accent-primary);font-size:.77rem;font-weight:600;display:inline-flex;align-items:center;gap:3px} .link:hover{text-decoration:underline} .tabs{display:flex;border-bottom:1px solid var(--border-subtle);margin-bottom:18px} .tab-btn{padding:9px 14px;font-size:.82rem;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .12s,border-color .12s;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none} .tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary);font-weight:600} .tab-pane{display:none}.tab-pane.active{display:block;animation:fu .18s ease} .fc{display:flex;flex-direction:column;gap:5px} .fc label{font-size:.83rem;font-weight:600;color:var(--text-primary)} .fc input,.fc select,.fc textarea{border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 11px;font-size:.9rem;background:var(--surface-card);color:var(--text-primary);outline:none;transition:border-color .12s,box-shadow .12s;width:100%} .fc input:focus,.fc select:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(29,108,240,.12)} .fc input[readonly]{background:var(--bg-page);color:var(--text-secondary);cursor:not-allowed} .fc input.invalid,.fc select.invalid,.fc textarea.invalid{border-color:var(--accent-error)!important;box-shadow:0 0 0 3px rgba(185,28,28,.1)!important} .field-hint{font-size:.73rem;color:var(--text-tertiary);margin-top:3px} .field-err{font-size:.73rem;color:var(--accent-error);margin-top:3px;display:none} .modal-geral-err{background:var(--accent-error-light);color:var(--accent-error);border-radius:var(--radius-sm);padding:9px 12px;font-size:.8rem;margin-bottom:12px;display:none} select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px} .fg4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:13px} .ck-row{display:flex;align-items:center;gap:8px;padding:7px 0} .ck-row input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent-primary)} .ck-row label{font-size:.86rem;cursor:pointer} hr.dv{border:none;border-top:1px solid var(--border-subtle);margin:16px 0} /* SVG ICON HELPER */ .ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} /* ═══════════════════════════════════════════ TOOLTIP ═══════════════════════════════════════════ */ .tt{position:relative;display:inline-flex;align-items:center;cursor:help;border-radius:3px} .tt:focus{outline:2px solid var(--accent-primary);outline-offset:2px} .tt:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px} .tt-body{ position:absolute;bottom:calc(100% + 9px);left:50%; transform:translateX(-50%) translateY(4px); background:var(--text-primary);color:#fff; font-size:.76rem;font-weight:400;line-height:1.55;font-family:var(--font-body); text-transform:none;letter-spacing:normal; padding:8px 11px;border-radius:var(--radius-sm); max-width:240px;width:max-content;white-space:normal;text-align:left; pointer-events:none;opacity:0; transition:opacity .14s ease,transform .14s ease; z-index:400;box-shadow:var(--shadow-md); } .tt-body::after{ content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:var(--text-primary); } .tt:hover .tt-body,.tt:focus .tt-body,.tt:focus-visible .tt-body{ opacity:1;transform:translateX(-50%) translateY(0); } /* placement variants */ .tt.tt-right .tt-body{left:calc(100% + 9px);bottom:auto;top:50%;transform:translateY(-50%) translateX(4px)} .tt.tt-right .tt-body::after{top:50%;left:auto;right:100%;transform:translateY(-50%);border-top-color:transparent;border-right-color:var(--text-primary)} .tt.tt-right:hover .tt-body,.tt.tt-right:focus .tt-body{transform:translateY(-50%) translateX(0)} /* ═══════════════════════════════════════════ DASHBOARD ═══════════════════════════════════════════ */ .kpi-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:20px;align-items:stretch} .kpi-card{padding:18px 20px} .kpi-lbl{font-size:.76rem;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:5px;margin-bottom:7px} .kpi-v{font-size:1.55rem;font-weight:700;letter-spacing:-.5px;margin-bottom:3px} .kpi-sub{font-size:.73rem;color:var(--text-tertiary);margin-bottom:9px} .kpi-status{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:18px 24px;text-align:center} .kpi-s-title{font-size:.88rem;font-weight:700;color:var(--accent-success);margin-top:4px} .kpi-s-sub{font-size:.73rem;color:var(--text-tertiary)} /* Compact calendar card */ .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px} .cal-card{padding:16px 18px} .cal-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .cal-title{font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:7px} .cal-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-subtle)} .cal-item:last-child{border-bottom:none} .cal-dt{width:36px;flex-shrink:0;text-align:center} .cal-mo{font-size:.6rem;font-weight:700;color:var(--text-tertiary)} .cal-d{font-size:1rem;font-weight:700;line-height:1.2} .cal-info{flex:1;min-width:0} .cal-ev{font-size:.81rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal-dc{font-size:.71rem;color:var(--text-tertiary);margin-top:1px} .cal-tag{display:inline-flex;align-items:center;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;margin-left:auto;flex-shrink:0} .ct-u{background:#fef3c7;color:#b45309}.ct-s{background:#dbeafe;color:var(--accent-primary)}.ct-f{background:var(--bg-page);color:var(--text-tertiary)} /* Faturas pendentes — destaque vermelho */ .ct-pend{background:var(--accent-error-light);color:var(--accent-error);font-weight:700} .ct-proj{background:var(--accent-purple-light);color:var(--accent-purple)} /* Calendar item highlighted (pending invoice) */ .cal-item.cal-pending{background:linear-gradient(90deg,rgba(254,242,242,.7) 0%,transparent 100%);border-left:2px solid var(--accent-error);padding-left:8px} .cal-item.cal-pending .cal-ev{color:var(--accent-error);font-weight:700} .cal-item.cal-pending .cal-d{color:var(--accent-error)} .cal-arr{color:var(--text-tertiary);font-size:12px;margin-left:5px;flex-shrink:0} .act-card{padding:18px 18px} .act-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .act-title{font-size:.88rem;font-weight:700} .act-item{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border-subtle)} .act-item:last-child{border-bottom:none} .act-ico{width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0} .ai-doc{background:var(--accent-success-light);color:var(--accent-success)}.ai-inv{background:var(--accent-primary-light);color:var(--accent-primary)}.ai-warn{background:var(--accent-caution-light);color:var(--accent-caution)}.ai-cl{background:var(--accent-purple-light);color:var(--accent-purple)} .act-body{flex:1;min-width:0} .act-ev{font-size:.8rem;font-weight:600;line-height:1.4} .act-mt{font-size:.71rem;color:var(--text-tertiary);margin-top:1px} .act-dt{font-size:.7rem;color:var(--text-tertiary);flex-shrink:0;margin-top:2px} .qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px} .qa-card{padding:14px 12px;text-align:center;cursor:pointer;transition:border-color .15s,transform .12s} .qa-card:hover{border-color:var(--border-strong);transform:translateY(-1px)} .qa-ico{width:34px;height:34px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 8px} .qa-lbl{font-size:.78rem;font-weight:600;margin-bottom:2px} .qa-dc{font-size:.7rem;color:var(--text-tertiary);line-height:1.4} .sug-card{padding:18px 20px;background:linear-gradient(135deg,#eff4fe,#f0fdf4);border-color:#c7dafb} .sug-title{font-size:.86rem;font-weight:700;color:var(--accent-primary);margin-bottom:5px;display:flex;align-items:center;gap:7px} .sug-body{font-size:.8rem;color:var(--text-secondary);margin-bottom:11px;line-height:1.6} .dash-bot{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* ═══════════════════════════════════════════ CLIENTS PAGE ═══════════════════════════════════════════ */ .clients-layout{display:grid;grid-template-columns:272px 1fr;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card)} .cl-left{border-right:1px solid var(--border-subtle);display:flex;flex-direction:column} .cl-search{padding:12px 14px;border-bottom:1px solid var(--border-subtle);display:flex;gap:7px} .srch-wrap{position:relative;flex:1} .srch-wrap input{padding:6px 9px 6px 28px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:.81rem;background:var(--bg-page);width:100%;outline:none;transition:border-color .12s} .srch-wrap input:focus{border-color:var(--accent-primary);background:#fff} .srch-ic{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none} .flt-btn{width:28px;height:28px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:var(--bg-page);flex-shrink:0;transition:background .12s} .flt-btn:hover{background:var(--border-subtle)} .cl-list{flex:1;overflow-y:auto;min-height:200px} .cl-item{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--border-subtle);cursor:pointer;transition:background .1s} .cl-item:hover{background:var(--bg-page)} .cl-item.active{background:var(--accent-primary-light)} .cl-av{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:700;color:#fff;flex-shrink:0} .cl-nm{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cl-mt{font-size:.7rem;color:var(--text-tertiary);margin-top:1px} .cl-am{font-family:var(--font-data);font-size:.82rem;font-weight:500;text-align:right;flex-shrink:0} .add-cl{padding:11px 14px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;color:var(--accent-primary);font-size:.82rem;font-weight:600;cursor:pointer;gap:5px;transition:background .1s;width:100%} .add-cl:hover{background:var(--accent-primary-light)} .cl-footer{padding:13px 14px;border-top:1px solid var(--border-subtle)} .cl-sum-row{display:flex;justify-content:space-between;font-size:.76rem;padding:2px 0} .cl-sum-lbl{color:var(--text-tertiary)}.cl-sum-v{font-weight:600;font-family:var(--font-data)} /* Client detail panel */ .cd-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0} .cd-hdr{padding:18px 22px 0;border-bottom:1px solid var(--border-subtle)} .cd-top{display:flex;align-items:flex-start;gap:13px;margin-bottom:14px} .cd-av{width:46px;height:46px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:700;color:#fff;flex-shrink:0} .cd-name{font-size:1.05rem;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .cd-nif{font-size:.76rem;color:var(--text-tertiary);font-family:var(--font-data);margin-top:2px} .cd-since{font-size:.73rem;color:var(--text-tertiary);margin-top:2px} .cd-acts{margin-left:auto;display:flex;gap:7px;flex-shrink:0} .cd-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border-subtle);padding:13px 22px} .cd-st{padding-right:20px;border-right:1px solid var(--border-subtle)} .cd-st:last-child{border-right:none;padding-right:0} .cd-st:not(:first-child){padding-left:20px} .cd-st-lbl{font-size:.7rem;color:var(--text-tertiary);margin-bottom:3px} .cd-st-v{font-size:1.1rem;font-weight:700;font-family:var(--font-data);letter-spacing:-.4px} .cd-st-sub{font-size:.7rem;color:var(--text-tertiary);margin-top:2px} .cd-body{flex:1;overflow-y:auto;padding:18px 22px} /* Tables */ .doc-tbl,.inv-tbl{width:100%;border-collapse:collapse} .doc-tbl th,.inv-tbl th{font-size:.68rem;font-weight:700;color:var(--text-tertiary);padding:7px 9px;text-align:left;border-bottom:1px solid var(--border-subtle)} .doc-tbl td,.inv-tbl td{padding:10px 9px;font-size:.82rem;border-bottom:1px solid var(--border-subtle);vertical-align:middle} .doc-tbl tr:last-child td,.inv-tbl tr:last-child td{border-bottom:none} .doc-tbl tr:hover td,.inv-tbl tr:hover td{background:var(--bg-page)} .doc-nc{display:flex;align-items:center;gap:7px} .doc-ext{font-size:.65rem;font-weight:700;padding:2px 5px;border-radius:4px;flex-shrink:0} .de-pdf{background:#fef2f2;color:var(--accent-error)}.de-xls{background:var(--accent-success-light);color:var(--accent-success)}.de-doc{background:var(--accent-primary-light);color:var(--accent-primary)} .drop-area{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:22px;text-align:center;margin-top:14px;cursor:pointer;transition:border-color .15s,background .15s} .drop-area:hover{border-color:var(--accent-primary);background:var(--accent-primary-light)} .drop-txt{font-size:.82rem;color:var(--accent-primary);font-weight:600;margin-top:6px} .drop-sub{font-size:.71rem;color:var(--text-tertiary);margin-top:3px} /* Extracted fields preview */ .extracted-preview{background:var(--accent-primary-light);border:1px solid #c3d9fb;border-radius:var(--radius-sm);padding:12px 14px;margin-top:14px} .ep-title{font-size:.73rem;font-weight:700;color:var(--accent-primary);margin-bottom:8px;display:flex;align-items:center;gap:6px} .ep-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .ep-key{font-size:.77rem;color:var(--text-secondary)} .ep-val{font-family:var(--font-data);font-size:.79rem;font-weight:500;color:var(--text-primary)} .ep-actions{display:flex;gap:8px;margin-top:10px} /* ═══════════════════════════════════════════ ESTIMADOR ═══════════════════════════════════════════ */ .al-info{display:flex;align-items:flex-start;gap:9px;background:var(--accent-primary-light);border:1px solid #c3d9fb;border-radius:var(--radius-md);padding:11px 13px;margin-bottom:16px} .al-ico{color:var(--accent-primary);flex-shrink:0;margin-top:2px} .al-body{font-size:.82rem;color:var(--accent-primary-hover)} .al-title{font-weight:600;margin-bottom:1px} /* Read-only mode banner */ .readonly-banner{display:flex;align-items:center;justify-content:space-between;background:var(--accent-success-light);border:1px solid #a7f3d0;border-radius:var(--radius-sm);padding:9px 14px;margin-bottom:16px} .rb-left{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--accent-success)} .rb-sub{font-size:.75rem;color:var(--accent-success);opacity:.8;font-weight:400} .est-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin:16px 0} /* Stat card — normal */ .est-card{padding:20px 20px 20px 23px;position:relative;overflow:hidden} .est-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px} .ec-liq::before{background:var(--accent-success)} .ec-irs::before{background:var(--accent-primary)} .ec-ss::before{background:var(--accent-purple)} .ec-lbl{font-size:.75rem;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:4px;margin-bottom:8px} .ec-val{font-size:1.7rem;font-weight:800;letter-spacing:-.5px;margin-bottom:4px} .ec-val.g{color:var(--accent-success)}.ec-val.b{color:var(--accent-primary)}.ec-val.p{color:var(--accent-purple)} .ec-sub{font-size:.73rem;color:var(--text-tertiary);line-height:1.5} .ec-prog{margin-top:12px;height:4px;background:var(--border-subtle);border-radius:99px;overflow:hidden} .ec-bar{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)} .eb-g{background:var(--accent-success)}.eb-b{background:var(--accent-primary)}.eb-p{background:var(--accent-purple)} /* Stat card — compact */ .est-card-sm{padding:13px 16px 13px 19px} .est-card-sm .ec-lbl{font-size:.72rem;margin-bottom:5px} .est-card-sm .ec-val{font-size:1.2rem} .est-card-sm .ec-prog{margin-top:8px;height:3px} .lim-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:20px} .lim-card{padding:17px 19px} .lim-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px} .lim-lbl{font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:5px} .lim-pct{font-size:1rem;font-weight:700;font-family:var(--font-data);letter-spacing:-.4px} .lim-ft{display:flex;justify-content:space-between;font-size:.71rem;color:var(--text-tertiary);margin-top:5px} .donut-sec{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;padding:20px 22px} .donut-wrap{position:relative;width:180px;height:180px;margin:0 auto} .donut-svg{width:180px;height:180px;transform:rotate(-90deg)} .donut-ctr{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none} .donut-ctr-v{font-size:1.05rem;font-weight:700;font-family:var(--font-data);letter-spacing:-.5px;line-height:1.2} .donut-ctr-l{font-size:.68rem;color:var(--text-tertiary);margin-top:2px} .bl-list{display:flex;flex-direction:column} .bl-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border-subtle)} .bl-row:last-child{border-bottom:none} .bl-l{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-secondary)} .bl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .bl-v{font-family:var(--font-data);font-size:.82rem;font-weight:600} .bl-v.pos{color:var(--text-primary)}.bl-v.neg{color:var(--accent-error)}.bl-v.res{color:var(--accent-success);font-size:.88rem;font-weight:700} .bl-row.hl{background:var(--accent-success-light);margin:0 -22px;padding:9px 22px} /* SS info box */ .ss-info-box{background:var(--accent-caution-light);border:1px solid #fcd34d;border-radius:var(--radius-sm);padding:10px 13px;margin-top:10px;font-size:.78rem;color:#92400e;line-height:1.6} .ss-info-box strong{font-weight:700} .rec-list{display:flex;flex-direction:column;gap:9px;margin-bottom:14px} .rec-item{display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);cursor:pointer;transition:border-color .12s;background:var(--surface-card)} .rec-item:hover{border-color:var(--border-strong)} .rec-ico{width:34px;height:34px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0} .rec-body{flex:1} .rec-title{font-size:.84rem;font-weight:600;margin-bottom:1px} .rec-desc{font-size:.76rem;color:var(--text-tertiary);line-height:1.4} .rec-tag{flex-shrink:0;font-size:.7rem;font-weight:600;padding:3px 9px;border-radius:99px} .rt-info{background:var(--accent-primary-light);color:var(--accent-primary)}.rt-warn{background:var(--accent-caution-light);color:var(--accent-caution)}.rt-sug{background:var(--accent-success-light);color:var(--accent-success)} .see-more{display:flex;align-items:center;justify-content:center;gap:5px;font-size:.8rem;font-weight:600;color:var(--accent-primary);padding:8px;cursor:pointer;width:100%} .see-more:hover{text-decoration:underline} /* Recibos table in estimador */ .recibos-tbl{width:100%;border-collapse:collapse;margin-bottom:12px} .recibos-tbl th{font-size:.68rem;font-weight:700;color:var(--text-tertiary);padding:7px 9px;text-align:left;border-bottom:1px solid var(--border-subtle)} .recibos-tbl td{padding:9px 9px;font-size:.82rem;border-bottom:1px solid var(--border-subtle);vertical-align:middle} .recibos-tbl tr:last-child td{border-bottom:none} .recibos-tbl tr:hover td{background:var(--bg-page)} /* ═══════════════════════════════════════════ MODAL ═══════════════════════════════════════════ */ .modal-ov{position:fixed;inset:0;background:rgba(17,24,39,.42);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .18s} .modal-ov.open{opacity:1;pointer-events:all} .modal{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);width:100%;max-width:520px;transform:translateY(8px);transition:transform .2s ease;max-height:90vh;overflow-y:auto} .modal-ov.open .modal{transform:none} .modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:17px 21px 13px;border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--surface-card);z-index:2} .modal-title{font-size:.98rem;font-weight:700;display:flex;align-items:center;gap:8px} .modal-x{width:26px;height:26px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:15px;transition:background .12s} .modal-x:hover{background:var(--bg-page)} .modal-body{padding:17px 21px} .modal-ft{padding:13px 21px 17px;display:flex;justify-content:flex-end;gap:7px;border-top:1px solid var(--border-subtle)} /* Upload zone inside modal */ .modal-upload-zone{border:2px dashed var(--border-strong);border-radius:var(--radius-md);padding:18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:16px} .modal-upload-zone:hover{border-color:var(--accent-primary);background:var(--accent-primary-light)} .muz-title{font-size:.84rem;font-weight:600;color:var(--accent-primary);margin-top:6px} .muz-sub{font-size:.72rem;color:var(--text-tertiary);margin-top:2px} .muz-divider{display:flex;align-items:center;gap:10px;margin:14px 0;font-size:.75rem;color:var(--text-tertiary)} .muz-divider::before,.muz-divider::after{content:'';flex:1;height:1px;background:var(--border-subtle)} /* Spinner */ .spinner{width:18px;height:18px;border:2px solid var(--border-subtle);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .7s linear infinite;display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} /* Drag-over state for upload zones inside modals */ #mrUploadZone.drag-over,#mdUploadZone.drag-over{ border-color:var(--accent-primary);background:var(--accent-primary-light); } #mdUploadZone.drag-over{border-color:var(--accent-success);background:var(--accent-success-light)} /* ═══════════════════════════════════════════ RESUMO FISCAL — DATA STRIP ═══════════════════════════════════════════ */ .est-data-strip{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;margin-bottom:16px;gap:12px;flex-wrap:wrap} .est-strip-fields{display:flex;align-items:center;gap:0;flex:1;flex-wrap:wrap;min-width:0} .est-strip-field{display:flex;flex-direction:column;gap:2px;padding:0 18px} .est-strip-field:first-child{padding-left:0} .est-strip-lbl{font-size:.72rem;font-weight:600;color:var(--text-tertiary)} .est-strip-val{font-size:.9rem;font-weight:700;color:var(--text-primary)} .est-strip-sep{width:1px;height:32px;background:var(--border-subtle);flex-shrink:0} .est-strip-edit{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:var(--accent-primary);white-space:nowrap;flex-shrink:0} .est-strip-edit:hover{text-decoration:underline} /* ═══════════════════════════════════════════ PLANO E FATURAÇÃO ═══════════════════════════════════════════ */ .plano-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:4px} .plano-current-card{padding:24px} .plano-badge-row{display:flex;align-items:center;gap:10px;margin-bottom:14px} .plano-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px} .plano-badge-free{background:var(--bg-page);border:1px solid var(--border-strong);color:var(--text-secondary)} .plano-badge-pro{background:var(--accent-primary-light);border:1px solid #bfdbfe;color:var(--accent-primary)} .plano-badge-biz{background:var(--accent-purple-light);border:1px solid #ddd6fe;color:var(--accent-purple)} .plano-current-label{font-size:.76rem;color:var(--text-tertiary);font-weight:500} .plano-price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:8px} .plano-price{font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1} .plano-price-period{font-size:.85rem;color:var(--text-tertiary);font-weight:500} .plano-desc{font-size:.8rem;color:var(--text-tertiary);margin-bottom:18px;line-height:1.5} .plano-features{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px} .plano-feat{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--text-primary)} .plano-feat-no{opacity:.6} /* Usage card */ .plano-usage-card{padding:24px} .plano-usage-list{display:flex;flex-direction:column;gap:18px} .plano-usage-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px} .plano-usage-label{font-size:.82rem;color:var(--text-secondary);font-weight:500} .plano-usage-val{font-size:.82rem;font-weight:700} .plano-usage-green{color:var(--accent-success)} .plano-usage-amber{color:var(--accent-caution)} .plano-usage-red{color:var(--accent-error)} .plano-bar-track{height:6px;background:var(--border-subtle);border-radius:99px;overflow:hidden} .plano-bar-fill{height:100%;border-radius:99px;transition:width .4s ease} .plano-bar-green{background:var(--accent-success)} .plano-bar-amber{background:var(--accent-caution)} .plano-bar-red{background:var(--accent-error)} .plano-usage-hint{font-size:.74rem;color:var(--accent-caution);margin-top:5px;font-weight:500} /* Plan comparison grid */ .plano-compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .plano-compare-card{padding:24px;position:relative;transition:border-color .15s} .plano-compare-tier{font-size:.82rem;font-weight:700;color:var(--text-tertiary);margin-bottom:10px} .plano-compare-price-row{display:flex;align-items:baseline;gap:3px;margin-bottom:10px} .plano-compare-price{font-size:1.8rem;font-weight:800;color:var(--text-primary);line-height:1} .plano-compare-period{font-size:.8rem;color:var(--text-tertiary);font-weight:500} .plano-compare-tag{font-size:.72rem;font-weight:700;border-radius:99px;padding:3px 10px;margin-bottom:18px;display:inline-block} .plano-compare-tag-current{background:var(--bg-page);border:1px solid var(--border-strong);color:var(--text-tertiary)} .plano-compare-tag-popular{background:var(--accent-primary-light);color:var(--accent-primary)} .plano-compare-tag-biz{background:var(--accent-purple-light);color:var(--accent-purple)} .plano-compare-feats{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px;font-size:.82rem;color:var(--text-secondary);line-height:1.4} .plano-compare-feats li::before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f00c";color:var(--accent-success);margin-right:8px} .plano-feat-muted{color:var(--text-tertiary)!important} .plano-feat-muted::before{content:"";margin:0} .plano-compare-free{opacity:.85} .plano-compare-pro{border:2px solid var(--accent-primary)!important} .plano-compare-biz{border:2px solid #c4b5fd!important} /* ═══════════════════════════════════════════ MOBILE UTILITIES (always defined) ═══════════════════════════════════════════ */ .topbar-menu-btn{display:none;width:34px;height:34px;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text-secondary);transition:background .12s;flex-shrink:0} .topbar-menu-btn:hover{background:var(--bg-page)} .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99} .sb-overlay.open{display:block} /* Close btn inside sidebar — hidden on desktop */ .sb-close{display:none;width:28px;height:28px;border-radius:var(--radius-sm);align-items:center;justify-content:center;color:var(--text-tertiary);margin-left:auto;flex-shrink:0;transition:background .12s} .sb-close:hover{background:var(--bg-page)} /* Status pill — always shown above KPI row */ .kpi-ok-tag{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:#065f46;background:#d1fae5;border:1px solid #6ee7b7;border-radius:99px;padding:5px 13px;width:fit-content;flex-shrink:0} /* Client detail back button — hidden on desktop */ .cd-back-btn{display:none;align-items:center;justify-content:space-between;padding:10px 14px 10px 22px;border-bottom:1px solid var(--border-subtle);background:var(--surface-card)} /* Lock page scroll when drawer is open */ body.drawer-open{overflow:hidden} /* Section header row (title + CTA button) */ .cd-sec-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} /* ═══════════════════════════════════════════ RESPONSIVE — tablet (≤880px) ═══════════════════════════════════════════ */ @media(max-width:880px){ html{font-size:14px;overflow-x:hidden} body{overflow-x:hidden} /* Sidebar */ .sidebar{transform:translateX(-100%);transition:transform .25s ease} .sidebar.open{transform:none;box-shadow:var(--shadow-lg)} .main{margin-left:0;min-width:0} .topbar-menu-btn{display:flex} .topbar{padding:0 14px} .sb-close{display:flex} /* Page layout */ .page-header{padding:12px 16px 13px;flex-wrap:wrap;gap:10px;align-items:flex-start} .page-content{padding:18px 16px 48px} /* Dashboard KPI — 3 cards side by side */ .kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))} .kpi-card{padding:12px 10px;min-width:0} .kpi-v{font-size:1.15rem} .kpi-lbl{font-size:.7rem;word-break:break-word} .kpi-sub,.kpi-foot,.kpi-card .link{display:none!important} /* Calendar + activity stay side by side on tablet */ .dash-bot{grid-template-columns:1fr} .donut-sec{grid-template-columns:1fr;justify-items:center} /* Clients summary — compact 2×2 */ .cl-kpi-grid{grid-template-columns:1fr 1fr!important} .cl-kpi-grid .card{padding:9px 11px!important} #sumTotal,#sumPendente{font-size:1.15rem!important} #sumClSec,#clIVApct{font-size:1.05rem!important} /* Clients panel: list full-width, detail as right drawer */ .clients-layout{grid-template-columns:1fr!important;height:auto!important;overflow:hidden;min-width:0;width:100%} .cl-left{width:100%;min-width:0;border-right:none;height:auto!important;max-height:none!important;overflow-x:hidden} /* Drawer */ .cd-panel{ position:fixed;top:0;right:0;height:100vh;width:75vw;max-width:75vw;box-sizing:border-box; background:var(--surface-card); border-left:1px solid var(--border-subtle); box-shadow:-6px 0 32px rgba(0,0,0,.14); transform:translateX(100vw); transition:transform .26s cubic-bezier(.4,0,.2,1); overflow-x:hidden;overflow-y:auto; display:flex!important; flex-direction:column; z-index:150; } .cd-panel.visible-mobile{transform:translateX(0)} .cd-back-btn{display:flex} .cd-stats{grid-template-columns:1fr 1fr} /* Overlay: only used on mobile (full-screen drawer). Hidden on tablet so list stays clickable. */ .cd-drawer-overlay{display:none} /* Section header: stack button below title inside drawer */ .cd-panel .cd-sec-hdr{flex-direction:column;align-items:flex-start;gap:8px} /* Header + acts wrap on narrow drawer */ .cd-panel .cd-top{flex-wrap:wrap;gap:10px} .cd-panel .cd-acts{margin-left:0;flex-wrap:wrap} /* Tables → cards inside the drawer */ .cd-panel .inv-tbl,.cd-panel .doc-tbl{display:block;width:100%} .cd-panel .inv-tbl thead,.cd-panel .doc-tbl thead{display:none} .cd-panel .inv-tbl tbody,.cd-panel .doc-tbl tbody{display:flex;flex-direction:column;gap:8px} .cd-panel .inv-tbl tr,.cd-panel .doc-tbl tr{ display:flex;flex-wrap:wrap;align-items:center; gap:4px 8px;padding:10px 12px; background:var(--bg-page); border:1px solid var(--border-subtle)!important; border-radius:var(--radius-sm) } .cd-panel .inv-tbl td,.cd-panel .doc-tbl td{display:block;border:none!important;padding:0} /* Fatura card: description full-width first, then meta row */ .cd-panel .inv-tbl td:nth-child(1){display:none} /* Nº */ .cd-panel .inv-tbl td:nth-child(2){order:2;font-size:.75rem;color:var(--text-tertiary);white-space:nowrap;flex-shrink:0} /* Data */ .cd-panel .inv-tbl td:nth-child(3){order:1;width:100%;font-weight:600;font-size:.87rem;white-space:normal;word-break:break-word} /* Descrição */ .cd-panel .inv-tbl td:nth-child(4){order:4;font-weight:600;white-space:nowrap;margin-left:auto} /* Valor */ .cd-panel .inv-tbl td:nth-child(5){order:3;white-space:nowrap;flex-shrink:0} /* Estado */ .cd-panel .inv-tbl td:nth-child(6){order:5;white-space:nowrap;flex-shrink:0} /* Actions */ /* Doc card: name full-width first, then meta row */ .cd-panel .doc-tbl td:nth-child(1){order:1;width:100%;white-space:normal;word-break:break-word} /* Nome */ .cd-panel .doc-tbl td:nth-child(2){display:none} /* Tipo */ .cd-panel .doc-tbl td:nth-child(3){order:2;font-size:.75rem;color:var(--text-tertiary);white-space:nowrap;flex-shrink:0} /* Data */ .cd-panel .doc-tbl td:nth-child(4){display:none} /* Tamanho */ .cd-panel .doc-tbl td:nth-child(5){order:3;white-space:nowrap;margin-left:auto;flex-shrink:0} /* Actions */ /* Resumo Fiscal */ .est-cards{grid-template-columns:1fr 1fr} .lim-grid{grid-template-columns:1fr} .est-data-strip{flex-direction:column;align-items:flex-start;gap:14px} .est-strip-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 0;width:100%} .est-strip-sep{display:none} .est-strip-field{padding:0 0 0 16px;border-left:1px solid var(--border-subtle)} .est-strip-field:first-child,.est-strip-field:nth-child(2){padding-left:0;border-left:none} .fg4{grid-template-columns:1fr 1fr} /* Tabs — horizontal scroll */ .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch} .tabs::-webkit-scrollbar{display:none} .plano-compare-grid{grid-template-columns:1fr} .plano-top-grid{grid-template-columns:1fr} } /* ═══════════════════════════════════════════ RESPONSIVE — phone (≤520px) ═══════════════════════════════════════════ */ @media(max-width:520px){ /* Sidebar goes full-width on phone */ .sidebar{width:100vw} /* KPI cards: 1 column, full width, stacked */ .kpi-row{grid-template-columns:1fr} .kpi-card{padding:13px 16px;min-width:0} .kpi-v{font-size:1.3rem} .kpi-lbl{font-size:.76rem} .cl-kpi-grid{grid-template-columns:1fr 1fr!important} /* Drawer: full-screen on mobile, overlay visible */ .cd-panel{width:100vw;max-width:100vw;transform:translateX(100vw)} .cd-drawer-overlay{display:block} .cd-drawer-overlay.visible{pointer-events:auto;background:rgba(0,0,0,.4)} /* Hide quick actions on phone — users navigate to the relevant page directly */ .dash-qa-section{display:none} /* Stack calendar + activity on phone */ .dash-grid{grid-template-columns:1fr} .fg2{grid-template-columns:1fr} .page-content{padding:14px 12px 40px} .page-header{padding:10px 12px 11px} /* Modal becomes bottom sheet */ .modal-ov{padding:0;align-items:flex-end} .modal{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-width:100%!important;max-height:88vh} /* Resumo Fiscal — single column on phone */ .est-cards{grid-template-columns:1fr} .est-strip-fields{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* Calendar countdown pills stay the same in dark mode */ html.dark .ct-u{background:#fef3c7;color:#b45309} html.dark .ct-s{background:var(--accent-primary-light);color: var(--accent-primary)} html.dark .ct-pend{background:var(--accent-error-light);color:var(--accent-error)} html.dark .ct-f{background:#f1f5f9;color:#64748b} html.dark .ct-proj{background:#f5f3ff;color:#6d28d9}