/* ==========================================================
   BIE_BLACK_LABEL_REFERENCE_V2
   Visual contract: approved desktop reference
   AUTH PRESENTATION ONLY
   ========================================================== */

#auth.auth-screen:not(.hidden){
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;

  display:flex!important;

  width:100%!important;
  height:100dvh!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  background:#061014!important;
}


/* ==========================================================
   MAIN LAYOUT
   ========================================================== */

#auth .bie-auth-shell{
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-width:none!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) 500px!important;

  margin:0!important;

  background:
    linear-gradient(
      90deg,
      #071014 0%,
      #071014 68%,
      #081216 68%,
      #071014 100%
    )!important;

  overflow:hidden!important;
}


/* ==========================================================
   LEFT PRODUCT PANEL
   ========================================================== */

#auth .bie-auth-brandpanel{
  position:relative!important;

  min-width:0!important;
  min-height:0!important;

  display:flex!important;
  flex-direction:column!important;

  padding:42px 46px 28px!important;

  border:0!important;
  border-right:1px solid #17272e!important;

  background:
    radial-gradient(
      circle at 57% 46%,
      rgba(80,255,40,.045) 0,
      transparent 38%
    ),
    #071014!important;

  overflow:hidden!important;
}


/* subtle grid */

#auth .bie-auth-brandpanel::before{
  content:""!important;

  position:absolute!important;
  inset:0!important;

  pointer-events:none!important;

  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px)!important;

  background-size:64px 64px!important;

  opacity:.24!important;
}


/* ==========================================================
   BIE TOP
   ========================================================== */

#auth .bie-auth-brandtop{
  position:relative!important;
  z-index:20!important;

  flex:0 0 auto!important;
}

#auth .bie-auth-brandtop strong{
  color:#f5f7f7!important;
}

#auth .bie-auth-brandtop i{
  color:#68ff35!important;
}

#auth .bie-auth-brandtop > span{
  color:#71848d!important;

  font-size:8px!important;
  font-weight:850!important;

  letter-spacing:2px!important;
}


/* ==========================================================
   PRODUCT HERO
   ========================================================== */

#auth .bie-real-showcase{
  position:relative!important;
  z-index:10!important;

  flex:1 1 auto!important;

  min-width:0!important;
  min-height:0!important;

  display:grid!important;
  grid-template-columns:355px minmax(0,1fr)!important;

  align-items:center!important;

  gap:26px!important;

  padding:10px 0 6px!important;
}


/* ==========================================================
   LEFT COPY
   ========================================================== */

#auth .bie-real-copy{
  position:relative!important;
  z-index:20!important;

  align-self:center!important;
}

#auth .bie-real-copy > span{
  display:block!important;

  margin-bottom:20px!important;

  color:#73ff42!important;

  font-size:9px!important;
  font-weight:900!important;

  letter-spacing:2.2px!important;
}

#auth .bie-real-copy h1{
  max-width:355px!important;

  margin:0!important;

  color:#f3f6f7!important;

  font-size:46px!important;
  line-height:1.03!important;

  font-weight:780!important;

  letter-spacing:-2px!important;
}

#auth .bie-real-copy p{
  max-width:340px!important;

  margin:24px 0 0!important;

  color:#95a5ad!important;

  font-size:14px!important;
  line-height:1.65!important;
}


/* Feature lines like reference */

#auth .bie-real-copy::after{
  content:
    "▥   Datos en tiempo real\A     Mercados, probabilidades, contexto\A\A"
    "◎   Modelos propios\A     Predicciones y valor esperado\A\A"
    "↗   Cobertura multi-deporte\A     MLB, NFL y más en una sola plataforma"!important;

  display:block!important;

  margin-top:30px!important;

  color:#c8d2d6!important;

  white-space:pre-line!important;

  font-size:11px!important;
  line-height:1.55!important;
}


/* ==========================================================
   REAL SCREENSHOTS
   ========================================================== */

#auth .bie-real-shots{
  position:relative!important;

  width:100%!important;
  min-width:0!important;

  height:650px!important;
  min-height:650px!important;
}

#auth .bie-real-shot{
  position:absolute!important;

  margin:0!important;

  overflow:hidden!important;

  border:1px solid #2a404a!important;
  border-radius:20px!important;

  background:#071116!important;

  box-shadow:
    0 34px 80px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.015)!important;
}

#auth .bie-real-shot figcaption{
  height:34px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  padding:0 12px!important;

  border-bottom:1px solid #26363d!important;

  background:#091216!important;
}

#auth .bie-real-shot figcaption b{
  color:#cfd8db!important;

  font-size:8px!important;

  letter-spacing:1px!important;
}

#auth .bie-real-shot figcaption small{
  color:#61757e!important;

  font-size:7px!important;

  letter-spacing:1.2px!important;
}

#auth .bie-real-shot img{
  display:block!important;

  width:100%!important;
  height:auto!important;
  max-width:100%!important;

  object-fit:contain!important;

  pointer-events:none!important;
  user-select:none!important;
}


/* ==========================================================
   MLB FRONT
   ========================================================== */

#auth .bie-real-shot.mlb{
  width:405px!important;
  height:auto!important;

  left:5px!important;
  top:18px!important;
  bottom:auto!important;

  z-index:8!important;

  border-color:#38515a!important;

  transform:rotate(-.8deg)!important;
}

#auth .bie-real-shot.mlb img{
  width:100%!important;
  height:auto!important;

  margin:0!important;

  object-fit:contain!important;
  object-position:center top!important;
}


/* ==========================================================
   NFL BACK
   ========================================================== */

#auth .bie-real-shot.nfl{
  width:295px!important;

  right:2px!important;
  top:64px!important;

  z-index:4!important;

  opacity:.92!important;

  transform:rotate(1.2deg)!important;
}

#auth .bie-real-shot.nfl img{
  width:100%!important;
  height:auto!important;

  margin:0!important;
}


/* ==========================================================
   BOTTOM LEFT
   ========================================================== */

#auth .bie-auth-brandbottom{
  position:relative!important;
  z-index:20!important;

  flex:0 0 auto!important;
}

#auth .bie-auth-brandbottom > div{
  display:flex!important;

  gap:10px!important;
}

#auth .bie-auth-brandbottom span{
  padding:7px 12px!important;

  border:1px solid #2b414a!important;
  border-radius:7px!important;

  background:#081115!important;

  color:#93a3aa!important;

  font-size:8px!important;
  font-weight:850!important;

  letter-spacing:1.4px!important;
}

#auth .bie-auth-brandbottom small{
  display:block!important;

  margin-top:18px!important;

  color:#50626b!important;

  font-size:8px!important;

  letter-spacing:2px!important;
}


/* ==========================================================
   RIGHT AREA
   ========================================================== */

#auth .black-label-auth{
  position:relative!important;

  align-self:center!important;

  width:auto!important;
  min-width:0!important;

  min-height:620px!important;

  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;

  margin:76px 26px 48px!important;

  padding:50px 32px!important;

  border:1px solid #29404a!important;
  border-radius:20px!important;

  background:
    linear-gradient(
      150deg,
      rgba(14,25,30,.98),
      rgba(8,16,20,.98)
    )!important;

  box-shadow:
    0 34px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.02)!important;
}


/* SPORTS INTELLIGENCE above card */

#auth .black-label-auth::before{
  content:"SPORTS INTELLIGENCE\A MODELS  /  CONTEXT  /  REAL EDGE"!important;

  position:absolute!important;

  right:4px!important;
  top:-67px!important;

  color:#71858f!important;

  white-space:pre!important;

  text-align:right!important;

  font-size:7px!important;
  line-height:2!important;

  font-weight:800!important;

  letter-spacing:2.3px!important;
}


/* disciplined form width */

#auth .black-label-auth > *{
  width:100%!important;
  max-width:365px!important;

  margin-left:auto!important;
  margin-right:auto!important;
}


/* ==========================================================
   LOGIN HEADER
   ========================================================== */

#auth .bie-login-head{
  margin-bottom:31px!important;
}

#auth .bie-login-mobile-brand{
  display:none!important;
}


/* visually use reference kicker */

#auth .bie-login-head > span{
  display:block!important;

  margin-bottom:14px!important;

  color:#75ff45!important;

  font-size:0!important;

  font-weight:900!important;

  letter-spacing:2.1px!important;
}

#auth .bie-login-head > span::after{
  content:"BIENVENIDO A BIE"!important;

  font-size:8px!important;

  letter-spacing:2.1px!important;
}

#auth .bie-login-head h2{
  margin:0 0 11px!important;

  color:#f4f7f8!important;

  font-size:38px!important;
  line-height:1.04!important;

  font-weight:780!important;

  letter-spacing:-1.4px!important;
}

#auth .bie-login-head p{
  margin:0!important;

  color:#91a0a8!important;

  font-size:12px!important;
  line-height:1.6!important;
}


/* ==========================================================
   FORM
   ========================================================== */

#auth .black-auth-field{
  margin-bottom:21px!important;
}

#auth .black-auth-field label{
  display:block!important;

  margin:0 0 10px!important;

  color:#d4dcdf!important;

  font-size:10px!important;
  font-weight:650!important;

  text-transform:none!important;
}

#auth .black-auth-field > input,
#auth .black-password-wrap{
  width:100%!important;
  min-height:55px!important;

  border:1px solid #344b55!important;
  border-radius:9px!important;

  background:#0c171c!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.015)!important;
}

#auth .black-auth-field > input{
  display:block!important;

  padding:0 15px!important;

  outline:0!important;

  color:#edf2f4!important;
  -webkit-text-fill-color:#edf2f4!important;

  font-size:14px!important;
}

#auth .black-auth-field > input::placeholder,
#auth .black-password-wrap input::placeholder{
  color:#586970!important;
  -webkit-text-fill-color:#586970!important;

  opacity:1!important;
}

#auth .black-auth-field > input:focus,
#auth .black-password-wrap:focus-within{
  border-color:#65904e!important;

  box-shadow:
    0 0 0 2px rgba(106,255,54,.07)!important;
}


/* PASSWORD */

#auth .black-password-wrap{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 78px!important;

  overflow:hidden!important;
}

#auth .black-password-wrap input{
  width:100%!important;
  min-width:0!important;
  height:53px!important;

  padding:0 15px!important;

  border:0!important;
  outline:0!important;

  background:transparent!important;

  color:#edf2f4!important;
  -webkit-text-fill-color:#edf2f4!important;

  font-size:14px!important;
}

#auth .black-password-wrap button{
  height:53px!important;

  border:0!important;
  border-left:1px solid #273a42!important;

  background:#0d181d!important;

  color:#8a999f!important;

  font-size:8px!important;
  font-weight:850!important;

  letter-spacing:.8px!important;

  cursor:pointer!important;
}


/* ==========================================================
   OPTIONS
   ========================================================== */

#auth .black-auth-options{
  display:flex!important;
  align-items:center!important;

  margin:0 0 25px!important;
}

#auth .black-auth-options label{
  display:flex!important;
  align-items:center!important;

  gap:9px!important;

  margin:0!important;

  color:#a7b2b7!important;

  font-size:10px!important;

  cursor:pointer!important;
}

#auth .black-auth-options input{
  width:16px!important;
  height:16px!important;

  accent-color:#68ff36!important;
}


/* ==========================================================
   NEON LOGIN BUTTON
   ========================================================== */

#auth #authSubmit.black-auth-submit{
  width:100%!important;
  min-height:56px!important;

  margin:0!important;

  border:1px solid #75ff43!important;
  border-radius:10px!important;

  background:
    linear-gradient(
      100deg,
      #61ff31,
      #8cff4e
    )!important;

  color:#071006!important;

  box-shadow:
    0 8px 28px rgba(91,255,41,.18)!important;

  font-size:11px!important;
  font-weight:950!important;

  letter-spacing:.55px!important;

  cursor:pointer!important;

  transition:
    filter .15s ease,
    box-shadow .15s ease,
    transform .15s ease!important;
}

#auth #authSubmit.black-auth-submit:hover{
  filter:brightness(1.08)!important;

  box-shadow:
    0 10px 34px rgba(91,255,41,.27)!important;
}

#auth #authSubmit.black-auth-submit:active{
  transform:translateY(1px)!important;
}

#auth #authSubmit.black-auth-submit:disabled{
  opacity:.5!important;
}


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

#auth .black-auth-msg{
  min-height:18px!important;

  margin:13px 0 0!important;

  color:#ff7078!important;

  font-size:9px!important;
}

#auth .bie-login-footer{
  margin-top:26px!important;
  padding-top:18px!important;

  border-top:1px solid #22343c!important;

  color:#61737b!important;

  text-align:center!important;

  font-size:8px!important;
  line-height:1.6!important;

  letter-spacing:.5px!important;
}


/* ==========================================================
   AUTOFILL
   ========================================================== */

#auth input:-webkit-autofill,
#auth input:-webkit-autofill:hover,
#auth input:-webkit-autofill:focus,
#auth input:-webkit-autofill:active{
  -webkit-text-fill-color:#edf2f4!important;

  -webkit-box-shadow:
    0 0 0 1000px #0c171c inset!important;

  box-shadow:
    0 0 0 1000px #0c171c inset!important;

  caret-color:#edf2f4!important;
}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media(max-width:1250px) and (min-width:801px){

  #auth .bie-auth-shell{
    grid-template-columns:minmax(0,1fr) 420px!important;
  }

  #auth .bie-auth-brandpanel{
    padding-left:30px!important;
    padding-right:30px!important;
  }

  #auth .bie-real-showcase{
    grid-template-columns:300px minmax(0,1fr)!important;
  }

  #auth .bie-real-copy h1{
    font-size:38px!important;
  }

  #auth .bie-real-copy::after{
    font-size:10px!important;
  }

  #auth .bie-real-shot.mlb{
    width:330px!important;
  }

  #auth .bie-real-shot.nfl{
    width:245px!important;
  }

  #auth .black-label-auth{
    margin-left:20px!important;
    margin-right:20px!important;

    padding-left:26px!important;
    padding-right:26px!important;
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:800px){

  #auth.auth-screen:not(.hidden){
    overflow-y:auto!important;
  }

  #auth .bie-auth-shell{
    display:block!important;

    height:auto!important;
    min-height:100dvh!important;

    background:#071014!important;
  }

  #auth .bie-auth-brandpanel{
    display:none!important;
  }

  #auth .black-label-auth{
    width:auto!important;
    min-height:calc(100dvh - 32px)!important;

    margin:16px!important;

    padding:
      max(36px,env(safe-area-inset-top))
      24px
      max(30px,env(safe-area-inset-bottom))!important;

    border-radius:18px!important;
  }

  #auth .black-label-auth::before{
    display:none!important;
  }

  #auth .black-label-auth > *{
    max-width:390px!important;
  }

  #auth .bie-login-mobile-brand{
    display:flex!important;
    align-items:center!important;

    gap:8px!important;

    margin-bottom:35px!important;
  }

  #auth .bie-login-mobile-brand strong{
    color:#f4f7f8!important;

    font-size:36px!important;
    line-height:1!important;

    font-weight:950!important;

    letter-spacing:-2px!important;
  }

  #auth .bie-login-mobile-brand i{
    color:#68ff36!important;

    font-size:18px!important;

    font-style:normal!important;
  }

  #auth .bie-login-head h2{
    font-size:32px!important;
  }
}


/* ==========================================================
   SHORT DESKTOP
   ========================================================== */

@media(max-height:760px) and (min-width:801px){

  #auth .bie-auth-brandpanel{
    padding-top:24px!important;
    padding-bottom:18px!important;
  }

  #auth .bie-real-shots{
    height:560px!important;
    min-height:560px!important;
  }

  #auth .bie-real-shot.mlb{
    width:345px!important;
  }

  #auth .bie-real-shot.nfl{
    width:255px!important;
  }

  #auth .black-label-auth{
    min-height:540px!important;

    margin-top:58px!important;
    margin-bottom:28px!important;

    padding-top:32px!important;
    padding-bottom:32px!important;
  }

  #auth .bie-login-head{
    margin-bottom:22px!important;
  }

  #auth .black-auth-field{
    margin-bottom:15px!important;
  }

  #auth .black-auth-options{
    margin-bottom:17px!important;
  }
}