/* Vectra Premium — capa visual compartida
   Conserva negro + verde de marca y reduce el aspecto neón para una
   presentación más sobria, precisa y cómoda en pantallas con muchos datos. */

:root{
  --premium-black:#070908;
  --premium-black-2:#101311;
  --premium-black-3:#181c19;
  --premium-canvas:#f4f6f4;
  --premium-surface:#ffffff;
  --premium-ink:#131714;
  --premium-muted:#68706a;
  --premium-line:rgba(12,24,16,.09);
  --premium-line-strong:rgba(12,24,16,.15);
  --premium-radius:15px;
  --premium-radius-lg:20px;
  --premium-shadow:0 1px 2px rgba(6,12,8,.03),0 18px 48px -38px rgba(6,12,8,.42);
  --premium-shadow-raised:0 16px 42px -28px rgba(3,10,6,.38);
}

html{background:var(--premium-canvas);}
body{
  background:
    radial-gradient(circle at 92% -12%,rgba(39,254,145,.055),transparent 27rem),
    var(--premium-canvas) !important;
  color:var(--premium-ink);
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Acceso */
.vectra-login-v2{
  background:
    radial-gradient(ellipse at 15% 10%,rgba(39,254,145,.10),transparent 34rem),
    radial-gradient(ellipse at 90% 92%,rgba(39,254,145,.055),transparent 28rem),
    var(--premium-black) !important;
}
.vectra-login-v2::before{
  opacity:.055 !important;
  background-size:56px 56px !important;
}
.vectra-login-card-v2{
  width:410px !important;
  padding:42px 40px 30px !important;
  border:1px solid rgba(255,255,255,.095) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,rgba(24,28,25,.98),rgba(14,17,15,.99)) !important;
  box-shadow:0 32px 90px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.035) !important;
}
.vectra-login-card-v2 img{filter:drop-shadow(0 8px 22px rgba(0,0,0,.28));}
.vectra-login-intro{gap:5px !important;margin-bottom:24px !important;}
.vectra-login-intro strong{font-size:19px !important;font-weight:600 !important;letter-spacing:-.025em !important;}
.vectra-login-intro span{color:rgba(255,255,255,.52) !important;line-height:1.65 !important;}
.vectra-login-label{
  margin-bottom:7px !important;
  color:rgba(255,255,255,.72) !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.045em !important;
}
.vectra-login-card-v2 #vl-email,
.vectra-login-card-v2 #vl-pass{
  height:48px !important;
  padding:12px 14px !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:9px !important;
  background:#0b0e0c !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.vectra-login-card-v2 #vl-email:hover,
.vectra-login-card-v2 #vl-pass:hover{border-color:rgba(255,255,255,.22) !important;}
.vectra-login-card-v2 #vl-email:focus,
.vectra-login-card-v2 #vl-pass:focus{
  border-color:var(--green,#27FE91) !important;
  box-shadow:0 0 0 3px rgba(39,254,145,.105) !important;
}
.vectra-password-toggle{color:var(--green,#27FE91) !important;font-weight:600 !important;}
.vectra-login-card-v2 #vl-btn{
  min-height:48px !important;
  border-radius:9px !important;
  font-weight:700 !important;
  letter-spacing:.005em !important;
  box-shadow:0 12px 30px -18px rgba(39,254,145,.55) !important;
}
.vectra-login-card-v2 #vl-btn:hover{filter:saturate(.86) brightness(.96) !important;}
.vectra-login-security-note{
  margin-top:21px !important;
  padding-top:18px !important;
  color:rgba(255,255,255,.40) !important;
  letter-spacing:.01em;
}

/* Navegación */
.topnav{
  min-height:72px !important;
  background:linear-gradient(90deg,#050706,#0b0e0c 55%,#070908) !important;
  border-bottom:1px solid rgba(39,254,145,.13);
  box-shadow:0 14px 40px -32px rgba(0,0,0,.9);
}
.topnav-brand .bapp,.topnav-brand .bwordmark{letter-spacing:.15em !important;}
.topnav-item{
  border:1px solid transparent;
  border-radius:8px !important;
  color:rgba(255,255,255,.62) !important;
}
.topnav-item:hover{background:rgba(255,255,255,.055) !important;color:#fff !important;}
.topnav-item.active{
  background:rgba(39,254,145,.095) !important;
  border-color:rgba(39,254,145,.18) !important;
  color:var(--green,#27FE91) !important;
  box-shadow:inset 0 0 0 1px rgba(39,254,145,.025);
}
.topnav-item .tico{display:none !important;}
.topnav-home{
  background:transparent !important;
  border:1px solid rgba(39,254,145,.35) !important;
  color:var(--green,#27FE91) !important;
  border-radius:8px !important;
}
.topnav-home:hover{background:rgba(39,254,145,.09) !important;color:var(--green,#27FE91) !important;}
.topnav-avatar{
  box-shadow:0 0 0 3px rgba(39,254,145,.10);
  border:1px solid rgba(0,0,0,.26);
}
.user-menu,.topnav-dropdown-inner{
  background:linear-gradient(145deg,#171a18,#0e100f) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:13px !important;
  box-shadow:0 24px 58px rgba(0,0,0,.36) !important;
}

/* Lienzo y encabezados */
.main{background:transparent !important;padding-top:30px !important;}
.topbar{margin-bottom:25px !important;}
.ptitle,.page-title,.hero-greet{
  font-weight:600 !important;
  letter-spacing:-.035em !important;
}
.ptitle{font-size:20px !important;}
.psub{color:var(--premium-muted) !important;margin-top:4px !important;}
.sec-title{
  color:#747d76 !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
}

/* Inicio */
.hero{
  padding:31px 36px 38px !important;
  background:
    radial-gradient(circle at 84% 10%,rgba(39,254,145,.10),transparent 24rem),
    linear-gradient(118deg,#050706,#111713 64%,#09100c) !important;
  border-bottom:1px solid rgba(39,254,145,.13) !important;
  box-shadow:0 18px 50px -42px rgba(0,0,0,.9);
}
.hero-top{margin-bottom:25px !important;}
.hero-tag{color:rgba(255,255,255,.56) !important;letter-spacing:.18em !important;}
.hero-greet{font-size:24px !important;}
.hero-msg{color:rgba(255,255,255,.55) !important;margin-top:7px !important;}
.hero-date{
  padding:9px 15px !important;
  border:1px solid rgba(255,255,255,.095) !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.035) !important;
  backdrop-filter:blur(12px);
}
.hero-btn{
  border-color:rgba(255,255,255,.105) !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.035) !important;
}
.hero-btn:hover{background:rgba(255,255,255,.075) !important;}
.hero-btn.green{background:rgba(39,254,145,.075) !important;border-color:rgba(39,254,145,.24) !important;}
.apps-grid{gap:16px !important;}
.app-card{
  padding:19px !important;
  border:1px solid var(--premium-line) !important;
  border-radius:var(--premium-radius) !important;
  box-shadow:var(--premium-shadow) !important;
}
.app-card:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(39,254,145,.27) !important;
  box-shadow:var(--premium-shadow-raised) !important;
}
.app-ico{
  border-radius:11px !important;
  background:linear-gradient(145deg,rgba(39,254,145,.14),rgba(39,254,145,.055)) !important;
  border:1px solid rgba(39,254,145,.11);
}
.app-ico svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#107c48;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.app-arrow{color:#aeb5b0 !important;}

/* Superficies, métricas y tablas */
.card,.cli-card,.est-card,.ecard,.sblock,.stat,.stat-card{
  border:1px solid var(--premium-line) !important;
  border-radius:var(--premium-radius) !important;
  box-shadow:var(--premium-shadow) !important;
}
.cli-card,.est-card,.ecard{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;}
.cli-card:hover,.est-card:hover,.ecard:hover{
  border-color:rgba(39,254,145,.24) !important;
  box-shadow:var(--premium-shadow-raised) !important;
}
.stat.hl,.stat-card.hl{
  background:linear-gradient(145deg,#090c0a,#151a16) !important;
  border-color:rgba(39,254,145,.26) !important;
  color:#fff !important;
  box-shadow:0 18px 38px -30px rgba(0,0,0,.82) !important;
}
.stat.hl .stat-val,.stat.hl .stat-value,
.stat-card.hl .stat-val,.stat-card.hl .stat-value{color:var(--green,#27FE91) !important;text-shadow:0 0 20px rgba(39,254,145,.10);}
.stat.hl .stat-lbl,.stat.hl .stat-label,.stat.hl .stat-sub,
.stat-card.hl .stat-lbl,.stat-card.hl .stat-label,.stat-card.hl .stat-sub{color:rgba(255,255,255,.68) !important;}
.stat.hl .stat-delta,.stat-card.hl .stat-delta{color:#8cf8bd !important;}
.tbl,.table{border-collapse:separate;border-spacing:0;}
.tbl thead th,.table thead th{
  background:#171b18 !important;
  color:rgba(255,255,255,.72) !important;
  border-bottom-color:rgba(39,254,145,.16) !important;
  font-weight:600 !important;
  letter-spacing:.075em !important;
}
.tbl tbody tr:hover td,.table tbody tr:hover td{background:rgba(39,254,145,.035);}

/* Controles */
.btn{
  border-color:var(--premium-line-strong) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 1px 1px rgba(0,0,0,.025);
  transition:background .16s,border-color .16s,transform .16s,box-shadow .16s !important;
}
.btn:hover{background:#fff !important;border-color:rgba(12,24,16,.24) !important;}
.btn.primary{
  background:var(--green,#27FE91) !important;
  border-color:var(--green,#27FE91) !important;
  color:#07150d !important;
  box-shadow:0 10px 24px -17px rgba(14,160,85,.70) !important;
}
.btn.primary:hover{filter:saturate(.88) brightness(.96);transform:translateY(-1px);}
.btn.dark{
  background:var(--premium-black-2) !important;
  border-color:var(--premium-black-2) !important;
  color:#fff !important;
}
.btn.dark:hover{background:#1b211d !important;border-color:#1b211d !important;}
.badge,[class*="badge"]{font-weight:600 !important;letter-spacing:.01em;}
input,select,textarea{
  border-color:var(--premium-line-strong) !important;
  border-radius:9px !important;
  background:#fff !important;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.018);
}
input:hover,select:hover,textarea:hover{border-color:rgba(12,24,16,.25) !important;}
input:focus,select:focus,textarea:focus{
  border-color:var(--green,#27FE91) !important;
  box-shadow:0 0 0 3px rgba(39,254,145,.095) !important;
}
.moverlay{background:rgba(3,7,4,.58) !important;backdrop-filter:blur(6px);}
.modal{
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--premium-radius-lg) !important;
  box-shadow:0 34px 90px -28px rgba(0,0,0,.52) !important;
}
.mh{padding-top:21px !important;}
.mt{font-weight:600 !important;letter-spacing:-.02em;}
.notif{
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--green,#27FE91) !important;
  border-radius:10px !important;
  background:#101310 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.app-menu{
  border-color:var(--premium-line) !important;
  border-radius:13px !important;
  box-shadow:0 24px 52px -25px rgba(3,10,6,.42) !important;
}

.ob-breadcrumb{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.01em;}
.ob-breadcrumb button{appearance:none;border:0;background:transparent;padding:0;color:var(--green-ink);font:inherit;cursor:pointer;}
.ob-breadcrumb button:hover{text-decoration:underline;text-underline-offset:3px;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(15,28,19,.18) !important;border:2px solid transparent;background-clip:padding-box !important;}
::-webkit-scrollbar-thumb:hover{background:rgba(15,28,19,.30) !important;background-clip:padding-box !important;}

@media(max-width:820px){
  .topnav{min-height:64px !important;}
  .main{padding-top:22px !important;}
  .hero{padding:25px 20px 30px !important;}
  .hero-greet{font-size:21px !important;}
  .topnav-menu{background:#080a09 !important;border-top-color:rgba(39,254,145,.12) !important;}
}
@media(max-width:480px){
  .vectra-login-card-v2{padding:34px 24px 25px !important;border-radius:17px !important;}
  .apps-grid{gap:11px !important;}
  .app-card{padding:16px !important;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.01ms !important;animation-duration:.01ms !important;}
}
@media print{
  html,body,.main{background:#fff !important;}
  .card,.cli-card,.est-card,.ecard,.sblock,.stat,.stat-card,.tbl,.table{box-shadow:none !important;}
}