/* ============================================================
   JW EN VIVO — LOGIN PREMIUM (Fase 8)
   Familia azul tecnológica para las tres páginas de acceso
   (/index.php, /apps/index.php, /admin/index.php), basada en
   design-reference/login-blue-glass-reference.png:
   fondo azul marino profundo con luz ambiental cian, panel
   vertical translúcido de borde luminoso fino, controles azul
   oscuro con icono, botón azul. Elegante, sin neón excesivo.
   Estas páginas cargan SOLO design-tokens.css + este archivo.
   Estiliza el marcado existente (.menu/.box/.login-box/.inputBox):
   no cambia nombres, campos ni comportamiento del formulario.
   ============================================================ */

/* ---------- Base de página ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.jv-login {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--jv-font-sans);
  color: var(--jv-login-text);
  background:
    radial-gradient(90rem 60rem at 78% -10%, rgba(46, 168, 232, 0.20), transparent 55%),
    radial-gradient(70rem 50rem at 8% 110%, rgba(18, 68, 107, 0.55), transparent 60%),
    radial-gradient(40rem 28rem at 92% 78%, rgba(122, 208, 255, 0.10), transparent 60%),
    linear-gradient(160deg, var(--jv-login-bg-2) 0%, var(--jv-login-bg-1) 58%, #060f1b 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}
body.jv-login ::selection { background: rgba(122, 208, 255, 0.3); }

body.jv-login :is(a, button, input, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--jv-login-focus);
  border-radius: 8px;
}

/* ---------- Navegación real (barra superior) ---------- */
body.jv-login .menu {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 19, 33, 0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122, 208, 255, 0.14);
}
body.jv-login .menu .container {
  max-width: 1180px; margin: 0 auto;
  padding: 0 20px;
  display: flex; align-items: center; gap: 16px;
  min-height: 58px;
}
body.jv-login .menu .logo {
  font-family: var(--jv-font-display);
  font-weight: 700; font-size: 19px;
  color: #eaf4fc; text-decoration: none;
  letter-spacing: 0.01em;
}
body.jv-login .menu ul {
  list-style: none; display: flex; gap: 4px;
  margin: 0 0 0 auto; padding: 0;
}
body.jv-login .menu ul li a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  color: var(--jv-login-text-2);
  font-weight: 600; font-size: 14.5px;
  text-decoration: none; border-radius: 8px;
  transition: color var(--jv-dur) var(--jv-ease), background var(--jv-dur) var(--jv-ease);
  cursor: pointer;
}
body.jv-login .menu ul li a:hover {
  color: #fff; background: rgba(122, 208, 255, 0.10);
}
body.jv-login .menu-btn { display: none; cursor: pointer; padding: 10px; margin-left: auto; }
body.jv-login .menu-btn .btn-line {
  width: 22px; height: 2px; background: #cfe7fa; margin: 5px 0; border-radius: 2px;
}

/* ---------- Escenario ---------- */
body.jv-login .box {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vh, 64px) 16px 48px;
  position: relative;
}
/* halo de luz tras el panel */
body.jv-login .box::before {
  content: "";
  position: absolute;
  width: min(640px, 94vw); height: min(640px, 94vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 168, 232, 0.22), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
}
body.jv-login .page-icon-shadow { display: none; }

/* ---------- Panel translúcido ---------- */
body.jv-login .login-box {
  position: relative;
  width: min(100%, 400px);
  padding: 44px 34px 38px;
  border-radius: 26px;
  background:
    linear-gradient(168deg, rgba(58, 128, 178, 0.16), rgba(14, 42, 68, 0.34) 40%, rgba(10, 30, 51, 0.44));
  border: 1px solid var(--jv-login-panel-line);
  box-shadow:
    0 0 0 1px rgba(9, 30, 51, 0.35),
    0 34px 90px -30px rgba(2, 10, 20, 0.9),
    inset 0 1px 0 rgba(180, 226, 255, 0.22);
  backdrop-filter: blur(14px);
}
/* destellos laterales sutiles del borde (como en la referencia) */
body.jv-login .login-box::before,
body.jv-login .login-box::after {
  content: "";
  position: absolute;
  width: 3px; height: 88px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(122, 208, 255, 0.75), transparent);
  filter: blur(1px);
  pointer-events: none;
}
body.jv-login .login-box::before { left: -2px; top: 24%; }
body.jv-login .login-box::after { right: -2px; bottom: 20%; height: 66px; }

/* ---------- Icono/marca circular superior ---------- */
body.jv-login .page-icon {
  width: 92px; height: 92px;
  margin: -90px auto 6px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, rgba(46, 168, 232, 0.35), rgba(10, 30, 51, 0.9) 70%);
  border: 1.5px solid var(--jv-login-cyan);
  box-shadow:
    0 0 0 6px rgba(10, 30, 51, 0.55),
    0 0 26px rgba(122, 208, 255, 0.35),
    inset 0 1px 0 rgba(180, 226, 255, 0.3);
}
body.jv-login .page-icon svg {
  width: 40px; height: 40px;
  stroke: var(--jv-login-cyan);
}

body.jv-login .form { text-align: center; }
body.jv-login .form > br { display: none; }
/* la ilustración de stock del login anterior queda fuera de la composición:
   el icono circular luminoso asume el rol de marca (solo decorativo) */
body.jv-login .form picture,
body.jv-login .logo-img { display: none; }
body.jv-login h2 {
  font-family: var(--jv-font-display);
  font-weight: 640;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: #f2f9ff;
  margin: 10px 0 24px;
}

/* ---------- Controles ---------- */
body.jv-login .inputBox {
  position: relative;
  margin: 0 0 14px;
  text-align: left;
}
body.jv-login .inputBox > i { display: none; }

/* icono izquierdo según el tipo de control */
body.jv-login .inputBox::before {
  content: "";
  position: absolute;
  left: 15px; top: 50%;
  width: 19px; height: 19px;
  transform: translateY(-50%);
  background-repeat: no-repeat; background-size: contain;
  pointer-events: none;
  opacity: 0.9;
  z-index: 2;
}
body.jv-login .inputBox:has(select)::before,
body.jv-login .inputBox:has(input[name="username"])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ad0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
body.jv-login .inputBox:has(input[type="password"])::before,
body.jv-login .inputBox:has(input[data-jv-pass])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237ad0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

body.jv-login .inputBox input,
body.jv-login .inputBox select {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px 12px 46px;
  border-radius: 10px;
  border: 1px solid var(--jv-login-control-line);
  background-color: var(--jv-login-control) !important;
  color: var(--jv-login-text) !important;
  font-family: var(--jv-font-sans);
  font-size: 15.5px;
  font-weight: 500;
  transition: border-color var(--jv-dur) var(--jv-ease), background var(--jv-dur) var(--jv-ease);
  appearance: none;
  -webkit-appearance: none;
}
body.jv-login .inputBox input::placeholder { color: var(--jv-login-text-2); opacity: 1; }
body.jv-login .inputBox input:hover,
body.jv-login .inputBox select:hover { border-color: #2e6ea3; }
body.jv-login .inputBox input:focus,
body.jv-login .inputBox select:focus {
  border-color: var(--jv-login-cyan);
  box-shadow: var(--jv-login-focus);
  outline: none;
}
body.jv-login .inputBox input[readonly] { cursor: default; font-weight: 600; }
body.jv-login .inputBox select {
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 24 24' fill='none' stroke='%237ad0ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px !important;
}
body.jv-login .inputBox select option { background: #0b2946; color: #eaf4fc; font-weight: 500; }

/* autofill de navegador en oscuro */
body.jv-login .inputBox input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--jv-login-control) inset;
  -webkit-text-fill-color: var(--jv-login-text);
  caret-color: var(--jv-login-text);
}

/* mostrar/ocultar contraseña (botón accesible añadido; no toca backend) */
body.jv-login .jv-pass-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--jv-login-text-2);
  border-radius: 8px;
  z-index: 2;
}
body.jv-login .jv-pass-toggle:hover { color: var(--jv-login-cyan); }
body.jv-login .jv-pass-toggle svg { width: 20px; height: 20px; }
body.jv-login .inputBox:has(.jv-pass-toggle) input { padding-right: 50px; }

/* ---------- Botón de entrada ---------- */
body.jv-login .botones_login { margin-top: 22px; }
body.jv-login .btn-login {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(122, 208, 255, 0.35);
  border-radius: 10px;
  /* WCAG AA (Fase 10): ambos extremos del degradado dan ≥4.5:1 con blanco */
  background: linear-gradient(180deg, #1d7ab8, #175f98);
  color: #ffffff;
  font-family: var(--jv-font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 34px -14px rgba(30, 136, 210, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: box-shadow var(--jv-dur) var(--jv-ease), border-color var(--jv-dur) var(--jv-ease), transform var(--jv-dur) var(--jv-ease);
}
body.jv-login .btn-login:hover {
  border-color: var(--jv-login-cyan);
  box-shadow: 0 16px 40px -12px rgba(46, 168, 232, 0.7), 0 0 0 1px rgba(122, 208, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
body.jv-login .btn-login:active { transform: translateY(1px); }

/* ---------- Mensajes reales de error (admin) ---------- */
body.jv-login .admin-login-error {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(169, 44, 33, 0.18);
  border: 1px solid rgba(255, 138, 125, 0.45);
  color: #ffc9c2;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
}
body.jv-login .admin-login-warning {
  background: rgba(192, 124, 20, 0.16);
  border-color: rgba(246, 185, 92, 0.45);
  color: #f8d9a8;
}

/* ---------- Entrada suave única (respeta reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  body.jv-login .login-box {
    animation: jv-login-in 420ms var(--jv-ease) backwards;
  }
  @keyframes jv-login-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  body.jv-login .menu ul {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(7, 19, 33, 0.97);
    border-bottom: 1px solid rgba(122, 208, 255, 0.14);
    display: none;
    padding: 6px 12px 12px;
  }
  body.jv-login .menu ul.active { display: flex; }
  body.jv-login .menu ul li a { width: 100%; min-height: 48px; }
  body.jv-login .menu-btn { display: block; }
  body.jv-login .login-box { padding: 40px 22px 30px; border-radius: 22px; }
  body.jv-login .page-icon { width: 80px; height: 80px; margin-top: -80px; }
  body.jv-login .page-icon svg { width: 34px; height: 34px; }
  body.jv-login h2 { font-size: 21px; }
}
@media (max-height: 700px) {
  body.jv-login .box { padding-top: 60px; }
  body.jv-login .logo-img { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  body.jv-login *, body.jv-login *::before, body.jv-login *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}