:root{
  --bt-bg:#050b1d;--bt-bg2:#08112a;--bt-sidebar:#050a1c;
  --bt-panel:#0a132b;--bt-panel2:#0d1834;--bt-line:#17264a;
  --bt-text:#f2f5ff;--bt-muted:#8493b8;--bt-blue:#3264ff;
  --bt-purple:#6b39ff;--bt-green:#22d67a;--bt-orange:#ff9e16;
  --bt-red:#ff4f63;--bt-shadow:0 18px 45px rgba(0,0,0,.20)
}
html[data-theme="light"]{
  --bt-bg:#f1f4f9;--bt-bg2:#f7f9fc;--bt-sidebar:#fff;
  --bt-panel:#fff;--bt-panel2:#f8faff;--bt-line:#e2e8f1;
  --bt-text:#18223a;--bt-muted:#75809a;--bt-shadow:0 12px 30px rgba(32,50,80,.08)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bt-bg)!important;color:var(--bt-text)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,
  "Segoe UI",Roboto,Arial,sans-serif!important;font-size:13px!important;
  -webkit-font-smoothing:antialiased;padding-left:250px!important;padding-top:72px!important
}
body>header,header.top{display:none!important}

#btSidebar{
  position:fixed;left:0;top:0;bottom:0;width:250px;z-index:1000;
  background:linear-gradient(180deg,#050a1c 0%,#070d24 100%);
  border-right:1px solid #172044;padding:18px 14px;display:flex;
  flex-direction:column;overflow-y:auto
}
html[data-theme="light"] #btSidebar{background:#fff;border-color:#e2e8f1}
.btBrand{display:flex;align-items:center;gap:11px;padding:5px 10px 22px}
.btBrandLogo{
  width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1677ff,#6539ff);
  display:grid;place-items:center;box-shadow:0 8px 28px rgba(66,72,255,.35)
}
.btBrandLogo svg{width:24px;height:24px;stroke:#fff}
.btBrandText strong{display:block;font-size:16px;font-weight:800;color:#fff}
.btBrandText small{display:block;margin-top:2px;color:#7f90ba;font-size:9px;font-weight:700}
html[data-theme="light"] .btBrandText strong{color:#16223a}

.btNav{display:flex;flex-direction:column;gap:4px}
.btNav a{
  min-height:46px;display:flex;align-items:center;gap:13px;padding:0 14px;
  border-radius:10px;text-decoration:none;color:#b5c0dd;font-weight:600;transition:.15s ease
}
html[data-theme="light"] .btNav a{color:#4e5e7b}
.btNav a:hover{background:rgba(74,87,255,.10);color:#fff}
html[data-theme="light"] .btNav a:hover{color:#21314d}
.btNav a.active{
  background:linear-gradient(90deg,#3030ee,#4215f2);color:#fff;
  box-shadow:0 10px 30px rgba(55,43,255,.25)
}
.btNavIcon{width:21px;height:21px;display:grid;place-items:center;flex:none}
.btNavIcon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

.btServerCard{
  margin-top:auto;border:1px solid #26326c;background:linear-gradient(145deg,#101848,#10153b);
  border-radius:14px;padding:16px;color:#fff
}
html[data-theme="light"] .btServerCard{background:#f5f7ff;color:#1e2942;border-color:#dde4f5}
.btServerTitle{font-weight:700;margin-bottom:8px}
.btOnline{color:#2fe482;font-size:11px;font-weight:700}
.btServerCard small{color:#92a0c5;display:block;margin-top:10px}

#btTopbar{
  position:fixed;left:250px;right:0;top:0;height:72px;z-index:999;
  background:rgba(7,13,34,.94);backdrop-filter:blur(18px);
  border-bottom:1px solid #151f43;display:flex;align-items:center;gap:18px;padding:0 24px
}
html[data-theme="light"] #btTopbar{background:rgba(255,255,255,.94);border-color:#e3e8f0}
.btMenuButton{
  width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;color:var(--bt-text);cursor:pointer
}
.btMenuButton svg,.btTopAction svg{width:19px;height:19px;stroke:currentColor;fill:none}
.btSearch{margin-left:auto;width:min(320px,32vw);position:relative}
.btSearch svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;stroke:#8493b8;fill:none
}
.btSearch input{
  width:100%!important;height:42px!important;border-radius:9px!important;
  border:1px solid var(--bt-line)!important;background:var(--bt-panel)!important;
  color:var(--bt-text)!important;padding:0 15px 0 42px!important;outline:0!important
}
.btTopAction{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--bt-line);
  background:var(--bt-panel);color:var(--bt-text);display:grid;place-items:center;cursor:pointer
}
.btAdmin{display:flex;align-items:center;gap:10px;font-weight:600}
.btAdminAvatar{
  width:38px;height:38px;border-radius:50%;background:#111b3c;
  border:1px solid #29365e;display:grid;place-items:center
}
.btAdminAvatar svg{width:19px;height:19px;stroke:currentColor;fill:none}

.wrap,main.wrap{
  max-width:none!important;width:auto!important;margin:0!important;
  padding:26px 28px 40px!important;background:transparent!important
}
.page h1,.hero h1,h1{color:var(--bt-text)!important;font-weight:750!important;letter-spacing:-.035em!important}
.page p,.hero p{color:var(--bt-muted)!important}
.card,.box,.mini,.tablebox,.filters,.bulkbar,.dialog,.sourceCard,.stat{
  background:var(--bt-panel)!important;border-color:var(--bt-line)!important;
  color:var(--bt-text)!important;box-shadow:var(--bt-shadow)
}
.filters,.bulkbar{box-shadow:none!important}
input,select,textarea{
  background:var(--bt-panel2)!important;color:var(--bt-text)!important;border-color:var(--bt-line)!important
}
input::placeholder{color:#667797!important}
.btn{background:var(--bt-panel2)!important;color:var(--bt-text)!important;border-color:var(--bt-line)!important}
.btn.primary{background:#3264ff!important;border-color:#3264ff!important;color:#fff!important}
.btn.success{background:#18bd79!important;color:#fff!important}
.btn.warn{background:#ff9e16!important;color:#fff!important}
.btn.danger{background:#ff4f63!important;color:#fff!important}
table{color:var(--bt-text)!important}
th{background:#0d1932!important;color:#8ea0c4!important;border-color:var(--bt-line)!important}
html[data-theme="light"] th{background:#f4f6fa!important;color:#61708d!important}
td{border-color:var(--bt-line)!important;color:var(--bt-text)!important}
tbody tr:hover{background:rgba(56,92,255,.06)!important}
.modal{background:rgba(0,4,14,.75)!important}
.dialog{border:1px solid var(--bt-line)!important}
.tab{background:var(--bt-panel2)!important;color:var(--bt-muted)!important;border-color:var(--bt-line)!important}
.tab.active{background:#3264ff!important;color:#fff!important;border-color:#3264ff!important}
.result{background:var(--bt-panel2)!important;border-color:var(--bt-line)!important;color:var(--bt-text)!important}
.result:hover{border-color:#3264ff!important}
.result img{background:#fff!important}

@media(max-width:1050px){
  #btSidebar{transform:translateX(-100%);transition:.2s ease}
  body.btSidebarOpen #btSidebar{transform:translateX(0)}
  #btTopbar{left:0}
  body{padding-left:0!important}
}
@media(max-width:650px){
  .btSearch{display:none}
  .btAdmin span{display:none}
  .wrap,main.wrap{padding:18px!important}
}


/* =========================================================
   BETAMAX XUI v2 - SIDEBAR / ACTIVE / CONTRASTE
   ========================================================= */

.btNav a.active{
  background:rgba(92,104,255,.11)!important;
  color:#f4f7ff!important;
  box-shadow:none!important;
  border:1px solid rgba(104,116,255,.16)!important;
  position:relative;
}
.btNav a.active::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#7c5cff,#35a7ff);
}
.btNav a.active .btNavIcon{color:#7ea2ff}
html[data-theme="light"] .btNav a.active{
  background:#eef2ff!important;
  color:#273556!important;
  border-color:#dce4ff!important;
}
html[data-theme="light"] .btNav a.active .btNavIcon{color:#4859dd}

#btSidebar,#btTopbar,body{
  transition:width .20s ease,left .20s ease,padding-left .20s ease,transform .20s ease;
}
body.btSidebarCollapsed{padding-left:82px!important}
body.btSidebarCollapsed #btSidebar{width:82px}
body.btSidebarCollapsed #btTopbar{left:82px}
body.btSidebarCollapsed .btBrandText,
body.btSidebarCollapsed .btNav a span:not(.btNavIcon),
body.btSidebarCollapsed .btServerCard{display:none!important}
body.btSidebarCollapsed .btBrand{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}
body.btSidebarCollapsed .btNav a{
  justify-content:center;
  padding:0;
}
body.btSidebarCollapsed .btNav a.active::before{left:-1px}
body.btSidebarCollapsed .btNavIcon{margin:0}

.btMenuButton:hover,.btTopAction:hover{
  background:rgba(255,255,255,.06)!important;
}
html[data-theme="light"] .btMenuButton:hover,
html[data-theme="light"] .btTopAction:hover{
  background:#f1f4f9!important;
}

html[data-theme="dark"] body{
  background:#060c1c!important;
  color:#eef3ff!important;
}
html[data-theme="dark"] .wrap,
html[data-theme="dark"] main.wrap{background:transparent!important}

html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .tablebox,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .bulkbar,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .sourceCard,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metricCard,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpiCard,
html[data-theme="dark"] .summaryCard{
  background:#0c1730!important;
  color:#eef3ff!important;
  border-color:#1b2b4d!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#0a1429!important;
  color:#eef3ff!important;
  border-color:#24375d!important;
}
html[data-theme="dark"] th{
  background:#0f1d38!important;
  color:#aebbd7!important;
}
html[data-theme="dark"] td{color:#e7edfb!important}
html[data-theme="dark"] .page p,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted{
  color:#93a2c3!important;
}
html[data-theme="dark"] .result,
html[data-theme="dark"] .tab{background:#0a1429!important}
html[data-theme="dark"] .result:hover{background:#101f3d!important}
html[data-theme="dark"] .btn:not(.primary):not(.success):not(.warn):not(.danger){
  background:#101c36!important;
  color:#edf3ff!important;
  border-color:#26395f!important;
}

/* neutraliza tarjetas claras del dashboard */
html[data-theme="dark"] .heroCards>div,
html[data-theme="dark"] .metrics>div,
html[data-theme="dark"] .metricsGrid>div,
html[data-theme="dark"] .statsGrid>div,
html[data-theme="dark"] .cards>div{
  background:#0c1730!important;
  color:#eef3ff!important;
  border-color:#1b2b4d!important;
}

@media(max-width:1050px){
  body.btSidebarCollapsed{padding-left:0!important}
  body.btSidebarCollapsed #btSidebar{width:250px}
  body.btSidebarCollapsed #btTopbar{left:0}
  body.btSidebarCollapsed .btBrandText,
  body.btSidebarCollapsed .btNav a span:not(.btNavIcon),
  body.btSidebarCollapsed .btServerCard{display:initial!important}
  body.btSidebarCollapsed .btNav a{
    justify-content:flex-start;
    padding:0 14px;
  }
  body.btSidebarOpen #btSidebar{
    transform:translateX(0)!important;
    width:250px;
    z-index:1001;
  }
  body.btSidebarOpen::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:998;
  }
}


/* =========================================================
   BETAMAX XUI v3 - DARK SUAVE + LIGHT USER ICON
   ========================================================= */

/* Paleta oscura menos contrastada, más tipo panel reseller/Xtream */
html[data-theme="dark"]{
  --bt-bg:#101723;
  --bt-bg2:#151e2c;
  --bt-sidebar:#192230;
  --bt-panel:#273247;
  --bt-panel2:#2d394f;
  --bt-line:#3a4963;
  --bt-text:#eef3fa;
  --bt-muted:#a8b4c8;
  --bt-shadow:0 10px 24px rgba(0,0,0,.16);
}

html[data-theme="dark"] body{
  background:#101723!important;
  color:#eef3fa!important;
}

html[data-theme="dark"] #btSidebar{
  background:#1a2332!important;
  border-right:1px solid #303c52!important;
}

html[data-theme="dark"] #btTopbar{
  background:#1d2636!important;
  border-bottom:1px solid #303c52!important;
  box-shadow:0 2px 10px rgba(0,0,0,.14)!important;
}

html[data-theme="dark"] .btServerCard{
  background:#273247!important;
  border-color:#3a4963!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .tablebox,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .bulkbar,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .sourceCard,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metricCard,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpiCard,
html[data-theme="dark"] .summaryCard{
  background:#273247!important;
  color:#eef3fa!important;
  border-color:#3a4963!important;
  box-shadow:0 8px 20px rgba(0,0,0,.13)!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#202a3b!important;
  color:#eef3fa!important;
  border-color:#41506a!important;
}

html[data-theme="dark"] th{
  background:#222d40!important;
  color:#c0cad9!important;
  border-color:#3a4963!important;
}

html[data-theme="dark"] td{
  color:#edf2f8!important;
  border-color:#37465f!important;
}

html[data-theme="dark"] tbody tr:hover{
  background:#2f3c54!important;
}

html[data-theme="dark"] .page p,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] small,
html[data-theme="dark"] .muted{
  color:#a8b4c8!important;
}

html[data-theme="dark"] .result,
html[data-theme="dark"] .tab{
  background:#202a3b!important;
  border-color:#3a4963!important;
}

html[data-theme="dark"] .result:hover{
  background:#313f57!important;
}

html[data-theme="dark"] .btn:not(.primary):not(.success):not(.warn):not(.danger){
  background:#2d394f!important;
  color:#eef3fa!important;
  border-color:#42516b!important;
}

/* Dashboard: bajar contraste también en tarjetas internas */
html[data-theme="dark"] .heroCards>div,
html[data-theme="dark"] .metrics>div,
html[data-theme="dark"] .metricsGrid>div,
html[data-theme="dark"] .statsGrid>div,
html[data-theme="dark"] .cards>div{
  background:#273247!important;
  color:#eef3fa!important;
  border-color:#3a4963!important;
}

/* Mantener gráficas/zonas de contenido más suaves */
html[data-theme="dark"] .chart,
html[data-theme="dark"] canvas{
  filter:brightness(.96) saturate(.92);
}

/* Menú activo más sobrio */
html[data-theme="dark"] .btNav a.active{
  background:#273247!important;
  color:#fff!important;
  border:1px solid #3c4d69!important;
}
html[data-theme="dark"] .btNav a.active::before{
  background:#5f7ee8!important;
}

/* Usuario visible en CLARO */
html[data-theme="light"] .btAdmin{
  color:#1a2740!important;
}
html[data-theme="light"] .btAdminAvatar{
  background:#eef2f8!important;
  border-color:#d7dfeb!important;
  color:#233552!important;
}
html[data-theme="light"] .btAdminAvatar svg{
  stroke:#233552!important;
}
html[data-theme="light"] #btThemeBtn{
  color:#263750!important;
  background:#f6f8fb!important;
  border-color:#d7dfeb!important;
}
html[data-theme="light"] #btThemeBtn svg{
  stroke:#263750!important;
}
html[data-theme="light"] .btMenuButton{
  color:#263750!important;
}
html[data-theme="light"] .btMenuButton svg{
  stroke:#263750!important;
}

/* Usuario visible en OSCURO también */
html[data-theme="dark"] .btAdminAvatar{
  background:#273247!important;
  border-color:#3d4c67!important;
  color:#e8eef8!important;
}
html[data-theme="dark"] .btAdminAvatar svg{
  stroke:#e8eef8!important;
}


/* =========================================================
   BETAMAX XUI v4 - LEGIBILIDAD OSCURA
   ========================================================= */

html[data-theme="dark"]{
  --bt-bg:#151d29;
  --bt-bg2:#1a2432;
  --bt-sidebar:#1a2432;
  --bt-panel:#222f42;
  --bt-panel2:#1c2737;
  --bt-line:#35445b;
  --bt-text:#f8fafc;
  --bt-muted:#c0cad8;
  --bt-shadow:0 8px 18px rgba(0,0,0,.12);
}

html[data-theme="dark"] body{
  background:#151d29!important;
  color:#f8fafc!important;
}

html[data-theme="dark"] #btSidebar{
  background:#1a2432!important;
  border-right:1px solid #334155!important;
}

html[data-theme="dark"] #btTopbar{
  background:#1a2432!important;
  border-bottom:1px solid #334155!important;
  box-shadow:none!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .tablebox,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .bulkbar,
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .sourceCard,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metricCard,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpiCard,
html[data-theme="dark"] .summaryCard,
html[data-theme="dark"] .heroCards>div,
html[data-theme="dark"] .metrics>div,
html[data-theme="dark"] .metricsGrid>div,
html[data-theme="dark"] .statsGrid>div,
html[data-theme="dark"] .cards>div{
  background:#222f42!important;
  color:#f8fafc!important;
  border-color:#35445b!important;
  box-shadow:none!important;
}

/* Texto principal siempre legible */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .big,
html[data-theme="dark"] .n,
html[data-theme="dark"] .value,
html[data-theme="dark"] .metricValue,
html[data-theme="dark"] .kpiValue,
html[data-theme="dark"] .boxtitle,
html[data-theme="dark"] .head,
html[data-theme="dark"] .title{
  color:#f8fafc!important;
}

/* Secundarios: quitar azules apagados */
html[data-theme="dark"] .label,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .subline,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .meta,
html[data-theme="dark"] small,
html[data-theme="dark"] .page p,
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .histSub,
html[data-theme="dark"] .field label{
  color:#c0cad8!important;
}

/* Forzar textos inline que heredaron colores poco legibles */
html[data-theme="dark"] .card [style*="color"],
html[data-theme="dark"] .box [style*="color"],
html[data-theme="dark"] .mini [style*="color"],
html[data-theme="dark"] .stat [style*="color"]{
  color:#dbe3ee!important;
}

/* Números y valores muy claros */
html[data-theme="dark"] .card b,
html[data-theme="dark"] .box b,
html[data-theme="dark"] .mini b,
html[data-theme="dark"] .stat b,
html[data-theme="dark"] td b{
  color:#ffffff!important;
}

/* Tablas */
html[data-theme="dark"] th{
  background:#1b2636!important;
  color:#d3dbe7!important;
  border-color:#35445b!important;
}
html[data-theme="dark"] td{
  background:#222f42!important;
  color:#eef3f8!important;
  border-color:#35445b!important;
}
html[data-theme="dark"] tbody tr:hover td{
  background:#29384d!important;
}

/* Inputs / filtros */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#1b2636!important;
  color:#f8fafc!important;
  border-color:#40516b!important;
}
html[data-theme="dark"] input::placeholder{
  color:#94a3b8!important;
}

/* Botones neutros */
html[data-theme="dark"] .btn:not(.primary):not(.success):not(.warn):not(.danger){
  background:#29384d!important;
  color:#f8fafc!important;
  border-color:#40516b!important;
}

/* Sidebar */
html[data-theme="dark"] .btNav a{
  color:#d2dae6!important;
}
html[data-theme="dark"] .btNav a:hover{
  background:#243248!important;
  color:#fff!important;
}
html[data-theme="dark"] .btNav a.active{
  background:#2b3950!important;
  color:#fff!important;
  border-color:#43536d!important;
}
html[data-theme="dark"] .btNav a.active::before{
  background:#7c8cff!important;
}

/* Topbar */
html[data-theme="dark"] .btSearch input{
  background:#202b3c!important;
  color:#f8fafc!important;
  border-color:#3a4a62!important;
}
html[data-theme="dark"] .btAdmin{
  color:#f8fafc!important;
}
html[data-theme="dark"] .btAdminAvatar,
html[data-theme="dark"] .btTopAction{
  background:#243147!important;
  color:#f8fafc!important;
  border-color:#3e4e67!important;
}

/* Evitar centro blanco del donut en oscuro */
html[data-theme="dark"] .donut:after,
html[data-theme="dark"] .donut::after{
  background:#222f42!important;
  color:#f8fafc!important;
}

/* Resultados y modales */
html[data-theme="dark"] .result,
html[data-theme="dark"] .tab{
  background:#1c2737!important;
  color:#f8fafc!important;
  border-color:#35445b!important;
}
html[data-theme="dark"] .result:hover{
  background:#29384d!important;
}

/* Mantener colores solo para estados/acento, no para texto general */
html[data-theme="dark"] .online,
html[data-theme="dark"] .green{
  color:#45e0a8!important;
}
html[data-theme="dark"] .red{
  color:#ff8c99!important;
}
html[data-theme="dark"] .orange{
  color:#ffc46b!important;
}
html[data-theme="dark"] .blue{
  color:#8bbcff!important;
}