/* ============================================================
   FinTracker — estilos específicos (reaproveita tokens de assets/style.css)
   ============================================================ */

.fin-brand-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }

/* ---------- Cofrinhos (metas de investimento) ---------- */
.fin-cofrinhos-grid > p { grid-column: 1 / -1; margin: 0; }
.fin-cofrinhos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.fin-cofrinho-card { background: var(--white); border: 1px solid var(--stone-soft); border-radius: var(--radius); padding: 18px; }
.fin-cofrinho-header { display: flex; align-items: center; gap: 8px; }
.fin-cofrinho-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.fin-cofrinho-header h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); margin: 0; }
.fin-cofrinho-valores { display: flex; justify-content: space-between; font-size: 13px; color: var(--stone); padding: 4px 0; }
.fin-cofrinho-valores strong { color: var(--navy); }
.fin-cofrinho-prazo { font-size: 12px; color: var(--stone); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--stone-soft); }
.fin-cofrinho-prazo.atrasado { color: var(--bordeaux); font-weight: 600; }

/* ---------- Projeção por categoria (Início / Despesas por categoria) ---------- */
.fin-projecao-barra { height: 100%; border-radius: 6px; transition: width 0.3s ease; background: var(--sucesso); }
.fin-projecao-barra.perto { background: var(--warning); }
.fin-projecao-barra.over { background: var(--bordeaux); }
.fin-categoria-restante { font-size: 12px; color: var(--sucesso); font-weight: 600; margin-top: 6px; }
.fin-categoria-restante.estourado { color: var(--bordeaux); }

/* ---------- Hero "Seu mês" (Início) ---------- */
.fin-hero-card { padding: 32px; position: relative; }
.fin-hero-label { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.fin-hero-valor { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 800; color: var(--navy); margin-bottom: 18px; }
.fin-hero-valor small { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--stone); margin-left: 6px; }
.fin-hero-card .funil-barra-bg { height: 12px; border-radius: 8px; margin-bottom: 14px; }
.fin-hero-card .funil-barra { background: var(--sucesso); }
.fin-hero-card .funil-barra.fin-hero-perto { background: var(--warning); }
.fin-hero-card .funil-barra.fin-hero-over { background: var(--bordeaux); }
.fin-hero-msg { font-size: 14px; color: var(--stone); margin: 0; }
.fin-hero-msg a { color: var(--primary); font-weight: 600; }

/* ---------- Folga que vem por aí (Parcelas) ---------- */
.fin-folga-item { padding: 12px 0; border-bottom: 1px solid var(--stone-soft); }
.fin-folga-item:last-child { border-bottom: none; }
.fin-folga-mes { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.fin-folga-detalhe { font-size: 14px; color: var(--navy); line-height: 1.5; }

/* ---------- KPI clicável (Parcelas: alterna a quebra por categoria) ---------- */
.fin-kpi-clicavel {
  display: block; width: 100%; text-align: left; font-family: 'Inter', sans-serif; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.fin-kpi-clicavel:hover { border-color: var(--primary); }
.fin-kpi-clicavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fin-kpi-clicavel-ativo { border-color: var(--navy); border-width: 1.5px; background: var(--primary-soft); }

/* ---------- Sliders de distribuição (Projeção) ---------- */
.fin-sliders-wrapper { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.fin-slider-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--stone-soft); }
.fin-slider-row:last-child { border-bottom: none; }
.fin-slider-nome { flex: 0 0 175px; font-size: 13px; color: var(--navy); font-weight: 500; display: flex; flex-direction: column; gap: 2px; }
.fin-slider-media { font-size: 11px; font-weight: 400; color: var(--stone); text-transform: none; letter-spacing: normal; }

.linha-slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px;
  background: var(--stone-soft); outline: none; cursor: pointer;
}
.linha-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--navy); cursor: grab; box-shadow: 0 1px 4px rgba(32,36,34,0.35);
}
.linha-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.linha-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 3px solid var(--navy);
  cursor: grab; box-shadow: 0 1px 4px rgba(32,36,34,0.35);
}
.linha-slider::-moz-range-track { height: 8px; border-radius: 4px; background: transparent; }
.linha-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.linha-slider:disabled::-webkit-slider-thumb { cursor: not-allowed; }
.linha-slider[data-travado="true"]:disabled { opacity: 1; }

.fin-slider-row-travada { background: var(--primary-soft); border-radius: 8px; margin: 0 -12px; padding: 10px 12px; border-bottom-color: transparent; }

.fin-slider-lock {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--stone-soft);
  background: var(--white); color: var(--stone); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fin-slider-lock:hover { border-color: var(--primary); color: var(--navy); }
.fin-slider-lock.travado { background: var(--navy); border-color: var(--navy); color: var(--white); }

.fin-slider-valores { flex: 0 0 120px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; line-height: 1.3; }
.fin-slider-pct { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; color: var(--navy); }
.fin-slider-rs-input {
  width: 100%; text-align: right; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--navy); border: 1.5px solid var(--stone-soft); border-radius: 6px; padding: 5px 8px; background: var(--white);
}
.fin-slider-rs-input:focus { outline: none; border-color: var(--primary); }
.fin-slider-rs-input:disabled { background: var(--bg); color: var(--stone); cursor: not-allowed; }

.fin-sliders-total {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 14px;
  padding-top: 14px; border-top: 1.5px solid var(--stone-soft); font-family: 'Manrope', sans-serif; font-size: 14px;
}
.fin-sliders-total span:first-child { margin-right: auto; color: var(--stone); font-family: 'Inter', sans-serif; font-size: 13px; }
.fin-sliders-total strong { color: var(--navy); }

@media (max-width: 640px) {
  .fin-slider-row { flex-wrap: wrap; }
  .fin-slider-nome { flex: 1 1 100%; }
  .linha-slider { flex: 1 1 auto; }
}

/* ---------- Toggle Entrada / Saída ---------- */
.fin-tipo-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.fin-tipo-btn {
  flex: 1; padding: 12px; border-radius: 8px; border: 1.5px solid var(--stone-soft); background: var(--white);
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: var(--stone); cursor: pointer;
  transition: all 0.15s ease;
}
.fin-tipo-btn.ativo-entrada { border-color: var(--sucesso); background: var(--primary-soft); color: var(--sucesso); }
.fin-tipo-btn.ativo-saida { border-color: var(--bordeaux); background: var(--bordeaux-soft); color: var(--bordeaux); }
.fin-tipo-btn.ativo-investimento { border-color: var(--warning); background: var(--warning-soft); color: #8a6d1a; }
.fin-tipo-btn.ativo-neutro { border-color: var(--navy); background: var(--stone-soft); color: var(--navy); }

/* ---------- Lançamento em lote: cada linha é um cartão com os campos em grade
   (sem rolagem lateral, em qualquer tamanho de tela) ---------- */
.modal-card-xwide { max-width: 1040px; }
.fin-tabela-lote-wrapper { overflow: visible; border: none; }
table.fin-tabela-lote, table.fin-tabela-lote tbody { display: block; width: 100%; }
table.fin-tabela-lote thead { display: none; }
table.fin-tabela-lote tr {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px;
  border: 1.5px solid var(--stone-soft); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--white);
}
table.fin-tabela-lote td { display: block; padding: 0; border: none; min-width: 0; }
table.fin-tabela-lote td[data-label]::before {
  content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--stone); margin-bottom: 4px; font-family: 'Manrope', sans-serif;
}
table.fin-tabela-lote td[data-label="Descrição"], table.fin-tabela-lote td.fin-lote-acoes { grid-column: 1 / -1; }
table.fin-tabela-lote td.fin-lote-acoes .fin-linha-acoes { justify-content: flex-end; }
table.fin-tabela-lote select, table.fin-tabela-lote input {
  width: 100%; min-width: 0; padding: 9px 10px; font-size: 14px; border: 1.5px solid var(--stone-soft); border-radius: 6px;
  font-family: 'Inter', sans-serif; color: var(--navy); background: var(--white);
}
table.fin-tabela-lote .fin-select-add select { min-width: 0; }
table.fin-tabela-lote .fin-select-add .fin-btn-add { width: 34px; }
.fin-linha-acoes { display: flex; gap: 4px; white-space: nowrap; }
.fin-btn-icone {
  background: none; border: 1px solid var(--stone-soft); border-radius: 6px; width: 30px; height: 34px;
  cursor: pointer; color: var(--stone); font-size: 14px; line-height: 1;
}
.fin-btn-icone:hover { border-color: var(--primary); color: var(--navy); }
.fin-btn-icone.remover:hover { border-color: var(--bordeaux); color: var(--bordeaux); }

/* ---------- Select com opção "+ novo" ---------- */
.fin-select-add { display: flex; gap: 6px; }
.fin-select-add select { flex: 1; }
.fin-btn-add {
  flex-shrink: 0; width: 42px; background: var(--bg); border: 1.5px solid var(--stone-soft); border-radius: 8px;
  color: var(--navy); font-size: 18px; cursor: pointer; line-height: 1;
}
.fin-btn-add:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Valores coloridos ---------- */
.fin-valor-entrada { color: var(--sucesso); font-weight: 600; }
.fin-valor-saida { color: var(--bordeaux); font-weight: 600; }
.fin-valor-investimento { color: #8a6d1a; font-weight: 600; }
.fin-valor-positivo { color: var(--sucesso); }
.fin-valor-negativo { color: var(--bordeaux); }

.fin-pill-tipo {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
  font-family: 'Manrope', sans-serif; letter-spacing: 0.02em;
}
.fin-pill-entrada { background: var(--primary-soft); color: var(--sucesso); }
.fin-pill-saida { background: var(--bordeaux-soft); color: var(--bordeaux); }
.fin-pill-investimento { background: var(--warning-soft); color: #8a6d1a; }
.fin-pill-fixa { background: var(--stone-soft); color: var(--stone); margin-left: 6px; }

/* ---------- Cards de forma de pagamento ---------- */
.fin-cartoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fin-cartao-card {
  border-radius: var(--radius); padding: 20px; color: var(--white); cursor: pointer;
  min-height: 140px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 20px -10px rgba(32,36,34,0.35); transition: transform 0.15s ease;
}
.fin-cartao-card:hover { transform: translateY(-2px); }
.fin-cartao-card.inativo { opacity: 0.5; }
.fin-cartao-top { display: flex; justify-content: space-between; align-items: flex-start; }
.fin-cartao-nome { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; }
.fin-cartao-banco { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.fin-cartao-tipo-tag { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; background: rgba(255,255,255,0.2); padding: 3px 8px; border-radius: 20px; }
.fin-cartao-fatura { font-size: 22px; font-weight: 700; font-family: 'Manrope', sans-serif; }
.fin-cartao-datas { font-size: 12px; opacity: 0.85; display: flex; justify-content: space-between; margin-top: 10px; }

.fin-barra-limite-bg { background: rgba(255,255,255,0.25); border-radius: 6px; height: 6px; margin-top: 8px; overflow: hidden; }
.fin-barra-limite { height: 100%; background: var(--white); border-radius: 6px; }

/* ---------- Contas fixas ---------- */
.fin-contas-fixas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.fin-conta-fixa-card { background: var(--white); border: 1px solid var(--stone-soft); border-radius: var(--radius); padding: 18px; }
.fin-conta-fixa-card.inativa { opacity: 0.55; }
.fin-conta-fixa-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.fin-conta-fixa-header h3 { font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 700; color: var(--navy); margin: 0; }
.fin-conta-fixa-meta { font-size: 12px; color: var(--stone); margin: 8px 0; line-height: 1.6; }
.fin-conta-fixa-valor { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); }
.fin-conta-fixa-actions { display: flex; gap: 16px; margin-top: 12px; }
.fin-link-acao { background: none; border: none; color: var(--stone); font-size: 13px; cursor: pointer; padding: 0; font-family: 'Inter', sans-serif; }
.fin-link-acao:hover { color: var(--navy); text-decoration: underline; }

/* ---------- Filtro mês/ano ---------- */
.fin-seletor-mes { display: flex; align-items: center; gap: 10px; }
.fin-seletor-mes button {
  width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--stone-soft); background: var(--white);
  color: var(--navy); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fin-seletor-mes button:hover { border-color: var(--primary); }

/* ---------- Filtro seletor múltiplo (com busca) ---------- */
.fin-multiselect { position: relative; }
.fin-multiselect-toggle {
  width: 100%; min-width: 200px; max-width: 280px; text-align: left; background: var(--white);
  border: 1.5px solid var(--stone-soft); border-radius: 8px; padding: 12px 14px; color: var(--navy);
  font-size: 15px; font-family: 'Inter', sans-serif; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-multiselect-toggle:hover { border-color: var(--primary); }
.fin-multiselect-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; max-width: 90vw;
  background: var(--white); border: 1px solid var(--stone-soft); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(32,36,34,0.25); padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.fin-multiselect-busca {
  width: 100%; background: var(--bg); border: 1.5px solid var(--stone-soft); border-radius: 6px;
  padding: 8px 10px; color: var(--navy); font-size: 13px; font-family: 'Inter', sans-serif;
}
.fin-multiselect-busca:focus { outline: none; border-color: var(--primary); }
.fin-multiselect-acoes { display: flex; gap: 12px; }
.fin-multiselect-acoes button {
  background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.fin-multiselect-acoes button:hover { text-decoration: underline; }
.fin-multiselect-lista { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.fin-multiselect-item {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; color: var(--navy);
  cursor: pointer; border-radius: 6px;
}
.fin-multiselect-item:hover { background: var(--bg); }
.fin-multiselect-item input { width: auto; margin: 0; }
.fin-multiselect-item small { color: var(--stone); }
.fin-multiselect-vazio { font-size: 13px; color: var(--stone); padding: 8px 4px; }
.fin-seletor-mes .fin-mes-label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); min-width: 140px; text-align: center; }

/* ---------- Painel Anual ---------- */
.fin-painel-wrapper { background: var(--white); border: 1px solid var(--stone-soft); border-radius: var(--radius); overflow-x: auto; }
table.fin-painel-table { border-collapse: collapse; font-size: 13px; min-width: 1400px; width: 100%; }
table.fin-painel-table th, table.fin-painel-table td { padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--stone-soft); }
table.fin-painel-table th:first-child, table.fin-painel-table td:first-child {
  position: sticky; left: 0; background: var(--white); text-align: left; min-width: 220px; z-index: 1;
  border-right: 1px solid var(--stone-soft);
}
table.fin-painel-table thead th { background: var(--navy); color: var(--white); font-family: 'Manrope', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }
table.fin-painel-table thead th:first-child { background: var(--navy); }
table.fin-painel-table td { text-align: right; color: var(--navy); }
tr.fin-linha-categoria td { background: inherit; color: var(--white); font-weight: 700; }
tr.fin-linha-categoria td:first-child { color: var(--white); }
tr.fin-linha-subcategoria td:first-child { padding-left: 24px; color: var(--stone); }
tr.fin-linha-total td { background: var(--stone-soft); font-weight: 700; }
tr.fin-linha-total td:first-child { background: var(--stone-soft); }
tr.fin-linha-resultado td { background: var(--navy); color: var(--white); font-weight: 700; }
tr.fin-linha-resultado td:first-child { background: var(--navy); color: var(--white); }

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   MOBILE — topbar fixo + tab bar inferior no lugar da sidebar
   ============================================================ */
.mobile-topbar, .mobile-bottom-nav { display: none; }

@media (max-width: 860px) {
  .sidebar { display: none; }
  .app-shell { display: block; }
  .main-content { padding: 72px 16px 88px; }

  /* "Ver Painel Anual" já está no menu de baixo; "Ver Metas" continua acessível
     pelos links menores dentro da própria página (objetivos, editar metas). */
  .fin-atalhos-topo { display: none !important; }

  .mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 16px;
    background: var(--navy); z-index: 40;
  }
  .mobile-topbar-brand {
    display: flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif; font-weight: 600;
    font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.9);
  }
  .mobile-topbar-brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

  .mobile-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 68px;
    background: var(--navy); border-top: 1px solid rgba(255,255,255,0.1); z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-nav-link {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: rgba(255,255,255,0.5); text-decoration: none; font-size: 10px; font-family: 'Inter', sans-serif;
    text-align: center; line-height: 1.2; padding: 0 2px;
  }
  .mobile-nav-link svg { flex-shrink: 0; }
  .mobile-nav-link.active { color: var(--primary-on-dark); }

  .fin-brand-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fin-brand-bar .submit { width: 100%; }
  .filtro-bar { flex-direction: column; align-items: stretch; }
  .filtro-bar > * { width: 100%; max-width: none !important; }
  .fin-seletor-mes { width: 100%; justify-content: space-between; }
  .fin-multiselect-painel { left: 0; right: 0; width: auto; max-width: none; }

  .modal-card, .modal-card-wide, .modal-card-xwide { max-width: none; width: 100%; padding: 22px 16px 18px; }
  table.fin-painel-table th:first-child, table.fin-painel-table td:first-child { min-width: 170px; }
  .fin-dev-banner { bottom: 68px; padding: 6px 8px; font-size: 11px; }

  .fin-linha-acoes { justify-content: flex-end; padding-top: 4px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  table.data-table th, table.data-table td { padding: 10px 12px; }
}

.fin-pill-aviso { background: #FBEFD5; color: #8A5A00; margin-left: 6px; }
.fin-aviso-cartao { background: #FBEFD5; border: 1.5px solid #E5C77D; color: #5E3F00; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; }
.fin-aviso-cartao .fin-link-acao { display: block; margin-top: 6px; }
.fin-extrato-sub td { font-size: 12px; color: var(--stone); padding-top: 4px; padding-bottom: 4px; background: rgba(0,0,0,0.015); }

/* ---- Dashboard de Contas Bancárias ---- */
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kpi-grid-4 { grid-template-columns: 1fr; } }
.fin-kpi-sub { font-size: 12px; color: var(--stone); margin-top: 6px; }
.fin-dash-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1150px) { .fin-dash-grid { grid-template-columns: 1fr; } }
#filtroOrigem .fin-tipo-btn { padding: 10px 14px; white-space: nowrap; flex: none; }
.fin-evo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.fin-evo-col { text-align: center; min-width: 0; }
.fin-evo-barras { height: 150px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; border-bottom: 1.5px solid var(--stone-soft); }
.fin-evo-barra { width: 40%; max-width: 22px; border-radius: 4px 4px 0 0; min-height: 2px; }
.fin-evo-entrada { background: var(--sucesso); }
.fin-evo-saida { background: var(--bordeaux); }
.fin-evo-atual .fin-evo-barra { box-shadow: 0 0 0 2px var(--primary-soft); }
.fin-evo-mes { font-size: 12px; font-weight: 600; color: var(--navy); margin-top: 6px; }
.fin-evo-atual .fin-evo-mes { color: var(--primary); }
.fin-evo-valor { font-size: 11px; color: var(--stone); }
.fin-evo-leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.fin-cartoes-bloco { border: 1.5px solid var(--stone-soft); border-radius: 12px; padding: 14px 16px; background: rgba(0,0,0,0.012); }
.fin-cartoes-titulo { display: flex; justify-content: space-between; align-items: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 10px; }
.fin-cartao-linha { padding: 12px 0; border-top: 1px solid var(--stone-soft); }
.fin-cartao-linha:first-of-type { border-top: 0; padding-top: 0; }
.fin-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fin-cartao-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 8px; }
.fin-cartao-nums span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); font-weight: 600; }
.fin-cartao-nums strong { display: block; font-family: 'Manrope', sans-serif; font-size: 18px; }
.fin-cartao-nums small { color: var(--stone); font-size: 12px; }

/* ---- Página de lançamento estilo planilha ---- */
.fin-planilha-card { padding: 14px; }
.fin-planilha-rodape { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fin-planilha-total { font-size: 14px; color: var(--stone); }
.fin-planilha-total strong { color: var(--navy); font-family: 'Manrope', sans-serif; }
@media (min-width: 1101px) {
  table.fin-planilha { display: table; table-layout: fixed; width: 100%; border-collapse: collapse; }
  table.fin-planilha thead { display: table-header-group; }
  table.fin-planilha tbody { display: table-row-group; }
  table.fin-planilha tr { display: table-row; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; }
  table.fin-planilha thead tr { background: none; }
  table.fin-planilha th {
    text-align: left; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--stone); padding: 6px 4px; border-bottom: 1.5px solid var(--stone-soft);
  }
  table.fin-planilha td { display: table-cell; padding: 4px; border-bottom: 1px solid var(--stone-soft); vertical-align: middle; }
  table.fin-planilha td[data-label]::before { display: none; }
  table.fin-planilha td.fin-lote-acoes { width: 76px; grid-column: auto; }
  table.fin-planilha select, table.fin-planilha input { padding: 7px 8px; font-size: 13px; border-color: transparent; background: transparent; }
  table.fin-planilha tr:hover select, table.fin-planilha tr:hover input { border-color: var(--stone-soft); }
  table.fin-planilha select:focus, table.fin-planilha input:focus { border-color: var(--primary); background: var(--white); outline: none; box-shadow: 0 0 0 2px var(--primary-soft); }
  table.fin-planilha input:disabled { opacity: 0.4; }
  table.fin-planilha input[type="number"] { text-align: right; }
}
@media (max-width: 1100px) {
  table.fin-planilha thead { display: none; }
}

.fin-tab-rolagem { max-height: 46vh; overflow: auto; }
.fin-tab-rolagem .data-table th { position: sticky; top: 0; background: var(--white); z-index: 1; }

/* ---- Contas: lista e detalhe ---- */
.fin-contas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 520px) { .fin-contas-grid { grid-template-columns: 1fr; } }
.fin-conta-card { margin-top: 0 !important; }
.fin-clicavel { cursor: pointer; border-radius: 10px; transition: background 0.15s ease; }
.fin-conta-saldo { padding: 12px 14px; border: 1.5px solid var(--stone-soft); }
.fin-conta-saldo:hover, .fin-cartao-linha.fin-clicavel:hover { background: var(--bg); }
.fin-cartao-linha.fin-clicavel { padding: 10px; margin: 0 -10px; }
.fin-detalhe-titulo { font-family: 'Source Serif 4', serif; font-size: 28px; margin: 0; color: var(--navy); }
.fin-evo-col.linha-clicavel { padding: 4px 2px; }

/* Colunas secundárias das tabelas de lançamentos somem no celular (sem rolagem lateral) */
@media (max-width: 700px) {
  .fin-col-opc { display: none; }
  .fin-tab-rolagem .data-table th, .fin-tab-rolagem .data-table td { padding-left: 8px; padding-right: 8px; }
}
/* Três números lado a lado, compactos, mesmo no celular (pop-up de categoria) */
.kpi-grid-compacto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpi-grid-compacto .kpi-card { min-width: 0; }
.kpi-grid-compacto .kpi-card { padding: 12px; }
.kpi-grid-compacto .kpi-label { font-size: 9.5px; margin-bottom: 4px; }
.kpi-grid-compacto .kpi-valor { font-size: 16px; }
@media (min-width: 701px) { .kpi-grid-compacto .kpi-valor { font-size: 22px; } .kpi-grid-compacto .kpi-card { padding: 18px; } }
@media (max-width: 700px) { .fin-ano { display: none; } }
.fin-detalhe-lanc strong { font-weight: 600; color: var(--navy); }
.fin-detalhe-lanc small { display: block; color: var(--stone); font-size: 12px; margin-top: 1px; }
@media (max-width: 700px) {
  .fin-tab-rolagem .data-table { width: 100%; }
  .fin-tab-rolagem .data-table th { white-space: normal; line-height: 1.2; font-size: 10.5px; }
  .fin-tab-rolagem .data-table td { white-space: normal; }
  .fin-tab-rolagem .data-table td:first-child { white-space: nowrap; }
}

/* ---- Celular: sub-menu em chips + botão "Lançar" no meio do menu de baixo ---- */
.fin-subnav { display: none; }
@media (max-width: 860px) {
  .fin-subnav {
    display: flex; gap: 8px; overflow-x: auto; margin: -4px -16px 14px; padding: 8px 16px;
    position: sticky; top: 56px; z-index: 20; background: var(--bg); scrollbar-width: none;
  }
  .fin-subnav::-webkit-scrollbar { display: none; }
  .fin-subnav a {
    flex: none; padding: 8px 14px; border: 1.5px solid var(--stone-soft); border-radius: 20px; background: var(--white);
    color: var(--stone); font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap;
  }
  .fin-subnav a.ativo { background: var(--navy); border-color: var(--navy); color: var(--white); }
  .mobile-nav-novo { position: relative; }
  .mobile-nav-mais {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -14px;
    border-radius: 50%; background: var(--primary-on-dark); color: var(--navy); box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  }
  .mobile-nav-novo.active .mobile-nav-mais { box-shadow: 0 0 0 3px rgba(79,179,134,0.35); }
  .mobile-nav-novo span:last-child { color: rgba(255,255,255,0.7); }
}
.fin-link-categoria { text-align: left; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .fin-acoes-parcela { flex-direction: column; gap: 6px; align-items: flex-end; }
}
@media (max-width: 860px) { .link-voltar-geral { display: none; } }
@media (max-width: 700px) {
  .fin-tab-rolagem .data-table th, .fin-tab-rolagem .data-table td { padding-left: 5px; padding-right: 5px; font-size: 13px; }
  .fin-tab-rolagem .fin-btn-icone { width: 26px; height: 30px; }
  .fin-tab-rolagem .data-table td:last-child { width: 34px; }
}
.fin-col-acao { width: 44px; }
@media (max-width: 700px) {
  .fin-tab-rolagem .data-table { table-layout: fixed; }
  .fin-tab-rolagem .fin-col-acao { width: 36px; }
  .fin-tab-rolagem .data-table td { overflow-wrap: anywhere; }
}
@media (max-width: 700px) {
  .fin-tab-rolagem .data-table th { font-size: 9px; letter-spacing: 0.01em; padding-left: 4px; padding-right: 4px; }
}

/* ---- Orçamento: layout ---- */
.fin-renda-card { padding: 22px 24px; }
.fin-renda-card > label { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone); }
.fin-renda-campo { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; border-bottom: 2px solid var(--stone-soft); max-width: 340px; }
.fin-renda-campo:focus-within { border-color: var(--primary); }
.fin-renda-campo span { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; color: var(--stone); }
.fin-renda-campo input { border: 0; background: transparent; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 34px; color: var(--navy); width: 100%; padding: 4px 0; }
.fin-renda-campo input:focus { outline: none; }
.fin-como-funciona summary { cursor: pointer; font-size: 13px; color: var(--primary); font-weight: 600; }

.fin-sliders-wrapper { gap: 10px; margin-top: 18px; }
.fin-sliders-wrapper .fin-slider-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 190px 36px; align-items: center; gap: 18px;
  padding: 14px 18px; background: var(--white); border: 1px solid var(--stone-soft); border-radius: 12px; margin: 0;
}
.fin-sliders-wrapper .fin-slider-row.fin-slider-row-travada { background: var(--primary-soft); border-color: var(--primary); margin: 0; }
.fin-sliders-wrapper .fin-slider-nome { flex: none; display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.fin-slider-nome > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fin-slider-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-sliders-wrapper .fin-slider-valores { flex: none; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
.fin-rs-campo { display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--stone-soft); border-radius: 8px; padding: 0 10px; background: var(--white); }
.fin-rs-campo:focus-within { border-color: var(--primary); }
.fin-rs-campo > span { font-size: 12px; color: var(--stone); font-weight: 600; }
.fin-rs-campo input.fin-slider-rs-input { border: 0; padding: 8px 0; width: 78px; text-align: right; font-weight: 600; background: transparent; }
.fin-rs-campo input.fin-slider-rs-input:focus { outline: none; }
.fin-sliders-wrapper .fin-slider-pct { background: var(--primary-soft); color: var(--primary); border-radius: 20px; padding: 4px 10px; min-width: 52px; text-align: center; }

.fin-orcamento-barra {
  position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 14px 18px; background: var(--white); border: 1px solid var(--stone-soft); border-radius: 12px;
  box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
}
.fin-orcamento-total { display: flex; flex-direction: column; font-size: 12px; color: var(--stone); }
.fin-orcamento-total strong { font-family: 'Manrope', sans-serif; font-size: 22px; color: var(--navy); }
.fin-orcamento-total small { font-size: 13px; color: var(--primary); font-weight: 700; }

@media (max-width: 860px) { .fin-orcamento-barra { bottom: 76px; } }
@media (max-width: 700px) {
  .fin-sliders-wrapper .fin-slider-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
  .fin-sliders-wrapper .fin-slider-nome { grid-column: 1 / -1; }
  .fin-sliders-wrapper .fin-slider-row .linha-slider { grid-column: 1 / -1; }
  .fin-sliders-wrapper .fin-slider-valores { justify-content: flex-start; }
  .fin-renda-campo input { font-size: 30px; }
}

/* ---- Assinatura ---- */
.fin-faixa-assinatura {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 16px; border-radius: 10px; text-decoration: none;
  background: var(--warning-soft); color: #6b4f00; border: 1px solid rgba(138,109,26,0.25); font-size: 14px;
}
.fin-faixa-assinatura strong { color: var(--navy); font-size: 13px; }
.fin-assinatura-card { padding: 26px 28px; }
.fin-selo { display: inline-block; padding: 6px 14px; border-radius: 20px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; }
.fin-selo-ok { background: var(--primary-soft); color: var(--primary); }
.fin-selo-aviso { background: var(--warning-soft); color: #8a6d1a; }
.fin-selo-erro { background: var(--bordeaux-soft); color: var(--bordeaux); }
.fin-cupom-form { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-cupom-form input { max-width: 240px; }

.fin-senha-bloco { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stone-soft); }
.fin-senha-bloco form { margin-top: 14px; }

/* ============================================================
   Contas e botões — visual de app de banco
   ============================================================ */
.fin-titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fin-titulo-linha h1 { margin: 0; }
.page-header.fin-titulo-linha { margin-bottom: 20px; }
.fin-mais-wrap { position: relative; }
.fin-btn-mais {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 0 3px;
  background: var(--navy); color: var(--white); font-size: 28px; line-height: 1; font-family: 'Manrope', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fin-btn-mais:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
.fin-menu-mais {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 210px; padding: 6px;
  background: var(--white); border: 1px solid var(--stone-soft); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}
.fin-menu-mais button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border: 0; background: none; cursor: pointer;
  border-radius: 10px; font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--navy); text-align: left;
}
.fin-menu-mais button:hover, .fin-menu-link:hover { background: var(--bg); }
.fin-menu-link {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; border-radius: 10px; text-decoration: none; box-sizing: border-box;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--navy); border-top: 1px solid var(--stone-soft); margin-top: 4px;
}
.fin-menu-mais svg { color: var(--primary); flex-shrink: 0; }

/* botões de verdade (no lugar dos "links sublinhados") */
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 22px;
  border: 1.5px solid var(--stone-soft); background: var(--white); color: var(--navy); cursor: pointer; text-decoration: none;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; line-height: 1.2; transition: border-color 0.15s ease, background 0.15s ease;
}
.fin-btn:hover { border-color: var(--primary); }
.fin-btn-pequeno { padding: 6px 13px; font-size: 12.5px; }
.fin-btn-primario { background: var(--navy); border-color: var(--navy); color: var(--white); }
.fin-btn-primario:hover { background: var(--primary); border-color: var(--primary); }
.fin-btn-perigo { color: var(--bordeaux); border-color: rgba(232,106,106,0.4); }
.fin-btn-perigo:hover { background: var(--bordeaux-soft); border-color: var(--bordeaux); }
.fin-btn-voltar { margin-bottom: 14px; padding: 7px 14px 7px 10px; }

/* lista: um cartão por banco */
.fin-contas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 520px) { .fin-contas-grid { grid-template-columns: 1fr; } }
.fin-banco-card { background: var(--white); border: 1px solid var(--stone-soft); border-radius: 20px; padding: 8px 8px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.fin-conta-topo {
  display: flex; align-items: center; gap: 14px; padding: 14px 14px; border-radius: 14px; cursor: pointer; transition: background 0.15s ease;
}
.fin-conta-topo:hover { background: var(--bg); }
.fin-avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 19px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.fin-conta-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-conta-id strong { font-family: 'Manrope', sans-serif; font-size: 16px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-conta-id small { font-size: 12.5px; color: var(--stone); }
.fin-conta-valor { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.fin-conta-valor small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); font-weight: 600; }
.fin-conta-valor strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 20px; color: var(--navy); }
.fin-seta { color: var(--stone); font-size: 26px; line-height: 1; margin-left: -4px; }

.fin-cartoes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 8px 0; }
.fin-cartao-visual {
  position: relative; aspect-ratio: 1.62; min-height: 150px; border-radius: 16px; padding: 14px 16px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 16px rgba(0,0,0,0.18); overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fin-cartao-visual::after { content: ''; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; }
.fin-cartao-visual:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.24); }
.fin-cv-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fin-cv-nome { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-chip { width: 32px; height: 24px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(135deg, #f3dc9a, #c9a24b); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.fin-cv-meio { display: flex; flex-direction: column; gap: 1px; }
.fin-cv-meio small { font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; }
.fin-cv-meio strong { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 22px; }
.fin-cv-barra { height: 5px; border-radius: 4px; background: rgba(255,255,255,0.28); overflow: hidden; }
.fin-cv-barra i { display: block; height: 100%; background: currentColor; opacity: 0.9; border-radius: 4px; }
.fin-cv-base { display: flex; justify-content: space-between; font-size: 11.5px; opacity: 0.85; }
.fin-cartao-novo {
  min-height: 56px; border: 2px dashed var(--stone-soft); border-radius: 16px; background: transparent; color: var(--stone); cursor: pointer;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 13.5px; transition: border-color 0.15s ease, color 0.15s ease;
}
.fin-cartao-novo:hover { border-color: var(--primary); color: var(--primary); }

/* detalhe: faixa colorida do banco/cartão */
.fin-hero-banco {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 22px 24px; border-radius: 20px; box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}
.fin-hero-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fin-hero-id h2 { margin: 0; color: inherit; font-size: 26px; }
.fin-hero-id p { margin: 4px 0 0; font-size: 13px; opacity: 0.85; }
.fin-avatar-hero { width: 54px; height: 54px; font-size: 22px; background: rgba(255,255,255,0.2); color: inherit; box-shadow: none; }
.fin-hero-claro .fin-avatar-hero { background: rgba(0,0,0,0.08); }
.fin-hero-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-btn-vidro { background: rgba(255,255,255,0.18); color: inherit; border-color: rgba(255,255,255,0.45); }
.fin-btn-vidro:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.8); }
.fin-hero-claro .fin-btn-vidro { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.25); }
.fin-hero-claro .fin-btn-vidro:hover { background: rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.5); }

@media (max-width: 700px) {
  .fin-conta-valor strong { font-size: 17px; }
  .fin-hero-banco { padding: 18px; }
  .fin-hero-id h2 { font-size: 22px; }
  .fin-hero-acoes { width: 100%; }
  .fin-hero-acoes .fin-btn { flex: 1; }
  .fin-cartoes-grid { grid-template-columns: 1fr; }
  .fin-cartao-novo { min-height: 64px; }
}

@media (max-width: 520px) { .fin-contas-grid { grid-template-columns: minmax(0, 1fr); } }
.fin-banco-card { min-width: 0; }
.fin-cartoes-grid > * { min-width: 0; }

.page-header .sub a { color: var(--primary); font-weight: 600; }
@media (max-width: 860px) {
  .filtro-bar .fin-multiselect, .filtro-bar .fin-multiselect-toggle { width: 100%; max-width: none; }
}

/* ---- confirmação de conta criada + máscara de moeda ---- */
.fin-sucesso { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--primary-soft); margin-bottom: 18px; }
.fin-sucesso-check { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.fin-sucesso strong { display: block; color: var(--navy); font-family: 'Manrope', sans-serif; font-size: 15px; }
.fin-sucesso small { color: var(--stone); font-size: 12.5px; }
.fin-sucesso-subtitulo { font-family: 'Manrope', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); margin: 0 0 10px; }
.fin-contas-mini { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; }
.fin-conta-mini { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1.5px solid var(--stone-soft); border-radius: 12px; }
.fin-conta-mini-nova { border-color: var(--primary); background: var(--primary-soft); }
.fin-avatar-mini { width: 38px; height: 38px; font-size: 16px; }
.fin-conta-mini-valor { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; color: var(--navy); }
.fin-campo-moeda { position: relative; }
.fin-campo-moeda input { padding-right: 52px; }
.fin-sinal-btn { position: absolute; right: 6px; bottom: 6px; width: 38px; height: 34px; border: 1.5px solid var(--stone-soft); border-radius: 8px; background: var(--white); color: var(--navy); font-weight: 800; cursor: pointer; }
.fin-sinal-btn:hover { border-color: var(--primary); }
.fin-erro-carga { text-align: center; padding: 40px 16px; color: var(--stone); }
.fin-erro-carga p { margin: 0 0 14px; }

/* ---- seletor de cor: poucas opções prontas ---- */
.fin-cores { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.fin-cor-opcao {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--white); cursor: pointer; padding: 0;
  box-shadow: 0 0 0 1.5px var(--stone-soft); transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.fin-cor-opcao:hover { transform: scale(1.1); }
.fin-cor-opcao.selecionada { box-shadow: 0 0 0 2.5px var(--navy); transform: scale(1.1); }

/* ---- Lembrete de contas a pagar ---- */
.fin-lembretes { margin-top: 24px; border-left: 4px solid var(--warning); }
.fin-lembretes-vazio { color: var(--stone); font-size: 14px; margin: 0; }
.fin-lembrete-grupo { margin-top: 14px; }
.fin-lembrete-grupo:first-of-type { margin-top: 4px; }
.fin-lembrete-grupo h3 { font-family: 'Manrope', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); margin: 0 0 6px; }
.fin-lembrete-grupo.atrasadas h3 { color: var(--bordeaux); }
.fin-lembrete { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--stone-soft); }
.fin-lembrete:first-of-type { border-top: 0; }
.fin-lembrete-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-lembrete-info strong { font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-lembrete-info small { color: var(--stone); font-size: 12.5px; }
.fin-lembrete-valor { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 15px; color: var(--navy); white-space: nowrap; }
.fin-lembrete-grupo.atrasadas .fin-lembrete-valor { color: var(--bordeaux); }
@media (max-width: 520px) {
  .fin-pg-txt { display: none; }
  .fin-btn-paguei { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 17px; flex-shrink: 0; }
}
.fin-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 80; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--navy); color: var(--white); font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.fin-toast button { background: none; border: 0; color: var(--primary-on-dark); font-weight: 700; font-size: 14px; cursor: pointer; }
@media (min-width: 861px) { .fin-toast { bottom: 28px; } }

/* ---- Importar planilha ---- */
.fin-titulo-acoes { display: flex; align-items: center; gap: 10px; }
.imp-info { margin: 0 0 4px; }
.imp-novo-cartao { margin-top: 18px; padding: 18px; border: 1.5px dashed var(--stone-soft); border-radius: 14px; }
.imp-novo-cartao h3 { margin: 0 0 6px; font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); }
.imp-arquivo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--stone-soft); border-radius: 16px; background: var(--bg); transition: border-color 0.15s ease, background 0.15s ease;
}
.imp-arquivo:hover, .imp-arquivo.arrastando { border-color: var(--primary); background: var(--primary-soft); }
.imp-arquivo input { display: none; }
.imp-arquivo-icone { font-size: 30px; color: var(--primary); line-height: 1; }
.imp-arquivo small { color: var(--stone); font-size: 12.5px; }
.imp-colar { margin-top: 14px; }
.imp-colar summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 13.5px; }
.imp-colar textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 12px; border: 1.5px solid var(--stone-soft); border-radius: 10px; padding: 10px; }
.imp-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.imp-amostra { margin-top: 14px; max-height: 190px; overflow: auto; }
.imp-amostra th, .imp-amostra td { white-space: nowrap; font-size: 12.5px; }
.imp-resumo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; font-size: 14px; }
.imp-pill { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--stone-soft); color: var(--stone); font-size: 12px; font-weight: 600; margin-left: 6px; }
.imp-resumo .imp-pill { margin-left: 0; }
.imp-pill-aviso { background: var(--warning-soft); color: #7a5b00; }
.imp-pill-ok { background: var(--primary-soft); color: var(--primary); }
.imp-ferramentas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.imp-ferramentas select { max-width: 220px; padding: 7px 10px; font-size: 13px; }
.imp-lista { border: 1px solid var(--stone-soft); border-radius: 12px; overflow: hidden; max-height: 62vh; overflow-y: auto; }
.imp-linha {
  display: grid; grid-template-columns: 26px 92px minmax(0, 1fr) 190px 112px; gap: 12px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--stone-soft); background: var(--white);
}
.imp-linha:first-child { border-top: 0; }
.imp-linha.imp-off { opacity: 0.5; }
.imp-chk { width: 18px; height: 18px; accent-color: var(--primary); }
.imp-data { font-size: 13px; color: var(--navy); }
.imp-data small { display: block; color: var(--primary); font-size: 11px; font-weight: 600; }
.imp-desc { font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.imp-cat { padding: 7px 8px; font-size: 13px; width: 100%; }
.imp-valor { text-align: right; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; }
.imp-barra { z-index: 20; }
@media (max-width: 860px) { .imp-barra { bottom: 76px; } }
@media (max-width: 700px) {
  .imp-linha { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "chk desc valor" "chk data data" "cat cat cat"; gap: 6px 10px; }
  .imp-chk { grid-area: chk; align-self: start; margin-top: 3px; }
  .imp-desc { grid-area: desc; }
  .imp-valor { grid-area: valor; }
  .imp-data { grid-area: data; display: flex; gap: 8px; align-items: baseline; }
  .imp-data small { display: inline; }
  .imp-cat { grid-area: cat; }
}
.imp-arquivo, .imp-arquivo strong, .imp-arquivo small { text-transform: none; letter-spacing: normal; }
.imp-arquivo strong { font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); }

.imp-badge { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; }
.imp-badge.ok { color: var(--primary); }
.imp-badge.falta { color: var(--bordeaux); }
.imp-badge.opc { color: var(--stone); font-weight: 500; }
.imp-tag { display: block; margin-top: 3px; padding: 1px 7px; width: fit-content; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: normal; }
.imp-tag-nao { background: var(--stone-soft); color: var(--stone); font-weight: 500; }
.imp-col-livre { opacity: 0.55; }
.imp-opcoes-parcelas { margin-top: 18px; padding: 16px 18px; border: 1.5px solid var(--stone-soft); border-radius: 14px; background: var(--bg); }
.imp-opcoes-parcelas h3 { margin: 0 0 6px; font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); }
.imp-check { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14px; color: var(--navy); text-transform: none; letter-spacing: normal; font-weight: 500; cursor: pointer; }
.imp-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.imp-check small { display: block; color: var(--stone); font-weight: 400; font-size: 12.5px; }

/* ---- indicador de carregamento ---- */
.imp-status { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--primary-soft); color: var(--navy); font-size: 14px; font-weight: 500; }
.imp-status[hidden] { display: none; }
.imp-status-grande { margin-top: 16px; background: var(--white); border: 1.5px solid var(--primary); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.imp-spinner { width: 22px; height: 22px; flex-shrink: 0; border: 3px solid rgba(24,53,47,0.18); border-top-color: var(--primary); border-radius: 50%; animation: imp-gira 0.8s linear infinite; }
@keyframes imp-gira { to { transform: rotate(360deg); } }
.imp-progresso { height: 8px; margin-top: 8px; border-radius: 6px; background: var(--stone-soft); overflow: hidden; }
.imp-progresso[hidden] { display: none; }
.imp-progresso i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 6px; transition: width 0.25s ease; }
@media (prefers-reduced-motion: reduce) { .imp-spinner { animation-duration: 2.4s; } }

.imp-cats { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.imp-sub { padding: 5px 8px; font-size: 12px; color: var(--stone); width: 100%; }
.imp-pill-sug { background: #EAF1FB; color: #1E4F9A; }
@media (max-width: 860px) { .fin-so-desktop { display: none; } }

/* ---- Início: contas com saldo ---- */
.fin-contas-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.fin-conta-linha-inicio {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit;
  border: 1.5px solid var(--stone-soft); border-radius: 14px; background: var(--white); transition: border-color 0.15s ease, background 0.15s ease;
}
.fin-conta-linha-inicio:hover { border-color: var(--primary); background: var(--bg); }
.fin-conta-linha-saldo { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 16px; color: var(--navy); white-space: nowrap; }
.fin-conta-linha-saldo.fin-valor-negativo { color: var(--bordeaux); }
@media (max-width: 520px) { .fin-contas-inicio { grid-template-columns: 1fr; } }

/* ---- Início: cartões com fatura ---- */
a.fin-cartao-visual { text-decoration: none; }
.fin-cartoes-inicio { padding: 0; margin-top: 4px; }

/* ---- Importação: resumo final ---- */
.imp-fim-titulo { margin: 22px 0 10px; font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); }
.imp-fim-cats { display: flex; flex-direction: column; gap: 8px; }
.imp-fim-cat { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 12px; font-size: 14px; }
.imp-fim-cat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-fim-cat strong { font-family: 'Manrope', sans-serif; color: var(--navy); }
.imp-fim-barra { height: 10px; border-radius: 6px; background: var(--stone-soft); overflow: hidden; }
.imp-fim-barra i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
@media (max-width: 520px) { .imp-fim-cat { grid-template-columns: 1fr auto; } .imp-fim-barra { grid-column: 1 / -1; order: 3; } }

/* ---- Fluxo de Caixa: seleção em massa e linha clicável ---- */
.fin-col-chk { width: 36px; padding-left: 12px !important; padding-right: 4px !important; }
.fin-col-chk input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }
.fin-linha-clicavel { cursor: pointer; }
.fin-linha-clicavel:hover td { background: var(--bg); }
.fin-linha-clicavel:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.fin-linha-sel td { background: var(--primary-soft); }
.fin-barra-lote {
  position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,0.2);
}
.fin-barra-lote[hidden] { display: none; }
.fin-barra-lote span { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; }
.fin-barra-lote-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .fin-col-chk { width: 30px; padding-left: 8px !important; } }

/* ---- Fluxo de Caixa: tela enxuta ---- */
.fin-fluxo-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fin-fluxo-busca { flex: 1; min-width: 160px; max-width: 320px; margin: 0; }
.fin-badge-filtro { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; }
.fin-badge-filtro[hidden] { display: none; }
.fin-fluxo-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-fluxo-filtros[hidden] { display: none; }
.fin-fluxo-filtros .fin-multiselect-toggle { min-width: 150px; max-width: 220px; padding: 9px 12px; font-size: 14px; }
.fin-resumo-fluxo { display: flex; gap: 28px; flex-wrap: wrap; align-items: baseline; margin: 0 0 14px; padding: 0 4px; }
.fin-resumo-fluxo[hidden], .fin-resumo-fluxo > [hidden] { display: none; }
.fin-resumo-fluxo small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone); font-weight: 600; margin-bottom: 2px; }
.fin-resumo-fluxo strong { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 700; color: var(--navy); }
.fin-resumo-fluxo .fin-valor-positivo { color: var(--sucesso); }
.fin-resumo-fluxo .fin-valor-negativo { color: var(--bordeaux); }
.fin-tabela-fluxo .fin-col-data { width: 64px; color: var(--stone); white-space: nowrap; }
.fin-tabela-fluxo .fin-detalhe-lanc small { display: block; }
@media (max-width: 700px) {
  .fin-fluxo-topo .fin-seletor-mes { width: 100%; justify-content: space-between; }
  .fin-fluxo-busca { max-width: none; }
  .fin-fluxo-filtros .fin-multiselect, .fin-fluxo-filtros .fin-multiselect-toggle { width: 100%; max-width: none; }
  .fin-resumo-fluxo { gap: 18px; }
  .fin-resumo-fluxo strong { font-size: 16px; }
}
.fin-so-mobile { display: none; }
.fin-sem-cat { display: inline-block; padding: 2px 9px; border-radius: 10px; background: #FBF1DC; color: #8A5A00; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fin-vazio-suave { color: var(--stone-soft); }
.fin-tabela-fluxo .fin-col-valor { width: 120px; }
table.data-table.fin-tabela-fluxo td { white-space: normal; }
table.data-table.fin-tabela-fluxo td.fin-col-data, table.data-table.fin-tabela-fluxo td.fin-col-valor { white-space: nowrap; }
@media (max-width: 1180px) {
  .fin-tabela-fluxo .fin-col-desk { display: none; }
  .fin-so-mobile { display: inline; }
}

/* ---- Seletor próprio (com busca) ---- */
.fin-sel { position: relative; width: 100%; }
.fin-sel-nativo { position: absolute !important; left: 0 !important; top: 0 !important; width: 1px !important; min-width: 0 !important; max-width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.fin-sel-botao {
  width: 100%; text-align: left; background: var(--white); border: 1.5px solid var(--stone-soft); border-radius: 8px; padding: 11px 34px 11px 12px;
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--navy); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2366706B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.fin-sel-botao:hover { border-color: var(--primary); }
.fin-sel-botao:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fin-sel-vazio { color: var(--stone); }
.fin-sel-off .fin-sel-botao { background-color: var(--bg); cursor: not-allowed; opacity: 0.6; }
.fin-sel-painel {
  position: fixed; z-index: 1000; background: var(--white); border: 1px solid var(--stone-soft); border-radius: 14px; padding: 8px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.2); max-width: calc(100vw - 16px);
}
.fin-sel-busca { width: 100%; margin: 0 0 6px; padding: 9px 12px; font-size: 14px; box-sizing: border-box; }
.fin-sel-lista { overflow-y: auto; max-height: 300px; }
.fin-sel-item { padding: 10px 12px; border-radius: 9px; font-size: 14.5px; color: var(--navy); cursor: pointer; }
.fin-sel-foco { background: var(--bg); }
.fin-sel-atual { color: var(--primary); font-weight: 600; background: var(--primary-soft); }
.fin-sel-atual.fin-sel-foco { background: var(--primary-soft); }
.fin-sel-grupo { padding: 8px 12px 4px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stone); font-weight: 700; }
.fin-sel-nada { padding: 12px; color: var(--stone); font-size: 14px; }
.fin-sel-fundo { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.35); }
.fin-sel-sheet { left: 8px !important; right: 8px; bottom: 8px; top: auto !important; max-width: none; border-radius: 18px; padding: 12px; }
.fin-sel-sheet .fin-sel-lista { max-height: 55vh; }
.fin-sel-sheet .fin-sel-item { padding: 14px 12px; font-size: 16px; }
.fin-sel-sheet .fin-sel-busca { font-size: 16px; }

/* ---- Perfil: menu do usuário, minimalista ---- */
.fin-perfil-main { max-width: 640px; }
.fin-perfil-topo { margin: 6px 0 32px; }
.fin-perfil-id { min-width: 0; }
.fin-perfil-id h1 { margin: 0; font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.fin-perfil-id p { margin: 4px 0 0; color: var(--stone); font-size: 15px; overflow-wrap: anywhere; }
.fin-menu-lista { background: var(--white); border: 1px solid var(--stone-soft); border-radius: 20px; overflow: hidden; }
.fin-menu-item {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; border: 0; background: none; cursor: pointer; text-align: left;
  color: var(--navy); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; box-sizing: border-box;
}
.fin-menu-item + .fin-menu-item { border-top: 1px solid var(--stone-soft); }
.fin-menu-item:hover { background: var(--bg); }
.fin-menu-item span { flex: 1; }
.fin-menu-item > svg:first-child { color: var(--navy); flex-shrink: 0; }
.fin-menu-seta { color: var(--stone); flex-shrink: 0; }
@media (max-width: 700px) { .fin-perfil-id h1 { font-size: 24px; } }
.fin-menu-titulo { margin: 26px 4px 10px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.fin-perfil-topo + .fin-menu-titulo { margin-top: 0; }

/* Sair: só no celular (no computador o botão fica no menu lateral) */
.fin-sair-celular { display: none; }
@media (max-width: 860px) {
  .fin-sair-celular { display: flex; margin-top: 20px; color: var(--bordeaux); }
  .fin-sair-celular > svg:first-child { color: var(--bordeaux); }
}

/* ---- Fluxo de Caixa: título + atalhos (Parcelas, Contas fixas, Importar) + botão + ---- */
.fin-fluxo-titulo { flex-wrap: wrap; }
.fin-fluxo-titulo h1 { margin-right: auto; }
.fin-fluxo-atalhos { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .fin-fluxo-titulo h1 { order: 1; }
  .fin-fluxo-titulo .fin-btn-mais { order: 2; }
  .fin-fluxo-atalhos { order: 3; flex-basis: 100%; }
  .fin-fluxo-atalhos .fin-btn { flex: 1 1 auto; padding: 8px 12px; font-size: 13px; }
  .fin-fluxo-titulo { gap: 14px 12px; }

  /* cartões do Início cabem na tela */
  .chart-card { padding: 20px 18px; }
  .fin-contas-inicio { grid-template-columns: 1fr; }
  .fin-conta-linha-inicio { min-width: 0; padding: 12px; }
  .fin-conta-linha-saldo { font-size: 15px; }
  .fin-conta-linha-inicio .fin-conta-id strong { white-space: normal; overflow-wrap: anywhere; }
  #cardCartoesInicio .chart-card-header-row { flex-wrap: wrap; row-gap: 10px; }
  #cardCartoesInicio .chart-card-header-row > div:first-child { flex: 1 1 100%; }
  #cardCartoesInicio .fin-titulo-acoes { width: 100%; justify-content: space-between; }
}

/* Início: cartões de resumo do mês, quantos couberem na linha */
.kpi-grid.kpi-grid-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 860px) {
  .kpi-grid.kpi-grid-auto { gap: 10px; }
  .kpi-grid-auto .kpi-card { padding: 14px; }
  .kpi-grid-auto .kpi-valor { font-size: 19px; }
  .fin-hero-valor small { display: block; margin: 4px 0 0; }
}

/* Itens que só existem no celular (no computador o Painel Anual está no menu lateral) */
.fin-so-celular-item { display: none !important; }
@media (max-width: 860px) {
  .fin-so-celular-item { display: flex !important; }
  .fin-btn-voltar.fin-so-celular-item { display: inline-flex !important; }
}

/* ---- Fluxo de Caixa no celular: lista de lançamentos (em vez de tabela) ---- */
.fin-dia-cab { display: none; }
.fin-meta-data { display: none; }
.fin-fluxo-ferramentas { gap: 10px; align-items: center; margin: 0 0 12px; flex-wrap: wrap; }
.fin-fluxo-ferramentas .fin-ordenar { display: flex; align-items: center; gap: 8px; flex: 1 1 160px; min-width: 0; margin: 0; }
.fin-fluxo-ferramentas .fin-ordenar span { font-size: 12px; color: var(--stone); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.fin-fluxo-ferramentas select { flex: 1; min-width: 0; padding: 9px 10px; font-size: 14px; }
@media (max-width: 860px) {
  .fin-tabela-fluxo thead { display: none; }
  .fin-tabela-fluxo, .fin-tabela-fluxo tbody { display: block; width: 100%; }
  .fin-tabela-fluxo .data-table-wrapper, .data-table-wrapper:has(.fin-tabela-fluxo) { border-radius: 16px; }
  table.data-table.fin-tabela-fluxo tr.fin-dia-cab { display: block; }
  table.data-table.fin-tabela-fluxo .fin-dia-cab td {
    display: block; padding: 12px 14px 6px; background: var(--bg); border-bottom: 0; font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone);
  }
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 14px;
    border-bottom: 1px solid var(--stone-soft); -webkit-tap-highlight-color: transparent; min-height: 58px;
  }
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel:active { background: var(--bg); }
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td { display: block; padding: 0; border: 0; width: auto; }
  /* só o essencial: nome + detalhes à esquerda, valor à direita. Data, caixinha e × saem (a data vira título do dia). */
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td.fin-col-data,
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td.fin-col-chk,
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td.fin-col-desk,
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td:last-child { display: none; }
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td.fin-col-valor { text-align: right; font-size: 15px; font-weight: 700; white-space: nowrap; }
  table.data-table.fin-tabela-fluxo tr.fin-linha-clicavel td:nth-child(3) { min-width: 0; }
  .fin-tabela-fluxo.fin-agrupado .fin-meta-data { display: none; }
  .fin-tabela-fluxo:not(.fin-agrupado) .fin-meta-data { display: inline; }
  /* modo "Selecionar": a caixinha aparece à esquerda */
  .fin-tabela-fluxo.fin-modo-sel tr.fin-linha-clicavel { grid-template-columns: auto 1fr auto; }
  table.data-table.fin-tabela-fluxo.fin-modo-sel tr.fin-linha-clicavel td.fin-col-chk { display: block; padding-right: 12px; }
  .fin-tabela-fluxo .fin-detalhe-lanc strong { font-size: 15px; }
  .fin-tabela-fluxo .fin-detalhe-lanc small { font-size: 12.5px; line-height: 1.45; }
}

/* ---- Família: membros e convites como cartões no celular ---- */
@media (max-width: 860px) {
  .fin-tabela-familia thead { display: none; }
  .fin-tabela-familia, .fin-tabela-familia tbody { display: block; width: 100%; }
  table.data-table.fin-tabela-familia tr.fin-membro {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nome papel" "email email" "data acao";
    gap: 2px 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--stone-soft);
  }
  table.data-table.fin-tabela-familia tr.fin-membro:last-child { border-bottom: 0; }
  table.data-table.fin-tabela-familia tr.fin-membro td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  table.data-table.fin-tabela-familia td.fin-membro-nome { grid-area: nome; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 16px; }
  .fin-membro-papel { grid-area: papel; }
  table.data-table.fin-tabela-familia td.fin-membro-email { grid-area: email; color: var(--stone); font-size: 14px; }
  table.data-table.fin-tabela-familia td.fin-membro-acao { grid-area: acao; text-align: right; }
  table.data-table.fin-tabela-familia td.fin-membro-data { grid-area: data; color: var(--stone); font-size: 12.5px; margin-top: 4px; }
  .fin-membro-data::before { content: 'Entrou em '; }
  table.data-table.fin-tabela-familia tr.fin-convite { display: block; padding: 14px 16px; border-bottom: 1px solid var(--stone-soft); }
  table.data-table.fin-tabela-familia tr.fin-convite:last-child { border-bottom: 0; }
  table.data-table.fin-tabela-familia tr.fin-convite td { display: block; padding: 0; border: 0; overflow-wrap: anywhere; white-space: normal; }
  table.data-table.fin-tabela-familia td.fin-convite-email { font-weight: 600; }
  table.data-table.fin-tabela-familia td.fin-convite-data { color: var(--stone); font-size: 12.5px; margin-top: 3px; }
  .fin-convite-data::before { content: 'Convidado em '; }
}

.fin-acao-perigo { color: var(--bordeaux); font-weight: 600; font-size: 13px; }
.fin-acao-perigo:hover { color: var(--bordeaux); text-decoration: underline; }
@media (max-width: 860px) {
  table.data-table.fin-tabela-familia tr.fin-convite { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
  table.data-table.fin-tabela-familia tr.fin-convite td.fin-convite-data { grid-column: 1; }
  table.data-table.fin-tabela-familia tr.fin-convite td.fin-membro-acao { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- Lançamento: campo que falta e ajuda do cartão ---- */
.fin-campo-erro, .fin-campo-erro .fin-sel-botao, input.fin-campo-erro, select.fin-campo-erro { border-color: var(--bordeaux) !important; box-shadow: 0 0 0 3px rgba(200,16,46,0.12); }
.fin-dica-forma { font-size: 12px; color: var(--stone); margin-top: 6px; line-height: 1.6; }
.fin-dica-forma:empty { display: none; }
.fin-dica-chip { border: 1px solid var(--stone-soft); background: var(--white); color: var(--navy); border-radius: 14px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: 'Inter', sans-serif; }
.fin-dica-chip:hover { border-color: var(--primary); }
.fin-dica-chip small { color: var(--stone); }

/* Compra parcelada: retorno "6x de R$ 166,67 = R$ 1.000,00" embaixo do campo de parcelas */
.fin-dica-parcelas { margin: 6px 0 0; font-size: 12.5px; color: var(--primary); font-weight: 600; line-height: 1.4; }
.fin-dica-parcelas:empty { display: none; }

/* ---- Transferência entre contas ---- */
.fin-tipo-btn.ativo-transferencia { border-color: #3B6FB6; background: #E7EFFA; color: #1E4F9A; }
.fin-col-trocar { width: 56px; text-align: center; }
.fin-btn-trocar {
  width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--stone-soft); background: var(--white); color: var(--navy);
  font-size: 18px; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, transform 0.2s ease;
}
.fin-btn-trocar:hover { border-color: #3B6FB6; transform: rotate(180deg); }
.fin-valor-transferencia { color: #1E4F9A; font-weight: 600; }
.fin-pill-transferencia { background: #E7EFFA; color: #1E4F9A; }
@media (max-width: 860px) {
  /* no celular a seta fica entre as duas contas, no meio, como nos aplicativos de banco */
  td.fin-col-trocar { width: auto; text-align: center; padding: 0 !important; }
  td.fin-col-trocar::before { display: none; }
}

/* cor do valor nas tabelas (ganha da cor padrão da célula) */
table.data-table td.fin-valor-entrada { color: var(--sucesso); font-weight: 600; }
table.data-table td.fin-valor-saida { color: var(--bordeaux); font-weight: 600; }
table.data-table td.fin-valor-investimento { color: #8a6d1a; font-weight: 600; }
table.data-table td.fin-valor-transferencia { color: #1E4F9A; font-weight: 600; }

/* 4 tipos de lançamento (Entrada, Saída, Investimento, Transferência) em 2 colunas no celular */
@media (max-width: 560px) {
  .fin-tipo-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: none; }
  .fin-tipo-toggle .fin-tipo-btn { width: 100%; }
}

/* ---- Pagamento de fatura ---- */
.fin-fatura-pagamento { margin: 0 0 16px; }
.fin-fatura-pag-linha { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--stone-soft); border-radius: 14px; background: var(--white); }
.fin-fatura-pag-linha:empty { display: none; }
.fin-pag-item { font-size: 13px; color: var(--navy); }

/* ---- Celular: sem "zoom" ao tocar nos campos e botão de salvar na largura do formulário ---- */
html { touch-action: manipulation; }   /* some o zoom de toque duplo; o gesto de pinça continua valendo */
.fin-btn-salvar-lote { max-width: 320px; margin-top: 6px; }
@media (max-width: 860px) {
  /* o iPhone/Android dá zoom ao focar um campo com letra menor que 16px e deixa a tela "presa" ampliada */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
  .fin-btn-salvar-lote { max-width: none; width: 100%; }
}

/* Contas para pagar: a linha inteira abre a janela de pagamento */
.fin-lembrete-clicavel { cursor: pointer; border-radius: 10px; transition: background 0.15s ease; }
.fin-lembrete-clicavel:hover { background: var(--bg); }
.fin-lembrete-clicavel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Tabelas que viram lista no celular (nome + detalhe à esquerda, valor à direita): sem arrastar para o lado ---- */
.fl-meta { display: none; }
@media (max-width: 860px) {
  .fin-tabela-lista thead { display: none; }
  .fin-tabela-lista, .fin-tabela-lista tbody { display: block; width: 100%; }
  table.data-table.fin-tabela-lista tbody tr {
    display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--stone-soft);
  }
  table.data-table.fin-tabela-lista tbody tr:last-child { border-bottom: 0; }
  table.data-table.fin-tabela-lista tbody tr td { display: block; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  table.data-table.fin-tabela-lista tbody tr td.fl-col-desk { display: none; }
  table.data-table.fin-tabela-lista tbody tr td.fl-desc { grid-column: 1; font-weight: 600; font-size: 15px; }
  table.data-table.fin-tabela-lista tbody tr td.fl-valor { grid-column: 2; text-align: right; white-space: nowrap; font-weight: 700; font-size: 15px; }
  table.data-table.fin-tabela-lista tbody tr td.tabela-vazio { grid-column: 1 / -1; }
  .fin-tabela-lista .fl-meta { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--stone); line-height: 1.4; }
  table.data-table.fin-tabela-lista tbody tr.fin-extrato-sub { background: rgba(0,0,0,0.025); padding-top: 8px; padding-bottom: 8px; }
  table.data-table.fin-tabela-lista tbody tr.fin-extrato-sub td { background: transparent !important; }
  table.data-table.fin-tabela-lista tbody tr.fin-extrato-sub td.fl-desc { font-weight: 400; font-size: 13.5px; color: var(--stone); }
  table.data-table.fin-tabela-lista tbody tr.fin-extrato-sub td.fl-valor { font-weight: 500; font-size: 13.5px; color: var(--stone); }
}

/* Duplicar / remover linha (lançar em lote): botões com texto no celular */
@media (max-width: 700px) {
  table.fin-tabela-lote td.fin-lote-acoes .fin-linha-acoes { gap: 8px; width: 100%; }
  table.fin-tabela-lote td.fin-lote-acoes .fin-btn-icone {
    flex: 1; width: auto; height: 40px; font-size: 14px; font-weight: 500; font-family: 'Inter', sans-serif;
    color: var(--navy); border-color: var(--stone-soft); background: var(--white);
  }
  table.fin-tabela-lote td.fin-lote-acoes .fin-btn-icone[data-duplicar]::after { content: " Duplicar"; }
  table.fin-tabela-lote td.fin-lote-acoes .fin-btn-icone[data-remover]::after { content: " Remover"; }
  table.fin-tabela-lote td.fin-lote-acoes .fin-btn-icone.remover { color: var(--bordeaux); border-color: var(--bordeaux); }
}

/* Limpar filtros: botão visível */
#btnLimparFiltros {
  border: 1.5px solid var(--bordeaux); color: var(--bordeaux); background: var(--white);
  border-radius: 8px; padding: 8px 14px; font-size: 13.5px; font-weight: 500; text-decoration: none;
}
#btnLimparFiltros:hover { background: var(--bordeaux); color: var(--white); text-decoration: none; }
@media (max-width: 700px) { #btnLimparFiltros { width: 100%; padding: 11px 14px; font-size: 14px; margin-top: 4px; } }

/* listas: no celular o destaque é a categoria/subcategoria; no computador, a descrição */
.fl-so-mobile { display: none; }
@media (max-width: 700px) {
  .fl-so-desk { display: none; }
  .fl-so-mobile { display: inline; }
}

/* Excluir parcela: escolher o escopo */
.fin-modal-parcelas { max-width: 420px; }
.fin-modal-parcelas-txt { color: var(--stone); font-size: 14px; margin: 4px 0 16px; }
.fin-escopo-opcoes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.fin-escopo-op { text-align: left; padding: 13px 16px; font-size: 15px; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--navy); background: var(--white); border: 1.5px solid var(--stone-soft); border-radius: 10px; cursor: pointer; }
.fin-escopo-op:hover { border-color: var(--navy); }
.fin-escopo-op.perigo { color: var(--bordeaux); border-color: var(--bordeaux); }
.fin-escopo-op.perigo:hover { background: var(--bordeaux); color: var(--white); }
.fin-modal-parcelas .fin-escopo-cancelar { width: 100%; padding: 12px; }

/* ---- Lançar no celular: formulário limpo, com o valor em destaque no topo ---- */
@media (max-width: 700px) {
  .fin-planilha-card { padding: 20px 16px 16px; border-radius: 16px; }
  table.fin-planilha tr {
    grid-template-columns: 1fr 1fr; gap: 16px 12px; border: 0; border-radius: 0; padding: 0; margin: 0; background: none;
  }
  table.fin-planilha tr + tr { border-top: 1.5px dashed var(--stone-soft); padding-top: 20px; margin-top: 20px; }
  table.fin-planilha td { grid-column: 1 / -1; }
  /* parcelas logo abaixo do valor */
  table.fin-planilha td[data-label^="Nº"] { order: -1; }
  table.fin-planilha td[data-label]::before { font-size: 11px; letter-spacing: 0.06em; margin-bottom: 6px; color: var(--stone); }
  table.fin-planilha select, table.fin-planilha input {
    height: 50px; padding: 0 14px; font-size: 16px; border-radius: 12px; background: var(--white);
  }
  table.fin-planilha input[type="date"] { padding: 0 12px; }
  table.fin-planilha .fin-select-custom, table.fin-planilha .fin-sel-botao { min-height: 50px; border-radius: 12px; font-size: 16px; }
  /* o valor vem primeiro, mas como qualquer outro campo (sem destaque) */
  table.fin-planilha td[data-label="Valor (R$)"] { order: -1; }
  table.fin-planilha input.linha-valor { font-weight: 600; font-family: 'Manrope', sans-serif; font-size: 17px !important; }
  table.fin-planilha input.linha-valor::placeholder { font-weight: 400; color: var(--stone); opacity: 0.6; }
  table.fin-planilha td.fin-lote-acoes { order: 99; }
  .fin-planilha-rodape { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stone-soft); }
  .fin-planilha-total { font-size: 15px; }
  .fin-planilha-total strong { font-size: 18px; }
}

/* Contas fixas: histórico de pagamentos */
.fin-conta-fixa-card.fin-clicavel { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.fin-conta-fixa-card.fin-clicavel:hover { border-color: var(--primary); box-shadow: 0 6px 18px -10px rgba(32,36,34,0.35); }
.fin-hist-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.fin-hist-resumo > div { background: var(--bg); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.fin-hist-resumo small { display: block; font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.fin-hist-resumo strong { display: block; margin-top: 2px; font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-hist-lista { border: 1px solid var(--stone-soft); border-radius: 12px; overflow: hidden; max-height: 50vh; overflow-y: auto; }
.fin-hist-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--stone-soft); background: var(--white); }
.fin-hist-linha:last-child { border-bottom: 0; }
.fin-hist-esq, .fin-hist-dir { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fin-hist-dir { align-items: flex-end; flex-shrink: 0; }
.fin-hist-esq strong { font-size: 15px; color: var(--navy); }
.fin-hist-esq small { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.fin-hist-dir strong { font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--navy); white-space: nowrap; }
.fin-hist-status { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; white-space: nowrap; background: var(--stone-soft); color: var(--stone); }
.fin-hist-status.pago { background: var(--primary-soft); color: var(--sucesso); }
.fin-hist-status.atrasada { background: var(--bordeaux-soft); color: var(--bordeaux); }
.fin-hist-status.a-vencer { background: #FBF1DC; color: #8A5A00; }
.fin-hist-rodape { margin-top: 14px; display: flex; justify-content: flex-end; }
@media (max-width: 700px) {
  .fin-hist-resumo { grid-template-columns: 1fr; gap: 6px; }
  .fin-hist-resumo > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; }
  .fin-hist-resumo strong { margin-top: 0; font-size: 15px; }
  .fin-hist-lista { max-height: none; }
  .fin-hist-rodape .fin-btn { width: 100%; }
}

/* Conciliação de conta fixa (check-in "Paguei") */
.fin-chip-paguei {
  margin-left: 6px; padding: 2px 10px; border-radius: 10px; border: 1.5px solid var(--sucesso); background: var(--white);
  color: var(--sucesso); font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.fin-chip-paguei:hover { background: var(--sucesso); color: var(--white); }
.fin-pill-paga { background: var(--primary-soft); color: var(--sucesso); margin-left: 6px; border: 0; cursor: pointer; font-family: 'Inter', sans-serif; }
.fin-pill-pend { background: #FBF1DC; color: #8A5A00; margin-left: 6px; }
button.fin-hist-status.fin-hist-paguei { border: 1.5px solid currentColor; cursor: pointer; font-family: 'Inter', sans-serif; background: var(--white); }
@media (max-width: 700px) {
  .fin-chip-paguei, .fin-pill-paga { padding: 4px 12px; font-size: 12.5px; }
}

/* Contas fixas: situação do mês no card (só a que precisa de atenção ganha cor) */
.fin-conta-fixa-card { border-left-width: 4px; border-left-color: transparent; }
.fin-conta-fixa-card.sit-vencida { border-left: 4px solid var(--bordeaux); }
.fin-conta-fixa-card.sit-aberta { border-left: 4px solid #E0A526; }
.fin-cf-status { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.fin-cf-status.vencida { color: var(--bordeaux); }
.fin-cf-status.aberta { color: #8A5A00; }
.fin-cf-status.paga { color: #9A8461; font-weight: 500; }

@media (max-width: 480px) {
  .fin-evo { gap: 4px; }
  .fin-evo-valor { font-size: 10px; line-height: 1.25; }
}

/* Contas bancárias / fatura no celular: botões e números mais organizados */
@media (max-width: 700px) {
  .fin-hero-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fin-hero-acoes .fin-btn { width: 100%; padding: 11px 8px; text-align: center; }
  .fin-hero-acoes .fin-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #modalFatura .kpi-grid, #contasDetalhe .kpi-grid, .kpi-grid.fin-kpi-2col { grid-template-columns: 1fr 1fr; gap: 10px; }
  #modalFatura .kpi-card, .kpi-grid.fin-kpi-2col .kpi-card { padding: 14px; min-width: 0; }
  #modalFatura .kpi-valor, .kpi-grid.fin-kpi-2col .kpi-valor { font-size: 20px; overflow-wrap: anywhere; }
  #modalFatura .kpi-card:first-child, #modalFatura .kpi-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #filtroOrigem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #filtroOrigem .fin-tipo-btn { padding: 11px 6px; font-size: 13.5px; }
  #filtroCartao { width: 100%; max-width: none; }
}

/* Família: resultado do convite */
.fin-convite-status { font-size: 14px; color: var(--navy); margin: 0 0 14px; line-height: 1.5; }
.fin-convite-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-convite-botoes .fin-btn { flex: 1; text-align: center; text-decoration: none; }
#convidarLink { font-size: 13px; }

/* Cadastro: aceite dos termos */
.fin-aceite-termos { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--stone); line-height: 1.5; margin: 4px 0 16px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; font-family: 'Inter', sans-serif; }
input[readonly]#signupEmail { background: #f4f3ee; }
.fin-aceite-termos input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--primary); }
.fin-aceite-termos a { color: var(--navy); text-decoration: underline; }

/* Páginas legais (termos e privacidade) */
.fin-legal-body { background: var(--bg); }
.fin-legal { max-width: 760px; margin: 0 auto; padding: 24px 20px 60px; }
.fin-legal h1 { font-family: 'Source Serif 4', serif; font-size: 34px; margin: 8px 0 4px; color: var(--navy); }
.fin-legal h2 { font-family: 'Manrope', sans-serif; font-size: 18px; margin: 28px 0 8px; color: var(--navy); }
.fin-legal p, .fin-legal li { font-size: 15px; line-height: 1.65; color: #3a403d; }
.fin-legal ul { padding-left: 20px; }
.fin-legal-data { color: var(--stone); font-size: 13px !important; margin: 0 0 18px; }
.fin-legal-contato { margin-top: 32px; padding: 14px 16px; background: var(--white); border: 1px solid var(--stone-soft); border-radius: 10px; }
.fin-legal .foot { margin-top: 24px; }
@media (max-width: 700px) { .fin-legal h1 { font-size: 28px; } }

/* Meus dados */
.fin-dados-card { margin-bottom: 18px; }
.fin-dados-card .sub { margin: 4px 0 14px; }
.fin-dados-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-dados-perigo { border-color: #E8C7CC; }
.fin-btn-perigo { color: var(--bordeaux); border-color: var(--bordeaux); background: var(--white); }
.fin-btn-perigo:hover { background: var(--bordeaux); color: var(--white); }
.fin-submit-perigo { background: var(--bordeaux) !important; }
@media (max-width: 700px) { .fin-dados-botoes .fin-btn { flex: 1 1 100%; } }
.foot a { color: var(--stone); text-decoration: underline; }

/* Lançamento rápido */
.fin-rapidos { margin: 0 0 14px; }
.fin-rapidos-titulo { font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); margin-bottom: 8px; }
.fin-rapidos-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-rapido { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 14px; border: 1.5px solid var(--stone-soft); border-radius: 12px; background: var(--white); cursor: pointer; text-align: left; font-family: 'Inter', sans-serif; max-width: 100%; }
.fin-rapido:hover { border-color: var(--primary); }
.fin-rapido-nome { font-size: 14px; font-weight: 600; color: var(--navy); }
.fin-rapido small { font-size: 12px; color: var(--stone); }
@media (max-width: 700px) { .fin-rapido { flex: 1 1 calc(50% - 8px); min-width: 0; } .fin-rapido-nome, .fin-rapido small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } }

/* ---- Lançar no computador: cada lançamento em duas linhas, com o rótulo em cima de cada campo ---- */
@media (min-width: 1101px) {
  .fin-planilha-card { padding: 24px 26px 18px; }
  table.fin-planilha, table.fin-planilha tbody { display: block; width: 100%; }
  table.fin-planilha thead { display: none; }
  table.fin-planilha tr {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 14px; align-items: start;
    padding: 0 0 22px; margin: 0 0 22px; border: 0; border-bottom: 1.5px dashed var(--stone-soft); border-radius: 0; background: none;
  }
  table.fin-planilha tbody tr:last-child { margin-bottom: 4px; }
  table.fin-planilha td { display: block; padding: 0; border: 0; min-width: 0; grid-column: span 3; }
  table.fin-planilha td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--stone); margin-bottom: 6px; font-family: 'Manrope', sans-serif;
  }
  /* quantas das 12 colunas cada campo ocupa (por tipo de lançamento) */
  table.fin-planilha[data-tipo="saida"] [data-col="data"] { grid-column: span 2; }
  table.fin-planilha[data-tipo="saida"] [data-col="valor"] { grid-column: span 2; }
  table.fin-planilha[data-tipo="saida"] [data-col="parcelas"] { grid-column: span 2; }
  table.fin-planilha[data-tipo="saida"] [data-col="descricao"] { grid-column: span 4; }
  table.fin-planilha[data-tipo="entrada"] [data-col="conta"], table.fin-planilha[data-tipo="entrada"] [data-col="categoria"],
  table.fin-planilha[data-tipo="entrada"] [data-col="subcategoria"] { grid-column: span 4; }
  table.fin-planilha[data-tipo="transferencia"] [data-col="conta"], table.fin-planilha[data-tipo="transferencia"] [data-col="destino"] { grid-column: span 5; }
  table.fin-planilha[data-tipo="transferencia"] td.fin-col-trocar { grid-column: span 2; text-align: center; }
  table.fin-planilha[data-tipo="investimento"] [data-col="conta"], table.fin-planilha[data-tipo="investimento"] [data-col="cofrinho"] { grid-column: span 6; }
  table.fin-planilha:not([data-tipo="saida"]) [data-col="data"], table.fin-planilha:not([data-tipo="saida"]) [data-col="valor"] { grid-column: span 3; }
  table.fin-planilha:not([data-tipo="saida"]) [data-col="descricao"] { grid-column: span 4; }
  table.fin-planilha td.fin-lote-acoes { grid-column: span 2; align-self: end; }
  table.fin-planilha td.fin-lote-acoes .fin-linha-acoes { justify-content: flex-end; padding: 0; }
  table.fin-planilha select, table.fin-planilha input {
    width: 100%; height: 46px; padding: 0 14px; font-size: 14.5px; border: 1.5px solid var(--stone-soft); border-radius: 10px; background: var(--white);
  }
  table.fin-planilha tr:hover select, table.fin-planilha tr:hover input { border-color: var(--stone-soft); }
  table.fin-planilha select:hover, table.fin-planilha input:hover { border-color: var(--primary); }
  table.fin-planilha select:focus, table.fin-planilha input:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
  table.fin-planilha .fin-sel-botao { min-height: 46px; height: 46px; border-radius: 10px; }
  table.fin-planilha input.linha-valor { text-align: right; font-weight: 700; font-family: 'Manrope', sans-serif; font-size: 16px; }
  table.fin-planilha input.linha-parcelas { text-align: center; }
  table.fin-planilha input[type="number"] { text-align: center; }
  table.fin-planilha input:disabled { opacity: 0.5; background: var(--bg); }
  table.fin-planilha .fin-dica-parcelas { font-size: 11.5px; margin-top: 4px; }
  table.fin-planilha td.fin-lote-acoes .fin-btn-icone { width: 46px; height: 46px; }
}

/* Repetir todo mês (lançamento recorrente) */
.fin-recorrente { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 10px 14px; border: 1.5px dashed var(--stone-soft); border-radius: 12px; background: var(--bg); text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-weight: 400; margin: 0; }
.fin-recorrente:hover { border-color: var(--primary); }
.fin-recorrente input.linha-recorrente { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; pointer-events: none; }
.fin-recorrente-chave { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px; background: var(--stone-soft); transition: background 0.15s ease; }
.fin-recorrente-chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.fin-recorrente input:checked + .fin-recorrente-chave { background: var(--primary); }
.fin-recorrente input:checked + .fin-recorrente-chave::after { transform: translateX(18px); }
.fin-recorrente input:focus-visible + .fin-recorrente-chave { outline: 2px solid var(--primary); outline-offset: 2px; }
.fin-recorrente:has(input:checked) { border-style: solid; border-color: var(--primary); background: var(--primary-soft); }
.fin-recorrente-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-recorrente-txt strong { font-size: 14px; color: var(--navy); font-weight: 600; }
.fin-recorrente-txt small { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.fin-recorrente-off { opacity: 0.5; cursor: not-allowed; }
.fin-recorrente-ja { cursor: default; border-style: solid; background: var(--primary-soft); border-color: var(--primary); }
.fin-recorrente-icone { font-size: 20px; color: var(--primary); width: 42px; text-align: center; flex: 0 0 auto; }
td.fin-col-recorrente:empty { display: none; }

@media (min-width: 1101px) {
  table.fin-planilha[data-tipo="saida"] [data-col="descricao"] { grid-column: span 6; }
  table.fin-planilha[data-tipo="entrada"] [data-col="descricao"] { grid-column: span 6; }
  table.fin-planilha td.fin-col-recorrente { grid-column: span 10; align-self: end; }
  table.fin-planilha[data-tipo="saida"] td.fin-lote-acoes, table.fin-planilha[data-tipo="entrada"] td.fin-lote-acoes { align-self: end; }
}
@media (max-width: 700px) {
  table.fin-planilha td.fin-col-recorrente { order: 90; }
}

/* Contas bancárias agrupadas por categoria */
.fin-grupo-contas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 26px 0 12px; padding: 0 4px; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone); }
.fin-grupo-contas:first-child { margin-top: 6px; }
.fin-grupo-contas small { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--navy); }
.fin-grupo-extra { margin-top: 22px; }

.fin-link-pagfatura { display: inline-block; margin-top: 10px; font-size: 13px; }

.fin-hist-editavel { cursor: pointer; transition: background 0.12s ease; }
.fin-hist-editavel:hover, .fin-hist-editavel:focus-visible { background: var(--bg); outline: none; }
.fin-hist-editavel .fin-hist-esq strong::after { content: " ✎"; font-weight: 400; color: var(--stone-soft); font-size: 13px; }
.fin-hist-editavel:hover .fin-hist-esq strong::after { color: var(--primary); }

/* seletor com busca: segunda linha (ex.: banco do cartão) */
.fin-sel-item { display: flex; flex-direction: column; gap: 1px; }
.fin-sel-sub { font-size: 12px; color: var(--stone); font-weight: 400; }
.fin-sel-oculto, td.fin-oculto { display: none !important; }
/* ---------- Logo da marca (substitui a bolinha) ---------- */
.logo-mark { display: block; flex-shrink: 0; object-fit: contain; }
.mark { align-items: center; }
.mark .logo-mark { width: 26px; height: 26px; margin-right: 2px; }
.sidebar-brand .logo-mark { width: 26px; height: 26px; }
.mobile-topbar-brand .logo-mark { width: 22px; height: 22px; }

/* ---------- Forma de pagamento em dois passos (Pix, Boleto, Débito, Espécie, Cartão) ---------- */
.fin-meios { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fin-meio {
  height: 46px; padding: 0 2px; border: 1.5px solid var(--stone-soft); border-radius: 10px; background: var(--white);
  color: var(--navy); font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.fin-meio:hover { border-color: var(--primary); }
.fin-meio.ativo { background: var(--primary); border-color: var(--primary); color: var(--white); }
.fin-meio:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.fin-meio.ativo:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }
@media (max-width: 700px) {
  .fin-meios { gap: 5px; }
  .fin-meio { height: 50px; font-size: 13px; border-radius: 12px; }
}
@media (min-width: 1101px) {
  table.fin-planilha[data-tipo="saida"] [data-col="forma"] { grid-column: span 7; }
  table.fin-planilha[data-tipo="saida"] [data-col="conta"] { grid-column: span 5; }
  table.fin-planilha[data-tipo="saida"] [data-col="categoria"], table.fin-planilha[data-tipo="saida"] [data-col="subcategoria"] { grid-column: span 6; }
}
/* a fileira de formas ocupa a linha inteira (em telas médias e no celular) */
table.fin-planilha td[data-col="forma"] { grid-column: 1 / -1; }

/* ---------- Contas bancárias: uma conta por linha, cartões todos do mesmo tamanho e alinhados à esquerda ---------- */
.fin-contas-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 16px; }
.fin-banco-card { display: flex; flex-direction: column; }
.fin-cartao-visual { aspect-ratio: auto; min-height: 168px; }
.fin-cv-sem-limite { background: transparent; }
@media (min-width: 701px) {
  .fin-banco-card .fin-cartoes-grid { grid-template-columns: repeat(auto-fill, 280px); gap: 16px; margin-top: 4px; }
  .fin-cartao-novo { min-height: 168px; }
}

/* Data no celular: o iPhone/Safari ignora largura e altura do campo de data se não for "zerado" */
table.fin-planilha input[type="date"], table.fin-tabela-lote input[type="date"] {
  -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%; text-align: left; line-height: 1.2;
}
table.fin-planilha input[type="date"]::-webkit-date-and-time-value, table.fin-tabela-lote input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; margin: 0; }
table.fin-planilha input[type="date"]::-webkit-calendar-picker-indicator, table.fin-tabela-lote input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; }
@media (max-width: 700px) {
  table.fin-planilha input[type="date"], table.fin-tabela-lote input[type="date"] { height: 50px; min-height: 50px; padding: 0 14px; }
}

/* "+ Nova" discreto ao lado do rótulo Conta / Carteira / Cartão: cadastrar na hora */
.fin-destino-bloco { display: block; }
.fin-rotulo-destino {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; min-height: 18px;
  font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone);
}
.fin-mais-mini {
  position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin: -2px 0; padding: 0; border: 1.5px solid var(--stone); border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 0; line-height: 0; color: var(--stone);   /* o "+" é desenhado abaixo (fica exatamente no centro, o caractere sai torto) */
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.fin-mais-mini::before, .fin-mais-mini::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); }
.fin-mais-mini::before { width: 9px; height: 1.5px; }
.fin-mais-mini::after { width: 1.5px; height: 9px; }
.fin-mais-mini:hover, .fin-mais-mini:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); outline: none; }
/* lista vazia: o "+" é o próximo passo, então fica cheio */
.fin-destino-bloco.obrig:has(select option[value=""]:checked) .fin-mais-mini { background: var(--primary); border-color: var(--primary); color: var(--white); }
.fin-meio:not(.ativo):hover, .fin-meio:not(.ativo):focus { background: var(--white); color: var(--navy); }

/* ---------- Lançar: valor primeiro, formulário mais compacto ---------- */
/* ordem no celular (a ordem no HTML é a do computador: valor, data, parcelas, descrição, categoria, forma, conta) */
@media (max-width: 700px) {
  table.fin-planilha td[data-col="valor"] { order: 1; }
  table.fin-planilha td[data-col="parcelas"] { order: 2; }
  table.fin-planilha td[data-col="forma"] { order: 3; }
  table.fin-planilha td[data-col="conta"], table.fin-planilha td.fin-col-trocar, table.fin-planilha td[data-col="destino"] { order: 4; }
  table.fin-planilha td[data-col="cofrinho"] { order: 5; }
  table.fin-planilha td[data-col="categoria"] { order: 6; }
  table.fin-planilha td[data-col="subcategoria"] { order: 7; }
  table.fin-planilha td[data-col="data"] { order: 8; }
  table.fin-planilha td[data-col="descricao"] { order: 9; }
}
@media (min-width: 1101px) {
  /* linha 1: quanto, quando e o quê; linha 2: categoria; linha 3: como paguei */
  table.fin-planilha[data-tipo="saida"] [data-col="valor"], table.fin-planilha[data-tipo="saida"] [data-col="data"] { grid-column: span 3; }
  table.fin-planilha[data-tipo="saida"] [data-col="parcelas"] { grid-column: span 2; }
  table.fin-planilha[data-tipo="saida"] [data-col="descricao"] { grid-column: span 4; }
  table.fin-planilha[data-tipo="saida"] [data-col="categoria"], table.fin-planilha[data-tipo="saida"] [data-col="subcategoria"] { grid-column: span 6; }
  table.fin-planilha[data-tipo="saida"] [data-col="forma"] { grid-column: span 7; }
  table.fin-planilha[data-tipo="saida"] [data-col="conta"] { grid-column: span 5; }
  table.fin-planilha:not([data-tipo="saida"]) [data-col="descricao"] { grid-column: span 6; }
  /* "Conta recorrente" vira uma pílula pequena em vez de uma barra larga */
  table.fin-planilha td.fin-col-recorrente { grid-column: span 8; }
  table.fin-planilha td.fin-col-recorrente .fin-recorrente { display: inline-flex; padding: 7px 16px 7px 12px; border-radius: 999px; gap: 10px; }
  table.fin-planilha td.fin-col-recorrente .fin-recorrente-txt strong { font-size: 13.5px; }
  table.fin-planilha td.fin-col-recorrente .fin-recorrente-chave { width: 36px; height: 20px; border-radius: 10px; }
  table.fin-planilha td.fin-col-recorrente .fin-recorrente-chave::after { width: 14px; height: 14px; top: 3px; left: 3px; }
  table.fin-planilha td.fin-col-recorrente .fin-recorrente input:checked + .fin-recorrente-chave::after { transform: translateX(16px); }
  /* o formulário não precisa esticar pela tela toda */
  main.fin-pagina-lancar > * { max-width: 1040px; }
  /* "Lançar novamente": uma fileira só, com os 4 mais usados */
  .fin-rapido:nth-child(n+5) { display: none; }
  .fin-rapidos-lista { flex-wrap: nowrap; }
  .fin-rapido { flex: 0 1 auto; min-width: 0; }
  .fin-rapido-nome, .fin-rapido small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
}
@media (min-width: 1101px) {
  table.fin-planilha td.fin-lote-acoes { grid-column: 11 / span 2; }
}

/* ---------- Lançar: forma de pagamento e conta em cima, depois valor, depois categoria ---------- */
@media (min-width: 1101px) {
  table.fin-planilha[data-tipo="entrada"] [data-col="conta"] { grid-column: span 6; }
  table.fin-planilha[data-tipo="entrada"] [data-col="descricao"], table.fin-planilha[data-tipo="entrada"] [data-col="categoria"],
  table.fin-planilha[data-tipo="entrada"] [data-col="subcategoria"] { grid-column: span 4; }
}

/* Lançar no celular: forma de pagamento e conta em cima, depois o valor */
@media (max-width: 700px) {
  table.fin-planilha td[data-col="forma"] { order: 1; }
  table.fin-planilha td[data-col="conta"], table.fin-planilha td.fin-col-trocar, table.fin-planilha td[data-col="destino"] { order: 2; }
  table.fin-planilha td[data-col="cofrinho"] { order: 3; }
  table.fin-planilha td[data-col="valor"] { order: 4; }
  table.fin-planilha td[data-col="parcelas"] { order: 5; }
}

/* Data: o texto fica centralizado na vertical depois de preenchido (o Safari do iPhone o encostava no topo do campo) */
table.fin-planilha input[type="date"], table.fin-tabela-lote input[type="date"] {
  display: flex; align-items: center; line-height: normal; padding-top: 0; padding-bottom: 0;
}
table.fin-planilha input[type="date"]::-webkit-date-and-time-value, table.fin-tabela-lote input[type="date"]::-webkit-date-and-time-value {
  display: flex; align-items: center; min-height: 1.5em; height: 100%; margin: 0; padding: 0; text-align: left;
}
table.fin-planilha input[type="date"]::-webkit-datetime-edit, table.fin-tabela-lote input[type="date"]::-webkit-datetime-edit { padding: 0; display: flex; align-items: center; }

/* ---------- Primeiros passos (Início) ---------- */
.fin-passos { margin-bottom: 24px; border: 1.5px solid var(--primary-soft); background: linear-gradient(180deg, #FFFFFF, #FBFCFA); }
.fin-passos-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fin-passos-contagem { flex: 0 0 auto; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 5px 12px; border-radius: 999px; }
.fin-passos-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.fin-passo { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--stone-soft); flex-wrap: wrap; }
.fin-passo:first-child { border-top: 0; }
.fin-passo-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; border: 1.5px solid var(--stone-soft); color: var(--stone); background: var(--white); }
.fin-passo.atual .fin-passo-num { border-color: var(--primary); background: var(--primary); color: var(--white); }
.fin-passo.feito .fin-passo-num { border-color: var(--primary-on-dark); background: var(--primary-soft); color: var(--primary); }
.fin-passo-txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-passo-txt strong { font-size: 15px; color: var(--navy); }
.fin-passo-txt small { font-size: 13px; color: var(--stone); line-height: 1.45; }
.fin-passo.feito .fin-passo-txt strong { color: var(--stone); text-decoration: line-through; text-decoration-color: var(--stone-soft); }
.fin-passo-acoes { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-passo-ok { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--primary); }
.fin-passos-rodape { margin: 8px 0 0; text-align: right; font-size: 12.5px; }
@media (max-width: 700px) {
  .fin-passo-acoes { flex: 1 1 100%; padding-left: 44px; }
  .fin-passo-acoes .fin-btn { flex: 1 1 auto; text-align: center; }
  .fin-passos-rodape { text-align: center; }
}
.fin-passo.feito { flex-wrap: nowrap; }
.fin-passo.feito .fin-passo-txt { flex: 1 1 0; }

/* ---------- Assinatura: cartão do plano ---------- */
.fin-plano { background: var(--white); border-radius: 22px; overflow: hidden; border: 1.5px solid var(--stone-soft); box-shadow: 0 10px 30px -18px rgba(32,36,34,0.35); max-width: 760px; }
.fin-plano-topo { position: relative; padding: 26px 30px 30px; color: #fff; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.fin-plano-topo::after { content: ""; position: absolute; right: -60px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,0.09); pointer-events: none; }
.fin-plano-topo.ok { background: linear-gradient(135deg, #18352F 0%, #2E7D52 100%); }
.fin-plano-topo.teste { background: linear-gradient(135deg, #7A5A12 0%, #D1A233 100%); }
.fin-plano-topo.erro { background: linear-gradient(135deg, #6E1B27 0%, #B23A48 100%); }
.fin-plano-topo.neutro { background: linear-gradient(135deg, #2B302D 0%, #66706B 100%); }
.fin-plano-marca { display: flex; align-items: center; gap: 8px; font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.92; }
.fin-plano-marca img { background: #fff; border-radius: 6px; padding: 2px; }
.fin-plano-topo h2 { margin: 6px 0 0; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.fin-plano-chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.2); font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700; }
.fin-plano-corpo { padding: 24px 30px 30px; }
.fin-plano-preco { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.fin-plano-preco strong { font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 800; color: var(--navy); }
.fin-plano-preco span { color: var(--stone); font-size: 15px; }
.fin-plano-texto { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--stone); }
.fin-plano-linhas { margin: 14px 0 0; }
.fin-plano-linhas > div { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--stone-soft); }
.fin-plano-linhas dt { color: var(--stone); font-size: 14.5px; }
.fin-plano-linhas dd { margin: 0; color: var(--navy); font-weight: 600; font-size: 14.5px; text-align: right; }
.fin-plano-acoes { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--stone-soft); display: flex; gap: 12px; flex-wrap: wrap; }
.fin-pilula { border-radius: 999px; padding: 14px 32px; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; border: 2px solid var(--navy); transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease; width: auto; }
.fin-pilula.cheia { background: var(--navy); color: var(--white); }
.fin-pilula.cheia:hover { transform: scale(1.03); background: var(--primary); border-color: var(--primary); }
.fin-pilula.vazada { background: transparent; color: var(--navy); }
.fin-pilula.vazada:hover { transform: scale(1.03); background: var(--navy); color: var(--white); }
.fin-pilula:disabled { opacity: 0.55; cursor: default; transform: none; }
@media (max-width: 600px) {
  .fin-plano-topo { padding: 22px 22px 26px; }
  .fin-plano-topo h2 { font-size: 28px; }
  .fin-plano-corpo { padding: 20px 22px 24px; }
  .fin-plano-linhas > div { flex-direction: column; gap: 2px; }
  .fin-plano-linhas dd { text-align: left; }
  .fin-pilula { width: 100%; text-align: center; }
}

/* ---------- Cancelar assinatura: janela com pesquisa de motivo ---------- */
.fin-modal-cancelar { max-width: 560px; }
.fin-cancelar-info { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fin-cancelar-info li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--navy-soft); }
.fin-cancelar-info li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-on-dark); }
.fin-cancelar-pesquisa { border-top: 1px solid var(--stone-soft); padding-top: 18px; }
.fin-cancelar-pesquisa h3 { margin: 0 0 4px; font-family: 'Manrope', sans-serif; font-size: 16px; color: var(--navy); }
.fin-cancelar-pesquisa h3 small, .fin-cancelar-rotulo small { font-weight: 400; color: var(--stone); font-size: 13px; }
.fin-motivos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fin-motivos label { margin: 0; text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-weight: 500; cursor: pointer; }
.fin-motivos input { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; pointer-events: none; }
.fin-motivos span { display: inline-block; padding: 9px 16px; border: 1.5px solid var(--stone-soft); border-radius: 999px; font-size: 14px; color: var(--navy); background: var(--white); transition: border-color 0.12s ease, background 0.12s ease; }
.fin-motivos label:hover span { border-color: var(--primary); }
.fin-motivos input:checked + span { border-color: var(--primary); background: var(--primary); color: var(--white); }
.fin-motivos input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }
.fin-cancelar-rotulo { display: block; margin: 4px 0 6px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--navy); }
#cancelarDetalhe { width: 100%; resize: vertical; padding: 12px 14px; border: 1.5px solid var(--stone-soft); border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 14.5px; }
.fin-pilula.cheia.perigo { background: #B23A48; border-color: #B23A48; }
.fin-pilula.cheia.perigo:hover { background: #8F2C38; border-color: #8F2C38; }
@media (max-width: 600px) { .fin-modal-cancelar .fin-plano-acoes { flex-direction: column-reverse; } }

/* "Cancelar assinatura": link pequeno e vermelho, sempre visível mas discreto */
.fin-cancelar-discreto { background: none; border: 0; padding: 6px 2px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; color: #B23A48; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(178,58,72,0.35); text-underline-offset: 3px; align-self: center; }
.fin-cancelar-discreto:hover, .fin-cancelar-discreto:focus-visible { color: #8F2C38; text-decoration-color: #8F2C38; outline: none; }
.fin-plano-acoes:has(.fin-cancelar-discreto:only-child) { border-top: 0; margin-top: 6px; padding-top: 0; }