:root {
  --tech-bg: #050711;
  --tech-surface: rgba(15, 19, 38, .82);
  --tech-line: rgba(125, 249, 255, .15);
  --tech-cyan: #59f3ff;
  --tech-violet: #9b7bff;
  --tech-pink: #ff68c7;
  --tech-lime: #82f7a8;
  --tech-text: #f6f7ff;
  --tech-muted: #aab4d0;
  --tech-radius: 22px;
}

html { background: var(--tech-bg); overflow-x: hidden; }
body {
  color: var(--tech-text);
  background-color: var(--tech-bg) !important;
  background-image:
    radial-gradient(circle at 8% 5%, rgba(89, 243, 255, .14), transparent 27rem),
    radial-gradient(circle at 92% 12%, rgba(255, 104, 199, .12), transparent 28rem),
    radial-gradient(circle at 62% 90%, rgba(155, 123, 255, .12), transparent 32rem),
    linear-gradient(145deg, #050711, #090d1c 55%, #060814) !important;
  background-attachment: fixed !important;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(rgba(89,243,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(89,243,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.app-sidebar {
  background: rgba(5, 7, 17, .94) !important;
  border-right-color: var(--tech-line) !important;
  box-shadow: 18px 0 50px rgba(0,0,0,.18);
}
.sidebar-brand {
  background: linear-gradient(135deg, rgba(89,243,255,.14), rgba(155,123,255,.12)) !important;
  border-color: rgba(89,243,255,.2) !important;
}
.sidebar-brand-icon { background: linear-gradient(135deg, var(--tech-cyan), var(--tech-violet)) !important; color:#06101c !important; box-shadow: 0 0 24px rgba(89,243,255,.3); }
.brand-pulse { display:inline-block; width:6px; height:6px; margin-left:4px; border-radius:50%; background:var(--tech-lime); box-shadow:0 0 10px var(--tech-lime); vertical-align:middle; }
.sidebar-user-avatar { background: linear-gradient(135deg, var(--tech-violet), var(--tech-pink)) !important; box-shadow:0 8px 20px rgba(155,123,255,.23); }
.sidebar-link { color:#dce3f8 !important; }
.sidebar-link i { color:var(--tech-cyan) !important; }
.sidebar-link:hover, .sidebar-link.active { background:linear-gradient(90deg, rgba(89,243,255,.13), rgba(155,123,255,.11)) !important; border-color:rgba(89,243,255,.18) !important; }
.sidebar-link.active::before { background:linear-gradient(var(--tech-cyan), var(--tech-pink)) !important; }

.card, .glass, .dashboard-panel, .kpi-card, .dashboard-header, .app-topbar {
  background: linear-gradient(145deg, rgba(18,23,45,.88), rgba(9,12,27,.8)) !important;
  border: 1px solid var(--tech-line) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035) !important;
  border-radius: var(--tech-radius) !important;
}
.card:hover, .kpi-card:hover { border-color:rgba(89,243,255,.32) !important; }
.card-header, .panel-head { background:rgba(255,255,255,.015) !important; border-color:rgba(255,255,255,.07) !important; }
h1, h2, h3, h4, h5, h6 { letter-spacing:-.025em; }
.text-muted, small.text-muted, .dashboard-subtitle { color:var(--tech-muted) !important; }
.btn { border-radius:12px; font-weight:650; }
.btn-primary { color:#06101c !important; background:linear-gradient(135deg, var(--tech-cyan), #58a6ff) !important; border-color:transparent !important; box-shadow:0 8px 24px rgba(89,243,255,.16); }
.btn-outline-primary { color:var(--tech-cyan); border-color:rgba(89,243,255,.45); }
.btn-outline-secondary, .btn-outline-light { color:#dce6ff; border-color:rgba(220,230,255,.22); }
.badge { padding:.48em .72em; border-radius:999px; }
.form-control, .form-select, .input-group-text {
  min-height:42px;
  border-radius:12px !important;
  background:rgba(4,7,18,.62) !important;
  border-color:rgba(156,175,220,.2) !important;
  color:#f6f7ff !important;
}
.form-control:focus, .form-select:focus { border-color:var(--tech-cyan) !important; box-shadow:0 0 0 3px rgba(89,243,255,.1) !important; }
.table-responsive { overscroll-behavior-inline:contain; }
.table > :not(caption) > * > * { padding:.8rem .75rem; }
.table tbody tr { transition:background-color .18s ease; }
.progress, .analytics-track { background:rgba(255,255,255,.07) !important; }
.progress-bar, .analytics-fill { background:linear-gradient(90deg, var(--tech-cyan), var(--tech-violet), var(--tech-pink)) !important; }

@media (max-width: 767.98px) {
  :root { --tech-radius:18px; }
  .app-main { width:100%; max-width:100vw; padding:10px !important; overflow:visible; }
  .app-topbar { top:8px !important; margin-bottom:12px; padding:9px 10px !important; }
  .app-content, .row, [class*="col-"] { min-width:0; }
  h1, .h1 { font-size:1.45rem; }
  .card-body { padding:14px !important; }
  .table-responsive:has(.mobile-card-table) { overflow:visible !important; }
  .mobile-card-table tbody { gap:10px !important; }
  .mobile-card-table tr { background:linear-gradient(145deg, rgba(21,27,52,.92), rgba(10,14,31,.9)) !important; border-color:var(--tech-line) !important; }
  .mobile-card-table td { text-align:left !important; padding:9px 12px !important; }
  .mobile-card-table td::before { color:#7fddea !important; }
  .mobile-card-table td[data-label="Acciones"] form { display:inline-flex !important; }
  .mobile-card-table td[data-label="Acciones"] .btn { margin:3px 3px 3px 0 !important; }
  .row.g-3 { --bs-gutter-y:.75rem; }
}

@media (max-width: 393px) {
  .app-main { padding-left:max(9px, env(safe-area-inset-left)) !important; padding-right:max(9px, env(safe-area-inset-right)) !important; }
  .app-topbar > span:last-child { max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .btn { white-space:normal; }
  .d-flex.justify-content-between { gap:.65rem; flex-wrap:wrap; }
  .form-control, .form-select { max-width:100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .kpi-card, .btn { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .btn:hover { transform:translateY(-1px); }
}