/* ========= Fondo global para todo el sitio ========= */
/* Guardar como: /_assets/css/bg.css  (ajustar ruta del <link>) */
:root{
  /* Rutas de las imágenes que subiste */
  --bg-1920:   url("/app/img/bg/bg-network-1920.png");
  --bg-2560:   url("/app/img/bg/bg-network-2560.png");
  --bg-3840:   url("/app/img/bg/bg-network-3840.png");
  --bg-mobile: url("/app/img/bg/bg-network-mobile-1080x1920.png");

  /* Opacidad del velo oscuro (más alto = más tenue el fondo) */
  --bg-tint: 0.35;
}

html, body{ height:100%; }
body{
  min-height:100dvh;
  margin:0;
  background:#0a0f1a; /* fallback sólido por si no carga la imagen */
}

/* Capa de imagen fija detrás de todo */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:var(--bg-1920);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* suavizar (hacer el fondo más tenue/menos contrastado) */
  filter: brightness(.65) saturate(.9);
  will-change: transform;
}

/* Velo oscuro arriba de la imagen para mejorar legibilidad */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: rgba(0,0,0,var(--bg-tint));
}

/* Versión vertical para celulares */
@media (max-aspect-ratio: 3/4){
  body::before{ background-image:var(--bg-mobile); }
}

/* Usar resoluciones mayores según ancho de pantalla */
@media (min-width: 2000px){
  body::before{ background-image:var(--bg-2560); }
}
@media (min-width: 3200px){
  body::before{ background-image:var(--bg-3840); }
}

/* ========= Cajas / paneles ========= */
/* Estilo oscuro translúcido por defecto (login, cards, etc.) */
.card, .panel, .login-box, .content-card{
  background: rgba(13,18,28,0.85);
  color:#e6eaf2;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Inputs dentro de cajas oscuras */
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.login-box input{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e6eaf2;
}
.card input::placeholder,
.login-box input::placeholder{ color:#c6ccd8; }
.card a, .login-box a{ color:#a8c7ff; }

/* Si alguna hoja vieja pone color de fondo al body o .page, lo anulamos */
body, .page{ background: transparent !important; }

/* ========= Impresión ========= */
@media print{
  body::before, body::after{ display:none !important; }
  .card, .panel, .login-box, .content-card{
    background:#fff !important;
    color:#000 !important;
    box-shadow:none !important;
  }
}