/* Register premium — overlays Login Premium. Solo presentación. */

/* Misma tarjeta que login (.login-card max-width: 380px) */
.register-card-form {
  width: 100%;
  max-width: 380px;
  padding-bottom: 24px;
}

/* Formulario más alto: compactar un poco para que el CTA entre en el primer fold */
.register-card-form .login-logo {
  margin-bottom: 28px;
}

.register-card-form .sub {
  margin-bottom: 22px;
}

.register-form .field-group {
  margin-bottom: 13px;
}

/* Selects = mismos tokens que .input-wrap input */
.select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 40px 13px 40px;
  font-size: 13.5px;
  line-height: 1.25;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  background-color: var(--glass);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.select-wrap select:focus {
  outline: none;
  border-color: rgba(77, 141, 255, 0.55);
  background-color: rgba(77, 141, 255, 0.06);
}

.select-wrap select option {
  background: #12141c;
  color: #f5f6f8;
}

.select-wrap select:disabled,
.input-wrap input:disabled,
.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Aviso elegante cuando SIGNUP_ENABLED=false (glass premium, no Bootstrap) */
.register-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(245, 197, 99, 0.12), rgba(245, 197, 99, 0.04));
  border: 1px solid rgba(245, 197, 99, 0.32);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.65);
  color: #f3e2b8;
  font-size: 13px;
  line-height: 1.55;
  animation: fadeUp 0.45s ease both;
}

.register-notice[hidden] {
  display: none !important;
}

.register-notice.is-error {
  background: linear-gradient(160deg, rgba(255, 120, 120, 0.12), rgba(255, 120, 120, 0.04));
  border-color: rgba(255, 143, 143, 0.35);
  color: #ffc9c9;
}

.register-notice.is-ok {
  background: linear-gradient(160deg, rgba(51, 214, 143, 0.12), rgba(51, 214, 143, 0.04));
  border-color: rgba(51, 214, 143, 0.32);
  color: #b8f0d4;
}

.register-notice-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 197, 99, 0.18);
  color: var(--amber);
  font-size: 16px;
}

.register-notice.is-error .register-notice-icon {
  background: rgba(255, 120, 120, 0.16);
  color: #ff8f8f;
}

.register-notice.is-ok .register-notice-icon {
  background: rgba(51, 214, 143, 0.16);
  color: var(--green);
}

.register-notice-body {
  min-width: 0;
}

.register-notice-body strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffe9bd;
  margin-bottom: 4px;
}

.register-notice.is-error .register-notice-body strong {
  color: #ffd0d0;
}

.register-notice.is-ok .register-notice-body strong {
  color: #d4f5e4;
}

/* Misma respiración antes del CTA que el bloque “¿Has olvidado…?” del login */
.register-form .btn-primary {
  margin-top: 14px;
}

@media (max-width: 1120px) {
  .register-card-form {
    max-width: 380px;
  }
}