/* ==========================================================================
   Acceso clientes (/acceso/) — lenguaje DashStack
   Cargar solo en /acceso/ (después de main.css).
   El registro mayorista (/mayorista/registro.php) usa el estilo del sitio
   público (main.css / form-bloque charcoal), igual que /mayoreo.
   ========================================================================== */

.may-login {
  --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 {
  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 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-primary);
}

.may-login-brand 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 {
  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 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-ink-soft);
}

.may-login-form input:not([type="checkbox"]):not([type="radio"]) {
  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:not([type="checkbox"]):not([type="radio"]):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 {
  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 {
  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 {
  border-radius: 8px;
  border-color: #EF3826;
  background: #FFEDED;
  color: #B91C1C;
}