/* =========================================================
   IMPORTADORA CELLTECH - LOGIN PROFESIONAL RESPONSIVE
   Archivo activo: /login/login_app.css
   Solo diseño visual. Mantiene clases, formularios y lógica PHP.
   ========================================================= */

:root{
  --ct-red:#ef002b;
  --ct-red2:#ff334f;
  --ct-dark:#101827;
  --ct-dark2:#1d2738;
  --ct-text:#111827;
  --ct-muted:#64748b;
  --ct-border:#e5e7eb;
  --ct-card:#ffffff;
  --ct-soft:#f8fafc;
  --ct-shadow:0 28px 70px rgba(15,23,42,.22);
}

*{box-sizing:border-box!important;}
html,body{margin:0!important;min-height:100%!important;}
body.app-auth{
  min-height:100vh!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:28px!important;
  overflow-x:hidden!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  color:var(--ct-text)!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(239,0,43,.12),transparent 26%),
    radial-gradient(circle at 92% 90%,rgba(37,99,235,.14),transparent 30%),
    linear-gradient(135deg,#f8fafc 0%,#eef2f7 45%,#e2e8f0 100%)!important;
}
body.app-auth:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.75),transparent 38%);
  z-index:0;
}

.auth-layout{
  position:relative!important;
  z-index:1!important;
  width:min(1180px,100%)!important;
  min-height:680px!important;
  display:grid!important;
  grid-template-columns:1.05fr .95fr!important;
  overflow:hidden!important;
  border-radius:34px!important;
  background:#fff!important;
  box-shadow:var(--ct-shadow)!important;
  border:1px solid rgba(255,255,255,.9)!important;
}

.auth-visual{
  position:relative!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:30px!important;
  padding:46px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 15% 15%,rgba(239,0,43,.30),transparent 28%),
    radial-gradient(circle at 85% 82%,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(145deg,#111827 0%,#182235 54%,#24344d 100%)!important;
}
.auth-visual:after{
  content:"";
  position:absolute;
  inset:auto -18% -28% auto;
  width:380px;
  height:380px;
  border-radius:50%;
  background:rgba(239,0,43,.15);
  filter:blur(8px);
}
.auth-visual>*{position:relative!important;z-index:1!important;}

.brand-chip{
  width:max-content!important;
  max-width:100%!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.11)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  color:#f8fafc!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;
}
.brand-chip span{
  width:9px!important;height:9px!important;border-radius:50%!important;
  background:var(--ct-red)!important;box-shadow:0 0 0 6px rgba(239,0,43,.18)!important;
}

.brand-block img{
  display:block!important;
  width:min(330px,86%)!important;
  max-height:230px!important;
  object-fit:contain!important;
  margin:0 0 28px!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.34))!important;
}
.brand-block h1{
  margin:0 0 12px!important;
  font-size:clamp(32px,4vw,52px)!important;
  line-height:.98!important;
  letter-spacing:-1.6px!important;
  color:#fff!important;
  font-weight:950!important;
}
.brand-block h1 strong{color:#fff!important;text-shadow:0 8px 24px rgba(239,0,43,.28)!important;}
.brand-block p{
  width:min(560px,100%)!important;
  margin:0!important;
  color:#dbe3ef!important;
  font-size:16px!important;
  line-height:1.7!important;
}

.auth-benefits{display:grid!important;gap:14px!important;}
.auth-benefits article{
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  column-gap:14px!important;
  align-items:center!important;
  padding:16px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.13)!important;
}
.auth-benefits article i{
  grid-row:span 2!important;
  width:42px!important;height:42px!important;
  display:grid!important;place-items:center!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,var(--ct-red),var(--ct-red2))!important;
  color:#fff!important;
  box-shadow:0 14px 26px rgba(239,0,43,.25)!important;
}
.auth-benefits article b{color:#fff!important;font-size:15px!important;line-height:1.2!important;}
.auth-benefits article span{color:#cbd5e1!important;font-size:13px!important;line-height:1.35!important;}

.auth-panel{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:34px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;
}
.auth-card{width:100%!important;max-width:470px!important;padding:8px 0!important;}

.back-store{
  display:inline-flex!important;align-items:center!important;gap:9px!important;
  margin-bottom:22px!important;color:#334155!important;text-decoration:none!important;
  font-size:14px!important;font-weight:850!important;
}
.back-store:hover{color:var(--ct-red)!important;}
.mobile-brand{display:none!important;align-items:center!important;gap:12px!important;margin-bottom:18px!important;}
.mobile-brand img{
  width:64px!important;height:64px!important;object-fit:contain!important;border-radius:18px!important;
  background:#0b1220!important;padding:7px!important;
}
.mobile-brand span{font-weight:950!important;color:#111827!important;}

.steps-line{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin:2px 0 24px!important;}
.steps-line span{height:5px!important;border-radius:999px!important;background:#e5e7eb!important;}
.steps-line span.on{background:linear-gradient(135deg,var(--ct-red),var(--ct-red2))!important;}

.alert{display:flex!important;align-items:center!important;gap:10px!important;padding:15px 16px!important;border-radius:18px!important;font-size:14px!important;font-weight:750!important;margin:0 0 20px!important;line-height:1.4!important;}
.alert.error{color:#991b1b!important;background:#fee2e2!important;border:1px solid #fecaca!important;}
.alert.success{color:#166534!important;background:#dcfce7!important;border:1px solid #bbf7d0!important;}

.auth-head{margin-bottom:24px!important;}
.eyebrow{display:inline-flex!important;margin-bottom:9px!important;color:var(--ct-red)!important;font-size:12px!important;font-weight:950!important;letter-spacing:.12em!important;text-transform:uppercase!important;}
.auth-head h2{margin:0 0 10px!important;color:#0f172a!important;font-size:clamp(28px,3vw,42px)!important;line-height:1.06!important;letter-spacing:-1px!important;font-weight:950!important;}
.auth-head p{margin:0!important;color:var(--ct-muted)!important;font-size:15px!important;line-height:1.6!important;}

.social-grid{display:grid!important;gap:12px!important;}
.social{min-height:56px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:11px!important;padding:14px 16px!important;border-radius:18px!important;text-decoration:none!important;font-weight:900!important;transition:.22s ease!important;border:1px solid var(--ct-border)!important;color:#0f172a!important;background:#fff!important;}
.social:hover{transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(15,23,42,.12)!important;}
.social.google i{color:#ea4335!important;}
.social.whatsapp{color:#075e54!important;background:#ecfdf5!important;border-color:#bbf7d0!important;}
.social.whatsapp i{color:#16a34a!important;}
.social.facebook{display:none!important;}

.divider{display:flex!important;align-items:center!important;gap:12px!important;color:#94a3b8!important;font-size:13px!important;margin:22px 0!important;}
.divider:before,.divider:after{content:""!important;height:1px!important;flex:1!important;background:#e5e7eb!important;}
.primary-btn{width:100%!important;min-height:58px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:15px 18px!important;border:0!important;border-radius:18px!important;color:#fff!important;background:linear-gradient(135deg,var(--ct-red),var(--ct-red2))!important;font-size:15px!important;font-weight:950!important;text-decoration:none!important;cursor:pointer!important;box-shadow:0 16px 34px rgba(239,0,43,.24)!important;transition:.22s ease!important;}
.primary-btn:hover{transform:translateY(-2px)!important;box-shadow:0 20px 42px rgba(239,0,43,.32)!important;}
.ghost-link{display:flex!important;justify-content:center!important;margin-top:16px!important;color:#334155!important;text-decoration:none!important;font-weight:900!important;font-size:14px!important;}
.ghost-link:hover{color:var(--ct-red)!important;}

.auth-form{display:grid!important;gap:13px!important;}
.auth-form label{color:#0f172a!important;font-size:13px!important;font-weight:900!important;margin-top:2px!important;}
.auth-form small{color:#94a3b8!important;font-weight:700!important;}
.input-box{position:relative!important;display:flex!important;align-items:center!important;min-height:58px!important;border-radius:18px!important;background:#f8fafc!important;border:1px solid #dbe2ea!important;transition:.2s ease!important;}
.input-box:focus-within{border-color:var(--ct-red)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(239,0,43,.10)!important;}
.input-box i{width:48px!important;text-align:center!important;color:#94a3b8!important;flex:none!important;}
.input-box input{width:100%!important;min-width:0!important;height:56px!important;border:0!important;outline:0!important;background:transparent!important;color:#0f172a!important;font-size:15px!important;padding:0 14px 0 0!important;}
.input-box input::placeholder{color:#94a3b8!important;}
.togglePass{width:48px!important;height:48px!important;margin-right:5px!important;border:0!important;border-radius:14px!important;background:transparent!important;color:#94a3b8!important;cursor:pointer!important;}
.togglePass:hover{background:#eef2f7!important;color:var(--ct-red)!important;}
.form-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin:2px 0 7px!important;color:#64748b!important;font-size:13px!important;}
.form-row a{color:var(--ct-red)!important;font-weight:900!important;text-decoration:none!important;}
.check{display:flex!important;align-items:center!important;gap:7px!important;margin:0!important;color:#64748b!important;}
.two-cols{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
.terms{margin:3px 0 0!important;color:#64748b!important;font-size:12px!important;line-height:1.5!important;}

@media(max-width:960px){
  body.app-auth{padding:18px!important;align-items:flex-start!important;}
  .auth-layout{min-height:initial!important;grid-template-columns:1fr!important;border-radius:28px!important;}
  .auth-visual{padding:30px 24px!important;min-height:auto!important;gap:20px!important;text-align:center!important;}
  .brand-chip{margin:0 auto!important;}
  .brand-block img{width:min(270px,82%)!important;max-height:190px!important;margin:0 auto 18px!important;}
  .brand-block h1{font-size:32px!important;}
  .brand-block p{margin:0 auto!important;font-size:14px!important;}
  .auth-benefits{grid-template-columns:1fr!important;}
  .auth-benefits article{text-align:left!important;}
  .auth-panel{padding:26px 20px 30px!important;}
  .auth-card{max-width:100%!important;}
}

@media(max-width:560px){
  body.app-auth{padding:0!important;background:#f8fafc!important;}
  .auth-layout{width:100%!important;min-height:100vh!important;border-radius:0!important;box-shadow:none!important;border:0!important;}
  .auth-visual{padding:22px 18px 20px!important;border-radius:0 0 28px 28px!important;}
  .brand-chip{font-size:11px!important;padding:8px 11px!important;}
  .brand-block img{width:190px!important;max-height:145px!important;margin-bottom:12px!important;}
  .brand-block h1{font-size:25px!important;letter-spacing:-.8px!important;}
  .brand-block p{font-size:13px!important;line-height:1.55!important;}
  .auth-benefits{display:none!important;}
  .auth-panel{padding:24px 18px 28px!important;}
  .back-store{margin-bottom:16px!important;}
  .mobile-brand{display:flex!important;}
  .steps-line{margin-bottom:18px!important;}
  .auth-head h2{font-size:28px!important;}
  .auth-head p{font-size:14px!important;}
  .social,.primary-btn,.input-box{border-radius:16px!important;min-height:54px!important;}
  .input-box input{height:52px!important;font-size:14px!important;}
  .two-cols{grid-template-columns:1fr!important;}
  .form-row{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;}
}


/* ==========================================================
   CELLTECH - DISEÑO CORREGIDO OTP RECUPERAR CLAVE
   Fuerza diseño moderno para .otp-grid y .otp-digit
   ========================================================== */
.reset-layout .otp-status{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:12px 0 14px!important;
    color:#0f172a!important;
    font-size:14px!important;
}
.reset-layout .otp-status span{
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    line-height:1.2!important;
}
.reset-layout .otp-status i{color:#e4002b!important;}
.reset-layout .otp-pro-form > label{
    display:block!important;
    margin:6px 0 10px!important;
    font-size:14px!important;
    font-weight:900!important;
    color:#0f172a!important;
}
.reset-layout .otp-grid{
    display:grid!important;
    grid-template-columns:repeat(6, 52px)!important;
    gap:10px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin:8px 0 16px!important;
    width:100%!important;
    max-width:100%!important;
}
.reset-layout .otp-grid .otp-digit,
.reset-layout input.otp-digit{
    width:52px!important;
    min-width:52px!important;
    max-width:52px!important;
    height:56px!important;
    min-height:56px!important;
    border:2px solid #e2e8f0!important;
    border-radius:16px!important;
    background:#fff!important;
    color:#081733!important;
    text-align:center!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:56px!important;
    padding:0!important;
    margin:0!important;
    outline:none!important;
    box-shadow:0 10px 22px rgba(15,23,42,.07)!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease!important;
}
.reset-layout .otp-grid .otp-digit:focus,
.reset-layout input.otp-digit:focus{
    border-color:#ff1744!important;
    box-shadow:0 0 0 5px rgba(255,23,68,.13), 0 12px 26px rgba(15,23,42,.10)!important;
    transform:translateY(-1px)!important;
}
.reset-layout .otp-grid .otp-digit.filled,
.reset-layout input.otp-digit.filled{
    border-color:#16a34a!important;
    background:#f0fdf4!important;
}
.reset-layout .otp-help{
    display:flex!important;
    gap:8px!important;
    align-items:flex-start!important;
    margin:10px 0 22px!important;
    padding:12px 14px!important;
    border:1px solid #e5e7eb!important;
    border-radius:16px!important;
    background:#f8fafc!important;
    color:#475569!important;
    font-size:14px!important;
    line-height:1.45!important;
}
.reset-layout .otp-help i{color:#e4002b!important;margin-top:2px!important;}
.reset-layout .resend-form{margin-top:0!important;}
.reset-layout .resend-form button{
    border:1px solid #e5e7eb!important;
    border-radius:12px!important;
    padding:9px 12px!important;
    font-weight:700!important;
    background:#fff!important;
    color:#64748b!important;
}
.reset-layout .resend-form button:not(:disabled){
    color:#e4002b!important;
    border-color:#fecdd3!important;
    background:#fff1f2!important;
}
@keyframes ctOtpShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.reset-layout .otp-digit.shake{animation:ctOtpShake .42s both!important;}
@media (max-width:560px){
    .reset-layout .otp-grid{grid-template-columns:repeat(6, minmax(38px,1fr))!important;gap:7px!important;}
    .reset-layout .otp-grid .otp-digit,
    .reset-layout input.otp-digit{width:100%!important;min-width:0!important;max-width:none!important;height:50px!important;min-height:50px!important;font-size:21px!important;border-radius:13px!important;}
}