/* ===== Cronova · Acceso ===== */
:root{
  --bg:#f7f9ff;
  --card:#ffffff;
  --ink:#171320;
  --muted:#6c6478;
  --line:#e5e9f5;
  --violet:#5b21ff;
  --violet-2:#8b5bff;
  --magenta:#ff2e93;
  --lime:#d8ff3e;
  --cyan:#00c2a8;
  --orange:#ff7a1a;
  --danger:#e11d48;
  --field:#ffffff;
  --field-line:#dfe4f2;
  --soft:#f0f2fb;
  --soft-ink:#4b2fa8;
  --soft-bg:#f1ecff;
  --hero-chip:rgba(255,255,255,.72);
  --hero-chip-line:rgba(23,19,32,.07);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 6% -12%, rgba(91,33,255,.11), transparent 62%),
    radial-gradient(900px 540px at 94% 0%, rgba(255,46,147,.09), transparent 60%),
    radial-gradient(820px 560px at 82% 104%, rgba(216,255,62,.14), transparent 62%),
    radial-gradient(700px 480px at 12% 96%, rgba(0,194,168,.08), transparent 64%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}

button,input{font:inherit;color:inherit}
a{color:inherit}

.shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  min-height:100vh;
  max-width:1500px;
  margin:0 auto;
}

/* ===== Panel de presentación ===== */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:40px;
  padding:44px clamp(32px,5vw,80px) 44px clamp(28px,4vw,64px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  right:-160px;top:120px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(139,91,255,.24), rgba(255,46,147,.12) 55%, transparent 72%);
  filter:blur(6px);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  width:340px;height:340px;
  left:-120px;bottom:-90px;
  border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(216,255,62,.34), transparent 68%);
  pointer-events:none;
}

.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;width:max-content;position:relative;z-index:1}
.brand-mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:linear-gradient(135deg,var(--violet),var(--magenta));
  box-shadow:0 16px 30px -18px rgba(91,33,255,.9);
  color:#fff;
}
.brand-mark svg{width:23px;height:23px}
.brand-word{font-family:'Fraunces',Georgia,serif;font-size:29px;font-weight:600;letter-spacing:-.02em}

.hero-copy{position:relative;z-index:1;max-width:560px}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  margin:0 0 18px;
  padding:7px 13px;
  border-radius:999px;
  background:var(--hero-chip);
  border:1px solid var(--hero-chip-line);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);
}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(216,255,62,.35)}
.hero h1{
  margin:0 0 16px;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(34px,4.2vw,58px);
  font-weight:600;line-height:1.04;letter-spacing:-.03em;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--violet),var(--magenta) 62%,var(--orange));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lead{margin:0;max-width:46ch;font-size:15px;line-height:1.65;color:var(--muted)}

.hero-points{display:grid;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.hero-points li{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;
  border-radius:14px;
  background:var(--hero-chip);
  border:1px solid var(--hero-chip-line);
  font-size:13px;font-weight:500;
}
.hero-points .dot{
  display:grid;place-items:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:9px;
  font-size:13px;font-weight:700;color:#fff;
}
.hero-points li:nth-child(1) .dot{background:var(--violet)}
.hero-points li:nth-child(2) .dot{background:var(--magenta)}
.hero-points li:nth-child(3) .dot{background:var(--cyan);color:#04211d}

.hero-card{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:14px;
  width:max-content;max-width:100%;
  padding:14px 18px 14px 14px;
  border-radius:18px;
  background:var(--card);
  border:1px solid var(--hero-chip-line);
  box-shadow:0 34px 60px -44px rgba(23,19,32,.7);
}
.hero-card .when{
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:14px;
  background:var(--violet);color:#fff;
  font-family:'Fraunces',Georgia,serif;line-height:1;
}
.hero-card .when strong{font-size:19px}
.hero-card .when span{font-size:9px;letter-spacing:.12em;font-weight:700}
.hero-card .what strong{display:block;font-size:13.5px;font-weight:600}
.hero-card .what span{font-size:11.5px;color:var(--muted)}
.hero-card .tag{
  margin-left:auto;align-self:flex-start;
  padding:5px 10px;border-radius:999px;
  background:#ffe3ec;color:#c10063;
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
/* ===== Panel de acceso ===== */
.auth{
  display:flex;align-items:center;justify-content:center;
  padding:32px clamp(20px,3.4vw,54px);
  position:relative;z-index:1;
}
.auth-card{
  width:100%;max-width:432px;
  padding:30px 30px 26px;
  border-radius:24px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:0 40px 80px -56px rgba(23,19,32,.75), 0 0 0 1px rgba(255,255,255,.5) inset;
  backdrop-filter:blur(10px);
}
.auth-head{margin-bottom:22px}
.auth-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.auth-head h2{margin:0 0 6px;font-family:'Fraunces',Georgia,serif;font-size:29px;font-weight:600;letter-spacing:-.02em}
.auth-head p{margin:0;font-size:13px;color:var(--muted)}
.theme-mini{
  flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;border-radius:11px;
  border:1px solid var(--line);background:var(--soft);color:var(--muted-strong,#463d55);
  transition:background .18s,color .18s,border-color .18s;
}
.theme-mini svg{width:17px;height:17px}
.theme-mini:hover{background:var(--soft-bg);color:var(--soft-ink);border-color:transparent}

.provider-row{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.provider-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:46px;padding:0 14px;
  border-radius:999px;border:1px solid var(--field-line);
  background:var(--field);color:var(--ink);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:transform .16s,box-shadow .16s,border-color .16s,background .16s;
}
.provider-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px -20px rgba(23,19,32,.8);border-color:var(--violet-2)}
.provider-btn:active{transform:translateY(0)}
.provider-icon{display:grid;place-items:center;width:18px;height:18px}
.provider-icon svg{width:18px;height:18px}

.strength{display:flex;align-items:center;gap:9px;margin-top:2px}
.strength-bar{flex:1;height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.strength-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--magenta),var(--orange));transition:width .2s,background .2s}
.strength-bar i[data-score="2"]{background:linear-gradient(90deg,var(--orange),#f5c400)}
.strength-bar i[data-score="3"]{background:linear-gradient(90deg,#4cc38a,var(--cyan))}
.strength-bar i[data-score="4"]{background:linear-gradient(90deg,var(--cyan),#2bb673)}
.strength-text{flex:0 0 auto;font-size:10.5px;font-weight:600;color:var(--muted)}

.social{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 2px}
.google-slot{display:flex;justify-content:center;min-height:44px}
.google-slot > div{max-width:100%}
.google-slot iframe{max-width:100%}
.social-note{margin:0;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}
.social-origin{margin:0;padding:11px 13px;border:1px dashed var(--soft-ink);border-radius:11px;background:var(--soft-bg);font-size:11.5px;line-height:1.55;color:var(--ink);text-align:center}
.social-origin[hidden]{display:none}
.social-origin a{font-weight:700;color:var(--soft-ink);text-decoration:underline}
.social-origin code{padding:1px 4px;border-radius:5px;background:var(--soft);font-family:inherit;font-size:11px;font-weight:600}
.social-error{min-height:0;margin:0;text-align:center}
.social-divider{margin-top:16px}

.email-hint{
  margin:0 0 12px;padding:10px 12px;
  border-radius:11px;background:#e6faf3;color:#0b5d4e;
  font-size:11.5px;line-height:1.45;
}
.email-actions{display:flex;gap:8px;margin-top:10px}
.email-actions .btn-ghost{flex:1;width:auto;height:40px}

.tabs{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px;
  margin:0 0 20px;padding:4px;
  border-radius:13px;background:var(--soft);
}
.tab{
  padding:9px 6px;border:0;border-radius:9px;background:transparent;
  font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:background .18s,color .18s,box-shadow .18s;
}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 8px 18px -14px rgba(23,19,32,.8)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field > label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field input{
  width:100%;height:46px;padding:0 14px;
  border:1px solid var(--field-line);border-radius:11px;
  background:var(--field);
  font-size:14px;
  transition:border-color .16s,box-shadow .16s;
}
.field input::placeholder{color:var(--muted)}
.field input:focus{
  outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(91,33,255,.16);
}
.field .wrap-pass{position:relative}
.field .wrap-pass input{padding-right:52px}
.eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.04em;
}
.eye:hover{background:var(--soft);color:var(--ink)}

.hint{
  display:flex;align-items:center;gap:9px;
  margin:0 0 18px;padding:10px 12px;
  border-radius:11px;
  background:var(--soft-bg);color:var(--soft-ink);
  font-size:11.5px;line-height:1.45;
}
.hint code{
  padding:1px 6px;border-radius:6px;background:var(--card);border:1px solid rgba(75,47,168,.18);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;border:0;border-radius:12px;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.btn-primary{
  background:linear-gradient(120deg,var(--violet),#7a3bff 55%,var(--magenta));
  color:#fff;
  box-shadow:0 18px 34px -20px rgba(91,33,255,.95);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 22px 40px -20px rgba(91,33,255,1)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  width:auto;height:42px;padding:0 16px;
  border:1px solid var(--field-line);background:transparent;color:var(--ink);
  border-radius:11px;font-size:12.5px;font-weight:600;
}
.btn-ghost:hover{background:var(--soft)}

.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

.demo{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:13px;
  border:1px dashed var(--field-line);background:var(--soft);
}
.demo .who{min-width:0;font-size:11.5px;line-height:1.5;color:var(--muted)}
.demo .who strong{display:block;font-size:12.5px;color:var(--ink)}
.demo button{flex:0 0 auto;margin-left:auto}

.auth-foot{margin:20px 0 0;text-align:center;font-size:11.5px;color:var(--muted)}
.auth-foot button{
  border:0;background:none;padding:0;
  color:var(--violet);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}

.error{
  min-height:18px;margin:0 0 10px;
  font-size:12px;font-weight:500;color:var(--danger);
}
.error:empty{display:none}

.benefits{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
.benefits li{
  padding:5px 9px;border-radius:999px;
  background:var(--soft-bg);color:var(--soft-ink);
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}

.form-note{margin:14px 0 0;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}

[hidden]{display:none !important}

/* ===== Tema oscuro del acceso ===== */
html.preload-dark body,
body.dark{
  color-scheme:dark;
  --bg:#0d0a14;
  --card:#171222;
  --ink:#f6f1e7;
  --muted:#a196b0;
  --line:#2b2339;
  --violet:#a88cff;
  --violet-2:#c4b0ff;
  --magenta:#ff5ca8;
  --lime:#d8ff3e;
  --cyan:#2ee6c8;
  --orange:#ff9a5c;
  --danger:#ff7a9e;
  --field:#1d1729;
  --field-line:#352b47;
  --soft:#221a30;
  --soft-ink:#c4b0ff;
  --soft-bg:#2a2145;
  --hero-chip:rgba(255,255,255,.05);
  --hero-chip-line:rgba(255,255,255,.08);
}
html.preload-dark body,
body.dark{
  background:
    radial-gradient(1100px 620px at 6% -12%, rgba(124,77,255,.30), transparent 62%),
    radial-gradient(900px 540px at 94% 0%, rgba(255,92,168,.20), transparent 60%),
    radial-gradient(820px 560px at 82% 104%, rgba(216,255,62,.10), transparent 62%),
    radial-gradient(700px 480px at 12% 96%, rgba(46,230,200,.12), transparent 64%),
    var(--bg);
}
body.dark .brand-mark{background:linear-gradient(135deg,var(--violet),var(--magenta));box-shadow:0 16px 34px -18px rgba(168,140,255,.8)}
body.dark .hero::before{background:radial-gradient(circle at 30% 30%, rgba(168,140,255,.34), rgba(255,92,168,.18) 55%, transparent 72%)}
body.dark .hero::after{background:radial-gradient(circle at 60% 40%, rgba(216,255,62,.16), transparent 68%)}
body.dark .hero-card{box-shadow:0 34px 60px -44px rgba(0,0,0,.95)}
body.dark .hero-card .tag{background:#3b1029;color:#ff9ccb}
body.dark .auth-card{box-shadow:0 40px 80px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset}
body.dark .email-hint{background:#0e2f2b;color:#7ce8d6}
body.dark .btn-primary{background:linear-gradient(120deg,#7a4dff,#b06bff 55%,#ff5ca8)}
body.dark .strength-bar{background:#2a2145}
body.dark .tab[aria-selected="true"]{box-shadow:0 8px 18px -14px rgba(0,0,0,.95)}
body.dark .demo{border-color:#3a3050}
body.dark .field input:focus{box-shadow:0 0 0 3px rgba(168,140,255,.2)}

@media(max-width:1020px){
  .shell{grid-template-columns:1fr;max-width:640px;padding-bottom:26px}
  .hero{padding:34px 26px 8px;gap:28px}
  .hero-card{display:none}
  .hero p.lead{font-size:14px}
  .auth{padding:22px 20px 8px}
  .auth-card{padding:24px 22px 22px;border-radius:20px;box-shadow:0 30px 60px -50px rgba(23,19,32,.6)}
  .hero-points{display:none}
}
@media(max-width:420px){
  .hero h1{font-size:31px}
  .auth-head h2{font-size:25px}
  .brand-word{font-size:25px}
}
/* ===== Animación de bienvenida al entrar ===== */
.welcome{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 620px at 18% 8%,rgba(139,91,255,.30),transparent 62%),
    radial-gradient(760px 540px at 88% 10%,rgba(255,46,147,.20),transparent 60%),
    radial-gradient(700px 520px at 70% 100%,rgba(216,255,62,.20),transparent 62%),
    var(--bg);
  animation:welcomeIn .32s ease both;
}
.welcome.is-leaving{animation:welcomeOut .32s ease both}
.welcome-card{width:min(440px,100%);text-align:center}
.welcome-mark{
  display:grid;place-items:center;width:108px;height:108px;margin:0 auto 22px;
  border:1px solid var(--line);border-radius:32px;background:var(--card);
  box-shadow:0 32px 70px -40px rgba(23,19,32,.8),0 0 0 8px var(--soft-bg);
  animation:welcomePop .75s cubic-bezier(.2,.9,.3,1.18) both;
}
.welcome-mark svg{width:70px;height:70px;filter:drop-shadow(0 0 14px rgba(139,91,255,.35))}
.welcome-ring{stroke-dasharray:79;stroke-dashoffset:79;animation:welcomeDraw .9s ease .15s forwards}
.welcome-hands{stroke-dasharray:24;stroke-dashoffset:24;animation:welcomeDraw .55s ease .6s forwards}
.welcome-dot{transform-origin:25.5px 5.5px;opacity:0;animation:welcomeDot .45s cubic-bezier(.2,.9,.3,1.4) .8s forwards}
.welcome-kicker{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.welcome-brand{display:flex;justify-content:center;gap:1px;margin:0;font-family:'Fraunces',Georgia,serif;font-size:clamp(48px,10vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1}
.welcome-brand span{display:inline-block;opacity:0;transform:translateY(18px) rotate(4deg);animation:welcomeLetter .5s cubic-bezier(.2,.9,.3,1.15) forwards}
.welcome-brand span:nth-child(1){animation-delay:.12s}
.welcome-brand span:nth-child(2){animation-delay:.17s}
.welcome-brand span:nth-child(3){animation-delay:.22s}
.welcome-brand span:nth-child(4){animation-delay:.27s}
.welcome-brand span:nth-child(5){animation-delay:.32s}
.welcome-brand span:nth-child(6){animation-delay:.37s}
.welcome-brand span:nth-child(7){animation-delay:.42s}
.welcome-name{
  display:inline-block;max-width:100%;overflow:hidden;margin:22px 0 0;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  font-size:13px;font-weight:600;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;
  opacity:0;animation:welcomeName .45s ease .55s forwards;
}
.welcome-progress{position:relative;width:190px;height:5px;margin:22px auto 12px;border-radius:999px;background:var(--soft);overflow:hidden}
.welcome-progress span{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--magenta),var(--lime));transform-origin:left;animation:welcomeLoad 1.55s cubic-bezier(.2,.7,.2,1) .15s both}
.welcome-hint{margin:0;font-size:12px;color:var(--muted)}
@keyframes welcomeIn{from{opacity:0}to{opacity:1}}
@keyframes welcomeOut{from{opacity:1}to{opacity:0}}
@keyframes welcomePop{0%{opacity:0;transform:scale(.72) rotate(-8deg)}65%{opacity:1;transform:scale(1.05) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes welcomeDraw{to{stroke-dashoffset:0}}
@keyframes welcomeDot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes welcomeLetter{to{opacity:1;transform:none}}
@keyframes welcomeName{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes welcomeLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:420px){
  .welcome-mark{width:92px;height:92px;border-radius:27px}
  .welcome-mark svg{width:60px;height:60px}
  .welcome-name{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .welcome-mark,.welcome-brand span,.welcome-name,.welcome-dot{opacity:1 !important;transform:none !important}
  .welcome-ring,.welcome-hands{stroke-dashoffset:0 !important}
  .welcome-progress span{transform:none !important}
}


/* ===== Aviso y reintento del botón de Google (05/11/2026) ===== */
.google-loading{margin:0;padding:13px 16px;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);border:1px dashed var(--line);border-radius:999px}
.google-fallback{display:grid;gap:8px;text-align:center}
.google-fallback p{margin:0;font-size:12px;line-height:1.45;color:var(--muted)}
.google-fallback .btn-ghost{justify-self:center;padding:7px 16px;font-size:12px}


/* ===== Verificación en dos pasos ===== */
.twofa{display:grid;gap:10px;padding:4px 0 2px}
.twofa[hidden]{display:none}
.twofa h3{margin:0;font-size:17px;letter-spacing:-.01em}
.twofa p{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.twofa p strong{color:var(--ink)}
.twofa .btn-primary{width:100%;margin-top:4px}
.twofa-back{justify-self:center;margin-top:2px;font-size:12px}