/* Modern UI Phase 6 — Buttons | var.11 grafo74 */
:root {
  --button-height: 44px;
  --button-radius: 12px;
  --button-shadow: 0 7px 18px rgba(37, 63, 67, .16);
  --button-shadow-hover: 0 11px 24px rgba(37, 63, 67, .22);
}

.main-block__button,
.io_button,
button.dropbtn,
.button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: var(--button-height);
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  padding: .65rem 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .18s ease, box-shadow .18s ease,
    background-color .18s ease, border-color .18s ease, color .18s ease;
}

.main-block__button { box-shadow: var(--button-shadow); }
.main-block__button_border {
  color: var(--ds-color-primary, #0d5c63);
  background: rgba(255,255,255,.94);
  border-color: currentColor;
}
.main-block__button_white {
  color: #0d5c63;
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.72);
}
.main-block__button_green,
.io_button {
  color: #fff;
  background: #0d5c63;
  border-color: #0d5c63;
}
.main-block__button_orange {
  color: #fff;
  background: #a52a2a;
  border-color: #a52a2a;
}

@media (hover:hover) {
  .main-block__button:hover,
  .io_button:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--button-shadow-hover);
  }
  .main-block__button_border:hover,
  .main-block__button_white:hover {
    color: #fff;
    background: #0d5c63;
    border-color: #0d5c63;
  }
  .main-block__button_green:hover,
  .io_button:hover { background: #094950; border-color: #094950; color:#fff; }
  .main-block__button_orange:hover { background:#842020; border-color:#842020; color:#fff; }
}

.main-block__button:active,
.io_button:active,
button.dropbtn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 3px 9px rgba(37,63,67,.16);
}

.main-block__button:focus-visible,
.io_button:focus-visible,
button.dropbtn:focus-visible,
#upbutton:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 3px solid rgba(26, 144, 154, .4);
  outline-offset: 3px;
}

button.dropbtn {
  min-width: var(--button-height);
  padding-inline: .75rem;
  box-shadow: none;
}

.io_button_wrap { display:flex; justify-content:center; }
.io_button { width:min(100%, 28rem); }

#upbutton {
  border-radius: 50%;
  box-shadow: var(--button-shadow);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover) {
  #upbutton:hover { transform: translateY(-3px); box-shadow: var(--button-shadow-hover); }
}

@media (max-width: 600px) {
  .main-block__buttons { gap: .65rem; margin-block: .5rem; }
  .main-block__button { width:100%; margin:0; padding-inline:1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .main-block__button, .io_button, button.dropbtn, #upbutton,
  input[type="button"], input[type="submit"], input[type="reset"] { transition:none; }
}

@media print {
  .main-block__button, .io_button { box-shadow:none; border:1px solid #555; background:#fff!important; color:#000!important; }
  #upbutton, button.dropbtn { display:none!important; }
}