:root {
  --escala-primary: #2C541D;
  --escala-text: #1a1a1a;
  --escala-muted: #6b7280;
  --escala-border: #D9D9D9;
  --escala-bg: #F3F3F3;
  --radius: 10px;
  --shadow: 0 4px 10px rgba(0,0,0,.06);

  --escala-radius-sm: 6px;
  --escala-radius-lg: 8px;
  --escala-radius-xl: 10px;

  --escala-gap-sm: 8px;
  --escala-gap-lg: 18px;
  --escala-gap-xl: 28px;

  --media-width-sm: 480px;
  --media-width-lg: 768px;
  --media-width-xl: 1024px;
}

/* Layout genérico de páginas */
.page-container {
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: center;
  text-align: center;
  width: 100%;
  height: auto;
  min-height: 85vh;
}

@media (max-width: 1024px) {
  .page-container {
    min-height: 70vh;
  }
}

/* Formularios genéricos */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="date"] {
  width: 100%;
  padding: 0.5em;
}

form label {
  display: block;
  text-align: left;
}

form input[readonly] {
  background: #f8f8f8 !important;
  cursor: not-allowed;
}

.login-registration-form{
    max-width: 400px;
    margin: 8px auto;
}

/* Chips de precio / etiquetas */
.price-tag {
  background: var(--escala-primary);
  color: #fff;
  padding: 0 10px;
  border-radius: 15px;
  font-size: 14px;
}

/* Swiper */
.swiper-wrapper {
  flex-shrink: 0;
  height: auto !important;
  display: flex !important;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--escala-primary) !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--escala-primary) !important;
}

/*
 * Gym Front Desk / botones reutilizables (no específicos de cuenta)
 */
.gym-font-desk-container {
  max-width: 400px;
  margin: 0 auto 20px;
}

.secondary-button {
  background-color: #fff !important;
  color: var(--ast-global-color-2) !important;
  border: 1px solid var(--ast-global-color-2) !important;
  width: 100%;
}

.secondary-button:hover {
  background-color: var(--ast-global-color-1) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.terciary-button {
  background-color: transparent !important;
  color: var(--ast-global-color-2) !important;
  border-color: transparent !important;
  width: fit-content;
  align-self: center;
  transition: none;
}

.terciary-button:hover {
  color: var(--ast-global-color-1) !important;
}

.terciary-button:focus,
.terciary-button:focus-visible {
  outline: none !important;
}