/* =========================================================
   GPS PREMIUM THEME v3
   Sidebar + Topbar PRO (sin logo duplicado)
   ========================================================= */

:root{
  --gps-bg-0:#040816;
  --gps-bg-1:#071127;
  --gps-bg-2:#0b1d3a;
  --gps-bg-3:#0f2b57;

  --gps-blue-1:#1d4ed8;
  --gps-blue-2:#2563eb;
  --gps-cyan:#06b6d4;
  --gps-accent:#3b82f6;

  --gps-text-1:#eaf2ff;
  --gps-text-2:#b7c5e4;
  --gps-text-3:#8ea3cc;

  --gps-border:rgba(97,146,255,.28);
  --gps-border-strong:rgba(130,175,255,.45);
  --gps-glow:0 0 0 1px rgba(77,130,255,.22),0 14px 30px rgba(3,10,28,.55);
  --gps-radius:14px;

  --gps-success:#22c55e;
  --gps-danger:#ef4444;
  --gps-warn:#f59e0b;

  --topbar-h:70px;

  /* Topbar tokens */
  --tb-bg-1:#0e2346;
  --tb-bg-2:#0b1d3b;
  --tb-bg-3:#0a1730;

  --tb-line:rgba(122,166,255,.28);
  --tb-line-soft:rgba(122,166,255,.18);

  --tb-text:#eaf2ff;
  --tb-text-soft:#b8c8e8;

  --tb-chip-bg:rgba(255,255,255,.06);
  --tb-chip-br:rgba(145,184,255,.35);

  --tb-btn-bg:rgba(255,255,255,.04);
  --tb-btn-br:rgba(138,177,255,.26);

  --tb-shadow:0 10px 26px rgba(2,8,22,.28);
}

/* ===== Base ===== */
body{
  background:#f3f7ff;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.app-menu.navbar-menu.gps-theme{
  background:
    radial-gradient(900px 300px at -120px -60px, rgba(37,99,235,.24), transparent 45%),
    radial-gradient(700px 260px at 140% 0%, rgba(6,182,212,.12), transparent 45%),
    linear-gradient(180deg, var(--gps-bg-2) 0%, var(--gps-bg-1) 45%, var(--gps-bg-0) 100%);
  border-right:1px solid rgba(93,141,255,.22);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.02);
  color:var(--gps-text-1);
}

/* Brand box sidebar */
.gps-theme .navbar-brand-box{
  background:
    radial-gradient(120px 60px at 10% 10%, rgba(37,99,235,.25), transparent 70%),
    linear-gradient(90deg, #0b1e3f 0%, #0a1731 100%);
  border-bottom:1px solid rgba(103,151,255,.25);
  min-height:74px;
  display:flex;
  align-items:center;
  padding-inline:14px;
}
.gps-theme .navbar-brand-box .logo{
  display:flex;
  align-items:center;
}
.gps-theme .navbar-brand-box .logo-lg img{
  height:26px !important;
  width:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 8px rgba(59,130,246,.35));
}

/* Botón hover lateral */
.gps-theme #vertical-hover{
  color:#cfe2ff;
  border:1px solid rgba(120,166,255,.25);
  border-radius:10px;
  background:rgba(255,255,255,.03);
}
.gps-theme #vertical-hover:hover{
  background:rgba(59,130,246,.18);
  border-color:rgba(120,166,255,.45);
}

/* Usuario sidebar */
.gps-theme .sidebar-user{
  background:linear-gradient(135deg, rgba(14,30,60,.95) 0%, rgba(7,17,39,.96) 100%);
  border:1px solid var(--gps-border);
  box-shadow:var(--gps-glow);
  border-radius:14px;
}
.gps-theme .sidebar-user .sidebar-user-name-text{ color:var(--gps-text-1); }
.gps-theme .sidebar-user .sidebar-user-name-sub-text{ color:var(--gps-text-2); }

/* Título menú */
.gps-theme .menu-title{
  margin-top:6px;
  margin-bottom:6px;
}
.gps-theme .menu-title span{
  color:#79a7ff !important;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:800;
  font-size:.68rem;
}

/* Links principales */
.gps-theme .navbar-nav .nav-link{
  color:var(--gps-text-2);
  border-radius:11px;
  margin:3px 8px;
  border:1px solid transparent;
  transition:all .2s ease;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.gps-theme .navbar-nav .nav-link i{
  color:#8ab3ff;
  font-size:1rem;
}
.gps-theme .navbar-nav .nav-link:hover{
  color:#fff;
  background:linear-gradient(90deg, rgba(37,99,235,.18), rgba(14,165,233,.10));
  border-color:rgba(95,146,255,.28);
  transform:translateX(2px);
}
.gps-theme .navbar-nav .nav-link:hover i{ color:#b9d2ff; }

.gps-theme .navbar-nav .nav-link.active,
.gps-theme .navbar-nav .show > .nav-link{
  background:linear-gradient(90deg, rgba(37,99,235,.30), rgba(6,182,212,.18));
  color:#fff !important;
  border-color:rgba(118,166,255,.42);
  box-shadow:inset 0 0 0 1px rgba(132,177,255,.18);
}
.gps-theme .navbar-nav .nav-link.active i,
.gps-theme .navbar-nav .show > .nav-link i{
  color:#d6e6ff;
}

/* Submenús */
.gps-theme .menu-dropdown .nav-link{
  margin-left:18px;
  padding-left:14px;
  border-left:2px solid rgba(97,146,255,.20);
  border-radius:8px;
}
.gps-theme .menu-dropdown .nav-link:hover{
  border-left-color:rgba(97,146,255,.55);
}

/* Scrollbar sidebar */
.gps-theme #scrollbar{
  scrollbar-width:thin;
  scrollbar-color:rgba(121,167,255,.35) transparent;
}
.gps-theme #scrollbar::-webkit-scrollbar{ width:8px; }
.gps-theme #scrollbar::-webkit-scrollbar-thumb{
  background:rgba(121,167,255,.35);
  border-radius:20px;
}

/* Panel premium GPS */
.gps-panel{
  margin:10px 10px 12px;
  padding:14px;
  border-radius:16px;
  background:
    radial-gradient(180px 80px at 95% 10%, rgba(59,130,246,.18), transparent 65%),
    linear-gradient(145deg, #07122a 0%, #040a19 65%, #030714 100%);
  border:1px solid rgba(106,153,255,.30);
  box-shadow:0 12px 30px rgba(1,6,19,.55), inset 0 1px 0 rgba(255,255,255,.03);
}
.gps-panel .title{
  color:#f2f7ff;
  font-weight:800;
  font-size:.98rem;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:.55rem;
}
.gps-panel .live-badge{
  padding:4px 10px;
  border-radius:999px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.03em;
  color:#9fe9ff;
  background:rgba(6,182,212,.15);
  border:1px solid rgba(34,211,238,.35);
}
.gps-panel .subtitle{
  margin-top:6px;
  color:var(--gps-text-2);
  font-size:.82rem;
}

/* Chips */
.gps-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.gps-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:6px 10px;
  font-size:.72rem;
  font-weight:800;
  border:1px solid transparent;
}
.gps-chip .dot{
  width:8px;
  height:8px;
  border-radius:50%;
}
.gps-chip.success{
  color:#b8ffd3;
  background:rgba(34,197,94,.14);
  border-color:rgba(34,197,94,.35);
}
.gps-chip.success .dot{
  background:var(--gps-success);
  box-shadow:0 0 10px rgba(34,197,94,.8);
}
.gps-chip.danger{
  color:#ffc2c2;
  background:rgba(239,68,68,.14);
  border-color:rgba(239,68,68,.35);
}
.gps-chip.danger .dot{
  background:var(--gps-danger);
  box-shadow:0 0 10px rgba(239,68,68,.8);
}
.gps-chip.warn{
  color:#ffe2ac;
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.35);
}
.gps-chip.warn .dot{
  background:var(--gps-warn);
  box-shadow:0 0 10px rgba(245,158,11,.8);
}

/* =========================================================
   TOPBAR PREMIUM PRO (CORREGIDO)
   ========================================================= */

#page-topbar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.0) 10%,
    rgba(59,130,246,.6) 35%,
    rgba(6,182,212,.7) 50%,
    rgba(59,130,246,.6) 65%,
    rgba(59,130,246,.0) 90%,
    transparent 100%
  );
  opacity:.6;
  pointer-events:none;
}

#page-topbar .navbar-header{
  min-height:var(--topbar-h);
  padding-inline:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Caja marca topbar */
#page-topbar .navbar-brand-box.horizontal-logo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:280px;
}

/* Anchor único del logo (nuevo) */
#page-topbar .logo-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  min-width:220px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(144,183,255,.24);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(2,8,22,.24);
  text-decoration:none;
  transition:all .2s ease;
}
#page-topbar .logo-brand:hover{
  transform:translateY(-1px);
  border-color:rgba(144,183,255,.40);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 22px rgba(2,8,22,.30);
}
#page-topbar .brand-logo{
  display:block;
  height:28px;
  width:auto;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(37,99,235,.22));
}

/* Oculta logos legacy si existen para evitar duplicado */
#page-topbar .logo-dark,
#page-topbar .logo-light{
  display:none !important;
}

/* Badge estado */
.gps-system-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--tb-chip-br);
  background:var(--tb-chip-bg);
  color:#e5efff;
  font-size:.70rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.gps-system-pill .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18), 0 0 10px rgba(34,197,94,.9);
}

/* Estado central opcional */
.gps-topbar-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:10px;
  padding-left:12px;
  border-left:1px dashed rgba(151,186,255,.35);
  color:var(--tb-text-soft);
  font-size:.80rem;
  white-space:nowrap;
}
.gps-topbar-status strong{
  color:var(--tb-text);
  font-weight:700;
}

/* Botón hamburguesa */
#topnav-hamburger-icon{
  margin-left:8px;
  border-radius:10px;
  border:1px solid var(--tb-btn-br);
  background:var(--tb-btn-bg);
  transition:all .2s ease;
}
#topnav-hamburger-icon:hover{
  background:rgba(59,130,246,.16);
  border-color:rgba(148,188,255,.45);
  transform:translateY(-1px);
}
#topnav-hamburger-icon .hamburger-icon span{
  background-color:#dbe8ff;
}

/* Botones topbar */
#page-topbar .header-item,
#page-topbar .user-name-text,
#page-topbar .user-name-sub-text{
  color:var(--tb-text) !important;
}
#page-topbar .btn-topbar{
  width:40px;
  height:40px;
  border-radius:10px !important;
  border:1px solid var(--tb-btn-br);
  background:var(--tb-btn-bg);
  color:#d9e9ff !important;
  display:grid;
  place-items:center;
  transition:all .2s ease;
}
#page-topbar .btn-topbar:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.20), rgba(6,182,212,.10));
  border-color:rgba(152,190,255,.46);
  transform:translateY(-1px);
  color:#fff !important;
}

/* Usuario topbar */
#page-topbar .topbar-user .btn{
  border-radius:999px;
  padding:5px 10px 5px 6px;
  border:1px solid var(--tb-btn-br);
  background:var(--tb-btn-bg);
  transition:all .2s ease;
}
#page-topbar .topbar-user .btn:hover{
  background:linear-gradient(180deg, rgba(59,130,246,.18), rgba(6,182,212,.08));
  border-color:rgba(152,190,255,.46);
  transform:translateY(-1px);
}
#page-topbar .topbar-user .header-profile-user{
  width:36px;
  height:36px;
  border:2px solid rgba(172,205,255,.50);
  box-shadow:0 4px 12px rgba(4,10,24,.32);
}
#page-topbar .user-name-text{
  font-weight:700 !important;
}
#page-topbar .user-name-sub-text{
  color:var(--tb-text-soft) !important;
  font-size:.72rem;
}

/* Dropdown topbar */
#page-topbar .dropdown-menu{
  margin-top:10px !important;
  min-width:240px;
  border-radius:12px;
  border:1px solid rgba(127,164,230,.30);
  background:linear-gradient(180deg, rgba(14,29,57,.98), rgba(10,21,44,.98));
  box-shadow:0 18px 34px rgba(2,8,22,.44);
  overflow:hidden;
}
#page-topbar .dropdown-header{
  color:#e6efff;
  font-weight:800;
}
#page-topbar .dropdown-item{
  color:#d7e6ff;
  border-radius:8px;
  margin:2px 6px;
  transition:all .18s ease;
}
#page-topbar .dropdown-item i{
  color:#9ebfff !important;
}
#page-topbar .dropdown-item:hover{
  color:#fff;
  background:linear-gradient(90deg, rgba(59,130,246,.22), rgba(6,182,212,.10));
}

/* Overlay lateral */
.vertical-overlay{
  background:rgba(2,7,18,.45);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1199.98px){
  .gps-topbar-status{ display:none !important; }
  #page-topbar .navbar-brand-box.horizontal-logo{ min-width:auto; }
}
@media (max-width:991.98px){
  #page-topbar .navbar-header{ min-height:64px; }
  #page-topbar .logo-brand{
    min-width:auto;
    height:40px;
    padding:0 10px;
  }
  #page-topbar .brand-logo{ height:24px; }
  .gps-system-pill{ display:none !important; }
  .gps-panel{
    margin:10px 8px;
    padding:12px;
  }
}
@media (max-width:575.98px){
  #page-topbar .btn-topbar{
    width:36px;
    height:36px;
  }
}