:root{
  --color-primary:#00476F;
  --color-primary-600:#003956;
  --color-primary-50:#E6F1F7;
  --color-secondary:#0EA5B1;
  --color-accent:#F59E0B;
  --color-bg:#f6f8fb;
  --color-card:#ffffff;
  --sidebar-width: 260px;
}

html,body{height:100%;}
body{ background:var(--color-bg); }

/* Sidebar (desktop) — ahora FIJA de arriba a abajo */
#sidebar{
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-600) 100%);
  overflow-y: auto;            /* scroll interno si hay mucho menú */
  z-index: 1030;
}
#sidebar .brand{ padding:1rem 1.25rem; border-bottom:1px solid rgba(255,255,255,.15); }
#sidebar .brand img{height:34px;}
#sidebar .nav-link{
  color: rgba(255,255,255,0.85);
  border-radius:.75rem;
  margin:.25rem .75rem;
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .85rem;
}
#sidebar .nav-link.active,
#sidebar .nav-link:hover{
  color:#fff; background:rgba(255,255,255,.12);
}
#sidebar .nav-link .bi{font-size:1.1rem;}
#sidebar .submenu{
  margin: .25rem 1.25rem .5rem 2.25rem;
  padding-left: .5rem;
  border-left: 1px dashed rgba(255,255,255,.25);
}
#sidebar .submenu .nav-link{
  margin: .15rem 0;
  padding:.45rem .6rem;
  font-size:.95rem;
  opacity:.95;
}

/* Topbar */
.navbar-main{ border-bottom:1px solid #e9eef5; background:#fff; }

/* Layout */
.app-wrapper{display:flex; min-height:100vh;}
.app-content{flex:1;}
/* Desplazar el contenido cuando el sidebar fijo esté visible (>= lg) */
@media (min-width: 992px){
  .app-content{ margin-left: var(--sidebar-width); }
}

.main-inner{padding:1.25rem 1.25rem 2rem 1.25rem;}
.card{ border:none; border-radius:1rem; box-shadow:0 8px 20px rgba(2, 6, 23, 0.06); }
.card .card-title{margin-bottom:.35rem;}
.kpi{ display:flex; align-items:center; gap:1rem; }
.kpi .avatar{ width:42px; height:42px; border-radius:10px; background:var(--color-primary-50); display:flex; align-items:center; justify-content:center; }
.kpi .avatar .bi{font-size:1.2rem; color:var(--color-primary);}
#rightbar .list-group-item{border:none; padding:.5rem 0;}

/* Footer — ahora bajo el contenido (NO fijo) */
footer.footer{
  background:#fff;
  border-top:1px solid #e9eef5;
  color:#6b7280;
  font-size:.9rem;
  padding:1rem 1.25rem;
}

/* Alturas Tabulator (ajustables con JS cuando hace falta) */
#recentTable, #usersTable, #itinsTable{height: 360px;}
.table-fullheight{ height: calc(100vh - 160px); } /* si lo usas */

/* Fondo blanco en tablas (sin gris oscuro) */
.tabulator, .tabulator .tabulator-header, .tabulator .tabulator-tableholder{ background:#ffffff !important; }
.tabulator .tabulator-row{ background:#fff; }

/* Utilidades */
.badge-soft{ background:var(--color-primary-50); color:var(--color-primary); }

/* Badges por web */
.badge-usa{ background: rgba(0,71,111,.12); color:#00476F; border:1px solid rgba(0,71,111,.25); }
.badge-kenya{ background: rgba(151,108,11,.12); color:#976C0B; border:1px solid rgba(151,108,11,.25); }
.badge-tanzania{ background: rgba(53,84,24,.12); color:#355418; border:1px solid rgba(53,84,24,.25); }

/* Estado de usuarios - badges sólidos */
.badge-estado-activo{ background:#16a34a; color:#fff; }
.badge-estado-suspendido{ background:#f59e0b; color:#111; }

/* Barra de búsqueda encima de tablas */
.table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; }
.table-toolbar .form-control{ max-width: 320px; }