:root, :root[data-theme="dark"] {
    --bg: #0b0e14;
    --bg-elev: #141a24;
    --card: #161d29;
    --card-2: #1b2433;
    --border: #263041;
    --text: #eef2f8;
    --muted: #8b97aa;
    --primary: #5b8cff;
    --primary-2: #8a5bff;
    --primary-hover: #4a7bf0;
    --green: #34d399;
    --amber: #fbbf24;
    --red: #f87171;
    --radius: 16px;
    --shadow: 0 16px 40px rgba(0,0,0,.45);
}

:root[data-theme="light"] {
    --bg: #f3f6fc;
    --bg-elev: #ffffff;
    --card: #ffffff;
    --card-2: #eef2f9;
    --border: #dce3ef;
    --text: #1b2433;
    --muted: #64748b;
    --primary: #3f6fe0;
    --primary-2: #7b4ee0;
    --primary-hover: #2f5fd0;
    --green: #0f9d6b;
    --amber: #c97a05;
    --red: #dc2626;
    --shadow: 0 12px 30px rgba(30,41,59,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- ÍCONES ---------- */
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex-shrink: 0; }
.ic-lg { width: 1.8rem; height: 1.8rem; }
.btn .ic { width: 1em; height: 1em; vertical-align: -0.12em; }
h2 .ic { color: var(--primary); }
.muted { color: var(--muted); font-size: .85rem; }
.center { text-align: center; }
.error { color: var(--red); font-size: .85rem; margin-top: .6rem; text-align: center; }

/* ---------- ANIMAÇÕES ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity:1; transform:none;} }
@keyframes pop { from { opacity:0; transform: scale(.96);} to { opacity:1; transform:none;} }
@keyframes shimmer { 0%{background-position:-400px 0;} 100%{background-position:400px 0;} }
@keyframes spin { to { transform: rotate(360deg);} }

/* ---------- AUTH ---------- */
.auth-wrap {
    min-height: 100vh; display: grid; place-items: center; padding: 1rem;
    background:
        radial-gradient(900px 500px at 20% -10%, rgba(91,140,255,.18), transparent),
        radial-gradient(900px 500px at 90% 10%, rgba(138,91,255,.16), transparent),
        var(--bg);
}
.auth-card {
    width: 100%; max-width: 400px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 2.2rem; box-shadow: var(--shadow); animation: pop .35s ease;
}
.brand { display: flex; align-items: center; gap: .6rem; justify-content: center; }
.brand .logo {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: 1.7rem;
}
.brand h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.brand h1 span, .brand strong span { color: var(--primary); }
.brand.small strong { font-size: 1.05rem; font-weight: 800; }
.brand.small .logo { font-size: 1.2rem; }

.tabs { display: flex; gap: .5rem; margin: 1.6rem 0 1.2rem; background: var(--bg-elev); padding: .3rem; border-radius: 10px; }
.tab { flex: 1; padding: .6rem; cursor: pointer; background: transparent; color: var(--muted); border: none; border-radius: 8px; font-size: .9rem; font-weight: 600; transition: .2s; }
.tab.active { background: var(--card-2); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.25); }

.form { display: flex; flex-direction: column; gap: 1rem; }
.form label { display: flex; flex-direction: column; gap: .4rem; font-size: .82rem; color: var(--muted); font-weight: 500; }
input, select {
    background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
    padding: .7rem .8rem; border-radius: 10px; font-size: .95rem; outline: none;
    font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,140,255,.18); }
input::placeholder { color: #56607a; }

/* ---------- BOTÕES ---------- */
.btn { cursor: pointer; border: none; border-radius: 10px; padding: .6rem 1rem; font-size: .9rem; font-weight: 600; font-family: inherit; transition: transform .12s, background .2s, color .2s; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 6px 18px rgba(91,140,255,.3); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.btn.ghost:hover { color: var(--text); border-color: var(--primary); }
.btn.sm { padding: .4rem .75rem; font-size: .8rem; }
.btn.xs { padding: .3rem .6rem; font-size: .74rem; border-radius: 8px; }
.btn.ghost.danger:hover { border-color: var(--red); color: var(--red); }
.btn.block { width: 100%; }
.spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

/* ---------- TOPBAR ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.5rem; background: rgba(20,26,36,.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.topbar-right { display: flex; align-items: center; gap: .8rem; }
.company-picker { display: flex; gap: .3rem; align-items: center; }
.company-select { min-width: 150px; padding: .45rem .6rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; }

/* ---------- DASHBOARD GRID ---------- */
.dash { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; padding: 1.5rem; max-width: 1180px; margin: 0 auto; }
.hero { grid-column: 1 / -1; display: grid; grid-template-columns: 320px 1fr; gap: 1.1rem; }
.span-2 { grid-column: 1 / -1; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; animation: fadeUp .4s ease both; }
.card.glass { background: linear-gradient(160deg, var(--card-2), var(--card)); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card h2 { font-size: 1.05rem; font-weight: 700; }

/* HERO SCORE */
.hero-score { display: flex; align-items: center; gap: 1.2rem; }
.gauge { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.gauge svg { transform: rotate(-90deg); width: 120px; height: 120px; }
.gauge-bg { fill: none; stroke: var(--bg-elev); stroke-width: 12; }
.gauge-fg { fill: none; stroke: url(#g); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1s ease, stroke .4s; }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-center span { font-size: 1.9rem; font-weight: 800; }
.gauge-center small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-score-info { display: flex; flex-direction: column; gap: .6rem; }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.stat-card { display: flex; flex-direction: column; gap: .25rem; position: relative; overflow: hidden; }
.stat-ico { font-size: 1.3rem; }
.stat-label { color: var(--muted); font-size: .78rem; }
.stat-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }

/* PILL */
.pill { font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; background: var(--border); color: var(--muted); font-weight: 600; width: fit-content; text-transform: capitalize; }
.pill.bom, .pill.saudavel, .pill.excelente { background: rgba(52,211,153,.15); color: var(--green); }
.pill.alerta, .pill.medio, .pill.atencao { background: rgba(251,191,36,.15); color: var(--amber); }
.pill.critico, .pill.ruim, .pill.baixo { background: rgba(248,113,113,.15); color: var(--red); }

/* ---------- LISTAS ---------- */
.list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.list li { display: flex; align-items: center; justify-content: space-between; padding: .7rem .85rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; font-size: .9rem; animation: fadeUp .3s ease both; }
.list .name { font-weight: 600; }
.list .sub { color: var(--muted); font-size: .76rem; }
.list .value { font-weight: 700; }
.list .value.pos { color: var(--green); }
.list .empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--muted); text-align: center; padding: 1.6rem 1rem; background: none; border: 1px dashed var(--border); }
.list .empty .ico { font-size: 1.8rem; opacity: .7; }

/* BARRAS (crédito / metas) */
.bars { gap: 1rem; }
.bar-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: .8rem .9rem; animation: fadeUp .3s ease both; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.bar-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; gap: .5rem; }
.bar-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .8s ease; }
.bar-fill.warn { background: linear-gradient(90deg, var(--amber), #f59e0b); }
.bar-fill.danger { background: linear-gradient(90deg, var(--red), #ef4444); }
.bar-fill.good { background: linear-gradient(90deg, var(--green), #10b981); }

/* ---------- GRÁFICO DE BARRAS (entradas) ---------- */
.chart { display: flex; align-items: flex-end; gap: .5rem; height: 170px; padding-top: .5rem; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 100%; justify-content: flex-end; }
.chart .col .bar { width: 100%; max-width: 42px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--primary), var(--primary-2)); transition: height .7s ease; min-height: 4px; }
.chart .col .bar:hover { filter: brightness(1.15); }
.chart .col .lbl { font-size: .68rem; color: var(--muted); white-space: nowrap; }
.chart-empty { display: grid; place-content: center; height: 170px; color: var(--muted); gap: .4rem; text-align: center; }

/* ---------- IMPORTAR EXTRATO ---------- */
.import-card code { background: var(--bg-elev); padding: .1rem .4rem; border-radius: 5px; font-size: .82rem; color: var(--primary); }
.import-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.import-row select { flex: 1; min-width: 160px; }
.import-row input[type="file"] { flex: 2; min-width: 180px; color: var(--muted); font-size: .85rem; }
.import-result { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.import-summary { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.import-errors { margin-top: .7rem; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.import-errors li { font-size: .78rem; color: var(--amber); }
.pill.good { background: rgba(52,211,153,.15); color: var(--green); }

/* ---------- SINO DE NOTIFICAÇÕES ---------- */
@keyframes bellring {
    0%,100% { transform: rotate(0); }
    15% { transform: rotate(-18deg); }
    30% { transform: rotate(15deg); }
    45% { transform: rotate(-12deg); }
    60% { transform: rotate(9deg); }
    75% { transform: rotate(-5deg); }
}
#bell-btn.ring { animation: bellring .7s ease; box-shadow: 0 0 0 3px rgba(248,113,113,.35); }
.bell-wrap { position: relative; }
#bell-btn { position: relative; font-size: 1rem; }
.bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: .68rem; font-weight: 700; display: grid; place-items: center; color: #fff; }
.bell-badge.danger { background: var(--red); }
.bell-badge.warn { background: var(--amber); color: #1a1a1a; }
.bell-panel { position: absolute; top: 120%; right: 0; width: 340px; max-height: 70vh; overflow-y: auto; background: var(--card-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); z-index: 90; padding: .6rem; animation: pop .18s ease; }
.bell-head { font-size: .78rem; color: var(--muted); padding: .3rem .5rem .6rem; font-weight: 600; }
.bell-empty { padding: 1.4rem 1rem; text-align: center; color: var(--muted); font-size: .88rem; }
.bell-item { width: 100%; text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .45rem; cursor: pointer; color: var(--text); font-family: inherit; }
.bell-item:hover { border-color: var(--primary); }
.bell-item.danger { border-left-color: var(--red); }
.bell-item.warn { border-left-color: var(--amber); }
.bell-item-top { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: .85rem; }
.bell-item-sub { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .76rem; margin-top: .25rem; }

/* ---------- ALERTA DE VENCIMENTO ---------- */
.due-alert { padding: .65rem .9rem; border-radius: 10px; font-size: .85rem; margin-bottom: .8rem; border: 1px solid; }
.due-alert.warn { background: rgba(251,191,36,.12); border-color: var(--amber); color: var(--amber); }
.due-alert.danger { background: rgba(248,113,113,.12); border-color: var(--red); color: var(--red); }

/* ---------- MELHOR DIA PARA PAGAR ---------- */
.bpd-top { display: flex; gap: 1.2rem; align-items: center; }
.bpd-day { background: linear-gradient(160deg, rgba(91,140,255,.18), var(--bg-elev)); border: 1px solid var(--primary); border-radius: 14px; padding: 1rem 1.4rem; text-align: center; flex-shrink: 0; }
.bpd-num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; }
.bpd-just p { margin-bottom: .35rem; font-size: .9rem; }
.bpd-cards { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 600px) { .bpd-top { flex-direction: column; align-items: stretch; } }

/* ---------- IMPOSTO DE RENDA ---------- */
.tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.tax-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .25rem; }
.tax-stat .stat-value { font-size: 1.25rem; }
.tax-stat.highlight { border-color: var(--primary); background: linear-gradient(160deg, rgba(91,140,255,.12), var(--bg-elev)); }
.tax-months { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.tax-month { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: .45rem .7rem; display: flex; flex-direction: column; gap: .15rem; min-width: 80px; }
.tax-month .lbl { font-size: .72rem; color: var(--muted); }
.tax-month .val { font-weight: 700; font-size: .82rem; }
.tax-note { margin-top: 1rem; font-size: .78rem; }

/* ---------- TABELA DE DECLARAÇÕES ---------- */
.dec-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.dec-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .76rem; padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
.dec-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.dec-table tbody tr:hover { background: var(--bg-elev); }

/* ---------- COMPARTILHAR DOCUMENTO ---------- */
.share-box { display: flex; gap: 1rem; align-items: center; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 11px; padding: 1rem; }
.share-qr { width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 6px; flex-shrink: 0; }
.share-link { display: flex; flex-direction: column; gap: .5rem; flex: 1; min-width: 0; }
.share-link input { width: 100%; font-size: .8rem; }
@media (max-width: 520px) { .share-box { flex-direction: column; } }
@media (max-width: 780px) { .tax-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- SKELETON ---------- */
.skeleton { background: linear-gradient(90deg, var(--bg-elev) 25%, #1f2937 37%, var(--bg-elev) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 10px; height: 46px; }

/* ---------- MODAL ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(5,8,13,.7); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 60; padding: 1rem; animation: pop .2s ease; }
.modal { width: 100%; max-width: 400px; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.modal-head h3 { font-size: 1.15rem; font-weight: 700; }

/* ---------- TOAST ---------- */
.toast { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); background: var(--card-2); border: 1px solid var(--border); padding: .85rem 1.3rem; border-radius: 12px; font-size: .9rem; box-shadow: var(--shadow); z-index: 80; animation: fadeUp .25s ease; }
.toast.err { border-color: var(--red); color: var(--red); }
.toast.ok { border-color: var(--green); }

/* ---------- FLUXO DE CAIXA ---------- */
.cf-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: .9rem; }
.cf-legend .dot, .cal-totais .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; margin-right: .3rem; }
.dot.in { background: var(--green); }
.dot.out { background: var(--red); }
.cf-chart { display: flex; align-items: flex-end; gap: .5rem; min-height: 160px; padding: .4rem 0; overflow-x: auto; }
.cf-col { flex: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.cf-col.proj { opacity: .72; }
.cf-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; width: 100%; justify-content: center; }
.cf-bar { width: 38%; max-width: 22px; border-radius: 5px 5px 0 0; transition: height .35s ease; min-height: 2px; }
.cf-bar.in { background: linear-gradient(180deg, var(--green), #1fae84); }
.cf-bar.out { background: linear-gradient(180deg, var(--red), #d65555); }
.cf-col.proj .cf-bar { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 4px, transparent 4px 8px); }
.cf-res { font-size: .72rem; font-weight: 700; }
.cf-res.pos { color: var(--green); }
.cf-res.neg { color: var(--red); }
.cf-col .lbl { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.cf-foot { display: flex; gap: 2rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.cf-foot .sub { display: block; font-size: .72rem; color: var(--muted); }
.cf-foot b { font-size: 1.1rem; }
.pos { color: var(--green); } .neg { color: var(--red); }

/* ---------- CALENDÁRIO ---------- */
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-nav #cal-label { min-width: 120px; text-align: center; }
.cal-totais { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-bottom: .8rem; }
.cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-grid-head span { text-align: center; font-size: .72rem; color: var(--muted); font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-cell { min-height: 54px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; padding: .35rem; display: flex; flex-direction: column; justify-content: space-between; }
.cal-cell.empty { background: transparent; border: none; }
.cal-cell.has-ev { border-color: var(--primary); }
.cal-cell.today { box-shadow: 0 0 0 2px var(--primary); }
.cal-num { font-size: .78rem; color: var(--text); font-weight: 600; }
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.ev-dot { width: 7px; height: 7px; border-radius: 50%; }
.ev-dot.ev-in { background: var(--green); }
.ev-dot.ev-out { background: var(--red); }
.ev-dot.ev-card { background: var(--amber); }

/* ---------- FATURAS DE CARTÃO ---------- */
.invoices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; }
.inv-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; }
.inv-head { display: flex; justify-content: space-between; align-items: baseline; }
.inv-name { font-weight: 600; }
.inv-open { font-size: 1.15rem; font-weight: 700; color: var(--amber); }
.inv-open.zero { color: var(--green); }
.inv-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.inv-meta .sub { font-size: .74rem; color: var(--muted); }
.bar-track { height: 8px; background: var(--card-2); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius: 6px; transition: width .35s ease; }
.bar-fill.warn { background: linear-gradient(90deg, var(--amber), #f59e0b); }
.bar-fill.danger { background: linear-gradient(90deg, var(--red), #dc2626); }
.inv-hist { display: flex; flex-wrap: wrap; gap: .35rem; padding-top: .5rem; border-top: 1px solid var(--border); }

/* ---------- COFRE DE CARTÕES E SENHAS ---------- */
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .03em; }
.reveal-slot { display: block; }
.reveal-box { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .4rem; padding: .35rem .6rem; background: var(--bg-elev); border: 1px solid var(--primary); border-radius: 8px; font-size: .85rem; }
.reveal-box .mono { color: var(--text); }

/* ---------- AUTENTICADOR (TOTP) ---------- */
.totp-item { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.totp-item:last-child { border-bottom: none; }
.totp-info { flex: 1; min-width: 0; }
.totp-code-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.totp-code { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; color: var(--primary); background: none; border: none; cursor: pointer; padding: 0; }
.totp-code:hover { color: var(--primary-hover); }
.totp-ring { display: block; width: 70px; height: 4px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.totp-ring-fill { display: block; height: 100%; background: var(--primary); border-radius: 3px; transition: width 1s linear; }

/* ---------- PASSAGENS ---------- */
.travel-ic { display: inline-flex; vertical-align: middle; margin-right: .4rem; color: var(--primary); }
.travel-ic .ic { width: 1.2em; height: 1.2em; }

/* ---------- MEMBROS ---------- */
.avatar-sm { width: 1.6rem; height: 1.6rem; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-right: .4rem; }

/* ---------- BUSCA GLOBAL ---------- */
.search-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); z-index: 90; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.search-box { width: 100%; max-width: 560px; padding: 0; overflow: hidden; animation: pop .2s ease; }
.search-input-row { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.search-input-row .ic { color: var(--muted); width: 1.2em; height: 1.2em; }
.search-input-row input { flex: 1; border: none; background: transparent; font-size: 1rem; color: var(--text); padding: 0; }
.search-input-row input:focus { outline: none; box-shadow: none; }
.search-input-row kbd { font-size: .7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: .1rem .4rem; }
.search-results { max-height: 50vh; overflow-y: auto; padding: .4rem; }
.search-hint { padding: 1rem; text-align: center; }
.search-item { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: none; background: transparent; color: var(--text); border-radius: 9px; cursor: pointer; text-align: left; }
.search-item:hover, .search-item.active { background: var(--bg-elev); }
.search-item .ic { color: var(--primary); flex-shrink: 0; }
.si-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.si-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-sub { font-size: .76rem; color: var(--muted); }

/* ---------- CENTRO DE RELATÓRIOS ---------- */
.report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.report-controls label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--muted); }
.report-controls select, .report-controls input { min-width: 120px; }
.report-controls .btn { align-self: flex-end; }

/* ---------- DESPESAS FIXAS / RECORRÊNCIA ---------- */
.fixed-item { display: flex; flex-direction: column; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.fixed-item:last-child { border-bottom: none; }
.fixed-item.paused { opacity: .72; }
.fixed-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.comp-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.comp-chip { font-size: .72rem; padding: .2rem .5rem; border-radius: 7px; border: 1px solid var(--border); color: var(--muted); background: var(--bg-elev); white-space: nowrap; }
.comp-chip.click { cursor: pointer; transition: .15s; }
.comp-chip.click:hover { border-color: var(--primary); color: var(--text); }
.comp-chip.paga { color: var(--green); border-color: rgba(52,211,153,.4); }
.comp-chip.pendente { color: var(--amber); border-color: rgba(251,191,36,.4); }
.comp-chip.pulada { color: var(--muted); text-decoration: line-through; border-style: dashed; }
.comp-chip.pausada { opacity: .6; }

@media (max-width: 780px) {
    .dash { grid-template-columns: 1fr; padding: 1rem; }
    .hero { grid-template-columns: 1fr; }
    .topbar { padding: .8rem 1rem; }
    .company-select { min-width: 110px; }
    .cal-cell { min-height: 44px; }
    .cf-col { min-width: 46px; }
    .invoices { grid-template-columns: 1fr; }
}