:root{
  --brand:#f39c12;
  --brand2:#ffd08a;

  --text:#111827;
  --muted:#6b7280;

  --cardA: rgba(255,255,255,.82);
  --cardB: rgba(255,255,255,.62);

  --radius: 26px;
  --shadow: 0 26px 70px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color: var(--text);
}

.login-page{
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px;

  /* + brilloso / iluminado */
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(255,255,255,.28), transparent 62%),
    radial-gradient(900px 620px at 84% 78%, rgba(243,156,18,.28), transparent 62%),
    radial-gradient(600px 380px at 55% 40%, rgba(255,220,170,.12), transparent 70%),
    linear-gradient(135deg, rgba(0,0,0,.22), rgba(0,0,0,.02)),
    url("../img/login.jpeg") center/cover no-repeat;
}

@media (max-width: 760px){
  .login-page{ background-attachment: scroll; }
}

/* ===== Caja (card) ===== */
.login-box{
  width: min(560px, 96vw);
  padding: 34px 34px 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  animation: floaty 6s ease-in-out infinite;

  /* ¡°vidrio¡± */
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  border: 1px solid rgba(255,255,255,.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Contenido por encima del borde animado */
.login-box > *{ position:relative; z-index:2; }

/* ===== Borde circuito (SVG) ===== */
.border-circuit{
  position:absolute;
  inset: 0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

/* pista */
.border-circuit .track{
  fill: none;
  stroke: rgba(243,156,18,.18);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* base worm */
.border-circuit .worm{
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: url(#glow);
  stroke-dashoffset: 0;
}

/* gusano A (horario) */
.border-circuit .worm-a{
  stroke: url(#circuitGrad);
  stroke-width: 3.2;
  stroke-dasharray: 20 240;
  opacity: .95;
  animation: dashMoveA 2.3s linear infinite;
}

/* gusano B (antihorario) */
.border-circuit .worm-b{
  stroke: url(#circuitGrad2);
  stroke-width: 2.6;
  stroke-dasharray: 20 260;
  opacity: .75;
  animation: dashMoveB 2.9s linear infinite;
}

/* Animaciones */
@keyframes dashMoveA{
  to { stroke-dashoffset: -260; }
}

@keyframes dashMoveB{
  to { stroke-dashoffset: 260; }
}




/* ===== logo + t¨ªtulo ===== */
.logo-login{
  width: 90px;
  display:block;
  margin: 0 auto 8px;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.12));
  user-select:none;
}

.login-box h2{
  margin: 10px 0 18px;
  text-align:center;
  font-size: 34px;
  letter-spacing: .2px;
}

/* ===== form ===== */
.login-box form{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-top: 10px;
}

.login-box input{
  width:100%;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(230,240,255,.72);
  padding: 16px 16px;
  border-radius: 16px;
  font-size: 15px;
  outline:none;
  transition: .22s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

.login-box input::placeholder{ color: rgba(17,24,39,.55); }

.login-box input:focus{
  border-color: rgba(243,156,18,.65);
  box-shadow: 0 0 0 4px rgba(243,156,18,.18), 0 10px 25px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

/* Password con ojito */
.pass-wrap{ position: relative; }
.pass-wrap input{ padding-right: 52px; }

.pass-toggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.78);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
  transition: .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pass-toggle:hover{ transform: translateY(-50%) scale(1.03); }
.pass-toggle:active{ transform: translateY(-50%) scale(.98); }
.pass-toggle i{ color:#111827; font-size: 15px; }

/* Bot¨®n Entrar */
.login-box button[type="submit"]{
  margin-top: 8px;
  border:0;
  cursor:pointer;
  padding: 16px 18px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(180deg, #ffb74a, var(--brand));
  box-shadow: 0 16px 34px rgba(243,156,18,.28);
  transition: .22s ease;
}

.login-box button[type="submit"]:hover{
  transform: translateY(-2px);
  filter: brightness(1.03);
}

.login-box button[type="submit"]:active{
  transform: translateY(0) scale(.99);
}

/* flotaci¨®n suave */
@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  .login-box{ animation: none; }
  .border-circuit .worm{ animation: none; }
}

@media (max-width: 520px){
  .login-box{ padding: 26px 18px 22px; }
  .login-box h2{ font-size: 28px; }
}