/* ========= Botões modernos ========= */
:root{
  --btn-font: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  --btn-radius: 12px;
  --btn-h: 32px;
  --btn-gap: 8px;
  --btn-shadow: 0 6px 18px rgba(2,6,23,.08);
  --btn-ring: 3px solid rgba(14,165,233,.25);
}

/* Base compartilhada (mantém nomes antigos) */
.botaocontas,
.botaocontaspequeno{
  appearance: none;
  font-family: var(--btn-font);
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  border: 0;
  border-radius: var(--btn-radius);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform .12s ease,
    box-shadow .2s ease,
    background-position .35s ease,
    opacity .2s ease,
    filter .2s ease;
  box-shadow: var(--btn-shadow);
  background-size: 200% 200%;
  background-position: 0% 50%;
}

/* Primário (verde) — default */
.botaocontas{
  --minw: 150px;
  min-width: var(--minw);
  height: var(--btn-h);
  padding: 0 18px;
  font-size: 14px;
  /* gradiente moderno */
  background-image: linear-gradient(145deg, #10b981 0%, #22c55e 100%);
}

/* Tamanho pequeno (alias do seu .botaocontaspequeno) */
.botaocontaspequeno{
  --minw: 110px;
  min-width: var(--minw);
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  background-image: linear-gradient(145deg, #10b981 0%, #22c55e 100%);
}

/* Interações */
.botaocontas:hover,
.botaocontaspequeno:hover{
  transform: translateY(-1px);
  background-position: 100% 50%;
  filter: saturate(1.05);
}
.botaocontas:active,
.botaocontaspequeno:active{
  transform: translateY(0);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.12);
}
.botaocontas:focus-visible,
.botaocontaspequeno:focus-visible{
  outline: var(--btn-ring);
  outline-offset: 2px;
}

/* Estado desabilitado */
.botaocontas:disabled,
.botaocontaspequeno:disabled,
.botaocontas[aria-disabled="true"],
.botaocontaspequeno[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(.1);
}

/* ===== Modificadores de cor (opcionais) ===== */
.botaocontas.is-secondary,
.botaocontaspequeno.is-secondary{
  background-image: linear-gradient(145deg, #0ea5e9 0%, #0284c7 100%);
}
.botaocontas.is-danger,
.botaocontaspequeno.is-danger{
  background-image: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
}
.botaocontas.is-ghost,
.botaocontaspequeno.is-ghost{
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
.botaocontas.is-ghost:hover,
.botaocontaspequeno.is-ghost:hover{
  background: #f9fafb;
}
.botaocontas.is-outline,
.botaocontaspequeno.is-outline{
  color: #16a34a;
  background: transparent;
  border: 2px solid #86efac;
  box-shadow: none;
}
.botaocontas.is-outline:hover,
.botaocontaspequeno.is-outline:hover{
  background: rgba(134, 239, 172, .12);
}

/* ===== Estado de carregando (opcional) ===== */
.botaocontas.is-loading,
.botaocontaspequeno.is-loading{
  position: relative;
  pointer-events: none;
}
.botaocontas.is-loading::before,
.botaocontaspequeno.is-loading::before{
  content:"";
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  border-top-color: #fff;
  animation: spin .8s linear infinite;
  margin-right: 6px;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* ===== Suporte a ícones Font Awesome dentro do botão ===== */
.botaocontas i, .botaocontaspequeno i{
  font-size: 1.05em; line-height: 0;
}

/* ===== Dark mode & reduced motion ===== */
@media (prefers-color-scheme: dark){
  .botaocontas, .botaocontaspequeno{
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
  .botaocontas.is-ghost, .botaocontaspequeno.is-ghost{
    color: #e5e7eb; background: #0b1220; border-color:#1f2937;
  }
  .botaocontas.is-ghost:hover, .botaocontaspequeno.is-ghost:hover{
    background:#111827;
  }
}
@media (prefers-reduced-motion: reduce){
  .botaocontas, .botaocontaspequeno{ transition: none; }
}


/* ======== Botões de cor (danger / warn / small pill) ======== */
:root{
  --btn-font: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  --btn-radius: 12px;
  --btn-h: 32px;
  --btn-gap: 8px;
  --btn-shadow: 0 6px 18px rgba(2,6,23,.08);
  --btn-ring: 3px solid rgba(14,165,233,.25);
}

/* Base compartilhada (ancora/input/button) */
.botaocontascolor,
.botaocontascoloramarelo,
.botaocontascolorp{
  appearance: none;
  font-family: var(--btn-font);
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  border: 0;
  border-radius: var(--btn-radius);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform .12s ease,
    box-shadow .2s ease,
    background-position .35s ease,
    filter .2s ease,
    opacity .2s ease;
  box-shadow: var(--btn-shadow);
  background-size: 200% 200%;
  background-position: 0% 50%;
}

/* ===== Danger (vermelho) ===== */
.botaocontascolor{
  min-width: 150px;
  height: var(--btn-h);
  padding: 0 18px;
  font-size: 14px;
  background-image: linear-gradient(145deg, #ef4444 0%, #dc2626 100%);
  /* fallback para quem depende de border */
  border: 1px solid rgba(239,68,68,.35);
}
.botaocontascolor:hover{ transform: translateY(-1px); background-position: 100% 50%; filter: saturate(1.05); }
.botaocontascolor:active{ transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0,0,0,.12); }
.botaocontascolor:focus-visible{ outline: var(--btn-ring); outline-offset: 2px; }

/* ===== Warning (amarelo) ===== */
.botaocontascoloramarelo{
  min-width: 150px;
  height: var(--btn-h);
  padding: 0 18px;
  font-size: 14px;
  background-image: linear-gradient(145deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid rgba(245,158,11,.35);
}
.botaocontascoloramarelo:hover{ transform: translateY(-1px); background-position: 100% 50%; filter: saturate(1.05); }
.botaocontascoloramarelo:active{ transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0,0,0,.12); }
.botaocontascoloramarelo:focus-visible{ outline: var(--btn-ring); outline-offset: 2px; }

/* ===== Small Pill (perfeita p/ ações compactas) ===== */
.botaocontascolorp{
  min-width: 110px;
  height: 28px;                 /* mais confortável que 20px */
  padding: 0 12px;
  font-size: 12px;
  border-radius: 999px;         /* pill */
  background-image: linear-gradient(145deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 4px 12px rgba(2,6,23,.12);
}
.botaocontascolorp:hover{ transform: translateY(-1px); background-position: 100% 50%; }
.botaocontascolorp:active{ transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0,0,0,.12); }
.botaocontascolorp:focus-visible{ outline: var(--btn-ring); outline-offset: 2px; }

/* Ícones Font Awesome dentro dos botões */
.botaocontascolor i,
.botaocontascoloramarelo i,
.botaocontascolorp i{ font-size: 1.05em; line-height: 0; }

/* Estado desabilitado */
.botaocontascolor:disabled,
.botaocontascoloramarelo:disabled,
.botaocontascolorp:disabled,
.botaocontascolor[aria-disabled="true"],
.botaocontascoloramarelo[aria-disabled="true"],
.botaocontascolorp[aria-disabled="true"]{
  opacity: .6; cursor: not-allowed; transform: none; filter: grayscale(.1);
}

/* Estado de carregando (opcional) — adicione .is-loading ao botão */
.botaocontascolor.is-loading,
.botaocontascoloramarelo.is-loading,
.botaocontascolorp.is-loading{
  position: relative; pointer-events: none;
}
.botaocontascolor.is-loading::before,
.botaocontascoloramarelo.is-loading::before,
.botaocontascolorp.is-loading::before{
  content:""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6); border-top-color:#fff;
  animation: spin .8s linear infinite; margin-right: 6px;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Dark mode & motion */
@media (prefers-color-scheme: dark){
  .botaocontascolor, .botaocontascoloramarelo, .botaocontascolorp{
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }
}
@media (prefers-reduced-motion: reduce){
  .botaocontascolor, .botaocontascoloramarelo, .botaocontascolorp{ transition: none; }
}



/* ========= Botões básicos modernos ========= */
:root{
  --btn-font: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  --btn-radius: 12px;
  --btn-gap: 8px;
  --btn-shadow: 0 6px 18px rgba(2,6,23,.08);
  --btn-ring: 3px solid rgba(14,165,233,.25);
}

/* Base compartilhada */
.botaobasico,
.botaobasicog{
  appearance:none;
  font-family:var(--btn-font);
  font-weight:700;
  letter-spacing:.2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--btn-gap);
  border:1px solid transparent;
  border-radius:var(--btn-radius);
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  white-space:nowrap;
  transition:
    transform .12s ease,
    box-shadow .2s ease,
    background-position .35s ease,
    filter .2s ease,
    opacity .2s ease;
  box-shadow:var(--btn-shadow);
  background-size:200% 200%;
  background-position:0% 50%;
  color:#1f2937; /* cor neutra default; variantes abaixo forçam branco */
  background-image:linear-gradient(145deg,#f3f4f6 0%,#e5e7eb 100%);
  border-color:#e5e7eb;
}

/* Tamanhos (mantidos próximos aos seus valores) */
.botaobasico{
  min-width:110px; height:20px; padding:3px 15px; font-size:12px;
}
.botaobasicog{
  min-width:130px; height:30px; padding:6px 22px; font-size:13px;
}

/* Interações comuns */
.botaobasico:hover,
.botaobasicog:hover{
  transform:translateY(-1px);
  background-position:100% 50%;
  filter:saturate(1.05);
}
.botaobasico:active,
.botaobasicog:active{
  transform:translateY(0);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.12);
}
.botaobasico:focus-visible,
.botaobasicog:focus-visible{
  outline:var(--btn-ring);
  outline-offset:2px;
}
.botaobasico:disabled,
.botaobasicog:disabled,
.botaobasico[aria-disabled="true"],
.botaobasicog[aria-disabled="true"]{
  opacity:.6; cursor:not-allowed; transform:none; filter:grayscale(.1);
}

/* ===== Modificadores de cor ===== */
/* Verde */
.botaobasico.verde,
.botaobasicog.verde{
  color:#fff;
  background-image:linear-gradient(145deg,#10b981 0%,#22c55e 100%);
  border-color:rgba(16,185,129,.35);
}
.botaobasico.verde:hover,
.botaobasicog.verde:hover{
  background-image:linear-gradient(145deg,#059669 0%,#16a34a 100%);
}

/* Vermelho */
.botaobasico.vermelho,
.botaobasicog.vermelho{
  color:#fff;
  background-image:linear-gradient(145deg,#ef4444 0%,#dc2626 100%);
  border-color:rgba(239,68,68,.35);
}
.botaobasico.vermelho:hover,
.botaobasicog.vermelho:hover{
  background-image:linear-gradient(145deg,#b91c1c 0%,#dc2626 100%);
}

/* Amarelo */
.botaobasico.amarelo,
.botaobasicog.amarelo{
  color:#1f2937;
  background-image:linear-gradient(145deg,#f59e0b 0%,#fbbf24 100%);
  border-color:rgba(245,158,11,.35);
}
.botaobasico.amarelo:hover,
.botaobasicog.amarelo:hover{
  background-image:linear-gradient(145deg,#d97706 0%,#f59e0b 100%);
}

/* Branco (ghost claro) */
.botaobasico.branco,
.botaobasicog.branco{
  color:#1f2937;
  background-image:linear-gradient(145deg,#eef2f7 0%,#f8fafc 100%);
  border-color:#e5e7eb;
  box-shadow:none;
}
.botaobasico.branco:hover,
.botaobasicog.branco:hover{
  background-image:linear-gradient(145deg,#e5e7eb 0%,#eef2f7 100%);
}

/* Suporte a ícones Font Awesome dentro dos botões */
.botaobasico i, .botaobasicog i{ font-size:1.05em; line-height:0; }

/* Estado de carregando (opcional) — adicione .is-loading */
.botaobasico.is-loading,
.botaobasicog.is-loading{ position:relative; pointer-events:none; }
.botaobasico.is-loading::before,
.botaobasicog.is-loading::before{
  content:""; width:1em; height:1em; border-radius:50%;
  border:2px solid rgba(255,255,255,.65); border-top-color:#fff;
  animation:spin .8s linear infinite; margin-right:6px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Dark mode & motion */
@media (prefers-color-scheme: dark){
  .botaobasico, .botaobasicog{ box-shadow:0 6px 18px rgba(0,0,0,.25); }
}
@media (prefers-reduced-motion: reduce){
  .botaobasico, .botaobasicog{ transition:none; }
}