/* Shared action buttons: a warm face, inset bevel and visible lower base. */
:root .oga-button,
:root .oga-button.primary,
#contacto .oga-button {
  --button-face: #ffd77a;
  --button-hover: #ffe187;
  --button-highlight: #fff0bf;
  --button-bevel: #e9b64c;
  --button-side-light: #ffe8a6;
  --button-side-dark: #efc466;
  --button-base: #a97716;
  --button-edge: #181725;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--button-height, 48px);
  padding: 12px var(--button-padding, 20px);
  border: 2px solid var(--button-edge);
  border-image: none;
  border-radius: 4px;
  background: var(--button-face);
  color: var(--button-text, var(--button-edge));
  box-shadow:
    inset 0 3px 0 var(--button-highlight),
    inset 0 -3px 0 var(--button-bevel),
    inset 3px 0 0 var(--button-side-light),
    inset -3px 0 0 var(--button-side-dark),
    0 4px 0 var(--button-base),
    0 6px 0 var(--button-edge),
    3px 8px 0 rgb(24 23 37 / 18%);
  filter: none;
  font-family: "Press Start 2P", monospace;
  font-size: var(--button-font-size, 9px);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: normal;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}

:root .oga-button--secondary {
  --button-face: #fff4e1;
  --button-hover: #fff9f0;
  --button-highlight: #fffdf7;
  --button-bevel: #d9c9ad;
  --button-side-light: #fffaf0;
  --button-side-dark: #e7d9c2;
  --button-base: #ae9572;
}

/* Keep each action's original palette while sharing the same geometry. */
:root .result-card-footer .oga-button,
:root .retro-button.primary,
#contacto .oga-button {
  --button-face: #ffa260;
  --button-hover: #ffb578;
  --button-highlight: #ffd595;
  --button-bevel: #e77c41;
  --button-side-light: #ffbc82;
  --button-side-dark: #ed8e4b;
  --button-base: #b85528;
}

:root .filters .oga-button.primary,
#contacto .oga-button {
  --button-face: #f57a3e;
  --button-hover: #ff8a4d;
}

#contacto .oga-button {
  --button-text: #fff9f0;
}

:root .presence-submit.oga-button {
  --button-face: #38695d;
  --button-hover: #44796b;
  --button-highlight: #72a391;
  --button-bevel: #295146;
  --button-side-light: #568773;
  --button-side-dark: #305b4f;
  --button-base: #234b40;
  --button-text: #fffdfa;
}

:root .oga-button:hover:not(:disabled),
#contacto .oga-button:hover:not(:disabled) {
  background: var(--button-hover);
  transform: translateY(-1px);
  filter: none;
  box-shadow:
    inset 0 3px 0 var(--button-highlight),
    inset 0 -3px 0 var(--button-bevel),
    inset 3px 0 0 var(--button-side-light),
    inset -3px 0 0 var(--button-side-dark),
    0 5px 0 var(--button-base),
    0 7px 0 var(--button-edge),
    3px 9px 0 rgb(24 23 37 / 18%);
}

:root .oga-button:active:not(:disabled),
#contacto .oga-button:active:not(:disabled) {
  transform: translateY(3px);
  filter: none;
  box-shadow:
    inset 0 2px 0 var(--button-highlight),
    inset 0 -2px 0 var(--button-bevel),
    inset 2px 0 0 var(--button-side-light),
    inset -2px 0 0 var(--button-side-dark),
    0 1px 0 var(--button-base),
    0 3px 0 var(--button-edge),
    2px 5px 0 rgb(24 23 37 / 18%);
}

:root .oga-button:focus-visible,
#contacto .oga-button:focus-visible {
  outline: 3px solid #5a315b;
  outline-offset: 6px;
}

:root .oga-button:disabled,
#contacto .oga-button:disabled {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.result-card-footer .oga-button,
.filters .oga-button {
  --button-height: 40px;
  --button-font-size: 8px;
  --button-padding: 14px;
  padding-block: 8px;
}

@media (prefers-reduced-motion: reduce) {
  :root .oga-button,
  :root .oga-button.primary,
  #contacto .oga-button {
    transition: none;
  }
}