/* ==========================================================================
   Sistema Financeiro Proximo Passo
   Tema claro - redesign UX
   ========================================================================== */

:root {
    --bg:          #f4f5f8;
    --surface:     #ffffff;
    --surface-2:   #fbfbfd;
    --border:      #e7e9ef;
    --border-2:    #dde0e8;
    --text:        #1c1e26;
    --text-muted:  #71778a;
    --text-soft:   #9aa0b0;

    --primary:     #6c5ce7;
    --primary-2:   #5a4bd1;
    --primary-soft:#efedfb;

    --success:     #1f9d6b;
    --success-soft:#e7f6ef;
    --danger:      #d64c5e;
    --danger-soft: #fcecee;
    --warning:     #d98324;
    --warning-soft:#fbf1e0;

    --radius:      14px;
    --radius-sm:   9px;
    --shadow:      0 1px 2px rgba(20,23,40,0.04), 0 4px 16px rgba(20,23,40,0.04);
    --shadow-sm:   0 1px 2px rgba(20,23,40,0.05);
    --serif:       Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }

/* -------- Guest layout (login) -------- */
.guest {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}
.guest-wrap { width: 100%; max-width: 400px; padding: 24px; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
}
.login-title { margin: 0 0 4px; font-size: 24px; font-weight: 600; font-family: var(--serif); }
.login-sub { margin: 0 0 24px; color: var(--text-muted); font-size: 13px; }
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.login-form input {
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* -------- Buttons -------- */
.btn {
    margin-top: 20px;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s, transform .05s, border-color .15s;
    text-decoration: none;
    display: inline-block;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-2); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-soft); }
.btn-small { padding: 7px 13px; font-size: 12.5px; margin-top: 0; }
.btn-link {
    background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 12.5px; padding: 4px 8px; border-radius: 6px;
}
.btn-link:hover { color: var(--primary); }

/* -------- App layout -------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 232px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand { padding: 0 24px 20px; }
.sidebar-brand strong { display: block; font-size: 17px; letter-spacing: 0.2px; font-family: var(--serif); font-weight: 600; }
.sidebar-brand span {
    display: block; font-size: 11px; color: var(--text-soft);
    text-transform: uppercase; letter-spacing: 1.2px; margin-top: 3px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; }
.sidebar-nav a {
    padding: 9px 14px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
    transition: background .12s, color .12s;
}
.sidebar-nav a:hover { color: var(--text); background: var(--surface-2); }
.sidebar-nav a.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }
.sidebar-user {
    margin-top: auto;
    padding: 16px 24px 0;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-muted);
}
.sidebar-user form { margin: 0; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { padding: 26px 36px 8px; }
.topbar h1 { margin: 0; font-size: 26px; font-weight: 600; font-family: var(--serif); letter-spacing: -0.2px; }
.content { padding: 16px 36px 48px; }

/* -------- Section titles -------- */
.section-title { margin: 0 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.1px; }
.mt-4 { margin-top: 5px; } .mt-8 { margin-top: 9px; }
.mt-16 { margin-top: 18px; } .mt-24 { margin-top: 26px; } .mt-32 { margin-top: 34px; }
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.positive { color: var(--success); }
.negative { color: var(--danger); }
.warn { color: var(--warning); }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* -------- Cards -------- */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 18px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    box-shadow: var(--shadow-sm);
}
.card-header {
    display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px;
    font-size: 11.5px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 500;
}
.card-header .conta-tipo { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; color: var(--text-soft); }
.card-header .conta-nome {
    color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600;
}
.card-value { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; color: var(--text); }
.card-value.positive { color: var(--success); }
.card-value.negative { color: var(--danger); }
.card-value.muted { color: var(--text-soft); }
.card-value.warn { color: var(--warning); }
.card-meta { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); flex-wrap: wrap; }
.card-meta .up { color: var(--success); }
.card-meta .down { color: var(--danger); }

.card-highlight {
    background: var(--success-soft);
    border-color: #c7ebd9;
}
.card-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.card-sub strong { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; }

.empty-state {
    margin-top: 24px;
    padding: 28px;
    background: var(--surface);
    border: 1px dashed var(--border-2);
    border-radius: var(--radius);
    color: var(--text-muted);
    text-align: center;
    font-size: 13.5px;
}

/* -------- Flash messages -------- */
.flash {
    padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px;
    font-size: 13.5px; border: 1px solid transparent;
}
.flash-error   { background: var(--danger-soft);  border-color: #f3c9cf; color: #ad3346; }
.flash-success { background: var(--success-soft); border-color: #c7ebd9; color: #15724d; }
.flash-info    { background: var(--primary-soft); border-color: #d8d2f7; color: #4b3fb0; }
.flash-warn    { background: var(--warning-soft); border-color: #f0d8af; color: #95591a; }

/* -------- Filters bar -------- */
.filters-bar {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.filters-bar .filter { display: flex; flex-direction: column; }
.filters-bar .filter label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; }
.filters-bar input[type="date"], .filters-bar input[type="month"], .filters-bar input[type="text"], .filters-bar select {
    background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
    border-radius: var(--radius-sm); padding: 8px 11px; font-size: 13px;
}
.filters-bar input:focus, .filters-bar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.filter-check label { flex-direction: row; align-items: center; display: flex; gap: 6px; color: var(--text); font-size: 13px; text-transform: none; letter-spacing: 0; }
.filters-bar .btn { margin-top: 0; }

/* -------- Data tables -------- */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table thead th {
    background: var(--surface-2); text-align: left; padding: 12px 14px;
    border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted);
}
.data-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tr.is-transfer td { opacity: 0.55; }
.data-table td.arrow, .data-table th.arrow { color: var(--text-soft); text-align: center; font-weight: bold; }
.data-table .empty-row { text-align: center; color: var(--text-muted); padding: 34px; }
.actions-cell form { margin-left: 6px; display: inline; }

/* -------- Badges -------- */
.badge {
    display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10px;
    font-weight: 700; letter-spacing: 0.5px; margin-right: 6px; text-decoration: none;
}
.badge-asaas    { background: #e0f3fb; color: #1183ab; }
.badge-inter    { background: #ffeede; color: #c96a18; }
.badge-transfer { background: #eceef3; color: #6b7488; }
.badge-warn     { background: var(--warning-soft); color: #95591a; }
.badge-rec      { background: var(--success-soft); color: #15724d; }

/* Category pill */
.category-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; border: 1px solid transparent; }

/* Inline category select */
.inline-cat-select {
    background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text);
    padding: 5px 9px; border-radius: 20px; font-size: 11.5px; cursor: pointer; max-width: 210px;
}
.inline-cat-select:focus { outline: none; border-color: var(--primary); }

/* Tornar recorrente toggle */
.btn-rec-toggle {
    background: transparent; border: 1px dashed var(--border-2); color: var(--text-muted);
    padding: 4px 10px; border-radius: 20px; font-size: 10.5px; cursor: pointer;
}
.btn-rec-toggle:hover { border-color: var(--primary); color: var(--primary); }

/* Bulk bar */
.bulk-bar {
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--warning);
    border-radius: var(--radius); padding: 14px 18px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 12px; font-size: 13px; box-shadow: var(--shadow-sm);
}
.bulk-bar select { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 7px 11px; border-radius: var(--radius-sm); font-size: 13px; }
.bulk-bar .btn { margin-top: 0; }

/* Forms */
.form-label { display: block; font-size: 11px; color: var(--text-muted); margin: 14px 0 5px; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input { background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13.5px; width: 100%; }
.form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cond-row .form-input { width: auto; }

/* Progress bar */
.progress-bar { width: 100%; height: 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--success)); border-radius: 6px; transition: width .3s; }

/* Movement link */
.mov-link { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--border-2); font-weight: 500; }
.mov-link:hover { color: var(--primary); border-bottom-color: var(--primary); }

.sugestoes-table .arrow { font-size: 16px; }

/* Category filter pills */
.cat-pills-row { flex-basis: 100%; margin-top: 4px; }
.cat-pills-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 8px; }
.cat-pills-label .muted { text-transform: none; letter-spacing: 0; }
.cat-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-pill {
    border: 1px solid var(--border-2); background: var(--surface); color: var(--text-muted);
    padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer; transition: all .12s;
}
.cat-pill:hover { border-color: var(--text-soft); }
.cat-pill-in  { background: var(--success-soft); border-color: #aedec8; color: #15724d; font-weight: 600; }
.cat-pill-out { background: var(--danger-soft); border-color: #f0c2c8; color: #ad3346; font-weight: 600; text-decoration: line-through; }

/* ==========================================================================
   Painel de topo: saldo, fluxo de caixa e previsto x realizado
   ========================================================================== */
.topo-filtro { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); }
.topo-filtro label { text-transform: uppercase; letter-spacing: 0.5px; }
.topo-filtro input[type="month"] {
    background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
    border-radius: var(--radius-sm); padding: 7px 11px; font-size: 13px;
}
.topo-filtro input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.painel-topo { display: flex; flex-direction: column; gap: 18px; }

/* Card 1 - saldo */
.card-balance {
    background: linear-gradient(135deg, #12352e 0%, #1b4b40 100%);
    border-color: #12352e; color: #eafaf3;
}
.card-balance .card-header span { color: #9fd7c4; }
.card-balance .balance-big { color: #ffffff; font-size: 34px; }
.balance-split { display: flex; gap: 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.14); }
.bs-item { display: flex; flex-direction: column; gap: 4px; }
.bs-item strong { font-size: 17px; color: #ffffff; font-weight: 700; letter-spacing: -0.3px; }
.bs-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; width: fit-content; }
.bs-tag.bs-inter { background: #ff8a3d; color: #3a1e05; }
.bs-tag.bs-asaas { background: #3fbce0; color: #052733; }
.bs-tag.bs-asaas { background: #3fbce0; color: #052733; }

/* Linha grafico + laterais */
.topo-row { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(240px, 1fr); gap: 18px; align-items: stretch; }
.topo-side { display: flex; flex-direction: column; gap: 18px; }
.side-card { display: flex; flex-direction: column; justify-content: center; }
.side-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.side-icon {
    width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 17px; font-weight: 700; flex-shrink: 0;
}
.side-icon-in { background: var(--success-soft); color: var(--success); }
.side-icon-out { background: var(--danger-soft); color: var(--danger); }
.side-titlewrap { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.side-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
.side-period { font-size: 10.5px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.5px; }
.side-pct { font-size: 12px; font-weight: 700; }

/* Card 2 - grafico */
.chart-card { display: flex; flex-direction: column; }
.chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chart-title { font-size: 13.5px; font-weight: 600; }
.chart-legend { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-muted); }
.lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.lg-dot.lg-in { background: var(--success); }
.lg-dot.lg-out { background: var(--danger); }
.cashflow-chart { position: relative; width: 100%; min-height: 288px; margin-top: 6px; }
.cashflow-chart svg { display: block; width: 100%; height: 288px; }
.cf-seg { cursor: pointer; transition: opacity .12s; }
.cf-seg:hover { opacity: 0.82; }
.cf-axis { stroke: var(--border-2); stroke-width: 1.5; }
.cf-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.cf-axislabel { fill: var(--text-soft); font-size: 10.5px; font-weight: 500; }
.cf-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 90px 0; }

/* Tooltip do grafico */
.cf-tip {
    position: absolute; pointer-events: none; z-index: 20;
    background: #1c1e26; color: #fff; border-radius: 8px; padding: 8px 11px;
    font-size: 12px; line-height: 1.5; box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    opacity: 0; transform: translate(-50%, -8px); transition: opacity .1s; white-space: nowrap; max-width: 260px;
}
.cf-tip.show { opacity: 1; }
.cf-tip .cf-tip-cat { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.cf-tip .cf-tip-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cf-tip .cf-tip-val { color: #cfe9dd; }
.cf-tip .cf-tip-pct { color: #9aa0b0; }

@media (max-width: 900px) {
    .topo-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Painel de topo v2 - estilo Sequence (redesign)
   ========================================================================== */
.dash-top { display: flex; flex-direction: column; gap: 18px; }

/* ---- Total Balance ---- */
.tb-card {
    position: relative; overflow: hidden;
    background: linear-gradient(120deg, #123f37 0%, #0e332d 58%, #0b2a25 100%);
    border-radius: var(--radius); padding: 24px 28px; color: #eafaf3;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    box-shadow: var(--shadow);
}
.tb-card::after {
    content: ''; position: absolute; right: -60px; top: -50px; width: 360px; height: 260px; pointer-events: none;
    background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,0.05) 0 38%, transparent 39%),
        radial-gradient(circle at 78% 78%, rgba(46,203,134,0.10) 0 26%, transparent 27%);
}
.tb-left { position: relative; z-index: 1; }
.tb-label { font-size: 12.5px; color: #8fc7b6; letter-spacing: .3px; }
.tb-value { font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -0.8px; margin-top: 6px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tb-delta { font-size: 13px; font-weight: 600; }
.tb-delta.up { color: #34d888; }
.tb-delta.down { color: #ff8d8d; }
.tb-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-chip { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 9px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 118px; }
.tb-chip strong { color: #fff; font-size: 15px; font-weight: 700; }
.tb-chip-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 20px; width: fit-content; }
.tb-chip-tag.inter { background: #ff8a3d; color: #3a1e05; }
.tb-chip-tag.asaas { background: #3fbce0; color: #052733; }
.tb-period input[type=month] { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); color: #eafaf3; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; color-scheme: dark; }

/* ---- Cash Flow card (grafico + income/expense) ---- */
.cf-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: minmax(0,1fr) 268px; overflow: hidden; }
.cf-main { padding: 20px 22px; min-width: 0; }
.cf-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.cf-heading { font-size: 14.5px; font-weight: 700; }
.cf-period { font-size: 12px; color: var(--text-muted); }
.cf-side { border-left: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.io-box { display: flex; gap: 13px; align-items: flex-start; }
.io-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; flex-shrink: 0; }
.io-in { background: #123f37; color: #fff; }
.io-out { background: #2ecb86; color: #06251a; }
.io-body { min-width: 0; }
.io-label { font-size: 12px; color: var(--text-muted); }
.io-value { font-size: 23px; font-weight: 700; letter-spacing: -0.5px; margin: 3px 0; color: var(--text); }
.io-sub { font-size: 11.5px; color: var(--text-soft); }
.io-pct.up { color: var(--success); font-weight: 600; }
.io-pct.down { color: var(--danger); font-weight: 600; }
.io-divider { height: 1px; background: var(--border); margin: 18px 0; }

/* ---- Grafico (barras solidas teal/green) ---- */
.cashflow-chart { position: relative; width: 100%; min-height: 360px; margin-top: 10px; }
.cashflow-chart svg { display: block; width: 100%; height: 360px; }
.cf-seg { cursor: pointer; transition: opacity .12s; }
/* destaque: ao passar o mouse, escurece as outras barras e realca a atual */
.cashflow-chart svg.cf-dimming .cf-seg { opacity: 0.26; }
.cashflow-chart svg.cf-dimming .cf-seg.cf-hl { opacity: 1; stroke: rgba(16,35,30,0.35); stroke-width: 1; }
.cf-axis { stroke: var(--border-2); stroke-width: 1.5; }
.cf-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.cf-axislabel { fill: var(--text-soft); font-size: 10.5px; font-weight: 500; }
.cf-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 90px 0; }

/* Tooltip (com detalhamento por categoria) */
.cf-tip { position: absolute; pointer-events: none; z-index: 20; background: #10231e; color: #fff; border-radius: 9px; padding: 9px 11px; font-size: 11.5px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,0.28); opacity: 0; transform: none; transition: opacity .1s; min-width: 170px; max-width: 280px; }
.cf-tip.show { opacity: 1; }
.cf-tip-head { font-size: 10.5px; color: #8fc7b6; text-transform: uppercase; letter-spacing: .5px; }
.cf-tip-total { font-weight: 700; font-size: 14px; margin: 2px 0 6px; }
.cf-tip-total.up { color: #4fe0a0; } .cf-tip-total.down { color: #7fe8b8; }
.cf-tip-row { display: flex; align-items: center; gap: 6px; color: #d7e7e0; padding: 1px 0; }
.cf-tip-row .cf-tip-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cf-tip-row .cf-tip-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-tip-row .cf-tip-vl { color: #9fb8ad; }

@media (max-width: 860px) {
    .cf-card { grid-template-columns: 1fr; }
    .cf-side { border-left: none; border-top: 1px solid var(--border); }
    .tb-card { flex-direction: column; align-items: flex-start; }
}

/* Linha "hoje" e legenda realizado/previsto */
.cf-today { stroke: var(--text-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.cf-todaylabel { fill: var(--text-soft); font-size: 9.5px; font-weight: 700; }
.cf-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.cf-legend .cfl { display: inline-block; width: 13px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.cf-legend .cfl-real { background: #15544b; }
.cf-legend .cfl-prev { background: repeating-linear-gradient(45deg, #dceee7 0 3px, #4bb493 3px 4px); border: 1px solid #7cc4ac; }

/* Atraso (recorrencia vencida a receber) */
.cf-legend .cfl-late { background: repeating-linear-gradient(45deg, #fbe3e3 0 3px, #e5574f 3px 4px); border: 1px solid #e5574f; }
.io-atraso { color: var(--danger) !important; font-weight: 600; margin-top: 3px; display: block; }
.cf-tip-late { color: #ff9d9d; font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; }

/* Badge de recorrencia identificada automaticamente (valor + cliente) */
.badge-rec-auto { background: var(--success-soft); color: #15724d; border: 1px dashed #7cc4ac; text-decoration: none; }
.badge-rec-auto:hover { border-color: #15724d; }