/* Important declarations in this layer override legacy unlayered theme rules. */
@layer action-buttons {
/* Grupo compartido: botones de accion. Cambiar esta paleta cambia todo el grupo. */
:root {
  --action-button-bg: #f97316;
  --action-button-hover: #fb923c;
  --action-button-text: #431407;
  --action-button-focus: #fb923c;
}
html[data-theme] body[data-module] main .action-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .6rem !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
  border: 2px solid var(--action-button-bg) !important;
  border-radius: .8rem !important;
  background: var(--action-button-bg) !important;
  color: var(--action-button-text) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 4px 10px rgb(154 52 18 / 25%) !important;
  cursor: pointer;
  opacity: 1;
  transition: background-color .15s ease, box-shadow .15s ease;
}
html[data-theme] body[data-module] main .action-button * {
  color: inherit !important;
}
html[data-theme] body[data-module] main .action-button:hover {
  background: var(--action-button-hover) !important;
  border-color: var(--action-button-hover) !important;
  color: var(--action-button-text) !important;
  box-shadow: 0 6px 14px rgb(154 52 18 / 30%) !important;
  filter: none !important;
}
html[data-theme] body[data-module] main .action-button:focus-visible {
  outline: 3px solid var(--action-button-focus) !important;
  outline-offset: 3px !important;
}
html[data-theme] body[data-module] main .action-button:disabled,
html[data-theme] body[data-module] main .action-button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] body[data-module] main .action-button { transition: none; }
}

}