/* Login v4: la misma puerta, en azul — copia de /v3/css/login-azul.css con el fondo apuntando a
   la imagen 7 definitiva de Diego. Pisa las variables/colores verdes de /css/portal.css.
   portal.css define --accent/--accent-deep/--line-glow y además usa varios rgba(59,236,151,.. )
   y un verde hardcodeado en el degradé del botón (#4ff2a4) que no pasan por variable:
   hay que pisar cada uno para que no quede ningún verde visible en /v4/login.html. */
:root {
  --accent: #5ad0ff; --accent-deep: #3090d8; --bg: #04060f;
  --line: #1c3a55; --line-glow: rgba(90,208,255,.4); --field: rgba(4,10,20,.72);
}
/* Task 13 (2026-09-10): la foto del portal ya no es la del dragón VERDE de /css/portal.css teñida
   a mano — en v4 es la imagen 7 de Diego (`imagenes/campus/login.jpg`, el dragón azul de frente con la luna;
   foco 62%/62% para que la cabeza no quede debajo de la barra superior y el cuerpo llene el lado derecho)
   azul), así que se fue el `filter: hue-rotate(...)` que además apagaba el contraste de toda la
   escena. Sigue viviendo en un pseudoelemento fijo detrás de todo (no en `body`) porque los
   degradés de oscurecimiento de portal.css van en la MISMA lista, antes de la imagen (o sea, por
   encima).
   Fix round 1 (revisión task-18, finding 9): `contain` + una copia borrosa en `cover` de relleno
   (dos capas, `body::after`/`body::before`) fue la corrección de la task 15 para que la imagen
   ENTERA entrara sin recortarse — pero a los anchos reales del login (1280×720, 1920×937) dejaba
   bandas notorias del relleno borroso a los costados. Se pasa a UNA sola capa en `cover` con
   `background-position:70% 40%` — ese punto deja la puerta Y el dragón dentro del encuadre en los
   dos anchos probados, y la tarjeta (tercio izquierdo, oscuro por el degradé) sigue leyéndose. Sin
   relleno borroso: con `cover` no queda caja vacía que tapar. */
body { background: var(--bg-oscuro, #04060f); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg,rgba(4,6,15,.82) 0%,rgba(4,6,15,.7) 26%,rgba(4,6,15,.3) 44%,rgba(4,6,15,0) 58%),
    linear-gradient(0deg,rgba(4,6,15,.35) 0%,rgba(4,6,15,0) 18%),
    url('/v4/imagenes/campus/login.jpg') 62% 62%/cover no-repeat;
}
@media (max-width:760px) {
  body::before {
    background:
      linear-gradient(0deg,rgba(4,6,15,.66),rgba(4,6,15,.66)),
      url('/v4/imagenes/campus/login.jpg') 62% 62%/cover no-repeat;
  }
}
/* v4 usa el logo definitivo de Diego (imagen 5, ya azul/celeste sobre negro): a diferencia del
   logo-dragón verde de v3, acá NO hay que rotarle el matiz — hacerlo lo desarmaría. */
.topbar { border-bottom-color: rgba(90,208,255,.14); }
/* Punto 7 (2026-09-22): "Pedir autorización por Discord" en autorizar-dispositivo.html */
.btn-soporte { display:block; margin-top:10px; padding:9px 12px; text-align:center; border:1px solid var(--line-glow);
  border-radius:10px; color:var(--accent); font-size:13px; text-decoration:none; }
.btn-soporte:hover { background:rgba(90,208,255,.08); }
.btn-soporte[hidden] { display:none; }
/* portal.css deja .card-logo en 46px (el dragón chico de v3): el logo redondo de v4 pedido a
   120px (paso 3, Task 1) necesita pisar esa altura acá. */
.card-logo { height: 120px; width: 120px; }
.portal-card {
  border-color: var(--line-glow);
  box-shadow: 0 0 46px rgba(90,208,255,.09), 0 26px 70px rgba(0,0,0,.65);
}
@keyframes glow {
  0%,100%{box-shadow:0 0 46px rgba(90,208,255,.09),0 26px 70px rgba(0,0,0,.65)}
  50%{box-shadow:0 0 64px rgba(90,208,255,.16),0 26px 70px rgba(0,0,0,.65)}
}
/* Revisión de accesibilidad (task 16 — 2026-09-10): el halo de foco estaba en alfa .14 sobre el
   fondo casi negro del login — prácticamente invisible. Sube a .5 (el mínimo pedido era .45). */
.field input:focus { box-shadow: 0 0 0 3px rgba(90,208,255,.5); }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 100px var(--bg); }
.btn-entrar {
  color: #03203a;
  background: linear-gradient(180deg,#8fe0ff,var(--accent-deep));
}
.btn-entrar:hover { box-shadow: 0 0 26px rgba(90,208,255,.35); }
.btn-entrar svg { stroke: #03203a; }
.divider::before,.divider::after { background: linear-gradient(90deg,transparent,rgba(90,208,255,.3),transparent); }
.aviso.show { background: rgba(90,208,255,.1); border-color: rgba(90,208,255,.4); color: #bfe4ff; }