/* Orçamentos e metas — ajustes de layout desta página (issue #66).
   Não sobrescreve tokens: só arranja espaçamento, hierarquia e as ações em
   ícone. Tudo que é cor sai das custom properties de main.css. */

.orc-card + .orc-card { margin-top: 1.5rem; }

.orc-card-head { margin-bottom: 1rem; }
.orc-card-head h2 { margin: 0 0 0.25rem; }
.orc-card-head p { margin: 0; }

/* Formulário: grid coerente e ação alinhada à base dos campos. */
.orc-form { margin-bottom: 1.5rem; }
.orc-form .field-actions .btn-primary { width: 100%; }

/* Lista de orçamentos/metas: cada item vira um bloco com respiro próprio. */
.orc-lista { display: flex; flex-direction: column; gap: 1rem; }

.orc-lista .orc-resumo {
  margin: 0 0 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.orc-item {
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.orc-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.orc-item-titulo { font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }

.orc-item-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  text-align: right;
}

.orc-item-valores { display: block; }

/* O ponto da issue: o percentual e os números não podem encostar na barra. */
.orc-item .bar { margin-top: 0.35rem; }
.orc-barra-wrap { margin-top: 0.75rem; }
.orc-barra-legenda {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* Linha de aporte das metas: campo Valor separado da barra por margem clara. */
.orc-aporte {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}
.orc-aporte .field { margin-bottom: 0; flex: 0 1 220px; min-width: 150px; max-width: 260px; }
.orc-aporte .field span { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; }
.orc-aporte input { width: 100%; }
.orc-aporte .orc-aporte-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Ações em ícone (lápis / lixeira) — SVG, sem emoji, com aria-label. */
.orc-acoes { display: flex; gap: 0.35rem; align-items: center; }

.icone-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.icone-acao svg { width: 17px; height: 17px; display: block; }
.icone-acao:hover {
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.icone-acao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* No tema escuro o cinza de --muted some contra o cartao: o icone precisa
   nascer mais claro para continuar legivel (mesma logica do .btn-acao). */
:root[data-theme='dark'] .icone-acao,
:root[data-bs-theme='dark'] .icone-acao { color: var(--text); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .icone-acao { color: var(--text); border-color: color-mix(in srgb, var(--text) 28%, transparent); }
}

.icone-acao.danger:hover {
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 45%, transparent);
  background: color-mix(in srgb, var(--error) 12%, transparent);
}

@media (pointer: coarse) {
  .icone-acao { width: 44px; height: 44px; min-height: 44px; min-width: 44px; }
}

@media (max-width: 640px) {
  .orc-item-head { flex-direction: column; align-items: stretch; }
  .orc-item-meta { text-align: left; }
  .orc-aporte .orc-aporte-acoes { width: 100%; }
  .orc-aporte .orc-aporte-acoes .btn-acao { flex: 1 1 auto; }
}