:root {
  --registry-bg: #f5f5f9;
  --registry-card: #ffffff;
  --registry-text: #2f314a;
  --registry-text-light: #7c80a8;
  --registry-accent: #e0005f;
  --registry-accent-dark: #c0004a;
  --registry-error: #f23d51;
  --registry-error-icon: #e04f5f;
  --registry-border: #9c9fbe;
  --registry-border-strong: #46496e;
  --registry-border-soft: #dcdde9;
  --registry-info: #1b90d6;
  --registry-ok: #4bd295;
  --registry-field-bg: #f5f5f9;
  --registry-radius: 30px;
  --registry-radius-sm: 15px;
  --registry-font: "Inter", "SF Pro", system-ui, -apple-system, sans-serif;
}
html.signup {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.signup-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--registry-bg);
  font-family: var(--registry-font);
}
.signup-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  padding: 0 25px;
  background: #ffffff;
  box-sizing: border-box;
  z-index: 2;
}
.signup-header .logo {
  display: block;
  width: 162px;
  height: 43px;
  object-fit: contain;
}
.signup-close-link {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  color: var(--registry-text);
  text-decoration: none;
}
.signup-header .close {
  width: 35px;
  height: 35px;
  cursor: pointer;
}
.signup-card {
  width: 600px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--registry-card);
  border-radius: 0 0 var(--registry-radius) var(--registry-radius);
}
.signup-card-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  max-width: 100%;
  height: 142px;
  margin-top: 50px;
  border-radius: var(--registry-radius) var(--registry-radius) 0 0;
}
.signup-card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.signup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  background: var(--registry-accent);
  border: 0;
  border-radius: var(--registry-radius);
  color: #ffffff;
  font-family: var(--registry-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 12px;
  text-transform: uppercase;
  cursor: pointer;
}
form.formRegister.signup-main {
  max-width: 600px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.signup-card-banner .signup-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signup-card-banner-placeholder {
  font-weight: 510;
  font-size: 12px;
  line-height: 14px;
  color: #000000;
}

@supports (appearance: base-select) {
  .signup-bonus-select {
    display: flex;
    align-items: center;
  }

  /* Quita la flecha que añade base-select y deja solo la vuestra */
  .signup-bonus-select::picker-icon {
    display: none;
  }
  .signup-bonus-select,
  .signup-bonus-select::picker(select) {
    appearance: base-select !important;
  }

  /* Menú desplegado: mismo ancho que el campo */
  .signup-bonus-select::picker(select) {
    width: anchor-size(width);
    box-sizing: border-box;
    margin-top: 6px;
    padding: 6px;
    border: none;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  .signup-bonus-select option {
    padding: 12px 16px;
    border-radius: 10px;
  }

  .signup-bonus-select option:checked {
    font-weight: 600;
  }

  .signup-bonus-select option:hover {
    background: #f2f2f7;
  }
}
.signup-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 179px;
  height: 23px;
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--registry-info);
  border-radius: var(--registry-radius-sm) var(--registry-radius-sm) 0 0;
  color: #ffffff;
  font-size: 12px;
  font-weight: 590;
  line-height: 21px;
  white-space: nowrap;
}
.signup-card-head {
  position: relative;
  padding: 26px 24px 8px;
  text-align: center;
}
.signup-step-back {
  position: absolute;
  left: 20px;
  top: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  box-sizing: border-box;
  border: 1px solid var(--registry-border);
  border-radius: 50%;
}
.signup-step-back .icon {
  width: 9px;
  height: 9px;
}
.signup-card-title {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  color: var(--registry-text);
}
.subtitle-break {
  display: none;
}
.signup-card-subtitle {
  margin: 20px 0 8px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 510;
  text-align: center;
  color: var(--registry-text-light);
}
.signup-card-step {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  color: var(--registry-text);
}
.signup-card-step .number {
  display: inline-block;
  color: var(--registry-accent);
}
.signup-card-step .number.active {
  -webkit-animation: scaling-number 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: scaling-number 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.signup-card.signup-card--no-banner {
  border-radius: var(--registry-radius);
  margin-top: 48px;
}
.signup-section .container {
  padding: 4px 75px 32px;
}
.signup-field {
  position: relative;
}
.signup-field .signup-input {
  width: 100%;
  height: 45px;
  border: 1.5px solid var(--registry-border);
  border-radius: var(--registry-radius);
  background: var(--registry-field-bg);
  padding: 0 24px;
  font-size: 14px;
  font-weight: 510;
  line-height: 21px;
  color: var(--registry-text);
  box-sizing: border-box;
}
.signup-field .signup-input:focus {
  outline: none;
  border-color: var(--registry-text);
}
.signup-field .signup-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.signup-field .signup-input:-webkit-autofill,
.signup-field .signup-input:-webkit-autofill:hover,
.signup-field .signup-input:-webkit-autofill:focus,
.signup-field .signup-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--registry-field-bg) inset;
  -webkit-text-fill-color: var(--registry-text);
  caret-color: var(--registry-text);
  transition: background-color 5000s ease-in-out 0s;
}
.signup-field .signup-input::placeholder {
  color: var(--registry-text-light);
  font-weight: 510;
  opacity: 1;
}
.signup-phone-prefix {
  position: absolute;
  left: 20px;
  top: 8px;
  height: 29px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-right: 1px solid var(--registry-border);
  padding: 0 8px 0 4px;
  font-family: var(--registry-font);
  font-size: 14px;
  font-weight: 510;
  line-height: 21px;
  color: var(--registry-text-light);
}
.signup-field.phone .signup-input--phone {
  padding-left: 67px;
}
.signup-field select.signup-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 48px;
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 14px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239C9FBE' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#city_select.signup-input:disabled {
  padding-right: 24px;
  background-image: none;
}
#city_select.signup-input:not(:disabled) {
  cursor: pointer;
}
.signup-field select.signup-bonus-select {
  padding-left: 52px;
  background-repeat: no-repeat, no-repeat;
  background-position:
    left 20px center,
    right 20px center;
  background-size:
    17px 17px,
    12px 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7c0-2-2-4-4-4s-2 4 0 4h4zm0 0c0-2 2-4 4-4s2 4 0 4h-4z' stroke='%232F314A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232F314A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.signup-field .signup-label {
  display: none;
  position: absolute;
  top: -9px;
  left: 16px;
  z-index: 1;
  padding: 0 8px;
  background: linear-gradient(
    to bottom,
    var(--registry-card) 0%,
    var(--registry-card) 50%,
    var(--registry-field-bg) 50%,
    var(--registry-field-bg) 100%
  );
  font-size: 12px;
  font-weight: 590;
  line-height: 24px;
  color: var(--registry-text);
}
.signup-field .signup-input:focus ~ .signup-label,
.signup-field .signup-input:not(:placeholder-shown) ~ .signup-label,
.signup-field.error .signup-label,
.signup-field.success .signup-label {
  display: inline-flex;
  align-items: center;
}
.signup-check {
  position: relative;
}
.signup-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.signup-check .signup-check-tick {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--registry-border);
  border-radius: 4px;
  background: var(--registry-card);
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.signup-check input[type="checkbox"]:checked + .signup-check-label .signup-check-tick {
  background: var(--registry-accent);
  border-color: var(--registry-accent);
}
.signup-check input[type="checkbox"]:checked + .signup-check-label .signup-check-tick::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
#registry-buttons .signup-btn {
  flex: 1;
  min-width: 0;
}
#btn__sin {
  display: none !important;
}
.signup-welcome {
  text-align: center;
  padding: 34px 0;
}
.signup-welcome-step {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  color: var(--registry-text);
}
.signup-welcome-title {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  color: var(--registry-text);
}
.signup-welcome-text {
  margin: 8px 0 20px;
  font-size: 14px;
  font-weight: 510;
  line-height: 17px;
  text-align: center;
  color: var(--registry-text-light);
}
.signup-bonus-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.signup-bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 220px;
  height: 100px;
  overflow: hidden;
  background: #d9d9d9;
  border-radius: 6px;
  text-decoration: none;
  color: var(--registry-text);
  font-size: 12px;
  font-weight: 590;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.signup-bonus-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.signup-bonus-card span {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 510;
  line-height: 14px;
  color: #000000;
}
.signup-bonus-card.selected {
  border: 3px solid var(--registry-accent);
  box-shadow:
    0 0 0 2px var(--registry-card),
    0 4px 12px rgba(224, 0, 95, 0.25);
}
.signup-steps {
  position: relative;
}
.signup-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-top: 32px;
  width: 100%;
  box-sizing: border-box;
}
.signup-buttons__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  width: 100%;
}
#registry-buttons.signup-buttons {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.signup-buttons.disabled #btn__con {
  opacity: 0.5;
  pointer-events: none;
}
.signup-checkbox-field {
  margin-top: 20px;
}
.signup-step-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
fieldset.signup-step-pane,
fieldset.step-dgoj {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.signup-step-pane.out {
  display: none;
}
.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.signup-cols {
  display: flex;
  gap: 16px;
}
.signup-cols > * {
  flex: 1;
  min-width: 0;
}
.signup-field-group {
  position: relative;
  flex: 1;
  min-width: 0;
}
.signup-field-group .signup-input {
  width: 100%;
}
.signup-check-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 510;
  line-height: 1;
  color: var(--registry-text);
}
/* Solo "política de privacidad" debe ser enlace: que no se parta en dos lineas ni solape el resto del texto */
#realsubs-deseo {
  line-height: 20px;
}
#realsubs-deseo .link {
  white-space: nowrap;
}
/* Edge/IE pintan su propio ojo y aspa ademas del nuestro */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
.subtitle-subs {
  line-height: 16px;
  color: var(--registry-text-light);
}
.signup-step-pane .signup-row {
  flex-direction: column;
}
.signup-step-pane .signup-cols {
  flex-direction: column;
}
.signup-step-pane .signup-cols > * {
  width: 100%;
  flex: none;
}
.signup-bonus-select {
  background: #ffffff;
  border-color: var(--registry-border-strong);
  border-radius: var(--registry-radius-sm);
  font-weight: 700;
  line-height: 21px;
  color: var(--registry-text);
}
.signup-field .signup-input--dni {
  border-color: var(--registry-text);
}
.signup-req {
  color: var(--registry-accent-dark);
}
.link {
  color: var(--registry-accent);
  text-decoration: none;
  font-weight: 700;
}
.registry__login-text {
  display: block;
  margin: 20px auto 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--registry-text-light);
  opacity: 1;
}
.message--fixed {
  display: none !important;
}
.signup-field-hint {
  display: none;
  margin: 6px 0 0 0 !important;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 510;
  line-height: 21px;
  color: var(--registry-text-light);
  transition: color 0.15s ease;
}
.signup-field .signup-input:focus:placeholder-shown ~ .signup-field-hint,
.signup-field.error .signup-field-hint {
  display: block;
}
.signup-check.error ~ .signup-field-hint {
  display: block;
  color: var(--registry-error);
}
.signup-field-icon {
  display: none;
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}
.signup-field.error .signup-input,
.signup-field.error .signup-input:focus {
  border-color: var(--registry-error);
}
.signup-field.error .signup-field-hint {
  color: var(--registry-error);
}
.signup-field.error .signup-field-icon {
  display: inline-block;
  background-color: var(--registry-error-icon);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.signup-field.success .signup-input,
.signup-field.success .signup-input:focus {
  border-color: var(--registry-border-strong);
}
.signup-field.success .signup-field-icon {
  display: inline-block;
  background-color: var(--registry-ok);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2.2 2.2L8 3' stroke='white' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.signup-field.loader .signup-field-icon {
  display: inline-flex;
  background: none;
  width: 10px;
  height: 10px;
  border: 2px solid var(--registry-border);
  border-top-color: var(--registry-info);
  animation: signup-field-spin 0.6s linear infinite;
}
@keyframes signup-field-spin {
  to {
    transform: rotate(360deg);
  }
}
.signup-field.warning .signup-input,
.signup-field.warning .signup-input:focus {
  border-color: var(--registry-info);
}
.signup-field.warning .signup-field-icon {
  display: inline-block;
  background-color: var(--registry-info);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 2v3.6' stroke='white' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='8' r='0.9' fill='white'/%3E%3C/svg%3E");
}
.signup-field-group.radio--style2,
.signup-field.form-group.birthday {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.signup-field.form-group.birthday .signup-field-hint {
  width: 100%;
}
.birthday-hidden-selects {
  display: none;
}
.signup-field.form-group.birthday .signup-field-group .signup-input,
#birthday-div-ko .signup-input {
  padding-right: 48px;
}
.calendar-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.calendar-icon .icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' stroke='%232F314A' stroke-width='1.5' fill='none'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4' stroke='%232F314A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0.7;
}
.birthday-native-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  margin: 0;
  opacity: 0;
  border: 0;
  padding: 0;
  /* iOS: el toque debe caer sobre el propio input date (showPicker/focus no abren el picker alli) */
  z-index: 3;
  cursor: pointer;
}
.radio--style2 input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio--style2 input[type="radio"] + label {
  flex: 1;
  height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: var(--registry-field-bg);
  border: 1.5px solid var(--registry-border);
  border-radius: 6px;
  color: var(--registry-text);
  font-weight: 510;
}
.radio--style2 input[type="radio"]:checked + label {
  animation: none;
  transform: none;
  background: var(--registry-field-bg);
  border-color: var(--registry-text);
  color: var(--registry-text);
  font-weight: 510;
}
.radio--style2 .gender-check {
  display: none;
  width: 12px;
  height: 12px;
  flex: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%234BD295'/%3E%3Cpath d='M3.5 6.2l1.7 1.7L8.5 4.3' stroke='%23FAFAFA' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.radio--style2 input[type="radio"]:checked + label .gender-check {
  display: inline-block;
}
.check-list {
  list-style-type: none;
  margin: 0;
  padding-left: 30px;
  padding-top: 12px;
}
.check-list__item {
  position: relative;
  color: var(--registry-text-light);
  font-size: 12px;
  font-weight: 510;
  line-height: 21px;
}
.check-list__item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--registry-border);
}
.check-list__item.success {
  color: var(--registry-ok);
}
.check-list__item.success::before {
  background: var(--registry-ok);
}
.check-list__item.error {
  color: var(--registry-error);
}
.loader__container {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: var(--registry-bg);
  opacity: 0.92;
  z-index: 20;
}
form.loader .loader__container {
  display: flex;
}
.loader__container .loader__icon {
  width: 60px;
  height: 60px;
}
.signup-field.password .signup-input {
  padding-right: 48px;
}
.signup-field.password .password__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.signup-field.password .password__icon .icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url(/img/general/svg/eye.svg);
  opacity: 0.5;
}
.signup-field.password .password__icon.active .icon {
  background-image: url(/img/general/svg/eye-close.svg);
}
#step-dgoj:not(.hide) ~ #registry-steps,
#step-dgoj:not(.hide) ~ #registry-buttons .signup-buttons__row {
  display: none;
}
#step-dgoj:not(.hide) ~ #registry-buttons {
  margin-top: 0;
}
.step-dgoj:not(.hide) {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: auto;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
}
.step-dgoj .flex {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: auto;
  gap: 16px;
}
#nationality-form-group-ko {
  display: none;
}
.title__dgoj-last {
  display: none;
}
#nationalId-div-ko .signup-input {
  border-color: var(--registry-text);
}
#name-div-ko .signup-input,
#middlename-div-ko .signup-input,
#surname-div-ko .signup-input,
#birthday-div-ko .signup-input {
  border-color: var(--registry-border);
}
.dgoj__button {
  margin-top: 32px;
  width: auto;
}
@media screen and (max-width: 699px) {
  #nationalId-div-ko {
    order: 1;
  }
  #name-div-ko {
    order: 2;
  }
  #middlename-div-ko {
    order: 3;
  }
  #surname-div-ko {
    order: 4;
  }
  #birthday-div-ko {
    order: 5;
  }
  .dgoj__button {
    order: 6;
  }
}
.modal__dgoj-inside {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.modal__dgoj-inside .content {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  padding: 32px 24px;
  background: var(--registry-card);
  border-radius: var(--registry-radius);
  box-shadow: none;
  box-sizing: border-box;
  text-align: center;
}
.modal__dgoj-inside .close-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  /* padding 12px dejaba la X visible en solo 20px (QA: "se ve muy pequeña"); con 7px se ve a 30px manteniendo el area tactil de 44px */
  padding: 7px;
  box-sizing: border-box;
  cursor: pointer;
}
.modal__dgoj-inside .message {
  margin: 8px 0 0;
  max-width: 100%;
  font-size: 14px;
  line-height: 21px;
  color: var(--registry-text);
}

/* Tema oscuro del registro: se activa con la clase .signup--dark en <html>,
     que pone el JS del head segun la preferencia del usuario guardada en
     localStorage.mode (la misma que usa el resto de la web). Si no hay
     preferencia guardada, el JS cae al modo del sistema (prefers-color-scheme).
     Asi, web en claro = registro claro aunque el movil/WebView este en dark. */
html.signup--dark {
  --registry-bg: #181926;
  --registry-card: #282a3f;
  --registry-text: #ffffff;
  --registry-text-light: #bcbed4;
  --registry-field-bg: #010102;
  --registry-border-strong: #9c9fbe;
}
html.signup--dark .signup-header {
  background: var(--registry-card);
}
html.signup--dark .signup-bonus-select {
  background-color: var(--registry-field-bg);
}
html.signup--dark .registry__login-text {
  color: #ffffff;
}
html.signup--dark .signup-header .logo,
html.signup--dark .signup-header .close,
html.signup--dark .modal__dgoj-inside .close-icon,
html.signup--dark .exit-modal__close-icon {
  filter: brightness(0) invert(1);
}
html.signup--dark .signup-field.password .password__icon .icon {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
html.signup--dark .signup-step-back .icon {
  filter: brightness(0) invert(1);
}
html.signup--dark .calendar-icon .icon {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

html.signup--dark .signup-field select.signup-bonus-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 22V7M12 7c0-2-2-4-4-4s-2 4 0 4h4zm0 0c0-2 2-4 4-4s2 4 0 4h-4z' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23FFFFFF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 600px) {
  .signup-header {
    justify-content: flex-start;
    padding: 0 15px;
  }
  .signup-close-link {
    right: 15px;
    border: 1.5px solid var(--registry-text);
    border-radius: 50%;
    box-sizing: border-box;
  }
  .signup-card-banner {
    display: none;
  }
  .signup-card {
    width: 100%;
    background: transparent;
    border-radius: 0;
  }
  .signup-field .signup-label {
    background: linear-gradient(
      to bottom,
      var(--registry-bg) 0%,
      var(--registry-bg) 50%,
      var(--registry-field-bg) 50%,
      var(--registry-field-bg) 100%
    );
  }
  .signup-card-head {
    padding: 24px 20px 8px;
  }
  .signup-card-title {
    font-size: 32px;
    line-height: 32px;
  }
  .signup-card-subtitle {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 20px;
  }
  .subtitle-break {
    display: initial;
  }
  /* Por debajo de 16px los navegadores moviles hacen zoom al enfocar el campo */
  .signup-field .signup-input,
  .signup-phone-prefix {
    font-size: 16px;
  }
  .signup-field.phone .signup-input--phone {
    padding-left: 72px;
  }
  .signup-field select.signup-bonus-select {
    padding-left: 44px;
    padding-right: 36px;
    background-position:
      left 16px center,
      right 16px center;
    text-overflow: ellipsis;
  }
  .signup-section .container {
    padding: 4px 20px 24px;
  }
  .signup-bonus-row {
    flex-direction: column;
  }
  .signup-bonus-card {
    width: 100%;
  }
  .signup-buttons {
    position: sticky;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(245, 245, 249, 0) 0%, var(--registry-bg) 45%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  #registry-buttons.signup-buttons {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 12px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  background: rgba(24, 25, 38, 0.6);
}
.exit-modal__card {
  position: relative;
  box-sizing: border-box;
  width: 400px;
  max-width: 100%;
  padding: 36px;
  background: var(--registry-card);
  border-radius: var(--registry-radius);
  text-align: center;
  box-shadow: 0 12px 32px rgba(24, 25, 38, 0.25);
}
.exit-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  /* 44x44 minimo recomendado de area tactil (QA: la X del popup de error se veia muy pequeña en mobile) */
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exit-modal__close-icon {
  width: 32px;
  height: 32px;
}
.exit-modal__emoji {
  width: 45px;
  height: 46px;
  margin: 34px auto 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='46' viewBox='0 0 45 46' fill='none'%3E%3Cmask id='mask0_1683_1816' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='45' height='46'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H44.8613V45.7527H0V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_1683_1816)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 22.8764C0 10.242 10.0426 0 22.4305 0C34.8187 0 44.8613 10.242 44.8613 22.8764C44.8613 35.5108 34.8187 45.7528 22.4305 45.7528C10.0426 45.7528 0 35.5108 0 22.8764Z' fill='%23FFD153'/%3E%3C/g%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.1664 3.35059C36.4001 6.90701 37.6954 11.1357 37.6954 15.6729C37.6954 28.3073 27.653 38.5492 15.2646 38.5492C10.9622 38.5492 6.94351 37.313 3.5293 35.171C7.51588 41.5182 14.4917 45.7252 22.4309 45.7252C34.819 45.7252 44.8617 35.4832 44.8617 22.8488C44.8617 14.6023 40.5827 7.37615 34.1664 3.35059Z' fill='%23FFC547'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.04831 25.2895C3.04831 13.5593 12.3723 4.05003 23.8738 4.05003C30.5965 4.05003 36.5741 7.29995 40.382 12.3422C36.7857 5.97518 30.0457 1.68848 22.3236 1.68848C10.822 1.68848 1.49805 11.198 1.49805 22.928C1.49805 27.8016 3.10884 32.2912 5.81542 35.8753C4.05542 32.759 3.04831 29.1441 3.04831 25.2895Z' fill='%23FFD87A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.8192 17.3265C15.8192 18.8955 15.0792 20.1677 14.1666 20.1677C13.2537 20.1677 12.5137 18.8955 12.5137 17.3265C12.5137 15.7572 13.2537 14.4854 14.1666 14.4854C15.0792 14.4854 15.8192 15.7572 15.8192 17.3265Z' fill='%2311111B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.3475 17.3265C32.3475 18.8955 31.6075 20.1677 30.6946 20.1677C29.782 20.1677 29.042 18.8955 29.042 17.3265C29.042 15.7572 29.782 14.4854 30.6946 14.4854C31.6075 14.4854 32.3475 15.7572 32.3475 17.3265Z' fill='%2311111B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M35.6797 12.5304C35.4384 12.4584 35.2034 12.3916 34.9742 12.3261C34.4702 12.1825 33.9942 12.0465 33.5344 11.8838C32.8468 11.6468 32.2287 11.3787 31.6442 11.0644C31.0297 10.7324 30.471 10.3629 29.936 9.93398C29.3521 9.47154 28.8097 8.9302 28.3105 8.41463C28.2821 8.38511 28.2389 8.37652 28.2018 8.39316C28.165 8.4098 28.1418 8.44791 28.1437 8.48897C28.181 9.26998 28.4839 10.0773 29.02 10.8245C29.5102 11.4998 30.1663 12.069 30.9176 12.47C31.6244 12.8495 32.415 13.0811 33.2105 13.1423C33.241 13.1447 33.2721 13.1466 33.3026 13.1487C34.1937 13.1962 34.9984 13.0505 35.6942 12.7156C35.7305 12.6981 35.7529 12.6592 35.7497 12.6179C35.7463 12.5768 35.7187 12.5419 35.6797 12.5304Z' fill='%2311111B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.18162 12.5304C9.42294 12.4584 9.65794 12.3916 9.88715 12.3261C10.3911 12.1825 10.8672 12.0465 11.3269 11.8838C12.0145 11.6468 12.6327 11.3787 13.2172 11.0644C13.8316 10.7324 14.3903 10.3629 14.9253 9.93398C15.5093 9.47154 16.0516 8.9302 16.5508 8.41463C16.5793 8.38511 16.6224 8.37652 16.6595 8.39316C16.6964 8.4098 16.7195 8.44791 16.7177 8.48897C16.6803 9.26998 16.3774 10.0773 15.8414 10.8245C15.3511 11.4998 14.695 12.069 13.9437 12.47C13.2369 12.8495 12.4464 13.0811 11.6511 13.1423C11.6203 13.1447 11.5893 13.1466 11.5587 13.1487C10.6677 13.1962 9.86294 13.0505 9.16741 12.7156C9.13083 12.6981 9.10847 12.6592 9.11162 12.6179C9.11504 12.5768 9.14268 12.5419 9.18162 12.5304Z' fill='%2311111B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9486 32.7207C13.7139 32.7481 13.5797 32.4526 13.5821 32.2312C13.5929 31.2145 13.8589 30.1761 14.3721 29.145C14.8597 28.1968 15.5568 27.3178 16.3915 26.5969C18.046 25.1855 20.2457 24.3725 22.4292 24.3639C24.6494 24.321 26.8692 25.1369 28.5071 26.584C30.2094 28.069 31.246 30.1783 31.2784 32.2245C31.2821 32.4585 31.1273 32.7602 30.8718 32.7138C30.661 32.6751 30.4892 32.3831 30.3344 32.2516C30.095 32.0487 29.8471 31.8565 29.5926 31.6735C29.0852 31.3082 28.5521 30.981 28.0042 30.6829C25.9839 29.5838 23.6929 28.9899 21.3981 29.1941C19.9373 29.3243 18.5186 29.772 17.2155 30.4518C16.4329 30.8603 15.6923 31.349 14.995 31.8936C14.7302 32.1 14.2955 32.6542 13.9694 32.7175C13.9623 32.7189 13.9555 32.7199 13.9486 32.7207Z' fill='%23654735'/%3E%3C/svg%3E");
}
.exit-modal__title {
  margin: 0 0 15px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--registry-text);
}
.exit-modal__subtitle {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: var(--registry-text-light);
}
.exit-modal__continue {
  width: 100%;
  margin-bottom: 14px;
}
.exit-modal__abandon {
  display: inline-block;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: var(--registry-accent);
  text-decoration: none;
}
.exit-modal__login-text {
  margin: 0;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
}
.exit-modal__login-text .link {
  color: var(--registry-accent);
}
.signup-check.error ~ .signup-field-hint,
.signup-checkbox-field .signup-field-hint {
  margin-top: 8px !important;
  padding-left: 32px;
}