/* =========================================================
   Vigía — tema oscuro · Black Wolf Security
   Paleta heredada de la documentación visual del sistema.
   ========================================================= */
:root{
  --ink:#0a0a0a; --surface:#17181b; --surface-2:#1f2124;
  --line:rgba(212,165,116,0.16);
  --gold:#d4a574; --gold-bright:#e8c496;
  --text:#f2ede4; --text-dim:#9a958c;
  --green:#5a8a7c; --blue:#7c9cbf; --orange:#d4823f; --red:#c85f4f;
  --sidebar-w:250px;
}

[data-bs-theme="dark"]{
  --bs-body-bg:var(--ink);
  --bs-body-color:var(--text);
  --bs-emphasis-color:#fff;
  --bs-border-color:var(--line);
  --bs-primary:var(--gold);
  --bs-primary-rgb:212,165,116;
  --bs-link-color:var(--gold-bright);
  --bs-link-hover-color:#fff;
}

body{ background:var(--ink); color:var(--text); font-family:'Inter',system-ui,sans-serif; }
.display-font,.brand-name,h1,h2,h3,.h1,.h2,.h3{ font-family:'Oswald','Oswald',sans-serif; letter-spacing:.01em; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* --- Layout shell --- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--line);
  position:fixed; top:0; bottom:0; left:0; display:flex; flex-direction:column; z-index:1030;
  transition:transform .2s ease;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding:18px 20px; border-bottom:1px solid var(--line); }
.sidebar-brand svg{ width:28px; height:28px; }
.sidebar-brand .brand-name{ font-weight:700; font-size:20px; color:var(--text); }
.sidebar-brand .brand-sub{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.sidebar-nav{ padding:12px 10px; overflow-y:auto; flex:1; }
.sidebar-nav .nav-section{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); padding:14px 12px 6px; }
.sidebar-nav a{
  display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px;
  color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:500; margin-bottom:2px;
}
.sidebar-nav a:hover{ background:var(--surface-2); color:var(--text); }
.sidebar-nav a.active{ background:rgba(212,165,116,0.12); color:var(--gold-bright); }
.sidebar-nav a i{ width:18px; text-align:center; font-size:15px; }

.main-area{ flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:60px; background:rgba(10,10,10,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; position:sticky; top:0; z-index:1020;
}
.topbar .page-title{ font-size:17px; font-weight:600; }
.content{ padding:26px 22px 60px; }

/* --- Cards / surfaces --- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:600; }
.stat-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; }
.stat-card .num{ font-family:'Oswald',sans-serif; font-size:30px; font-weight:700; color:var(--gold-bright); line-height:1; }
.stat-card .lbl{ color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }
.stat-card .ico{ float:right; font-size:22px; color:var(--gold); opacity:.5; }

.table{ --bs-table-bg:transparent; --bs-table-color:var(--text); color:var(--text); }
.table thead th{ color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-color:var(--line); font-weight:600; }
.table td,.table th{ border-color:var(--line); vertical-align:middle; }

.form-control,.form-select{ background:var(--surface-2); border-color:var(--line); color:var(--text); }
.form-control:focus,.form-select:focus{ background:var(--surface-2); color:var(--text); border-color:var(--gold); box-shadow:0 0 0 .2rem rgba(212,165,116,.18); }
.form-control::placeholder{ color:var(--text-dim); }

.btn-primary{ --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold); --bs-btn-color:#1a1408;
  --bs-btn-hover-bg:var(--gold-bright); --bs-btn-hover-border-color:var(--gold-bright); --bs-btn-hover-color:#1a1408;
  --bs-btn-active-bg:var(--gold-bright); font-weight:600; }
.btn-outline-primary{ --bs-btn-color:var(--gold-bright); --bs-btn-border-color:var(--gold);
  --bs-btn-hover-bg:var(--gold); --bs-btn-hover-border-color:var(--gold); --bs-btn-hover-color:#1a1408; }

a{ color:var(--gold-bright); }
.text-gold{ color:var(--gold-bright)!important; }
.bg-surface{ background:var(--surface)!important; }
.border-line{ border-color:var(--line)!important; }

/* --- Login / auth --- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:410px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:34px; }
.auth-logo{ text-align:center; margin-bottom:22px; }
.auth-logo svg{ width:48px; height:48px; }

/* --- Carnet estilo ID card (referencia White Sands) ---
   Todo se mide en cqw (% del ancho de la tarjeta) para escalar idéntico a cualquier tamaño. */
.vcarnet{
  --cc:#1e2c55;
  container-type:inline-size;
  width:100%; max-width:520px; aspect-ratio:1.586/1; border-radius:3.2cqw; overflow:hidden;
  background:#eef2f7; color:#1f2937; font-family:'Inter',Arial,sans-serif;
  box-shadow:0 12px 34px rgba(0,0,0,.35); display:flex; flex-direction:column;
}
.vc-head{ background:var(--cc); color:#fff; padding:3.6cqw 4.5cqw 3cqw; }
.vc-res{ font-weight:800; font-size:4.6cqw; line-height:1.08; }
.vc-sub{ font-size:2.2cqw; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-top:1.2cqw; }
.vc-body{ position:relative; flex:1; display:flex; align-items:center; gap:2.8cqw; padding:2.8cqw 4cqw;
  background:linear-gradient(160deg,#f7f9fc,#e9eef6); }
.vc-watermark{ position:absolute; left:4cqw; bottom:0.4cqw; font-size:11cqw; font-weight:800; line-height:1;
  color:var(--cc); opacity:.07; letter-spacing:.01em; pointer-events:none; }
.vc-person{ display:flex; align-items:center; gap:2.8cqw; flex:1; min-width:0; z-index:1; }
.vc-foto{ width:17cqw; height:17cqw; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:0.7cqw solid #cfe0f2; box-shadow:0 0 0 0.4cqw rgba(120,150,200,.25); background:#dfe6f0; }
.vc-foto-empty{ display:flex; align-items:center; justify-content:center; color:var(--cc); font-weight:800; font-size:6cqw; }
.vc-data{ min-width:0; }
.vc-name{ font-weight:800; font-size:4.9cqw; line-height:1.05; color:#1f2a44; }
.vc-id{ font-size:2.7cqw; color:#5b6b82; margin-top:0.7cqw; }
.vc-logo,.vc-qr{ width:20cqw; height:20cqw; background:#fff; border-radius:2.8cqw; flex-shrink:0; z-index:1;
  box-shadow:0 0.4cqw 1.8cqw rgba(0,0,0,.12); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.vc-logo svg{ width:11cqw; height:11cqw; }
.vc-logo-txt{ font-weight:800; font-size:2.5cqw; color:var(--cc); letter-spacing:.12em; margin-top:0.3cqw; }
.vc-qr .carnet-qr{ line-height:0; }
.vc-qr .carnet-qr img,.vc-qr .carnet-qr canvas{ width:16.5cqw !important; height:16.5cqw !important; }
.vc-foot{ background:var(--cc); color:#fff; padding:2.8cqw 4.5cqw; display:flex; align-items:center; gap:4cqw; }
.vc-flabel{ font-size:2cqw; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.55); }
.vc-fval{ font-weight:700; font-size:3cqw; margin-top:0.4cqw; }
.vc-estado{ margin-left:auto; padding:1.8cqw 4cqw; border-radius:6cqw; font-weight:700; font-size:2.8cqw; color:#fff; white-space:nowrap; }
.vc-estado.on{ background:#2fae5f; } .vc-estado.off{ background:#8a97a8; }

/* --- Tree / hierarchy --- */
.tree-node{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:9px; background:var(--surface-2); margin-bottom:8px; }
.tree-node.child{ margin-left:34px; background:transparent; border:1px dashed var(--line); }

/* --- Responsive --- */
.sidebar-backdrop{ display:none; }
@media (max-width:992px){
  .sidebar{ transform:translateX(-100%); }
  .sidebar.open{ transform:translateX(0); }
  .main-area{ margin-left:0; }
  .sidebar-backdrop.show{ display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1025; }
}

/* --- Utilidades --- */
.avatar-sm{ width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--surface-2); }
.scan-box{ border:2px dashed var(--gold); border-radius:14px; }
.pulse-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); display:inline-block; box-shadow:0 0 0 rgba(90,138,124,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(90,138,124,.5);} 70%{box-shadow:0 0 0 8px rgba(90,138,124,0);} 100%{box-shadow:0 0 0 0 rgba(90,138,124,0);} }