/* Tema del VPN Server sobre Bootstrap 5.3. Respeta data-bs-theme (claro/oscuro):
   los colores de superficie se derivan de las variables de Bootstrap, con unos
   acentos propios. Solo CSS: no cambia la lógica. */

:root {
  --vpn-accent: #4f8cff;
  --vpn-accent-2: #22d3a6;
}

/* Fondo con gradientes de acento, distinto por tema */
[data-bs-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(79, 140, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 166, 0.1), transparent 55%),
    #0f1420;
}
[data-bs-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(79, 140, 255, 0.1), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 211, 166, 0.08), transparent 55%),
    #f4f6fb;
}
body {
  min-height: 100vh;
}

/* Navbar con blur; el color base lo da Bootstrap según el tema */
.navbar {
  background: var(--bs-tertiary-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bs-border-color) !important;
}
.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--vpn-accent), var(--vpn-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards: superficie de Bootstrap, borde sutil, hover vivo */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Botón primario con gradiente de marca */
.btn-success,
.btn-primary {
  background: linear-gradient(90deg, var(--vpn-accent), var(--vpn-accent-2));
  border: none;
  font-weight: 600;
  color: #fff;
}
.btn-success:hover,
.btn-primary:hover {
  filter: brightness(1.08);
  color: #fff;
}

/* Input: foco con el acento de marca */
.form-control:focus {
  border-color: var(--vpn-accent);
  box-shadow: 0 0 0 0.2rem rgba(79, 140, 255, 0.2);
}

/* Badge de estado del túnel (lo pinta el JS) */
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.status-dot.ok { background: var(--vpn-accent-2); box-shadow: 0 0 8px var(--vpn-accent-2); }
.status-dot.err { background: #ff5d6c; box-shadow: 0 0 8px #ff5d6c; }

/* Login centrado verticalmente */
.login-wrap {
  min-height: calc(100vh - 70px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 380px;
}