/*
  Theme Flux para FluxGuardian: alinea el STS con la identidad visual de FluxNet.Ng
  (tipografía Poppins, primario #3347ec y estética "liquid glass": fondo con radiales
  suaves y superficies de vidrio). Los tokens salen de FluxNet.Ng:
    - assets/theme/theme-flux.scss        ($primaryColor: #3347ec)
    - assets/layout/css/layout-flux.scss  (topbar #4b6cb7 → #182848)
    - assets/sass/overrides/_liquid_glass.scss (vars --lg-*)
  Se carga último (AdminConfiguration:CustomThemeCss), después de bootstrap y web.css.
*/

/* ---- Tipografía ------------------------------------------------------------------ */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---------------------------------------------------------------------- */

:root {
  --flux-primary: #3347ec;
  --flux-primary-dark: #2036d8;
  --flux-primary-darker: #1d2fc0;
  --flux-ink: #182848;               /* azul oscuro del topbar Ng: títulos y logo */
  --flux-focus-ring: rgba(51, 71, 236, 0.25);

  --lg-surface: rgba(255, 255, 255, 0.6);
  --lg-surface-strong: rgba(255, 255, 255, 0.82);
  --lg-surface-overlay: rgba(255, 255, 255, 0.98);
  --lg-border: rgba(255, 255, 255, 0.55);
  --lg-shadow: 0 8px 32px rgba(31, 38, 135, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --lg-shadow-chrome: 0 8px 30px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* El mismo backdrop de FluxNet.Ng (liquid glass) */
  --lg-body-bg:
    radial-gradient(1200px 820px at 8% -5%, rgba(129, 140, 248, 0.22), transparent 60%),
    radial-gradient(1000px 720px at 95% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
    radial-gradient(1100px 1000px at 50% 115%, rgba(244, 114, 182, 0.16), transparent 60%),
    linear-gradient(135deg, #eef2ff 0%, #f6f6fb 38%, #edfcff 68%, #fdf2f8 100%);
}

/* ---- Base ------------------------------------------------------------------------ */

body {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  color: #212529;
  background: var(--lg-body-bg) !important;
  background-attachment: fixed !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--flux-ink);
  font-weight: 600;
}

a {
  color: var(--flux-primary);
}
a:hover {
  color: var(--flux-primary-darker);
}

/* ---- Header (chrome de vidrio, como el topbar de Ng) ------------------------------ */

.menu {
  background: var(--lg-surface);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lg-border) !important;
  box-shadow: var(--lg-shadow-chrome) !important;
}

.menu-logo a.logo {
  color: var(--flux-ink);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---- Tarjetas (vidrio) ------------------------------------------------------------ */

.card {
  background: var(--lg-surface-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--lg-border);
  border-radius: 14px;
  box-shadow: var(--lg-shadow);
}

.card .card-header {
  background: transparent;
  border-bottom: 1px solid rgba(24, 40, 72, 0.08);
  font-weight: 600;
  color: var(--flux-ink);
  border-radius: 14px 14px 0 0;
}

/* la home usa .box-shadow encima de .card: que no pise la sombra de vidrio */
.card.box-shadow {
  box-shadow: var(--lg-shadow) !important;
}

/* ---- Botones ----------------------------------------------------------------------- */

.btn {
  border-radius: 10px;
  font-weight: 500;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.cc-btn {
  color: #ffffff;
  background-color: var(--flux-primary);
  border-color: var(--flux-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px rgba(51, 71, 236, 0.28);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--flux-primary-dark);
  border-color: var(--flux-primary-dark);
  color: #ffffff;
}
.btn-primary:focus,
.btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--flux-focus-ring);
}

.btn-outline-primary {
  color: var(--flux-primary);
  border-color: var(--flux-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  background-color: var(--flux-primary);
  border-color: var(--flux-primary);
  color: #ffffff;
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--flux-focus-ring);
}

.badge-primary {
  background-color: var(--flux-primary);
}

/* Secundarios al patrón "soft glass" de Ng (btn text/secondary sobre vidrio):
   Cancelar (btn-secondary) y Olvidé mi contraseña (btn-info) dejan el gris/teal. */
.btn-secondary,
.btn-info {
  color: var(--flux-ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(24, 40, 72, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-secondary:hover,
.btn-info:hover,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled):active {
  color: var(--flux-ink);
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(24, 40, 72, 0.28);
}
.btn-secondary:focus,
.btn-info:focus {
  box-shadow: 0 0 0 0.2rem var(--flux-focus-ring);
}

/* ---- Formularios ------------------------------------------------------------------- */

.form-control {
  background-color: #ffffff; /* inputs sólidos, por legibilidad (igual que en Ng) */
  border: 1px solid #d8ddf0;
  border-radius: 10px;
}
.form-control:focus {
  border-color: var(--flux-primary);
  box-shadow: 0 0 0 0.2rem var(--flux-focus-ring);
}

.input-group-text {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid #d8ddf0;
  border-radius: 10px;
  color: var(--flux-ink);
}
.input-group-prepend .input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--flux-primary);
  border-color: var(--flux-primary);
}

/* el switch verde de Skoruba pasa al primario Flux */
input:checked + .bg-primary {
  background-color: var(--flux-primary) !important;
}

/* ---- Dropdowns / listas ------------------------------------------------------------- */

.dropdown-menu {
  background: var(--lg-surface-overlay);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--lg-border);
  border-radius: 12px;
  box-shadow: var(--lg-shadow);
  overflow: hidden;
}
.dropdown-item:active {
  background-color: var(--flux-primary);
}

.list-group-item {
  background: transparent;
}

/* ---- Tablas (páginas de Manage) ----------------------------------------------------- */

.table thead th {
  color: var(--flux-ink);
  border-top: none;
}

/* ---- Paginación / navs --------------------------------------------------------------- */

.page-item.active .page-link {
  background-color: var(--flux-primary);
  border-color: var(--flux-primary);
}
.page-link {
  color: var(--flux-primary);
}

.nav-pills .nav-link.active {
  background-color: var(--flux-primary);
}

/* ---- Footer --------------------------------------------------------------------------- */

footer.border-top {
  border-top: 1px solid rgba(24, 40, 72, 0.1) !important;
  color: #5b616a;
}

/* ---- Detalles ---------------------------------------------------------------------------- */

.welcome-block h1 {
  color: var(--flux-ink);
}
.welcome-block img {
  max-height: 96px;
}

#qrCode canvas {
  border-radius: 10px;
}