@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --navy:#043259;

  --orange:#FD4300;

  --orange-soft:#FFF1EB;

  --gray-500:#768695;

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing:border-box;
}


html,
body {

  margin:0;

  min-height:100%;

}


body.orionis-login-page {

  min-height:100vh;

  background:

    radial-gradient(
      circle at 92% 7%,
      rgba(253,67,0,.035),
      transparent 24%
    ),

    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F8FAFC 100%
    );

  color:var(--navy);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


/* =========================================================
   PAGINA
   ========================================================= */

.login-main {

  min-height:100vh;

  display:flex;

  justify-content:center;

  padding:
    18px 20px 16px;

}


.login-shell {

  width:100%;

  max-width:760px;

  margin:0 auto;

  text-align:center;

}


/* =========================================================
   LOGO
   ========================================================= */

.login-logo {

  display:block;

  width:135px;

  height:auto;

  margin:
    0 auto 9px;

  object-fit:contain;

}


/* =========================================================
   BADGE
   ========================================================= */

.login-badge {

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:8px;

  margin-bottom:9px;

  padding:
    7px 13px;

  background:var(--orange-soft);

  color:var(--orange);

  border:
    1px solid
    rgba(253,67,0,.15);

  border-radius:999px;

  font-size:8px;

  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;

}


.login-badge span {

  width:6px;
  height:6px;

  background:var(--orange);

  border-radius:50%;

}


/* =========================================================
   TITULO
   ========================================================= */

.login-title {

  margin:0;

  color:var(--navy);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  font-size:
    clamp(
      37px,
      4vw,
      46px
    );

  font-weight:800;

  line-height:1;

  letter-spacing:-.05em;

}


.login-title span {

  display:block;

}


.login-title::after {

  content:"";

  display:block;

  width:40px;
  height:3px;

  margin:
    10px auto 0;

  background:var(--orange);

  border-radius:999px;

}


.login-description {

  max-width:550px;

  margin:
    9px auto 12px;

  color:var(--gray-500);

  font-size:10px;

  line-height:1.55;

}


/* =========================================================
   LOGIN CATALYST
   ========================================================= */

/*
   El iframe conserva 620px internamente.

   Nosotros mostramos solamente la zona útil.
   Así evitamos:
   - scrollbar interna
   - enorme espacio blanco debajo
*/

.login-auth {

  width:100%;

  max-width:560px;

  height:410px;

  margin:0 auto;

  overflow:hidden;

  background:#FFFFFF;

}


#loginDivElementId {

  width:100%;

  height:620px;

  min-height:620px;

  overflow:hidden;

  background:#FFFFFF;

}


#loginDivElementId iframe {

  display:block;

  width:100% !important;

  height:620px !important;

  min-height:620px !important;

  margin:0 auto !important;

  padding:0 !important;

  border:0 !important;

  background:#FFFFFF !important;

}


/* =========================================================
   AYUDA
   ========================================================= */

.login-help {

  margin:
    8px auto 0;

  color:#8795A1;

  font-size:8px;

  line-height:1.5;

}


.login-help span {

  margin-right:3px;

}


.login-help strong {

  color:var(--navy);

  font-weight:700;

}


/* =========================================================
   FOOTER
   ========================================================= */

.login-footer {

  display:flex;

  align-items:center;
  justify-content:center;

  gap:17px;

  margin-top:8px;

  color:#909CA6;

  font-size:7px;

}


.login-secure {

  display:inline-flex;

  align-items:center;

  gap:5px;

}


.login-secure svg {

  width:10px;
  height:10px;

  fill:none;

  stroke:currentColor;

  stroke-width:1.8;

  stroke-linecap:round;
  stroke-linejoin:round;

}


/* =========================================================
   PANTALLAS BAJAS
   ========================================================= */

@media(max-height:850px) and (min-width:651px) {

  .login-main {

    padding:
      10px 20px;

  }


  .login-logo {

    width:115px;

    margin-bottom:6px;

  }


  .login-badge {

    margin-bottom:6px;

  }


  .login-title {

    font-size:38px;

  }


  .login-title::after {

    margin-top:7px;

  }


  .login-description {

    margin:
      6px auto 8px;

  }


  .login-auth {

    height:390px;

  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:650px) {

  .login-main {

    padding:
      18px 12px;

  }


  .login-logo {

    width:130px;

  }


  .login-title {

    font-size:36px;

  }


  .login-auth {

    max-width:540px;

    height:445px;

  }

}


/* =========================================================
   MOVIL
   ========================================================= */

@media(max-width:480px) {

  .login-main {

    padding:
      16px 8px;

  }


  .login-logo {

    width:120px;

  }


  .login-badge {

    font-size:7px;

  }


  .login-title {

    font-size:30px;

  }


  .login-description {

    max-width:340px;

    font-size:9px;

  }


  .login-auth {

    height:500px;

  }


  #loginDivElementId,
  #loginDivElementId iframe {

    height:650px !important;

    min-height:650px !important;

  }


  .login-help span,
  .login-help strong {

    display:block;

  }


  .login-footer {

    flex-direction:column;

    gap:4px;

  }

}
/* Acceso interno opcional; no concede permisos por sí mismo. */
.login-staff-access {
  margin: 16px auto 4px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #798b9a;
  font-size: 11px;
}
.login-staff-access a {
  color: #043259;
  font-weight: 800;
  text-decoration: none;
}
.login-staff-access a:hover {
  color: #fd4300;
  text-decoration: underline;
}


/* REGISTRO DE COMPRADORES: formulario independiente del iframe Catalyst */
.login-auth[hidden], .login-signup-choice[hidden], .signup-panel[hidden] {
  display: none !important;
}
.login-signup-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #687a89;
  margin: 6px auto 3px;
}
.login-signup-choice button,
.signup-back {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--orange);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.login-signup-choice button:hover,
.signup-back:hover {
  text-decoration: underline;
}
.signup-panel {
  width: 100%;
  max-width: 560px;
  margin: 14px auto 0;
  padding: 24px 34px;
  background: #fff;
  border: 1px solid #e6edf1;
  border-radius: 12px;
  text-align: left;
}
.signup-panel h2 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 8px;
}
.signup-intro, .signup-note {
  color: #687a89;
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.signup-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 15px;
}
.signup-field label {
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.signup-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cad5df;
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.signup-field input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.signup-submit {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 13px;
  background: var(--orange);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.signup-submit:disabled {
  opacity: .65;
  cursor: wait;
}
.signup-note {
  margin: 3px 0 15px;
}
.signup-status {
  padding: 11px;
  background: #edf7f0;
  border-radius: 7px;
  color: #166534;
  line-height: 1.5;
  font-size: 12px;
}
.signup-status[data-kind="error"] {
  background: #fff0ec;
  color: #aa2e12;
}
.signup-back {
  display: block;
  margin: 13px auto 0;
}
@media (max-width: 480px) {
  .signup-panel {
    padding: 20px 18px;
  }
}