/* =========================================================
   Botões — Sistema unificado (tema claro, finanças)
   Mantém compatibilidade com: 
   .botaocontas, .botaocontascolor, .botaocontascoloramarelo,
   .botaocontaspequeno, .botaocontascolorp, .botaocontascor,
   .botaobasico(.verde|.vermelho|.amarelo|.branco), .botaobasicog(…)
   ========================================================= */

:root{
  /* Design tokens */
  --btn-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --btn-radius: 10px;
  --btn-fs: 13px;
  --btn-fw: 600;
  --btn-letter: .3px;
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-minw: 140px;
  --btn-shadow: 0 2px 8px rgba(16,24,40,.08);
  --btn-shadow-hover: 0 4px 12px rgba(16,24,40,.12);

  /* Paleta coerente com sistemas financeiros (claro) */
  --green: #2a9d8f;
  --green-strong:#21867a;
  --green-focus: rgba(42,157,143,.35);

  --red: #e63946;
  --red-strong:#c53030;
  --red-focus: rgba(230,57,70,.32);

  --amber:#e9b949;
  --amber-strong:#d69e2e;
  --amber-focus: rgba(233,185,73,.32);

  --neutral:#f1f5f9;         /* cinza claro */
  --neutral-strong:#e2e8f0;  /* hover */
  --neutral-border:#e5e7eb;
  --neutral-text:#111827;
  --neutral-focus: rgba(59,130,246,.28);
}

/* ================= Base unificada ================= */
.botaocontas,
.botaocontascolor,
.botaocontascoloramarelo,
.botaocontaspequeno,
.botaocontascolorp,
.botaocontascor,
.botaobasico,
.botaobasicog {
  font-family: var(--btn-font);
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  letter-spacing: var(--btn-letter);
  line-height: 1;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-width: var(--btn-minw);
  height: auto;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  text-decoration: none;
  background: var(--green);               /* default */
  box-shadow: var(--btn-shadow);
  transition: background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .06s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ícones alinhados */
.botaocontas i, .botaocontascolor i, .botaocontascoloramarelo i,
.botaocontaspequeno i, .botaocontascolorp i, .botaocontascor i,
.botaobasico i, .botaobasicog i { font-size: 1.05em; }

/* Estados genéricos */
@media (hover:hover){
  .botaocontas:hover,
  .botaocontascolor:hover,
  .botaocontascoloramarelo:hover,
  .botaocontaspequeno:hover,
  .botaocontascolorp:hover,
  .botaocontascor:hover,
  .botaobasico:hover,
  .botaobasicog:hover{
    box-shadow: var(--btn-shadow-hover);
    transform: translateY(.5px);
  }
}
.botaocontas:active,
.botaocontascolor:active,
.botaocontascoloramarelo:active,
.botaocontaspequeno:active,
.botaocontascolorp:active,
.botaocontascor:active,
.botaobasico:active,
.botaobasicog:active{
  transform: translateY(1px);
}
.botaocontas:focus-visible,
.botaocontascolor:focus-visible,
.botaocontascoloramarelo:focus-visible,
.botaocontaspequeno:focus-visible,
.botaocontascolorp:focus-visible,
.botaocontascor:focus-visible,
.botaobasico:focus-visible,
.botaobasicog:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--green-focus), var(--btn-shadow);
}

/* ================= Variantes por cor ================= */
/* Verde (principal) */
.botaocontas,
.botaobasico.verde,
.botaobasicog.verde{
  background: var(--green);
  border-color: var(--green-strong);
}
@media (hover:hover){
  .botaocontas:hover,
  .botaobasico.verde:hover,
  .botaobasicog.verde:hover{
    background: var(--green-strong);
  }
}
.botaobasico.verde:focus-visible,
.botaobasicog.verde:focus-visible{ box-shadow: 0 0 0 4px var(--green-focus), var(--btn-shadow); }

/* Vermelho (ação crítica / pagar / remover) */
.botaocontascolor,
.botaocontascolorp,
.botaobasico.vermelho,
.botaobasicog.vermelho{
  background: var(--red);
  border-color: var(--red-strong);
}
@media (hover:hover){
  .botaocontascolor:hover,
  .botaocontascolorp:hover,
  .botaobasico.vermelho:hover,
  .botaobasicog.vermelho:hover{
    background: var(--red-strong);
  }
}
.botaocontascolor:focus-visible,
.botaocontascolorp:focus-visible,
.botaobasico.vermelho:focus-visible,
.botaobasicog.vermelho:focus-visible{
  box-shadow: 0 0 0 4px var(--red-focus), var(--btn-shadow);
}

/* Amarelo (atenção) */
.botaocontascoloramarelo,
.botaobasico.amarelo,
.botaobasicog.amarelo{
  background: var(--amber);
  border-color: var(--amber-strong);
  color: #1a202c; /* melhor contraste no amarelo */
}
@media (hover:hover){
  .botaocontascoloramarelo:hover,
  .botaobasico.amarelo:hover,
  .botaobasicog.amarelo:hover{
    background: var(--amber-strong);
  }
}
.botaocontascoloramarelo:focus-visible,
.botaobasico.amarelo:focus-visible,
.botaobasicog.amarelo:focus-visible{
  box-shadow: 0 0 0 4px var(--amber-focus), var(--btn-shadow);
}

/* Neutro (secundário) */
.botaobasico.branco,
.botaobasicog.branco,
.botaocontascor{
  background: var(--neutral);
  border-color: var(--neutral-border);
  color: var(--neutral-text);
}
@media (hover:hover){
  .botaobasico.branco:hover,
  .botaobasicog.branco:hover,
  .botaocontascor:hover{
    background: var(--neutral-strong);
  }
}
.botaobasico.branco:focus-visible,
.botaobasicog.branco:focus-visible,
.botaocontascor:focus-visible{
  box-shadow: 0 0 0 4px var(--neutral-focus), var(--btn-shadow);
}

/* ================= Tamanhos ================= */
/* Pequeno (mantém tap target adequado) */
.botaocontaspequeno{
  --btn-fs: 12px;
  --btn-pad-y: 6px;
  --btn-pad-x: 12px;
  --btn-minw: 110px;
}

/* Grande */
.botaobasicog{
  --btn-fs: 14px;
  --btn-pad-y: 12px;
  --btn-pad-x: 18px;
  --btn-minw: 120px;
}

/* ================= Estados utilitários ================= */
.botaocontas[disabled],
.botaocontascolor[disabled],
.botaocontascoloramarelo[disabled],
.botaocontaspequeno[disabled],
.botaocontascolorp[disabled],
.botaocontascor[disabled],
.botaobasico[disabled],
.botaobasicog[disabled],
.botaocontas.is-disabled,
.botaocontascolor.is-disabled,
.botaocontascoloramarelo.is-disabled,
.botaocontaspequeno.is-disabled,
.botaocontascolorp.is-disabled,
.botaocontascor.is-disabled,
.botaobasico.is-disabled,
.botaobasicog.is-disabled{
  opacity: .6;
  pointer-events: none;
}

/* ================= Layout responsivo ================= */
/* Empilhar como bloco no mobile se desejar aplicar 'btn--block' no HTML */
@media (max-width: 540px){
  .btn--block,
  .botaocontas.btn--block,
  .botaocontascolor.btn--block,
  .botaocontascoloramarelo.btn--block,
  .botaobasico.btn--block,
  .botaobasicog.btn--block,
  .botaocontascor.btn--block{
    width: 100%;
    min-width: 0;
  }
}

/* ========= Botões — modo compacto (override) ========= */
/* Cole este bloco DEPOIS do CSS unificado dos botões */

:root{
  /* antes: 10px / 16px / 140px */
  --btn-pad-y: 7px;
  --btn-pad-x: 12px;
  --btn-minw: 120px;
}

/* Grande (fica menos alto/largo, ainda “principal”) */
.botaobasicog{
  /* antes: 12px / 18px / 120px */
  --btn-pad-y: 8px;
  --btn-pad-x: 13px;
  --btn-minw: 112px;
}

/* Pequeno (bem enxuto, mas clicável) */
.botaocontaspequeno{
  /* antes: 6px / 12px / 110px */
  --btn-pad-y: 4px;
  --btn-pad-x: 9px;
  --btn-minw: 96px;
}

/* Menos espaço entre ícone e texto */
.botaocontas,
.botaocontascolor,
.botaocontascoloramarelo,
.botaocontaspequeno,
.botaocontascolorp,
.botaocontascor,
.botaobasico,
.botaobasicog{ gap: 4px; }

/* (Opcional) Em telas touch, volta um pouco o padding p/ acessibilidade */
@media (pointer: coarse){
  :root{
    --btn-pad-y: 9px;
    --btn-pad-x: 14px;
    --btn-minw: 128px;
  }
}