:root {
  --bg1: #0a1f1a;
  --bg2: #0f2e24;
  --ac1: #00e676;
  --ac2: #69f0ae;
  --ac3: #00c853;
  --glass-bg: rgba(255,255,255,.08);
  --glass-brd: rgba(255,255,255,.22);
  --txt: #e5fff0;
  --success: #00c853;
  --danger: #ff5252;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background: radial-gradient(60% 80% at 10% 10%, rgba(0,230,118,.12), transparent 60%),
              radial-gradient(60% 80% at 90% 90%, rgba(105,240,174,.12), transparent 60%),
              linear-gradient(135deg, var(--bg1), var(--bg2));
  color: var(--txt);
  overflow-x: hidden;
  min-height: 100svh;
  position: relative;
}

/* Partículas */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ac1), transparent);
  animation: float 15s infinite linear;
  opacity: 0.7;
}
.particle:nth-child(2n) {
  background: radial-gradient(circle, var(--ac2), transparent);
}
.particle:nth-child(3n) {
  background: radial-gradient(circle, var(--ac3), transparent);
}

@keyframes float {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.7; }
  33% { transform: translateY(-30px) translateX(20px) rotate(120deg); opacity: 0.4; }
  66% { transform: translateY(20px) translateX(-20px) rotate(240deg); opacity: 0.7; }
  100% { transform: translateY(0) translateX(0) rotate(360deg); opacity: 0.7; }
}

/* Orbes */
.orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.orb {
  position: absolute;
  filter: blur(40px);
  opacity: .55;
  mix-blend-mode: screen;
  animation: drift 18s ease-in-out infinite;
}
.orb.o1 {
  width: 42vmax; height: 42vmax;
  background: radial-gradient(circle at 30% 30%, var(--ac1), transparent 60%);
  left: -10vmax; top: -8vmax;
  animation-delay: -2s;
}
.orb.o2 {
  width: 36vmax; height: 36vmax;
  background: radial-gradient(circle at 70% 70%, var(--ac2), transparent 60%);
  right: -8vmax; bottom: -6vmax;
  animation-delay: -6s;
}
.orb.o3 {
  width: 28vmax; height: 28vmax;
  background: radial-gradient(circle at 50% 50%, var(--ac3), transparent 60%);
  left: 50%; top: 60%;
  transform: translate(-50%, -50%);
  animation-delay: -10s;
}
@keyframes drift {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(2vmax,-2vmax) scale(1.08); }
  100% { transform: translate(0,0) scale(1); }
}

/* Contenedor login */
.login-wrap {
  width: min(720px, 94%);
  margin: clamp(32px, 8vh, 96px) auto;
  display: grid;
  grid-template-columns: 1fr;
}

/* Tarjeta */
.login-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px) saturate(140%);
  border-radius: 16px;
  padding: clamp(18px, 4vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(10px);
  animation: popin .7s ease both;
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.7s;
}
.login-card:hover::before { left: 100%; }

@keyframes popin {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo */
.logo-container {
  text-align: center;
  margin-bottom: 1.5rem;
}
.logo-img {
  max-width: min(40%, 200px);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,230,118,.3);
}

/* Títulos */
.title {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: .35rem 0 .75rem;
  background: linear-gradient(90deg, #fff, #a5d6a7 40%, #69f0ae 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 28px rgba(0,0,0,.35);
  position: relative;
  display: inline-block;
}
.title::after {
  content: '';
  position: absolute;
  bottom: -5px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--ac1), var(--ac2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.login-card:hover .title::after { transform: scaleX(1); }

.subtitle {
  color: #c8e6c9;
  opacity: .9;
  margin: 0 0 12px;
}

/* Botón admin */
.top-right {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 5;
}
.admin-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ac1), var(--ac2));
  color: #0a1f1a !important;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,230,118,.4);
  transition: transform .2s ease, filter .2s ease, box-shadow .3s ease;
  position: relative;
  overflow: hidden;
}
.admin-link::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}
.admin-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(0,230,118,.6);
}
.admin-link:hover::before { left: 100%; }

/* Formulario */
.form {
  display: grid;
  gap: 14px;
  margin-top: 10px;
}
.field { display: grid; gap: 8px; }
.label { font-weight: 700; color: #d7ecff; }
.ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.ctrl:focus-within {
  border-color: rgba(0,230,118,.8);
  box-shadow: 0 0 0 3px rgba(0,230,118,.18);
  transform: translateY(-2px);
}
.ctrl input {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  color: #fff;
  font-size: 1rem;
  position: relative;
  z-index: 2;
}
.eye {
  cursor: pointer;
  user-select: none;
  font-size: 1.1rem;
  color: #a5d6a7;
  opacity: .9;
  transition: transform .2s;
  position: relative;
  z-index: 2;
}
.eye:hover { transform: scale(1.2); }

/* Botón de envío */
.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--ac1), var(--ac2));
  color: #0a1f1a;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: 0 12px 34px rgba(0,230,118,.35), 0 8px 22px rgba(105,240,174,.25);
  cursor: pointer;
  transition: transform .12s, box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,230,118,.45), 0 10px 28px rgba(105,240,174,.35);
}
.btn:hover::before { left: 100%; }
.btn:active { transform: translateY(0); }

/* Toast */
.toast-stack {
  position: fixed;
  inset: auto 18px 18px auto;
  display: grid;
  gap: 8px;
  z-index: 20;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  color: #fff;
  font-weight: 700;
  animation: popin .25s ease both;
  transform-origin: bottom right;
}
.toast.success { border-color: rgba(0,200,83,.65); }
.toast.danger  { border-color: rgba(255,82,82,.7); }
.toast .x {
  background: none; border: 0; color: #fff;
  font-size: 1rem; cursor: pointer; margin-left: 8px;
  transition: transform .2s;
}
.toast .x:hover { transform: scale(1.2); }

/* Loader */
.loading {
  display: none;
  width: 20px; height: 20px;
  border: 2px solid transparent;
  border-top: 2px solid #0a1f1a;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

/* Password reveal (colores verdes) */
.password-reveal { position: relative; }
.password-reveal::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,230,118,0.2), transparent);
  transform: translateX(-100%);
  z-index: 1; opacity: 0;
  transition: opacity 0.3s;
}
.password-reveal.revealing::before {
  animation: decrypt-sweep 0.8s ease;
  opacity: 1;
}
@keyframes decrypt-sweep {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 1; }
}
.password-reveal.revealing .ctrl { animation: glitch 0.5s ease; }
@keyframes glitch {
  0% { transform: translateX(0); }
  20% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
.password-dots {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  display: flex; align-items: center;
  padding: 0 14px;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.password-dots.hidden { opacity: 0; }
.password-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #a5d6a7;
  margin-right: 4px;
  animation: dot-pulse 1.5s infinite;
}
.password-dot:nth-child(2) { animation-delay: 0.2s; }
.password-dot:nth-child(3) { animation-delay: 0.4s; }
.password-dot:nth-child(4) { animation-delay: 0.6s; }
.password-dot:nth-child(5) { animation-delay: 0.8s; }
.password-dot:nth-child(6) { animation-delay: 1s; }
.password-dot:nth-child(7) { animation-delay: 1.2s; }
.password-dot:nth-child(8) { animation-delay: 1.4s; }
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}
.password-text {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
  display: flex; align-items: center;
  padding: 0 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #fff; font-size: 1rem;
}
.password-text.visible { opacity: 1; }
.password-text span {
  display: inline-block;
  animation: char-reveal 0.1s ease forwards;
  opacity: 0; transform: translateY(5px);
}
@keyframes char-reveal { to { opacity: 1; transform: translateY(0); } }

/* Binary overlay (verde) */
.binary-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(transparent 80%, rgba(0,230,118,0.1) 100%);
  overflow: hidden; border-radius: 12px;
}
.binary-overlay.active { animation: binary-fade 1s ease; }
.binary-char {
  position: absolute;
  color: rgba(0,230,118,0.7);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  animation: binary-fall 3s linear forwards;
}
@keyframes binary-fade {
  0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes binary-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100px); opacity: 0; }
}

/* Eye follower (se mantiene) */
.eye-follower {
  position: fixed;
  width: 40px; height: 40px;
  pointer-events: none; z-index: 1000;
  transition: transform 0.1s ease;
  display: none;
}
.eye-follower.active { display: block; }
.eye-follower svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 5px rgba(0,230,118,0.7));
}

/* Strength bar */
.password-strength {
  height: 4px; border-radius: 2px; margin-top: 5px;
  background: rgba(255,255,255,0.1);
  overflow: hidden; position: relative;
}
.strength-bar {
  height: 100%; width: 0%; border-radius: 2px;
  transition: width 0.3s ease, background 0.3s ease;
}
.strength-bar.weak { width: 33%; background: var(--danger); }
.strength-bar.medium { width: 66%; background: #ffa726; }
.strength-bar.strong { width: 100%; background: var(--success); }

/* Responsive */
@media (max-width: 768px) {
  .login-wrap { width: 92%; margin: 20px auto; }
  .top-right {
    position: relative; top: auto; right: auto;
    text-align: center; margin-bottom: 20px;
  }
  .admin-link { display: inline-block; }
}