/* ============================================================
   CONTROLE DE DÍVIDAS
   Visual técnico: Montserrat, superfícies lisas, sem ornamento.
   Só tipografia, espaço e uma cor de acento.
   ============================================================ */

:root{
  --fundo:      #ffffff;
  --superficie: #f7f8fa;
  --superficie2:#eef0f4;
  --borda:      #e3e6eb;
  --borda-forte:#c9ced7;

  --texto:      #0c0e12;
  --texto-2:    #6b7280;
  --texto-3:    #9aa1ac;

  --acento:     #0a58ff;
  --acento-sup: #e8efff;
  --ok:         #0d9b6c;
  --alerta:     #b4690e;
  --perigo:     #d92d20;

  --r:   10px;
  --r-s: 7px;

  --fonte: "Montserrat", -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --fundo:      #0c0e12;
    --superficie: #14171d;
    --superficie2:#1c2029;
    --borda:      #232833;
    --borda-forte:#333b49;

    --texto:      #eceef2;
    --texto-2:    #98a0ad;
    --texto-3:    #6b7480;

    --acento:     #5b8dff;
    --acento-sup: #16233f;
    --ok:         #2dd4a0;
    --alerta:     #e0a141;
    --perigo:     #ff6b5f;
  }
}

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

body{
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--fonte);
  font-size:15px;
  line-height:1.55;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

.wrap{max-width:860px;margin:0 auto;padding:0 24px}
a{color:var(--acento)}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo{
  position:sticky; top:0; z-index:10;
  background:var(--fundo);
  border-bottom:1px solid var(--borda);
}
.topo-in{
  display:flex; align-items:center; justify-content:flex-end;
  gap:16px;
  padding-top:12px; padding-bottom:12px;
}

/* botão que mostra/esconde o menu */
.menu-btn{
  display:flex; align-items:center; gap:9px;
  background:transparent; border:1px solid var(--borda-forte);
  border-radius:var(--r-s); padding:7px 13px;
  font-family:var(--fonte); font-size:13px; font-weight:600; color:var(--texto-2);
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.menu-btn:hover{background:var(--superficie);color:var(--texto)}
.menu-btn.on{background:var(--texto);border-color:var(--texto);color:var(--fundo)}
.menu-btn .barras{
  position:relative; width:14px; height:10px; flex:none;
}
.menu-btn .barras::before,
.menu-btn .barras::after{
  content:""; position:absolute; left:0; width:14px; height:1.5px;
  background:currentColor; border-radius:1px;
  transition:transform .22s ease, top .22s ease;
}
.menu-btn .barras::before{top:1px}
.menu-btn .barras::after{top:7px}
.menu-btn.on .barras::before{top:4px;transform:rotate(45deg)}
.menu-btn.on .barras::after{top:4px;transform:rotate(-45deg)}

/* faixa do menu, escondida por padrão */
.abas{
  border-top:1px solid var(--borda);
  background:var(--superficie);
  animation:desce .22s ease both;
}
.abas[hidden]{display:none}
.abas-in{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
@keyframes desce{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.abas a{
  color:var(--texto-2); text-decoration:none;
  font-size:13px; font-weight:500; letter-spacing:-.01em;
  padding:7px 12px; border-radius:var(--r-s);
  transition:background .15s ease, color .15s ease;
}
.abas a:hover{background:var(--fundo);color:var(--texto)}
.abas a.on{background:var(--fundo);color:var(--texto);font-weight:600;box-shadow:inset 0 0 0 1px var(--borda)}

.abas a.quem{
  display:flex; align-items:center; gap:8px;
  margin-left:auto; color:var(--texto);
}
.abas a.quem .mono{
  width:24px;height:24px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  background:var(--superficie2); color:var(--texto);
  font-size:10.5px; font-weight:600;
}
.abas a.quem.admin .mono{background:var(--acento);color:#fff}
.abas a.sair{color:var(--texto-3)}

/* ============================================================
   TÍTULOS
   ============================================================ */
h1{
  font-size:clamp(19px,2.6vw,22px);
  font-weight:700; letter-spacing:-.03em; line-height:1.25;
  margin:0;
}
h1 em{font-style:normal;color:var(--acento)}

h2{
  font-size:12px; font-weight:600; letter-spacing:.02em;
  color:var(--texto-2);
  margin:40px 0 0; padding-bottom:10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
h2 + *{margin-top:0}
h2 .h2-dir{display:flex;align-items:center;gap:8px}
h2 .conta{
  color:var(--texto-3); font-weight:500; font-size:12px;
  background:var(--superficie); border-radius:99px; padding:1px 9px;
}

.sub{color:var(--texto-2);font-size:13.5px;margin:0 0 24px;max-width:64ch}
.sub b{color:var(--texto);font-weight:600}

.topo-mes{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin:24px 0 14px;
}
.meses{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0}
.meses a{
  color:var(--texto-2); text-decoration:none;
  font-size:13px; font-weight:600; line-height:1;
  min-width:32px; text-align:center;
  padding:7px 10px; border-radius:var(--r-s);
  border:1px solid var(--borda);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.meses a:hover{background:var(--superficie);color:var(--texto);border-color:var(--borda-forte)}
.meses a.agora{color:var(--acento);border-color:transparent}

/* ============================================================
   TOTAIS — fecham a página, discretos
   ============================================================ */
.totais{
  margin-top:44px; padding-top:16px;
  border-top:1px solid var(--borda);
  animation:sobe .4s ease both;
}
.t-linha{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.t-rot{font-size:13px;color:var(--texto-2);font-weight:500}
.t-val{
  font-size:clamp(22px,3.4vw,27px);
  font-weight:700; letter-spacing:-.035em; line-height:1.15;
}
.t-val .cifra{font-size:.5em;font-weight:600;vertical-align:.26em;margin-right:.14em;color:var(--texto-2)}
.t-val .cents{font-size:.62em;font-weight:600;vertical-align:.2em;color:var(--texto-3)}
.t-metade{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--borda);
  font-size:13px; color:var(--texto-2);
}
.t-metade b{font-size:16px;font-weight:600;color:var(--texto);letter-spacing:-.02em}

.t-extra{
  margin-top:6px;
  display:flex; gap:2px 22px; flex-wrap:wrap;
  font-size:12.5px; color:var(--texto-2);
}
.t-extra b{color:var(--texto);font-weight:600}

/* ============================================================
   BOTÃO DE NOVA DÍVIDA (abre o formulário na própria home)
   ============================================================ */
.novo{margin:4px 0 0}
.novo > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.novo > summary::-webkit-details-marker{display:none}
.novo > summary .mais{
  font-size:16px; font-weight:600; line-height:1;
  transition:transform .22s ease;
}
.novo[open] > summary .mais{transform:rotate(45deg)}
.novo[open] > summary{background:var(--superficie2);color:var(--texto)}
.novo[open] > summary:hover{filter:none}
.novo form.box{margin-top:14px;margin-bottom:0;animation:abre .25s ease both}
.novo .rodape-form .dica{margin-top:0}

/* ============================================================
   LISTA — nome · parcela · valor; o resto abre ao clicar
   ============================================================ */
.lista{border-top:1px solid var(--borda)}
.lanc{border-bottom:1px solid var(--borda);animation:sobe .35s ease both}
.lanc:nth-child(1){animation-delay:.02s}
.lanc:nth-child(2){animation-delay:.05s}
.lanc:nth-child(3){animation-delay:.08s}
.lanc:nth-child(4){animation-delay:.11s}
.lanc:nth-child(5){animation-delay:.14s}
.lanc:nth-child(n+6){animation-delay:.17s}

.lanc > summary{
  display:flex; align-items:center; gap:14px;
  padding:15px 12px; margin:0 -12px;
  border-radius:var(--r-s);
  cursor:pointer; list-style:none;
  transition:background .15s ease;
}
.lanc > summary::-webkit-details-marker{display:none}
.lanc > summary:hover{background:var(--superficie)}
.lanc > summary:focus-visible{outline:2px solid var(--acento);outline-offset:-2px}

.l-nome{
  font-size:15px; font-weight:600; letter-spacing:-.015em;
  flex:0 1 auto; min-width:0; overflow-wrap:anywhere;
}
.l-pontos{flex:1 1 16px;min-width:16px}
/* progresso da dívida, direto na linha */
.l-prog{
  flex:none; width:46px; height:4px;
  border-radius:99px; background:var(--superficie2);
  overflow:hidden;
}
.l-prog i{
  display:block; height:100%;
  background:var(--acento); border-radius:99px;
}
.l-prog.quase i{background:var(--ok)}
.l-prog.fim i{background:var(--ok)}
.l-prog.futura{opacity:.5}

.l-parc{
  font-size:13px; font-weight:600; letter-spacing:-.01em;
  color:var(--acento); white-space:nowrap;
  background:var(--acento-sup); border-radius:99px; padding:2px 10px;
}
.l-parc .de{opacity:.55}
.l-valor{
  font-size:15px; font-weight:600; letter-spacing:-.02em;
  white-space:nowrap; min-width:96px; text-align:right;
}

.l-sinal{
  flex:none; width:10px; height:10px; position:relative;
  color:var(--texto-3);
  transition:color .15s ease;
}
.l-sinal::before,.l-sinal::after{
  content:""; position:absolute; left:50%; top:50%;
  background:currentColor; transform:translate(-50%,-50%);
}
.l-sinal::before{width:10px;height:1.5px}
.l-sinal::after{width:1.5px;height:10px;transition:transform .22s ease}
.lanc > summary:hover .l-sinal{color:var(--texto)}
.lanc[open] > summary .l-sinal{color:var(--texto)}
.lanc[open] > summary .l-sinal::after{transform:translate(-50%,-50%) scaleY(0)}

.l-corpo{padding:2px 0 20px;animation:abre .25s ease both}
.l-tags{margin:0 0 14px}
.l-corpo .acoes{margin-top:16px}

@keyframes abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ============================================================
   PROGRESSO — um segmento por parcela
   ============================================================ */
.ticks{display:flex;gap:3px;margin:0 0 16px}
.ticks .t{
  flex:1 1 auto; height:5px; min-width:3px;
  background:var(--superficie2); border-radius:2px;
}
.ticks .t.pago{background:var(--texto)}
.ticks .t.atual{background:var(--acento)}
.ticks .t.quitado{background:var(--ok)}

.barra{height:5px;background:var(--superficie2);border-radius:2px;margin:0 0 16px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--texto);border-radius:2px}

/* ============================================================
   DADOS E MARCADORES
   ============================================================ */
.meta{
  display:flex; gap:4px 24px; flex-wrap:wrap;
  font-size:13px; color:var(--texto-2);
}
.meta b{color:var(--texto);font-weight:600}

.tag{
  display:inline-block; margin-right:6px;
  font-size:11.5px; font-weight:600; letter-spacing:-.01em;
  padding:3px 10px; border-radius:99px;
  background:var(--superficie2); color:var(--texto-2);
}
.tag.pix{color:var(--ok);background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.tag.quitado{color:var(--ok)}
.tag.futuro{color:var(--alerta)}
.tag.alerta{color:var(--acento);background:var(--acento-sup)}
.tag.eu{color:var(--texto)}

/* seletor de cartão embutido na dívida */
.cartao-sel{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding:11px 13px;
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-s);
}
.cs-rot{font-size:12.5px;font-weight:600;color:var(--texto-2)}
.cartao-sel select{width:auto;min-width:180px;padding:7px 10px;font-size:13.5px}
.cs-vazio{font-size:12.5px;color:var(--texto-2)}

.acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acoes form{display:inline}

/* ============================================================
   CARTÕES E CONTAS
   ============================================================ */
.item{
  background:var(--fundo);
  border:1px solid var(--borda);
  border-radius:var(--r);
  padding:16px 18px;
  margin-bottom:10px;
  animation:sobe .35s ease both;
}
.item:nth-child(1){animation-delay:.02s}
.item:nth-child(2){animation-delay:.05s}
.item:nth-child(3){animation-delay:.08s}
.item:nth-child(n+4){animation-delay:.11s}
.item.quitada,.item.inativo{opacity:.55}

.item-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.item .nome{font-size:15px;font-weight:600;letter-spacing:-.015em}
.item .meta{margin-top:8px}
.parcela{font-size:14px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.item .acoes{margin-top:14px}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
form.box{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--r);
  padding:22px;
  margin-bottom:24px;
}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.grade .largo{grid-column:1/-1}

label{
  display:block;
  font-size:12.5px; font-weight:600; color:var(--texto-2);
  margin-bottom:6px;
}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--fonte); font-size:14.5px; font-weight:500;
  border:1px solid var(--borda-forte);
  border-radius:var(--r-s);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{color:var(--texto-3);font-weight:400}
input:focus,select:focus,textarea:focus{
  outline:0;
  border-color:var(--acento);
  box-shadow:0 0 0 3px var(--acento-sup);
}
select{cursor:pointer}
input[type="color"]{padding:3px;height:42px;cursor:pointer}
input[type="checkbox"]{width:auto;accent-color:var(--acento)}

.marcador{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:500; color:var(--texto);
  margin-bottom:0; margin-top:9px;
}
.dica{font-size:12.5px;color:var(--texto-2);margin-top:7px}
.rodape-form{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-block;
  background:var(--acento); color:#fff;
  border:1px solid transparent; border-radius:var(--r-s);
  padding:10px 18px;
  font-family:var(--fonte); font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; text-decoration:none;
  transition:filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{filter:brightness(1.1)}
.btn.sec{background:var(--fundo);color:var(--texto);border-color:var(--borda-forte)}
.btn.sec:hover{background:var(--superficie);filter:none}
.btn.perigo{background:transparent;color:var(--perigo);border-color:var(--borda-forte)}
.btn.perigo:hover{background:var(--perigo);color:#fff;border-color:transparent;filter:none}
.btn.pequeno{padding:7px 13px;font-size:12.5px}
.btn.ok{background:var(--ok);color:#fff;border-color:transparent}
.btn.erro{background:transparent;color:var(--perigo);border-color:var(--perigo)}

/* área de transferência: fica fora da tela, só aparece no plano B */
.txt-oculto{
  position:fixed; left:-9999px; top:0;
  width:1px; height:1px; opacity:0; border:0; padding:0;
}
.txt-oculto.visivel{left:0;opacity:.01}
.btn.largo{width:100%;text-align:center;padding:12px 18px}

/* ============================================================
   AVISOS E VAZIOS
   ============================================================ */
.flash{
  padding:12px 16px; margin:20px 0;
  border-radius:var(--r-s);
  font-size:13.5px;
  background:var(--superficie);
  border:1px solid var(--borda);
  animation:sobe .3s ease both;
}
.flash.ok{color:var(--ok)}
.flash.err{color:var(--perigo)}
.flash strong{display:block;font-size:12px;font-weight:600;opacity:.8;margin-bottom:1px}

.vazio{
  border:1px solid var(--borda);
  border-radius:var(--r);
  padding:44px 24px; text-align:center;
  color:var(--texto-2); font-size:13.5px;
}
.vazio .marca-vazio{
  display:block; margin-bottom:6px;
  font-size:15px; font-weight:600; color:var(--texto);
}

/* ============================================================
   ENTRADA (login / instalação)
   ============================================================ */
.entrada{min-height:100vh;display:grid;place-items:center;padding:40px 24px}
.entrada-cartao{
  width:100%; max-width:380px;
  background:var(--fundo);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:34px 30px 30px;
  animation:sobe .4s ease both;
}
.entrada-titulo{font-size:21px;font-weight:700;letter-spacing:-.03em;margin:0 0 4px}
.entrada-sub{font-size:13.5px;color:var(--texto-2);margin:0 0 26px}
.entrada-cartao label{margin-top:16px}
.entrada-cartao label:first-of-type{margin-top:0}
.entrada-cartao .btn{margin-top:24px}
.entrada-pe{margin-top:20px;font-size:12.5px;color:var(--texto-2);text-align:center;line-height:1.6}

/* ============================================================
   MOVIMENTO
   ============================================================ */
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================================
   TELAS ESTREITAS
   ============================================================ */
@media (max-width:720px){
  .wrap{padding:0 18px}
  .abas{gap:0;width:100%;overflow-x:auto;padding-bottom:2px}
  .abas::-webkit-scrollbar{display:none}
  .abas a{padding:6px 10px;white-space:nowrap}
  h1{margin-top:26px}
  form.box{padding:18px}
  .t-metade{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:8px; padding-top:8px;
  border-top:1px dashed var(--borda);
  font-size:13px; color:var(--texto-2);
}
.t-metade b{font-size:16px;font-weight:600;color:var(--texto);letter-spacing:-.02em}

.t-extra{gap:2px 16px}
}

@media (max-width:540px){
  .lanc > summary{flex-wrap:wrap;gap:6px 12px;padding:14px 10px}
  .l-nome{flex:1 1 100%}
  /* progresso da dívida, direto na linha */
.l-prog{
  flex:none; width:46px; height:4px;
  border-radius:99px; background:var(--superficie2);
  overflow:hidden;
}
.l-prog i{
  display:block; height:100%;
  background:var(--acento); border-radius:99px;
}
.l-prog.quase i{background:var(--ok)}
.l-prog.fim i{background:var(--ok)}
.l-prog.futura{opacity:.5}

.l-parc{order:1}
  .l-pontos{order:2;flex:1 1 12px}
  .l-valor{order:4;min-width:auto}
  .l-sinal{order:5}
  .meta{gap:2px 16px;font-size:12.5px}
}