/* KOVRA — ajuste visual para acercar el portal al concepto aprobado.
   Solo presentación. No altera logo, IDs, navegación ni lógica. */

/* Marco tipo puerta/portal: arco superior + laterales, sin tapar contenido. */
body.auth-premium-page::before{
  top:3px !important;
  width:min(98vw,720px) !important;
  height:calc(100svh - 6px) !important;
  border:1px solid rgba(72,239,118,.34) !important;
  border-bottom:0 !important;
  border-radius:50% 50% 0 0 / 15% 15% 0 0 !important;
  background:
    radial-gradient(ellipse at 50% 1%,rgba(66,237,113,.055),transparent 31%),
    linear-gradient(90deg,rgba(255,255,255,.012),transparent 11%,transparent 89%,rgba(255,255,255,.012)) !important;
  box-shadow:
    inset 16px 0 34px rgba(0,0,0,.28),
    inset -16px 0 34px rgba(0,0,0,.28),
    0 0 20px rgba(53,226,100,.05) !important;
}

body.auth-premium-page::after{
  top:11px !important;
  bottom:auto !important;
  width:min(92vw,670px) !important;
  height:calc(100svh - 17px) !important;
  border:1px solid rgba(255,255,255,.055) !important;
  border-bottom:0 !important;
  border-radius:50% 50% 0 0 / 14% 14% 0 0 !important;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(50% - .5px),
      rgba(83,241,127,.055) 50%,
      transparent calc(50% + .5px),
      transparent 100%) !important;
  opacity:1 !important;
}

/* Acceso principal: compactado para que en móviles altos normales entre prácticamente completo. */
.auth-gateway-shell{
  width:min(calc(100% - 16px),560px) !important;
  padding:
    max(7px,env(safe-area-inset-top))
    0
    max(8px,env(safe-area-inset-bottom)) !important;
}

.auth-brand{
  margin:0 0 7px !important;
}

.auth-brand .kovra-logo-login{
  width:clamp(165px,45vw,225px) !important;
  margin:0 auto 3px !important;
}

/* La raya del concepto es corta y decorativa, no una franja protagonista. */
.auth-logo-ornament{
  width:92px !important;
  height:7px !important;
  margin:0 auto 3px !important;
}
.auth-logo-ornament::before{top:3px !important;}
.auth-logo-ornament::after{
  top:-3px !important;
  font-size:7px !important;
  padding:0 4px !important;
}

.auth-hero-line{
  font-size:clamp(13px,3.7vw,16px) !important;
  line-height:1.05 !important;
}
.auth-hero-line strong::after{
  width:62px !important;
  margin:3px auto 0 !important;
}

.auth-main-card{
  padding:9px 10px 8px !important;
  border-radius:18px !important;
  box-shadow:
    0 13px 34px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.025),
    0 0 20px rgba(54,230,107,.035) !important;
}

.auth-mode-tabs{
  margin:0 0 8px !important;
}
.auth-tab{
  min-height:35px !important;
  gap:4px !important;
  padding:4px 3px 7px !important;
  font-size:12px !important;
}
.auth-tab svg{
  width:14px !important;
  height:14px !important;
  flex-basis:14px !important;
}

/* En el login la pestaña ya dice qué pantalla es; se evita repetir título y ahorrar altura. */
.auth-gateway-shell > .auth-main-card:not(.recovery-card) > .auth-card-title{
  display:none !important;
}

.auth-main-card .field{
  margin-bottom:6px !important;
}
.auth-main-card .field > span{
  margin-bottom:3px !important;
  font-size:12px !important;
  line-height:1.1 !important;
}

.auth-input-shell,
.auth-main-card .password-field{
  min-height:40px !important;
  grid-template-columns:30px minmax(0,1fr) auto !important;
  border-radius:10px !important;
}
.auth-input-icon{
  width:30px !important;
  height:30px !important;
}
.auth-input-icon svg{
  width:16px !important;
  height:16px !important;
}
.auth-input-shell input,
.auth-main-card .password-field input{
  height:40px !important;
  padding:0 7px !important;
  font-size:16px !important;
}
.auth-main-card .password-field button{
  min-width:42px !important;
  height:40px !important;
  font-size:12px !important;
}

.auth-forgot-link{
  margin:0 2px 6px auto !important;
  font-size:12px !important;
}

.auth-primary-button,
.auth-main-card .login-button{
  min-height:42px !important;
  padding:0 40px 0 12px !important;
  border-radius:11px !important;
  font-size:13px !important;
}
.auth-button-arrow{
  right:13px !important;
  font-size:19px !important;
}

.auth-trust-line{
  gap:5px !important;
  margin-top:7px !important;
  padding-top:7px !important;
  font-size:12px !important;
}
.auth-trust-line svg{
  width:14px !important;
  height:14px !important;
}

.auth-main-card .legacy-access{
  margin-top:5px !important;
  padding:5px 7px !important;
}
.auth-main-card .restore-account-button{
  min-height:28px !important;
  margin-top:5px !important;
  border-radius:8px !important;
  font-size:12px !important;
}

/* Bloque comercial compacto, como en el mockup: encabezado breve + visual + lista. */
.auth-benefits{
  margin:7px 0 0 !important;
  padding:8px 9px 7px !important;
  border-radius:17px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 20px rgba(54,230,107,.02) !important;
}
.auth-benefits::after{
  right:-55px !important;
  top:12px !important;
  width:170px !important;
  height:190px !important;
  background-size:8px 8px !important;
}

.auth-benefits-head{
  grid-template-columns:31px minmax(0,1fr) !important;
  gap:7px !important;
  margin-bottom:5px !important;
}
.auth-benefits-badge{
  width:29px !important;
  height:29px !important;
}
.auth-benefits-badge svg{
  width:17px !important;
  height:17px !important;
}
.auth-benefits h2{
  margin:0 0 2px !important;
  font-size:13px !important;
  line-height:1.12 !important;
}
.auth-benefits-head p{
  font-size:12px !important;
  line-height:1.25 !important;
}

.auth-benefits-body{
  grid-template-columns:32% minmax(0,1fr) !important;
  gap:7px !important;
}

/* El visual de cartera queda contenido: ningún círculo tapa título, gráfica o líneas. */
.auth-product-visual{
  min-height:139px !important;
  border-right:1px solid rgba(255,255,255,.045) !important;
}
.auth-platform{
  left:4% !important;
  right:4% !important;
  bottom:1px !important;
  height:35px !important;
}
.auth-cloud{
  top:9px !important;
  left:9px !important;
  width:50px !important;
  height:28px !important;
  border-radius:18px !important;
  font-size:16px !important;
}
.auth-cloud::before{
  width:24px !important;
  height:24px !important;
  left:7px !important;
  top:-10px !important;
}
.auth-cloud::after{
  width:20px !important;
  height:20px !important;
  right:7px !important;
  top:-6px !important;
}
.auth-sync-lines{
  top:39px !important;
  left:24px !important;
  width:27px !important;
  height:21px !important;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(83,241,127,.29) 6px 7px) !important;
}
.auth-mini-dashboard{
  left:2px !important;
  bottom:19px !important;
  width:78px !important;
  height:78px !important;
  padding:6px !important;
  border-radius:7px !important;
  transform:perspective(260px) rotateY(5deg) rotateX(1deg) !important;
}
.auth-mini-dashboard small{
  margin-bottom:2px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap;
}
.auth-mini-dashboard svg{
  width:100% !important;
  height:34px !important;
}
.auth-mini-bars{
  grid-template-columns:20px 1fr !important;
  gap:5px !important;
  margin-top:1px !important;
  align-items:center !important;
}
.auth-donut{
  width:18px !important;
  height:18px !important;
}
.auth-donut::after{inset:4px !important;}
.auth-lines{gap:2px !important;}
.auth-lines i{height:2px !important;}

.auth-coins{
  right:0 !important;
  bottom:13px !important;
  width:38px !important;
  height:27px !important;
}
.auth-coins::before,
.auth-coins::after{
  width:36px !important;
  height:14px !important;
  font-size:9px !important;
}
.auth-coins::before{
  box-shadow:0 -5px 0 #19241b,0 -10px 0 #1d2920 !important;
}
.auth-coins::after{bottom:9px !important;}

.auth-feature{
  grid-template-columns:24px minmax(0,1fr) !important;
  gap:5px !important;
  padding:4px 0 !important;
}
.auth-feature-icon{
  width:22px !important;
  height:22px !important;
}
.auth-feature-icon svg{
  width:13px !important;
  height:13px !important;
}
.auth-feature p{
  font-size:12px !important;
  line-height:1.2 !important;
}

.auth-footer-trust{
  gap:5px !important;
  margin:5px auto 0 !important;
  font-size:12px !important;
}
.auth-footer-trust svg{
  width:13px !important;
  height:13px !important;
}
.auth-disclaimer{
  margin:3px auto 0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

/* Recuperación comparte el mismo portal pero conserva su explicación necesaria. */
.recovery-card .auth-card-title{
  margin-bottom:7px !important;
}
.recovery-card .auth-card-title > span{font-size:12px !important;}
.recovery-card .auth-card-title h2{
  margin:1px 0 2px !important;
  font-size:16px !important;
}
.recovery-card .auth-card-title p{
  font-size:12px !important;
  line-height:1.28 !important;
}
.auth-recovery-back{
  min-height:30px !important;
  margin-top:5px !important;
  font-size:12px !important;
}

/* Registro: mismo marco de puerta y menos espacio desperdiciado, sin ocultar campos. */
.auth-register-shell{
  width:min(calc(100% - 16px),620px) !important;
  padding:max(7px,env(safe-area-inset-top)) 0 max(10px,env(safe-area-inset-bottom)) !important;
}
.auth-register-card{
  padding:10px !important;
  border-radius:18px !important;
}
.auth-register-shell .auth-brand{margin-bottom:7px !important;}
.auth-register-card .auth-mode-tabs{margin-bottom:8px !important;}
.auth-register-shell .register-header{margin:0 0 7px !important;}
.auth-register-shell .register-header > div > span{font-size:12px !important;}
.auth-register-card .register-header h1{font-size:17px !important;margin:1px 0 !important;}
.auth-register-card .form-card,
.auth-register-card .id-preview-card{
  margin-bottom:7px !important;
  padding:9px !important;
  border-radius:11px !important;
}
.auth-register-card .form-card h2{
  margin:2px 0 7px !important;
  font-size:14px !important;
}
.auth-register-card .field{margin-bottom:6px !important;}
.auth-register-card .field > span{font-size:12px !important;margin-bottom:3px !important;}
.auth-register-card input{height:40px !important;font-size:16px !important;}
.auth-register-card .name-availability,
.auth-register-card .id-preview-card p{font-size:12px !important;line-height:1.25 !important;}
.auth-register-card .create-button{min-height:42px !important;font-size:12.5px !important;}
.auth-register-card .back-button{min-height:31px !important;margin-top:5px !important;font-size:12px !important;}

@media(max-width:380px){
  .auth-tab{font-size:12px !important;}
  .auth-tab svg{width:12px !important;height:12px !important;flex-basis:12px !important;}
  .auth-benefits-body{grid-template-columns:30% minmax(0,1fr) !important;}
  .auth-feature p{font-size:12px !important;}
}

/* En pantallas bajas se prioriza el acceso y se comprime todavía más el bloque informativo. */
@media(max-height:760px) and (max-width:620px){
  .auth-gateway-shell{padding-top:max(4px,env(safe-area-inset-top)) !important;}
  .auth-brand .kovra-logo-login{width:155px !important;}
  .auth-brand{margin-bottom:4px !important;}
  .auth-hero-line{font-size:12.5px !important;}
  .auth-main-card{padding:7px 9px !important;}
  .auth-tab{min-height:31px !important;padding:3px 2px 5px !important;}
  .auth-input-shell,.auth-main-card .password-field{min-height:37px !important;}
  .auth-input-shell input,.auth-main-card .password-field input,.auth-main-card .password-field button{height:37px !important;}
  .auth-primary-button,.auth-main-card .login-button{min-height:38px !important;}
  .auth-benefits{margin-top:5px !important;padding:6px 8px !important;}
  .auth-benefits-head{margin-bottom:3px !important;}
  .auth-product-visual{min-height:123px !important;}
  .auth-feature{padding:3px 0 !important;}
  .auth-footer-trust{margin-top:3px !important;}
}