:root {
  --neon: #00f7ff;
  --neon-soft: rgba(0, 247, 255, .45);
  --neon-strong: rgba(0, 247, 255, .9);
  --blue: #1788ff;
  --violet: #8b5cf6;
  --bg: #020812;
  --bg-deep: #01050d;
  --card: rgba(7, 17, 30, .72);
  --card-border: rgba(0, 247, 255, .26);
  --error: #ff4d4d;
}

* {
  box-sizing: border-box;
  font-family: 'Segoe UI', sans-serif;
}

html, body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(18, 136, 255, .14), transparent 22%),
    radial-gradient(circle at 50% 58%, rgba(0, 247, 255, .12), transparent 30%),
    radial-gradient(circle at top, #061120, var(--bg) 48%, var(--bg-deep) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e6faff;
}

.login-container {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 20px;
}

.login-card {
  position: relative;
  max-width: 390px;
  margin: auto;
  padding: 34px 25px 28px;
  border-radius: 26px;
  background:
    linear-gradient(160deg, rgba(10, 24, 41, .82), rgba(3, 10, 20, .78));
  border: 1px solid var(--card-border);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 24px rgba(0,247,255,.14),
    0 0 65px rgba(0,247,255,.10),
    0 18px 80px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  text-align: center;
  animation: fadeIn .9s ease;
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,247,255,.58), rgba(23,136,255,.08), rgba(139,92,246,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 28%);
  pointer-events: none;
}

.login-card h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 2rem;
  color: var(--neon);
  text-shadow: 0 0 14px rgba(0,247,255,.25);
}

.login-card p {
  position: relative;
  z-index: 1;
  font-size: .95rem;
  opacity: .84;
  margin: 0 0 24px;
}

.login-card input {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 15px;
  border-radius: 15px;
  border: 1px solid rgba(0,247,255,.32);
  background: rgba(1, 8, 18, .54);
  color: #fff;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .2s ease;
}

.login-card input::placeholder {
  color: rgba(255,255,255,.45);
}

.login-card input:focus {
  border-color: var(--neon);
  background: rgba(2, 12, 24, .78);
  box-shadow: 0 0 0 3px rgba(0,247,255,.08), 0 0 18px rgba(0,247,255,.18);
  transform: translateY(-1px);
}

.login-card button {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 13px;
  border-radius: 18px;
  border: none;
  background: linear-gradient(135deg, var(--neon), #16c8ff 55%, #1fb9d4);
  color: #001015;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}

.login-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(0,247,255,.45), 0 0 34px rgba(23,136,255,.18);
  filter: brightness(1.03);
}

.login-card .back {
  margin-top: 15px;
  background: rgba(1, 10, 20, .48);
  color: var(--neon);
  border: 1px solid var(--neon);
  box-shadow: inset 0 0 15px rgba(0,247,255,.03);
}

.login-card .back:hover {
  background: rgba(1, 14, 28, .7);
}

#error {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 15px;
  color: var(--error);
  font-size: .85rem;
}

.logo-login {
  position: relative;
  z-index: 1;
  width: 102px;
  height: 102px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  box-shadow:
    0 0 0 2px rgba(0,247,255,.10),
    0 0 18px rgba(0,247,255,.28),
    0 0 34px rgba(0,247,255,.16);
  animation: logoFloat 4s ease-in-out infinite;
  background: transparent;
}

/* =========================
   LOADER APP
========================= */

.app-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(7, 31, 49, .94), rgba(2, 8, 18, .98) 65%);
  transition: opacity .45s ease, visibility .45s ease;
}

.app-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-box {
  width: min(90%, 360px);
  text-align: center;
  padding: 28px 24px;
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(0,247,255,.16);
  box-shadow:
    0 0 30px rgba(0,247,255,.08),
    0 0 80px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}

.loader-logo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 14px;
  box-shadow:
    0 0 18px rgba(0,247,255,.25),
    0 0 36px rgba(0,247,255,.12);
  animation: loaderPulse 1.8s infinite ease-in-out;
}

.loader-box h2 {
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: .12em;
  font-size: 1.15rem;
}

.loader-box p {
  margin: 0 0 16px;
  color: rgba(255,255,255,.72);
  font-size: .95rem;
}

.loader-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}

.loader-bar-fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00f7ff, #1788ff, #ff7dfc);
  animation: loaderRun 1.3s infinite ease-in-out;
}

/* =========================
   FONDO TRON / FIBRA PREMIUM
========================= */

.fiber-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fiber-grid,
.fiber-vignette,
.fiber-core,
.fiber-halo,
.fiber-beams,
.fiber-particles,
.fiber-traces,
.fiber-scan {
  position: absolute;
  inset: 0;
}

.fiber-grid {
  opacity: .22;
  background:
    linear-gradient(rgba(0,247,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,247,255,.045) 1px, transparent 1px);
  background-size: 90px 90px;
  mask-image: radial-gradient(circle at center, #000 25%, transparent 85%);
}

.fiber-vignette {
  background:
    radial-gradient(circle at center, transparent 0 18%, rgba(1,5,13,.1) 35%, rgba(1,5,13,.78) 82%, rgba(1,5,13,.95) 100%);
}

.fiber-core {
  inset: auto;
  width: 300px;
  height: 300px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(123,236,255,.95) 10%, rgba(0,247,255,.55) 24%, rgba(0,247,255,.18) 42%, transparent 72%);
  filter: blur(10px);
  opacity: .9;
}

.fiber-halo {
  inset: auto;
  width: 640px;
  height: 640px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(0,247,255,.06);
  box-shadow:
    0 0 70px rgba(0,247,255,.07),
    inset 0 0 100px rgba(0,247,255,.05);
  animation: haloPulse 5.2s ease-in-out infinite;
}

.fiber-halo::before,
.fiber-halo::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid rgba(23,136,255,.07);
}

.fiber-halo::after {
  inset: 23%;
  border-color: rgba(139,92,246,.08);
}

.fiber-beams {
  transform: translateY(-2%);
}

.fiber-beams span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  border-radius: 999px;
  opacity: .95;
  mix-blend-mode: screen;
}

.fiber-beams .beam-main {
  width: min(48vw, 860px);
  height: 3px;
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(0,247,255,.9) 12%, rgba(23,136,255,.45) 48%, rgba(0,247,255,.08) 78%, transparent 100%);
  box-shadow:
    0 0 8px rgba(0,247,255,.45),
    0 0 20px rgba(0,247,255,.20);
}

.fiber-beams .beam-main::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 50%;
  width: 74px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(0,247,255,.55) 45%, transparent 74%);
  filter: blur(2px);
  animation: pulseDot 2.8s linear infinite;
}

.fiber-beams .beam-soft {
  width: min(40vw, 720px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.8), rgba(0,247,255,.48), rgba(0,247,255,.03), transparent);
  box-shadow: 0 0 14px rgba(0,247,255,.12);
  opacity: .55;
}

.fiber-beams span:nth-child(1)  { transform: translate(0, -156px) rotate(-14deg); }
.fiber-beams span:nth-child(2)  { transform: translate(0, -116px) rotate(-8deg); }
.fiber-beams span:nth-child(3)  { transform: translate(0, -78px) rotate(-3deg); }
.fiber-beams span:nth-child(4)  { transform: translate(0, -44px) rotate(2deg); }
.fiber-beams span:nth-child(5)  { transform: translate(0, -8px) rotate(7deg); }
.fiber-beams span:nth-child(6)  { transform: translate(0, 30px) rotate(11deg); }
.fiber-beams span:nth-child(7)  { transform: translate(0, 70px) rotate(16deg); }
.fiber-beams span:nth-child(8)  { transform: translate(0, 112px) rotate(22deg); }
.fiber-beams span:nth-child(9)  { transform: translate(-100%, -156px) rotate(194deg); }
.fiber-beams span:nth-child(10) { transform: translate(-100%, -116px) rotate(188deg); }
.fiber-beams span:nth-child(11) { transform: translate(-100%, -78px) rotate(183deg); }
.fiber-beams span:nth-child(12) { transform: translate(-100%, -44px) rotate(178deg); }
.fiber-beams span:nth-child(13) { transform: translate(-100%, -8px) rotate(173deg); }
.fiber-beams span:nth-child(14) { transform: translate(-100%, 30px) rotate(169deg); }
.fiber-beams span:nth-child(15) { transform: translate(-100%, 70px) rotate(164deg); }
.fiber-beams span:nth-child(16) { transform: translate(-100%, 112px) rotate(158deg); }

.fiber-traces span {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 1px solid rgba(0,247,255,.08);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 30px rgba(0,247,255,.03);
}

.fiber-traces span:nth-child(1) { width: 230px; height: 230px; animation: rotateSlow 10s linear infinite; }
.fiber-traces span:nth-child(2) { width: 360px; height: 360px; border-color: rgba(23,136,255,.06); animation: rotateReverse 16s linear infinite; }
.fiber-traces span:nth-child(3) { width: 520px; height: 520px; border-color: rgba(139,92,246,.05); animation: rotateSlow 22s linear infinite; }

.fiber-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(0,247,255,.88) 45%, transparent 80%);
  box-shadow: 0 0 9px rgba(0,247,255,.9), 0 0 20px rgba(0,247,255,.26);
  animation: particleBlink 3.4s ease-in-out infinite;
}

.fiber-particles span:nth-child(1)  { left: 20%; top: 18%; animation-delay: .1s; }
.fiber-particles span:nth-child(2)  { left: 31%; top: 32%; animation-delay: .6s; }
.fiber-particles span:nth-child(3)  { left: 41%; top: 20%; animation-delay: 1.2s; }
.fiber-particles span:nth-child(4)  { left: 62%; top: 24%; animation-delay: .8s; }
.fiber-particles span:nth-child(5)  { left: 76%; top: 30%; animation-delay: 1.5s; }
.fiber-particles span:nth-child(6)  { left: 83%; top: 56%; animation-delay: .4s; }
.fiber-particles span:nth-child(7)  { left: 67%; top: 72%; animation-delay: 1.7s; }
.fiber-particles span:nth-child(8)  { left: 47%; top: 80%; animation-delay: .9s; }
.fiber-particles span:nth-child(9)  { left: 25%; top: 70%; animation-delay: 1.9s; }
.fiber-particles span:nth-child(10) { left: 14%; top: 50%; animation-delay: 1.1s; }
.fiber-particles span:nth-child(11) { left: 56%; top: 52%; animation-delay: 2.2s; }
.fiber-particles span:nth-child(12) { left: 72%; top: 44%; animation-delay: 2.6s; }

.fiber-scan {
  background: linear-gradient(180deg, transparent 0%, rgba(0,247,255,.05) 48%, transparent 100%);
  transform: translateY(-100%);
  animation: scanMove 7s linear infinite;
  opacity: .4;
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderRun {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}

@keyframes loaderPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes haloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .7; }
  50% { transform: translate(-50%, -50%) scale(1.04); opacity: .95; }
}

@keyframes particleBlink {
  0%, 100% { opacity: .2; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.45); }
}

@keyframes rotateSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotateReverse {
  from { transform: translate(-50%, -50%) rotate(360deg); }
  to { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes pulseDot {
  0% { transform: translateY(-50%) translateX(-110px) scale(.65); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(-50%) translateX(120px) scale(1.2); opacity: 0; }
}

@keyframes scanMove {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 768px) {
  .login-card {
    max-width: 360px;
    padding: 30px 22px 25px;
  }

  .login-card h1 {
    font-size: 1.8rem;
  }

  .fiber-core {
    width: 220px;
    height: 220px;
  }

  .fiber-halo {
    width: 460px;
    height: 460px;
  }

  .fiber-beams .beam-main {
    width: min(56vw, 420px);
  }

  .fiber-beams .beam-soft {
    width: min(48vw, 320px);
  }
}

@media (max-width: 480px) {
  .loader-box {
    padding: 22px 18px;
  }

  .loader-logo {
    width: 82px;
    height: 82px;
  }

  .loader-box h2 {
    font-size: 1rem;
  }

  .login-container {
    padding: 16px;
  }

  .login-card {
    border-radius: 22px;
  }

  .logo-login {
    width: 92px;
    height: 92px;
  }

  .fiber-grid {
    background-size: 58px 58px;
  }

  .fiber-core {
    width: 180px;
    height: 180px;
  }

  .fiber-halo {
    width: 340px;
    height: 340px;
  }

  .fiber-beams span:nth-child(1)  { transform: translate(0, -126px) rotate(-14deg); }
  .fiber-beams span:nth-child(2)  { transform: translate(0, -96px) rotate(-8deg); }
  .fiber-beams span:nth-child(3)  { transform: translate(0, -64px) rotate(-3deg); }
  .fiber-beams span:nth-child(4)  { transform: translate(0, -36px) rotate(2deg); }
  .fiber-beams span:nth-child(5)  { transform: translate(0, -4px) rotate(7deg); }
  .fiber-beams span:nth-child(6)  { transform: translate(0, 24px) rotate(11deg); }
  .fiber-beams span:nth-child(7)  { transform: translate(0, 54px) rotate(16deg); }
  .fiber-beams span:nth-child(8)  { transform: translate(0, 86px) rotate(22deg); }
  .fiber-beams span:nth-child(9)  { transform: translate(-100%, -126px) rotate(194deg); }
  .fiber-beams span:nth-child(10) { transform: translate(-100%, -96px) rotate(188deg); }
  .fiber-beams span:nth-child(11) { transform: translate(-100%, -64px) rotate(183deg); }
  .fiber-beams span:nth-child(12) { transform: translate(-100%, -36px) rotate(178deg); }
  .fiber-beams span:nth-child(13) { transform: translate(-100%, -4px) rotate(173deg); }
  .fiber-beams span:nth-child(14) { transform: translate(-100%, 24px) rotate(169deg); }
  .fiber-beams span:nth-child(15) { transform: translate(-100%, 54px) rotate(164deg); }
  .fiber-beams span:nth-child(16) { transform: translate(-100%, 86px) rotate(158deg); }
}