*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#0a0f1a}

/* ── BACKGROUND - super vivido ── */
.login-bg{
  position:fixed;inset:0;z-index:0;
  background:url('../images/login-bg.jpg') center/cover no-repeat;
  animation:bgZoom 25s ease-in-out infinite alternate;
  filter:brightness(1.2) saturate(1.3) contrast(1.05);
}
@keyframes bgZoom{0%{transform:scale(1)}100%{transform:scale(1.06)}}

/* Overlay minimo - solo suaviza bordes */
.login-overlay{
  position:fixed;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,0.02),rgba(0,0,0,0.1));
}

/* ── PARTICLES brillantes ── */
.particles{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;animation:floatP ease-in-out infinite}
.particle.bright{background:rgba(255,255,255,0.25);box-shadow:0 0 6px rgba(255,255,255,0.3)}
.particle.gold{background:rgba(255,215,0,0.2);box-shadow:0 0 8px rgba(255,215,0,0.3)}
.particle.green{background:rgba(74,222,128,0.15);box-shadow:0 0 6px rgba(74,222,128,0.3)}
@keyframes floatP{0%,100%{transform:translateY(0) scale(1);opacity:.2}50%{transform:translateY(-30px) scale(1.3);opacity:.6}}

/* ── LIGHT RAYS from top ── */
.light-rays{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(160deg,rgba(255,255,255,0.08) 0%,transparent 40%),
    linear-gradient(200deg,rgba(255,215,0,0.03) 0%,transparent 35%);
  animation:raysShift 8s ease-in-out infinite alternate;
}
@keyframes raysShift{0%{opacity:.6}100%{opacity:1}}

/* ── LAYOUT centrado ── */
.login-container{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:20px;
}

/* ── GLASS CARD - 25% mas pequeno ── */
@keyframes cardEntrance{
  0%{opacity:0;transform:translateY(15px)}
  100%{opacity:1;transform:translateY(0)}
}

.login-card{
  background:rgba(8,25,14,0.41);
  backdrop-filter:blur(26px) saturate(1.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  border-radius:24px;
  padding:32px 34px;
  width:100%;max-width:340px;
  text-align:center;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.12);
  animation:cardEntrance 1.2s cubic-bezier(0.16,1,0.3,1) both;
  position:relative;overflow:visible;
  transition:all 0.6s cubic-bezier(0.16,1,0.3,1);
}

.login-card:hover:not(.minimized){
  transform:translateY(-4px);
  box-shadow:0 40px 100px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.15),0 0 60px rgba(22,163,74,0.08);
}

/* ── MINIMIZE BUTTON (top-right of card) ── */
.login-minimize-btn{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:10;
  transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
  backdrop-filter:blur(10px);
  animation:minBtnPulse 3s ease-in-out infinite;
  opacity:0;
  animation:minBtnFadeIn 0.8s ease 1.8s both, minBtnPulse 3s ease-in-out 2.6s infinite;
}
.login-minimize-btn svg{width:14px;height:14px;transition:transform 0.3s ease}
.login-minimize-btn:hover{
  background:rgba(74,222,128,0.18);
  border-color:rgba(74,222,128,0.45);
  color:#86efac;
  transform:scale(1.15) rotate(-8deg);
  box-shadow:0 0 20px rgba(74,222,128,0.3);
}
.login-minimize-btn:hover svg{transform:scale(1.1)}
.login-minimize-btn:active{transform:scale(0.92)}

/* Tooltip on hover */
.login-minimize-btn::before{
  content:attr(data-tip);
  position:absolute;top:50%;right:calc(100% + 10px);transform:translateY(-50%);
  background:rgba(0,0,0,0.85);color:#fff;
  padding:5px 10px;border-radius:6px;
  font-size:10.5px;font-weight:700;letter-spacing:0.3px;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:all 0.25s ease;
  border:1px solid rgba(74,222,128,0.3);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}
.login-minimize-btn:hover::before{opacity:1;transform:translateY(-50%) translateX(-4px)}

@keyframes minBtnFadeIn{from{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes minBtnPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}
  50%{box-shadow:0 0 0 8px rgba(74,222,128,0.08)}
}

/* ── MINIMIZED STATE ── */
.login-card.minimized{
  animation:none !important;
  opacity:0 !important;
  transform:scale(0.6) translateY(-60px) !important;
  filter:blur(30px) !important;
  pointer-events:none !important;
}

/* ── FLOATING PILL (when minimized) ── */
.login-pill{
  position:fixed;top:0;left:50%;
  transform:translateX(-50%) scale(0.85);
  display:flex;align-items:center;gap:12px;
  padding:9px 9px 9px 20px;
  background:rgba(8,25,14,0.27);
  backdrop-filter:blur(22px) saturate(1.8);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50px;
  box-shadow:0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.15);
  cursor:pointer;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.8s cubic-bezier(0.34,1.56,0.64,1), transform 0.8s cubic-bezier(0.34,1.56,0.64,1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
}
.login-pill.visible{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) scale(1);
}
.login-pill:hover{
  background:rgba(8,25,14,0.5);
  border-color:rgba(74,222,128,0.5);
  box-shadow:0 25px 70px rgba(0,0,0,0.45), 0 0 0 1px rgba(74,222,128,0.25), 0 0 50px rgba(74,222,128,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateX(-50%) scale(1.05);
}
.login-pill-icon{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,rgba(22,163,74,0.3),rgba(74,222,128,0.2));
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(74,222,128,0.3);
  flex-shrink:0;
}
.login-pill-icon svg{width:14px;height:14px;color:#86efac}
.login-pill-text{
  display:flex;flex-direction:column;gap:1px;text-align:left;padding-right:4px;
}
.login-pill-label{
  font-size:9px;font-weight:700;color:rgba(255,255,255,0.55);
  text-transform:uppercase;letter-spacing:1.5px;line-height:1;
}
.login-pill-action{
  font-size:13px;font-weight:700;color:#fff;letter-spacing:0.2px;line-height:1.2;
}
.login-pill-arrow{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:all 0.3s ease;
}
.login-pill:hover .login-pill-arrow{
  background:#16a34a;
  transform:rotate(-90deg);
  color:#fff;
  box-shadow:0 0 16px rgba(22,163,74,0.5);
}
.login-pill-arrow svg{width:12px;height:12px}

/* ── WELCOME BANNER (shown when minimized) ── */
.login-welcome{
  position:fixed;top:8%;left:50%;
  transform:translateX(-50%);
  text-align:center;z-index:99;
  pointer-events:none;
  width:min(90%,760px);
  opacity:0;
  transition:opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.login-welcome.visible{opacity:1}
.welcome-title{
  font-family:'Playfair Display',serif;
  font-size:clamp(32px,4.5vw,56px);font-weight:900;
  color:#fff;letter-spacing:-0.3px;
  margin-bottom:14px;line-height:1.05;
  /* Sombra suave (estilo original) — sin glow oscuro que mancha el cielo */
  text-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 6px 24px rgba(0,0,0,0.35);
  opacity:0;animation:welcomeFadeDown 1s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
  white-space:nowrap;
}
.welcome-date{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:clamp(13px,1.1vw,15px);font-weight:700;
  color:#0a0a0a;
  letter-spacing:3.5px;text-transform:uppercase;
  /* Halo blanco sutil para que las letras negras no se peguen al fondo oscuro/claro */
  text-shadow:
    0 0 1px rgba(255,255,255,0.85),
    0 0 6px rgba(255,255,255,0.55),
    0 1px 0 rgba(255,255,255,0.7);
  opacity:0;animation:welcomeFadeDown 1s cubic-bezier(0.16,1,0.3,1) 0.55s forwards;
}
@keyframes welcomeFadeDown{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:translateY(0)}
}
.login-welcome.hiding{opacity:0;transform:translateX(-50%) translateY(-18px)}

/* Kbd hint at bottom when minimized */
.login-kbd-hint{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:30px;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.6);
  font-size:11px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity 0.5s ease 0.3s;
  z-index:100;
}
.login-kbd-hint.visible{opacity:1}
.login-kbd-hint kbd{
  display:inline-block;padding:2px 7px;border-radius:4px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.15);
  font-family:monospace;font-size:10px;font-weight:700;
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.2);
}

/* When card is minimized, add a subtle vignette fade for drama */
body.login-minimized .light-rays{opacity:0.25;transition:opacity 0.8s ease}
body.login-minimized .login-overlay{background:linear-gradient(135deg,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.15) 100%);transition:background 0.8s ease}

/* ── LOGO ── */
@keyframes logoFadeIn{
  0%{opacity:0;transform:translateY(-10px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 4px 15px rgba(212,175,55,0.3))}
  50%{transform:translateY(-5px);filter:drop-shadow(0 10px 25px rgba(212,175,55,0.5))}
}
.login-logo{
  height:90px;width:auto;margin:0 auto 8px;display:block;
  animation:logoFadeIn 0.8s ease both, logoFloat 4s ease-in-out 1.2s infinite;
  position:relative;z-index:1;
}

/* ── TITLE ── */
@keyframes goldShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

@keyframes silverShimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.login-title{
  font-family:'Playfair Display',serif;
  font-size:15px;text-transform:uppercase;letter-spacing:2.5px;
  font-weight:900;margin-bottom:4px;padding:6px 0;
  background:linear-gradient(135deg,#c0c0c0 0%,#ffffff 20%,#a8a8a8 40%,#ffffff 60%,#c0c0c0 80%,#e8e8e8 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fadeUp 0.8s ease 0.3s both, silverShimmer 6s ease 1.2s infinite;
  filter:drop-shadow(0 0 6px rgba(192,192,192,0.35));
  position:relative;z-index:1;
}

.login-subtitle{
  font-size:14px;
  letter-spacing:4px;text-transform:uppercase;
  margin-bottom:20px;font-weight:800;
  position:relative;z-index:1;
  background:linear-gradient(135deg,#d4af37 0%,#fff8dc 15%,#e8e8e8 30%,#fff8dc 50%,#d4af37 65%,#c0c0c0 80%,#d4af37 100%);
  background-size:400% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:fadeUp 0.8s ease 0.5s both, goldShimmer 6s ease 1.2s infinite;
}

/* ── DIVIDER animated ── */
@keyframes dividerExpand{0%{width:0;opacity:0}100%{width:50px;opacity:1}}
.login-divider{
  height:1px;margin:0 auto 20px;width:50px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.6),transparent);
  animation:dividerExpand 1s ease 0.7s both;
}

/* ── FORM with stagger ── */
@keyframes fieldFadeIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}

.login-field{text-align:left;margin-bottom:14px;position:relative;z-index:1}
.login-field:nth-child(1){animation:fieldFadeIn 0.6s ease 0.7s both}
.login-field:nth-child(2){animation:fieldFadeIn 0.6s ease 0.9s both}

.login-field label{
  font-size:9px;font-weight:700;color:rgba(255,255,255,0.35);
  text-transform:uppercase;letter-spacing:1.5px;display:block;margin-bottom:5px;
}
.login-field input{
  width:100%;padding:12px 16px;
  border:1.5px solid rgba(255,255,255,0.1);
  border-radius:14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
  color:#fff;outline:none;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
  background:rgba(255,255,255,0.07);
  backdrop-filter:blur(8px);
}
.login-field input:focus{
  border-color:rgba(74,222,128,0.6);
  background:rgba(255,255,255,0.12);
  box-shadow:0 0 0 3px rgba(74,222,128,0.12),0 4px 16px rgba(0,0,0,0.2);
  transform:scale(1.01);
}
.login-field input::placeholder{color:rgba(255,255,255,0.2)}

/* ── BUTTON with pulse ── */
@keyframes btnEntrance{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@keyframes btnPulse{0%,100%{box-shadow:0 6px 20px rgba(22,163,74,0.3)}50%{box-shadow:0 6px 30px rgba(22,163,74,0.5)}}

.login-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#166534 100%);
  color:#fff;border:none;border-radius:14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;margin-top:4px;letter-spacing:0.5px;
  position:relative;z-index:1;overflow:hidden;
  transition:all 0.3s;
  animation:btnEntrance 0.6s ease 1.2s both, btnPulse 3s ease 2s infinite;
}
.login-btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:translateX(-100%);transition:transform 0.6s;
}
.login-btn:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 30px rgba(22,163,74,0.5),inset 0 1px 0 rgba(255,255,255,0.2);
}
.login-btn:hover::after{transform:translateX(100%)}
.login-btn:active{transform:scale(0.98)}

/* ── OR SEPARATOR (entre user/pass y Google) ── */
.login-or-sep{
  display:flex;align-items:center;
  margin:14px 0 12px;
  position:relative;z-index:1;
  animation:fadeUp 0.5s ease 1.3s both;
}
.login-or-sep::before,
.login-or-sep::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
}
.login-or-sep span{
  padding:0 12px;
  font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}

/* ── GOOGLE SIGN-IN BUTTON ── */
.login-google-btn{
  width:100%;padding:11px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,0.95);
  color:#1f1f1f;border:1px solid rgba(255,255,255,0.6);border-radius:14px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:0.3px;cursor:pointer;
  position:relative;z-index:1;overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  animation:fadeUp 0.5s ease 1.4s both;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
.login-google-btn:hover{
  background:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
}
.login-google-btn:active{transform:scale(0.98)}
.login-google-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.login-google-icon{width:18px;height:18px;flex-shrink:0}

/* ── STATUS CARD (pending_approval / rejected / expired) ── */
.login-status-card{
  margin-top:14px;padding:14px 16px;border-radius:12px;
  font-size:12.5px;line-height:1.5;text-align:left;
  position:relative;z-index:1;
  animation:fadeUp 0.4s ease both;
}
.login-status-card.is-info{
  background:linear-gradient(135deg,rgba(59,130,246,0.18),rgba(37,99,235,0.10));
  border:1px solid rgba(96,165,250,0.4);
  color:#dbeafe;
}
.login-status-card.is-warning{
  background:linear-gradient(135deg,rgba(245,158,11,0.18),rgba(217,119,6,0.10));
  border:1px solid rgba(251,191,36,0.4);
  color:#fef3c7;
}
.login-status-card.is-error{
  background:linear-gradient(135deg,rgba(239,68,68,0.18),rgba(220,38,38,0.10));
  border:1px solid rgba(248,113,113,0.4);
  color:#fee2e2;
}
.login-status-card.is-success{
  background:linear-gradient(135deg,rgba(34,197,94,0.18),rgba(22,163,74,0.10));
  border:1px solid rgba(74,222,128,0.4);
  color:#dcfce7;
}
.login-status-card .title{font-size:13px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.login-status-card .actions{display:flex;gap:8px;margin-top:10px}
.login-status-card button{
  padding:6px 12px;font-size:11px;font-weight:600;
  background:rgba(255,255,255,0.1);color:inherit;
  border:1px solid rgba(255,255,255,0.25);border-radius:8px;cursor:pointer;
  transition:all 0.2s;
}
.login-status-card button:hover{background:rgba(255,255,255,0.18)}

/* ── ERROR & HINT ── */
.login-error{color:#f87171;font-size:12px;margin-top:8px;min-height:16px;font-weight:600;position:relative;z-index:1}
.login-hint{
  font-size:9px;color:rgba(255,255,255,0.18);margin-top:14px;
  letter-spacing:0.5px;position:relative;z-index:1;
}

/* ── BACK TO WEBSITE link ── */
.login-back{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:16px;font-size:11px;font-weight:600;
  color:rgba(255,255,255,0.45);
  text-decoration:none;letter-spacing:0.8px;
  padding:7px 16px;border-radius:50px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  position:relative;z-index:1;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  animation:fadeUp 0.6s ease 1.3s both;
  text-transform:uppercase;
}
.login-back:hover{
  color:rgba(255,255,255,0.9);
  background:rgba(74,222,128,0.1);
  border-color:rgba(74,222,128,0.3);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.25), 0 0 20px rgba(74,222,128,0.15);
}
.login-back-arrow{
  display:inline-block;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  font-size:13px;line-height:1;
}
.login-back:hover .login-back-arrow{transform:translateX(-4px)}

/* ── CLOCK overlay ── */
.login-clock{
  position:fixed;bottom:20px;right:30px;z-index:20;
  font-size:11px;color:rgba(255,255,255,0.25);font-weight:600;
  letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,0.3);
}

/* ── RESPONSIVE ── */
@media(max-width:480px){
  .login-card{padding:28px 22px;max-width:300px;border-radius:20px}
  .login-logo{height:70px}
  .login-title{font-size:12px;letter-spacing:1.5px}
  .login-subtitle{font-size:12px;letter-spacing:3px}
  .login-clock{display:none}
}

/* ── SHAKE ── */
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px) rotate(-1deg)}30%{transform:translateX(8px) rotate(1deg)}45%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-2px)}90%{transform:translateX(2px)}}