/* ===================================================================
   css/login.css
   Rediseño del acceso al sistema (index.php). Hoja EXCLUSIVA de esta
   página -- no se comparte con el resto del sitio (que sigue usando
   css/custom.css tal cual, incluidas registro.php / noacceso.php, que
   usan las clases .login / .login_wrapper originales).
   =================================================================== */

:root{
  --pl-bg-1: #0a0f1c;
  --pl-bg-2: #101a2e;
  --pl-bg-3: #0d2230;
  --pl-gold: #f5a623;
  --pl-orange: #e8720c;
  --pl-teal: #1fb6a6;
  --pl-ink: #eef2f8;
  --pl-muted: #9fb0c9;
  --pl-card-bg: rgba(255,255,255,.06);
  --pl-card-border: rgba(255,255,255,.14);
}

*{ box-sizing: border-box; }

html, body.pl-body{
  height: 100%;
  margin: 0;
}

body.pl-body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: var(--pl-ink);
  overflow-x: hidden;
  position: relative;
  background:
    radial-gradient(1100px 700px at 15% 15%, rgba(232,114,12,.16), transparent 60%),
    radial-gradient(900px 650px at 88% 82%, rgba(31,182,166,.14), transparent 55%),
    linear-gradient(160deg, var(--pl-bg-1), var(--pl-bg-2) 55%, var(--pl-bg-3));
  background-size: 160% 160%, 160% 160%, 100% 100%;
  animation: plBgDrift 22s ease-in-out infinite;
}

@keyframes plBgDrift{
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  50%  { background-position: 30% 20%, 70% 80%, 0 0; }
  100% { background-position: 0% 0%, 100% 100%, 0 0; }
}

/* ---------- Partículas de "energía" flotando ---------- */
.pl-particles{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.pl-particle{
  position: absolute;
  bottom: -10px;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,.9), rgba(245,166,35,0) 70%);
  opacity: 0;
  animation: plRise var(--d, 14s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes plRise{
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .4; }
  100% { transform: translateY(-105vh) translateX(var(--drift, 20px)); opacity: 0; }
}

/* ---------- Logos decorativos a los costados ---------- */
.pl-side-logo{
  position: fixed;
  top: 50%;
  /* El arte (la hoja) no está centrado dentro del lienzo cuadrado del PNG
     -- ocupa más o menos el 37% superior. Se compensa el translateY para
     que la hoja en sí (no el lienzo transparente) quede centrada. */
  transform: translateY(-37%);
  width: min(64vw, 1040px);
  height: auto;
  z-index: 0;
  opacity: .92;
  pointer-events: none;
  user-select: none;
}
.pl-side-logo-left{ left: -22%; }
.pl-side-logo-right{ right: -22%; }

@media (max-width: 900px){
  .pl-side-logo{ display: none; }
}

/* ---------- Contenido ---------- */
.pl-stage{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  width: 100%;
  max-width: 430px;
}

/* ---------- Logo + anillos de energía ---------- */
.pl-logo-wrap{
  position: relative;
  width: 360px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.pl-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(245,166,35,.45);
  opacity: 0;
  animation: plPulse 3.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.pl-ring.r1{ width: 100%; height: 100%; animation-delay: 0s; }
.pl-ring.r2{ width: 100%; height: 100%; animation-delay: 1.2s; }
.pl-ring.r3{ width: 100%; height: 100%; animation-delay: 2.4s; }
@keyframes plPulse{
  0%   { transform: scale(.55); opacity: 0; }
  15%  { opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}

.pl-logo{
  position: relative;
  width: 264px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 0 18px rgba(245,166,35,.55)) drop-shadow(0 8px 20px rgba(0,0,0,.5));
  opacity: 0;
  animation:
    plLogoIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards,
    plFloat 5.5s ease-in-out 1.1s infinite;
}
@keyframes plLogoIn{
  0%   { opacity: 0; transform: scale(.55) rotate(-14deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes plFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.pl-brand{
  text-align: center;
  color: var(--pl-muted);
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 4px 0 26px;
  opacity: 0;
  animation: plFadeUp .7s ease .5s forwards;
}

/* ---------- Tarjeta ---------- */
.pl-card{
  width: 100%;
  background: var(--pl-card-bg);
  border: 1px solid var(--pl-card-border);
  border-radius: 18px;
  padding: 34px 30px 30px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 25px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0;
  transform: translateY(24px);
  animation: plFadeUp .8s cubic-bezier(.2,.8,.2,1) .35s forwards;
}
@keyframes plFadeUp{
  to{ opacity: 1; transform: translateY(0); }
}

.pl-title{
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
  color: var(--pl-ink);
  text-align: center;
}
.pl-underline{
  width: 46px;
  height: 3px;
  margin: 10px auto 26px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pl-orange), var(--pl-gold));
  transform: scaleX(0);
  transform-origin: center;
  animation: plUnderline .6s ease .75s forwards;
}
@keyframes plUnderline{ to{ transform: scaleX(1); } }

.pl-field{
  position: relative;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  animation: plFadeUp .55s ease forwards;
}
.pl-field.f1{ animation-delay: .85s; }
.pl-field.f2{ animation-delay: .95s; }
.pl-field.f3{ animation-delay: 1.05s; }

.pl-field .pl-ic{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pl-muted);
  font-size: 14px;
  pointer-events: none;
  transition: color .2s ease;
}

.pl-input, .pl-select{
  width: 100%;
  padding: 13px 16px 13px 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--pl-ink);
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.pl-select{ cursor: pointer; }
.pl-input::placeholder{ color: var(--pl-muted); }

.pl-input:focus, .pl-select:focus{
  border-color: var(--pl-gold);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(245,166,35,.18);
}
.pl-field:focus-within .pl-ic{ color: var(--pl-gold); }

.pl-select-wrap{ position: relative; }
.pl-select-wrap .pl-caret{
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pl-muted);
  font-size: 11px;
  pointer-events: none;
}
.pl-select option{ background: #101a2e; color: var(--pl-ink); }

.pl-btn{
  position: relative;
  overflow: hidden;
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #1a1206;
  background: linear-gradient(135deg, var(--pl-gold), var(--pl-orange));
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 26px rgba(232,114,12,.35);
  opacity: 0;
  transform: translateY(10px);
  animation: plFadeUp .55s ease 1.15s forwards;
}
.pl-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(232,114,12,.45); }
.pl-btn:active{ transform: translateY(0); }
.pl-btn .pl-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: scale(0);
  animation: plRipple .6s ease-out;
  pointer-events: none;
}
@keyframes plRipple{ to{ transform: scale(2.6); opacity: 0; } }

.pl-msg{
  min-height: 4px;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
}

.pl-footer{
  margin-top: 26px;
  text-align: center;
  color: var(--pl-muted);
  font-size: 11.5px;
  letter-spacing: .4px;
  opacity: 0;
  animation: plFadeUp .7s ease 1.3s forwards;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px){
  .pl-logo-wrap{ width: 280px; height: 280px; }
  .pl-logo{ width: 208px; }
  .pl-card{ padding: 28px 22px 24px; border-radius: 16px; }
}

/* ---------- Accesibilidad: respeta "reducir movimiento" ---------- */
@media (prefers-reduced-motion: reduce){
  body.pl-body, .pl-logo, .pl-ring, .pl-particle, .pl-card, .pl-field, .pl-btn, .pl-brand, .pl-underline, .pl-footer{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}