/*
 * A folha de estilo da Lista da Feitura.
 *
 * ARQUIVO COMPARTILHADO. Duas paginas carregam este mesmo arquivo:
 *   . /index.html, o app inteiro
 *   . /publica.html, a lista publica que ela manda para quem pergunta o que dar
 *
 * Ele morava dentro de um <style> no index.html. Saiu de la quando a pagina
 * publica apareceu, pelo motivo de sempre neste projeto: duas copias divergem,
 * e aqui divergir significa o cartao da pagina publica deixar de ser o mesmo
 * cartao do app, que e justamente o que ela pediu para nao acontecer.
 *
 * Nao existe estilo "da pagina publica". Se algo so vale la, e porque o
 * elemento so existe la; o seletor continua sendo o mesmo.
 *
 * Cache: /css/ vai como no-cache no Nginx E no servidor de desenvolvimento,
 * igual a /js/. Ver a coisa numero 10 do CLAUDE.md: os dois ja divergiram uma
 * vez e o desenvolvimento passou a servir codigo velho.
 */

:root{
  --bg:#0a0705;
  --bg-2:#120d08;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(212,162,76,.22);
  --line-soft:rgba(255,255,255,.09);
  --gold:#d9ab55;
  --gold-soft:#e8c98c;
  --ink:#f4ece0;
  --ink-2:rgba(244,236,224,.66);
  /* .52 e nao .42: em .42 o texto de apoio dava 3.5:1 sobre o fundo, abaixo do
     minimo de 4.5:1 para corpo de texto. Em .52 da 4.9:1 e o tom apagado continua. */
  --ink-3:rgba(244,236,224,.52);
  --ok:#7fc99a;
  --warn:#e2a24c;
  --alert:#e07b6b;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  /* Toda transicao da interface fica nesta faixa, nada mais rapido que 150ms. */
  --t:.18s ease;
  --t-lenta:.26s ease;
  /* Alvo minimo de toque. */
  --toque:44px;
  /* Recuos da tela do aparelho (notch, status bar, barra de gestos). So valem
     porque a meta viewport tem viewport-fit=cover. Passam por variavel para
     poderem ser simulados na conferencia: no aparelho quem preenche e o env(). */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold-soft)}
[hidden]{display:none!important}

/* foco visivel unico para tudo que recebe teclado */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.sr-apenas{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- header ---------- */
.hero{position:relative;min-height:calc(380px + var(--safe-t));display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__veil{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,7,5,.96) 0%,rgba(10,7,5,.72) 38%,rgba(10,7,5,.30) 70%,rgba(10,7,5,.45) 100%);}
.hero__inner{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:var(--s-7) calc(var(--s-5) + var(--safe-r)) var(--s-6) calc(var(--s-5) + var(--safe-l))}
.hero__eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-3)}
.hero__title{font-family:var(--serif);font-size:clamp(40px,9vw,72px);line-height:1;margin:0;font-weight:600;letter-spacing:.01em}
.hero__sub{margin:var(--s-3) 0 0;color:var(--ink-2);max-width:52ch}
.datebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-5)}
.datebar label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.countdown{font-family:var(--serif);font-size:22px;color:var(--gold-soft)}
.hero__conta{position:absolute;top:calc(var(--s-4) + var(--safe-t));right:calc(var(--s-4) + var(--safe-r));display:flex;align-items:center;gap:var(--s-3);z-index:3}
.hero__email{font-size:12px;color:var(--ink-2);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- layout ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 calc(var(--s-5) + var(--safe-r)) 0 calc(var(--s-5) + var(--safe-l))}
section{margin-top:var(--s-7)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.section-head h2{font-family:var(--serif);font-size:28px;font-weight:600;margin:0;letter-spacing:.01em}
.hint{color:var(--ink-3);font-size:13px}

/* ---------- resumo ---------- */
.stats{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.stat{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);backdrop-filter:blur(8px)}
.stat__label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-2)}
.stat__value{font-family:var(--serif);font-size:30px;line-height:1;margin:0;color:var(--gold-soft)}
.stat__note{font-size:12px;color:var(--ink-3);margin:var(--s-2) 0 0}
.stat--paid .stat__value{color:#fff}

/* ---------- barra de progresso ---------- */
.progress{margin-top:var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s-4);background:var(--surface)}
.progress__top{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:var(--s-3)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;display:flex}
.bar span{display:block;height:100%;transition:width var(--t-lenta)}
.bar .seg-have{background:linear-gradient(90deg,#b98a3c,var(--gold))}
.bar .seg-bought{background:linear-gradient(90deg,#5f9c78,var(--ok))}
.bar .seg-gift{background:linear-gradient(90deg,#6f93b3,#9ec5e8)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-3);font-size:12px;color:var(--ink-3)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:middle}

/* ---------- controles ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.field{position:relative;flex:1 1 220px;min-width:0}
.input,.select,.textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);
  border-radius:var(--r-sm);padding:11px 13px;min-height:var(--toque);
  transition:border-color var(--t),background var(--t);
}
.textarea{min-height:auto}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:hover,.select:hover{border-color:rgba(212,162,76,.35)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9ab55' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--alert)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-sm);
  padding:11px 18px;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  min-height:var(--toque);
  transition:background var(--t),border-color var(--t),transform .15s ease,opacity var(--t);
}
.btn:hover{background:var(--surface-2);border-color:rgba(212,162,76,.5)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(180deg,#e0b463,#c99640);border-color:#e0b463;color:#1a1206;font-weight:600}
.btn--primary:hover{background:linear-gradient(180deg,#e8c37a,#d3a24d)}
.btn--ghost{background:transparent}
/* Continua menor no visual, mas nunca abaixo de 44px de alvo de toque. */
.btn--sm{padding:6px 14px;font-size:13px}
.btn--danger:hover{border-color:rgba(224,123,107,.6);color:var(--alert)}
.btn svg{width:16px;height:16px;flex:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn[disabled]:hover{background:var(--surface);border-color:var(--line)}

/* rodinha de espera, some para quem pediu menos movimento */
.girando{width:15px;height:15px;flex:none;border:2px solid rgba(255,255,255,.25);border-top-color:currentColor;border-radius:50%;animation:girar .7s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* ---------- lista ---------- */
.grid{display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-top:var(--s-4)}
.card{border:1px solid var(--line-soft);border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);transition:border-color var(--t),opacity var(--t);min-width:0}

/* Texto que pode chegar colado, sem espaco nenhum: URL, codigo de produto, nome
   grudado. Sem isso ele estoura o cartao e passa por cima do vizinho.
   O overflow-wrap sozinho nao resolve dentro de flex e de grid: o item nao
   encolhe abaixo do proprio conteudo enquanto o min-width for auto, que e o
   padrao. Por isso os dois andam juntos aqui. */
.card__name,.card__meta,.card__texto,.obs,.quote__where,.paid__label,
.tabela__nome,.tabela__vinculo,.lancamento__obs,.aviso__texto{
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;
}
.card__texto{flex:1 1 auto}

/* Endereco dentro de uma observacao. O alvo de toque cresce pelo padding e a
   margem negativa devolve o espaco, entao a linha do texto nao se mexe. */
.link-externo{
  display:inline-block;max-width:100%;
  color:var(--gold-soft);text-decoration:underline;text-underline-offset:2px;
  padding:12px 4px;margin:-12px -4px;
  overflow-wrap:anywhere;
}
.link-externo:hover{color:var(--gold)}
.card:hover{border-color:rgba(212,162,76,.32)}
.card[data-salvando="true"]{opacity:.55}
.card__top{display:flex;justify-content:space-between;gap:var(--s-3);align-items:flex-start}
.card__name{font-family:var(--serif);font-size:22px;line-height:1.2;margin:0}
.card__meta{font-size:12px;color:var(--ink-3);margin:4px 0 0;letter-spacing:.04em}
.card__dequem{font-size:12px;color:#9ec5e8;margin:4px 0 0;overflow-wrap:anywhere;min-width:0}
.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid;white-space:nowrap}
.chip--TENHO{color:var(--gold);border-color:rgba(212,162,76,.45);background:rgba(212,162,76,.1)}
.chip--COMPRADO{color:var(--ok);border-color:rgba(127,201,154,.4);background:rgba(127,201,154,.1)}
.chip--FALTA{color:var(--ink-2);border-color:var(--line-soft);background:rgba(255,255,255,.04)}
/* Marcador de "pode ficar para depois" no cartao do item. Tracejado, para nao
   competir com o selo de situacao e para sobreviver ao preto e branco. */
/* Cor propria, e borda pontilhada para a situacao continuar legivel na
   impressao em preto e branco e para quem nao distingue cor. */
.chip--GANHAR{color:#9ec5e8;border-color:rgba(158,197,232,.5);background:rgba(158,197,232,.1);border-style:dotted}
.chip--depois{color:var(--warn);border-color:rgba(226,162,76,.45);background:transparent;border-style:dashed;margin-left:6px}
/* Pagamento em partes. Borda PONTILHADA, e nao so cor: e a mesma regra dos
   outros selos, para o papel e para quem nao distingue cor. */
.chip--partes{color:var(--ink-2);border-color:var(--line);background:transparent;border-style:dotted;margin-left:6px}
.obs{font-size:13px;color:var(--ink-2);margin:0;padding-left:10px;border-left:2px solid var(--line)}

.quotes{border-top:1px solid var(--line-soft);padding-top:var(--s-3)}
.quotes__title{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-2)}
/* Quantos preços o item já tem. Sem destaque nenhum quando já cotou o bastante:
   selo em todo cartão vira paisagem e some da vista junto com os que importam. */
.quotes__conta{font-size:10px;letter-spacing:.1em;color:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:1px 6px;white-space:nowrap}
.quotes__conta--poucos{color:var(--gold-soft);border-color:var(--gold);border-style:dashed}
.quotes__conta b{font-weight:600;margin-left:6px;text-transform:none;letter-spacing:.02em}
.quote{display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline;padding:5px 8px;border-radius:6px;font-size:14px}
.quote--best{background:rgba(212,162,76,.11)}
.quote__where{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.quote--best .quote__where{color:var(--gold-soft)}
.quote__val{font-variant-numeric:tabular-nums;white-space:nowrap}
.quote__tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap;flex:0 0 auto}
.empty-quotes{font-size:13px;color:var(--ink-3);margin:0}
/* Os orcamentos que passam do terceiro. O padding faz os 44px de alvo de toque
   e a margem negativa devolve o espaco, entao a linha nao se desloca. */
.quotes__mais{
  display:inline-flex;align-items:center;min-height:var(--toque);
  padding:0 8px;margin:var(--s-1) 0 calc(-1 * var(--s-2)) -8px;
  background:none;border:0;cursor:pointer;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
  transition:color var(--t);
}
.quotes__mais:hover{color:var(--gold)}

/* Grade, e não flex: o rótulo quebra dentro da coluna dele em vez de empurrar
   o valor para o lado da economia. A economia desce para a linha de baixo, que
   é o lugar de informação secundária. */
.paid{
  display:grid;grid-template-columns:1fr auto;gap:2px var(--s-3);
  align-items:baseline;border-top:1px solid var(--line-soft);padding-top:var(--s-3);
}
.paid__label{
  min-width:0;overflow-wrap:anywhere;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.paid__valores{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.paid__value{font-family:var(--serif);font-size:24px;line-height:1.1;color:#fff;white-space:nowrap}
.saving{font-size:12px;color:var(--ok);white-space:nowrap}
/* Em cartão estreito, rótulo e valor param de disputar a linha de vez: um
   embaixo do outro, alinhados à esquerda, como o resto do cartão. */
@media (max-width:430px){
  .paid{grid-template-columns:1fr;gap:var(--s-2)}
  .paid__valores{align-items:flex-start}
}

/* O motivo de uma seção estar travada, escrito dentro dela. Borda tracejada,
   e não só cor, pela mesma regra dos selos. */
.trava{
  margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);
  border:1px dashed var(--line);border-radius:var(--r-sm);
  font-size:13px;color:var(--ink-2);overflow-wrap:anywhere;
}
.fieldset[disabled]{opacity:.72}
.fieldset[disabled] .trava{opacity:1;color:var(--ink-2)}

/* ---------- a fila de alterações sem rede ---------- */
.fila{display:flex;flex-direction:column;gap:var(--s-3);margin:var(--s-4) 0}
.fila__vazia{font-size:14px;color:var(--ink-3);margin:0}
.entrada{
  border:1px solid var(--line-soft);border-radius:var(--r-sm);
  background:var(--surface);padding:var(--s-3);min-width:0;
}
/* Parada distingue por borda e por rótulo escrito, e não só por cor. */
.entrada--parada{border-color:rgba(224,123,107,.55);border-style:dashed}
.entrada__topo{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:baseline;justify-content:space-between}
.entrada__item{font-weight:600;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.entrada__quando{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.entrada__mudou{font-size:13px;color:var(--ink-2);margin:var(--s-2) 0 0;overflow-wrap:anywhere}
.entrada__motivo{font-size:13px;color:var(--alert);margin:var(--s-2) 0 0;overflow-wrap:anywhere}
.entrada__acoes{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
/* Os dois lados do conflito, para ela escolher olhando os valores. */
.lados{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-3)}
.lado{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);min-width:0}
.lado__titulo{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-2)}
.lado__valor{font-size:13px;color:var(--ink-2);margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.lados{grid-template-columns:1fr}}
/* Selo no cartão: pontilhado esperando, tracejado quando parou. */
.chip--fila{color:var(--ink-2);border-color:var(--line);background:transparent;border-style:dotted;margin-left:6px}
.chip--fila-parada{color:var(--alert);border-color:rgba(224,123,107,.55);background:transparent;border-style:dashed;margin-left:6px}

.diagnostico{
  max-height:38vh;overflow:auto;margin:var(--s-3) 0 0;padding:var(--s-3);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);background:var(--bg);
  font-family:'SF Mono',ui-monospace,Menlo,monospace;font-size:11px;line-height:1.5;
  color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;
}

/* ---------- o cronograma, mês a mês ---------- */
.cronograma{margin-top:var(--s-4);border-top:1px dotted var(--line-soft);padding-top:var(--s-3)}
.cronograma>summary{
  cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:var(--s-2) 0;min-height:var(--toque);display:flex;align-items:center;
}
.cronograma>summary:hover{color:var(--gold)}
.cronograma>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cronograma__cabecalho,.mes{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--s-3);
  align-items:baseline;padding:var(--s-2) 0;min-width:0;
}
.cronograma__cabecalho{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line-soft);
}
.mes{border-bottom:1px dotted var(--line-soft);font-size:13px;color:var(--ink-2)}
.mes:last-child{border-bottom:0}
.mes__nome{overflow-wrap:anywhere;min-width:0}
.mes__sai,.mes__juntado{font-variant-numeric:tabular-nums;white-space:nowrap}
.mes__juntado{color:var(--ink-2)}
/* O mês que manda distingue por rótulo escrito e por borda, não só por cor. */
.mes--manda{border-left:2px solid var(--gold);padding-left:var(--s-2)}
.mes__marca{
  grid-column:1 / -1;font-size:11px;letter-spacing:.08em;color:var(--gold-soft);
}
@media (max-width:560px){
  .cronograma__cabecalho{display:none}
  .mes{grid-template-columns:1fr auto}
  .mes__juntado{grid-column:2}
  .mes__sai{grid-column:2;color:var(--ink-3);font-size:12px}
  .mes__nome{grid-row:1;grid-column:1}
}

/* ---------- pagamento em partes, no cartão ---------- */
.partes{border-top:1px solid var(--line-soft);padding-top:var(--s-3)}
.partes__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s-2)}
.parte{display:flex;align-items:baseline;gap:var(--s-2);font-size:13px;padding:2px 0;min-width:0}
.parte__rotulo{flex:0 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--ink-2)}
.parte__quando{flex:0 0 auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.parte__pontos{flex:1 1 auto;min-width:10px;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.parte__valor{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--ink-2)}
/* Distingue por rótulo escrito e por peso, e não só por cor: a mesma regra dos
   selos. Paga fica com a palavra "pago" ao lado, em aberto com "em aberto". */
.parte__marca{flex:0 0 auto;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px dotted var(--line);border-radius:var(--r-sm);padding:0 5px}
.parte--paga .parte__marca{border-style:solid;color:var(--ok);border-color:rgba(122,168,116,.5)}
/* O combinado desce para a linha de baixo da própria parte: em 375px ele não
   cabe ao lado do valor, e é informação secundária de qualquer jeito. */
.parte{flex-wrap:wrap}
.parte__combinado{flex:1 0 100%;font-size:11px;color:var(--ink-3);margin-top:1px}
.parte--paga .parte__valor{color:var(--ink-3)}
.partes__resumo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px dotted var(--line-soft);font-size:13px;color:var(--ink-2)}
.partes__pago{color:var(--ink-3);font-size:12px}

/* ---------- linha de parcela no formulário ---------- */
/* Sete campos numa linha nao cabem lado a lado sem apertar o rotulo, entao a
   linha e de duas faixas: o combinado em cima, o que saiu de verdade embaixo. */
.parcela-row{
  display:grid;
  grid-template-columns:1fr 110px 130px var(--toque);
  grid-template-areas:
    "rotulo previsto vence tirar"
    "onde   pago     pagoem tirar";
  gap:var(--s-3);align-items:end;
  margin-bottom:var(--s-4);padding-bottom:var(--s-3);
  border-bottom:1px dotted var(--line-soft);
}
.parcela-row__rotulo{grid-area:rotulo}
.parcela-row__previsto{grid-area:previsto}
.parcela-row__vence{grid-area:vence}
.parcela-row__pago{grid-area:pago}
.parcela-row__pagoem{grid-area:pagoem}
.parcela-row__onde{grid-area:onde}
.parcela-row__tirar{grid-area:tirar;align-self:center}
.parcela-row:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.parcela-row .form-group{min-width:0}
.parcela-row__tirar{width:var(--toque);padding:0;color:var(--ink-3)}
.parcela-row__tirar:hover{border-color:rgba(224,123,107,.6);color:var(--alert)}
.parcela-row__tirar svg{width:18px;height:18px}
/* Precisa funcionar em 375px: abaixo de 560 a linha vira duas colunas, e nunca
   rolagem horizontal. */
@media (max-width:560px){
  .parcela-row{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "rotulo   rotulo"
      "previsto vence"
      "pago     pagoem"
      "onde     tirar";
  }
  .parcela-row__tirar{justify-self:end;align-self:end}
}
.card__actions{display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:auto;padding-top:var(--s-2)}

.empty{border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s-7) var(--s-5);text-align:center;color:var(--ink-3)}
.empty h3{font-family:var(--serif);font-size:24px;color:var(--ink-2);margin:0 0 var(--s-2)}
.empty .btn{margin-top:var(--s-4)}

/* ---------- esqueleto de carregamento ---------- */
.esqueleto{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3)}
.esqueleto__linha{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.11),rgba(255,255,255,.05));background-size:200% 100%;animation:brilho 1.4s ease-in-out infinite}
.esqueleto__linha--titulo{height:22px;width:60%}
.esqueleto__linha--curta{width:35%}
.esqueleto__linha--media{width:80%}
@keyframes brilho{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- avisos fixos e recados passageiros ---------- */
.avisos{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4)}
.aviso{
  display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  border:1px solid var(--line-soft);background:var(--surface);border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);font-size:14px;color:var(--ink-2);
}
.aviso__texto{margin:0;flex:1 1 240px;min-width:0}
.aviso__acoes{display:flex;gap:var(--s-2);flex-wrap:wrap}
.aviso--offline{border-color:rgba(226,162,76,.45);background:rgba(226,162,76,.1);color:#f0d5aa}
.aviso--erro{border-color:rgba(224,123,107,.45);background:rgba(224,123,107,.1);color:#f0c4bb}
.aviso--convite{border-color:var(--line);background:rgba(212,162,76,.08)}

.recados{position:fixed;left:calc(var(--s-4) + var(--safe-l));right:calc(var(--s-4) + var(--safe-r));bottom:calc(var(--s-4) + var(--safe-b));z-index:80;display:flex;flex-direction:column;gap:var(--s-2);align-items:center;pointer-events:none}
.recado{
  pointer-events:auto;max-width:520px;width:100%;
  border:1px solid var(--line);background:var(--bg-2);border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);
  display:flex;gap:var(--s-3);align-items:center;justify-content:space-between;
  animation:subir var(--t-lenta) both;
}
.recado--erro{border-color:rgba(224,123,107,.6);color:#f4cfc7}
.recado--ok{border-color:rgba(127,201,154,.5);color:#cfe9da}
.recado__texto{margin:0;flex:1}
@keyframes subir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(5,3,2,.78);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:calc(var(--s-5) + var(--safe-t)) calc(var(--s-5) + var(--safe-r)) calc(var(--s-5) + var(--safe-b)) calc(var(--s-5) + var(--safe-l));overflow-y:auto;z-index:50}
.overlay[data-open="true"]{display:flex}
.modal{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);width:100%;max-width:600px;padding:var(--s-5);margin:auto}
.modal--estreito{max-width:460px}
.modal h2{font-family:var(--serif);font-size:28px;margin:0 0 var(--s-4);font-weight:600}
.modal p{color:var(--ink-2)}
.form-row{display:grid;gap:var(--s-3);grid-template-columns:1fr 1fr;margin-bottom:var(--s-3)}
.form-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-group label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.form-group .help{font-size:12px;color:var(--ink-3);text-transform:none;letter-spacing:0}
.fieldset{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-4) 0}
.fieldset legend{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding:0 8px}
/* A terceira coluna e o botao de tirar a linha. align-items:end alinha o botao
   pela base do campo, e nao pela etiqueta que fica em cima dele. */
.quote-row{display:grid;grid-template-columns:1fr 130px var(--toque);gap:var(--s-3);align-items:end;margin-bottom:var(--s-3)}
.quote-row:last-child{margin-bottom:0}
.quote-row__tirar{width:var(--toque);padding:0;color:var(--ink-3)}
.quote-row__tirar:hover{border-color:rgba(224,123,107,.6);color:var(--alert)}
.quote-row__tirar svg{width:18px;height:18px}
#btnMaisOrcamento{margin-top:var(--s-3)}
#orcamentosNoTeto{margin:var(--s-3) 0 0}
.modal__actions{display:flex;gap:var(--s-3);justify-content:flex-end;margin-top:var(--s-5);flex-wrap:wrap}
.error{color:var(--alert);font-size:13px;margin:var(--s-3) 0 0;display:none}
.error[data-show="true"]{display:block}
.lista-avisos{margin:var(--s-3) 0 0;padding-left:1.1em;color:var(--ink-2);font-size:13px}
.lista-avisos li{margin-bottom:4px}

/* O que muda quando a sobrescrita e ligada, mostrado antes de salvar. */
.previa{
  margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r-sm);color:var(--ink-2);
}
.previa b{color:var(--ink)}
.previa__seta{color:var(--gold);margin:0 6px}

/* ---------- tela de login ---------- */
.login{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:calc(var(--s-5) + var(--safe-t)) calc(var(--s-5) + var(--safe-r)) calc(var(--s-5) + var(--safe-b)) calc(var(--s-5) + var(--safe-l));position:relative;overflow:hidden}
.login__fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.login__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,.72),rgba(10,7,5,.94))}
.login__card{
  position:relative;width:100%;max-width:400px;
  background:rgba(18,13,8,.86);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-6) var(--s-5);backdrop-filter:blur(10px);
}
.login__eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-2);text-align:center}
.login__titulo{font-family:var(--serif);font-size:38px;line-height:1.05;margin:0 0 var(--s-2);font-weight:600;text-align:center}
.login__sub{color:var(--ink-2);text-align:center;margin:0 0 var(--s-5);font-size:14px}
.login__campos{display:flex;flex-direction:column;gap:var(--s-4)}
.login .btn{width:100%}
.login__erro{
  display:none;margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);font-size:14px;
  border:1px solid rgba(224,123,107,.5);background:rgba(224,123,107,.12);
  color:#f4cfc7;border-radius:var(--r-sm);
}
.login__erro[data-show="true"]{display:block}
.login__rodape{margin:var(--s-5) 0 0;font-size:12px;color:var(--ink-3);text-align:center}

/* ---------- rodape ---------- */
footer{margin:var(--s-8) 0 calc(var(--s-7) + var(--safe-b));border-top:1px solid var(--line-soft);padding-top:var(--s-5)}
.footer-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.footer-note{color:var(--ink-3);font-size:12px;margin-top:var(--s-4);max-width:64ch}


/* ---------- painel financeiro ---------- */
.painel{margin-top:var(--s-6);position:relative;z-index:2}
.painel__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-4)}
.painel__cabeca h2{font-family:var(--serif);font-size:28px;font-weight:600;margin:0;letter-spacing:.01em}

/* os quatro numeros de contexto, na ordem de leitura pedida */
.painel__numeros{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* o numero que a pessoa abre o site para ver */
.destaque{
  margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-5);background:linear-gradient(180deg,rgba(212,162,76,.14),rgba(212,162,76,.05));
}
.destaque__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 var(--s-2)}
.destaque__valor{font-family:var(--serif);font-size:clamp(38px,8vw,56px);line-height:1;margin:0;color:var(--gold-soft)}
.destaque__linhas{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-4) 0 0}
.destaque__linha{margin:0;font-size:14px;color:var(--ink-2)}
.destaque__linha b{color:var(--ink);font-weight:600}
.destaque__ritmo{font-size:14px;margin:var(--s-2) 0 0;color:var(--ink-2)}
/* A linha de origem, colada no numero grande: quanto dele ja tem data para
   entrar, e quanto depende dela. Ver docs/entradas-previstas.md. */
.destaque__origem{font-size:14px;margin:var(--s-3) 0 0;color:var(--ink-2)}
.destaque__origem b{color:var(--ink);font-weight:600}
/* O que a meta seria SE o esperado entrasse. Fica ao lado da meta e nunca no
   lugar dela: dinheiro que pode nao vir nao muda numero, so informa. */
.destaque__esperadas{font-size:13px;margin:var(--s-3) 0 0;color:var(--ink-2)}
.destaque__esperadas b{color:var(--ink);font-weight:600}
.destaque__base{font-size:12px;margin:var(--s-2) 0 0;color:var(--ink-3)}
.destaque__depois{font-size:13px;color:var(--ink-2)}
.destaque__depois b{color:var(--ink)}
/* Referencia: mais leve que o resto do card, porque nao e obrigacao. */
.destaque__referencia{font-size:12px;margin:var(--s-4) 0 0;color:var(--ink-3);padding-top:var(--s-3);border-top:1px solid var(--line-soft)}
.destaque__referencia b{color:var(--ink-2);font-weight:500}
/* Texto clicavel com alvo de toque de 44px sem engordar visualmente:
   o padding cresce a area e a margem negativa devolve o espaco ao redor. */
.ligacao{
  background:none;border:0;padding:14px 4px;margin:-14px -4px;cursor:pointer;
  color:var(--gold-soft);font:inherit;text-decoration:underline;
  text-underline-offset:2px;
}
.ligacao:hover{color:var(--gold)}

/* selos de confianca: cor, rotulo escrito E formato de borda.
   O tracejado e o que sobrevive a impressao em preto e branco e a quem nao
   distingue as cores. */
.selo{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:99px;white-space:nowrap;border:1px solid}
.selo--CONFIRMADO{color:var(--ok);border-color:rgba(127,201,154,.55);border-style:solid;background:rgba(127,201,154,.1)}
.selo--ORCAMENTADO{color:var(--gold);border-color:rgba(212,162,76,.55);border-style:solid;background:rgba(212,162,76,.1)}
.selo--ESTIMATIVA{color:var(--ink-2);border-color:rgba(244,236,224,.45);border-style:dashed;background:transparent}
/* Entrada que passou da data. Borda pontilhada, que e a terceira forma da
   familia (solida, tracejada, pontilhada), para separar sem depender de cor. */
.selo--passou{color:var(--ink-3);border-color:var(--line-soft);border-style:dotted;background:transparent}

/* tabela de blocos */
.tabela-wrap{margin-top:var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface)}
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela caption{text-align:left;padding:var(--s-4) var(--s-4) 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tabela th,.tabela td{padding:11px var(--s-4);text-align:left;border-bottom:1px solid var(--line-soft)}
.tabela th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600;color:var(--ink)}
.tabela__nome{font-family:var(--serif);font-size:18px}
.tabela__vinculo{display:block;font-size:12px;color:var(--ink-3);font-family:var(--sans);margin-top:2px}
.tabela__acoes{display:flex;gap:var(--s-2);justify-content:flex-end}
.linha--automatica{background:rgba(255,255,255,.02)}

/* "Ate a feitura" e "Depois" sao recortes do previsto, nao numeros irmaos dele.
   A distincao e por peso, com os tokens que ja existem: o previsto fica na cor
   cheia e os dois recortes um degrau abaixo. Nada de cor nova, e o peso
   sobrevive a impressao em preto e branco. */
.tabela .recorte{color:var(--ink-2);font-weight:400}
.tabela th.recorte{color:var(--ink-3)}
.tabela .num{font-weight:500}

/* Indicador de sobrescrita: precisa ser visto sem abrir o modal, porque e o
   tipo de coisa que se liga em agosto e se esquece em novembro. */
.tabela__sobrescrita{
  display:inline-block;margin-top:3px;font-size:11px;letter-spacing:.06em;
  color:var(--warn);border:1px dashed rgba(226,162,76,.5);border-radius:99px;
  padding:2px 8px;font-family:var(--sans);
}

/* caixinha */
.caixinha{margin-top:var(--s-5)}
.caixinha__topo{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.caixinha__titulo{font-family:var(--serif);font-size:22px;margin:0}
.caixinha__saldo{font-family:var(--serif);font-size:24px;color:var(--gold-soft)}
.caixinha__saldo[data-negativo="true"]{color:var(--alert)}
/* O numero do cabecalho de "O que vai entrar" e SO o dinheiro certo que ainda
   esta por vir, e nao o total da lista embaixo. Sem o rotulo ele fica colado no
   titulo e parece o total, que foi o que aconteceu. Somar tudo daria um numero
   que mistura certo com esperado e com vencido, e que nao decide nada. */
.entradas__certo{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.entradas__certo .caixinha__saldo{line-height:1}
.entradas__rotulo{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lancamentos{list-style:none;margin:0;padding:0;border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface)}
.lancamento{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);padding:10px var(--s-4);border-bottom:1px solid var(--line-soft)}
.lancamento:last-child{border-bottom:0}
.lancamento__data{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:0 0 84px}
.lancamento__valor{font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 110px;text-align:right}
.lancamento__valor[data-sinal="entrada"]{color:var(--ok)}
.lancamento__valor[data-sinal="saida"]{color:var(--warn)}
.lancamento__obs{flex:1 1 160px;min-width:0;color:var(--ink-2);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.lancamento__acoes{display:flex;gap:var(--s-2)}
/* Entrada que passou da data continua na lista, e apagada. Ela saiu da conta
   sozinha, e sumir de vista seria o que impede de entender o numero mexendo,
   mas continuar acesa faria parecer que ainda vale.

   O apagado para no --ink-3, e nao desce mais: ele e o piso de 4.5:1 desta
   base, e texto que ninguem le nao e "discreto", e invisivel. Quem carrega o
   resto do recado e o selo pontilhado e a palavra escrita. */
.lancamento[data-passou="true"] .lancamento__valor{color:var(--ink-3)}
.lancamento[data-passou="true"] .lancamento__obs{color:var(--ink-3)}

/* meta editavel dentro do cartao */
.stat__campo{margin-top:var(--s-2)}
.stat__campo .input{padding:7px 10px;min-height:38px;font-family:var(--serif);font-size:22px;color:var(--gold-soft)}

/* ---------- modo de selecao da lista ---------- */
/* Tudo aqui so existe com o modo ligado. Desligado, a lista fica exatamente
   como sempre foi: nem a barra, nem a caixinha, nem a borda do cartao. */
.selecao{
  display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(212,162,76,.08);
}
.selecao__contador{margin:0;font-size:14px;color:var(--ink-2)}
.selecao__contador b{color:var(--ink)}
.selecao__acoes{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(212,162,76,.12)}
.card--selecionavel{cursor:pointer}
.card--selecionavel[data-selecionado="true"]{border-color:var(--gold);background:rgba(212,162,76,.07)}
/* A caixinha tem 44px de alvo sem engordar o desenho, igual aos outros. */
.card__marcar{
  display:flex;align-items:center;justify-content:center;
  width:var(--toque);height:var(--toque);margin:-10px -10px -10px 0;
  flex:0 0 auto;cursor:pointer;
}
.card__marcar input{width:20px;height:20px;accent-color:var(--gold);cursor:pointer}

/* ---------- quebra dos avulsos e dica do bloco manual ---------- */
.tabela__dica{
  display:block;margin-top:var(--s-2);font-size:12px;
  background:none;border:0;padding:10px 0;text-align:left;
  color:var(--gold-soft);font-family:var(--sans);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.tabela__dica:hover{color:var(--gold)}
.quebra{margin-top:var(--s-2);font-size:12px}
.quebra__resumo{
  color:var(--ink-3);cursor:pointer;padding:13px 0;
  font-family:var(--sans);list-style:none;
}
.quebra__resumo::-webkit-details-marker{display:none}
.quebra__resumo::before{content:"▸ ";color:var(--gold-soft)}
.quebra[open] .quebra__resumo::before{content:"▾ "}
.quebra__lista{list-style:none;margin:0 0 var(--s-2);padding:0}
.quebra__linha{
  display:flex;justify-content:space-between;gap:var(--s-3);
  padding:3px 0;color:var(--ink-2);
}
.quebra__nome{overflow-wrap:anywhere;min-width:0}
.quebra__valor{font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}

/* nota fixa sobre o limite da caixinha */
.nota{font-size:12px;color:var(--ink-3);margin:var(--s-3) 0 0;max-width:70ch}

/* filtro especial vindo de um aviso clicavel */
.filtro-ativo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);border:1px solid var(--line);background:rgba(212,162,76,.08);border-radius:var(--r-sm);padding:var(--s-3) var(--s-4);margin-top:var(--s-4);font-size:14px}

/* comparacao de lojas e resumo por orixa ficam junto da lista, sem subir para o painel */
.abas{display:flex;gap:var(--s-2);margin-bottom:var(--s-4);border-bottom:1px solid var(--line-soft)}
.aba{background:none;border:0;border-bottom:2px solid transparent;padding:12px var(--s-3);min-height:var(--toque);color:var(--ink-2);cursor:pointer}
.aba[aria-selected="true"]{color:var(--gold-soft);border-bottom-color:var(--gold)}
.orixas{margin-bottom:var(--s-5)}
.orixas__cabeca,.lojas__cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.lojas__controles{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.lojas__controles label{font-size:13px;color:var(--ink-2)}
.orixas__cabeca h3,.lojas__cabeca h3{font-family:var(--serif);font-size:22px;margin:0}
.orixas__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s-3)}
.orixa-card{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s-4);background:var(--surface);min-width:0}
.orixa-card__nome{font-family:var(--serif);font-size:20px;margin:0;overflow-wrap:anywhere}
.orixa-card__contas{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-3)}
.orixa-card__rotulo{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em}
.orixa-card__valor{display:block;font-variant-numeric:tabular-nums;color:var(--gold-soft)}
.orixa-card__nota{font-size:12px;color:var(--ink-3);margin:var(--s-3) 0 0}
.chip--orixa{color:var(--gold-soft);border-color:var(--line);background:transparent;border-style:solid;text-transform:none;letter-spacing:.04em}
.lojas__cenarios{margin-bottom:var(--s-3)}
.lojas__nota{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);background:rgba(212,162,76,.08);margin-bottom:var(--s-4)}
.lojas__nota p{margin:var(--s-2) 0 0;color:var(--ink-2);font-size:13px}
.lojas__lista{display:grid;gap:var(--s-3)}
.loja{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface);min-width:0}
.loja__botao{width:100%;border:0;background:none;color:inherit;text-align:left;padding:var(--s-4);cursor:pointer;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s-3);align-items:center;min-height:var(--toque)}
.loja__nome{font-family:var(--serif);font-size:20px;overflow-wrap:anywhere;min-width:0;grid-column:span 2}
.loja__dado{font-size:13px;color:var(--ink-2);min-width:0}
.loja__dado b{display:block;color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.loja__cobertura{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:2px}
.loja__detalhes{border-top:1px solid var(--line-soft);padding:var(--s-3) var(--s-4) var(--s-4)}
.loja__variacoes{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.loja__aviso{margin:0 0 var(--s-3);font-size:12px;color:var(--ink-3)}
.loja__resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-2) var(--s-4);margin:var(--s-3) 0;font-size:13px;color:var(--ink-2)}
.loja__resumo span{display:flex;justify-content:space-between;gap:var(--s-2);min-width:0}
.loja__resumo b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.loja__acoes{display:flex;flex-wrap:wrap;gap:var(--s-2)}
/* As postas de lado ficam no fim, com borda tracejada: elas existem, mas não
   entram na conta. O caminho de volta fica junto, senão marcar vira sem volta. */
.lojas__ignoradas{margin-top:var(--s-5);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s-4);min-width:0}
.lojas__ignoradas h4{font-family:var(--serif);font-size:18px;font-weight:600;margin:0}
.lojas__ignoradas-nota{margin:var(--s-2) 0 var(--s-3);font-size:12px;color:var(--ink-3)}
.lojas__ignoradas-lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.loja-ignorada{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid var(--line-soft);min-width:0}
.loja-ignorada:last-child{border-bottom:0}
.loja-ignorada__nome{flex:1 1 auto;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.loja-ignorada__dado{flex:0 1 auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:0}
.loja__itens{list-style:none;margin:var(--s-3) 0 0;padding:0}
.loja__item{display:flex;justify-content:space-between;gap:var(--s-3);padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.loja__item:last-child{border-bottom:0}
.loja__item span:first-child{overflow-wrap:anywhere;min-width:0}
.loja__item span:last-child{white-space:nowrap}
.compras__lista{display:grid;gap:var(--s-4)}
.compra{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface);padding:var(--s-4);min-width:0}
.compra--sem-loja{border-style:dashed;background:transparent}
.compra__topo{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3)}
.compra__nome{font-family:var(--serif);font-size:22px;font-weight:600;margin:0;flex:1 1 auto;overflow-wrap:anywhere;min-width:0}
.compra__numeros{display:flex;align-items:baseline;gap:var(--s-3);min-width:0}
.compra__total{font-family:var(--serif);font-size:24px;color:var(--gold-soft);font-variant-numeric:tabular-nums}
.compra__itens{font-size:12px;color:var(--ink-3);white-space:nowrap}
/* Os dois botoes cabem lado a lado no computador e quebram no celular. Sem o
   flex:1 1 auto eles somavam a largura de conteudo e furavam a caixa em 375px. */
.compra__acoes{display:flex;flex-wrap:wrap;gap:var(--s-2);flex:1 1 auto;min-width:0;justify-content:flex-end}
.compra__acoes .btn{flex:0 1 auto}
.compra__lista{list-style:none;margin:0;padding:0}
/* A linha inteira quebra, e nao so o texto: o lado direito e um trecho sem
   espaco ("R$ 38,90, Mercado livre") que no celular nao cabia junto do nome e
   espremia o selo de situacao para fora da caixa. Sem o wrap aqui o valor
   ganhava a briga e o nome ficava com 89px. */
.compra__item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-2) var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft)}
.compra__item:last-child{border-bottom:0}
.compra__item-texto{display:flex;flex:1 1 60%;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);min-width:0;overflow-wrap:anywhere}
.compra__item-texto b{font-weight:600}
.compra__qtd{font-size:12px;color:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:1px 6px;overflow-wrap:anywhere;min-width:0}
.compra__empate{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px dotted var(--line);border-radius:var(--r-sm);padding:1px 6px}
/* Borda tracejada, e nao so cor: no papel e para quem nao distingue cor, o que
   separa este selo do de empate e o formato mais o texto escrito. */
.compra__perto{font-size:11px;color:var(--gold-soft);border:1px dashed var(--gold);border-radius:var(--r-sm);padding:1px 6px;white-space:nowrap}
.compra__distancia{display:inline-block;margin-left:var(--s-3);font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:2px 8px;vertical-align:middle}
.compra__distancia--online{border-style:dotted}
.compra__nota-distancia{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:0;text-transform:none;margin-top:var(--s-1)}
.viagem-caixa{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s-4);background:var(--surface);margin:var(--s-3) 0 var(--s-4);min-width:0}
.stat__note--topo{margin-top:0}
.viagem{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:var(--s-2)}
.viagem__linha{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3);font-size:13px;color:var(--ink-2);min-width:0}
.viagem__loja{font-weight:600;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.viagem__ganho b{color:var(--gold-soft);font-variant-numeric:tabular-nums}
.viagem__fora{flex:1 1 100%;font-size:12px;color:var(--ink-3);overflow-wrap:anywhere;min-width:0}
.separador{border:0;border-top:1px solid var(--line-soft);margin:var(--s-4) 0}
.checkbox{display:flex;align-items:center;gap:var(--s-2);min-height:var(--toque);font-size:14px;color:var(--ink-2)}
.compra__obs{flex:1 1 100%;font-size:12px;color:var(--ink-3);overflow-wrap:anywhere;min-width:0}
.compra__valor{flex:0 1 auto;margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:14px;overflow-wrap:anywhere;min-width:0}
.compra__nota{margin:var(--s-3) 0 0;font-size:12px;color:var(--ink-3)}
.compra__veredito{margin:0 0 var(--s-3);font-size:13px;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.compra__veredito b{color:var(--gold-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.compra__veredito--referencia{color:var(--ink-3);font-size:12px}
.compra__veredito-fora{margin:calc(var(--s-3) * -1 + 2px) 0 var(--s-3);font-size:12px;color:var(--ink-3);overflow-wrap:anywhere;min-width:0}
/* Discreto de propósito: e um lembrete, e nao um erro. A borda a esquerda faz
   ele existir no papel, onde o cinza claro nao sobrevive. */
.compra__aviso-viagem{margin:0 0 var(--s-3);padding-left:var(--s-3);border-left:2px solid var(--line);font-size:12px;color:var(--ink-3);overflow-wrap:anywhere;min-width:0}
.compra__frete{margin:0 0 var(--s-3);font-size:12px;color:var(--ink-3);overflow-wrap:anywhere;min-width:0}
.compra__frete b{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.compra-resolvidos{margin-top:var(--s-4);border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--surface)}
.compra-resolvidos summary{padding:var(--s-3) var(--s-4);min-height:var(--toque);display:flex;align-items:center;cursor:pointer;font-size:14px;color:var(--ink-2)}
.compra-resolvidos summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.compra-resolvidos .compra__lista{padding:0 var(--s-4) var(--s-4)}
.sugestoes{max-height:50vh;overflow:auto;border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:var(--s-2)}
.sugestao{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s-3);padding:var(--s-3);border-bottom:1px solid var(--line-soft);cursor:pointer}
.sugestao:last-child{border-bottom:0}
.sugestao input{width:20px;height:20px;accent-color:var(--gold)}
.sugestao__item{display:block;overflow-wrap:anywhere}
.sugestao__orixa{display:block;color:var(--gold-soft);font-size:13px}

/* ---------- responsivo ---------- */
/* A tabela de blocos precisa de cerca de 890px para caber inteira. Abaixo
   disso ela vira cartoes empilhados, senao a pagina rola de lado: era o que
   acontecia no iPhone deitado, onde a safe area ainda come as laterais.
   Numero de dinheiro que sai da tela e numero que nao se le. */
@media screen and (max-width:960px){
  .tabela-wrap{border:0;background:transparent}
  .tabela,.tabela tbody,.tabela tfoot,.tabela tr,.tabela td{display:block;width:100%}
  .tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabela caption{padding:0 0 var(--s-2)}
  .tabela tr{
    border:1px solid var(--line-soft);border-radius:var(--r-md);
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
    padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);
  }
  .tabela td{border-bottom:0;padding:5px 0;display:flex;justify-content:space-between;gap:var(--s-3);align-items:baseline}
  .tabela td::before{
    content:attr(data-rotulo);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-3);flex:0 0 auto;
  }
  .tabela td:empty{display:none}
  /* Quando o bloco e todo "antes", ate a feitura repete o previsto e depois e
     zero. No cartao, repetir isso so incha. */
  .tabela td[data-repetido="true"]{display:none}
  /* No cartao, o nome do bloco fica a direita do rotulo e a explicacao do
     vinculo cai numa linha propria, senao os dois brigam pelo mesmo espaco. */
  .tabela td:first-child{flex-wrap:wrap}
  .tabela td:first-child .tabela__nome{margin-left:auto;text-align:right}
  .tabela__vinculo{width:100%;text-align:right;margin-top:2px}
  .tabela .num{text-align:right}
  .tabela__acoes{justify-content:flex-start;width:100%;margin-top:var(--s-2)}
  .tabela__acoes .btn{flex:1}
  .tabela tfoot tr{border-color:var(--line)}
}

@media (max-width:640px){
  .lancamento{align-items:flex-start}
  .lancamento__valor{flex:1 1 auto;text-align:left}
  .lancamento__acoes{width:100%;margin-top:var(--s-2)}
  .lancamento__acoes .btn{flex:1}
  .painel{margin-top:var(--s-5)}
  .hero{min-height:320px}
  .hero__inner{padding:var(--s-6) calc(var(--s-4) + var(--safe-r)) var(--s-5) calc(var(--s-4) + var(--safe-l))}
  .hero__conta{top:calc(var(--s-3) + var(--safe-t));right:calc(var(--s-3) + var(--safe-r))}
  .wrap{padding:0 calc(var(--s-4) + var(--safe-r)) 0 calc(var(--s-4) + var(--safe-l))}
  .form-row{grid-template-columns:1fr}
  .quote-row{grid-template-columns:1fr 110px var(--toque)}
  .modal{padding:var(--s-4)}
  .grid{grid-template-columns:1fr}
  .toolbar .btn{width:100%}
  .card__actions .btn{flex:1}
  .recados{left:calc(var(--s-3) + var(--safe-l));right:calc(var(--s-3) + var(--safe-r));bottom:calc(var(--s-3) + var(--safe-b))}
  .loja__botao{grid-template-columns:1fr 1fr}
  .loja__nome{grid-column:1 / -1}
}
/* Com o botao de tirar, tres colunas nao cabem mais no celular: em 375px o
   "Onde" sobrava com uns 85px, que e campo de digitar sem lugar para o texto.
   Aqui o "Onde" toma a linha inteira e o valor divide a de baixo com o botao. */
@media (max-width:480px){
  .quote-row{grid-template-columns:1fr var(--toque);gap:var(--s-2) var(--s-3);margin-bottom:var(--s-4)}
  .quote-row__onde{grid-column:1 / -1}
}
@media (max-width:380px){
  .hero__title{font-size:38px}
  .login__card{padding:var(--s-5) var(--s-4)}
  .footer-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
/* =========================================================================
   A FOLHA DE IMPRESSÃO

   O papel não é uma foto da tela. A tela responde "como está o dinheiro"; a
   folha responde "o que ainda falta comprar", para levar na loja e para a mãe
   de santo conferir. São documentos diferentes, então a folha é montada à parte
   por app.js e a tela inteira some daqui.

   Tudo mora dentro do @media print de propósito: fora do papel esta folha não
   existe, e nenhuma regra daqui pode escapar para a tela.
   ========================================================================= */
.folha{display:none}

@page{
  size:A4 portrait;
  margin:16mm 14mm 18mm;
}

@media print{
  /* Só a folha imprime. Tudo que é tela sai da frente, inclusive o que antes
     era impresso: painel, blocos, caixinha e os cartões de item. */
  body>*{display:none!important}
  body{background:#fff;color:#17130f;padding:0;margin:0}
  html{background:#fff}
  .folha{display:block!important}

  /* DEFEITO 2: texto invisível no papel. Nenhuma cor de corpo abaixo de 4.5:1
     sobre o branco, e hierarquia por tamanho e peso, nunca por opacidade.
     O ouro da tela (#d9ab55) dá 1.9:1 aqui e por isso não aparece em lugar
     nenhum desta folha: no papel ele é #8a6a1f, que dá 5.6:1. */
  .folha *{opacity:1!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* DEFEITO 5: campo de formulário imprimindo como caixa com o valor cru.
     A folha não tem nenhum, e esta linha garante que nunca passe a ter. */
  .folha input,.folha select,.folha textarea,.folha button{display:none!important}

  /* DEFEITO 3: texto girado vazando pela margem direita. */
  .folha [class*="rotacion"],.folha [class*="tooltip"]{display:none!important}

  /* DEFEITO 1: nome quebrando letra a letra ("Mater iais", "Bicho s").
     keep-all impede a quebra dentro da palavra; o break-word continua valendo
     para a palavra que sozinha não cabe na linha, que é caso diferente. */
  .folha{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:11.5px;
    line-height:1.45;
    color:#17130f;
    word-break:keep-all;
    hyphens:none;
  }
  .folha a[href]:after{content:none!important}

  /* ---------- Capa ---------- */
  .folha__capa{
    display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
    border-bottom:1.5px solid #17130f;padding-bottom:12px;margin-bottom:20px;
    break-after:avoid;
  }
  .folha__eyebrow{
    font-size:9px;letter-spacing:.28em;text-transform:uppercase;
    color:#6d6156;margin:0 0 6px;font-weight:600;
  }
  .folha__titulo{
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    font-size:42px;line-height:.95;font-weight:400;margin:0;letter-spacing:-.01em;
  }
  .folha__data{margin:6px 0 0;font-size:11px;color:#4b4239}
  .folha__contagem{
    text-align:right;font-size:10px;color:#4b4239;line-height:1.5;
    white-space:nowrap;text-transform:lowercase;
  }
  .folha__contagem b{
    display:block;
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    font-size:32px;font-weight:400;color:#17130f;line-height:1;margin-bottom:2px;
  }

  /* ---------- Grupo de orixá ---------- */
  /* DEFEITO 6: grupo cortado no meio de duas páginas. */
  .folha__grupo{break-inside:avoid;margin-bottom:16px}
  .folha__grupo>header{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    border-bottom:1px solid #17130f;padding-bottom:4px;margin-bottom:2px;
    break-after:avoid;
  }
  .folha__grupo>header h2{
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    font-size:19px;font-weight:400;margin:0;
  }
  .folha__grupo>header h2 span{
    font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
    color:#6d6156;margin-left:8px;font-weight:600;
  }
  .folha__soma{
    font-family:'SF Mono',ui-monospace,Menlo,monospace;
    font-size:12px;font-weight:600;white-space:nowrap;color:#17130f;
  }

  /* ---------- A linha de item ---------- */
  .folha__itens{list-style:none;margin:0;padding:0}
  .folha__item,.folha__resolvido{
    display:flex;align-items:baseline;gap:7px;
    padding:5px 0;border-bottom:.5px solid #ded7c9;
    break-inside:avoid;
  }
  .folha__item:last-child,.folha__resolvido:last-child{border-bottom:0}
  /* Quadradinho para riscar na loja. É o motivo de a folha existir. */
  .folha__caixa{
    flex:0 0 auto;width:9px;height:9px;
    border:1px solid #4b4239;align-self:center;
  }
  /* Encomendado: caixinha TRACEJADA, e a palavra escrita ao lado do nome.
     Cor nao distingue nada no papel preto e branco, entao quem distingue e o
     formato da borda mais o rotulo escrito, igual ao selo de confianca e aos
     selos de situacao. Ver as coisas 18 e 2 do CLAUDE.md. */
  .folha__caixa--encomendado{border-style:dashed}
  .folha__nome{flex:0 1 auto;min-width:0;overflow-wrap:break-word}
  /* Defeito 2: nada de ouro no papel. #6d6156 da 5.9:1 no branco. */
  .folha__marca{
    flex:0 0 auto;
    font-size:8px;letter-spacing:.12em;text-transform:uppercase;
    color:#6d6156;border:.5px dashed #8a7f70;border-radius:2px;padding:0 3px;
  }
  .folha__qtd{
    flex:0 0 auto;
    font-family:'SF Mono',ui-monospace,Menlo,monospace;
    font-size:9.5px;color:#4b4239;
  }
  /* Condutores de ponto: ligam o nome ao preço sem uma régua cheia. */
  .folha__pontos{
    flex:1 1 auto;min-width:10px;
    border-bottom:1px dotted #b3a894;transform:translateY(-3px);
  }
  /* Largura medida no nome real mais comprido, "Chetruá artigos religiosos".
     Abaixo disto ele quebra em duas linhas e a altura das linhas fica desigual
     justamente nas quatro que vêm dessa loja. */
  .folha__onde{
    flex:0 0 auto;max-width:48mm;
    font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
    color:#4b4239;font-weight:600;overflow-wrap:break-word;
  }
  .folha__preco{
    flex:0 0 auto;min-width:20mm;text-align:right;
    font-family:'SF Mono',ui-monospace,Menlo,monospace;
    font-size:11px;font-variant-numeric:tabular-nums;color:#17130f;
  }
  /* Nunca em branco: sem preço é uma informação, e precisa estar escrita. */
  .folha__preco--vazio{font-size:9px;letter-spacing:.05em;color:#6d6156}

  /* ---------- Resolvidos ---------- */
  .folha__grupo--resolvidos{margin-top:20px}
  .folha__situacao{
    flex:0 0 auto;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
    color:#4b4239;font-weight:600;border:1px solid #b3a894;padding:0 5px;
  }
  .folha__detalhe{
    flex:1 1 auto;text-align:right;font-size:10px;color:#4b4239;
    font-variant-numeric:tabular-nums;
  }

  /* DEFEITO 4: estado vazio ocupando uma folha inteira. Vira uma linha. */
  .folha__vazio{
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    font-style:italic;font-size:14px;color:#4b4239;
    padding:8px 0;margin:0;border-bottom:.75px solid #ded7c9;
    break-inside:avoid;break-before:avoid;
  }

  /* ---------- Rodapé ---------- */
  /* DEFEITO 7: o rodapé do navegador é opção da caixa de impressão e não sai
     por CSS. O aviso antes de abrir pede para desligar, e este aqui é o
     rodapé de verdade do documento. */
  .folha__rodape{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border-top:.75px solid #ded7c9;margin-top:18px;padding-top:6px;
    font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
    color:#4b4239;font-weight:600;break-inside:avoid;
  }
  .folha__assinatura{
    font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    font-style:italic;font-size:12px;letter-spacing:0;text-transform:none;
    color:#8a6a1f;font-weight:400;
  }
}