/* ==========================================================================
   VETRAOfficer — ACABAMENTO PROFISSIONAL ("perfumaria")
   Criado em 05/10/2026, a pedido do Comandante:
     *"está muito simples e elas não vão gostar; já tendo alguma perfumaria,
      telas bonitas... nunca colocar emoji... quero ícones profissionais."*

   REGRAS RESPEITADAS (decisões dele, registradas):
     - Lucide de linha, NUNCA emoji;
     - números com alinhamento tabular (leitura rápida de valores);
     - Urbanist nos títulos/números · Inter no corpo;
     - cantos 12 (card) / 16 (painel) / 8 (controle) / 999 (badge);
     - sem texto com gradiente; contraste AA nos textos;
     - nada depende de internet (fontes e ícones são locais).

   COMO ISTO FUNCIONA: carregado DEPOIS de app.css + tema-warm.css.
   Reverter = apagar a linha do <link> no base.html.
   ========================================================================== */

:root {
  /* tokens de acabamento (derivados da paleta existente) */
  --p-accent-soft: rgba(198, 139, 89, .12);
  --p-pos-soft: rgba(58, 99, 81, .12);
  --p-neg-soft: rgba(184, 88, 73, .12);
  --p-info-soft: rgba(90, 120, 138, .12);
  --p-ring: 0 0 0 3px var(--border-focus-ring);
  --p-shadow-1: 0 1px 2px rgba(43, 40, 37, .06), 0 1px 3px rgba(43, 40, 37, .04);
  --p-shadow-2: 0 4px 12px rgba(43, 40, 37, .08), 0 1px 3px rgba(43, 40, 37, .05);
  --p-shadow-3: 0 12px 32px rgba(43, 40, 37, .12);
}

/* ==========================================================================
   1. RITMO DA PÁGINA
   ========================================================================== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.conteudo { padding-top: 18px; padding-bottom: 26px; }
.bloco, .cartao { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }

/* entrada suave das seções (não atrapalha o HTMX: só na pintura inicial) */
@keyframes p-surgir { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cartoes > .cartao, .bloco { animation: p-surgir .26s ease both; }
.cartoes > .cartao:nth-child(2) { animation-delay: .03s; }
.cartoes > .cartao:nth-child(3) { animation-delay: .06s; }
.cartoes > .cartao:nth-child(4) { animation-delay: .09s; }
@media (prefers-reduced-motion: reduce) {
  .cartoes > .cartao, .bloco { animation: none; }
  .bloco, .cartao { transition: none; }
}

/* ==========================================================================
   2. CARTÕES DE MÉTRICA — o topo do painel
   ========================================================================== */
.cartoes { gap: 14px; }

.cartao {
  position: relative;
  padding: 16px 18px 15px;
  border-radius: var(--raio-card);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--p-shadow-1);
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.cartao::before {                 /* faixa de identidade no topo do cartão */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--acento); opacity: .85;
}
.cartao:hover { box-shadow: var(--p-shadow-2); transform: translateY(-1px); }

/* rótulo: caixa alta discreta + chip de ícone */
.cartao .rotulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .70rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-secondary);
}
.cartao .rotulo svg {
  width: 15px; height: 15px; padding: 4px; box-sizing: content-box;
  border-radius: 8px; background: var(--p-accent-soft); color: var(--primary-accent-hover);
}
.cartao .valor {
  font-family: var(--fonte-titulo);
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cartao .miudo { font-size: .74rem; color: var(--text-muted); }

/* cartão de destaque (saldo): um degrau acima, sem exagero */
.cartao.destaque {
  background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-hover) 100%);
  border-color: var(--border-hover);
  box-shadow: var(--p-shadow-2);
}
.cartao.destaque .valor { font-size: 2rem; }
.cartao.destaque .rotulo svg { background: var(--p-info-soft); color: var(--status-info); }

/* cor da faixa conforme o sinal do número */
.cartao:has(.valor.positivo)::before { background: var(--status-positive); }
.cartao:has(.valor.negativo)::before { background: var(--status-negative); }
.cartao .valor.positivo { color: var(--status-positive); }
.cartao .valor.negativo { color: var(--status-negative); }

/* ==========================================================================
   3. BLOCOS (seções) — cabeçalho com ícone em chip
   ========================================================================== */
.bloco { padding: 16px 18px 14px; box-shadow: var(--p-shadow-1); }
.bloco:hover { box-shadow: var(--p-shadow-2); }
.bloco h2 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--fonte-titulo);
  font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
  margin: 0 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}
.bloco h2 svg {
  width: 16px; height: 16px; padding: 4px; box-sizing: content-box;
  border-radius: 8px; background: var(--p-accent-soft); color: var(--primary-accent-hover);
  margin: 0; vertical-align: middle;
}
.bloco h2 .miudo { margin-left: auto; font-weight: 500; font-size: .74rem; }

/* ==========================================================================
   4. LISTAS — a parte que mais parecia "crua"
   ========================================================================== */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; margin: 0 -10px;
  border-bottom: 1px solid var(--border-color);
  border-radius: 10px;
  transition: background .15s ease;
}
.lista li:last-child { border-bottom: 0; }
.lista li:hover { background: var(--surface-hover); }
.lista li > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista strong { font-size: .93rem; font-weight: 600; letter-spacing: -.005em; }
.lista .miudo { font-size: .74rem; }
.lista .valor { font-size: .95rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* pílula de status (vencimento hoje / atrasado / pago) */
.pilula {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-disabled); color: var(--text-secondary);
}
.pilula.hoje    { background: var(--p-accent-soft); color: var(--primary-accent-hover); }
.pilula.atraso  { background: var(--p-neg-soft);    color: var(--status-negative); }
.pilula.ok      { background: var(--p-pos-soft);    color: var(--status-positive); }

/* botões de ação da linha */
.botao-mini {
  padding: 5px 11px; font-size: .78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.botao-mini:hover { transform: translateY(-1px); box-shadow: var(--p-shadow-1); }
.botao-mini.pago:hover   { background: rgba(58, 99, 81, .16); }
.botao-mini.tarefa:hover { background: rgba(198, 139, 89, .2); }

/* avatar de membro (iniciais em círculo) */
.membros { display: flex; flex-wrap: wrap; gap: 8px; }
.membro {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--bg-subtle); border: 1px solid var(--border-color);
  font-size: .84rem; font-weight: 600;
}
.membro::before {
  content: attr(data-iniciais);
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-accent); color: #fff;
  font-family: var(--fonte-titulo); font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.membro .miudo { font-weight: 500; }

/* ==========================================================================
   4b. MINI-GRÁFICO DE TENDÊNCIA (sparkline) e ROSCA
   ========================================================================== */
.spark-caixa { display: block; margin-top: 8px; color: var(--text-muted); }
.spark-caixa .spark { display: block; width: 100%; max-width: 132px; height: auto; }
.cartao:has(.valor.positivo) .spark-caixa { color: var(--status-positive); }
.cartao:has(.valor.negativo) .spark-caixa { color: var(--status-negative); }
.cartao.destaque .spark-caixa { color: var(--status-info); }
.rosca { display: block; margin: 0 auto; }
.rosca-legenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.rosca-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-secondary); }
.rosca-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ==========================================================================
   4c. ESTADO VAZIO COM ÍCONE GRANDE (em vez de uma linha cinza)
   ========================================================================== */
.vazio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px; text-align: center; }
.vazio svg { width: 42px; height: 42px; color: var(--text-muted); opacity: .5; margin-bottom: 2px; }
.vazio strong { font-size: .9rem; font-weight: 600; color: var(--text-secondary); }
.vazio span { font-size: .78rem; color: var(--text-muted); }

/* ==========================================================================
   5. ORÇAMENTO POR CATEGORIA — barras com leitura clara
   ========================================================================== */
.linha-orcamento { padding: 7px 0; }
.linha-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.linha-topo > span:first-child { font-size: .87rem; font-weight: 600; }
.linha-topo .miudo { font-size: .74rem; font-variant-numeric: tabular-nums; }
.barra {
  height: 9px; border-radius: 999px; background: var(--surface-disabled);
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(43, 40, 37, .06);
}
.barra-preenche {
  height: 100%; border-radius: 999px; min-width: 3px;
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.barra-preenche.estourou { background-image: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }

/* ==========================================================================
   6. RÉGUA DOS ÚLTIMOS 6 MESES — barras com corpo
   ========================================================================== */
.regua { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 6px 4px 0; }
.regua-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; }
.regua-barras { display: flex; align-items: flex-end; gap: 5px; height: 100%; width: 100%; justify-content: center; }
.regua-barra {
  width: 40%; max-width: 22px; min-height: 4px; border-radius: 7px 7px 3px 3px;
  transition: height .5s cubic-bezier(.22, .61, .36, 1), filter .15s ease;
}
.regua-barra:hover { filter: brightness(1.08); }
.regua-barra.entrada { background: linear-gradient(180deg, #4E8269 0%, var(--status-positive) 100%); }
.regua-barra.saida   { background: linear-gradient(180deg, #C96A5B 0%, var(--status-negative) 100%); }
.legenda { display: flex; align-items: center; gap: 16px; margin-top: 10px; font-size: .76rem; color: var(--text-secondary); }
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.ponto.entrada { background: var(--status-positive); }
.ponto.saida { background: var(--status-negative); }

/* ==========================================================================
   7. TOPO — marca e ações
   ========================================================================== */
.topo { backdrop-filter: none; box-shadow: 0 1px 0 rgba(43, 40, 37, .04); }
.topo-linha strong { font-family: var(--fonte-titulo); font-size: 1.18rem; font-weight: 700; letter-spacing: -.015em; }
.topo-sub { font-size: .76rem; letter-spacing: .01em; margin-top: 1px; }
.selo {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; background: var(--bg-subtle);
}
.acoes .botao { padding: 9px 16px; font-size: .88rem; }

/* botão primário com sombra suave e retorno ao toque */
.botao {
  box-shadow: 0 1px 2px rgba(43, 40, 37, .12);
  transition: background .16s ease, transform .12s ease, box-shadow .16s ease;
}
.botao:hover { box-shadow: var(--p-shadow-2); transform: translateY(-1px); }
.botao:active { transform: translateY(0); box-shadow: var(--p-shadow-1); }
.botao:focus-visible, .botao-mini:focus-visible, .campo:focus-visible,
.menu a:focus-visible, .lista a:focus-visible {
  outline: none; box-shadow: var(--p-ring);
}

/* ==========================================================================
   8. MENU INFERIOR (celular) — item ativo com "pílula"
   ========================================================================== */
.menu { box-shadow: 0 -2px 12px rgba(43, 40, 37, .06); }
.menu a { transition: color .15s ease; }
.menu a.ativo { color: var(--primary-accent-hover); }
.menu a.ativo svg { filter: drop-shadow(0 1px 2px rgba(198, 139, 89, .35)); }
@media (min-width: 720px) { .menu { box-shadow: var(--p-shadow-1); } }

/* ==========================================================================
   9. CAMPOS E MODAL
   ========================================================================== */
.campo { padding: 11px 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.modal { box-shadow: var(--p-shadow-3); }
.modal-topo strong { font-family: var(--fonte-titulo); font-size: 1.05rem; }

/* ==========================================================================
   10. ESTADO VAZIO — em vez de uma linha cinza solta
   ========================================================================== */
.lista li.miudo, .bloco > p.miudo:only-of-type {
  justify-content: center; color: var(--text-muted);
  font-style: normal; font-size: .82rem;
  padding: 18px 10px; background: var(--surface-hover);
  border: 1px dashed var(--border-color); border-radius: 10px;
  margin: 2px 0 0;
}

/* ==========================================================================
   11. CHIP DE CATEGORIA (ícone profissional na linha da lista)
   ========================================================================== */
.chip-cat {
  flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-hover); border: 1px solid var(--border-color);
  color: var(--primary-accent-hover);
}
.chip-cat svg { width: 17px; height: 17px; }
.linha-orcamento .linha-topo > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.linha-orcamento .linha-topo svg { width: 15px; height: 15px; color: var(--text-muted); }

/* ==========================================================================
   12. CELULAR — compactar sem perder o capricho
   ========================================================================== */
@media (max-width: 719px) {
  .conteudo { padding: 12px 12px 18px; }
  .cartoes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cartao { padding: 13px 14px; }
  .cartao .valor { font-size: 1.22rem; }
  .cartao.destaque { grid-column: 1 / -1; }
  .cartao.destaque .valor { font-size: 1.7rem; }
  .cartao .rotulo { font-size: .64rem; letter-spacing: .07em; }
  .bloco { padding: 14px 14px 12px; }
  .regua { gap: 8px; height: 120px; }
  .lista li { padding: 10px 8px; margin: 0 -8px; }
}