/* =====================================================================
   UPP AGÊNCIA · Sistema de Gestão  —  Design System (clean + dark)
   Baseado no Design System oficial da Upp (cores, tipografia, raios,
   sombras com tom roxo, botões em pílula, cards e tabelas).
   ===================================================================== */

/* ----------------------------- TOKENS -------------------------------- */
:root,
[data-theme="clean"] {
    /* Marca & acentos */
    --roxo:#662F8B;
    --roxo-deep:#501F70;
    --roxo-press:#3B1652;
    --lavanda:#9875D1;
    --lavanda-soft:#E5DAF4;
    --teal:#00AE9B;
    --teal-deep:#018B7C;
    --red:#D63A6A;
    --red-deep:#C2305C;
    --amber:#C98A00;
    --amber-soft:#FBEFD2;

    /* Texto */
    --text:#191819;
    --text-2:#3A3340;
    --text-mute:#6B6675;
    --on-accent:#FFFFFF;

    /* Superfícies */
    --bg-app:#F4F0FA;
    --surface:#FFFFFF;
    --surface-2:#F6F3FB;
    --surface-3:#EFE9F8;
    --sidebar-bg:#FFFFFF;
    --sidebar-active:#F1E8FC;
    --topbar-bg:rgba(255,255,255,.86);

    /* Linhas e inputs */
    --hairline:#E8E1F1;
    --hairline-strong:#D9CEEC;
    --input-bg:#FFFFFF;
    --input-border:#CBBEDF;

    /* Sombras (tom roxo) */
    --shadow-1:0 1px 3px rgba(102,47,139,.10);
    --shadow-2:0 8px 24px rgba(102,47,139,.14), 0 2px 6px rgba(25,24,25,.05);
    --shadow-3:0 20px 48px rgba(59,22,82,.22);

    /* Status (chips) — tons pastéis + cor de atenção */
    --chip-pos-bg:#DFF4EF;              --chip-pos-fg:#0B7768;
    --chip-info-bg:#ECE4F7;             --chip-info-fg:#5A3A93;
    --chip-warn-bg:#FCEFCE;             --chip-warn-fg:#8A6200;
    --chip-danger-bg:#FBE0E8;           --chip-danger-fg:#B03158;
    --chip-neutral-bg:#EDEDF0;          --chip-neutral-fg:#5C5763;

    /* Raio / espaço / transição / layout */
    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:9999px;
    --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px; --s-xxl:32px;
    --t-fast:140ms cubic-bezier(.4,0,.2,1);
    --t:240ms cubic-bezier(.4,0,.2,1);
    --sidebar-w:250px;
}

[data-theme="dark"] {
    --roxo:#A582DB;
    --roxo-deep:#B79BE3;
    --roxo-press:#8E6BC8;
    --lavanda:#B79BE3;
    --lavanda-soft:#2F2543;
    --teal:#2FD0BE;
    --teal-deep:#19B7A5;
    --red:#FF7AA0;
    --red-deep:#FF5C8A;
    --amber:#F2B53D;
    --amber-soft:#3A2F16;

    --text:#F4F1FA;
    --text-2:#D2CBE0;
    --text-mute:#9A93AC;
    --on-accent:#1A1622;

    --bg-app:#121017;
    --surface:#1C1923;
    --surface-2:#23202C;
    --surface-3:#2A2634;
    --sidebar-bg:#171520;
    --sidebar-active:#2C2440;
    --topbar-bg:rgba(23,21,32,.86);

    --hairline:#2E2A39;
    --hairline-strong:#3B3550;
    --input-bg:#23202C;
    --input-border:#403A50;

    --shadow-1:0 1px 3px rgba(0,0,0,.45);
    --shadow-2:0 10px 28px rgba(0,0,0,.5);
    --shadow-3:0 24px 56px rgba(0,0,0,.6);

    --chip-pos-bg:rgba(47,208,190,.16);  --chip-pos-fg:#54E0D0;
    --chip-info-bg:rgba(165,130,219,.20); --chip-info-fg:#C7AEEC;
    --chip-warn-bg:rgba(242,181,61,.16);  --chip-warn-fg:#F2C766;
    --chip-danger-bg:rgba(255,122,160,.18); --chip-danger-fg:#FF9DB8;
    --chip-neutral-bg:rgba(255,255,255,.08); --chip-neutral-fg:#B8B2C6;
}

/* ----------------------------- BASE ---------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    background:var(--bg-app);
    color:var(--text);
    font-size:15px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    transition:background var(--t),color var(--t);
}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--text);letter-spacing:-.2px;}
a{color:var(--roxo);text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--lavanda);color:#fff;}

.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2.2px;color:var(--roxo);}
.micro{font-size:11.5px;color:var(--text-mute);}
.muted{color:var(--text-mute);}

/* scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--hairline-strong) transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:99px;border:3px solid transparent;background-clip:content-box;}

/* ----------------------------- BOTÕES -------------------------------- */
.btn{
    font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
    border-radius:var(--r-pill);padding:11px 22px;border:1.5px solid transparent;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
    line-height:1;white-space:nowrap;
}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--roxo);color:var(--on-accent);box-shadow:0 6px 16px rgba(102,47,139,.26);}
.btn-primary:hover{background:var(--roxo-deep);box-shadow:0 10px 24px rgba(102,47,139,.34);transform:translateY(-1px);}
.btn-secondary{background:var(--surface);color:var(--roxo);border-color:var(--roxo);}
.btn-secondary:hover{background:var(--lavanda-soft);transform:translateY(-1px);}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(0,174,155,.22);}
.btn-teal:hover{background:var(--teal-deep);transform:translateY(-1px);}
.btn-danger{background:var(--red);color:#fff;}
.btn-danger:hover{background:var(--red-deep);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text-2);}
.btn-ghost:hover{background:var(--surface-2);color:var(--roxo);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn[disabled]{opacity:.55;cursor:not-allowed;}

/* ----------------------------- FORMS --------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:2px;}
.field > label{font-size:12.5px;font-weight:600;color:var(--text-2);}
.field .req{color:var(--red);font-weight:700;}
.field input,.field select,.field textarea{
    font-family:inherit;font-size:14.5px;font-weight:400;color:var(--text);
    padding:11px 13px;border-radius:var(--r-md);border:1.5px solid var(--input-border);
    background:var(--input-bg);width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t);
}
.field textarea{resize:vertical;min-height:74px;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-mute);opacity:.8;}
.field input:focus,.field select:focus,.field textarea:focus{
    outline:none;border-color:var(--roxo);box-shadow:0 0 0 4px rgba(102,47,139,.14);
}
.field select{
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239875D1' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;padding-right:34px;
}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red);box-shadow:0 0 0 4px rgba(214,58,106,.14);}
.field-error{font-size:12px;color:var(--red);min-height:0;display:none;}
.field.has-error .field-error{display:block;}

.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-lg);}
.form-grid .col-span-2{grid-column:1 / -1;}

/* senha com olho */
.input-password{position:relative;display:flex;align-items:center;}
.input-password input{padding-right:46px;}
.toggle-password{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    background:transparent;border:0;cursor:pointer;padding:6px;border-radius:var(--r-sm);
    color:var(--text-mute);font-size:16px;line-height:1;transition:color var(--t-fast),background var(--t-fast);
}
.toggle-password:hover{color:var(--roxo);background:var(--surface-2);}
.toggle-password.is-visible{color:var(--roxo);}

/* ----------------------------- LOGIN --------------------------------- */
.login-body{
    min-height:100vh;display:grid;place-items:center;padding:24px;
    background:
        radial-gradient(1100px 540px at 12% -10%, rgba(152,117,209,.20), transparent 60%),
        radial-gradient(900px 520px at 110% 120%, rgba(0,174,155,.14), transparent 55%),
        var(--bg-app);
}
.login-wrap{width:100%;max-width:428px;}
.login-card{
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);
    box-shadow:var(--shadow-3);padding:38px 34px;
}
.login-brand{display:flex;justify-content:center;margin-bottom:20px;}
.login-logo{height:54px;width:auto;}
.login-head{text-align:center;margin-bottom:24px;}
.login-head h1{font-size:23px;margin:10px 0 6px;}
.login-head p{color:var(--text-mute);font-size:14px;margin:0;}
.login-card .field{margin-bottom:16px;}
.login-card .btn-block{margin-top:6px;}
.login-foot{text-align:center;margin:22px 0 0;}

/* logo swap por tema */
.sidebar__logo--dark,.login-logo--dark{display:none;}
[data-theme="dark"] .sidebar__logo--dark,[data-theme="dark"] .login-logo--dark{display:block;}
[data-theme="dark"] .sidebar__logo--light,[data-theme="dark"] .login-logo--light{display:none;}

/* theme toggle */
.theme-toggle{
    width:40px;height:40px;border-radius:var(--r-pill);border:1.5px solid var(--hairline-strong);
    background:var(--surface);color:var(--roxo);cursor:pointer;font-size:17px;line-height:1;
    display:inline-grid;place-items:center;transition:all var(--t-fast);
}
.theme-toggle:hover{border-color:var(--roxo);transform:translateY(-1px);box-shadow:var(--shadow-1);}
.theme-toggle--floating{position:fixed;top:20px;right:20px;z-index:30;}
.theme-toggle__icon--sun{display:none;}
.theme-toggle__icon--moon{display:inline;}
[data-theme="dark"] .theme-toggle__icon--sun{display:inline;}
[data-theme="dark"] .theme-toggle__icon--moon{display:none;}

/* ----------------------------- APP SHELL ----------------------------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
    width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
    background:var(--sidebar-bg);border-right:1px solid var(--hairline);
    position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    padding:20px 14px;z-index:40;transition:transform var(--t),background var(--t),width var(--t),flex-basis var(--t);
}
.sidebar__brand{padding:6px 10px 18px;margin-bottom:8px;border-bottom:1px solid var(--hairline);}
.sidebar__logo{height:38px;width:auto;}
.sidebar__nav{display:flex;flex-direction:column;gap:4px;margin-top:14px;flex:1;}
.nav-item{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:11px 14px;border-radius:var(--r-lg);border:0;background:transparent;cursor:pointer;
    color:var(--text-2);font-family:inherit;font-size:14.5px;font-weight:500;text-align:left;
    transition:background var(--t-fast),color var(--t-fast);
}
.nav-item__icon{display:inline-grid;place-items:center;color:var(--text-mute);transition:color var(--t-fast);}
.nav-item:hover{background:var(--surface-2);color:var(--roxo);}
.nav-item:hover .nav-item__icon{color:var(--roxo);}
.nav-item.is-active{background:var(--sidebar-active);color:var(--roxo);font-weight:700;}
.nav-item.is-active .nav-item__icon{color:var(--roxo);}
.sidebar__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hairline);}
.nav-item--logout{color:var(--text-2);}
.nav-item--logout:hover{background:rgba(214,58,106,.10);color:var(--red);}
.nav-item--logout:hover .nav-item__icon{color:var(--red);}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
    position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
    padding:14px 26px;background:var(--topbar-bg);backdrop-filter:saturate(160%) blur(10px);
    border-bottom:1px solid var(--hairline);
}
.topbar-title{min-width:0;display:flex;flex-direction:column;justify-content:center;}
.topbar-title h1{font-size:19px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-greet{font-size:12.5px;font-weight:600;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.topbar-clock{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;padding:0 12px;}
.topbar-clock__time{font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.5px;}
.topbar-clock__date{font-size:11.5px;font-weight:600;color:var(--text-mute);}
.topbar-actions{display:flex;align-items:center;gap:12px;}
.icon-btn{width:40px;height:40px;border-radius:var(--r-md);border:0;background:transparent;cursor:pointer;display:none;place-items:center;color:var(--text-2);}
.icon-btn:hover{background:var(--surface-2);}
.burger,.burger::before,.burger::after{content:"";display:block;width:20px;height:2px;background:currentColor;border-radius:2px;transition:var(--t-fast);}
.burger{position:relative;}
.burger::before{position:absolute;top:-6px;}
.burger::after{position:absolute;top:6px;}

.user-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--surface);cursor:default;}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--roxo);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;}
.user-chip__info{display:flex;flex-direction:column;line-height:1.2;}
.user-chip__name{font-size:13px;font-weight:600;color:var(--text);}
.user-chip__email{font-size:11px;color:var(--text-mute);}

.content{padding:26px;flex:1;width:100%;min-width:0;}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(20,16,30,.5);z-index:35;}

/* ----------------------------- PAGE HEAD ----------------------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.page-head .sub{color:var(--text-mute);font-size:13.5px;margin-top:3px;}

/* ----------------------------- CARDS --------------------------------- */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);box-shadow:var(--shadow-1);}
.content > .card{margin-bottom:20px;}
.content > .card:last-child{margin-bottom:0;}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hairline);}
.card__head h2{font-size:15px;font-weight:700;}
.card__body{padding:18px 20px;}
.card__body--flush{padding:0;}

/* filtros */
.filters{
    display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);
    box-shadow:var(--shadow-1);padding:16px 18px;margin-bottom:20px;
}
.filters .field{margin-bottom:0;min-width:150px;}
.filters .filters__spacer{flex:1;}
.filters .filters__actions{display:flex;gap:10px;}

/* ------------------------- STAT CARDS (dashboard) -------------------- */
.stat-grid{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px;}
.stat-card{
    flex:1 1 220px;min-width:0;
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);
    box-shadow:var(--shadow-1);padding:18px 18px 16px;position:relative;overflow:hidden;
    transition:transform var(--t),box-shadow var(--t);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lavanda);}
.stat-card--revenue::before{background:var(--teal);}
.stat-card--expense::before{background:var(--red);}
.stat-card--balance::before{background:var(--roxo);}
.stat-card--accent::before{background:linear-gradient(180deg,var(--roxo),var(--lavanda));}
.stat-card__label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-mute);display:flex;align-items:center;gap:7px;}
.stat-card__value{font-size:25px;font-weight:800;letter-spacing:-.5px;margin-top:8px;color:var(--text);}
.stat-card__value.pos{color:var(--teal-deep);}
.stat-card__value.neg{color:var(--red-deep);}
.stat-card__sub{font-size:12px;color:var(--text-mute);margin-top:5px;}
.stat-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.dot-teal{background:var(--teal);}
.dot-red{background:var(--red);}
.dot-roxo{background:var(--roxo);}
.dot-lav{background:var(--lavanda);}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;}

/* ----------------------------- TABELAS ------------------------------- */
.table-wrap{width:100%;overflow-x:auto;}
.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th,.table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
.table thead th{
    background:var(--surface-2);color:var(--text-2);font-weight:700;font-size:11px;
    letter-spacing:.6px;text-transform:uppercase;position:sticky;top:0;
}
.table tbody tr{transition:background var(--t-fast);}
.table tbody tr:hover{background:var(--surface-2);}
.table tbody tr:last-child td{border-bottom:0;}
.table .col-amount{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;}
.table .amount-pos{color:var(--teal-deep);}
.table .amount-neg{color:var(--red-deep);}
.table .col-actions{text-align:right;white-space:nowrap;}
.table .cell-strong{font-weight:700;color:var(--text);}
.table .cell-mute{color:var(--text-mute);font-size:12.5px;}

.row-action{
    width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--hairline);
    background:var(--surface);cursor:pointer;color:var(--text-2);display:inline-grid;place-items:center;
    transition:all var(--t-fast);margin-left:4px;
}
.row-action:hover{border-color:var(--roxo);color:var(--roxo);background:var(--surface-2);}
.row-action--danger:hover{border-color:var(--red);color:var(--red);background:rgba(214,58,106,.08);}

.empty-state{padding:40px 20px;text-align:center;color:var(--text-mute);}
.empty-state svg{margin:0 auto 10px;opacity:.5;}

/* ----------------------------- CHIPS/STATUS -------------------------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:var(--r-pill);letter-spacing:.2px;white-space:nowrap;}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85;}
.chip--pos{background:var(--chip-pos-bg);color:var(--chip-pos-fg);}
.chip--info{background:var(--chip-info-bg);color:var(--chip-info-fg);}
.chip--warn{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.chip--danger{background:var(--chip-danger-bg);color:var(--chip-danger-fg);}
.chip--neutral{background:var(--chip-neutral-bg);color:var(--chip-neutral-fg);}
.tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--text-2);}

/* --------------------- RESUMO POR CATEGORIA (barras) ---------------- */
.cat-list{display:flex;flex-direction:column;gap:14px;}
.cat-row{display:flex;flex-direction:column;gap:6px;}
.cat-row__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;}
.cat-row__name{font-weight:600;color:var(--text);}
.cat-row__val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-2);}
.cat-row__pct{color:var(--text-mute);font-size:11.5px;font-weight:600;margin-left:6px;}
.cat-bar{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
.cat-bar__fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--roxo),var(--lavanda));transition:width var(--t);}
.cat-bar__fill--rev{background:linear-gradient(90deg,var(--teal-deep),var(--teal));}
.cat-bar__fill--exp{background:linear-gradient(90deg,var(--red-deep),var(--red));}

/* ----------------------------- MODAL --------------------------------- */
.modal-backdrop{
    position:fixed;inset:0;background:rgba(20,16,30,.55);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:80;
    opacity:0;transition:opacity var(--t);
}
.modal-backdrop.is-open{opacity:1;}
.modal-backdrop[hidden]{display:none;}
.modal{
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-xl);
    box-shadow:var(--shadow-3);width:100%;max-width:440px;padding:28px 26px 24px;text-align:center;
    transform:translateY(8px) scale(.98);transition:transform var(--t);
}
.modal-backdrop.is-open .modal{transform:translateY(0) scale(1);}
.modal--form{max-width:680px;text-align:left;}
.modal__icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;}
.modal__icon svg{width:28px;height:28px;}
.modal__icon--success{background:var(--chip-pos-bg);color:var(--teal-deep);}
.modal__icon--error{background:rgba(214,58,106,.14);color:var(--red-deep);}
.modal__icon--warn{background:var(--chip-warn-bg);color:var(--amber);}
.modal__icon--confirm{background:var(--lavanda-soft);color:var(--roxo);}
.modal__icon--info{background:var(--lavanda-soft);color:var(--roxo);}
.modal__title{font-size:18px;font-weight:800;margin-bottom:8px;}
.modal__message{color:var(--text-mute);font-size:14px;margin:0 0 22px;line-height:1.55;}
.modal__actions{display:flex;gap:10px;justify-content:center;}
.modal__actions .btn{min-width:120px;}

/* modal de formulário */
.modal__form-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--hairline);}
.modal__form-head h2{font-size:18px;font-weight:800;}
.modal__close{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--hairline);background:var(--surface);cursor:pointer;color:var(--text-2);font-size:18px;line-height:1;display:grid;place-items:center;transition:all var(--t-fast);}
.modal__close:hover{border-color:var(--red);color:var(--red);}
.modal--form .modal__body{max-height:min(64vh,560px);overflow-y:auto;padding-right:4px;margin-right:-4px;}
.modal--form .modal__actions{justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline);}

/* ----------------------------- TOASTS -------------------------------- */
.toast-stack{position:fixed;bottom:22px;right:22px;z-index:90;display:flex;flex-direction:column;gap:10px;max-width:360px;}
.toast{
    display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--hairline);
    border-left:4px solid var(--roxo);border-radius:var(--r-md);box-shadow:var(--shadow-2);
    padding:13px 15px;font-size:13.5px;color:var(--text);
    opacity:0;transform:translateX(20px);transition:opacity var(--t),transform var(--t);
}
.toast.is-open{opacity:1;transform:translateX(0);}
.toast--success{border-left-color:var(--teal);}
.toast--error{border-left-color:var(--red);}
.toast--info{border-left-color:var(--roxo);}
.toast__icon{flex:0 0 auto;margin-top:1px;}
.toast--success .toast__icon{color:var(--teal-deep);}
.toast--error .toast__icon{color:var(--red-deep);}
.toast--info .toast__icon{color:var(--roxo);}
.toast__msg{flex:1;}

/* ----------------------------- UTIL ---------------------------------- */
.flex{display:flex;}
.items-center{align-items:center;}
.gap-sm{gap:8px;}
.mt-0{margin-top:0;}
.text-right{text-align:right;}
.hidden{display:none !important;}

/* ----------------------- SIDEBAR DIVIDER ----------------------------- */
.sidebar__divider{height:1px;background:var(--hairline);margin:12px 8px;}

/* ----------------------- LOGO / BRAND (maior) + RECOLHER ------------ */
.sidebar__brand{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.brand-img{display:none;width:auto;}
.brand-full{height:52px;max-width:100%;}
.brand-symbol{width:46px;height:auto;margin:0 auto;}
.brand-full.is-light{display:block;}                                  /* expandido + claro (padrão) */
[data-theme="dark"] .brand-full.is-light{display:none;}
[data-theme="dark"] .brand-full.is-dark{display:block;}               /* expandido + escuro */

.sidebar__collapse{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--hairline);
    background:var(--surface);color:var(--text-2);cursor:pointer;display:grid;place-items:center;transition:all var(--t-fast);}
.sidebar__collapse:hover{border-color:var(--roxo);color:var(--roxo);}
.sidebar__collapse svg{transition:transform var(--t);}

/* Modo recolhido — somente em desktop (no mobile o menu é off-canvas) */
@media (min-width:921px){
    .app-shell.sidebar-collapsed .sidebar{width:76px;flex-basis:76px;padding-left:10px;padding-right:10px;}
    .app-shell.sidebar-collapsed .sidebar__brand{flex-direction:column;gap:10px;}
    .app-shell.sidebar-collapsed .nav-item__label{display:none;}
    .app-shell.sidebar-collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0;gap:0;}
    .app-shell.sidebar-collapsed .sidebar__divider{margin-left:10px;margin-right:10px;}
    .app-shell.sidebar-collapsed .brand-full{display:none;}
    .app-shell.sidebar-collapsed .brand-symbol.is-light{display:block;}
    [data-theme="dark"] .app-shell.sidebar-collapsed .brand-symbol.is-light{display:none;}
    [data-theme="dark"] .app-shell.sidebar-collapsed .brand-symbol.is-dark{display:block;}
    .app-shell.sidebar-collapsed .sidebar__collapse svg{transform:rotate(180deg);}
}

/* ----------------------- AVATAR (header + perfil) ------------------- */
.user-avatar--img{padding:0;overflow:hidden;background:var(--surface-3);}
.user-avatar--img img{width:100%;height:100%;object-fit:cover;display:block;}

.avatar-edit{display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--hairline);}
.avatar-edit__preview{width:88px;height:88px;flex:0 0 88px;border-radius:50%;overflow:hidden;background:var(--surface-3);border:1px solid var(--hairline);display:grid;place-items:center;}
.avatar-edit__preview img{width:100%;height:100%;object-fit:cover;}
.avatar-edit__initial{font-size:34px;font-weight:800;color:var(--roxo);}
.avatar-edit__controls{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.avatar-edit__controls .micro{margin:0;}

.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);}

/* ----------------------- CHECKBOX ----------------------------------- */
.upp-check{width:17px;height:17px;cursor:pointer;accent-color:var(--roxo);vertical-align:middle;}
.table .col-check{width:44px;text-align:center;}

/* logs: coluna de detalhes pode quebrar linha */
.table-logs td:nth-child(5){white-space:normal;max-width:340px;}

/* ----------------------- PAGINAÇÃO ---------------------------------- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:20px;}
.page-btn{
    min-width:38px;height:38px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--hairline);
    background:var(--surface);color:var(--text-2);font-size:13.5px;font-weight:600;
    display:inline-flex;align-items:center;justify-content:center;transition:all var(--t-fast);
}
.page-btn:hover{border-color:var(--roxo);color:var(--roxo);background:var(--surface-2);}
.page-btn.is-active{background:var(--roxo);color:var(--on-accent);border-color:var(--roxo);}
.page-btn.is-disabled{opacity:.45;pointer-events:none;}
.page-ellipsis{color:var(--text-mute);padding:0 4px;}

/* ----------------------- FASE 02: resultado / cálculo --------------- */
.result-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-top:6px;}
.result-hero{position:relative;overflow:hidden;border:1px solid var(--hairline);
    background:radial-gradient(130% 150% at 0% 0%, rgba(102,47,139,.12), transparent 60%), var(--surface);}
.result-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--roxo),var(--teal));}
.result-hero .stat-card__value{font-size:33px;}

.calc-readout{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline);}
.calc-readout__item{flex:1 1 180px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:12px 14px;}
.calc-readout__label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-mute);}
.calc-readout__value{display:block;font-size:20px;font-weight:800;margin-top:4px;color:var(--text);}
.calc-readout__value.pos{color:var(--teal-deep);}
.calc-readout__value.neg{color:var(--red-deep);}

.detail-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;margin:0;}
.detail-list > div{display:flex;flex-direction:column;gap:2px;}
.detail-list__full{grid-column:1 / -1;}
.detail-list dt{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-mute);}
.detail-list dd{margin:0;font-size:14px;color:var(--text);font-weight:600;}

@media (max-width:760px){
    .result-grid{grid-template-columns:1fr;}
    .detail-list{grid-template-columns:1fr;}
}

/* ----------------------- FASE 03: contas a pagar / receber --------- */
.quickfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.qf-chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid var(--hairline);
    background:var(--surface);color:var(--text-2);font-size:13px;font-weight:600;transition:all var(--t-fast);}
.qf-chip:hover{border-color:var(--roxo);color:var(--roxo);transform:translateY(-1px);}
.qf-chip.is-active{background:var(--roxo);border-color:var(--roxo);color:var(--on-accent);}

.days-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;}
.days-tag--late{background:rgba(214,58,106,.14);color:var(--red-deep);}
.days-tag--today{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.days-tag--soon{background:var(--surface-3);color:var(--text-2);}
[data-theme="dark"] .days-tag--late{background:rgba(255,122,160,.16);color:var(--red);}

.forecast .compare-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--text-2);}
.forecast .compare-row strong{font-weight:800;font-variant-numeric:tabular-nums;}
.compare-row .pos{color:var(--teal-deep);}
.compare-row .neg{color:var(--red-deep);}

.row-action--ok:hover{border-color:var(--teal);color:var(--teal-deep);background:var(--chip-pos-bg);}

a.stat-card--link{text-decoration:none;cursor:pointer;display:block;}
a.stat-card--link .stat-card__sub{color:var(--roxo);font-weight:600;}

/* ----------------------- FASE 04: nível de esforço ----------------- */
.effort{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap;}
.effort::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;}
.effort--verde{background:var(--chip-pos-bg);color:var(--chip-pos-fg);}
.effort--amarelo{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.effort--vermelho{background:rgba(214,58,106,.14);color:var(--red-deep);}
[data-theme="dark"] .effort--vermelho{background:rgba(255,122,160,.16);color:var(--red);}

/* ----------------------- FASE 05: gráficos / relatórios ------------ */
.chart-box{width:100%;}
.uchart{display:block;width:100%;height:auto;}
.uchart-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:10px;font-size:12px;color:var(--text-mute);}
.uchart-legend__item{display:inline-flex;align-items:center;gap:6px;}
.uchart-legend__item i{width:12px;height:12px;border-radius:3px;display:inline-block;}
.report-desc{color:var(--text-mute);font-size:13px;margin:2px 0 0;}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;}
@media (max-width:880px){.report-grid{grid-template-columns:1fr;}}
.mini-kpis{display:flex;flex-wrap:wrap;gap:10px 26px;padding:6px 2px 2px;}
.mini-kpis div{font-size:13px;color:var(--text-2);}
.mini-kpis strong{display:block;font-size:17px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}

/* detalhe (cliente/lead/parceiro) */
.detail-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.detail-head .avatar-lg{width:60px;height:60px;border-radius:50%;background:var(--roxo);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800;flex:0 0 auto;}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:880px){.detail-grid{grid-template-columns:1fr;}}

/* ----------------------------- RESPONSIVO ---------------------------- */
@media (max-width:1024px){
    .stat-card{flex-basis:calc(50% - 8px);}
}
@media (max-width:920px){
    .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:var(--shadow-3);}
    .app-shell.sidebar-open .sidebar{transform:translateX(0);}
    .app-shell.sidebar-open .sidebar-overlay{display:block;}
    .icon-btn{display:grid;}
    .grid-2{grid-template-columns:1fr;}
    .topbar-clock{display:none;}
}
@media (max-width:680px){
    .content{padding:18px 16px;}
    .topbar{padding:12px 16px;}
    .stat-card{flex-basis:100%;}
    .topbar-greet{display:none;}
    .form-grid{grid-template-columns:1fr;}
    .user-chip__info{display:none;}
    .filters .field{min-width:0;flex:1 1 140px;}
    .modal__actions{flex-direction:column-reverse;}
    .modal__actions .btn{width:100%;}
}

/* ----------------------- FAB: acesso rápido (novo item) ------------- */
.fab-wrap{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;gap:12px;}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity var(--t),transform var(--t);}
.fab-wrap.is-open .fab-menu{opacity:1;transform:none;pointer-events:auto;}
.fab-item{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-2);border-radius:var(--r-pill);padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;transition:transform var(--t-fast),border-color var(--t-fast),color var(--t-fast);}
.fab-item:hover{transform:translateY(-1px);border-color:var(--roxo);color:var(--roxo);}
.fab-item__dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.fab-btn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;background:var(--roxo);color:#fff;box-shadow:0 12px 28px rgba(102,47,139,.42);display:grid;place-items:center;transition:transform var(--t),background var(--t);}
.fab-btn:hover{background:var(--roxo-deep);transform:translateY(-2px);}
.fab-btn svg{width:26px;height:26px;transition:transform var(--t);}
.fab-wrap.is-open .fab-btn{background:var(--roxo-deep);}
.fab-wrap.is-open .fab-btn svg{transform:rotate(45deg);}
@media (max-width:680px){
    .fab-wrap{right:16px;bottom:16px;}
    .fab-btn{width:52px;height:52px;}
}
@media print{.fab-wrap{display:none;}}

/* =====================================================================
   REVISÃO 07/2026 — componentes adicionados
   (menu agrupado, coluna de ações fixa, cards compactos, tags coloridas,
    notificações, seletor de data, ordenação, custos personalizados)
   ===================================================================== */

/* ---- Sidebar: grupos recolhíveis (Financeiro / Gestão) -------------- */
.nav-group{display:flex;flex-direction:column;gap:4px;}
.nav-group + .nav-group{margin-top:6px;}
.nav-group__title{
    display:flex;align-items:center;gap:8px;width:100%;
    padding:8px 14px 6px;border:0;background:transparent;cursor:pointer;
    color:var(--text-mute);font-family:inherit;font-size:10.5px;font-weight:800;
    text-transform:uppercase;letter-spacing:1.4px;text-align:left;
    transition:color var(--t-fast);
}
.nav-group__title:hover{color:var(--roxo);}
.nav-group__title .nav-group__chev{margin-left:auto;transition:transform var(--t-fast);opacity:.7;}
.nav-group.is-collapsed .nav-group__chev{transform:rotate(-90deg);}
.nav-group__items{display:flex;flex-direction:column;gap:4px;overflow:hidden;}
.nav-group.is-collapsed .nav-group__items{display:none;}

@media (min-width:921px){
    .app-shell.sidebar-collapsed .nav-group__title{justify-content:center;padding-left:0;padding-right:0;}
    .app-shell.sidebar-collapsed .nav-group__title span:not(.nav-group__chev),
    .app-shell.sidebar-collapsed .nav-group__chev{display:none;}
    .app-shell.sidebar-collapsed .nav-group__title{border-top:1px solid var(--hairline);margin-top:6px;padding-top:10px;height:1px;overflow:hidden;}
    .app-shell.sidebar-collapsed .nav-group.is-collapsed .nav-group__items{display:flex;} /* recolhido perde sentido no modo ícone */
}

/* ---- Coluna de ações fixa (reduz rolagem horizontal) ---------------- */
.table .col-actions{position:sticky;right:0;z-index:2;background:var(--surface);
    box-shadow:-10px 0 12px -10px rgba(25,24,25,.18);}
.table thead .col-actions{background:var(--surface-2);z-index:3;}
[data-theme="dark"] .table .col-actions{box-shadow:-10px 0 12px -10px rgba(0,0,0,.5);}
/* garante que a linha "zebra"/hover não vaze por cima do sticky */
.table tbody tr:hover .col-actions{background:var(--surface-2);}

/* espaço no rodapé para o FAB nunca cobrir a última linha/ações */
.content{padding-bottom:96px;}
.fab-wrap{pointer-events:none;} /* só o botão (e o menu ABERTO) capturam clique */
.fab-btn{pointer-events:auto;}
/* RODADA 1 · correção: com o menu fechado, os itens ficavam invisíveis
   porém clicáveis por cima da coluna Ações das tabelas — clicar em
   Editar/Visualizar perto do canto acabava abrindo "Nova despesa". */
.fab-menu{visibility:hidden;}
.fab-wrap.is-open .fab-menu{visibility:visible;}
.fab-wrap.is-open .fab-item{pointer-events:auto;}

/* ---- Cards de previsão compactos ------------------------------------ */
.stat-grid--compact{gap:12px;margin-bottom:18px;}
.stat-grid--compact .stat-card{padding:14px 16px;}
.stat-grid--compact .stat-card__value{font-size:22px;margin-top:2px;}
.stat-grid--compact .stat-card__label{font-size:11.5px;}
.stat-grid--compact .stat-card__sub{font-size:11px;margin-top:2px;}

/* ---- Tags coloridas por tipo de movimentação ------------------------ */
.tag--recorrente{background:var(--chip-pos-bg);color:var(--chip-pos-fg);}
.tag--avulso{background:var(--chip-info-bg);color:var(--chip-info-fg);}
.tag--fixa,.tag--fixas{background:var(--chip-info-bg);color:var(--chip-info-fg);}
.tag--variavel,.tag--variaveis{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.tag--cartao{background:var(--chip-danger-bg);color:var(--chip-danger-fg);}
.tag--comissao{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}
.tag--neutral{background:var(--surface-3);color:var(--text-2);}
.tag--dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85;margin-right:6px;}

/* ---- Notificações (sino no topbar) ----------------------------------
   RODADA 5 · O sino era discreto demais e o painel era uma lista sem
   ação. Agora ele muda de cor conforme a gravidade, pulsa quando há
   atraso, e o painel tem grupos, dispensar item a item e limpar tudo. */
.notif{position:relative;}
.notif__btn{position:relative;width:42px;height:42px;border-radius:var(--r-md);cursor:pointer;
    display:grid;place-items:center;color:var(--text-2);
    border:1px solid transparent;background:transparent;
    transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);}
.notif__btn:hover{background:var(--surface-2);color:var(--roxo);border-color:var(--hairline);}
.notif__btn:focus-visible{outline:2px solid var(--roxo);outline-offset:2px;}
.notif.is-open .notif__btn{background:var(--surface-2);color:var(--roxo);border-color:var(--hairline);}
.notif__bell{display:grid;place-items:center;}

/* Estado: em atraso (vermelho) · vence hoje (âmbar) · tudo em dia (neutro) */
.notif--late .notif__btn{color:var(--red);background:color-mix(in srgb, var(--red) 12%, transparent);border-color:color-mix(in srgb, var(--red) 30%, transparent);}
.notif--late .notif__btn:hover{background:color-mix(in srgb, var(--red) 18%, transparent);color:var(--red);}
.notif--today .notif__btn{color:var(--amber);background:color-mix(in srgb, var(--amber) 14%, transparent);border-color:color-mix(in srgb, var(--amber) 32%, transparent);}
.notif--today .notif__btn:hover{background:color-mix(in srgb, var(--amber) 20%, transparent);color:var(--amber);}

/* O sino balança de leve quando há conta atrasada, só na entrada */
.notif--late .notif__bell{animation:notifSwing 1.6s ease-in-out 2;transform-origin:top center;}
@keyframes notifSwing{
    0%,60%,100%{transform:rotate(0);}
    10%{transform:rotate(11deg);} 20%{transform:rotate(-9deg);}
    30%{transform:rotate(7deg);}  40%{transform:rotate(-5deg);} 50%{transform:rotate(2deg);}
}

.notif__badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--red);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1;
    border:2px solid var(--topbar-bg);box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent);}
.notif--today .notif__badge{background:var(--amber);color:#1b1300;}
.notif--late .notif__badge{animation:notifPulse 2.2s ease-out 3;}
@keyframes notifPulse{
    0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent);}
    70%{box-shadow:0 0 0 7px color-mix(in srgb, var(--red) 0%, transparent);}
    100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--red) 0%, transparent);}
}
@media (prefers-reduced-motion:reduce){
    .notif--late .notif__bell,.notif--late .notif__badge{animation:none;}
}

.notif__panel{position:absolute;top:calc(100% + 10px);right:0;width:378px;max-width:90vw;background:var(--surface);
    border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-2);z-index:60;
    opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast);
    max-height:72vh;overflow:auto;overscroll-behavior:contain;}
.notif.is-open .notif__panel{opacity:1;transform:none;pointer-events:auto;}

.notif__head{position:sticky;top:0;z-index:2;background:var(--surface);display:flex;align-items:center;
    justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--hairline);}
.notif__head h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text-2);margin:0;}
.notif__count{display:block;font-size:11.5px;color:var(--text-mute);margin-top:2px;}
.notif__clear{border:1px solid var(--hairline);background:var(--surface-2);color:var(--text-2);
    font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer;white-space:nowrap;
    transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);}
.notif__clear:hover{background:var(--roxo);color:var(--on-accent);border-color:var(--roxo);}

.notif__list{display:flex;flex-direction:column;}
.notif__group-label{display:flex;align-items:center;gap:7px;padding:9px 16px 6px;
    font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-mute);}
.notif__group-label span{display:grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;
    background:var(--surface-2);color:var(--text-2);font-size:10px;letter-spacing:0;}

.notif__item{display:flex;align-items:stretch;border-bottom:1px solid var(--hairline);
    transition:background var(--t-fast),opacity .16s ease,transform .16s ease;}
.notif__item:last-child{border-bottom:0;}
.notif__item:hover{background:var(--surface-2);}
.notif__item.is-going{opacity:0;transform:translateX(14px);}
.notif__go{flex:1 1 auto;display:flex;gap:11px;align-items:flex-start;padding:11px 6px 11px 16px;
    color:var(--text);text-decoration:none;min-width:0;}
.notif__dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:0 0 auto;background:var(--amber);}
.notif__dot--late{background:var(--red);}
.notif__dot--today{background:var(--amber);}
.notif__dot--soon{background:var(--teal);}
.notif__txt{min-width:0;display:flex;flex-direction:column;gap:2px;}
.notif__title{font-size:13.5px;font-weight:600;line-height:1.3;}
.notif__meta{font-size:11.5px;color:var(--text-mute);}
.notif__dismiss{flex:0 0 auto;width:34px;border:0;background:transparent;color:var(--text-mute);cursor:pointer;
    display:grid;place-items:center;border-radius:0 var(--r-md) var(--r-md) 0;
    transition:background var(--t-fast),color var(--t-fast);}
.notif__dismiss:hover{background:color-mix(in srgb, var(--red) 14%, transparent);color:var(--red);}
.notif__dismiss:focus-visible{outline:2px solid var(--roxo);outline-offset:-2px;}

.notif__foot{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--hairline);
    background:var(--surface-2);font-size:12px;}
.notif__foot a{color:var(--roxo);font-weight:700;}
.notif__foot a:hover{text-decoration:underline;}
.notif__more{color:var(--text-mute);margin-right:auto;}
.notif__note{padding:10px 16px;margin:0;font-size:11.5px;color:var(--text-mute);border-top:1px solid var(--hairline);}
.notif__note code{font-size:11px;}

.notif__empty{padding:28px 20px;text-align:center;color:var(--text-mute);font-size:12.5px;
    display:flex;flex-direction:column;align-items:center;gap:6px;}
.notif__empty svg{color:var(--teal);}
.notif__empty strong{color:var(--text-2);font-size:13.5px;font-weight:700;}

/* ---- Linha destacada ao chegar de uma notificação -------------------- */
.table tr.is-foco > td{background:color-mix(in srgb, var(--roxo) 13%, transparent);
    box-shadow:inset 3px 0 0 0 var(--roxo);animation:focoFade 1.1s ease-in-out 2;}
@keyframes focoFade{
    0%,100%{background:color-mix(in srgb, var(--roxo) 13%, transparent);}
    50%{background:color-mix(in srgb, var(--roxo) 26%, transparent);}
}
@media (prefers-reduced-motion:reduce){ .table tr.is-foco > td{animation:none;} }

/* ---- Seletor de data (calendário clicável) -------------------------- */
.dp-wrap{position:relative;}
.dp-trigger{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:26px;height:26px;border:0;background:transparent;
    cursor:pointer;color:var(--text-mute);display:grid;place-items:center;border-radius:var(--r-sm);}
.dp-trigger:hover{color:var(--roxo);background:var(--surface-2);}
.dp-wrap input[data-mask="date"]{padding-right:34px;}
.dp-pop{position:fixed;z-index:95;top:calc(100% + 6px);left:0;width:268px;background:var(--surface);
    border:1px solid var(--hairline-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:12px;
    display:none;}
.dp-pop.is-open{display:block;}
.dp-pop__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:6px;}
.dp-pop__nav{width:30px;height:30px;border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;color:var(--text-2);
    display:grid;place-items:center;font-size:16px;font-weight:800;}
.dp-pop__nav:hover{background:var(--surface-2);color:var(--roxo);}
.dp-pop__title{font-size:13px;font-weight:700;text-transform:capitalize;}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dp-dow{font-size:10.5px;font-weight:700;color:var(--text-mute);text-align:center;padding:4px 0;text-transform:uppercase;}
.dp-day{border:0;background:transparent;border-radius:var(--r-sm);cursor:pointer;height:32px;font-family:inherit;font-size:12.5px;
    color:var(--text);transition:background var(--t-fast),color var(--t-fast);}
.dp-day:hover{background:var(--surface-2);color:var(--roxo);}
.dp-day.is-empty{visibility:hidden;cursor:default;}
.dp-day.is-today{border:1.5px solid var(--roxo);font-weight:700;}
.dp-day.is-selected{background:var(--roxo);color:#fff;font-weight:700;}
.dp-pop__foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline);}
.dp-pop__foot button{border:0;background:transparent;color:var(--roxo);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);}
.dp-pop__foot button:hover{background:var(--surface-2);}

/* ---- Ordenação por coluna (cabeçalho clicável) ---------------------- */
.table th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
.table th.sortable:hover{color:var(--roxo);}
.table th.sortable .sort-ind{opacity:.35;margin-left:5px;font-size:10px;}
.table th.sortable.sort-asc .sort-ind,
.table th.sortable.sort-desc .sort-ind{opacity:1;color:var(--roxo);}

/* ---- Custos operacionais: linhas personalizáveis -------------------- */
.custom-costs{margin-top:6px;}
.custom-costs__list{display:flex;flex-direction:column;gap:8px;}
.cc-row{display:flex;gap:8px;align-items:center;}
.cc-row input{margin:0;}
.cc-row .cc-label{flex:1 1 auto;}
.cc-row .cc-value{flex:0 0 150px;}
.cc-row__del{flex:0 0 auto;width:38px;height:38px;border:1px solid var(--input-border);background:var(--surface);border-radius:var(--r-md);
    cursor:pointer;color:var(--text-mute);display:grid;place-items:center;}
.cc-row__del:hover{border-color:var(--red);color:var(--red);background:rgba(214,58,106,.06);}
.cc-add{margin-top:10px;background:transparent;border:1.5px dashed var(--input-border);color:var(--roxo);border-radius:var(--r-md);
    padding:9px 14px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.cc-add:hover{border-color:var(--roxo);background:var(--surface-2);}

/* ---- Documentação da calculadora ------------------------------------ */
.calc-doc{margin-top:16px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-lg);}
.calc-doc summary{cursor:pointer;padding:12px 16px;font-size:13px;font-weight:700;color:var(--text-2);list-style:none;display:flex;align-items:center;gap:8px;}
.calc-doc summary::-webkit-details-marker{display:none;}
.calc-doc summary::before{content:"i";width:18px;height:18px;border-radius:50%;background:var(--roxo);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;font-style:italic;}
.calc-doc[open] summary{border-bottom:1px solid var(--hairline);}
.calc-doc__body{padding:14px 16px;font-size:13px;color:var(--text-2);line-height:1.6;}
.calc-doc__body code{background:var(--surface-3);padding:1px 6px;border-radius:var(--r-sm);font-size:12.5px;}
.calc-doc__body ol{margin:8px 0 0;padding-left:18px;}
.calc-doc__body li{margin-bottom:4px;}

/* ---- Subtotais por grupo (despesas agrupadas) ----------------------- */
.table tr.group-head td{background:var(--surface-2);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.6px;
    color:var(--text-2);padding-top:14px;}
.table tr.group-sub td{border-top:1px dashed var(--hairline-strong);font-weight:700;}
.table tr.group-sub .col-amount{color:var(--text);}

/* ---- Calculadora: seletor de múltiplos custos ----------------------- */
.cost-picker{display:flex;flex-direction:column;gap:2px;max-height:190px;overflow:auto;border:1px solid var(--input-border);
    border-radius:var(--r-md);padding:6px;background:var(--input-bg);}
.cost-pick{display:flex;align-items:flex-start;gap:9px;padding:7px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:13.5px;color:var(--text);}
.cost-pick:hover{background:var(--surface-2);}
.cost-pick input{margin-top:2px;flex:0 0 auto;accent-color:var(--roxo);width:15px;height:15px;cursor:pointer;}

/* ---- Edição inline: dois cliques na célula ---------------------------
   O conteúdo da célula continua igual (texto, chip, valor). Dois cliques
   trocam a exibição por um editor do tipo certo (texto, dinheiro, data ou
   lista). A troca é feita só por classe de autor: nada aqui depende do
   atributo [hidden], que o CSS de autor sobrescreveria.                */
.ie{display:inline-flex;align-items:center;position:relative;max-width:100%;cursor:pointer;
    border-radius:var(--r-sm);transition:background var(--t-fast),box-shadow var(--t-fast);}
.ie:hover{background:var(--surface-2);box-shadow:0 0 0 3px var(--surface-2);}
.ie__v{display:inline-flex;align-items:center;gap:6px;min-width:12px;min-height:18px;}
.ie.is-editing{background:transparent;box-shadow:none;cursor:auto;}
.ie.is-editing .ie__v{display:none;}
.ie.is-saving{opacity:.5;pointer-events:none;}
.ie.is-saving::after{content:"";position:absolute;right:-15px;top:50%;width:11px;height:11px;margin-top:-6px;
    border:2px solid var(--hairline-strong);border-top-color:var(--roxo);border-radius:50%;animation:inlineSpin .6s linear infinite;}
.ie__input,.ie__select{font:inherit;font-size:13px;color:var(--text);background:var(--input-bg);
    border:1.5px solid var(--roxo);border-radius:var(--r-sm);padding:5px 8px;
    min-width:120px;max-width:320px;box-shadow:var(--shadow-1);outline:none;}
.ie__select{cursor:pointer;}
.ie__input:focus,.ie__select:focus{box-shadow:0 0 0 3px var(--lavanda-soft);}
.col-amount .ie{justify-content:flex-end;}
.col-amount .ie__input{min-width:104px;text-align:right;}
@media (max-width:680px){.ie__input,.ie__select{min-width:96px;max-width:52vw;}}
@keyframes inlineSpin{to{transform:rotate(360deg);}}

/* =====================================================================
   RODADA 1 — componentes adicionados
   (home limpa, legenda de esforço, seletor de ano no calendário,
    logs com auditoria completa, vínculo de cliente)
   ===================================================================== */

/* ---- Início: cabeçalho + atalhos ------------------------------------
   Cabeçalho alinhado à esquerda, como nas demais telas. Os atalhos ficam
   em três grupos, com cartões de altura fixa para a grade não desalinhar
   quando um título ocupa duas linhas. */
.home-head{padding:4px 0 2px;max-width:60ch;}
.home-head .eyebrow{display:block;margin-bottom:8px;}
.home-head__title{font-size:27px;line-height:1.15;font-weight:800;letter-spacing:-.025em;margin:0 0 6px;color:var(--text);}
.home-head__sub{font-size:14px;color:var(--muted);margin:0;}
.home-head__sub strong{color:var(--text-2);font-weight:700;}

.home-block{margin-top:30px;}
.home-block__label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute);margin:0 0 12px;}
.home-block__label::after{content:"";flex:1 1 auto;height:1px;background:var(--hairline);}

/* Grade: no máximo 5 colunas, para os cartões não virarem uma barra
   comprida em telas muito largas. Financeiro 5 · Planejamento 4 · Gestão 3. */
.home-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:640px){.home-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (min-width:1080px){.home-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (min-width:1480px){.home-grid{grid-template-columns:repeat(5,minmax(0,1fr));}}

.home-card{position:relative;display:flex;align-items:center;gap:13px;min-height:74px;padding:14px 16px;
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg,14px);
    color:var(--text);overflow:hidden;
    transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);}
/* filete de acento que cresce da borda esquerda no hover */
.home-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--roxo);
    transform:scaleY(0);transform-origin:center;transition:transform var(--t-fast);}
.home-card:hover{border-color:var(--roxo);box-shadow:var(--shadow-2);transform:translateY(-1px);}
.home-card:hover::before{transform:scaleY(1);}
.home-card:focus-visible{outline:2px solid var(--roxo);outline-offset:2px;}

.home-card__icon{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:var(--lavanda-soft);color:var(--roxo);
    transition:background var(--t-fast),color var(--t-fast);}
.home-card:hover .home-card__icon{background:var(--roxo);color:var(--on-accent);}

.home-card__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.home-card__title{font-size:14px;font-weight:700;line-height:1.25;color:var(--text);}
.home-card__sub{font-size:12px;line-height:1.3;color:var(--muted);}

@media (prefers-reduced-motion:reduce){
    .home-card,.home-card::before,.home-card__icon{transition:none;}
    .home-card:hover{transform:none;}
}

/* ---- Legenda do nível de esforço ------------------------------------ */
.effort-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md,10px);padding:10px 14px;margin:0 0 16px;font-size:12.5px;color:var(--muted);}
.effort-legend strong{color:var(--text);font-weight:700;}
.effort-legend .effort{margin-right:2px;}

/* ---- Datepicker: navegação de ano e seleção rápida ------------------ */
.dp-pop__head{gap:4px;}
.dp-pop__nav--year{font-size:15px;}
.dp-pop__selects{display:flex;gap:6px;flex:1 1 auto;justify-content:center;}
.dp-sel{border:1px solid var(--hairline);background:var(--surface);color:var(--text);border-radius:8px;padding:3px 6px;font-size:12.5px;font-weight:600;cursor:pointer;max-width:110px;}
.dp-sel:focus{outline:2px solid var(--roxo);outline-offset:1px;}

/* ---- Logs: auditoria completa --------------------------------------- */
.table-logs td{vertical-align:top;}
.log-rec{display:flex;flex-direction:column;gap:3px;min-width:200px;}
.log-rec__title{display:inline-flex;align-items:center;gap:6px;font-weight:600;}
.log-rec__meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;}
.log-diff{display:flex;flex-direction:column;gap:3px;font-size:12.5px;min-width:220px;}
.log-diff__row{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;}
.log-diff__field{font-weight:700;}
.log-diff__old{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;}
.log-diff__arrow{color:var(--muted);}
.log-diff details{font-size:12.5px;}
.log-diff summary{cursor:pointer;color:var(--roxo);font-weight:600;}
.log-diff__snapshot{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;color:var(--muted);}

/* ---- Vínculo de cliente na listagem --------------------------------- */
.link-mini{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:5px;color:var(--roxo);vertical-align:middle;margin-left:4px;}
.link-mini:hover{background:color-mix(in srgb, var(--roxo) 12%, transparent);}
.link-mini svg{width:12px;height:12px;}

/* =====================================================================
   RODADA 2 — motor financeiro
   (recorrências, grupos de despesa, subtotais, parcelamento, caixa)
   ===================================================================== */

/* ---- Badges de recorrência ------------------------------------------ */
.tag--pausada{background:var(--chip-warn-bg);color:var(--chip-warn-fg);}

/* ---- Linha de total do grupo / do período --------------------------- */
.group-total td{background:var(--surface-2);border-top:2px solid var(--hairline);font-size:13.5px;padding-top:10px;padding-bottom:10px;}
.group-head td.col-amount{font-weight:700;text-align:right;}

/* ---- Checkbox com rótulo ao lado ------------------------------------ */
.check-inline{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;cursor:pointer;}
.check-inline input{margin:0;}

/* ---- Prévia do parcelamento ----------------------------------------- */
#in_preview strong{color:var(--text);}

/* ---- Campos ocultos condicionalmente no modal de série -------------- */
#serieEditModal .field[hidden]{display:none;}

/* =====================================================================
   RODADA 3 — relatórios por assunto, cliente como centro, leads
   ===================================================================== */

/* ---- Abas de relatório ---------------------------------------------- */
.report-tabs{margin-bottom:14px;}
.report-tabs .qf-chip{font-weight:600;}

/* ---- Observação explicativa dentro de um relatório ------------------ */
.report-note{font-size:12.5px;color:var(--muted);background:var(--surface-2);border-left:3px solid var(--roxo);border-radius:0 8px 8px 0;padding:8px 12px;margin:0 0 12px;}
.report-note strong{color:var(--text);}

/* ---- Grid de relatório em coluna única ------------------------------ */
.report-grid--single{grid-template-columns:1fr;}

/* ---- Leads: totais compactos e agrupamento por mês ------------------ */
.mini-kpis--leads{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md,10px);padding:12px 16px;margin-top:14px;gap:10px 32px;}

/* ---- Texto oculto usado para copiar o resumo ------------------------ */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* =====================================================================
   RODADA 4 — módulos financeiros unificados, custos em blocos,
   recorrência visível e correção do fechamento de janelas
   ===================================================================== */

/* ---- Explicação do filtro rápido ativo ------------------------------
   Cada filtro olha para um recorte diferente (competência x data de
   vencimento). A linha abaixo diz, em uma frase, o que está na tela. */
.filter-hint{font-size:12.5px;color:var(--muted);margin:-4px 0 14px;padding-left:2px;}

/* ---- Recorrência: dados visíveis sem passar o mouse ------------------
   Antes essas informações viviam só no title do selo. Agora ficam numa
   segunda linha discreta abaixo da descrição do lançamento. */
.rec-note{font-size:11.5px;line-height:1.35;color:var(--muted);font-weight:500;margin-top:3px;}
.rec-note a{color:var(--roxo);font-weight:600;}
.rec-note a:hover{text-decoration:underline;}
.rec-note--off{opacity:.75;}

/* ---- Custos operacionais em blocos ----------------------------------
   Pessoas, Plataformas e Outros, cada um com o próprio subtotal, em vez
   de uma lista corrida de 16 campos misturados. */
.cost-block{border:1px solid var(--hairline);border-radius:var(--r-md,10px);background:var(--surface-2);padding:12px 14px 14px;}
.cost-block + .cost-block{margin-top:2px;}
.cost-block__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--hairline);}
.cost-block__label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);}
.cost-block__hint{font-size:12px;color:var(--muted);flex:1 1 auto;min-width:0;}
.cost-block__total{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;}
.cost-block__grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:720px){.cost-block__grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.custom-costs .cost-block__head{margin-bottom:10px;}

/* ---- Divisão do custo na listagem ----------------------------------- */
.cost-split{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;margin-top:4px;font-size:11px;font-weight:500;color:var(--muted);}
.cost-split strong{color:var(--text-2);font-weight:700;}

/* --------------------- FILTRO AUTOMÁTICO + CONFIGURAÇÕES ------------- */
/* barra de filtros enquanto o filtro está sendo aplicado */
.filters.is-filtering{opacity:.55;pointer-events:none;transition:opacity var(--t);}

/* tela de configurações */
.cfg-inline{display:inline-flex;margin:0;vertical-align:middle;}
.cfg-order{white-space:nowrap;display:flex;gap:4px;align-items:center;}
.cfg-order .row-action:disabled{opacity:.3;cursor:default;pointer-events:none;}
.table tr.is-off .cell-strong{color:var(--text-mute);text-decoration:line-through;text-decoration-thickness:1px;}
.cfg-help{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
.cfg-help li{font-size:12.5px;color:var(--text-2);line-height:1.5;}
.cfg-help strong{color:var(--text);}