/* =========================================================
   LOGIN — SOLO borde animado
   Dos líneas independientes: verde brillante + azul brillante.
   Giro continuo en sentido horario.
   No modifica campos, botones ni la lógica del login.
   ========================================================= */

.page-login .login-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: transparent;
}

/*
 * La capa completa gira físicamente, por eso funciona también en móvil.
 * Hay únicamente dos segmentos: uno verde y uno azul.
 */
.page-login .login-card::before {
  content: '';
  position: absolute;
  inset: -85%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,

    /* Línea VERDE brillante */
    transparent 0deg 24deg,
    #15803d 24deg 34deg,
    #22c55e 42deg,
    #4ade80 56deg,
    #22c55e 70deg,
    #15803d 80deg,
    transparent 80deg 180deg,

    /* Línea AZUL brillante */
    #1d4ed8 180deg 190deg,
    #2563eb 198deg,
    #38bdf8 212deg,
    #2563eb 226deg,
    #1d4ed8 236deg,
    transparent 236deg 360deg
  );
  animation: loginBorderClockwise 3.2s linear infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  filter:
    saturate(1.35)
    brightness(1.16)
    drop-shadow(0 0 5px rgba(34, 197, 94, .55))
    drop-shadow(0 0 5px rgba(37, 99, 235, .55));
}

/* Tapa el centro y deja visibles únicamente 3px del borde animado. */
.page-login .login-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  z-index: 1;
  pointer-events: none;
  border-radius: 15px;
  background: #ffffff;
}

/* Mantiene TODO el contenido del login por encima del borde. */
.page-login .login-card > * {
  position: relative;
  z-index: 2;
}

@keyframes loginBorderClockwise {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}