/* ============================================================
   DES Me Login Register — front.css
   ============================================================ */

/* ── Banner tipo de cuenta (Mi cuenta) ─────────────────────── */
.desme-account-type {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border-radius: 12px;
  border-left: 4px solid;
  margin-bottom: 24px;
  font-family: inherit;
  transition: background 0.3s ease;
}

.desme-account-type--particular {
  background-color: #f6f3eb;
  border-color: #b3a88a;
  color: #3d1152;
}

.desme-account-type--profesional {
  background-color: #f9f0ff;
  border-color: #4c1e4f;
  color: #4c1e4f;
}

.desme-account-type__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.6;
}

.desme-account-type__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}

.desme-account-type__desc {
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 4px;
}

.desme-account-type__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 20px;
  border-radius: 8px;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.desme-account-type--particular .desme-account-type__switch:hover {
  background-color: #b3a88a;
  border-color: #b3a88a;
  color: #fff;
}

.desme-account-type--profesional .desme-account-type__switch:hover {
  background-color: #4c1e4f;
  border-color: #4c1e4f;
  color: #fff;
}

.desme-account-type__switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes desme-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.desme-spin {
  animation: desme-spin 0.8s linear infinite;
}

/* ── Título formulario de registro ─────────────────────────── */
.desme-register-title {
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 35px;
  color: #47214C;
  margin-bottom: 16px;
}

@media (max-width: 992px) {
  .desme-register-title {
    font-size: 18px;
    line-height: 27px;
  }
}

/* ── Banners registro ───────────────────────────────────────── */
.desme-register-banner {
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
}

.desme-register-banner--default {
  background-color: #faf7f7;
}

.desme-register-banner--particular {
  background-color: #f8f4fc;
}

/* ── Switch tipo de cuenta en checkout ─────────────────────── */
.desme-checkout-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 3px;
  border: 1px solid;
  font-family: inherit;
  margin-bottom: 16px;
}

.desme-checkout-type--particular {
  background-color: #f6f3eb;
  border-color: #b3a88a;
  color: #4c1e4f;
}

.desme-checkout-type--profesional {
  background-color: #f9f0ff;
  border-color: #4c1e4f;
  color: #4c1e4f;
}

.desme-checkout-type__info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.desme-checkout-type__label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.6;
}

.desme-checkout-type__value {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.desme-checkout-type__switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.desme-checkout-type--particular .desme-checkout-type__switch:hover {
  background-color: #b3a88a;
  border-color: #b3a88a;
  color: #fff;
}

.desme-checkout-type--profesional .desme-checkout-type__switch:hover {
  background-color: #47214C;
  border-color: #47214C;
  color: #fff;
}

.desme-checkout-type__switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .desme-checkout-type {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}