/* ============================================================
   CORE (Operaciones / Entrenamiento) · Login v1 (2026-10-01)
   Logo nuevo + entrada animada (splash que vuela a su sitio)
   + encabezado renovado. Solo afecta a index.html.
   Se carga DESPUÉS de styles.css y sobreescribe el bloque .login-*.
   ============================================================ */

:root {
  --lg-ease: cubic-bezier(.4, 0, .2, 1);
  --lg-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lg-red-glow: rgba(228, 0, 43, .55);
}

/* ---------- Fondo de la página ---------- */
.login-page {
  background:
    radial-gradient(900px 600px at 12% 18%, rgba(228, 0, 43, .22), transparent 60%),
    radial-gradient(700px 500px at 88% 90%, rgba(255, 45, 85, .10), transparent 60%),
    linear-gradient(135deg, #0b0f1a 0%, #161d2c 46%, #f4f6fa 46%, #ffffff 100%);
}

/* ---------- SPLASH: el logo aparece grande y vuela a la tarjeta ---------- */
.login-splash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(560px 560px at 50% 46%, rgba(228, 0, 43, .30), transparent 70%),
    #0b0f1a;
  transition: opacity .45s var(--lg-ease);
}
.login-splash.out { opacity: 0; pointer-events: none; }
.login-splash.done { display: none; }

.login-splash-logo {
  position: relative;
  width: min(46vw, 230px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  animation: lgSplashIn .6s var(--lg-spring) both;
}
.login-splash-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Colonel blanco (fondo oscuro) → se funde al Colonel negro mientras aterriza en la tarjeta blanca */
.login-splash-logo .for-dark {
  filter: drop-shadow(0 0 22px rgba(228, 0, 43, .45)) drop-shadow(0 18px 30px rgba(0, 0, 0, .55));
}
.login-splash-logo .for-light { opacity: 0; }

@keyframes lgSplashIn {
  from { opacity: 0; transform: scale(.4) rotate(-8deg); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.login-splash-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid rgba(228, 0, 43, .7);
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
  animation: lgSplashRing 1.15s .15s ease-out both;
}
.login-splash-ring.r2 { animation-delay: .38s; border-color: rgba(255, 255, 255, .35); }
@keyframes lgSplashRing {
  0%   { opacity: .9; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(5.5); }
}

.login-splash-text {
  position: absolute;
  left: 50%;
  top: calc(46% + min(27vw, 140px));
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #a4acbd;
  animation: lgSplashTxt .6s .25s var(--lg-ease) both;
}
.login-splash-text span { color: #ff2d55; text-shadow: 0 0 14px var(--lg-red-glow); }
@keyframes lgSplashTxt {
  from { opacity: 0; transform: translate(-50%, 10px); letter-spacing: .6em; }
  to   { opacity: 1; transform: translateX(-50%); letter-spacing: .34em; }
}

/* Mientras el splash está activo, la tarjeta espera escondida */
.splash-pending .login-card { opacity: 0; }
.splash-pending .login-quick-tools { opacity: 0; }
.login-card { transition: opacity .55s var(--lg-ease); }
.splash-pending .login-brand .brand-logo img,
.splash-flying .login-brand .brand-logo img { opacity: 0; }

/* ---------- Encabezado de la tarjeta ---------- */
.login-card {
  border-radius: 22px;
  padding: clamp(24px, 4vw, 40px);
}

.login-brand {
  display: flex;
  gap: clamp(16px, 2.6vw, 26px);
  align-items: center;
}

.login-brand .brand-logo {
  position: relative;
  width: clamp(84px, 11vw, 112px);
  height: clamp(84px, 11vw, 112px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.login-brand .brand-logo::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(228, 0, 43, .22), transparent 68%);
  opacity: .45;
  animation: lgPulse 3.6s ease-in-out infinite;
}
.login-brand .brand-logo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .18));
  transition: opacity .25s;
}
.login-brand .brand-logo.landed { animation: lgLand .6s var(--lg-spring); }
.login-brand .brand-logo.landed::before { animation: lgPulse 3.6s ease-in-out infinite, lgFlash .6s ease-out; }
@keyframes lgPulse { 0%, 100% { transform: scale(.9); opacity: .35; } 50% { transform: scale(1.1); opacity: .7; } }
@keyframes lgLand  { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes lgFlash { 0% { opacity: 1; transform: scale(1.8); } 100% { opacity: .4; transform: scale(1); } }

.login-heading {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.login-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #64748b;
}
.login-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e4002b, #ff2d55);
}

.login-brand h1,
.login-core-title {
  margin: 0;
  display: block;
  line-height: .92;
}

.login-core-wordmark {
  display: block;
  max-width: 100%;
  font-size: clamp(30px, 7.4cqi, 56px);
  font-weight: 950;
  line-height: .92;
  letter-spacing: -.035em;
  color: #0f172a;
  white-space: nowrap;
  /* anula el shine antiguo de styles.css */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  text-shadow: none;
  animation: none;
}
.login-core-wordmark em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(100deg, #e4002b 0%, #ff2d55 55%, #e4002b 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: lgRedShine 5s ease-in-out infinite;
}
@keyframes lgRedShine {
  0%, 20% { background-position: 0% 50%; }
  60%, 100% { background-position: 100% 50%; }
}

/* Texto que se revela palabra por palabra cuando el logo aterriza */
.login-core-wordmark .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
}
.login-heading .login-eyebrow,
.login-heading .login-core-tagline,
.login-heading .login-core-bar {
  opacity: 0;
  transform: translateY(10px);
}
.brand-ready .login-core-wordmark .w {
  animation: lgWordIn .7s var(--lg-spring) both;
}
.brand-ready .login-core-wordmark .w:nth-child(2) { animation-delay: .12s; }
.brand-ready .login-heading .login-eyebrow      { animation: lgRise .5s .05s var(--lg-ease) both; }
.brand-ready .login-heading .login-core-bar     { animation: lgBar .7s .35s var(--lg-ease) both; }
.brand-ready .login-heading .login-core-tagline { animation: lgRise .55s .4s var(--lg-ease) both; }
@keyframes lgWordIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes lgRise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgBar    { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

.login-core-bar {
  display: block;
  width: 64px;
  height: 4px;
  margin: 12px 0 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e4002b, #ff2d55 70%, rgba(255, 45, 85, .2));
  transform-origin: left center;
}

.login-core-tagline {
  display: block;
  margin: 0;
  color: #475569;
  font-size: clamp(12px, 1.5vw, 14.5px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: none;
}
.login-core-tagline b { color: #e4002b; font-weight: 900; }

/* ---------- Formulario: ajustes finos ---------- */
.login-form { margin-top: 26px; }
.login-form input:focus {
  border-color: rgba(228, 0, 43, .55);
  box-shadow: 0 0 0 4px rgba(228, 0, 43, .12);
}

/* ---------- Móvil ---------- */
@media (max-width: 560px) {
  .login-page {
    background:
      radial-gradient(520px 420px at 50% 0%, rgba(228, 0, 43, .26), transparent 65%),
      linear-gradient(150deg, #0b0f1a 0 34%, #eef2f7 34% 100%);
  }
  .login-card { border-radius: 18px; padding: 20px 18px; }
  .login-brand { gap: 14px; }
  .login-brand .brand-logo { width: 72px; height: 72px; }
  .login-eyebrow { font-size: 9.5px; letter-spacing: .14em; margin-bottom: 6px; white-space: nowrap; gap: 6px; }
  .login-eyebrow::before { width: 14px; }
  .login-core-wordmark { font-size: clamp(26px, 11cqi, 36px); white-space: normal; text-wrap: balance; }
  .login-core-bar { width: 48px; height: 3px; margin: 9px 0 8px; }
  .login-core-tagline { font-size: 10.5px; letter-spacing: .1em; }
  .login-splash-logo { width: min(54vw, 210px); }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-splash { display: none !important; }
  .splash-pending .login-card { opacity: 1; transform: none; }
  .splash-pending .login-brand .brand-logo img { opacity: 1; }
  .login-core-wordmark .w,
  .login-heading .login-eyebrow,
  .login-heading .login-core-tagline,
  .login-heading .login-core-bar { opacity: 1; transform: none; filter: none; animation: none !important; }
  .login-core-wordmark em,
  .login-brand .brand-logo::before { animation: none; }
}