@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root[data-theme="dark"] {
    --bg: #141014;            /* fundo principal — escuro quente, levemente menos saturado */
    --bg-sec: #1B141A;        /* fundo secundário */
    --card: rgba(28, 20, 26, 0.72); /* cards (glass) */
    --border: rgba(60, 40, 52, 0.55); /* bordas */
    --primary: #FF5B45;       /* vermelho da marca na variante para fundo escuro */
    --text: #F2EEF0;          /* texto principal */
    --dim: #8A7F86;           /* texto secundário — cinza quente (era slate frio) */
    --sidebar-w: 260px;
    --modal-bg: #221821;
    --input-bg: rgba(34, 24, 32, 0.7);
    --option-bg: #1B141A;
}

:root[data-theme="light"] {
    --bg: #F4F1EF;            /* papel quente (era branco frio) */
    --bg-sec: #FBF9F8;
    --card: #FFFFFF;
    --border: rgba(40, 24, 28, 0.08); /* borda quente e sutil */
    --primary: #E8341C;       /* vermelho Palomino Tech (DESIGN_SYSTEM.md) */
    --text: #211B1D;          /* quase-preto quente */
    --dim: #8C8082;           /* cinza quente */
    --sidebar-w: 260px;
    --modal-bg: #FFFFFF;
    --input-bg: rgba(40, 24, 28, 0.035);
    --option-bg: #FFFFFF;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter Tight', sans-serif; }
h1, h2, h3, h4, .sidebar-logo { font-family:'Bricolage Grotesque', 'Inter Tight', sans-serif; font-weight: 700; letter-spacing: -0.02em; }

html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body { background:var(--bg); color:var(--text); display:flex; min-height:100vh; overflow-x:hidden; transition: background 0.3s ease, color 0.3s ease; position: relative; }

/* Cinematic Matte noise overlay */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    opacity: 0.015;
    z-index: 9999;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.blob { position:fixed; width:600px; height:600px; background:var(--primary); filter:blur(150px); opacity:0.1; top:-200px; right:-100px; z-index:-1; }

.glass { 
    background: var(--card); 
    border: 1px solid var(--border); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px -14px rgba(19, 13, 15, 0.5);
    transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.2s; 
}
.glass:hover {
    box-shadow: 0 16px 44px -16px rgba(19, 13, 15, 0.58);
}

.sidebar { 
    width:var(--sidebar-w); 
    height:100vh; 
    position:fixed; 
    left:0; top:0; 
    padding: 1.5rem 1.25rem; 
    border-right:1px solid var(--border); 
    z-index:100; 
    display:flex; 
    flex-direction:column; 
    background: var(--bg-sec); 
    transition: background 0.3s ease; 
}
.sidebar-logo { display:flex; align-items:center; gap:0.5rem; margin-bottom: 2rem; font-size:1.3rem; font-weight:800; }
.sidebar-logo span span { color:var(--primary); margin-left:2px; }
.sidebar-nav { flex-grow: 1; display: flex; flex-direction: column; gap: 0.25rem; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-item {
    background:none;
    border:none;
    color:var(--dim);
    padding: 0.75rem 1rem;
    border-radius:12px;
    width:100%;
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap: 0.65rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item.active { background:var(--primary); color:white; box-shadow: 0 4px 20px -2px rgba(232, 52, 28, 0.3); }
.nav-item:hover:not(.active) { background: var(--border); color: var(--text); transform: translateX(3px); }

/* Chevron on expandable nav items */
.nav-chevron { margin-left: auto; width: 14px; height: 14px; opacity: 0.5; transition: transform 0.3s ease; flex-shrink: 0; }
.nav-item.expanded .nav-chevron { transform: rotate(90deg); }

/* Sidebar submenu (Cartões → Fatura / Milhas) */
.nav-submenu {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0; max-height: 0; overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s ease, padding 0.3s ease;
    opacity: 0;
}
.nav-submenu.open { max-height: 120px; opacity: 1; padding: 4px 0 4px 0; }
.nav-sub-item {
    background: none; border: none; color: var(--dim);
    padding: 0.5rem 1rem 0.5rem 2.8rem; border-radius: 10px;
    width: 100%; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 0.55rem;
    font-size: 0.82rem; font-weight: 500;
    transition: 0.2s ease; position: relative;
}
.nav-sub-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-sub-item::before {
    content: ''; position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--border); transition: background 0.2s, box-shadow 0.2s;
}
.nav-sub-item.active-sub { color: var(--primary); font-weight: 600; }
.nav-sub-item.active-sub::before { background: var(--primary); box-shadow: 0 0 8px rgba(232, 52, 28, 0.5); }
.nav-sub-item:hover:not(.active-sub) { color: var(--text); background: var(--border); }

/* Sub-tab toggle (segmented control in header) */
.sub-tab-toggle {
    display: inline-flex; gap: 0; padding: 3px;
    background: var(--input-bg); border: 1px solid var(--border);
    border-radius: 10px;
}
.sub-tab-btn {
    padding: 0.35rem 0.9rem; border-radius: 8px; border: none;
    background: transparent; color: var(--dim); cursor: pointer;
    font-size: 0.8rem; font-weight: 600; font-family: 'Inter Tight', sans-serif;
    transition: all 0.25s ease; display: flex; align-items: center; gap: 0.35rem;
}
.sub-tab-btn svg { width: 14px; height: 14px; }
.sub-tab-btn.active-sub-tab {
    background: var(--primary); color: white;
    box-shadow: 0 2px 12px -2px rgba(232, 52, 28, 0.35);
}
.sub-tab-btn:hover:not(.active-sub-tab) { color: var(--text); background: var(--border); }

/* Detail tab switcher (Balanço - Detalhamento) */
.detail-tab-btn {
    padding: 0.5rem 1rem 0.6rem;
    border: none; background: transparent;
    color: var(--dim); cursor: pointer;
    font-size: 0.8rem; font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-bottom: -1px;
}
.detail-tab-btn:hover { color: var(--text); }
.detail-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* Sub-content within cartoes tab */
.sub-content { animation: fadeIn 0.4s ease; }

.sidebar-footer {
    display: flex; flex-direction: column; gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
    flex-shrink: 0;
    min-height: 0;
}
.sidebar-logout-btn, .sidebar-theme-btn {
    display: flex; align-items: center; gap: 0.65rem;
    width: 100%; padding: 0.7rem 1rem; border-radius: 12px;
    border: 1px solid var(--border); background: transparent;
    color: var(--dim); font-family: 'Inter Tight', sans-serif;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sidebar-logout-btn i, .sidebar-theme-btn i { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-logout-btn:hover {
    background: rgba(232, 52, 28, 0.08);
    border-color: var(--primary); color: var(--primary);
}
.sidebar-theme-btn:hover {
    background: var(--border);
    border-color: var(--dim); color: var(--text);
}
.sidebar-icon-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 0.6rem; border-radius: 10px;
    border: 1px solid var(--border); background: transparent;
    color: var(--dim); cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sidebar-icon-btn i { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-icon-btn:hover { background: var(--border); color: var(--text); }
#logout-btn.sidebar-icon-btn:hover { background: rgba(232,52,28,.08); color: var(--primary); border-color: var(--primary); }
.theme-toggle-btn { margin-bottom: 0; }
.status-indicator { display:flex; align-items:center; gap:0.6rem; font-size:0.75rem; color:var(--dim); font-weight:500; }
.dot { width:8px; height:8px; background:#10b981; border-radius:50%; box-shadow:0 0 10px #10b981; animation:pulse 2s infinite; }
@keyframes pulse { 0% { opacity:0.5; transform:scale(0.9); } 50% { opacity:1; transform:scale(1.1); } 100% { opacity:0.5; transform:scale(0.9); } }

/* min-width:0 — sem isso o main é um flex item que não encolhe abaixo do
   conteúdo: em telas entre 851px e ~1100px (tablet, celular grande deitado)
   ele mantinha 851px + 260px de margem e criava scroll horizontal na página */
.app-content { margin-left:var(--sidebar-w); flex-grow:1; min-width:0; padding:4rem; }
/* Faixa intermediária: 4rem de padding em 900px de tela é quase 1/7 da largura */
@media (min-width: 851px) and (max-width: 1200px) {
    .app-content { padding: 2rem; }
}
.tab-content { display:none; animation:fadeIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.tab-content.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Monospace formatting for financial data */
.stat-value, .total-value, .upcoming-amount, td[data-label="Valor"], .day-badge, .input-currency input, .percentage, .day-badge, #total-pix, #total-card, .ring-footer {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    overflow-wrap: break-word; /* nunca cortar valor grande — quebra em vez de estourar o card */
}

/* Utility Classes */
.welcome-text { color: var(--dim); margin-bottom: 2rem; }
.header-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.chart-container { height: 250px; position: relative; width: 100%; }
.sort-icon { width: 14px; display: inline-block; vertical-align: middle; }
.total-label { text-align: right; font-weight: 600; }
.total-value { font-weight: 700; color: var(--primary); }
.mb-2 { margin-bottom: 2rem; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; }
.stat-card {
    padding:2rem;
    border-radius:20px;
    position:relative;
    overflow:hidden;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s;
}
.stat-card:hover {
    transform: translateY(-2px);
}
.stat-card.highlight {
    background: linear-gradient(135deg, var(--card), rgba(232, 52, 28, 0.05));
    border: 1px solid rgba(232, 52, 28, 0.25);
}
.stat-label { font-size:0.72rem; color:var(--dim); text-transform:uppercase; margin-bottom:1rem; display:block; font-weight: 700; letter-spacing: 0.05em; }
.stat-value { font-size:2rem; font-weight:700; color: var(--text); font-family:'JetBrains Mono', monospace; }
.stat-icon-bg { position:absolute; right:-10px; bottom:-10px; width:80px; height:80px; opacity:0.04; transform:rotate(-15deg); }
.overview-widgets { display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; margin-top:2.5rem; align-items:stretch; }
.widget { padding:2rem; border-radius:20px; transition: box-shadow 0.2s; }

/* Upcoming widget */
.upcoming-widget h3 { margin-bottom:1.25rem; }
.upcoming-scroll {
    max-height: 288px; /* ~3 itens */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-right: 4px;
}
.upcoming-scroll::-webkit-scrollbar { width: 5px; }
.upcoming-scroll::-webkit-scrollbar-track { background: transparent; }
.upcoming-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.upcoming-scroll::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.upcoming-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border-radius:16px; background:var(--input-bg); margin-bottom:0.75rem; }
.upcoming-item:last-child { margin-bottom:0; }
.upcoming-amount { font-weight: 600; white-space: nowrap; }
.day-badge { min-width:46px; width:46px; height:46px; background:var(--card); border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; border: 1px solid var(--border); font-size:1rem; }
.day-badge span { font-size:0.5rem; color:var(--dim); letter-spacing:0.04em; }

/* Budget Bar Cards (substitui Progress Rings) */
.progress-rings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.budget-bar-card {
    padding: 1.1rem 1.25rem 1rem;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
    overflow: hidden;
}
.budget-bar-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--bar-accent, #10b981);
}
.budget-bar-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.budget-bar-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.budget-bar-icon { width: 12px; height: 12px; flex-shrink: 0; }
.budget-bar-pct {
    font-size: 1.05rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}
.budget-bar-amount {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.02em;
    margin-top: -0.1rem;
}
.budget-bar-track {
    background: var(--border);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    position: relative;
}
.budget-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(.4,0,.2,1);
}
.budget-bar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -0.1rem;
}
.budget-bar-meta { font-size: 0.7rem; color: var(--dim); }
.budget-bar-rest-val {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.85;
}

/* Payment badges Pix/Cartão */
/* Cards resumo — Contas a Pagar */
.mgmt-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
.mgmt-stat-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; border-radius: 16px; }
.mgmt-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mgmt-stat-icon i { width: 18px; height: 18px; }
.mgmt-stat-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mgmt-stat-label { font-size: 0.68rem; color: var(--dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.mgmt-stat-value { font-size: 1rem; font-weight: 700; color: var(--text); font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
@media (max-width: 600px) { .mgmt-stats-grid { grid-template-columns: 1fr 1fr; } .mgmt-stats-grid .mgmt-stat-card:last-child { grid-column: 1/-1; } }

/* Balanço — badges de forma de pagamento embutidos dentro do card "Total
   Saídas" (antes eram uma fileira separada acima dos cards, pedido do
   Rodrigo pra ficar "bem bonitinho dentro de saídas"). Chips compactos,
   cabem numa linha só mesmo com o card estreito. */
.bal-saidas-breakdown { display: flex; gap: 0.3rem; margin-top: 0.6rem; flex-wrap: nowrap; position: relative; z-index: 1; }
.bal-pay-chip { display: flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; border-radius: 99px; border: 1px solid var(--border); background: var(--card-bg); font-size: 0.6rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bal-pay-chip i { width: 9px; height: 9px; flex-shrink: 0; }
@media (max-width: 500px) {
    .bal-saidas-breakdown { flex-wrap: wrap; }
}
.bal-pay-pix { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); color: #10b981; }
.bal-pay-azul { background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.30); color: #3b82f6; }
.bal-pay-bradesco { background: rgba(232,52,28,0.09); border-color: rgba(232,52,28,0.28); color: #e11d48; }

/* Balanço — "Saldo em Conta" embutido dentro do card "Total Créditos"
   (créditos menos o que saiu via Pix — cartão de crédito não desconta da
   conta corrente na hora, só quando a fatura é paga). */
.bal-saldo-conta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); font-size: 0.68rem; color: var(--dim); position: relative; z-index: 1; }
.bal-saldo-conta-row strong { font-size: 0.85rem; font-weight: 800; color: var(--text); font-family: 'JetBrains Mono', monospace; }

.search-input { 
    width:300px; 
    background:var(--input-bg); 
    border:1px solid var(--border); 
    padding:0.8rem 1.2rem; 
    color:var(--text); 
    border-radius:12px; 
    outline:none; 
    margin: 0; 
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232, 52, 28, 0.15);
}
.search-input::placeholder { color: var(--dim); }

/* Filtro de mês — padrão único usado em todas as abas (Milhas, Devedores,
   Abastecimento, Dividendos, Fatura). Antes cada aba usava uma classe/estilo
   diferente (form-input sem estilo nenhum, search-input com paddings
   distintos, ou pill customizado só na Fatura) — resultava em filtros de
   tamanho e fonte inconsistentes lado a lado (ex: Devedores). */
.month-filter {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 13px;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.55rem 2.3rem 0.55rem 1rem;
    border-radius: 99px;
    width: auto; /* sem isso, herda width:100% da regra global "input, select" e vira uma barra gigante empilhada */
    min-width: 180px;
    cursor: pointer;
    outline: none;
    margin: 0;
    margin-top: 0; /* idem — sobrescreve margin-top:5px da regra global */
    transition: border-color 0.2s, box-shadow 0.2s;
}
.month-filter:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232, 52, 28, 0.15); }
.month-filter:hover { border-color: var(--primary); }

.table-container { border-radius:20px; overflow-x: auto; }
.table-actions { padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; justify-content: space-between; align-items: center; }
table { width:100%; border-collapse:collapse; }
th { 
    text-align:left; 
    color:var(--dim); 
    font-size:0.75rem; 
    padding:1.2rem 1.5rem; 
    text-transform:uppercase; 
    cursor: pointer; 
    transition: color 0.2s; 
    user-select: none; 
    font-family: 'Bricolage Grotesque', sans-serif;
    letter-spacing: 0.05em;
}
th.sortable:hover { color: var(--text); }
td { padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); font-size:0.92rem; }
.actions-cell { display: flex; gap: 0.5rem; }
.btn-primary {
    background:var(--primary);
    color:white;
    border:none;
    padding:0.8rem 1.5rem;
    border-radius:11px;
    cursor:pointer;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:0.5rem;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s;
}
.btn-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 20px -8px rgba(232, 52, 28, 0.5);
}
.btn-secondary {
    background:transparent;
    color:var(--dim);
    border:1px solid var(--border);
    padding:0.8rem 1.5rem;
    border-radius:11px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    font-family:'Inter Tight',sans-serif;
    font-size:0.9rem;
    font-weight:500;
    transition:background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}
.goals-shortcut-btn { padding: 0.6rem 1rem; font-size: 0.85rem; }
.btn-icon { background:transparent; border:1px solid var(--border); color:var(--dim); width:36px; height:36px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.2s; }
.btn-icon:hover { color:var(--text); background: var(--border); }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55); z-index:10001; align-items:center; justify-content:center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; }
.modal.active { display:flex; }
.modal-content { width:95%; max-width:480px; max-height:90vh; overflow-y:auto; padding:2rem; border-radius:20px; border:1px solid var(--border); background: var(--modal-bg); position:relative; transition: transform 0.3s cubic-bezier(0.32,0.72,0,1); }
/* Especificidade maior que o fix de overflow lá embaixo (.glass, .modal-content{max-width:100%}),
   que senão vence por vir depois no arquivo e estica a modal pra tela toda. */
.modal-content:not(.sheet-modal-content) { max-width:480px; }
.modal-content::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); }
.modal-title { margin-bottom: 1.5rem; font-size: 1.05rem; }
.modal-handle { display: none; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.72rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.5rem; }
.modal-icon-head { width:34px; height:34px; border-radius:10px; background:rgba(232,52,28,0.1); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modal-icon-head i { width:17px; height:17px; }
.modal-subtitle { display:block; font-size:0.74rem; color:var(--dim); font-weight:500; margin-top:1px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:var(--input-bg); border:1px solid var(--border); border-radius:11px; padding:4px; margin-top:5px; }
.segmented button { border:none; background:transparent; color:var(--dim); font-size:0.8rem; font-weight:600; padding:0.55rem 0.4rem; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.35rem; transition:background 0.15s, color 0.15s; }
.segmented button i { width:14px; height:14px; }
.segmented button.active { background:var(--primary); color:#fff; }
.segmented button:not(.active):hover { color:var(--text); }
.btn-today { flex-shrink:0; display:flex; align-items:center; gap:0.35rem; background:var(--input-bg); border:1px solid var(--border); color:var(--text); padding:0 0.9rem; border-radius:11px; font-size:0.82rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color 0.15s, color 0.15s; }
.btn-today i { width:14px; height:14px; }
.btn-today:hover { border-color:var(--primary); color:var(--primary); }
.amount-wrap { position:relative; }
.amount-wrap .amount-prefix { position:absolute; left:0.85rem; top:50%; transform:translateY(-50%); font-family:'JetBrains Mono', monospace; font-size:0.82rem; color:var(--dim); font-weight:600; pointer-events:none; }
.amount-wrap input { padding-left:2.4rem !important; font-family:'JetBrains Mono', monospace; font-weight:600; font-size:0.95rem !important; }

/* Ícone inline em títulos de seção/widget — substitui emoji usado como ícone */
.section-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:rgba(232,52,28,0.1); color:var(--primary); margin-right:0.55rem; vertical-align:-6px; flex-shrink:0; }
.section-icon svg { width:13px; height:13px; }
/* Ícone inline em botões de sub-aba (detail-tab-btn) */
.tab-icon { width:14px; height:14px; vertical-align:-3px; margin-right:0.35rem; }
/* Botão "link" discreto de widget (ex.: Editar), substitui onmouseover/onmouseout inline */
.widget-link-btn { background:none; border:1px solid var(--border); border-radius:8px; padding:4px 12px; font-size:0.75rem; color:var(--dim); cursor:pointer; transition:border-color 0.15s, color 0.15s; }
.widget-link-btn:hover { border-color:var(--primary); color:var(--primary); }
input, select {
    width:100%;
    background:var(--input-bg);
    border:1px solid var(--border);
    padding:0.75rem 0.85rem;
    color:var(--text);
    border-radius:11px;
    outline:none;
    margin-top:5px;
    font-size: 0.88rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
select {
    appearance:none; -webkit-appearance:none;
    padding-right:2.1rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238C8082' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position: right 0.7rem center;
    background-size: 15px;
    cursor: pointer;
}
input:focus, select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232, 52, 28, 0.15);
}
option { background: var(--option-bg); color: var(--text); }
/* ── Mobile top bar (hambúrguer) ─────────────────────────────── */
.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }
@media (max-width: 850px) {
    .mobile-topbar {
        display: flex; align-items: center; gap: 0.75rem;
        position: fixed; top: 0; left: 0; width: 100%; height: 56px;
        padding: 0 1rem;
        background: var(--bg-sec); border-bottom: 1px solid var(--border);
        z-index: 9998;
    }
    .mobile-topbar-title { font-size: 1.05rem; font-weight: 800; }
    .mobile-topbar-title span { color: var(--primary); margin-left: 2px; }
    #sidebar-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border-radius: 10px;
        border: 1px solid var(--border); background: transparent;
        color: var(--text); cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #sidebar-toggle i { width: 20px; height: 20px; }

    .sidebar-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9998;
        opacity: 0; pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .sidebar-overlay.open { opacity: 1; pointer-events: auto; }

    .sidebar {
        top: 0; bottom: 0; height: 100vh;
        width: min(78vw, 300px);
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: 9999 !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }
    .sidebar.open { transform: translateX(0); }
    body.sidebar-lock-scroll { overflow: hidden; }
    .sidebar-logo, .sidebar-footer { display: flex; }
    .nav-item { font-size: 0.9rem; }
    .app-content {
        margin-left: 0; padding: 1rem; padding-top: calc(56px + 1rem); width: 100%;
        position: relative;
        z-index: 1;
    }
    /* Forçar coluna única em TODOS os stats-grid no mobile (mesmo com inline style) */
    .overview-widgets, .stats-grid { grid-template-columns: 1fr !important; }
    /* Balanço: mini-cards de categoria (Financiamento/Apartamento/Fixos/Gerais) —
       em 2 colunas não sobra largura pra "ícone+rótulo+%" numa linha nem pra
       "Gasto"/"Restante" lado a lado; coluna única resolve sem mexer em fonte. */
    .progress-rings-grid { grid-template-columns: 1fr !important; }
    /* Home: 4 cards em grade 2x2 no mobile */
    .home-stats-4 { grid-template-columns: 1fr 1fr !important; }
    .home-stats-4 .stat-card { padding: 0.85rem 1rem; }
    .home-stats-4 .stat-value { font-size: 1.2rem !important; }
    /* Gráfico com altura mais generosa para melhor leitura */
    #overview-tab .chart-container { height: 200px; }
    /* Sem margin-top gigante no overview-widgets no mobile */
    #overview-tab .overview-widgets { margin-top: 0; gap: 0.75rem; }
    /* Widget do gráfico e de metas mais compactos na home mobile */
    #overview-tab .overview-widgets .widget { padding: 1rem; }
    /* Metas compactas no mobile */
    #home-metas-list { gap: 0.6rem !important; padding-right: 0.6rem; }
    #home-metas-list > div { margin-bottom: 0; }
    
    .header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .header-actions > div {
        width: 100%;
        flex-direction: column;
    }
    .header-actions select, .header-actions button {
        width: 100% !important;
    }
    /* Na aba fatura, o select de mês fica auto para não ficar enorme */
    #fatura-tab .header-actions select { width: auto !important; }
    .btn-secondary {
        width: 100%;
    }

    /* Transform Table into Cards */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        display: none;
    }
    tr {
        margin-bottom: 0.6rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 0.75rem 1rem;
        background: var(--input-bg);
    }
    td {
        border: none;
        padding: 0.25rem 0;
        position: relative;
        text-align: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
    }
    td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--dim);
        font-size: 0.75rem;
        text-transform: uppercase;
        text-align: left;
        flex-shrink: 0;
    }
    .col-desktop {
        display: none !important;
    }
    .bill-info-td {
        display: block !important;
    }
    .bill-info-td::before {
        display: none;
    }
    .bill-name-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .bill-meta-mobile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.25rem;
    }
    .bill-meta-mobile .category-tag {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
    .bill-meta-detail {
        font-size: 0.75rem;
        color: var(--dim);
    }
    .paid-badge-sm {
        font-size: 0.8rem;
    }
    .actions-cell {
        justify-content: flex-end;
        padding-top: 0.4rem;
        margin-top: 0.1rem;
        border-top: 1px dashed var(--border);
    }
    .actions-cell::before {
        display: none;
    }
    /* Remove container externo no mobile — os tr já são os cards */
    .table-container.glass {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-radius: 0 !important;
    }
    .table-actions {
        padding: 0.5rem 0 0.5rem;
    }
    /* Valor alinhado com label */
    td[data-label="Valor"] {
        font-weight: 700;
        color: var(--text);
        border-top: 1px dashed var(--border);
        padding-top: 0.4rem;
        margin-top: 0.1rem;
    }
}

/* Row Actions */
.row-actions { display: flex; gap: 0.5rem; justify-content: flex-start; }
.btn-icon-sm { background: transparent; border: 1px solid var(--border); color: var(--dim); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; font-size: 0.85rem; padding: 0; line-height: 1; }
.btn-icon-sm:hover { color: var(--text); background: var(--border); }
.btn-icon-sm.btn-del:hover { color: #fff; background: #ef4444; border-color: #ef4444; }


/* Multiselect Dropdown Styles */
.ms-container { position: relative; width: 220px; font-size: 0.85rem; user-select: none; z-index: 1000; }
.ms-trigger { 
    background: rgba(255, 255, 255, 0.05); 
    border: 1px solid var(--border); 
    padding: 10px 16px; 
    border-radius: 12px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    color: var(--text);
    transition: all 0.2s;
}
.ms-trigger:hover { background: rgba(255, 255, 255, 0.1); }
.ms-trigger::after { content: '▼'; font-size: 0.7rem; opacity: 0.5; margin-left: 10px; }

.ms-options { 
    position: absolute; 
    top: calc(100% + 8px); 
    right: 0; 
    width: 100%; 
    background: var(--bg); 
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 12px; 
    display: none; 
    z-index: 9999; 
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.ms-options.active { display: block !important; animation: slideDown 0.2s ease-out; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ms-option { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 8px 12px; 
    cursor: pointer; 
    border-radius: 8px;
    transition: background 0.2s;
}
.ms-option:hover { background: var(--border); }
.ms-option input[type="checkbox"] { 
    width: 16px; 
    height: 16px; 
    accent-color: var(--primary);
    cursor: pointer;
}
.ms-option label { cursor: pointer; flex: 1; margin: 0; }

/* Category Tag */
.category-tag { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--input-bg); border: 1px solid var(--border); padding: 0.2rem 0.6rem; border-radius: 20px; font-size: 0.82rem; white-space: nowrap; }

/* Filtros de categoria — garante que não herdam width:100% do select global */
.cat-filter, #category-filter { width: auto !important; flex-shrink: 0; }

/* Sidebar links (usados na página admin) */
a.nav-item { text-decoration: none; }

/* Table Actions flex */
.table-actions { padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; justify-content: flex-start; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Toggle Switch */
.toggle-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; user-select: none; padding: 0.5rem 0; }
.toggle-track { position: relative; width: 44px; height: 24px; background: var(--border); border-radius: 12px; transition: background 0.25s; flex-shrink: 0; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: left 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.toggle-label input[type="checkbox"] { display: none; }
.toggle-label input[type="checkbox"]:checked + .toggle-track { background: var(--primary); }
.toggle-label input[type="checkbox"]:checked + .toggle-track .toggle-thumb { left: 23px; }

/* Conta Paga */
tr.bill-paid td { opacity: 0.45; }
tr.bill-paid td:first-child strong { text-decoration: line-through; }
.paid-badge { display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; color: #10b981; font-weight: 600; }
/* Ocultos no desktop; o media query mobile ativa display:flex/inline */
@media (min-width: 851px) {
    .bill-meta-mobile { display: none; }
    .paid-badge-sm { display: none; }
    .skip-badge-sm { display: none; }
}
.pay-toggle-btn { color: var(--dim) !important; }
.pay-toggle-btn:hover { color: #10b981 !important; border-color: #10b981 !important; }
.pay-toggle-paid { color: #10b981 !important; border-color: #10b981 !important; background: rgba(16,185,129,0.08) !important; }

/* Conta Pulada neste mês (não é paga nem pendente — ver toggleSkipBill) */
tr.bill-skipped td { opacity: 0.5; font-style: italic; }
.skip-badge-sm { display: inline-block; margin-left: 0.5rem; font-size: 0.7rem; color: #f59e0b; font-weight: 600; font-style: normal; }
.skip-toggle-active { color: #f59e0b !important; border-color: #f59e0b !important; background: rgba(245,158,11,0.08) !important; }

/* Filter Pills */
/* Contas a Pagar — linhas compactas */
#bills-body td { padding: 0.45rem 1rem !important; font-size: 0.875rem; }
#management-tab tfoot td { padding: 0.6rem 1rem !important; }

/* Balanço — tabelas compactas */
#tbody-creditos td, #tbody-fixos td, #tbody-lazer td, #tbody-extras td {
    padding: 0.45rem 1rem !important;
    font-size: 0.875rem;
}

.filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-pill {
    padding: 0.3rem 0.85rem; border-radius: 20px; border: 1px solid var(--border);
    background: transparent; color: var(--dim); font-size: 0.8rem; font-family: 'Inter Tight', sans-serif;
    cursor: pointer; transition: 0.15s; white-space: nowrap;
}
.filter-pill:hover { border-color: var(--primary); color: var(--primary); }
.filter-pill.active { background: var(--primary); color: white; border-color: var(--primary); font-weight: 600; }

/* Currency Input */
.input-currency { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; background: var(--input-bg); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.input-currency:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,52,28,0.15); }
.input-currency > span { padding: 0.75rem 0.75rem 0.75rem 1rem; color: var(--primary); font-weight: 700; font-size: 0.9rem; white-space: nowrap; border-right: 1px solid var(--border); background: rgba(232,52,28,0.07); user-select: none; }
.input-currency input { flex: 1; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0.75rem 1rem; color: var(--text); font-family: 'Inter Tight', sans-serif; font-size: 0.95rem; outline: none; }
.input-currency input::-webkit-inner-spin-button,
.input-currency input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input-currency input[type=number] { -moz-appearance: textfield; }

/* ── Metas page ─────────────────────────────────────────────── */
.tab-content.active.goals-page { display: flex; flex-direction: column; }
.goals-header { margin-bottom: 1.5rem; }
.goals-header h1 { font-size: 1.9rem; margin-bottom: 0.3rem; }
.goals-header p  { color: var(--dim); font-size: 0.9rem; }
.goals-card { padding: 2rem; border-radius: 20px; max-width: 660px; }
.goals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}
.goals-field { margin-bottom: 0 !important; }
.goals-field label { font-size: 0.82rem; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.goal-full { grid-column: 1 / -1; max-width: calc(50% - 0.75rem); }
.goals-save-btn { width: 100%; justify-content: center; }

/* Toast Notifications */
#toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 99999; display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none; }
.toast { background: var(--card); border: 1px solid var(--border); backdrop-filter: blur(20px); padding: 0.9rem 1.3rem; border-radius: 14px; font-size: 0.88rem; min-width: 260px; max-width: 360px; opacity: 0; transform: translateX(30px); transition: opacity 0.3s ease, transform 0.3s ease; display: flex; align-items: center; gap: 0.7rem; box-shadow: 0 10px 30px rgba(0,0,0,0.35); pointer-events: auto; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-left: 4px solid #10b981; }
.toast-error   { border-left: 4px solid #c92c21; }
.toast-info    { border-left: 4px solid #3b82f6; }

/* ── Sheet Settings Modal ───────────────────────────────────────── */
.sheet-modal-content { max-width: 600px; width: 95%; }
.sheet-modal-footer { flex-wrap: wrap; gap: 0.6rem; }
.sheet-modal-footer .btn-primary,
.sheet-modal-footer .btn-secondary { flex: 1 1 auto; justify-content: center; min-width: 120px; }
.sheet-tabs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.25rem; }
.sheet-modal-details { margin-top: 1rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1.1rem; }
.sheet-modal-details summary { cursor: pointer; font-size: 0.82rem; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; user-select: none; list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.sheet-modal-details summary::before { content: '▶'; font-size: 0.65rem; transition: transform 0.2s; }
.sheet-modal-details[open] summary::before { transform: rotate(90deg); }
.sheet-modal-info { background: var(--input-bg); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; }
.sheet-service-email {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 0.6rem 0.9rem;
    font-family: monospace; font-size: 0.80rem; color: var(--text);
    cursor: pointer; margin-top: 0.4rem;
    transition: border-color 0.2s; word-break: break-all;
}
.sheet-service-email:hover { border-color: var(--primary); }
.sheet-status { padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.85rem; margin-top: 1rem; }
.sheet-status-info    { background: rgba(59,130,246,0.1);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.2); }
.sheet-status-success { background: rgba(16,185,129,0.1);  color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.sheet-status-error   { background: rgba(232,52,28,0.1);   color: #f87171; border: 1px solid rgba(232,52,28,0.2);  }
@media (max-width: 850px) { #toast-container { bottom: 1rem; right: 1rem; left: 1rem; } .toast { min-width: unset; width: 100%; }
    /* Simulador: form de 2 colunas vira 1 coluna no mobile */
    #sim-modal .modal-content > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #sim-modal .form-group[style*="grid-column"] { grid-column: 1 !important; }
}

/* ==============================
   MELHORIAS MOBILE (Feature 10)
   ============================== */
@keyframes mobileModalIn {
    from { opacity: 0; transform: scale(0.93) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 850px) {
    /* Previne zoom automático no iOS ao focar em inputs */
    input, select, textarea { font-size: 16px !important; }

    /* Modal: overlay cobre a tela inteira (sem navbar inferior) */
    .modal {
        height: auto !important;      /* anula height:100% global */
        bottom: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: rgba(0,0,0,0.38) !important;
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .modal-content {
        border-radius: 22px !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        cursor: default;
        padding: 1.25rem 1.25rem 1rem;
        transform: none !important;
        transition: none !important;
        background: var(--modal-bg) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid rgba(232,52,28,0.18) !important;
        box-shadow: 0 24px 60px rgba(0,0,0,0.55) !important;
    }
    .modal.active .modal-content {
        animation: mobileModalIn 0.22s ease-out both;
    }
    /* Drag handle oculto */
    .modal-handle { display: none !important; }

    /* Cancelar oculto no mobile — X já fecha */
    .modal-footer .btn-secondary { display: none !important; }
    .modal-footer {
        margin-top: 0.75rem;
        gap: 0;
    }
    .modal-footer .btn-primary {
        width: 100%;
        justify-content: center;
        padding: 0.85rem;
        font-size: 0.95rem;
        border-radius: 14px;
    }

    /* Botão X circular */
    .close-modal, .close-expense-modal {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--input-bg) !important;
        border: 1px solid var(--border) !important;
        color: var(--dim) !important;
        font-size: 0.9rem !important;
        padding: 0 !important;
        flex-shrink: 0;
    }

    /* Inputs mais compactos dentro dos modais */
    .modal input, .modal select {
        padding: 0.6rem 0.75rem !important;
        margin-top: 3px !important;
    }
    .modal .form-group {
        margin-bottom: 0.6rem;
        gap: 0.25rem;
    }
    .modal .form-group label {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--dim);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .modal .modal-title {
        font-size: 1.1rem;
        margin-bottom: 0.85rem;
    }

    /* Filter pills ficam menores no mobile */
    .filter-pills { gap: 0.3rem; }
    .filter-pill { font-size: 0.75rem; padding: 0.25rem 0.65rem; }

    /* Busca global do balanço ocupa largura total */
    #bal-global-search { width: 100% !important; }

    /* Tabela de contas: paid-badge inline */
    .paid-badge { display: block; margin-left: 0; margin-top: 0.15rem; }

    /* Buttons de ação menores */
    .pay-toggle-btn { width: 30px !important; height: 30px !important; }

    /* Filtro de categorias — full-width empilhado */
    #category-filter, #search-input, .search-input, .ms-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-basis: 100% !important;
    }
}

/* ── Mobile theme toggle: substituído pelo botão no rodapé do drawer ── */
.mobile-theme-btn { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   DARK/LIGHT MODE EXPLÍCITO — corrige repaint iOS Safari
   ══════════════════════════════════════════════════════════════ */

/* Background explícito no html/body para garantir no iOS Safari PWA */
html[data-theme="dark"],
html[data-theme="dark"] body { background-color: #141014 !important; color: #F2EEF0 !important; }

html[data-theme="light"],
html[data-theme="light"] body { background-color: #F4F1EF !important; color: #211B1D !important; }
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] .search-input,
[data-theme="light"] .ms-trigger {
    background: #f0eaec !important;
    color: #1d1819 !important;
    border-color: rgba(38, 19, 24, 0.18) !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] .search-input::placeholder { color: #8a7880 !important; }

/* Cards de conta e lançamento no mobile */
[data-theme="light"] tr {
    background: #ffffff !important;
    border-color: rgba(38, 19, 24, 0.1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
[data-theme="light"] td { color: #1d1819; }
[data-theme="light"] td::before { color: #64748b; }
[data-theme="light"] td[data-label="Valor"] { color: #1d1819; border-top-color: rgba(38,19,24,0.1); }
[data-theme="light"] .actions-cell { border-top-color: rgba(38,19,24,0.1) !important; }

/* Stat cards, widgets e glassmorphism no light */
[data-theme="light"] .glass { box-shadow: 0 1px 2px rgba(40,24,28,0.04), 0 16px 40px -24px rgba(40,24,28,0.32); }
[data-theme="light"] .stat-card { box-shadow: 0 1px 2px rgba(40,24,28,0.04), 0 14px 30px -22px rgba(40,24,28,0.30); }

/* Category tag no light */
[data-theme="light"] .category-tag { background: #f0eaec; border-color: rgba(38,19,24,0.12); }

/* Bill meta detail */
[data-theme="light"] .bill-meta-detail { color: var(--dim); }

/* Modal no light */
[data-theme="light"] .modal-content {
    background: #ffffff !important;
    border-color: rgba(38,19,24,0.15) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.18) !important;
    color: #1d1819;
}
[data-theme="light"] .modal-content .close-modal,
[data-theme="light"] .modal-content .close-expense-modal {
    background: #f0eaec !important;
    color: var(--dim) !important;
    border-color: rgba(38,19,24,0.15) !important;
}
[data-theme="light"] .modal-content label { color: var(--dim) !important; }

/* ══════════════════════════════════════════════════════
   MELHORIAS GERAIS MOBILE
   ══════════════════════════════════════════════════════ */
@media (max-width: 850px) {
    /* Títulos menores para poupar espaço */
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.15rem !important; }
    h3 { font-size: 1rem !important; }

    /* Botões da header de Gerenciar Contas — altura reduzida */
    .header-actions .btn-primary,
    .header-actions .btn-secondary {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }

    /* Stats cards mais compactos */
    .stat-card { padding: 1.25rem 1.25rem; }
    .stat-value { font-size: 1.6rem; }

    /* Widgets em coluna */
    .overview-widgets { gap: 1rem; }
    .widget { padding: 1.25rem; }

    /* Tabela de detalhes do Balanço — colunas desnecessárias no mobile */
    .bal-col-desktop { display: none !important; }

    /* Progress rings menores no mobile */
    .progress-rings-grid { gap: 0.6rem; grid-template-columns: 1fr 1fr; }
    .budget-bar-card { padding: 0.85rem 0.9rem; }

    /* Aba de Balanço — filtros compactos */
    .cat-filter { width: 100% !important; }
    .bal-search { width: 100% !important; max-width: 100% !important; }

    /* Remove overflow horizontal nas tabelas de balanço */
    .table-container { overflow-x: hidden; }

    /* Botão sincronizar e metas — full width empilhado */
    #sync-btn, #link-sheet-btn,
    button.goals-shortcut-btn { width: 100% !important; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   ABA FATURA — FamilyCard Dashboard
   ══════════════════════════════════════════════════════════════ */

/* Chips de filtro de portador */
.holder-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--dim);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.holder-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.holder-chip.active {
    background: rgba(232,52,28,0.12);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* Color dots — seletor de cor para portadores */
.color-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    padding: 0;
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.active {
    border-color: var(--text);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(240,240,242,0.2);
}

/* Upload area drag state */
#fatura-upload-area {
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
#fatura-upload-area:hover {
    border-color: var(--primary) !important;
    background: rgba(232, 52, 28, 0.04) !important;
}

/* Modal portadores */
#holders-modal .modal-content { max-height: 85vh; overflow-y: auto; }

/* Responsive fatura — mesmo breakpoint do global (850px) */
@media (max-width: 850px) {
    #fatura-charts-row { grid-template-columns: 1fr !important; }
    #fatura-upload-btn, #fatura-holders-btn { width: 100%; justify-content: center; }

    /* Chips de portador: scroll horizontal em vez de multi-linha */
    #fatura-holder-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    #fatura-holder-chips::-webkit-scrollbar { display: none; }


    /* ── Card layout para tabela de transações ── */
    #fatura-tbody tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "desc   date"
            "cat    amount"
            "holder actions";
        padding: 0.9rem 1rem !important;
        gap: 0.15rem 0.75rem !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        background: none !important;
    }
    /* Cancela o display:flex e ::before globais */
    #fatura-tbody td          { display: block !important; border: none !important; padding: 0.05rem 0 !important; }
    #fatura-tbody td::before  { display: none !important; }

    #fatura-tbody td:nth-child(1) { grid-area: date;    font-size: 0.72rem; text-align: right; color: var(--dim); align-self: start; padding-top: 0.1rem; }
    #fatura-tbody td:nth-child(2) { grid-area: desc;    font-size: 0.9rem;  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none !important; text-align: left !important; }
    #fatura-tbody td:nth-child(3) { grid-area: cat;     font-size: 0.76rem; text-align: left !important; }
    #fatura-tbody td:nth-child(4) { grid-area: holder;  font-size: 0.76rem; text-align: right; }
    #fatura-tbody td:nth-child(5) { grid-area: amount;  font-size: 0.95rem; font-weight: 700; text-align: right; color: var(--primary); }
    #fatura-tbody td:nth-child(6) { grid-area: actions; display: flex !important; justify-content: flex-start; gap: 0.4rem; align-self: center; }
    #fatura-tbody .btn-secondary  { width: auto !important; padding: 0.35rem 0.6rem !important; }

    /* ── Modal: campos em 1 coluna ── */
    .modal-overlay .btn-secondary { width: auto !important; }
    .tx-form-row { grid-template-columns: 1fr !important; }

    .modal-overlay { bottom: 0; align-items: flex-end; padding: 0; }
    .modal-card    {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1.5rem 1.5rem 0 0;
        max-height: calc(100dvh - 140px);
    }

    /* ── Botões do rodapé do modal de transação ── */
    #tx-edit-modal .modal-footer-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #tx-edit-modal .modal-footer-row > button:first-child { width: 100%; justify-content: center; }
    #tx-edit-modal .modal-footer-row > div { width: 100%; display: flex; gap: 0.5rem; }
    #tx-edit-modal .modal-footer-row > div > button { flex: 1; justify-content: center; }
}

/* Modal overlay genérico */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 1rem;
}
.modal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    max-height: 90vh;
    overflow-y: auto;
    width: 100%;
}
.modal-close-btn {
    background: none;
    border: none;
    color: var(--dim);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.4rem;
    transition: background 0.15s, color 0.15s;
}
.modal-close-btn:hover { background: var(--bg-sec); color: var(--text); }

/* Modal edição de transação */
#tx-installment-fields { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
/* Cabeçalho de modal: título à esquerda, X à direita. A regra só existia pro
   modal de transação, então nos outros (WhatsApp, parcela, pagamento, ciclo) o
   botão de fechar caía numa linha embaixo do título, solto no meio do card. */
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
#tx-edit-modal .modal-header { align-items: center; padding: 1.25rem 1.25rem 0; }

/* O X de fechar tem alvo próprio: quadrado, cantos arredondados e um cinza que
   não briga com o título. */
.modal-close-btn {
    width: 30px; height: 30px; border-radius: 0.6rem; flex-shrink: 0;
    align-items: center; justify-content: center; padding: 0;
}
.modal-close-btn i, .modal-close-btn svg { width: 17px; height: 17px; }

/* Mobile overflow fix */
html, body { overflow-x: hidden; width: 100%; max-width: 100vw; }

/* ─── SIMULADOR ─────────────────────────────────────────────────────────── */
.sim-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.sim-full { grid-column: 1 / -1; }
@media (max-width: 850px) { .sim-form-grid { grid-template-columns: 1fr !important; } .sim-full { grid-column: 1 !important; } }

/* ─── ABASTECIMENTO ──────────────────────────────────────────────────────── */
.abast-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 900px) { .abast-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 500px) { .abast-stats-grid { grid-template-columns: 1fr !important; } }

#abast-table td { padding: 0.4rem 0.75rem !important; font-size: 0.855rem; white-space: nowrap; }
#abast-table th { padding: 0.6rem 0.75rem !important; font-size: 0.78rem; }

/* Spinner para o botão de buscar rota */
@keyframes lucide-spin { to { transform: rotate(360deg); } }
.lucide-spin { animation: lucide-spin 0.8s linear infinite; }

/* ── Simulador: modal de resultado ───────────────────────────── */
.sim-winner-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    text-align: center;
    transition: background 0.3s, border-color 0.3s;
}
.sim-winner-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--dim);
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.sim-winner-name {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}
.sim-winner-economia {
    font-size: 0.82rem;
    color: var(--dim);
}
.sim-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
}
.sim-compare-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 0.9rem 0.75rem;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.sim-compare-col.sim-col-winner {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.sim-compare-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 0.5rem; }
.sim-compare-litros { font-size: 1.05rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.sim-compare-valor { font-size: 1.3rem; font-weight: 800; margin: 0.15rem 0; }
.sim-compare-km { font-size: 0.72rem; color: var(--dim); }
.sim-compare-divider {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--dim);
    text-align: center;
}

/* ─── MILHAS ──────────────────────────────────────────────────────────────── */
/* Companion Pass + Upgrade de Cabine lado a lado (não seguem o filtro de mês) */
.milhas-metas-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 700px) {
    .milhas-metas-row { grid-template-columns: 1fr; }
}
.milhas-comp-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
}
.milhas-comp-card.winner {
    border-color: #f59e0b66;
    background: rgba(245,158,11,0.06);
}
.milhas-bar-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 4px;
}
.milhas-bar-mes {
    font-size: 0.65rem;
    color: var(--dim);
    min-width: 46px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}
.milhas-bar-track {
    flex: 1;
    background: var(--border);
    border-radius: 99px;
    height: 12px;
    overflow: hidden;
    position: relative;
}
.milhas-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
    display: flex;
    align-items: center;
    padding-right: 7px;
    justify-content: flex-end;
}
.milhas-bar-fill span {
    font-size: 0.55rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.milhas-bar-val {
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 38px;
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}
/* Milhas stats: 3 colunas fixas, reduz em telas menores */
.milhas-stats-grid { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1300px) { .milhas-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 850px)  { .milhas-stats-grid { grid-template-columns: 1fr !important; } }

/* ── Simulador Avançado de Milhas ── */
.msim-tab {
    flex: 1;
    background: none;
    border: none;
    border-radius: 99px;
    padding: 7px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dim);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    text-align: center;
}
.msim-tab.active {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.msim-tab:hover:not(.active) { color: var(--text); }

/* Grid de campos 2 colunas */
.msim-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0.75rem;
}
.msim-fields-grid input {
    padding: 0.6rem 0.75rem !important;
}
.msim-field-full { grid-column: 1 / -1; }
.msim-field-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dim);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Painel de resultado */
.msim-result-panel {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.msim-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--border);
}
.msim-mini-stat {
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-right: 1px solid var(--border);
}
.msim-mini-stat:last-child { border-right: none; }
.msim-mini-label {
    font-size: 0.6rem;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.msim-mini-val {
    font-size: 0.85rem;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    letter-spacing: -0.01em;
}
.msim-primary-result {
    padding: 0.5rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.msim-primary-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.msim-primary-val {
    font-size: 1.45rem;
    font-weight: 900;
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent);
    letter-spacing: -0.03em;
}

.msim-conv-btn {
    background: none;
    border: none;
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dim);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}
.msim-conv-btn.active {
    background: var(--card);
    color: var(--text);
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.msim-conv-btn:hover:not(.active) { color: var(--text); }

/* Conversor de pontos — toggle e input em cima, resultado embaixo (empilhado) */
.msim-conv-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 500px) {
    .msim-fields-grid { grid-template-columns: 1fr; }
    .msim-field-full { grid-column: 1; }
    .msim-mini-stats { grid-template-columns: repeat(2, 1fr); }
    .msim-mini-stat:nth-child(2) { border-right: none; }
    .msim-mini-stat:nth-child(3) { border-top: 1px solid var(--border); }

    /* Mini-stats do simulador: 2 colunas no mobile já cobre, reforça aqui */
    .msim-primary-val { font-size: 1.3rem !important; }
}

/* ── Cartão de Crédito Ideal ── */
.ci-winner-card {
    background: var(--input-bg);
    border: 1.5px solid #f59e0b55;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ci-winner-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(245,158,11,0.08), transparent 70%);
    pointer-events: none;
}
.ci-rank-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    transition: border-color 0.15s, background 0.15s;
}
.ci-rank-row:hover {
    border-color: var(--accent);
    background: rgba(232,52,28,0.03);
}
.ci-rank-winner {
    border-color: #f59e0b55 !important;
    background: rgba(245,158,11,0.05) !important;
}
@media (max-width: 500px) {
    .ci-rank-row { padding: 0.5rem 0.6rem; gap: 0.5rem; }
}

/* ══════════════════════════════════════════════════════════════
   ABA INVESTIMENTOS
   ══════════════════════════════════════════════════════════════ */
/* Bento Grid V2 */
.inv-bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.inv-bento-card { border-radius: 20px; padding: 1.25rem; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.inv-bento-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.inv-bento-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.inv-bento-label i { width: 16px; height: 16px; }
.inv-bento-label.red { color: var(--primary); }
.inv-bento-label.green { color: #10b981; }
.inv-bento-value { font-family: 'JetBrains Mono', monospace; font-weight: 800; line-height: 1.1; color: var(--text); }
.inv-bento-value.red { color: var(--primary); }
.inv-bento-value.emerald { color: #059669; }
.inv-bento-sub { font-size: 0.75rem; color: var(--text-muted); }
.inv-bento-icon-bg { position: absolute; right: -10px; top: 10px; opacity: 0.04; color: var(--text); pointer-events: none; }
.inv-bento-icon-bg i { width: 140px; height: 140px; }

/* Categories */
.inv-bento-cat { border-radius: 16px; padding: 1rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: transform 0.2s; border: 1px solid var(--border); }
.inv-bento-cat:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.inv-bento-cat .inv-cat-icon { font-size: 1.8rem; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.03); border-radius: 12px; }
[data-theme="dark"] .inv-bento-cat .inv-cat-icon { background: rgba(255,255,255,0.05); }
.inv-bento-cat .inv-cat-info { flex: 1; min-width: 0; }
.inv-bento-cat .inv-cat-name { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv-bento-cat .inv-cat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.inv-bento-cat .inv-cat-pct { font-size: 0.7rem; font-weight: 600; text-align: right; margin-top: -1.2rem; color: var(--text-muted); }

/* Brokers Flex */
.inv-bento-brokers-flex { display: flex; flex-wrap: wrap; gap: 1rem; }
.inv-broker-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 12px; background: rgba(0,0,0,0.02); border: 1px solid var(--border); cursor: pointer; flex: 1; min-width: 150px; transition: background 0.2s; }
[data-theme="dark"] .inv-broker-item { background: rgba(255,255,255,0.02); }
.inv-broker-item:hover { background: var(--bg-sec); }
.inv-broker-logo { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.inv-broker-info { display: flex; flex-direction: column; }
.inv-broker-name { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.inv-broker-value { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-weight: 700; color: var(--text); }

/* ── Investimentos redesign (inv2) ─────────────────────────────────────────── */
.inv2-section-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.inv2-card { background: var(--card); border-radius: 18px; border: 1px solid var(--border); }
/* clamp() em vez de rem fixo: acompanha a largura da tela, então um patrimônio
   de 7+ dígitos nunca estoura o card, sem precisar de breakpoint específico. */
.inv2-hero-value { font-size: clamp(1.5rem, 7vw, 2.8rem); font-weight: 800; color: var(--text); letter-spacing: -1.5px; line-height: 1; margin-top: 14px; font-family: 'JetBrains Mono', monospace; overflow-wrap: break-word; }
.inv2-mini-card { background: var(--bg-sec); border-radius: 10px; padding: 9px 14px; }
.inv2-mini-label { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.inv2-mini-value { font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.inv2-variation-pill { display: inline-flex; align-items: center; gap: 5px; background: rgba(16,185,129,.12); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 700; color: #16a34a; }
.inv2-ativo-card { background: var(--card); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 13px; cursor: pointer; border: 1px solid var(--border); transition: transform .18s, box-shadow .18s; }
.inv2-ativo-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.09); }
.inv2-ativo-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; position: relative; }
.inv2-ativo-name { font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inv2-ativo-value { font-size: 1.3rem; font-weight: 800; color: var(--text); letter-spacing: -.6px; font-family: 'JetBrains Mono', monospace; margin-top: 3px; }
.inv2-broker-card { background: var(--card); border-radius: 16px; padding: 17px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); cursor: pointer; transition: transform .18s, box-shadow .18s; }
.inv2-broker-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.inv2-broker-avatar { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 13px; letter-spacing: -.5px; }
.inv2-broker-name { font-size: 12px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: .4px; }
.inv2-broker-pct { font-size: 11px; font-weight: 700; color: var(--dim); flex-shrink: 0; }
.inv2-broker-value { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -.5px; margin-top: 2px; font-family: 'JetBrains Mono', monospace; }
.inv2-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--border); transition: background .15s, color .15s; }
.inv2-chip.active { background: var(--bg-sec); color: var(--text); }
.inv2-chip.inactive { background: var(--card); color: var(--dim); }
.inv2-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 900px) {
    .inv2-ativos-grid { grid-template-columns: repeat(2,1fr) !important; }
    .inv2-brokers-grid { grid-template-columns: repeat(2,1fr) !important; }
    .inv2-top-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .inv2-ativos-grid { grid-template-columns: repeat(2,1fr) !important; }
    .inv2-brokers-grid { grid-template-columns: 1fr !important; }
}

/* Detail panel */
.inv-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 502; opacity: 0; pointer-events: none; transition: opacity .3s; }
.inv-overlay.open { opacity: 1; pointer-events: all; }
.inv-panel { position: fixed; top: 0; right: 0; width: 78%; max-width: 1040px; height: 100vh; background: var(--bg); z-index: 503; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.32,.72,0,1); box-shadow: -6px 0 36px rgba(0,0,0,.13); }
.inv-panel.open { transform: translateX(0); }
.inv-panel-hdr { display: flex; align-items: center; gap: .9rem; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-sec); }
.inv-panel-icon { font-size: 1.6rem; }
.inv-panel-title { flex: 1; }
.inv-panel-title h2 { font-size: 1.1rem; margin-bottom: .1rem; }
.inv-panel-title p  { font-size: .78rem; color: var(--text-muted); }
.inv-panel-close { background: var(--input-bg); border: 1px solid var(--border); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); transition: .2s; font-size: .9rem; flex-shrink: 0; }
.inv-panel-close:hover { background: rgba(232,52,28,.08); color: var(--primary); border-color: var(--primary); }
.inv-panel-summary { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.inv-sum-item { padding: .9rem 1.4rem; border-right: 1px solid var(--border); }
.inv-sum-item:last-child { border-right: none; }
.inv-sum-label { font-size: .66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .25rem; }
.inv-sum-value { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; }
.inv-sum-value.pos { color: #059669; }
.inv-filter-bar { display: flex; align-items: center; gap: .65rem; padding: .9rem 1.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-sec); flex-wrap: wrap; }
.inv-search { flex: 1; min-width: 160px; max-width: 240px; padding: .5rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); color: var(--text); font-size: .82rem; outline: none; transition: border-color .2s; }
.inv-search:focus { border-color: var(--primary); }
.inv-search::placeholder { color: var(--text-muted); }
.inv-filter-select { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--input-bg); color: var(--text); font-size: .82rem; cursor: pointer; outline: none; }
.inv-pills { display: flex; gap: .35rem; }
.inv-pill { padding: .3rem .7rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: .75rem; font-weight: 600; cursor: pointer; transition: .15s; }
.inv-pill:hover { border-color: var(--primary); color: var(--primary); }
.inv-pill.active { background: var(--primary); color: white; border-color: var(--primary); }
.inv-count { font-size: .72rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.inv-panel-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.75rem; }
.inv-table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.inv-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.inv-table thead { background: rgba(0,0,0,.025); position: sticky; top: 0; z-index: 1; }
.inv-table th { padding: .65rem .9rem; text-align: left; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; transition: color .15s; }
.inv-table th:hover { color: var(--primary); }
.inv-table th.num, .inv-table td.num { text-align: right; }
.inv-table th .si { display: inline-block; margin-left: .3rem; opacity: .3; font-size: .65rem; }
.inv-table th.sasc .si, .inv-table th.sdesc .si { opacity: 1; color: var(--primary); }
.inv-table td { padding: .6rem .9rem; border-bottom: 1px solid rgba(0,0,0,.04); vertical-align: middle; }
.inv-table td.mono { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 600; }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr:hover td { background: rgba(0,0,0,.018); }
.inv-table tfoot td { background: rgba(0,0,0,.025); font-weight: 700; border-top: 2px solid var(--border); }

/* Cabeçalhos ordenáveis da tabela de Detalhamento (Balanço) — mesmo padrão visual do .inv-table */
#detail-thead th.detail-sortable { cursor: pointer; user-select: none; transition: color .15s; }
#detail-thead th.detail-sortable:hover { color: var(--primary); }
#detail-thead th.detail-sortable .si { display: inline-block; margin-left: .3rem; opacity: .3; font-size: .65rem; }
#detail-thead th.detail-sortable.sasc .si, #detail-thead th.detail-sortable.sdesc .si { opacity: 1; color: var(--primary); }
.iv-pos { color: #059669; } .iv-neg { color: #e63b2e; }
.iv-ticker { display: inline-block; background: var(--input-bg); border: 1px solid var(--border); padding: .12rem .5rem; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: .73rem; font-weight: 700; }
.iv-seg   { display: inline-block; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.06); padding: .08rem .45rem; border-radius: 20px; font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.iv-rate  { font-family: 'JetBrains Mono', monospace; font-size: .73rem; font-weight: 700; color: #059669; }
.iv-venc  { font-size: .7rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.iv-cat   { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.iv-cat.rf    { background: rgba(29,61,137,.1);  color: #1d3d89; }
.iv-cat.an    { background: rgba(34,139,34,.1);  color: #146b14; }
.iv-cat.fii   { background: rgba(180,83,9,.1);   color: #b45309; }
.iv-cat.fundo { background: rgba(109,40,217,.1); color: #6d28d9; }

[data-theme="light"] .inv-table thead { background: rgba(0,0,0,.025); }
[data-theme="light"] .inv-table tr:hover td { background: rgba(0,0,0,.018); }
[data-theme="light"] .inv-table td { border-bottom-color: rgba(0,0,0,.04); background: transparent; box-shadow: none; }
[data-theme="light"] .inv-table tfoot td { background: rgba(0,0,0,.025); }
[data-theme="light"] .inv-panel { background: #faf8f8; }
[data-theme="light"] .inv-panel-hdr { background: #ffffff; }
[data-theme="light"] .iv-seg { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .inv-filter-bar { background: #ffffff; }

@media (max-width: 1024px) {
    .inv-bento-grid { grid-template-columns: repeat(2, 1fr); }
    .inv-bento-card.col-span-3 { grid-column: span 2; }
}
@media (max-width: 850px) {
    /* z-index acima da topbar fixa (9998): o painel ocupa a tela inteira, e com
       z-index 503 a barra "Finanças Pro" ficava por cima do título dele */
    .inv-panel { width: 100%; z-index: 9999; padding-top: env(safe-area-inset-top); }
    .inv-overlay { z-index: 9998; }
    .inv-panel-summary { grid-template-columns: 1fr 1fr; }
    .inv-panel-summary .inv-sum-item:nth-child(2) { border-right: none; }
    .inv-panel-hdr { padding: 1rem 1.1rem; }
    .inv-panel-body { padding: 1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
    .inv-bento-grid { grid-template-columns: 1fr; }
    .inv-bento-card.col-span-2 { grid-column: span 1; }
    .inv-bento-card.col-span-3 { grid-column: span 1; }
}

.inv-table td.iv-pos { color: #059669 !important; }
.inv-table td.iv-neg { color: #e63b2e !important; }
/* Manage Assets UI Refactor */
.form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
}
.form-floating input, .form-floating select {
    width: 100%;
    padding: 20px 12px 6px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}
.form-floating input:focus, .form-floating select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}
.form-floating label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
}
.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label,
.form-floating select ~ label {
    top: 10px;
    font-size: 0.65rem;
    color: var(--accent-color);
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
}
.btn-icon:hover {
    background: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-color);
}
.btn-icon.edit:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background: rgba(16, 185, 129, 0.1);
}
.btn-icon.delete:hover {
    color: #e63b2e;
    border-color: #e63b2e;
    background: rgba(232, 52, 28, 0.1);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE FIXES — Legibilidade (v32)
   ══════════════════════════════════════════════════════════════ */

/* Colunas secundárias: visíveis no desktop, ocultas no mobile */
@media (max-width: 850px) {
    .abast-col-desktop,
    .dv-col-desktop { display: none !important; }
}

@media (max-width: 850px) {

    /* Corretoras: 1 coluna no mobile (valores grandes não caem 2-col) */
    .inv-broker-grid { grid-template-columns: 1fr !important; }
    .inv-broker-value { font-size: 1.15rem; }

    /* Contas a pagar: sombra sutil para distinguir no tema claro */
    [data-theme="light"] #contas-body tr,
    [data-theme="light"] #receitas-body tr {
        box-shadow: 0 1px 4px rgba(38,19,24,0.08), 0 0 0 1px rgba(38,19,24,0.07) !important;
    }

    /* Filtros de categoria (balanço): scroll horizontal sem quebrar linha */
    .filter-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .filter-pills::-webkit-scrollbar { display: none; }
    .filter-pill { flex-shrink: 0; }

    /* Chart de distribuição: garantir que não ultrapasse o container */
    .chart-container { overflow: hidden; max-width: 100%; }
}

/* Calculadoras: grade de botões — cada um abre seu popup (calc-*-modal em
   index.html, via openCalcModal). Antes eram 4 cards abertos direto na tela;
   virou popup porque ficava informação demais junta (pedido do Rodrigo). */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 850px) {
    .calc-grid {
        grid-template-columns: 1fr;
    }
}
.calc-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    min-height: 190px;
    cursor: pointer;
    transition: border-color .15s, transform .15s;
    font-family: inherit;
}
.calc-btn:hover { border-color: var(--primary); transform: translateY(-2px); }
.calc-btn-icon {
    width: 60px; height: 60px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.calc-btn-icon svg { width: 28px; height: 28px; }
.calc-btn-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.calc-btn-sub { font-size: 0.85rem; color: var(--dim); margin-top: 4px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE / ANDROID — BLINDAGEM DE LAYOUT
   ---------------------------------------------------------------------------
   Bug real (15/08/2026, Android): a tela Início "comia" a lateral — o card de
   Metas e o de Próximos Vencimentos ficavam 43px mais largos que a viewport,
   criando scroll horizontal na PÁGINA INTEIRA. Quando o dedo encostava e a
   página deslizava de lado, tudo aparecia cortado (print do Rodrigo).

   Causa raiz: item de grid/flex tem `min-width: auto` por padrão — ou seja,
   ele NUNCA encolhe abaixo da largura mínima do próprio conteúdo. Se o
   conteúdo (uma linha de vencimento, um canvas de gráfico, uma tabela) pede
   mais que o track, o item estica e empurra o documento inteiro. `min-width:0`
   é o que autoriza o item a encolher e deixar o conteúdo se virar por dentro.

   Esta seção vem por último de propósito: é a rede de segurança final, então
   precisa vencer as regras anteriores sem precisar de !important em tudo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Itens de grid/flex podem encolher (a causa raiz, vale em toda largura) ──
   Não fica dentro do @media de propósito: o mesmo problema aparecia na faixa
   851–1100px (tablet, celular grande deitado), onde o layout já é o de desktop
   mas a tela ainda é estreita. */
.tab-content, .sub-content,
.stats-grid > *, .overview-widgets > *, [class*="-grid"] > *,
.widget, .stat-card, .table-container, .chart-container,
.glass, .modal-content {
    min-width: 0;
    max-width: 100%;
}
/* Campo dentro de linha flex (ex: emoji + nome + botão em Categorias) não
   encolhe abaixo do texto do placeholder e empurra o botão pra fora */
input, select, textarea { min-width: 0; max-width: 100%; }

@media (max-width: 850px) {

    /* ── 1. A página nunca rola de lado ────────────────────────────────── */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    .app-content {
        max-width: 100%;
        /* clip (e não hidden) não cria contexto de rolagem — mantém o
           position:sticky dos cabeçalhos de tabela funcionando */
        overflow-x: clip;
    }

    /* ── 3. Nada renderiza mais largo que o próprio container ──────────── */
    img, svg, canvas, video, iframe {
        max-width: 100%;
        height: auto;
    }
    /* Chart.js escreve width/height inline no canvas; sem isso ele mantém a
       largura antiga depois de um resize e volta a esticar o card */
    .chart-container > canvas { max-width: 100% !important; }

    /* Texto longo (nome de ativo, e-mail, URL de conexão) quebra em vez de
       alargar o card */
    h1, h2, h3, h4, p, span, label, td, th, li, strong {
        overflow-wrap: break-word;
    }

    /* ── 4. Barras de abas/chips: rolam sozinhas, sem arrastar a página ── */
    #detail-tab-bar, .sub-tab-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    #detail-tab-bar::-webkit-scrollbar,
    .sub-tab-bar::-webkit-scrollbar { display: none; }

    /* Filtros do painel de investimentos: aqui quebrar linha é melhor que rolar
       — a busca ocupa a primeira linha inteira e as pílulas ficam embaixo,
       todas visíveis (antes "Negativos" ficava escondido fora da tela) */
    .inv-filter-bar { flex-wrap: wrap; padding: .8rem 1.1rem; row-gap: .5rem; }
    .inv-search { flex: 1 1 100%; max-width: 100%; }
    .inv-filter-select { flex: 1 1 100%; }
    .inv-pills { display: flex; gap: .4rem; flex-wrap: wrap; }
    #detail-tab-bar > *, .sub-tab-bar > * { flex-shrink: 0; }
    /* Esmaecer a borda direita avisa que a barra continua além da tela — sem
       isso a última aba fica cortada na metade e parece bug de layout */
    #detail-tab-bar {
        -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
        mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    }

    /* Container de tabela que ainda precise rolar, rola só ele */
    .table-container { overflow-x: auto; overscroll-behavior-x: contain; }

    /* ── 5. Grids de duas colunas declarados por style inline ──────────────
       Precisam de !important porque style inline vence media query. Cada um
       destes é "conteúdo ao lado de conteúdo" (tabela + gráfico), que em
       360px vira duas colunas de ~150px — ilegíveis nas duas. */
    #dividendos-resumo-row,
    #dividendos-resumo-row > .table-container { grid-template-columns: 1fr !important; }
    #dividendos-resumo-row .table-container { max-height: none !important; }
    /* O canvas do gráfico de dividendos tem min-height de 340px pensado pro
       desktop; no celular isso é meia tela de altura pra um gráfico só */
    #dividendosLineChart { max-height: 220px; }
    #dividendos-resumo-row .widget > div { min-height: 220px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — INÍCIO: Metas do Mês e Próximos Vencimentos
   Os dois cards que estouravam. Layout refeito para caber em 360px sem
   truncar valor nenhum (o valor é a informação que o Rodrigo abre o app
   para ver — quem quebra linha é o rótulo, nunca o número).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Linha de meta (classes vindas de renderHomeMetas) */
.meta-row + .meta-row { margin-top: 0; }
.meta-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 4px;
}
.meta-label { font-size: 0.82rem; font-weight: 600; color: var(--text); min-width: 0; }
.meta-values { font-size: 0.75rem; color: var(--dim); text-align: right; white-space: nowrap; }
.meta-values.over { color: #e11d48; }
.meta-track { background: var(--border); border-radius: 99px; height: 7px; overflow: hidden; }
.meta-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.meta-pct { text-align: right; font-size: 0.68rem; color: var(--dim); margin-top: 2px; }
.meta-pct.over { color: #e11d48; }

/* Bloco valor + botão de cada vencimento (classes vindas de renderOverview) */
.upcoming-info { flex: 1 1 auto; min-width: 0; }
.upcoming-info h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upcoming-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.upcoming-pay-btn {
    border: none; border-radius: 8px; padding: 5px 10px;
    font-size: 0.72rem; font-weight: 600; cursor: pointer;
    transition: all .15s; white-space: nowrap;
}

@media (max-width: 850px) {
    /* Rótulo da meta pode quebrar em duas linhas; o valor nunca quebra */
    .meta-head { flex-wrap: wrap; }
    .meta-values { flex-shrink: 0; }

    /* Vencimento: valor em cima do botão libera ~55px de largura para o nome
       da conta, que antes era truncado em "Condomí…" numa tela de 360px */
    .upcoming-item { gap: 0.7rem; padding: 0.8rem 0.85rem; }
    .upcoming-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 0.35rem;
    }
    .upcoming-amount { font-size: 0.95rem; }
    .day-badge { min-width: 42px; width: 42px; height: 42px; font-size: 0.95rem; }
    .upcoming-pay-btn { padding: 6px 12px; min-height: 30px; }
    #upcoming-bills { padding-right: 0; }

    /* "⏰ Próximos Vencimentos" + "2 contas nos próximos 7 dias" lado a lado
       quebravam os dois em duas linhas cada; o resumo desce pra linha própria */
    .widget-head { flex-wrap: wrap; row-gap: 2px; }
    .widget-head > h3 { flex: 1 1 100%; }
    #upcoming-summary { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — DENSIDADE
   No desktop um stat card tem 2rem de padding e valor de 2rem; no celular
   isso faz UM card ocupar quase um quinto da tela e obriga a rolar muito
   pra ver qualquer coisa. Aqui eles ficam compactos sem perder legibilidade,
   e o valor usa clamp() pra não estourar quando o número cresce
   (R$ 102.303,30 já não cabia em fonte fixa numa tela de 360px).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 850px) {
    .stat-card { padding: 1.1rem 1.2rem; border-radius: 16px; }
    .stat-label { margin-bottom: 0.5rem; font-size: 0.7rem; }
    .stat-value { font-size: clamp(1.35rem, 6.5vw, 1.9rem); }
    .stat-icon-bg { width: 60px; height: 60px; right: -6px; bottom: -6px; }
    .widget { padding: 1.1rem; border-radius: 18px; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.05rem; }
    /* Cabeçalho de página: título e ações empilhados, ações ocupando a linha */
    .header-actions { margin-bottom: 1.25rem; gap: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANDROID — ERGONOMIA E CHROME DO SISTEMA
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 850px) {
    /* Barra de gestos / notch: respeita as áreas seguras do aparelho
       (funciona junto com viewport-fit=cover no index.html) */
    .mobile-topbar {
        padding-top: env(safe-area-inset-top);
        height: calc(56px + env(safe-area-inset-top));
    }
    .app-content {
        padding-top: calc(56px + env(safe-area-inset-top) + 1rem);
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }
    .sidebar { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

    /* Toque: sem flash cinza do Chrome Android, sem delay de 300ms e sem
       seleção acidental de texto ao segurar um botão */
    button, .nav-item, .nav-sub-item, .chip, .holder-chip,
    .detail-tab-btn, .sub-tab-btn, .btn-icon, .btn-icon-sm, a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
    button, .nav-item, .nav-sub-item { -webkit-user-select: none; user-select: none; }

    /* Alvo de toque mínimo confortável (recomendação Material: 48dp) */
    .btn-icon, .btn-icon-sm, .pay-toggle-btn, .row-actions button {
        min-width: 36px;
        min-height: 36px;
    }
    .nav-item, .nav-sub-item { min-height: 44px; }

    /* Rolagem: o "puxão" do fim da lista não arrasta a página atrás */
    .modal-content, .upcoming-scroll, .inv-panel-body, .sidebar {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Campo numérico abre o teclado numérico e não sofre zoom (o 16px já é
       garantido acima; aqui só evitamos o spinner ocupando espaço) */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}


/* ── Treemap de Distribuição por Categoria: identificação no toque ────────────
   No celular não existe hover, então o `title` das fatias nunca aparecia: as
   caixas pequenas ficavam sendo blocos coloridos sem nome. Duas saídas, ambas
   valendo também no desktop: tocar numa fatia abre a etiqueta abaixo, e o que
   nem como fatia coube no desenho é listado na legenda. */
.tm-tip {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    /* Etiqueta escura fixa nos dois temas, como todo tooltip: ela flutua por cima
       das fatias coloridas, então não pode herdar o texto do tema claro (ficava
       escuro sobre escuro e sumia). */
    background: rgba(15, 12, 14, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    font-size: 0.78rem;
    color: #fff;
    pointer-events: none;
    max-width: 90%;
}
.tm-tip strong { font-weight: 700; font-size: 0.82rem; color: #fff; }
.tm-tip span { color: rgba(255,255,255,0.75); font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; }
/* Só a fatia agregada traz esta terceira linha: o que está somado dentro dela.
   Quebra em várias linhas porque são várias categorias de uma vez. */
.tm-tip .tm-tip-lista {
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.6);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.12);
    white-space: normal;
}

.tm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-top: 0.6rem;
}
.tm-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--input-bg);
    font-size: 0.74rem;
    max-width: 100%;
}
.tm-legend-toggle {
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
}
.tm-legend-toggle:hover { border-color: var(--primary); }
.tm-legend-caret { color: var(--dim); font-size: 0.6rem; }
.tm-legend-off { color: var(--dim); font-weight: 400; font-size: 0.66rem; }
.tm-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.tm-legend-name { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-legend-val { color: var(--dim); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; white-space: nowrap; }

/* ── Tabela do Detalhamento no mobile: card compacto em vez de lista empilhada ─
   O modo card genérico transforma cada coluna numa linha "RÓTULO ....... valor".
   Com 5 colunas, um único lançamento ocupava meia tela e o que importa (descrição
   e valor) ficava do mesmo tamanho do resto. Aqui o card vira uma grade: descrição
   e valor em destaque na primeira linha, categoria/data como apoio na segunda,
   pagamento e ações na terceira. */
@media (max-width: 850px) {
    /* O cabeçalho continua escondido: a regra genérica some com ele via
       `thead tr { display:none }`, e o display:grid abaixo é mais específico —
       sem repetir isso aqui, os nomes das colunas reapareceriam soltos no topo. */
    table.table-cards thead tr { display: none; }
    table.table-cards tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 0.5rem;
        row-gap: 0.35rem;
        align-items: center;
        padding: 0.7rem 0.9rem;
    }
    table.table-cards td {
        display: block;
        padding: 0;
        text-align: left;
        min-width: 0;
    }
    table.table-cards td::before { display: none; }
    /* Linha 1: o que foi (ocupa as duas primeiras colunas) e quanto custou */
    table.table-cards td[data-label="Descrição"] {
        grid-column: 1 / span 2;
        grid-row: 1;
        font-weight: 600;
        font-size: 0.92rem;
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    table.table-cards td[data-label="Valor"] {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
        font-weight: 800;
        font-size: 1rem;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        white-space: nowrap;
    }
    /* Linha 2: contexto à esquerda, ações à direita — sem linha só de botões */
    table.table-cards td[data-label="Categoria"] {
        grid-column: 1;
        grid-row: 2;
    }
    table.table-cards td[data-label="Categoria"] .category-tag {
        font-size: 0.72rem;
        padding: 0.15rem 0.5rem;
    }
    table.table-cards td[data-label="Data"],
    table.table-cards td[data-label="Mês Referência"] {
        grid-column: 2;
        grid-row: 2;
        font-size: 0.74rem;
        color: var(--dim);
        font-family: 'JetBrains Mono', monospace;
        white-space: nowrap;
    }
    table.table-cards td[data-label="Pagamento"] {
        grid-column: 1 / span 2;
        grid-row: 3;
        font-size: 0.74rem;
        color: var(--dim);
    }
    /* Sem método de pagamento não sobra linha vazia no card */
    table.table-cards td[data-label="Pagamento"]:empty { display: none; }
    table.table-cards td[data-label="Ações"],
    table.table-cards td.row-actions {
        grid-column: 3;
        grid-row: 2;
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
    table.table-cards td.row-actions { display: flex; justify-content: flex-end; gap: 0.35rem; }
    table.table-cards td.row-actions .btn-icon-sm { width: 28px; height: 28px; font-size: 0.78rem; }
}


/* ── Aba Fatura: barra de ações, resumo e parcelas de terceiros ───────────── */

.fatura-acoes { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Resumo: total à esquerda, divisão por portador à direita. */
.fatura-resumo {
    display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
    gap: 1.5rem; align-items: center; margin-bottom: 1.25rem;
}
.fatura-resumo-total { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.fatura-resumo-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--dim);
}
.fatura-resumo-valor {
    font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.15; color: var(--text);
}
.fatura-resumo-sub { font-size: 0.78rem; color: var(--dim); }
.fatura-resumo-acerto {
    font-size: 0.75rem; color: var(--dim);
    margin-top: 0.35rem; padding-top: 0.4rem; border-top: 1px solid var(--border);
}
.fatura-resumo-split { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

/* Área do gráfico de portadores: altura fixa e contida, pra ele não crescer
   junto com o número de portadores nem esticar o bloco do resumo. */
.fatura-grafico { position: relative; height: 148px; min-height: 148px; }

/* Cabeçalho comum dos blocos da fatura (acerto, parcelas). */
.fatura-bloco-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 0.75rem; margin-bottom: 0.9rem; flex-wrap: wrap;
}
/* `flex: 1 1 200px` e não `flex: 1`: com o botão inencolhível ao lado, o título
   era espremido até a largura zero no celular e quebrava uma letra por linha.
   Abaixo de ~200px de espaço ele agora empurra o botão pra linha de baixo. */
.fatura-bloco-titulo { flex: 1 1 200px; min-width: 0; }
.fatura-bloco-head > .btn-secondary { flex-shrink: 0; white-space: nowrap; }
.fatura-bloco-sub { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--dim); }

/* Parcelas de terceiros — agrupadas por pessoa.
   A versão anterior era uma linha por dívida com o nome num chip roxo (que o
   Rodrigo leu como "portador do cartão") e uma fileira de quadradinhos mudos.
   Agora a pessoa é o cabeçalho do grupo, com o quanto ela deve no mês; as
   parcelas mês a mês ficam escondidas atrás de um "ver as N parcelas". */

.parcela-grupo { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.parcela-grupo:first-child { padding-top: 0.1rem; }
.parcela-grupo:last-child { border-bottom: 0; padding-bottom: 0.1rem; }

.parcela-grupo-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem;
}
.parcela-grupo-nome {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; min-width: 0;
}
.parcela-grupo-nome .pg-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.parcela-grupo-deve { font-size: 0.75rem; color: var(--dim); white-space: nowrap; }

/* Cada compra cabe em duas linhas: a de cima com nome, parcela do mês, valor e
   a ação; a de baixo, miúda, com o resto. A versão anterior gastava cinco. */
.parcela-item { padding: 0.3rem 0 0.3rem 0.7rem; }
.parcela-item + .parcela-item { border-top: 1px dashed var(--border); padding-top: 0.45rem; margin-top: 0.35rem; }

.parcela-linha {
    display: flex; align-items: center; gap: 0.5rem;
    min-width: 0; flex-wrap: wrap;
}
.parcela-nome {
    font-weight: 600; font-size: 0.85rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.parcela-chip {
    font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
    color: var(--dim); background: var(--border);
    border-radius: 99px; padding: 0.05rem 0.4rem; flex-shrink: 0;
}
.parcela-preco { font-weight: 700; font-size: 0.85rem; margin-left: auto; white-space: nowrap; }

.parcela-btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem; border-radius: 99px;
    font: inherit; font-size: 0.72rem; font-weight: 600;
    border: 1px solid rgba(34,197,94,0.4); background: none;
    color: #22c55e; cursor: pointer; white-space: nowrap;
    flex-shrink: 0; transition: background 0.15s;
}
.parcela-btn:hover { background: rgba(34,197,94,0.1); }
.parcela-btn.recebida { background: rgba(34,197,94,0.12); }
.parcela-btn.fora {
    border-color: transparent; color: var(--dim); cursor: default;
    padding: 0.2rem 0.35rem;
}
/* Estados de quem tem portador: são selos, não botões — o dinheiro é cobrado no
   Acerto do mês, aqui só se informa se a compra foi encontrada na fatura. */
.parcela-btn.na-fatura {
    background: rgba(34,197,94,0.12); cursor: default;
}
.parcela-btn.sumida {
    border-color: rgba(244,63,94,0.4); color: #f43f5e;
    background: rgba(244,63,94,0.08); cursor: help;
}
.parcela-btn.na-fatura:hover, .parcela-btn.sumida:hover { background: rgba(34,197,94,0.12); }
.parcela-btn.sumida:hover { background: rgba(244,63,94,0.08); }
.parcela-mes-status.sumida { color: #f43f5e; }

.parcela-meta {
    font-size: 0.72rem; color: var(--dim);
    display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
}
.parcela-toggle {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; font-size: 0.72rem; color: var(--dim);
    cursor: pointer; text-decoration: underline; margin-left: auto;
}
.parcela-toggle:hover { color: var(--text); }

/* Ações sempre visíveis: escondê-las no hover fazia elas simplesmente não
   existirem no celular, que é onde ele mais mexe nisso. */
.parcela-acoes { display: flex; gap: 0.1rem; flex-shrink: 0; }
.parcela-acoes .icon-btn {
    background: none; border: 0; padding: 0.2rem; border-radius: 0.4rem;
    color: var(--dim); cursor: pointer; line-height: 0;
}
.parcela-acoes .icon-btn:hover { background: var(--hover, rgba(128,128,128,0.1)); }

/* Lista mês a mês, aberta sob demanda */
.parcela-meses {
    margin-top: 0.4rem; border-left: 2px solid var(--border); padding-left: 0.6rem;
    display: flex; flex-direction: column; gap: 0.15rem;
}
.parcela-mes-linha {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.74rem; flex-wrap: wrap;
}
.parcela-mes-num {
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
    color: var(--dim); width: 34px; flex-shrink: 0;
}
.parcela-mes-ref { width: 62px; flex-shrink: 0; }
.parcela-mes-status { flex: 1; min-width: 90px; color: var(--dim); }
.parcela-mes-status.paga { color: #22c55e; }
.parcela-mes-status.atual { color: #f59e0b; font-weight: 600; }
.parcela-mes-acao {
    background: none; border: 0; padding: 0.1rem 0.35rem; border-radius: 0.4rem;
    font: inherit; font-size: 0.72rem; color: var(--dim);
    cursor: pointer; text-decoration: underline;
}
.parcela-mes-acao:hover { color: var(--text); }

.parcela-acoes { display: flex; gap: 0.15rem; flex-shrink: 0; }
.parcela-acoes .icon-btn {
    background: none; border: 0; padding: 0.3rem; border-radius: 0.5rem;
    color: var(--dim); cursor: pointer; line-height: 0;
}
.parcela-acoes .icon-btn:hover { background: var(--hover, rgba(128,128,128,0.1)); }

@media (max-width: 850px) {
    .fatura-resumo { grid-template-columns: 1fr !important; gap: 1.1rem; }
    /* Sem largura pra tudo numa linha, as ações descem — encostadas na direita,
       embaixo do botão de marcar, e não soltas no meio do card. */
    .parcela-acoes { margin-left: auto; }
}


/* Prévia da mensagem do WhatsApp: balão verde, texto como a pessoa recebe. */
.wpp-previa { margin-bottom: 0.9rem; }
.wpp-previa-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    font-size: 0.74rem; color: var(--dim); margin-bottom: 0.4rem;
}
.wpp-previa-nav { display: flex; align-items: center; gap: 0.3rem; }
.wpp-previa-nav button {
    background: none; border: 1px solid var(--border); border-radius: 0.45rem;
    color: var(--dim); cursor: pointer; padding: 0.1rem 0.2rem; display: flex;
}
.wpp-previa-nav button:hover { color: var(--text); border-color: var(--dim); }
.wpp-balao {
    background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.25);
    border-radius: 0.9rem 0.9rem 0.9rem 0.25rem;
    padding: 0.7rem 0.85rem; font-size: 0.8rem; line-height: 1.5;
    max-height: 260px; overflow-y: auto; word-break: break-word;
}

/* Botões de ação da barra da fatura: mesma altura e mesma pílula do
   "Importar Fatura", pra fila do topo ler como uma coisa só. */
.fatura-acao-btn, .btn-wpp {
    font-size: 0.82rem; padding: 0.45rem 0.9rem; border-radius: 99px;
    display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
}
/* O WhatsApp usa o verde da marca: é o botão que dispara mensagem pra fora,
   tem que ser reconhecido antes de ser lido. */
.btn-wpp { color: #22c55e; border-color: rgba(34,197,94,0.4); }
.btn-wpp:hover { background: rgba(34,197,94,0.12); border-color: #22c55e; }

/* Ações do acerto: pílula discreta em vez de link sublinhado. */
.acerto-acao {
    background: none; border: 1px solid var(--border); border-radius: 99px;
    padding: 0.22rem 0.65rem; font: inherit; font-size: 0.72rem; color: var(--dim);
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
}
.acerto-acao:hover { color: var(--text); border-color: var(--dim); }

/* Rodapé da tabela: só a ação destrutiva, encostada na direita e apagada até
   o hover — está ali pra ser encontrada, não pra ser vista o tempo todo. */
.tabela-rodape {
    display: flex; justify-content: flex-end;
    padding: 0.5rem 1.5rem 1rem;
}
.btn-perigo-texto {
    background: none; border: 0; padding: 0.3rem 0.5rem; border-radius: 0.5rem;
    font: inherit; font-size: 0.75rem; color: var(--dim); cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn-perigo-texto:hover { color: #f43f5e; background: rgba(244,63,94,0.08); }

/* Acerto do mês: uma linha por pessoa. Cartõezinhos em grade davam três
   larguras diferentes de número na mesma faixa e o olho não achava o total
   que importa — a lista alinha valor e ações numa coluna só. */
#fatura-acerto-body { display: flex; flex-direction: column; gap: 0.15rem; }
.acerto-linha-wrap { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.acerto-linha-wrap:last-child { border-bottom: 0; padding-bottom: 0.1rem; }
.acerto-linha { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.acerto-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* Nome e botão de cobrar andam juntos e dividem a sobra da linha: assim o
   WhatsApp fica colado no nome mesmo quando ele é curto, em vez de ser
   empurrado até o valor. */
.acerto-nome-wrap { display: flex; align-items: center; gap: 0.1rem; flex: 1; min-width: 0; }
.acerto-nome {
    font-weight: 600; font-size: 0.86rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acerto-valor { display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.acerto-valor strong { font-size: 0.95rem; }
.acerto-rotulo { font-size: 0.7rem; color: var(--dim); }
.acerto-sub { font-size: 0.72rem; color: var(--dim); padding-left: 1rem; margin-top: 0.1rem; }
.acerto-linha .icon-btn {
    background: none; border: 0; cursor: pointer; color: var(--dim);
    padding: 0.25rem; border-radius: 0.45rem; display: flex; flex-shrink: 0;
}
.acerto-linha .icon-btn:hover { background: var(--hover, rgba(128,128,128,0.1)); color: var(--text); }
.acerto-linha .icon-btn.vazio { opacity: 0.25; cursor: default; }
.acerto-linha .icon-btn.vazio:hover { background: none; color: var(--dim); }
/* O WhatsApp fica colado no nome, e não no grupo de ações da direita: é ação
   sobre a pessoa, não sobre o valor. Verde pra ler como "mandar mensagem". */
.acerto-linha .icon-btn.acerto-wpp { color: #22c55e; margin-left: -0.15rem; }
.acerto-linha .icon-btn.acerto-wpp:hover { background: rgba(34,197,94,0.12); color: #22c55e; }
.acerto-linha .icon-btn.acerto-wpp.vazio:hover { background: none; }

/* Histórico de pagamentos de uma pessoa, aberto pelo ícone da linha. */
.acerto-pgtos {
    margin: 0.4rem 0 0.1rem 1rem; padding-left: 0.7rem;
    border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.2rem;
}
.acerto-pgto { display: flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; min-width: 0; }
.acerto-pgto-data { color: var(--dim); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; flex-shrink: 0; }
.acerto-pgto-obs { flex: 1; min-width: 0; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acerto-pgto-valor { color: #22c55e; white-space: nowrap; }
.acerto-pgto .icon-btn {
    background: none; border: 0; cursor: pointer; color: var(--dim);
    padding: 0.15rem; border-radius: 0.4rem; display: flex;
}
.acerto-pgto .icon-btn:hover { background: var(--hover, rgba(128,128,128,0.1)); color: var(--text); }


/* Acerto do mês e Parcelas lado a lado. Flex (e não grid de 2 colunas) porque o
   acerto se esconde sozinho quando não há dependente com o que acertar — com
   grid sobraria metade da faixa vazia; no flex o que restou estica. */
.fatura-duo {
    display: flex; gap: 1.25rem; align-items: flex-start;
    flex-wrap: wrap; margin-bottom: 1.5rem;
}
.fatura-duo > * { flex: 1 1 380px; min-width: 0; margin-bottom: 0 !important; }

@media (max-width: 850px) {
    .fatura-duo { gap: 1rem; }
}

/* Linha-resumo do acerto do mês, acima da lista por pessoa. */
.acerto-resumo {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap;
}
.acerto-resumo-txt { font-size: 0.88rem; }
.acerto-resumo .parcela-toggle { margin-top: 0; }
#fatura-acerto-body { margin-top: 0.75rem; }

/* Ações do resumo do acerto (quitar o mês). */
.acerto-resumo-acoes { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* O resumo do bloco de parcelas em uma linha só, como o do acerto. */
.fatura-bloco-sub { line-height: 1.35; }

/* ── Painel de saldo dentro do modal de pagamento ─────────────────────────────
   Antes o modal era um formulário cego: pedia um valor sem dizer quanto a
   pessoa devia, então "pagou tudo?" virava conta de cabeça com a tela de trás.
   O painel responde isso antes do campo, e os dois botões preenchem o valor. */
.adiant-saldo {
    border: 1px solid var(--border); border-radius: 0.85rem;
    padding: 0.6rem 0.75rem; background: rgba(56,189,248,0.06);
    display: flex; flex-direction: column; gap: 0.55rem;
}
.adiant-saldo-linha {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--dim);
}
.adiant-saldo-falta { font-size: 0.78rem; white-space: nowrap; }
.adiant-saldo-falta strong, .adiant-saldo-info strong { font-size: 0.86rem; }
.adiant-saldo-botoes { display: flex; gap: 0.45rem; flex-wrap: wrap; }
/* Os dois caminhos têm o mesmo peso visual de propósito: pagar parcial é tão
   normal quanto pagar tudo, e destacar um dos dois enviesaria o clique. */
.adiant-opcao {
    flex: 1; min-width: 140px;
    background: var(--card, rgba(255,255,255,0.03));
    border: 1px solid var(--border); border-radius: 99px;
    padding: 0.45rem 0.8rem; font: inherit; font-size: 0.78rem; font-weight: 600;
    color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    transition: border-color 0.15s, background 0.15s;
}
.adiant-opcao:hover { border-color: #38bdf8; background: rgba(56,189,248,0.12); }

/* ── Modal de parcela: dois cronogramas ───────────────────────────────────────
   Uma compra pode cair na fatura em 12x e ser paga em 4x. Os dois grupos de
   campos precisam de moldura própria, senão viram seis caixas soltas em que
   ninguém sabe qual número pertence a qual lado. */
.parcela-secao {
    border: 1px solid var(--border); border-radius: 0.9rem;
    padding: 0.85rem 0.8rem 0.7rem; position: relative;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.parcela-secao-titulo {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--dim);
}
.parcela-check {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; color: var(--text); cursor: pointer; user-select: none;
}
.parcela-check input { width: 15px; height: 15px; accent-color: #a78bfa; cursor: pointer; }
/* Separa as duas agendas dentro da lista expandida da parcela. */
.parcela-meses-titulo {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--dim);
    margin: 0.5rem 0 0.15rem;
}
.parcela-meses-titulo:first-child { margin-top: 0; }

/* O combinado do mês dentro do modal de pagamento: é o valor que a pessoa
   realmente vai mandar, que nem sempre é o que caiu na fatura. */
.adiant-combinado {
    font-size: 0.76rem; color: var(--dim);
    border-top: 1px dashed var(--border); padding-top: 0.5rem;
}
.adiant-combinado strong { color: var(--text); }
/* Botão do valor combinado: primeiro da fila e único destacado, porque é o
   caminho certo em quase todo pagamento de parcela. */
.adiant-opcao.destaque {
    border-color: #38bdf8; background: rgba(56,189,248,0.12); color: var(--text);
}
.adiant-opcao.destaque:hover { background: rgba(56,189,248,0.2); }
.adiant-parcela-check {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: var(--dim); cursor: pointer; user-select: none;
    padding: 0.25rem 0;
}
.adiant-parcela-check strong { color: var(--text); }
.adiant-parcela-check input { width: 14px; height: 14px; accent-color: #22c55e; cursor: pointer; }

/* ─── ABASTECIMENTO: CARD DE TANQUE ATUAL E INDICADORES DE MÉDIA ─── */
.abast-current-tank-card {
    background: linear-gradient(135deg, rgba(232, 52, 28, 0.07) 0%, rgba(245, 158, 11, 0.05) 100%), var(--card);
    border: 1px solid rgba(232, 52, 28, 0.28);
    border-radius: 1rem;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .abast-current-tank-card {
    background: linear-gradient(135deg, rgba(255, 91, 69, 0.12) 0%, rgba(245, 158, 11, 0.07) 100%), var(--card);
    border-color: rgba(255, 91, 69, 0.35);
}
.abast-current-tank-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}
.abast-current-tank-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.abast-current-tank-title h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.abast-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.22rem 0.6rem;
    border-radius: 9999px;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.abast-badge-live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
    animation: abastPulse 2s infinite ease-in-out;
}
@keyframes abastPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}
.abast-current-tank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.abast-tank-metric {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.abast-tank-metric-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dim);
    font-weight: 600;
}
.abast-tank-metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
}
.abast-current-tank-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    font-size: 0.78rem;
    color: var(--dim);
}
.abast-current-tank-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.abast-sub-info {
    font-size: 0.72rem;
    color: var(--dim);
    margin-top: 2px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
}