/* =========================================================
   BIANTI ADMIN.CSS
   Paleta: Negro / Blanco / Morado
   ========================================================= */

* { box-sizing: border-box; }
html, body { height: 100%; }
html{ scroll-behavior:smooth; }
body{
  margin: 0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: rgba(255,255,255,.92);
  background:
    radial-gradient(1200px 700px at 30% 0%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(124,58,237,.12), transparent 55%),
    linear-gradient(180deg, #07070c, #070712);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

::selection{ background:var(--primary); color:#fff; }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--primary); }
img{
  max-width: 100%;
  height: auto;
  display: block;
}

:root{
  /* Design System - AGENTE 4 */
  --bg: #080711;
  --bg-soft: #11101c;
  --surface: #181426;
  --surface-2: #211a32;
  --border: rgba(255,255,255,.10);
  --text: #ffffff;
  --muted: #c9c3d8;
  --primary: #7c3aed;
  --primary-2: #a855f7;
  --accent: #ec4899;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);

  --fuchsia: #d946ef;
  --cyan: #22d3ee;

  /* Legacy aliases (admin) */
  --bg0: #07070c;
  --bg1: #0b0e1a;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.08);
  --muted2: rgba(255,255,255,.45);
  --purple: #7c3aed;
  --purple2: rgba(124,58,237,.35);
  --purple3: rgba(124,58,237,.20);
  --green: #22c55e;
  --green2: rgba(34,197,94,.20);
  --danger2: rgba(239,68,68,.25);
  --warning2: rgba(245,158,11,.20);
  --info: #3b82f6;
  --radius: 14px;
  --radius2: 10px;
  --shadow2: 0 12px 28px rgba(0,0,0,.35);
  --sidebarW: 280px;
  --sidebarCollapsedW: 92px;
  --surface: #10111d;
  --surface2: #151426;
  --panel-border: rgba(255,255,255,.12);
  --focus-ring: 0 0 0 3px rgba(217,70,239,.20);
  --control-h: 44px;
}

/* ---------- LAYOUT GLOBAL ---------- */
.adminLayout, .layout{
  display:flex;
  min-height:100vh;
}
#sidebar-host, #sidebarHost{
  width: var(--sidebarW);
  flex-shrink:0;
}
.main, main.main, .content, .page-wrap{
  flex:1;
  min-height: 100vh;
  padding: 26px 26px 36px;
  margin-left:0;
}

.container{
  max-width: 1200px;
  margin: 0 auto;
}

h1, h2, h3{
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
h1, .h1{ font-size:34px; font-weight:950; }
h2, .h2{ font-size:24px; font-weight:900; }
h3, .h3{ font-size:18px; font-weight:900; }

.page-title{
  font-size: 34px;
  font-weight: 950;
}
.page-sub{
  margin: 0 0 18px;
  color: var(--muted);
}

/* ---------- UTILIDADES ---------- */
.muted{ color: var(--muted); }
.muted2{ color: var(--muted2); }
.row{ display:flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.spacer{ flex: 1; }
.hidden{ display:none !important; }

.hr, .sep{
  height: 1px;
  background: var(--stroke2);
  margin: 16px 0;
  border: 0;
}

/* ---------- PAGE HEADER ---------- */
.head, .pageHead, .headerRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.head .actions, .pageHead .actions, .headerRow .actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* ---------- PANELS ---------- */
.panel{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--stroke2);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 16px;
}

/* ---------- CARDS ---------- */
.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--stroke2);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}
.card.pad{ padding: 16px; }

.cardHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--stroke2);
}
.cardTitle{
  font-weight: 950;
  font-size: 16px;
}

/* Dashboard KPI cards */
.cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.cards .card, .cards > .card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.cards .card .n{
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: .2px;
}
.cards .card .l{
  font-size: 13px;
  opacity: .78;
  line-height: 1.2;
}

/* ---------- STATS GRID ---------- */
.statsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.stat{
  padding: 14px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--stroke2);
}
.stat .num{
  font-size: 26px;
  font-weight: 950;
  line-height: 1.05;
}
.stat .lbl{
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: .15s ease;
  user-select: none;
  white-space: nowrap;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}
.btn:active{ transform: translateY(0); }

.btnPrimary, .btn.primary{
  border-color: rgba(124,58,237,.45);
  background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(124,58,237,.25));
  box-shadow: 0 16px 34px rgba(124,58,237,.22);
}
.btnPrimary:hover, .btn.primary:hover{
  background: linear-gradient(135deg, rgba(124,58,237,.70), rgba(124,58,237,.30));
  border-color: rgba(124,58,237,.65);
}

.btnGhost, .btn.ghost{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10);
}

.btnDanger, .btn.danger{
  border-color: rgba(239,68,68,.45);
  background: linear-gradient(135deg, rgba(239,68,68,.25), rgba(239,68,68,.12));
}
.btnDanger:hover, .btn.danger:hover{
  border-color: rgba(239,68,68,.70);
  background: linear-gradient(135deg, rgba(239,68,68,.35), rgba(239,68,68,.14));
}

.btnGold, .btn.gold{
  border-color: rgba(245,158,11,.45);
  background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(245,158,11,.12));
}
.btnGold:hover, .btn.gold:hover{
  border-color: rgba(245,158,11,.65);
  background: linear-gradient(135deg, rgba(245,158,11,.35), rgba(245,158,11,.14));
}

.btnMini, .btn.mini{
  height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:12px;
}

.btn-full{ width:100%; }

/* ---------- INPUTS / SELECTS / TEXTAREA ---------- */
.field{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.label{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .02em;
}

.input, select, textarea{
  width: 100%;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius2);
  color: #fff;
  padding: 12px 12px;
  outline: none;
  transition: .15s ease;
}
textarea{ min-height: 110px; resize: vertical; }

.input:focus, select:focus, textarea:focus{
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 3px rgba(124,58,237,.20);
}

::placeholder{ color: rgba(255,255,255,.35); }

.chk{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.85);
}
.chk input{ width: 18px; height: 18px; accent-color: var(--purple); }

/* ---------- PILLS / TAGS ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
}
.pillPurple{
  border-color: rgba(124,58,237,.35);
  background: rgba(124,58,237,.18);
}

/* ---------- STATUS BADGES ---------- */
.tag, .badge-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.tag-success, .badge-status.success, .tag-vendido, .tag-disponible{
  background: var(--green2);
  color: var(--green);
  border:1px solid rgba(34,197,94,.3);
}
.tag-danger, .badge-status.danger, .tag-cancelado, .tag-no-disp{
  background: var(--danger2);
  color: var(--danger);
  border:1px solid rgba(239,68,68,.3);
}
.tag-warning, .badge-status.warning, .tag-pendiente, .tag-falta_abonar{
  background: var(--warning2);
  color: var(--warning);
  border:1px solid rgba(245,158,11,.3);
}
.tag-info, .badge-status.info, .tag-consultado{
  background: var(--purple3);
  color: var(--purple);
  border:1px solid rgba(124,58,237,.3);
}

/* ---------- TABLAS ---------- */
.tableWrap{
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--stroke2);
  background: rgba(0,0,0,.15);
}
table{
  width: 100%;
  border-collapse: collapse;
}
thead th{
  text-align: left;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--stroke2);
}
tbody td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
tbody tr{
  transition:background .15s ease;
}
tbody tr:hover{
  background: rgba(124,58,237,.08);
}

/* ---------- THUMBS ---------- */
.thumb{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mediaFrame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.mediaFrame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- PAGE TOOLBAR ---------- */
.pageTop{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.pageTop .left{
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.pageActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- FILTROS ---------- */
.filters{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.tabs{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.tab{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 900;
  cursor: pointer;
  transition: .15s ease;
}
.tab:hover{ background: rgba(255,255,255,.05); }
.tab.active{
  color: #fff;
  border-color: rgba(124,58,237,.50);
  background: rgba(124,58,237,.22);
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width: var(--sidebarW);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  z-index: 50;
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(124,58,237,.18), transparent 60%),
    linear-gradient(180deg, #0b0e1a, #07070c);
  border-right: 1px solid rgba(255,255,255,.08);
}

.sideBrand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.sideCollapse{
  width: 32px;
  height: 32px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  cursor: pointer;
  transition: .15s ease;
}
.sideCollapse:hover{
  color: #fff;
  border-color: rgba(124,58,237,.45);
  background: rgba(124,58,237,.22);
}
.sideCollapse svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s ease;
}
.sideLogoWrap{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.sideLogo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sideBrandTxt{ line-height: 1.1; }
.sideBrandName{ font-weight: 950; font-size: 16px; }
.sideBrandSub{
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
}

.sideBody{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 12px;
  padding-right: 4px;
}
.sideBody::-webkit-scrollbar{ width: 6px; }
.sideBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 20px;
}
.sideBody::-webkit-scrollbar-thumb:hover{
  background: rgba(124,58,237,.55);
}

.sideGroup{ margin-bottom: 14px; }
.sideGroupTitle{
  font-size: 11px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 10px 10px 8px;
}

.sideLink{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  font-weight: 900;
  color: rgba(255,255,255,.82);
  transition: .15s ease;
  border: 1px solid transparent;
}
.sideLink .side-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex-shrink:0;
}
.sideLink .side-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sideLink span{ display:inline-block; }
.sideLink:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: translateX(2px);
}
.sideLink.active{
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(124,58,237,.14));
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 12px 28px rgba(124,58,237,.18);
  color: #fff;
}

.sideFooter{
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.btnLogout{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
  transition: .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btnLogout:hover{
  background: rgba(124,58,237,.28);
  border-color: rgba(124,58,237,.55);
  box-shadow: 0 12px 28px rgba(124,58,237,.20);
}
.sideVersion{
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

body.sidebarCollapsed{ --sidebarW: var(--sidebarCollapsedW); }
body.sidebarCollapsed .sidebar{ padding: 10px; }
body.sidebarCollapsed .sideBrand{ justify-content:center; padding: 10px; }
body.sidebarCollapsed .sideBrandTxt,
body.sidebarCollapsed .sideGroupTitle,
body.sidebarCollapsed .sideLink span:not(.side-icon),
body.sidebarCollapsed .sideVersion{ display:none; }
body.sidebarCollapsed .sideCollapse{ margin-left: 0; }
body.sidebarCollapsed .sideCollapse svg{ transform: rotate(180deg); }
body.sidebarCollapsed .sideLink{ justify-content:center; padding: 12px 10px; }
body.sidebarCollapsed .btnLogout{ padding: 0; gap: 0; font-size: 0; }
body.sidebarCollapsed .btnLogout svg{ width: 18px; height: 18px; }

/* ---------- LOGIN / AUTH ---------- */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}
.login-box {
  width: 100%;
  max-width: 420px;
  background: rgba(10,10,25,.75);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  backdrop-filter: blur(14px);
}
.login-brand {
  text-align: center;
}
.login-brand img {
  width: 90px;
  max-width: 90px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 16px;
}
.login-brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.login-brand p {
  margin: 4px 0 0;
  font-size: 13px;
  opacity: .75;
}
.login-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-box input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.35);
  color: white;
  font-size: 14px;
}
.login-box input:focus{
  border-color: rgba(124,58,237,.65);
  box-shadow: 0 0 0 3px rgba(124,58,237,.20);
  outline:none;
}
.login-box button {
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg,#7c3aed,#9333ea);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.login-box button:hover {
  opacity: .9;
}
#msg {
  text-align: center;
  font-size: 13px;
  min-height: 18px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statsGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  :root{ --sidebarW: 92px; }
  .sideBrandTxt, .sideGroupTitle, .sideLink span:not(.side-icon), .sideVersion{ display:none; }
  .sideBrand{ justify-content:center; }
  .sideLink{ justify-content:center; }
  .main, main.main, .content, .page-wrap{ padding: 18px; }
}

@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .statsGrid{ grid-template-columns: 1fr; }
  h1, .h1, .page-title{ font-size: 28px; }
}

body{
  background:
    linear-gradient(135deg, rgba(124,58,237,.18), transparent 34%),
    linear-gradient(180deg, #07070c 0%, #0c0b15 52%, #08080f 100%);
}

.main, main.main, .content, .page-wrap{
  padding:24px 28px 40px;
}
.head, .pageHead, .headerRow{
  align-items:center;
  padding:18px 18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(255,255,255,.035));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
}
h1, .h1, .page-title{
  font-size:clamp(28px, 3vw, 40px);
}
.page-sub, .head .muted, .pageHead .muted{
  max-width:760px;
  line-height:1.55;
}

.panel, .box, .card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
  border:1px solid var(--panel-border);
  box-shadow:0 22px 52px rgba(0,0,0,.34);
}
.panel{
  padding:18px;
}
.card, section.card, .box{
  padding:16px;
  margin-bottom:14px;
}

.cards, .gridKpi, .statsGrid{
  gap:16px;
}
.cards .card, .cards > .card, .gridKpi .kpi, .cards .kpi, .kpiBox{
  position:relative;
  overflow:hidden;
  min-height:116px;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(167,139,250,.16);
  background:
    radial-gradient(260px 140px at 92% 8%, rgba(217,70,239,.18), transparent 58%),
    linear-gradient(180deg, rgba(124,58,237,.13), rgba(255,255,255,.035));
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cards .card:hover, .gridKpi .kpi:hover, .cards .kpi:hover, .kpiBox:hover{
  transform:translateY(-2px);
  border-color:rgba(167,139,250,.3);
  box-shadow:0 22px 50px rgba(0,0,0,.38);
}
.cards .card::before, .gridKpi .kpi::before, .cards .kpi::before, .kpiBox::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(180deg, var(--purple), var(--fuchsia));
}
.cards .card svg{
  width:30px;
  height:30px;
  margin-bottom:8px;
}
.cards .card .n, .stat .num, .gridKpi .value, .cards .kpi .v, .kpiValue{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:950;
  letter-spacing:-.03em;
}
.cards .card .l, .gridKpi .label, .cards .kpi .t, .kpiLabel{
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:950;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.gridKpi .sub, .cards .kpi .d{
  color:rgba(255,255,255,.56);
  line-height:1.45;
}

.btn{
  height:var(--control-h);
  border-radius:12px;
  font-weight:950;
  letter-spacing:.01em;
}
.btnPrimary, .btn.primary{
  background:linear-gradient(135deg, #7c3aed, #d946ef);
  border-color:rgba(217,70,239,.55);
  box-shadow:0 14px 32px rgba(124,58,237,.28);
}
.btnGold, .btn.gold{
  color:#fff;
  background:linear-gradient(135deg, rgba(217,70,239,.28), rgba(124,58,237,.20));
  border-color:rgba(217,70,239,.42);
}
.btnDanger, .btn.danger, .btn.bad{
  color:#fff;
  background:linear-gradient(135deg, rgba(239,68,68,.32), rgba(127,29,29,.25));
  border-color:rgba(239,68,68,.52);
}
.btnMini, .btn.mini{height:34px;font-size:12px}
.actions, .actionsRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.toolbar, .toolbar .left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.toolbar{
  margin-bottom:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(0,0,0,.16);
}

.field label, .input label, .lbl, .label{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.input, input, select, textarea{
  min-height:var(--control-h);
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .input{
  border-radius:12px;
  background:rgba(2,2,8,.36);
  border:1px solid rgba(255,255,255,.12);
}
input:focus, select:focus, textarea:focus, .input:focus-within{
  border-color:rgba(217,70,239,.62);
  box-shadow:var(--focus-ring);
}
.pill{
  min-height:40px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}
.pill input, .pill select{
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
}

.grid2, .formGrid, .formgrid, .two{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.grow{flex:1}
.tiny, .help{
  color:rgba(255,255,255,.56);
  font-size:12px;
  line-height:1.5;
}
.msg{margin-top:16px}
.right{margin-left:auto}

.tableWrap{
  overflow:auto;
}
.table, table{
  min-width:760px;
}
thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#151426;
  color:rgba(255,255,255,.72);
}
tbody tr:nth-child(even){
  background:rgba(255,255,255,.025);
}
tbody td{
  color:rgba(255,255,255,.86);
  transition:color .15s ease;
}
tbody tr:hover td{
  color:#fff;
}
tbody td:last-child{
  white-space:nowrap;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip, .chipBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(167,139,250,.20);
  background:rgba(124,58,237,.10);
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
}
.chip input, .chipBtn input{
  accent-color:var(--fuchsia);
}

.drop, .uploadBox{
  border:1px dashed rgba(217,70,239,.34);
  border-radius:16px;
  padding:14px;
  background:rgba(217,70,239,.055);
}
.thumbBig{
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
}
.thumbs, .list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.itemLine, .thumbs .thumb{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  height:auto;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
}
.itemLine img, .thumbs .thumb img{
  width:58px;
  height:58px;
  border-radius:12px;
  object-fit:cover;
}
.name{font-weight:950}
.val{font-size:22px;font-weight:950;color:#fff}
.sub, .small{font-size:12px;color:rgba(255,255,255,.56)}

.modalOverlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
  z-index:999;
}
.modalOverlay[aria-hidden="false"], .modalOverlay.is-open{
  display:flex;
}
.modalOverlay[aria-hidden="false"]{
  animation:modalOverlayIn .2s ease;
}
.modalOverlay[aria-hidden="false"] .modal{
  animation:modalIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes modalOverlayIn{
  from{opacity:0} to{opacity:1}
}
@keyframes modalIn{
  from{opacity:0; transform:translateY(20px) scale(.98)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
.modal{
  width:min(980px, 100%);
  max-height:92vh;
  overflow:auto;
  border-radius:18px;
  padding:18px;
  background:linear-gradient(180deg, rgba(20,20,34,.98), rgba(9,9,16,.98));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 80px rgba(0,0,0,.58);
}

.chartBox{
  position:relative;
  height:340px;
  min-height:260px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
}
.chartBox canvas{
  width:100% !important;
  height:100% !important;
}
.chartEmpty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  text-align:center;
  color:rgba(255,255,255,.62);
  border:1px dashed rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}

.sidebar{
  background:
    linear-gradient(180deg, rgba(17,16,29,.98), rgba(7,7,12,.98));
  box-shadow:16px 0 42px rgba(0,0,0,.24);
}
.sideBrand{
  background:linear-gradient(135deg, rgba(124,58,237,.18), rgba(255,255,255,.045));
}
.sideLink{
  position:relative;
}
.sideLink.active::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:999px;
  background:var(--fuchsia);
}

.dashboardGrid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(320px, .6fr);
  gap:16px;
  margin-top:16px;
}
.cardHeader.compact{
  padding:0 0 12px;
  background:transparent;
  border:0;
  box-shadow:none;
}
.quickGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.quickAction{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  transition:.15s ease;
}
.quickAction:hover{
  transform:translateY(-1px);
  border-color:rgba(217,70,239,.38);
  background:rgba(217,70,239,.08);
}
.quickAction strong, .systemList strong{
  display:block;
  font-size:14px;
}
.quickAction small, .systemList small{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.56);
  font-size:12px;
}
.quickIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg, var(--purple), var(--fuchsia));
}
.quickIcon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.systemList{
  display:grid;
  gap:10px;
}
.systemList > div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:10px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
}
.dotStatus{
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:999px;
  background:var(--muted2);
  box-shadow:0 0 0 4px rgba(255,255,255,.04);
}
.dotStatus.ok{
  background:var(--green);
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}
.guidePanel{
  opacity:.84;
}

.auth{
  background:
    radial-gradient(760px 420px at 50% 8%, rgba(217,70,239,.20), transparent 62%),
    linear-gradient(180deg, #07070c, #100f1d);
}
.login-box{
  max-width:460px;
  padding:30px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}
.login-brand img{
  margin-left:auto;
  margin-right:auto;
}
#msg{
  padding-top:4px;
  color:rgba(255,255,255,.70);
}

/* ---------- LOGIN BIANTI VISUAL ---------- */
.authBianti{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#16151d;
  background:
    radial-gradient(900px 520px at 72% 48%, rgba(255,255,255,.09), transparent 58%),
    radial-gradient(760px 420px at 50% 10%, rgba(124,58,237,.20), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.14) 44%, rgba(0,0,0,.52)),
    linear-gradient(180deg, #111114, #07070a);
  overflow:hidden;
}
.authStage{
  position:relative;
  flex:1;
  min-height:720px;
  display:grid;
  grid-template-columns:minmax(320px, .92fr) minmax(420px, 1.08fr);
  align-items:center;
  padding:54px clamp(22px, 5vw, 86px) 34px;
}
.authHero{
  position:relative;
  align-self:stretch;
  min-height:560px;
  opacity:.92;
}
.authRack{
  position:absolute;
  left:-10%;
  top:6%;
  width:min(430px, 82vw);
  height:430px;
  border-top:4px solid rgba(255,255,255,.22);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.authRack span{
  position:absolute;
  top:22px;
  width:82px;
  height:330px;
  border-radius:28px 28px 10px 10px;
  background:linear-gradient(90deg, #0b0b0d, #2b2b30 52%, #08080a);
  transform:skewX(-8deg);
  box-shadow:18px 18px 36px rgba(0,0,0,.45);
}
.authRack span:nth-child(1){left:8px; opacity:.55}
.authRack span:nth-child(2){left:70px; opacity:.68}
.authRack span:nth-child(3){left:134px; opacity:.82}
.authRack span:nth-child(4){left:198px; opacity:.72}
.authRack span:nth-child(5){left:262px; opacity:.58}
.authBag{
  position:absolute;
  left:8%;
  bottom:13%;
  width:230px;
  height:250px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #030304, #17171b);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 36px 80px rgba(0,0,0,.65);
}
.authBag::before{
  content:"";
  position:absolute;
  top:-42px;
  width:98px;
  height:58px;
  border:4px solid rgba(255,255,255,.22);
  border-bottom:0;
  border-radius:60px 60px 0 0;
}
.authBag img{width:126px; opacity:.78}
.authFolded{
  position:absolute;
  left:0;
  bottom:0;
  width:360px;
  height:118px;
  display:grid;
  place-items:center;
  border-radius:34px 120px 24px 24px;
  background:linear-gradient(145deg, #050506, #19191c 55%, #070708);
  box-shadow:0 26px 70px rgba(0,0,0,.62);
}
.authFolded img{width:72px; opacity:.58}
.authAccess{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
}
.authIdentity{
  text-align:center;
  color:#fff;
}
.authIdentity img{
  width:94px;
  height:94px;
  margin:0 auto 16px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 44px rgba(0,0,0,.48);
}
.authIdentity h1{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(28px, 3vw, 42px);
  font-weight:600;
  letter-spacing:.18em;
}
.authPrivate{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:22px;
  color:#b276df;
  font-size:19px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.authPrivate span{
  width:52px;
  height:1px;
  background:linear-gradient(90deg, transparent, #8b5bb8, transparent);
}
.authIdentity p{
  margin:14px 0 0;
  color:rgba(255,255,255,.72);
  font-size:17px;
}
.authBianti .login-box{
  width:min(540px, 100%);
  max-width:none;
  padding:48px;
  gap:22px;
  border-radius:18px;
  color:#171620;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,247,250,.96));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 34px 90px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
}
.login-field{
  display:grid;
  gap:10px;
  font-weight:800;
  color:#24212d;
}
.login-input{
  height:58px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border-radius:12px;
  border:1px solid rgba(17,17,25,.14);
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.02);
}
.login-input svg,
.authOnly svg{
  width:21px;
  height:21px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:#9a98a3;
}
.authBianti .login-box input{
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:#171620;
  font-size:15px;
  outline:none;
}
.authBianti .login-box input::placeholder{color:#aaa8b1}
.authBianti .login-box button{
  height:58px;
  margin-top:6px;
  border-radius:12px;
  background:linear-gradient(135deg, #8d55b6, #71358f);
  box-shadow:0 18px 34px rgba(113,53,143,.28);
  font-size:16px;
  font-weight:900;
}
.authBianti #msg{
  min-height:20px;
  padding:0;
  color:#b91c1c;
  font-weight:800;
}
.authOnly{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:6px 0 0;
  color:#8f8b96;
  font-weight:800;
}
.authWatermark{
  position:absolute;
  right:4%;
  top:26%;
  width:min(380px, 32vw);
  opacity:.12;
  filter:grayscale(1);
  pointer-events:none;
}
.authFooter{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  padding:28px clamp(24px, 16vw, 360px);
  color:#fff;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.38));
  border-top:1px solid rgba(255,255,255,.08);
}
.authFooter div{
  padding:0 42px;
  border-right:1px solid rgba(255,255,255,.10);
}
.authFooter div:last-child{border-right:0}
.authFooter span{display:block; font-weight:950}
.authFooter small{display:block; margin-top:7px; color:rgba(255,255,255,.68); line-height:1.45}
.authCopy{
  padding:16px 24px 22px;
  text-align:center;
  color:rgba(255,255,255,.56);
  font-size:12px;
  background:rgba(0,0,0,.36);
}
@media (max-width: 980px){
  .authStage{grid-template-columns:1fr; min-height:auto; padding-top:34px}
  .authHero{display:none}
  .authWatermark{right:-80px; width:320px}
  .authFooter{grid-template-columns:1fr; padding:24px}
  .authFooter div{border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:16px 0}
  .authFooter div:last-child{border-bottom:0}
}
@media (max-width: 560px){
  .authBianti .login-box{padding:28px 22px}
  .authIdentity h1{font-size:24px; letter-spacing:.12em}
  .authPrivate{font-size:15px}
}

.pos{color:#22c55e}
.neg{color:#ef4444}
.hideMobile{display:table-cell}

@media (max-width: 980px){
  .main, main.main, .content, .page-wrap{padding:18px}
  .sidebar{padding:10px}
  .sideLink{padding:12px 10px}
}
@media (max-width: 760px){
  .head, .pageHead, .headerRow{align-items:flex-start;flex-direction:column}
  .toolbar, .toolbar .left{align-items:stretch}
  .toolbar > *, .toolbar .left > *, .pill{width:100%}
  .grid2, .formGrid, .formgrid, .two{grid-template-columns:1fr}
  .chartBox{height:280px}
  .hideMobile{display:none}
  .dashboardGrid, .quickGrid{grid-template-columns:1fr}
}

/* ---------- BIANTI ADMIN VISUAL APPROVED ---------- */
:root{
  --sidebarW: 292px;
  --sidebarCollapsedW: 86px;
  --admin-paper:#f7f7f8;
  --admin-card:#ffffff;
  --admin-ink:#171721;
  --admin-muted:#6f7280;
  --admin-line:#e8e4ee;
  --admin-violet:#6f3bb3;
  --admin-violet-2:#4a247b;
}
body:not(.authBianti){
  color:var(--admin-ink);
  background:var(--admin-paper);
}
.adminLayout, .layout{background:var(--admin-paper)}
#sidebar-host, #sidebarHost{width:var(--sidebarW); transition:width .2s ease}
.sidebar{
  width:var(--sidebarW);
  padding:22px 18px;
  background:
    radial-gradient(240px 220px at 50% 7%, rgba(255,255,255,.07), transparent 68%),
    linear-gradient(180deg, #030304, #08090b 52%, #020203);
  border-right:1px solid rgba(255,255,255,.09);
  box-shadow:18px 0 46px rgba(0,0,0,.20);
  transition:width .2s ease, padding .2s ease;
}
.sideBrand{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:0 0 22px;
  background:transparent;
  border:0;
}
.sideLogoWrap{
  width:142px;
  height:142px;
  border-radius:50%;
  background:#000;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 44px rgba(0,0,0,.45);
}
.sideBrandTxt{text-align:center}
.sideBrandName{
  font-family:Georgia, "Times New Roman", serif;
  font-size:20px;
  letter-spacing:.24em;
  color:#fff;
}
.sideBrandSub{font-size:13px; letter-spacing:.46em; color:rgba(255,255,255,.76)}
.sideCollapse{
  position:absolute;
  top:22px;
  right:-18px;
  width:38px;
  height:38px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--admin-violet), var(--admin-violet-2));
  border:0;
  box-shadow:0 12px 28px rgba(73,36,123,.34);
}
.sideBody{margin-top:2px; padding-right:0}
.sideGroupTitle{display:none}
.sideLink{
  min-height:56px;
  margin:5px 0;
  padding:0 18px;
  gap:16px;
  border-radius:12px;
  color:rgba(255,255,255,.88);
  font-size:16px;
  font-weight:850;
}
.sideLink:hover{transform:none; background:rgba(255,255,255,.06)}
.sideLink.active{
  background:linear-gradient(135deg, #6d35af, #35165e);
  border-color:transparent;
  box-shadow:0 16px 30px rgba(73,36,123,.34);
}
.sideLink.active::before{display:none}
.sideLink .side-icon{width:24px; height:24px}
.sideLink .side-icon svg{width:23px; height:23px; stroke-width:1.9}
.sideFooter{border-top:0; padding-top:12px}
.sideSupport{
  margin-bottom:16px;
  padding:18px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
}
.supportIcon{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin-bottom:10px;
  border-radius:50%;
  background:linear-gradient(135deg, #6d35af, #35165e);
}
.supportIcon svg{width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2}
.sideSupport strong,.sideSupport small,.sideSupport a{display:block}
.sideSupport small{margin-top:6px; color:rgba(255,255,255,.72); line-height:1.45}
.sideSupport a{margin-top:14px; padding:12px; border-radius:10px; background:linear-gradient(135deg, #6d35af, #3b1766); font-weight:900}
.btnLogout{
  height:56px;
  justify-content:flex-start;
  padding:0 18px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.14);
}
.sideVersion{color:rgba(255,255,255,.45)}
.main, main.main, .content, .page-wrap{
  position:relative;
  min-height:100vh;
  padding:112px 58px 34px;
  color:var(--admin-ink);
  background:var(--admin-paper);
}
.main::before, main.main::before, .content::before, .page-wrap::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:82px;
  background:linear-gradient(180deg, #030304, #09090b);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.adminTopbar{
  position:absolute;
  z-index:2;
  top:0;
  right:28px;
  height:82px;
  display:flex;
  align-items:center;
  gap:22px;
  color:#fff;
}
.topBell{width:24px; height:24px; border-radius:50%; background:var(--admin-violet); display:grid; place-items:center; font-size:12px; font-weight:950}
.topUser span{display:block; font-weight:950}.topUser small{display:block; color:rgba(255,255,255,.72)}
.head, .pageHead, .headerRow{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:var(--admin-ink);
}
.head h1,.pageHead h1,.headerRow h1{
  color:var(--admin-ink);
  font-size:38px;
}
.muted,.page-sub,.head .muted,.pageHead .muted{color:var(--admin-muted)}
.panel,.box,.card{
  color:var(--admin-ink);
  background:var(--admin-card);
  border:1px solid var(--admin-line);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(32,28,40,.08);
}
.btn{color:var(--admin-ink); background:#fff; border-color:#ddd8e5}.btnPrimary,.btn.primary{color:#fff; background:linear-gradient(135deg, #6d35af, #4a247b); border-color:transparent}
.cards.dashboardKpis{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px}
.dashboardKpis .card,.cards.dashboardKpis > .card{
  min-height:126px;
  display:grid;
  grid-template-columns:72px 1fr;
  align-items:center;
  gap:18px;
  padding:22px;
  background:#fff;
}
.dashboardKpis .card > svg{width:64px; height:64px; padding:18px; border-radius:16px; background:#efe7fb; stroke:#6d35af}
.dashboardKpis .card:nth-child(2) > svg{background:#e8f8ed; stroke:#07833d}.dashboardKpis .card:nth-child(3) > svg{background:#fdeaea; stroke:#a31212}.dashboardKpis .card:nth-child(5) > svg{background:#fff2d6; stroke:#9b6900}
.dashboardKpis .card .n{font-size:31px; color:#4f20a0; font-weight:950}.dashboardKpis .card .l{color:#171721; font-size:15px; font-weight:900; opacity:1}
.salesFlow{margin-top:18px; padding:22px}.salesFlow h2{margin-bottom:18px}
.flowSteps{display:grid; grid-template-columns:1fr auto 1fr auto 1.35fr auto 1.2fr; align-items:center; gap:18px}.flowSteps div{display:flex; align-items:center; justify-content:center; gap:10px; text-align:center}.flowSteps span{display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#efe7fb; color:#5a24a0; font-weight:950}.flowSteps .ok{background:#dff6e7;color:#07833d}.flowSteps .bad{background:#fdeaea;color:#a31212}.flowSteps i{font-style:normal;color:#a9a5af;font-size:28px}
.dashboardBottom{grid-template-columns:minmax(0, .95fr) minmax(420px, 1.05fr)}
.quickGrid{grid-template-columns:repeat(5, minmax(0, 1fr))}.quickAction{flex-direction:column; align-items:flex-start; min-height:150px; background:#fff; color:var(--admin-ink)}.quickIcon{background:linear-gradient(135deg,#f1e8fb,#fff); color:#5a24a0}
.latestList{display:grid; gap:10px}.latestList div{display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:10px; border-bottom:1px solid #eeeaf4}.latestList span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#efe7fb;color:#4f20a0;font-weight:950}.latestList small{display:block;color:var(--admin-muted)}.latestList em{padding:7px 10px;border-radius:8px;background:#efe7fb;color:#5a24a0;font-style:normal;font-weight:900;font-size:12px}
.guidePanel{display:none}
body.sidebarCollapsed{--sidebarW:var(--sidebarCollapsedW)}
body.sidebarCollapsed .sidebar{padding:16px 10px}
body.sidebarCollapsed .sideLogoWrap{width:58px;height:58px}
body.sidebarCollapsed .sideBrand{padding-bottom:18px}
body.sidebarCollapsed .sideCollapse{right:-15px; top:20px}
body.sidebarCollapsed .sideBrandTxt,body.sidebarCollapsed .sideSupport,body.sidebarCollapsed .sideVersion{display:none}
body.sidebarCollapsed .sideLink{width:58px;height:58px;min-height:58px;margin:8px auto;padding:0;justify-content:center}
body.sidebarCollapsed .sideLink span:not(.side-icon){display:none}
body.sidebarCollapsed .btnLogout{width:58px;height:58px;margin:0 auto;justify-content:center;padding:0;font-size:0}
body.sidebarCollapsed .btnLogout svg{width:22px;height:22px}
@media (max-width:1100px){.cards.dashboardKpis{grid-template-columns:repeat(2,1fr)}.flowSteps{grid-template-columns:1fr}.flowSteps i{display:none}.quickGrid{grid-template-columns:repeat(2,1fr)}.dashboardBottom{grid-template-columns:1fr}}

/* ---------- CONTRASTE ADMIN FINAL ---------- */
body:not(.authBianti){
  --admin-paper:#f6f6f8;
  --admin-card:#ffffff;
  --admin-ink:#171721;
  --admin-muted:#667085;
  --admin-soft:#f4f1f8;
  --admin-line:#e5e1eb;
  color:var(--admin-ink) !important;
  background:var(--admin-paper) !important;
}
body:not(.authBianti) .main,
body:not(.authBianti) main.main,
body:not(.authBianti) .content,
body:not(.authBianti) .page-wrap{
  color:var(--admin-ink) !important;
  background:var(--admin-paper) !important;
}
body:not(.authBianti) h1,
body:not(.authBianti) h2,
body:not(.authBianti) h3,
body:not(.authBianti) .cardTitle,
body:not(.authBianti) strong{
  color:var(--admin-ink);
}
body:not(.authBianti) .muted,
body:not(.authBianti) .muted2,
body:not(.authBianti) .page-sub,
body:not(.authBianti) small,
body:not(.authBianti) .sub,
body:not(.authBianti) .label,
body:not(.authBianti) .lbl,
body:not(.authBianti) .kpiLabel,
body:not(.authBianti) .gridKpi .label,
body:not(.authBianti) .cards .kpi .t{
  color:var(--admin-muted) !important;
  opacity:1 !important;
}
body:not(.authBianti) .panel,
body:not(.authBianti) .box,
body:not(.authBianti) .card,
body:not(.authBianti) .kpi,
body:not(.authBianti) .kpiBox,
body:not(.authBianti) .stat,
body:not(.authBianti) .cardrow .card,
body:not(.authBianti) section.card{
  color:var(--admin-ink) !important;
  background:var(--admin-card) !important;
  border:1px solid var(--admin-line) !important;
  border-radius:16px !important;
  box-shadow:0 18px 42px rgba(31,28,40,.08) !important;
}
body:not(.authBianti) .panel{padding:20px}
body:not(.authBianti) .card,
body:not(.authBianti) section.card{padding:18px}
body:not(.authBianti) .cards .card::before,
body:not(.authBianti) .gridKpi .kpi::before,
body:not(.authBianti) .cards .kpi::before,
body:not(.authBianti) .kpiBox::before{display:none !important}
body:not(.authBianti) .cards .card .n,
body:not(.authBianti) .stat .num,
body:not(.authBianti) .gridKpi .value,
body:not(.authBianti) .cards .kpi .v,
body:not(.authBianti) .kpiValue,
body:not(.authBianti) .kpi .value,
body:not(.authBianti) .cardrow .v{
  color:#4f20a0 !important;
  font-weight:950 !important;
}
body:not(.authBianti) .cards .card .l,
body:not(.authBianti) .gridKpi .sub,
body:not(.authBianti) .cards .kpi .d,
body:not(.authBianti) .kpi .sub,
body:not(.authBianti) .cardrow .k{
  color:var(--admin-muted) !important;
  opacity:1 !important;
}
.gridKpi .kpi,
.cards .kpi,
.kpiBox,
.cardrow .card{
  min-height:112px;
  position:relative;
  padding:20px 20px 20px 92px !important;
}
.gridKpi .kpi::after,
.cards .kpi::after,
.kpiBox::after,
.cardrow .card::after{
  content:"";
  position:absolute;
  left:20px;
  top:22px;
  width:54px;
  height:54px;
  border-radius:15px;
  background:linear-gradient(135deg, #efe7fb, #f8f3ff);
  box-shadow:inset 0 0 0 1px rgba(111,59,179,.10);
}
.toolbar,
.filters,
.formgrid,
.formGrid{
  color:var(--admin-ink) !important;
}
body:not(.authBianti) .toolbar{
  gap:14px;
  padding:14px;
  border-radius:14px;
  background:#fff !important;
  border:1px solid var(--admin-line) !important;
  box-shadow:0 12px 28px rgba(31,28,40,.05);
}
body:not(.authBianti) .toolbar .left{gap:10px}
body:not(.authBianti) .pill,
body:not(.authBianti) .input,
body:not(.authBianti) input:not([type="checkbox"]):not([type="radio"]),
body:not(.authBianti) select,
body:not(.authBianti) textarea{
  min-height:42px;
  color:var(--admin-ink) !important;
  background:#fff !important;
  border:1px solid #dcd7e4 !important;
  border-radius:12px !important;
  box-shadow:none !important;
  opacity:1 !important;
}
body:not(.authBianti) input:not([type="checkbox"]):not([type="radio"]),
body:not(.authBianti) select,
body:not(.authBianti) textarea{padding:10px 12px}
body:not(.authBianti) .pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  font-weight:800;
}
body:not(.authBianti) .pill span,
body:not(.authBianti) .pill label,
body:not(.authBianti) .field label,
body:not(.authBianti) label{
  color:#3a3542 !important;
  opacity:1 !important;
}
body:not(.authBianti) ::placeholder{color:#9a95a3 !important; opacity:1 !important}
body:not(.authBianti) input:focus,
body:not(.authBianti) select:focus,
body:not(.authBianti) textarea:focus,
body:not(.authBianti) .input:focus-within{
  border-color:rgba(111,59,179,.65) !important;
  box-shadow:0 0 0 3px rgba(111,59,179,.14) !important;
}
body:not(.authBianti) .btn{
  color:var(--admin-ink) !important;
  background:#fff !important;
  border:1px solid #dcd7e4 !important;
  box-shadow:0 8px 20px rgba(31,28,40,.05);
}
body:not(.authBianti) .btn.primary,
body:not(.authBianti) .btnPrimary,
body:not(.authBianti) .btn.btnPrimary{
  color:#fff !important;
  background:linear-gradient(135deg, #6f3bb3, #4a247b) !important;
  border-color:transparent !important;
}
body:not(.authBianti) .btn.gold,
body:not(.authBianti) .btnGold{
  color:#fff !important;
  background:linear-gradient(135deg, #b7791f, #8a520d) !important;
  border-color:transparent !important;
}
body:not(.authBianti) .btn.bad,
body:not(.authBianti) .btnDanger,
body:not(.authBianti) .btn.danger{
  color:#fff !important;
  background:linear-gradient(135deg, #dc2626, #991b1b) !important;
  border-color:transparent !important;
}
.tableWrap{
  overflow:auto !important;
  border:1px solid var(--admin-line) !important;
  border-radius:14px !important;
  background:#fff !important;
}
body:not(.authBianti) table,
body:not(.authBianti) .table{
  color:var(--admin-ink) !important;
  background:#fff !important;
}
body:not(.authBianti) thead th{
  color:#5b5664 !important;
  background:#faf9fb !important;
  border-bottom:1px solid var(--admin-line) !important;
  font-weight:950 !important;
}
body:not(.authBianti) tbody td{
  color:#2a2631 !important;
  border-bottom:1px solid #eeeaf3 !important;
}
body:not(.authBianti) tbody tr:nth-child(even){background:#fcfbfd !important}
body:not(.authBianti) tbody tr:hover,
body:not(.authBianti) tbody tr:hover td{background:#f6f0ff !important}
.tag,
.badge-status{
  opacity:1 !important;
  border:1px solid transparent;
}
.tag-success,.badge-status.success,.tag-vendido,.tag-disponible,
.tag-visible,.tag-si{
  color:#087a38 !important;
  background:#e7f8ee !important;
  border-color:#c8efd7 !important;
}
.tag-danger,.badge-status.danger,.tag-cancelado,.tag-no-disp,.tag-no_vendido,
.tag-no{
  color:#b42318 !important;
  background:#fdeaea !important;
  border-color:#facaca !important;
}
.tag-warning,.badge-status.warning,.tag-pendiente,.tag-falta_abonar{
  color:#9a5b00 !important;
  background:#fff3d8 !important;
  border-color:#f7d997 !important;
}
.tag-info,.badge-status.info,.tag-consultado,.tag-en_revision{
  color:#5a24a0 !important;
  background:#efe7fb !important;
  border-color:#ddcdf3 !important;
}
.modalOverlay{
  background:rgba(10,10,14,.58) !important;
  backdrop-filter:blur(8px);
}
.modalOverlay .modal,
body:not(.authBianti) .modal{
  color:var(--admin-ink) !important;
  background:#fff !important;
  border:1px solid var(--admin-line) !important;
  border-radius:18px !important;
  box-shadow:0 32px 90px rgba(0,0,0,.30) !important;
}
.modal .sep{background:#eeeaf3 !important}
.modal .muted2,
.modal .muted{color:var(--admin-muted) !important}
.modal input,
.modal select,
.modal textarea{color:var(--admin-ink) !important; background:#fff !important}
.chartBox{
  background:#fff !important;
  border:1px solid var(--admin-line) !important;
  border-radius:14px !important;
}
.noteBox{
  color:#4b4654 !important;
  background:#fbf9fe !important;
  border:1px solid #e4ddec !important;
  opacity:1 !important;
}
.empty,
.chartEmpty{
  color:var(--admin-muted) !important;
  background:#fff !important;
  border:1px dashed #d8d2df !important;
  border-radius:16px !important;
}
.empty h3,.chartEmpty h3{color:var(--admin-ink) !important}
.sidebar{color:#fff !important}
.sidebar strong,.sidebar small,.sidebar span,.sidebar a,.sidebar button{color:inherit}
.sideLogo{object-fit:cover; object-position:center}
.sideCollapse{color:#fff !important}
.btnLogout{color:#fff !important}
body.sidebarCollapsed #sidebar-host,
body.sidebarCollapsed #sidebarHost{width:var(--sidebarCollapsedW)}
.authBianti{overflow:auto !important}
.authBianti .authStage{
  min-height:calc(100vh - 170px);
  padding-bottom:42px;
}
.authBianti .login-box{position:relative; z-index:3}
.authBianti .authOnly{color:#726d79 !important; opacity:1 !important}
.authBianti .authFooter{
  position:relative;
  z-index:1;
  padding-top:22px;
  padding-bottom:22px;
}
.authBianti .authFooter div{min-width:0}
.authBianti .authFooter span{color:#fff}
.authBianti .authFooter small{color:rgba(255,255,255,.72)}
@media (max-width:980px){
  body:not(.authBianti) .main,body:not(.authBianti) main.main{padding:104px 22px 32px}
  .gridKpi .kpi,.cards .kpi,.kpiBox,.cardrow .card{padding-left:20px !important;padding-top:88px !important}
  .gridKpi .kpi::after,.cards .kpi::after,.kpiBox::after,.cardrow .card::after{top:20px}
}

/* Productos vuelve a ser sección principal del admin */
.quickGrid{grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
@media (max-width:1100px){.quickGrid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}}
@media (max-width:620px){.quickGrid{grid-template-columns:1fr !important}}

/* =========================================================
   PATCH RESPONSIVE COMPACTO - BIANTI ADMIN
   Pegar al final de assets/css/admin.css
========================================================= */

body:not(.authBianti) {
  --sidebarW: 250px;
  --sidebarCollapsedW: 78px;
}

/* Sidebar más serio y menos gigante */
body:not(.authBianti) .sidebar {
  width: var(--sidebarW) !important;
  padding: 18px 14px !important;
}

body:not(.authBianti) .sideLogoWrap {
  width: 108px !important;
  height: 108px !important;
}

body:not(.authBianti) .sideBrand {
  padding-bottom: 16px !important;
}

body:not(.authBianti) .sideBrandName {
  font-size: 17px !important;
  letter-spacing: .20em !important;
}

body:not(.authBianti) .sideBrandSub {
  font-size: 11px !important;
  letter-spacing: .36em !important;
}

body:not(.authBianti) .sideLink {
  min-height: 48px !important;
  padding: 0 14px !important;
  gap: 12px !important;
  font-size: 14px !important;
}

body:not(.authBianti) .sideLink .side-icon {
  width: 21px !important;
  height: 21px !important;
}

body:not(.authBianti) .sideLink .side-icon svg {
  width: 20px !important;
  height: 20px !important;
}

body:not(.authBianti) .btnLogout {
  height: 48px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}

/* Contenido principal más compacto */
body:not(.authBianti) .main,
body:not(.authBianti) main.main,
body:not(.authBianti) .content,
body:not(.authBianti) .page-wrap {
  padding: 98px 38px 30px !important;
}

body:not(.authBianti) .adminTopbar {
  height: 76px !important;
  right: 24px !important;
}

body:not(.authBianti) .main::before,
body:not(.authBianti) main.main::before,
body:not(.authBianti) .content::before,
body:not(.authBianti) .page-wrap::before {
  height: 76px !important;
}

/* Títulos */
body:not(.authBianti) .head h1,
body:not(.authBianti) .pageHead h1,
body:not(.authBianti) .headerRow h1,
body:not(.authBianti) h1,
body:not(.authBianti) .page-title {
  font-size: clamp(26px, 2.2vw, 34px) !important;
}

body:not(.authBianti) .head,
body:not(.authBianti) .pageHead,
body:not(.authBianti) .headerRow {
  margin-bottom: 12px !important;
}

/* Botones superiores */
body:not(.authBianti) .actions {
  gap: 8px !important;
}

body:not(.authBianti) .btn {
  height: 40px !important;
  padding: 0 13px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
}

/* KPI del dashboard */
body:not(.authBianti) .cards.dashboardKpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

body:not(.authBianti) .dashboardKpis .card,
body:not(.authBianti) .cards.dashboardKpis > .card {
  min-height: 108px !important;
  padding: 18px !important;
  grid-template-columns: 58px 1fr !important;
  gap: 14px !important;
}

body:not(.authBianti) .dashboardKpis .card > svg {
  width: 52px !important;
  height: 52px !important;
  padding: 15px !important;
  border-radius: 14px !important;
}

body:not(.authBianti) .dashboardKpis .card .n {
  font-size: clamp(24px, 2vw, 30px) !important;
}

body:not(.authBianti) .dashboardKpis .card .l {
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: .06em !important;
}

/* Flujo de ventas */
body:not(.authBianti) .salesFlow {
  margin-top: 14px !important;
  padding: 18px !important;
}

body:not(.authBianti) .salesFlow h2 {
  font-size: 21px !important;
  margin-bottom: 14px !important;
}

body:not(.authBianti) .flowSteps {
  gap: 12px !important;
}

body:not(.authBianti) .flowSteps span {
  width: 44px !important;
  height: 44px !important;
}

body:not(.authBianti) .flowSteps strong {
  font-size: 14px !important;
}

/* Paneles inferiores */
body:not(.authBianti) .dashboardGrid {
  gap: 14px !important;
}

body:not(.authBianti) .panel,
body:not(.authBianti) .box,
body:not(.authBianti) .card {
  border-radius: 14px !important;
}

body:not(.authBianti) .quickGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body:not(.authBianti) .quickAction {
  min-height: 118px !important;
  padding: 13px !important;
}

body:not(.authBianti) .quickIcon {
  width: 34px !important;
  height: 34px !important;
}

body:not(.authBianti) .quickAction strong {
  font-size: 13px !important;
}

body:not(.authBianti) .quickAction small {
  font-size: 11px !important;
}

/* Sidebar colapsado */
body.sidebarCollapsed:not(.authBianti) .sidebar {
  width: var(--sidebarCollapsedW) !important;
  padding: 14px 8px !important;
}

body.sidebarCollapsed:not(.authBianti) .sideLogoWrap {
  width: 52px !important;
  height: 52px !important;
}

body.sidebarCollapsed:not(.authBianti) #sidebar-host,
body.sidebarCollapsed:not(.authBianti) #sidebarHost {
  width: var(--sidebarCollapsedW) !important;
}

body.sidebarCollapsed:not(.authBianti) .sideLink,
body.sidebarCollapsed:not(.authBianti) .btnLogout {
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
}

/* Notebook común: 1366px / 1280px */
@media (max-width: 1366px) {
  body:not(.authBianti) {
    --sidebarW: 230px;
  }

  body:not(.authBianti) .main,
  body:not(.authBianti) main.main,
  body:not(.authBianti) .content,
  body:not(.authBianti) .page-wrap {
    padding: 92px 26px 28px !important;
  }

  body:not(.authBianti) .sideLogoWrap {
    width: 92px !important;
    height: 92px !important;
  }

  body:not(.authBianti) .sideLink {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  body:not(.authBianti) .dashboardKpis .card,
  body:not(.authBianti) .cards.dashboardKpis > .card {
    min-height: 100px !important;
    padding: 16px !important;
  }

  body:not(.authBianti) .dashboardKpis .card > svg {
    width: 48px !important;
    height: 48px !important;
  }
}

/* Notebook chica / tablet horizontal */
@media (max-width: 1180px) {
  body:not(.authBianti) .cards.dashboardKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.authBianti) .flowSteps {
    grid-template-columns: 1fr !important;
  }

  body:not(.authBianti) .flowSteps i {
    display: none !important;
  }

  body:not(.authBianti) .flowSteps div {
    justify-content: flex-start !important;
  }

  body:not(.authBianti) .dashboardBottom {
    grid-template-columns: 1fr !important;
  }

  body:not(.authBianti) .quickGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Tablet / celular grande */
@media (max-width: 980px) {
  body:not(.authBianti) {
    --sidebarW: 78px;
  }

  body:not(.authBianti) .sidebar {
    width: 78px !important;
    padding: 14px 8px !important;
  }

  body:not(.authBianti) #sidebar-host,
  body:not(.authBianti) #sidebarHost {
    width: 78px !important;
  }

  body:not(.authBianti) .sideLogoWrap {
    width: 52px !important;
    height: 52px !important;
  }

  body:not(.authBianti) .sideBrandTxt,
  body:not(.authBianti) .sideGroupTitle,
  body:not(.authBianti) .sideLink span:not(.side-icon),
  body:not(.authBianti) .sideVersion,
  body:not(.authBianti) .sideSupport {
    display: none !important;
  }

  body:not(.authBianti) .sideLink,
  body:not(.authBianti) .btnLogout {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }

  body:not(.authBianti) .btnLogout {
    font-size: 0 !important;
  }

  body:not(.authBianti) .main,
  body:not(.authBianti) main.main,
  body:not(.authBianti) .content,
  body:not(.authBianti) .page-wrap {
    padding: 90px 18px 26px !important;
  }

  body:not(.authBianti) .adminTopbar {
    right: 16px !important;
  }
}

/* Celular */
@media (max-width: 620px) {
  body:not(.authBianti) .main,
  body:not(.authBianti) main.main,
  body:not(.authBianti) .content,
  body:not(.authBianti) .page-wrap {
    padding: 84px 12px 22px !important;
  }

  body:not(.authBianti) .cards.dashboardKpis {
    grid-template-columns: 1fr !important;
  }

  body:not(.authBianti) .dashboardKpis .card,
  body:not(.authBianti) .cards.dashboardKpis > .card {
    min-height: 96px !important;
    grid-template-columns: 50px 1fr !important;
  }

  body:not(.authBianti) .dashboardKpis .card > svg {
    width: 46px !important;
    height: 46px !important;
  }

  body:not(.authBianti) .quickGrid {
    grid-template-columns: 1fr !important;
  }

  body:not(.authBianti) .actions .btn {
    width: 100% !important;
  }

  body:not(.authBianti) .adminTopbar {
    gap: 10px !important;
  }

  body:not(.authBianti) .topUser span {
    font-size: 13px !important;
  }

  body:not(.authBianti) .topUser small {
    font-size: 11px !important;
  }
}