/* ==========================================================================
   Acceso clientes + registro mayoreo — lenguaje DashStack
   Cargar solo en /acceso/ y /mayorista/registro.php (después de main.css).
   No afecta /cuenta/registro ni el sitio marketing general.
   ========================================================================== */

.may-login,
.may-registro {
  --ds-primary: #4880FF;
  --ds-primary-hover: #3A6FE0;
  --ds-primary-soft: #EBF0FF;
  --ds-bg: #F5F6FA;
  --ds-surface: #FFFFFF;
  --ds-ink: #202224;
  --ds-ink-soft: #565656;
  --ds-ink-faint: #A0A0A0;
  --ds-border: #E0E2E7;
  --ds-input-bg: #F1F4F9;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  background: var(--ds-bg);
  color: var(--ds-ink);
}

.may-login.pad,
section.may-login {
  padding-top: 48px;
  padding-bottom: 64px;
}

.may-login-wrap {
  max-width: 440px;
}

.may-login-card,
.form-bloque.may-registro,
.may-registro.form-bloque {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(32, 34, 36, 0.04), 0 8px 24px rgba(32, 34, 36, 0.06);
  padding: clamp(28px, 5vw, 40px);
}

.may-login-brand .eyebrow,
.may-registro .eyebrow {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.may-login-brand h1,
.may-registro h1 {
  font-family: inherit;
  font-size: clamp(1.6rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--ds-ink);
  margin: 10px 0 8px;
}

.may-login-brand h1 em,
.may-registro h1 em {
  font-style: normal;
  color: var(--ds-primary);
}

.may-login-brand p {
  color: var(--ds-ink-soft);
  font-weight: 400;
  font-size: 0.95rem;
}

.may-login-form .campo label,
.may-registro .campo label {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-ink-soft);
}

.may-login-form input,
.may-registro .campo input,
.may-registro .campo select,
.may-registro .campo textarea {
  font-family: inherit;
  background: var(--ds-input-bg);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  color: var(--ds-ink);
}

.may-login-form input:focus,
.may-registro .campo input:focus,
.may-registro .campo select:focus,
.may-registro .campo textarea:focus {
  outline: none;
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.may-login-form .btn-solid,
.may-login-form button.btn-solid,
.may-registro .btn-solid,
.may-registro button.btn-solid {
  font-family: inherit;
  font-weight: 700;
  background: var(--ds-primary);
  border-color: var(--ds-primary);
  color: #fff;
  border-radius: 8px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.may-login-form .btn-solid:hover,
.may-registro .btn-solid:hover {
  background: var(--ds-primary-hover);
  border-color: var(--ds-primary-hover);
}

.may-login-remember {
  color: var(--ds-ink-soft);
  font-size: 0.9rem;
}

.may-login-remember em {
  color: var(--ds-ink-faint);
  font-style: normal;
}

.may-login-alt {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--ds-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.may-login-alt-item p {
  color: var(--ds-ink-soft);
  font-size: 0.9rem;
}

.may-login-alt-item a {
  color: var(--ds-primary);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.may-login-alt-item a:hover {
  border-bottom-color: var(--ds-primary);
}

.may-login-msg.msg.err,
.may-registro .msg.err {
  border-radius: 8px;
  border-color: #EF3826;
  background: #FFEDED;
  color: #B91C1C;
}

/* Registro mayoreo: contenedor */
.may-registro.pad {
  padding-top: 40px;
  padding-bottom: 64px;
}

.may-registro .wrap {
  max-width: 720px;
}