/* BUKLIO · account-created confirmation v3
   Final approved success screen after email signup. */
#authOverlay.buklio-success-screen{
  --buklio-success-green:#0F3D2E;
  --buklio-success-green-2:#087057;
  --buklio-success-muted:#607781;
  --buklio-success-cream:#F6F3ED;
}

/* The success screen belongs to the same light onboarding family regardless
   of the signed-in app theme. */
#authOverlay.buklio-success-screen,
html[data-theme="dark"] #authOverlay.auth-gate-overlay.buklio-success-screen{
  background:
    radial-gradient(circle at 14% 8%,rgba(201,155,100,.10),transparent 30%),
    linear-gradient(180deg,#F2EEE7 0%,#F6F3ED 34%,#FAF8F4 68%,#FFFFFF 100%)!important;
}

#authOverlay.buklio-success-screen .sheet,
#authOverlay.buklio-success-screen .sheet-body,
html[data-theme="dark"] #authOverlay.buklio-success-screen .sheet,
html[data-theme="dark"] #authOverlay.buklio-success-screen .sheet-body{
  background:transparent!important;
}

#authOverlay.buklio-success-screen #signupSuccessPane{
  position:relative!important;
  width:100%!important;
  min-height:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  color:#33444b!important;
}

/* Transparent official BUKLIO mark: no white tile behind it. */
#authOverlay.buklio-success-screen #signupSuccessPane::before{
  content:"";
  display:block;
  width:min(47vw,230px);
  height:64px;
  margin:0 auto 12px;
  background:transparent url('buklio/onboarding-logo.png') center/contain no-repeat;
  flex:0 0 auto;
}

#authOverlay.buklio-success-screen .signup-success-visual{
  position:relative!important;
  width:min(365px,82vw)!important;
  height:min(365px,39dvh)!important;
  min-height:250px!important;
  margin:0 auto 10px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  isolation:isolate!important;
}
#authOverlay.buklio-success-screen .signup-success-visual::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(78vw,350px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(252,237,211,.94) 0 56%,rgba(252,237,211,.42) 70%,transparent 71%);
  transform:translate(-50%,-50%);
  z-index:-3;
}
/* Same ochre orbit used around the onboarding crow. */
#authOverlay.buklio-success-screen .signup-success-visual::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(82vw,365px);
  aspect-ratio:1;
  border:1.5px solid rgba(201,155,100,.62);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-11deg);
  z-index:-1;
}

#authOverlay.buklio-success-screen .signup-success-raven{
  width:min(325px,76vw)!important;
  height:min(305px,36dvh)!important;
  max-width:none!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  z-index:2!important;
}
#authOverlay.buklio-success-screen .signup-success-raven img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  filter:drop-shadow(0 15px 20px rgba(15,61,46,.09))!important;
}

/* Sent mail with confirmation check, positioned like the approved mockup. */
#authOverlay.buklio-success-screen .signup-success-mail{
  display:block!important;
  position:absolute!important;
  right:2%!important;
  top:4%!important;
  width:76px!important;
  height:62px!important;
  color:var(--buklio-success-green)!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:4!important;
  transform-origin:center!important;
  will-change:transform;
  animation:buklioSuccessMailFloat 3.8s ease-in-out infinite!important;
}
#authOverlay.buklio-success-screen .signup-success-mail svg{width:100%!important;height:100%!important;overflow:visible!important}

@keyframes buklioSuccessMailFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.6deg)}
  50%{transform:translate3d(0,-6px,0) rotate(.8deg)}
}

/* Each confetti piece drifts independently for a light celebratory motion. */
#authOverlay.buklio-success-screen .buklio-confetti{
  will-change:transform;
  animation:buklioConfettiFloat var(--confetti-duration,5s) ease-in-out infinite!important;
  animation-delay:var(--confetti-delay,0s)!important;
  transform-origin:center;
}
#authOverlay.buklio-success-screen .buklio-confetti.c1{--confetti-rot:-34deg;--confetti-x:4px;--confetti-y:-7px;--confetti-duration:5.2s;--confetti-delay:-1.1s}
#authOverlay.buklio-success-screen .buklio-confetti.c2{--confetti-rot:38deg;--confetti-x:-5px;--confetti-y:-9px;--confetti-duration:4.7s;--confetti-delay:-2.3s}
#authOverlay.buklio-success-screen .buklio-confetti.c3{--confetti-rot:26deg;--confetti-x:6px;--confetti-y:-6px;--confetti-duration:5.8s;--confetti-delay:-.6s}
#authOverlay.buklio-success-screen .buklio-confetti.c4{--confetti-rot:-27deg;--confetti-x:-4px;--confetti-y:-8px;--confetti-duration:4.9s;--confetti-delay:-3.0s}
#authOverlay.buklio-success-screen .buklio-confetti.c5{--confetti-rot:28deg;--confetti-x:5px;--confetti-y:-6px;--confetti-duration:5.5s;--confetti-delay:-1.8s}
#authOverlay.buklio-success-screen .buklio-confetti.c6{--confetti-rot:48deg;--confetti-x:-6px;--confetti-y:-7px;--confetti-duration:5.1s;--confetti-delay:-2.7s}
@keyframes buklioConfettiFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--confetti-rot,0deg))}
  45%{transform:translate3d(var(--confetti-x,4px),var(--confetti-y,-7px),0) rotate(calc(var(--confetti-rot,0deg) + 5deg))}
  72%{transform:translate3d(calc(var(--confetti-x,4px) * -.35),calc(var(--confetti-y,-7px) * .45),0) rotate(calc(var(--confetti-rot,0deg) - 3deg))}
}

#authOverlay.buklio-success-screen #signupSuccessTitle{
  margin:0!important;
  color:var(--buklio-success-green)!important;
  font:700 clamp(34px,8vw,46px)/1.08 Poppins,system-ui,sans-serif!important;
  letter-spacing:-.04em!important;
}

/* The recovered shell contains older copy. Hide that text visually and render
   the final approved wording without fighting the functional mutation hooks. */
#authOverlay.buklio-success-screen #signupSuccessCopy{
  max-width:430px!important;
  margin:17px auto 0!important;
  font-size:0!important;
  line-height:0!important;
  color:var(--buklio-success-muted)!important;
}
#authOverlay.buklio-success-screen #signupSuccessCopy::before{
  content:"Te enviamos un correo de verificación.\A Revisa tu correo y confirma tu dirección\A para comenzar a usar Buklio.";
  white-space:pre-line;
  display:block;
  color:var(--buklio-success-muted)!important;
  font:400 16px/1.48 Poppins,system-ui,sans-serif!important;
}

#authOverlay.buklio-success-screen .buklio-success-note{
  max-width:380px!important;
  margin:22px auto 0!important;
  color:#697d85!important;
  font:400 13px/1.48 Poppins,system-ui,sans-serif!important;
}

/* We intentionally do not guess the user's mail provider. */
#authOverlay.buklio-success-screen #openInboxBtn{
  display:none!important;
}
#authOverlay.buklio-success-screen .signup-success-actions{
  width:100%!important;
  max-width:440px!important;
  display:block!important;
  margin:30px auto 0!important;
}
#authOverlay.buklio-success-screen #signupGoLoginBtn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:60px!important;
  border:0!important;
  border-radius:999px!important;
  padding:0 58px 0 28px!important;
  color:#fff!important;
  background:linear-gradient(100deg,#0b4b38 0%,#087057 100%)!important;
  box-shadow:0 9px 20px rgba(15,61,46,.16)!important;
  font:600 17px/1 Poppins,system-ui,sans-serif!important;
}
#authOverlay.buklio-success-screen #signupGoLoginBtn::after{
  content:"";
  position:absolute;
  right:26px;
  top:50%;
  width:11px;
  height:11px;
  border-top:2.4px solid currentColor;
  border-right:2.4px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  border-radius:1px;
}
#authOverlay.buklio-success-screen #signupGoLoginBtn:active{transform:scale(.985)}

@media (max-width:620px){
  #authOverlay.buklio-success-screen .sheet-body{
    min-height:100dvh!important;
    padding:calc(14px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom))!important;
    overflow:auto!important;
  }
  #authOverlay.buklio-success-screen #signupSuccessPane{
    justify-content:flex-start!important;
    padding-top:2px!important;
  }
  #authOverlay.buklio-success-screen #signupSuccessPane::before{
    width:min(48vw,220px)!important;
    height:58px!important;
    margin-bottom:8px!important;
  }
  #authOverlay.buklio-success-screen .signup-success-visual{
    width:min(365px,88vw)!important;
    height:min(365px,38dvh)!important;
    min-height:255px!important;
    margin-bottom:8px!important;
  }
  #authOverlay.buklio-success-screen .signup-success-raven{
    width:min(330px,80vw)!important;
    height:min(320px,36dvh)!important;
  }
  #authOverlay.buklio-success-screen .signup-success-mail{
    right:3%!important;
    top:3%!important;
    width:70px!important;
    height:57px!important;
  }
  #authOverlay.buklio-success-screen #signupSuccessTitle{
    font-size:clamp(34px,9vw,42px)!important;
  }
  #authOverlay.buklio-success-screen #signupSuccessCopy::before{
    font-size:15px!important;
    line-height:1.48!important;
  }
  #authOverlay.buklio-success-screen .buklio-success-note{
    margin-top:19px!important;
    font-size:12px!important;
    max-width:330px!important;
  }
  #authOverlay.buklio-success-screen .signup-success-actions{
    margin-top:25px!important;
    max-width:430px!important;
  }
  #authOverlay.buklio-success-screen #signupGoLoginBtn{
    min-height:59px!important;
    font-size:17px!important;
  }
}

@media (max-width:380px),(max-height:760px){
  #authOverlay.buklio-success-screen #signupSuccessPane::before{
    height:48px!important;
    margin-bottom:3px!important;
  }
  #authOverlay.buklio-success-screen .signup-success-visual{
    width:min(315px,84vw)!important;
    height:min(315px,31dvh)!important;
    min-height:195px!important;
    margin-bottom:3px!important;
  }
  #authOverlay.buklio-success-screen .signup-success-raven{
    width:min(250px,72vw)!important;
    height:min(235px,30dvh)!important;
  }
  #authOverlay.buklio-success-screen .signup-success-mail{
    width:58px!important;
    height:48px!important;
  }
  #authOverlay.buklio-success-screen #signupSuccessTitle{font-size:32px!important}
  #authOverlay.buklio-success-screen #signupSuccessCopy{margin-top:11px!important}
  #authOverlay.buklio-success-screen #signupSuccessCopy::before{font-size:13px!important}
  #authOverlay.buklio-success-screen .buklio-success-note{margin-top:13px!important;font-size:11px!important}
  #authOverlay.buklio-success-screen .signup-success-actions{margin-top:17px!important}
  #authOverlay.buklio-success-screen #signupGoLoginBtn{min-height:54px!important;font-size:15px!important}
}

@media (prefers-reduced-motion:reduce){
  #authOverlay.buklio-success-screen .signup-success-mail,
  #authOverlay.buklio-success-screen .buklio-confetti{animation:none!important;transform:none!important}
}