/* ============================================================
   banca-virtual — login frame (documento interno del iframe)
   Todo scopeado bajo body.x-login
   ============================================================ */

body.x-login {
  margin: 0;
  background: var(--c-card-bg);
  font-family: var(--font-verdana);
  font-size: 12px;
  color: #000;
}

body.x-login *,
body.x-login *::before,
body.x-login *::after {
  box-sizing: border-box;
}

body.x-login .x-login-form {
  width: 294.23px;
  margin: 0 auto;
  padding-top: 42px;
}

/* ---------- Tabs PERSONAS / EMPRESAS ---------- */
body.x-login .x-tabs {
  display: flex;
  width: 100%;
}

body.x-login .x-tab-cell {
  width: 50%;
  text-align: center;
}

body.x-login .x-tab {
  border: 0;
  background: var(--c-tab-bg);
  padding: 1px 6px;
  cursor: default;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}

body.x-login .x-tab-personas { font-family: var(--font-verdana); }
body.x-login .x-tab-empresas { font-family: var(--font-arial); }

body.x-login .x-tab.is-active {
  color: var(--c-green-tab);
  text-decoration: underline;
}

body.x-login .x-tab:not(.is-active) {
  color: var(--c-blue);
  text-decoration: none;
}

/* ---------- Campos ---------- */
body.x-login .x-label {
  font-family: var(--font-verdana);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text-dark);
}

body.x-login .x-input {
  display: inline-block;
  width: 100%;
  background: transparent;
  border: 1px solid var(--c-input-border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  margin: 5px 0 20px;
  font-family: var(--font-arial);
  font-size: 13.3333px;
  color: #000;
}

/* ---------- Botón Ingresar ---------- */
body.x-login .x-ingreso {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 17px;
  background: var(--c-green-btn);
  color: var(--c-white);
  border: 0;
  border-radius: var(--radius-pill);
  height: 35px;
  padding: 4px 20px;
  font-family: var(--font-verdana);
  font-size: 14px;
  font-weight: 400;
  cursor: default;
  transition: 0.3s ease-in-out;
}

body.x-login .x-ingreso:hover {
  background: var(--c-blue);
  padding: 4px 28px;
  font-weight: 600;
}

/* Estado deshabilitado (hasta completar PIN/Token): mismo aspecto que
   habilitado (el original no atenúa el botón); solo se anula el hover. */
body.x-login .x-ingreso:disabled:hover {
  background: var(--c-green-btn);
  padding: 4px 20px;
  font-weight: 400;
}

/* ---------- Fila "¿Aún no tiene cuenta?" ---------- */
body.x-login .x-cuenta {
  font-family: var(--font-verdana);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-gray-cuenta);
  text-align: left;
  margin: 27px 0 0;
}

body.x-login .x-linkblue a,
body.x-login .x-linkblue b {
  color: var(--c-blue);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- Líneas de enlaces con icono ---------- */
body.x-login .x-line {
  margin: 0;
  text-align: left;
  line-height: 1.2;
}

/* Los iconos se alinean por baseline (borde inferior sobre la línea base):
   es la única geometría que reproduce las posiciones medidas del original
   (icono y≈357 + link y≈363 / icono y≈390 + link y≈396). */
body.x-login .x-icon {
  vertical-align: baseline;
}

body.x-login .x-icon-bloqueo { margin-top: 20px; }
body.x-login .x-icon-clave   { margin-top: 10px; }

body.x-login .x-txtlinks a {
  font-family: var(--font-verdana);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-gray-link);
  text-decoration: none;
  cursor: pointer;
}

body.x-login .x-cambio a {
  margin-left: 4px;
}