.safety-illustration {
  position: absolute;
  z-index: 1;
  right: -43px;
  bottom: -62px;
  width: 382px;
  height: auto;
  pointer-events: none;
}

/* Acerca la recuperación de clave al botón de acceso. */
.help-links { margin-top: 54px; }

.login-error {
  margin: 12px 0 -20px;
  text-align: center;
  color: #bd251c;
  font-size: 13px;
}

/* Detalles fieles al formulario de referencia. */
.view h1, input, .primary, .text-button, .help-links a {
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
}

#login-view h1,
#verify-view h1 {
  width: 145px;
  margin: 0 auto 43px;
  padding-top: 9px;
  border-top: 1px solid #fb100b;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  white-space: nowrap;
}

.logo-placeholder {
  width: 120px;
  height: 40px;
  display: grid;
  place-content: center;
  gap: 3px;
  border: 1px dashed #c5d0d7;
  border-radius: 4px;
  color: #7b8c98;
  text-align: center;
  font: 9px Roboto, Arial, sans-serif;
  letter-spacing: .4px;
}
.logo-placeholder strong { color: #607785; font-size: 10px; letter-spacing: .7px; }

/* Reemplaza assets/logo.svg con tu logo final, sin cambiar el HTML. */
.brand-logo {
  display: block;
  width: min(180px, 100%);
  height: 60px;
  object-fit: contain;
}

/* Transición breve mientras el servidor registra el inicio de la solicitud. */
.loading-view {
  min-height: 298px;
  display: none;
  place-items: center;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.loading-view.active { display: grid; }
.loading-spinner {
  width: 46px;
  height: 46px;
  margin-bottom: 21px;
  border: 3px solid #f4d6d6;
  border-top-color: #e10e16;
  border-radius: 50%;
  animation: verification-spin .72s linear infinite;
}
.loading-view h1 {
  width: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  color: #e10e16 !important;
  font: 300 27px/1.15 "Open Sans", Arial, sans-serif !important;
}
.loading-view p { margin: 0; color: #60758a; font: 14px/1.45 Roboto, Arial, sans-serif; }
@keyframes verification-spin { to { transform: rotate(360deg); } }

.verify-intro { margin: -25px 0 20px; color: #46637c; font: 13px/1.5 Roboto, Arial, sans-serif; }
.verify-intro strong { display: block; margin-bottom: 5px; color: #263c59; font: 500 14px Roboto, Arial, sans-serif; }
.verify-intro p { margin: 0 0 8px; }
.verify-intro b { color: #263c59; font-weight: 500; }
.verification-steps { display: grid; gap: 9px; margin-bottom: 13px; }
.verification-step { min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #d7e0e4; border-radius: 5px; background: #fbfdfe; cursor: pointer; }
.verification-step:hover { border-color: #79b8ca; background: #f6fbfd; }
.step-number { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 25px; border: 1px solid #78b7ca; border-radius: 50%; color: #087fa1; font: 13px Roboto, Arial, sans-serif; }
.step-copy { display: grid; gap: 3px; flex: 1; }
.step-copy strong { color: #263c59; font: 14px Roboto, Arial, sans-serif; }
.step-copy small { color: #71849a; font: 11px Roboto, Arial, sans-serif; }
.step-state { color: #087fa1; font: 12px Roboto, Arial, sans-serif; }
.verification-step.is-complete { border-color: #8bcdb9; background: #f2fbf7; }
.verification-step.is-complete .step-number { border-color: #2e9d77; background: #2e9d77; color: #fff; }
.verification-step.is-complete .step-state { color: #21865f; }
.verification-note { margin: 0 0 12px; color: #71849a; font: 11px/1.4 Roboto, Arial, sans-serif; }
.verification-progress { display: flex; justify-content: space-between; gap: 5px; margin: 0 0 19px; }
.verification-progress span { flex: 1; display: flex; align-items: center; gap: 5px; color: #8a99a7; font: 10px Roboto, Arial, sans-serif; }
.verification-progress b { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #c7d3d9; border-radius: 50%; font: 10px Roboto, Arial, sans-serif; }
.verification-progress .is-current, .verification-progress .is-complete { color: #087fa1; }
.verification-progress .is-current b, .verification-progress .is-complete b { border-color: #087fa1; background: #087fa1; color: white; }
.verification-panel { display: none; }
.verification-panel.is-active { display: block; }
.verification-panel h2 { margin: 0 0 7px; color: #243a59; font: 400 18px "Open Sans", Arial, sans-serif; }
.verification-panel > p:not(.step-heading) { margin: 0 0 16px; color: #61758a; font: 13px/1.45 Roboto, Arial, sans-serif; }
.step-heading { margin: 0 0 4px; color: #087fa1; font: 11px Roboto, Arial, sans-serif; }
.upload-card { min-height: 110px; display: grid; place-content: center; justify-items: center; gap: 5px; border: 1px dashed #8ec2d1; border-radius: 6px; background: #f9fdfe; color: #607488; cursor: pointer; text-align: center; }
.upload-card strong { color: #28445f; font: 14px Roboto, Arial, sans-serif; }
.upload-card small { font: 11px Roboto, Arial, sans-serif; }
.upload-symbol { color: #087fa1; font-size: 23px; line-height: 20px; }
.upload-card.is-selected { border-color: #70bfa7; background: #f2fbf7; }
.upload-card.is-selected .upload-symbol { color: #21865f; }
.verification-panel .primary { width: 100%; margin-top: 15px; }

/* Acentos de marca para el flujo de identidad. */
#verify-view .verification-progress .is-current,
#verify-view .verification-progress .is-complete { color: #e10e16; }
#verify-view .verification-progress .is-current b,
#verify-view .verification-progress .is-complete b { border-color: #e10e16; background: #e10e16; }
#verify-view .step-heading { color: #e10e16; }
#verify-view .verification-panel h2 { color: #e10e16; }
#verify-view .verification-panel.is-active .upload-card { border-color: #e98a8f; background: #fffafa; }
#verify-view .upload-symbol { color: #e10e16; }
#verify-view .verification-panel .primary { background: #e10e16; color: white; }
#verify-view .verification-panel .primary:hover { background: #bd080f; }

/* Composición editorial para el flujo de verificación. */
#verify-view { padding-top: 2px; }
#verify-view .verification-header { text-align: center; }
#verify-view h1 {
  width: auto;
  display: inline-block;
  margin: 0 auto 18px;
  padding: 10px 10px 0;
  border-top-color: #fb100b;
  color: #ed1010;
  font-family: Roboto, Arial, sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.18;
}
#verify-view .verify-intro {
  max-width: 408px;
  margin: 0 auto 28px;
  color: #47607b;
  font: 400 16px/1.45 Roboto, Arial, sans-serif;
}
#verify-view .verify-intro strong {
  margin-bottom: 6px;
  color: #263c59;
  font: 500 15px Roboto, Arial, sans-serif;
}
#verify-view .verify-intro p { margin: 0 0 3px; }
#verify-view .verify-intro span { color: #47607b; }
#verify-view .verification-progress {
  position: relative;
  max-width: 376px;
  margin: 0 auto 24px;
  padding: 0 10px;
  gap: 0;
}
#verify-view .verification-progress::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 51px;
  right: 51px;
  height: 1px;
  background: #e2e8ec;
}
#verify-view .verification-progress span {
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 6px;
  color: #8393a1;
  font: 11px Roboto, Arial, sans-serif;
  text-align: center;
}
#verify-view .verification-progress b {
  width: 29px;
  height: 29px;
  border-color: #cad6dc;
  background: #fff;
  font-size: 11px;
}
#verify-view .verification-progress .is-current,
#verify-view .verification-progress .is-complete { color: #e10e16; }
#verify-view .verification-progress .is-current b,
#verify-view .verification-progress .is-complete b {
  border-color: #e10e16;
  background: #e10e16;
  box-shadow: 0 0 0 4px #fff1f1;
}
#verify-view .verification-panel {
  max-width: 440px;
  margin: 0 auto;
  padding: 19px 20px 20px;
  border: 1px solid #edf0f2;
  border-top: 3px solid #e10e16;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 5px 17px rgba(36, 58, 89, .055);
  text-align: center;
}
#verify-view .step-heading { margin-bottom: 6px; font-size: 11px; }
#verify-view .verification-panel h2 {
  margin-bottom: 7px;
  font: 300 23px/1.18 Roboto, Arial, sans-serif;
}
#verify-view .verification-panel > p:not(.step-heading) {
  max-width: 330px;
  margin: 0 auto 18px;
  font-size: 13px;
}
#verify-view .verification-panel.is-active .upload-card {
  min-height: 142px;
  border-color: #ed9da1;
  border-radius: 5px;
  background: linear-gradient(135deg, #fffafa, #fff);
}
#verify-view .upload-symbol {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0f0;
  color: #e10e16;
  font: 300 28px/34px Roboto, Arial, sans-serif;
}
#verify-view .upload-card strong { color: #273f5c; }
#verify-view .upload-card small { color: #718296; }
#verify-view .upload-card.has-preview {
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto auto;
  min-height: 188px;
  padding: 9px;
  gap: 4px;
}
#verify-view .upload-card.has-preview .upload-symbol { display: none; }
#verify-view .upload-card.has-preview strong { grid-row: 2; }
#verify-view .upload-card.has-preview small { grid-row: 3; }
#verify-view .upload-preview {
  grid-row: 1;
  width: 100%;
  height: 108px;
  object-fit: contain;
  border-radius: 3px;
}
#verify-view .verification-panel .primary { margin-top: 17px; }
#verify-view .notice { margin: 14px auto 19px; max-width: 440px; text-align: center; }

input {
  border-bottom-color: #8cc8d9;
}

.help-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.lock-icon {
  width: 14px;
  height: 12px;
  border: 1.5px solid #0085a6;
  border-radius: 2px;
  position: relative;
  display: inline-block;
}

.lock-icon::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 8px;
  border: 1.5px solid #0085a6;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  left: 2px;
  top: -8px;
}

.lock-icon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: #0085a6;
  left: 5px;
  top: 3px;
}

.lock-icon { display: none; }

.lock-image {
  width: 25px;
  height: 30px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  flex: 0 0 25px;
}

.lock-image img {
  position: absolute;
  width: 64px;
  height: 42px;
  max-width: none;
  left: -23px;
  top: -4px;
}

.password-field { position: relative; }
.password-field .field-label { display: none; }
.rut-field { position: relative; }
.rut-field .field-label { display: none; }
.password-field.has-value .field-label,
.rut-field.has-value .field-label,
.password-field.has-error .field-label,
.rut-field.has-error .field-label {
  display: block;
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 11px;
  color: #e10e16;
  font: 12px Roboto, Arial, sans-serif;
}
.password-field.has-value .field-label,
.rut-field.has-value .field-label { color: #405d7b; }
.password-field.has-error .field-label,
.rut-field.has-error .field-label { color: #e10e16; }
.password-field.has-value input,
.rut-field.has-value input { padding-top: 15px; }
.password-field.has-error input { border-color: #d0d0d0; border-bottom-color: #e10e16; }
.rut-field.has-error input { border-color: #d0d0d0; border-bottom-color: #e10e16; }
.password-field.has-error input::placeholder { color: #334d70; }
.password-error { display: block; margin: 5px 0 0 12px; color: #e10e16; font: 11px Roboto, Arial, sans-serif; }
.password-error[hidden] { display: none; }
.rut-error { display: block; margin: 5px 0 0 12px; color: #e10e16; font: 11px Roboto, Arial, sans-serif; }
.rut-error[hidden] { display: none; }

/* El acceso se habilita solo cuando RUT e ID cumplen el formato. */
#login-form .primary.is-ready { background: #e10e16; color: #fff; }
#login-form .primary.is-ready:hover { background: #bd080f; }
#login-form { width: 100%; max-width: 328px; margin-left: auto; margin-right: auto; }
#login-form input:-webkit-autofill,
#login-form input:-webkit-autofill:hover,
#login-form input:-webkit-autofill:focus { -webkit-text-fill-color: #4b6a8d; -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset; transition: background-color 9999s ease-out 0s; }
.clear-password, .clear-rut { position: absolute; z-index: 3; right: 12px; top: 15px; width: 18px; height: 18px; border: 0; border-radius: 50%; padding: 0; background: #c9ced2; color: #fff; font: 700 17px/16px Arial; cursor: pointer; }
.clear-password { right: 47px; top: 11px; }
.toggle-password { right: 8px; top: 8px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; }
.eye-icon { width: 17px; height: 11px; display: block; position: relative; margin: auto; border: 1.5px solid #8b98a3; border-radius: 55% 45%; }
.eye-icon::before { content: ""; position: absolute; width: 4px; height: 4px; border: 1.5px solid #8b98a3; border-radius: 50%; left: 5px; top: 2px; }
.eye-icon::after { content: ""; position: absolute; height: 1.5px; width: 22px; background: #8b98a3; transform: rotate(-28deg); left: -4px; top: 4px; }

@media (max-width: 540px) {
  .safety-illustration { right: -66px; width: 366px; }
}