:root {
  /* Paleta laranja/cinza para alternar botoes */
  --btn-orange: linear-gradient(135deg, #f97316, #f59e0b);
  --btn-gray: linear-gradient(135deg, #4b5563, #1f2933);
  --btn-text: #f8fafc;
  --btn-bg: var(--btn-orange);
  --btn-hover: linear-gradient(135deg, #ea580c, #d97706);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
a.btn,
.button,
.button-primary,
.button-secondary,
.action-button,
.actions button,
.actions .btn,
.card button,
.card .btn,
.form-actions button,
.form-actions .btn {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.18);
  transition: background 0.2s ease, transform 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

/* Alternar cores dentro de grupos de botoes para evitar repeticao lado a lado (use .main-buttons nos grupos que devem alternar) */
.button-group.main-buttons > *,
.actions.main-buttons > *,
.form-actions.main-buttons > * {
  background: var(--btn-orange) !important;
}
.button-group.main-buttons > *:nth-child(even),
.actions.main-buttons > *:nth-child(even),
.form-actions.main-buttons > *:nth-child(even) {
  background: var(--btn-gray) !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover,
.button-primary:hover,
.button-secondary:hover,
.action-button:hover {
  background: var(--btn-hover) !important;
  transform: translateY(-1px);
}

button:disabled,
input[type="submit"]:disabled,
.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.button-group,
.actions,
.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* Titulos de cards: evitar quebra e ajustar tamanho */
.card h1,
.card h2,
.card h3,
.card h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
  line-height: 1.1;
}

/* Manter headers visíveis ao rolar */
header {
  position: sticky;
  top: 0;
  z-index: 999;
}

@media (max-width: 640px) {
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .button,
  .button-primary,
  .button-secondary,
  .action-button,
  .actions button,
  .card button,
  .card .btn,
  .form-actions button,
  .form-actions .btn {
    width: 100%;
    max-width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

  .button-group,
  .actions,
  .form-actions { 
    width: 100%;
    justify-content: center;
  }
}