:root{
  --zap-bg:#080b16;
  --zap-bg2:#0d1120;
  --zap-surface:#121729;
  --zap-surface2:#171d32;
  --zap-surface3:#1d243a;
  --zap-line:#2a3350;
  --zap-text:#f7f8fc;
  --zap-muted:#a5adbe;
  --zap-purple:#7627f4;
  --zap-purple2:#a734ff;
  --zap-orange:#ff9f12;
  --zap-green:#31d17d;
  --zap-red:#ff5b6e;
  --zap-yellow:#ffca45;
  --zap-shadow:0 18px 52px rgba(0,0,0,.28);
  --zap-radius:18px;
  --zap-radius-lg:24px;
}

*{box-sizing:border-box}

html{
  background:var(--zap-bg);
  color-scheme:dark;
}

body.zap-ui{
  margin:0;
  color:var(--zap-text)!important;
  background:
    radial-gradient(circle at 12% -4%,rgba(118,39,244,.18),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(255,159,18,.06),transparent 24%),
    linear-gradient(180deg,var(--zap-bg),#090d19 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  min-height:100vh;
}

body.zap-ui a{
  color:inherit;
  text-decoration:none;
}

body.zap-ui h1,
body.zap-ui h2,
body.zap-ui h3,
body.zap-ui h4{
  color:var(--zap-text);
  letter-spacing:-.02em;
}

body.zap-ui h1{
  font-size:clamp(28px,4vw,42px);
}

body.zap-ui .muted,
body.zap-ui .text-muted,
body.zap-ui small{
  color:var(--zap-muted)!important;
}

body.zap-ui .container,
body.zap-ui .wrap,
body.zap-ui .main{
  width:min(1460px,100%);
}

/* NAV / HEADER */
body.zap-ui .nav,
body.zap-ui header,
body.zap-ui .topbar,
body.zap-ui .navbar{
  background:rgba(10,13,24,.88)!important;
  border-color:rgba(255,255,255,.07)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

body.zap-ui .nav{
  position:sticky;
  top:0;
  z-index:80;
  border-bottom:1px solid rgba(255,255,255,.07);
}

body.zap-ui .navin{
  max-width:1460px;
  margin:auto;
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}

body.zap-ui .brand,
body.zap-ui .logo,
body.zap-ui .zlogo{
  font-weight:950!important;
  letter-spacing:-.03em;
}

body.zap-ui .nav a,
body.zap-ui .links a{
  border-radius:11px;
  transition:.18s ease;
}

body.zap-ui .nav a:hover,
body.zap-ui .links a:hover{
  background:rgba(122,44,255,.13)!important;
  color:#fff!important;
}

/* SIDE MENUS */
body.zap-ui .side,
body.zap-ui aside,
body.zap-ui .sidebar{
  background:linear-gradient(180deg,#0e1220,#0a0e19)!important;
  border-color:rgba(255,255,255,.07)!important;
}

body.zap-ui .menu a,
body.zap-ui .sidebar a{
  color:#bcc3d1!important;
  border-radius:12px!important;
  transition:.18s ease;
}

body.zap-ui .menu a:hover,
body.zap-ui .menu a.active,
body.zap-ui .sidebar a:hover,
body.zap-ui .sidebar a.active{
  background:linear-gradient(135deg,rgba(113,34,236,.88),rgba(153,47,246,.88))!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(102,29,224,.18);
}

/* CARDS */
body.zap-ui .card,
body.zap-ui .metric,
body.zap-ui .stat,
body.zap-ui .panel,
body.zap-ui .boxx,
body.zap-ui .paycard,
body.zap-ui .store,
body.zap-ui .service,
body.zap-ui .choice,
body.zap-ui .k{
  background:
    radial-gradient(circle at 100% 0%,rgba(118,39,244,.07),transparent 28%),
    linear-gradient(180deg,var(--zap-surface2),var(--zap-surface))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:var(--zap-radius-lg)!important;
  box-shadow:var(--zap-shadow);
}

body.zap-ui .card{
  padding:20px;
  margin-bottom:16px;
}

/* KPI */
body.zap-ui .metric strong,
body.zap-ui .stat strong,
body.zap-ui .k strong,
body.zap-ui .kpi{
  color:#fff!important;
  font-weight:950!important;
}

body.zap-ui .metrics{
  gap:14px!important;
}

/* BUTTONS */
body.zap-ui .btn,
body.zap-ui button.btn,
body.zap-ui .submit,
body.zap-ui button[type="submit"]:not(.plain):not(.small):not(.smallbtn){
  border:0!important;
  border-radius:13px!important;
  min-height:42px;
  background:linear-gradient(135deg,var(--zap-purple),var(--zap-purple2))!important;
  color:#fff!important;
  font-weight:850!important;
  box-shadow:0 10px 26px rgba(112,32,239,.18);
  transition:.18s ease;
  cursor:pointer;
}

body.zap-ui .btn:hover,
body.zap-ui button.btn:hover,
body.zap-ui .submit:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}

body.zap-ui .small,
body.zap-ui .smallbtn{
  border:1px solid var(--zap-line)!important;
  border-radius:10px!important;
  background:var(--zap-surface3)!important;
  color:#fff!important;
}

/* FORMS */
body.zap-ui label{
  color:#e9ebf2!important;
  font-weight:750!important;
}

body.zap-ui input,
body.zap-ui select,
body.zap-ui textarea{
  width:100%;
  border:1px solid #313a56!important;
  border-radius:13px!important;
  background:#0e1322!important;
  color:#fff!important;
  min-height:44px;
  padding:11px 12px!important;
  outline:none;
}

body.zap-ui textarea{
  min-height:100px;
  resize:vertical;
}

body.zap-ui input:focus,
body.zap-ui select:focus,
body.zap-ui textarea:focus{
  border-color:#8240ff!important;
  box-shadow:0 0 0 3px rgba(130,64,255,.11)!important;
}

/* TABLES */
body.zap-ui table{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0 7px!important;
}

body.zap-ui th{
  color:#8f99aa!important;
  font-size:11px!important;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:transparent!important;
  border:0!important;
  padding:9px 11px!important;
}

body.zap-ui td{
  background:#131827!important;
  color:#e8ebf2!important;
  border-top:1px solid #252d44!important;
  border-bottom:1px solid #252d44!important;
  padding:11px!important;
}

body.zap-ui tr td:first-child{
  border-left:1px solid #252d44!important;
  border-radius:12px 0 0 12px;
}

body.zap-ui tr td:last-child{
  border-right:1px solid #252d44!important;
  border-radius:0 12px 12px 0;
}

/* BADGES */
body.zap-ui .badge,
body.zap-ui .pill,
body.zap-ui .tag,
body.zap-ui .status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border-radius:999px!important;
  background:#20273a!important;
  color:#cbd1dd!important;
  font-size:11px!important;
  font-weight:850!important;
}

/* ALERTS */
body.zap-ui .alert{
  border-radius:14px!important;
  padding:13px 14px!important;
  background:#241b3c!important;
  border:1px solid #4b3679!important;
  color:#ddd2ff!important;
}

/* ADMIN */
body.zap-ui.zap-area-admin .admin{
  background:transparent!important;
}

body.zap-ui.zap-area-admin .main{
  padding:24px!important;
}

/* EMPRESA */
body.zap-ui.zap-area-empresa .portal{
  background:transparent!important;
}

body.zap-ui.zap-area-empresa .company{
  color:var(--zap-muted)!important;
}

/* ENTREGADOR */
body.zap-ui.zap-area-entregador .driver-card,
body.zap-ui.zap-area-entregador .job,
body.zap-ui.zap-area-entregador .delivery-card{
  background:linear-gradient(180deg,var(--zap-surface2),var(--zap-surface))!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:18px!important;
}

/* CLIENTE */
body.zap-ui.zap-area-cliente{
  background:
    radial-gradient(circle at 50% -10%,rgba(125,43,255,.12),transparent 30%),
    #0a0d17!important;
}

body.zap-ui.zap-area-cliente .bottom{
  background:rgba(10,13,24,.94)!important;
  border-color:#262d42!important;
  backdrop-filter:blur(16px);
}

body.zap-ui.zap-area-cliente .cat{
  background:#171c2c!important;
  border-color:#2b3349!important;
}

body.zap-ui.zap-area-cliente .cover{
  background:linear-gradient(135deg,#4d159f,#7b23ec 55%,#a73fff)!important;
}

/* MAPS */
body.zap-ui #map{
  border-radius:18px;
  overflow:hidden;
}

/* SCROLLBAR */
body.zap-ui *{
  scrollbar-width:thin;
  scrollbar-color:#3b435c #101522;
}

body.zap-ui *::-webkit-scrollbar{width:8px;height:8px}
body.zap-ui *::-webkit-scrollbar-track{background:#101522}
body.zap-ui *::-webkit-scrollbar-thumb{background:#3b435c;border-radius:999px}

/* MOBILE */
@media(max-width:980px){
  body.zap-ui .admin,
  body.zap-ui .portal{
    grid-template-columns:1fr!important;
  }

  body.zap-ui .side,
  body.zap-ui aside.sidebar{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:unset!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
  }

  body.zap-ui .menu{
    display:flex!important;
    overflow-x:auto!important;
    gap:6px!important;
    padding-bottom:6px;
  }

  body.zap-ui .menu a{
    min-width:max-content!important;
  }

  body.zap-ui .metrics{
    grid-template-columns:repeat(2,1fr)!important;
  }

  body.zap-ui .main{
    padding:16px!important;
  }
}

@media(max-width:600px){
  body.zap-ui .metrics,
  body.zap-ui .quick,
  body.zap-ui .two,
  body.zap-ui .grid2{
    grid-template-columns:1fr!important;
  }

  body.zap-ui .navin{
    padding:10px 12px!important;
  }

  body.zap-ui h1{
    font-size:28px!important;
  }

  body.zap-ui .card{
    padding:15px!important;
    border-radius:18px!important;
  }

  body.zap-ui table{
    font-size:12px!important;
  }

  body.zap-ui td,
  body.zap-ui th{
    padding:9px!important;
  }
}