/* ================================================================
   TRACK EC — Custom Theme v7
   Palette: #FF6B00 orange · #070c18 dark · #0d1225 card
   ================================================================ */

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  --tc-bg:       #070c18;
  --tc-surface:  #0d1225;
  --tc-surface2: #111827;
  --tc-border:   rgba(255,255,255,0.07);
  --tc-orange:   #FF6B00;
  --tc-amber:    #FF8C00;
  --tc-orange-d: #FF4500;
  --tc-text:     #d1d5db;
  --tc-text-sub: #6b7280;
  --tc-text-dim: #374151;
}

/* ─── 0. GLOBAL ───────────────────────────────────────────────── */
*, *::before, *::after {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-sizing: border-box;
}

html, body {
  background: #070c18 !important;
  color: #d1d5db !important;
  margin: 0; padding: 0;
}

#root {
  background: #070c18 !important;
  min-height: 100vh;
}

/* ─── 1. PAGE LOADER ──────────────────────────────────────────── */
.loader {
  width: 44px !important;
  aspect-ratio: 1 !important;
  border-color: #1a1f2e !important;
  border-right-color: #FF6B00 !important;
  box-shadow: 0 0 18px rgba(255,107,0,0.3);
}

/* ─── 2. SCROLLBARS ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,107,0,0.35); }

/* ================================================================
   3. LOGIN PAGE — full-screen GPS background + floating card
   ================================================================ */

#root main:has(> .MuiPaper-root > form) {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: #070c18 !important;
  overflow: hidden !important;
}

/* Sidebar → full-screen background canvas */
#root main:has(> .MuiPaper-root > form) > div:first-child {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  background: #070c18 !important;
  padding-bottom: 0 !important;
}

.trackec-gps-anim {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Hide original sidebar content */
#root main:has(> .MuiPaper-root > form) > div:first-child > *:not(.trackec-gps-anim) {
  display: none !important;
}

/* Form card — floating glassmorphism */
#root main:has(> .MuiPaper-root > form) > .MuiPaper-root {
  position: relative !important;
  z-index: 10 !important;
  flex: none !important;
  width: min(460px, 90vw) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  background: rgba(8,13,28,0.90) !important;
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.08),
    0 40px 100px rgba(0,0,0,0.80),
    0 0 80px rgba(255,107,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  padding: 0 !important;
}

/* Orange top accent bar */
#root main:has(> .MuiPaper-root > form) > .MuiPaper-root::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF4500, #FF6B00, #FF8C00, #FFB347);
  border-radius: 24px 24px 0 0;
  z-index: 10;
}

/* Inner glow */
#root main:has(> .MuiPaper-root > form) > .MuiPaper-root::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,107,0,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Form padding */
#root main:has(> .MuiPaper-root > form) > .MuiPaper-root form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 40px 40px 36px !important;
}

/* ── Login inputs ─────────────────────────────────────────────── */
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-root {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  transition: background 0.2s ease !important;
}
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-root:hover {
  background: rgba(255,255,255,0.09) !important;
}
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,255,255,0.12) !important;
  transition: border-color 0.2s ease !important;
}
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,107,0,0.45) !important;
}
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-root.Mui-focused {
  background: rgba(255,255,255,0.08) !important;
}
#root main:has(> .MuiPaper-root > form) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #FF6B00 !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(255,107,0,0.12) !important;
}
#root main:has(> .MuiPaper-root > form) .MuiInputLabel-root { color: #6b7280 !important; }
#root main:has(> .MuiPaper-root > form) .MuiInputLabel-root.Mui-focused { color: #FF8C00 !important; }
#root main:has(> .MuiPaper-root > form) .MuiInputBase-input { font-size: 14px !important; color: #f3f4f6 !important; }
#root main:has(> .MuiPaper-root > form) .MuiIconButton-root:not(.MuiIconButton-colorPrimary) { color: #6b7280 !important; }

/* ── Login button ─────────────────────────────────────────────── */
#root main:has(> .MuiPaper-root > form) .MuiButton-contained {
  background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%) !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  box-shadow: 0 4px 20px rgba(255,107,0,0.45), 0 1px 3px rgba(0,0,0,0.3) !important;
  transition: all 0.25s ease !important;
  border: none !important;
  color: #ffffff !important;
  margin-top: 4px !important;
}
#root main:has(> .MuiPaper-root > form) .MuiButton-contained:hover {
  background: linear-gradient(135deg, #FF4500 0%, #E03800 100%) !important;
  box-shadow: 0 6px 28px rgba(255,107,0,0.60), 0 2px 6px rgba(0,0,0,0.35) !important;
  transform: translateY(-1px) !important;
}
#root main:has(> .MuiPaper-root > form) .MuiButton-contained:active { transform: translateY(0) !important; }
#root main:has(> .MuiPaper-root > form) .MuiButton-contained.Mui-disabled {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.25) !important;
  box-shadow: none !important;
}

/* ── Login links / captions ───────────────────────────────────── */
#root main:has(> .MuiPaper-root > form) .MuiTypography-caption {
  color: #FF8C00 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
#root main:has(> .MuiPaper-root > form) .MuiTypography-caption:hover { color: #FFB347 !important; }

/* ── Login top corner buttons ─────────────────────────────────── */
#root main:has(> .MuiPaper-root > form) .MuiIconButton-colorPrimary {
  color: #6b7280 !important;
  border-radius: 8px !important;
}
#root main:has(> .MuiPaper-root > form) .MuiIconButton-colorPrimary:hover {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.10) !important;
}

/* ── Injected login header/footer (gps-anim.js) ──────────────── */
.trackec-form-header { text-align: center; padding-bottom: 28px; }
.trackec-card-logo {
  display: block; margin: 0 auto 20px; height: 54px; width: auto;
  filter: drop-shadow(0 0 16px rgba(255,107,0,0.4));
}
.trackec-form-badge {
  display: inline-block;
  background: rgba(255,107,0,0.12);
  color: #FF8C00; font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; padding: 5px 16px;
  border-radius: 20px; border: 1px solid rgba(255,107,0,0.25);
  margin-bottom: 20px;
}
.trackec-form-title {
  margin: 0 0 10px !important; font-size: 28px !important; font-weight: 800 !important;
  color: #f9fafb !important; letter-spacing: -0.5px; line-height: 1.2;
}
.trackec-form-sub {
  margin: 0 !important; font-size: 13.5px !important;
  color: #6b7280 !important; font-weight: 400 !important; line-height: 1.55;
}
.trackec-form-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding-top: 24px; margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.trackec-form-footer span { font-size: 11px !important; color: #4b5563 !important; font-weight: 400 !important; }
.trackec-form-footer strong { color: #FF6B00 !important; font-weight: 600 !important; }
.trackec-footer-tag { font-size: 9px !important; letter-spacing: 2.5px !important; color: #374151 !important; font-weight: 500 !important; }

/* ================================================================
   4. GLOBAL PAPER / SURFACE
   ================================================================ */

/* All MUI Paper cards → dark surface */
.MuiPaper-root {
  background: #0d1225 !important;
  color: #d1d5db !important;
}

/* Elevation variants */
.MuiPaper-elevation1 { box-shadow: 0 2px 12px rgba(0,0,0,0.40) !important; }
.MuiPaper-elevation2 { box-shadow: 0 4px 20px rgba(0,0,0,0.50) !important; }
.MuiPaper-elevation4 {
  background: rgba(10,15,30,0.95) !important;
  border: 1px solid rgba(255,107,0,0.10) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,0,0.06) !important;
  backdrop-filter: blur(12px) !important;
}
.MuiPaper-elevation8 {
  background: rgba(10,15,30,0.96) !important;
  border: 1px solid rgba(255,107,0,0.12) !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(16px) !important;
}

/* ================================================================
   5. GLOBAL TYPOGRAPHY
   ================================================================ */

.MuiTypography-root { color: #d1d5db !important; }
.MuiTypography-h1,
.MuiTypography-h2,
.MuiTypography-h3,
.MuiTypography-h4,
.MuiTypography-h5,
.MuiTypography-h6 { color: #f9fafb !important; font-weight: 700 !important; }
.MuiTypography-subtitle1 { color: #9ca3af !important; font-weight: 500 !important; }
.MuiTypography-subtitle2 { color: #6b7280 !important; font-weight: 600 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; }
.MuiTypography-body1 { color: #d1d5db !important; }
.MuiTypography-body2 { color: #9ca3af !important; font-size: 13px !important; }
.MuiTypography-caption { color: #6b7280 !important; font-size: 11.5px !important; }
.MuiTypography-overline { color: #4b5563 !important; letter-spacing: 1.5px !important; font-size: 10px !important; }

/* ================================================================
   6. GLOBAL FORM INPUTS
   ================================================================ */

.MuiOutlinedInput-root {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  color: #d1d5db !important;
  transition: background 0.18s ease !important;
}
.MuiOutlinedInput-root:hover { background: rgba(255,255,255,0.06) !important; }
.MuiOutlinedInput-root.Mui-focused { background: rgba(255,255,255,0.06) !important; }
.MuiOutlinedInput-notchedOutline {
  border-color: rgba(255,255,255,0.10) !important;
  transition: border-color 0.18s ease !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255,107,0,0.40) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #FF6B00 !important;
  border-width: 1.5px !important;
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10) !important;
}
.MuiInputBase-input { color: #d1d5db !important; font-size: 14px !important; }
.MuiInputBase-input::placeholder { color: #4b5563 !important; opacity: 1 !important; }
.MuiInputLabel-root { color: #6b7280 !important; font-size: 14px !important; }
.MuiInputLabel-root.Mui-focused { color: #FF8C00 !important; }
.MuiInputLabel-root.Mui-disabled { color: #374151 !important; }
.MuiFormHelperText-root { color: #6b7280 !important; font-size: 12px !important; }
.MuiFormHelperText-root.Mui-error { color: #f87171 !important; }
.MuiFormLabel-root { color: #6b7280 !important; }
.MuiFormLabel-root.Mui-focused { color: #FF8C00 !important; }

/* Select */
.MuiSelect-select,
.MuiSelect-nativeInput { color: #d1d5db !important; }
.MuiSelect-icon { color: #6b7280 !important; }

/* FilledInput */
.MuiFilledInput-root {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 10px 10px 0 0 !important;
  color: #d1d5db !important;
}
.MuiFilledInput-root::before { border-bottom-color: rgba(255,255,255,0.10) !important; }
.MuiFilledInput-root::after { border-bottom-color: #FF6B00 !important; }
.MuiFilledInput-root:hover::before { border-bottom-color: rgba(255,107,0,0.40) !important; }

/* ── Checkbox & Radio ─────────────────────────────────────────── */
.MuiCheckbox-root { color: #4b5563 !important; }
.MuiCheckbox-root.Mui-checked { color: #FF6B00 !important; }
.MuiCheckbox-root.Mui-disabled { color: #1f2937 !important; }
.MuiRadio-root { color: #4b5563 !important; }
.MuiRadio-root.Mui-checked { color: #FF6B00 !important; }
.MuiFormControlLabel-label { color: #d1d5db !important; font-size: 14px !important; }
.MuiFormControlLabel-label.Mui-disabled { color: #374151 !important; }

/* ── Switch ───────────────────────────────────────────────────── */
.MuiSwitch-track { background: #1f2937 !important; }
.MuiSwitch-switchBase { color: #6b7280 !important; }
.MuiSwitch-switchBase.Mui-checked { color: #FF6B00 !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background: rgba(255,107,0,0.60) !important; opacity: 1 !important; }

/* ── Slider ───────────────────────────────────────────────────── */
.MuiSlider-root { color: #FF6B00 !important; }
.MuiSlider-track { background: linear-gradient(90deg, #FF6B00, #FF8C00) !important; border: none !important; }
.MuiSlider-rail { background: rgba(255,255,255,0.10) !important; }
.MuiSlider-thumb { background: #FF6B00 !important; box-shadow: 0 0 0 0 rgba(255,107,0,0.16) !important; }
.MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible { box-shadow: 0 0 0 8px rgba(255,107,0,0.16) !important; }

/* ── Progress ─────────────────────────────────────────────────── */
.MuiLinearProgress-root { background: rgba(255,255,255,0.06) !important; border-radius: 10px !important; }
.MuiLinearProgress-bar { background: linear-gradient(90deg, #FF6B00, #FF8C00) !important; border-radius: 10px !important; }
.MuiCircularProgress-root { color: #FF6B00 !important; }

/* ── Skeleton ─────────────────────────────────────────────────── */
.MuiSkeleton-root { background: rgba(255,255,255,0.06) !important; border-radius: 8px !important; }

/* ── Badge ────────────────────────────────────────────────────── */
.MuiBadge-badge { background: #FF6B00 !important; color: #ffffff !important; font-weight: 700 !important; font-size: 11px !important; }

/* ── Alert ────────────────────────────────────────────────────── */
.MuiAlert-root { border-radius: 10px !important; font-size: 13.5px !important; }
.MuiAlert-standardSuccess  { background: rgba(16,185,129,0.12) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.22) !important; }
.MuiAlert-standardError    { background: rgba(239,68,68,0.12) !important;  color: #f87171 !important; border: 1px solid rgba(239,68,68,0.22) !important; }
.MuiAlert-standardWarning  { background: rgba(255,107,0,0.12) !important;  color: #FF8C00 !important; border: 1px solid rgba(255,107,0,0.22) !important; }
.MuiAlert-standardInfo     { background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; border: 1px solid rgba(59,130,246,0.22) !important; }
.MuiAlertTitle-root { font-weight: 700 !important; }

/* ── Snackbar ─────────────────────────────────────────────────── */
.MuiSnackbar-root .MuiPaper-root {
  background: #1a1f2e !important;
  color: #f3f4f6 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,107,0,0.15) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important;
}

/* ================================================================
   7. DASHBOARD — AppBar / Toolbar
   ================================================================ */

.MuiAppBar-root {
  background: linear-gradient(90deg, #080c18 0%, #0d1427 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 4px 24px rgba(0,0,0,0.50) !important;
  backdrop-filter: blur(8px) !important;
}
.MuiToolbar-root { min-height: 56px !important; }
.MuiAppBar-root .MuiTypography-root { color: #f9fafb !important; font-weight: 600 !important; }
.MuiAppBar-root .MuiIconButton-root {
  color: #6b7280 !important;
  border-radius: 8px !important;
  transition: all 0.18s ease !important;
}
.MuiAppBar-root .MuiIconButton-root:hover {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.10) !important;
}
.MuiAppBar-root .MuiOutlinedInput-root {
  background: rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  color: #e5e7eb !important;
}
.MuiAppBar-root .MuiOutlinedInput-notchedOutline { border-color: rgba(255,255,255,0.08) !important; }
.MuiAppBar-root .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255,107,0,0.40) !important; }
.MuiAppBar-root .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #FF6B00 !important; border-width: 1.5px !important; }
.MuiAppBar-root .MuiButton-root { color: #d1d5db !important; text-transform: none !important; font-weight: 500 !important; }
.MuiAppBar-root .MuiButton-root:hover { color: #FF6B00 !important; background: rgba(255,107,0,0.08) !important; }

/* ================================================================
   8. DASHBOARD — Left Drawer
   ================================================================ */

.MuiDrawer-root .MuiBackdrop-root { background: rgba(4,7,15,0.75) !important; backdrop-filter: blur(4px) !important; }

.MuiDrawer-paper {
  background: #08091a !important;
  border-right: 1px solid rgba(255,107,0,0.08) !important;
  box-shadow: 6px 0 40px rgba(0,0,0,0.60) !important;
}

/* Drawer toolbar / search bar */
.MuiDrawer-paper .MuiToolbar-root {
  background: #08091a !important;
  border-bottom: 1px solid rgba(255,107,0,0.10) !important;
  padding: 8px 10px !important;
  gap: 6px;
  min-height: 56px !important;
}

/* Drawer search input */
.MuiDrawer-paper .MuiOutlinedInput-root {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
  color: #d1d5db !important;
}
.MuiDrawer-paper .MuiOutlinedInput-notchedOutline { border-color: rgba(255,255,255,0.08) !important; }
.MuiDrawer-paper .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255,107,0,0.35) !important; }
.MuiDrawer-paper .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #FF6B00 !important; border-width: 1.5px !important; }
.MuiDrawer-paper .MuiInputBase-input::placeholder { color: #4b5563 !important; opacity: 1 !important; }
.MuiDrawer-paper .MuiInputLabel-root { color: #4b5563 !important; }

/* Drawer icon buttons */
.MuiDrawer-paper .MuiIconButton-root {
  color: #4b5563 !important;
  border-radius: 8px !important;
  width: 36px !important; height: 36px !important;
  transition: all 0.18s ease !important;
}
.MuiDrawer-paper .MuiIconButton-root:hover {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.10) !important;
}
.MuiDrawer-paper .MuiIconButton-colorPrimary {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.12) !important;
  border: 1px solid rgba(255,107,0,0.22) !important;
}
.MuiDrawer-paper .MuiIconButton-colorPrimary:hover {
  background: rgba(255,107,0,0.20) !important;
  box-shadow: 0 0 16px rgba(255,107,0,0.25) !important;
}

/* Drawer list items */
.MuiDrawer-paper .MuiListSubheader-root {
  background: transparent !important;
  color: #374151 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
}
.MuiDrawer-paper .MuiListItemButton-root {
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 8px 12px !important;
  transition: background 0.16s ease !important;
  position: relative;
}
.MuiDrawer-paper .MuiListItemButton-root::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: #FF6B00; opacity: 0; transition: opacity 0.16s ease;
}
.MuiDrawer-paper .MuiListItemButton-root:hover { background: rgba(255,107,0,0.07) !important; }
.MuiDrawer-paper .MuiListItemButton-root:hover::before { opacity: 0.7; }
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected { background: rgba(255,107,0,0.12) !important; }
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected::before { opacity: 1; }
.MuiDrawer-paper .MuiListItemIcon-root { color: #4b5563 !important; min-width: 38px !important; transition: color 0.16s ease !important; }
.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemIcon-root { color: #FF8C00 !important; }
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root { color: #FF6B00 !important; }
.MuiDrawer-paper .MuiListItemText-primary { color: #c4c9d4 !important; font-size: 14px !important; font-weight: 400 !important; transition: color 0.16s ease !important; }
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary { color: #f9fafb !important; font-weight: 600 !important; }
.MuiDrawer-paper .MuiListItemText-secondary { color: #374151 !important; font-size: 11.5px !important; }
.MuiDrawer-paper .MuiDivider-root { border-color: rgba(255,255,255,0.05) !important; margin: 5px 0 !important; }
.MuiDrawer-paper .MuiListItemAvatar-root .MuiAvatar-root {
  width: 34px !important; height: 34px !important;
  font-size: 13px !important;
  background: rgba(255,107,0,0.18) !important;
  color: #FF8C00 !important;
  border: 1px solid rgba(255,107,0,0.22) !important;
}
.MuiDrawer-paper .MuiTypography-subtitle1,
.MuiDrawer-paper .MuiTypography-body1,
.MuiDrawer-paper .MuiTypography-body2 { color: #374151 !important; }

/* ================================================================
   9. BOTTOM NAVIGATION (Mapa, Reportes, Ajustes, Cuenta)
   ================================================================ */

.MuiBottomNavigation-root {
  background: #070c18 !important;
  border-top: 1px solid rgba(255,107,0,0.12) !important;
  height: 62px !important;
  padding: 0 4px !important;
}
.MuiBottomNavigationAction-root {
  color: #374151 !important;
  border-radius: 10px !important;
  margin: 4px 2px !important;
  min-width: 0 !important;
  padding: 6px 8px !important;
  transition: all 0.20s ease !important;
  position: relative;
}
.MuiBottomNavigationAction-root:hover {
  color: #FF8C00 !important;
  background: rgba(255,107,0,0.08) !important;
}
.MuiBottomNavigationAction-root.Mui-selected::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #FF6B00, #FF8C00);
}
.MuiBottomNavigationAction-root.Mui-selected {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.08) !important;
}
.MuiBottomNavigationAction-root .MuiBottomNavigationAction-label { font-size: 10.5px !important; font-weight: 500 !important; margin-top: 2px !important; }
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label { font-size: 10.5px !important; font-weight: 700 !important; color: #FF6B00 !important; }

/* ================================================================
   10. DIALOGS / MODALS
   ================================================================ */

.MuiBackdrop-root { background: rgba(4,7,15,0.78) !important; backdrop-filter: blur(4px) !important; }

.MuiDialog-paper {
  background: #0d1225 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 1px rgba(255,107,0,0.07), 0 30px 70px rgba(0,0,0,0.70) !important;
}
.MuiDialogTitle-root {
  color: #f9fafb !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 20px 24px 16px !important;
}
.MuiDialogContent-root { color: #9ca3af !important; padding: 20px 24px !important; }
.MuiDialogActions-root { border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 14px 20px !important; gap: 8px; }

/* Dialog inputs */
.MuiDialog-paper .MuiOutlinedInput-root {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 10px !important;
  color: #e5e7eb !important;
}
.MuiDialog-paper .MuiOutlinedInput-notchedOutline { border-color: rgba(255,255,255,0.10) !important; }
.MuiDialog-paper .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(255,107,0,0.40) !important; }
.MuiDialog-paper .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #FF6B00 !important; }
.MuiDialog-paper .MuiInputLabel-root { color: #6b7280 !important; }
.MuiDialog-paper .MuiInputLabel-root.Mui-focused { color: #FF8C00 !important; }
.MuiDialog-paper .MuiTypography-root { color: #d1d5db !important; }
.MuiDialog-paper .MuiTypography-h5,
.MuiDialog-paper .MuiTypography-h6 { color: #f9fafb !important; }

/* ================================================================
   11. MENUS / DROPDOWNS / POPOVERS
   ================================================================ */

.MuiMenu-paper,
.MuiPopover-paper,
.MuiAutocomplete-paper {
  background: #0d1225 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.65) !important;
}
.MuiMenuItem-root {
  color: #d1d5db !important;
  font-size: 14px !important;
  border-radius: 7px !important;
  margin: 2px 5px !important;
  padding: 8px 12px !important;
  transition: background 0.14s ease !important;
}
.MuiMenuItem-root:hover { background: rgba(255,107,0,0.10) !important; color: #f9fafb !important; }
.MuiMenuItem-root.Mui-selected { background: rgba(255,107,0,0.14) !important; color: #FF8C00 !important; }
.MuiMenuItem-root.Mui-selected:hover { background: rgba(255,107,0,0.22) !important; }
.MuiListItem-root { color: #d1d5db !important; }
.MuiAutocomplete-option { color: #d1d5db !important; }
.MuiAutocomplete-option:hover, .MuiAutocomplete-option.Mui-focused { background: rgba(255,107,0,0.10) !important; }
.MuiAutocomplete-noOptions { color: #6b7280 !important; font-size: 13.5px !important; }

/* ================================================================
   12. TABS
   ================================================================ */

.MuiTabs-root { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.MuiTab-root { color: #6b7280 !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; min-width: auto !important; padding: 10px 16px !important; }
.MuiTab-root.Mui-selected { color: #FF6B00 !important; font-weight: 600 !important; }
.MuiTabs-indicator { background: linear-gradient(90deg, #FF6B00, #FF8C00) !important; height: 2px !important; border-radius: 2px !important; }

/* ================================================================
   13. TABLES (Reports page)
   ================================================================ */

.MuiTableContainer-root { background: transparent !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.06) !important; overflow: hidden !important; }
.MuiTable-root { border-collapse: collapse !important; }

.MuiTableHead-root .MuiTableRow-root { background: #0d1225 !important; }
.MuiTableHead-root .MuiTableCell-root {
  background: #0d1225 !important;
  color: #4b5563 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 12px 16px !important;
}
.MuiTableBody-root .MuiTableRow-root { transition: background 0.14s ease !important; }
.MuiTableBody-root .MuiTableRow-root:hover { background: rgba(255,107,0,0.05) !important; }
.MuiTableBody-root .MuiTableCell-root {
  color: #c4c9d4 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 13.5px !important;
  padding: 11px 16px !important;
}

.MuiTablePagination-root {
  color: #6b7280 !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  font-size: 13px !important;
}
.MuiTablePagination-select { color: #d1d5db !important; }
.MuiTablePagination-actions .MuiIconButton-root { color: #6b7280 !important; }
.MuiTablePagination-actions .MuiIconButton-root:hover { color: #FF6B00 !important; background: rgba(255,107,0,0.10) !important; }
.MuiTablePagination-actions .MuiIconButton-root.Mui-disabled { color: #1f2937 !important; }

/* ── TableSortLabel ───────────────────────────────────────────── */
.MuiTableSortLabel-root { color: #4b5563 !important; }
.MuiTableSortLabel-root:hover { color: #9ca3af !important; }
.MuiTableSortLabel-root.Mui-active { color: #FF8C00 !important; }
.MuiTableSortLabel-icon { color: #FF6B00 !important; }

/* ================================================================
   14. ACCORDION (Settings sections)
   ================================================================ */

.MuiAccordion-root {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}
.MuiAccordion-root::before { display: none !important; }
.MuiAccordionSummary-root { color: #d1d5db !important; min-height: 52px !important; padding: 0 20px !important; }
.MuiAccordionSummary-root.Mui-expanded { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.MuiAccordionSummary-root .MuiTypography-root { color: #e5e7eb !important; font-weight: 600 !important; font-size: 14px !important; }
.MuiAccordionSummary-expandIconWrapper { color: #6b7280 !important; }
.MuiAccordionSummary-expandIconWrapper.Mui-expanded { color: #FF6B00 !important; }
.MuiAccordionDetails-root { color: #9ca3af !important; font-size: 13.5px !important; padding: 16px 20px 20px !important; background: rgba(255,255,255,0.01) !important; }

/* ================================================================
   15. BUTTONS (global dashboard)
   ================================================================ */

.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%) !important;
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  box-shadow: 0 3px 12px rgba(255,107,0,0.30) !important;
  color: #ffffff !important;
  border: none !important;
  transition: all 0.22s ease !important;
}
.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #FF4500 0%, #E03800 100%) !important;
  box-shadow: 0 5px 18px rgba(255,107,0,0.50) !important;
  transform: translateY(-1px) !important;
}

.MuiButton-containedSecondary {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  color: #d1d5db !important;
  border: none !important;
  box-shadow: none !important;
}
.MuiButton-containedSecondary:hover { background: rgba(255,255,255,0.12) !important; }

.MuiButton-contained {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 600 !important;
}

.MuiButton-outlined {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #9ca3af !important;
  transition: all 0.18s ease !important;
}
.MuiButton-outlined:hover {
  border-color: rgba(255,107,0,0.50) !important;
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.06) !important;
}
.MuiButton-outlinedPrimary {
  border-color: rgba(255,107,0,0.40) !important;
  color: #FF6B00 !important;
}
.MuiButton-outlinedPrimary:hover {
  border-color: #FF6B00 !important;
  background: rgba(255,107,0,0.10) !important;
}
.MuiButton-text { color: #9ca3af !important; text-transform: none !important; font-weight: 500 !important; border-radius: 8px !important; }
.MuiButton-text:hover { color: #FF6B00 !important; background: rgba(255,107,0,0.08) !important; }
.MuiButton-textPrimary { color: #FF6B00 !important; }
.MuiButton-root.Mui-disabled { color: rgba(255,255,255,0.25) !important; background: rgba(255,255,255,0.06) !important; border-color: transparent !important; box-shadow: none !important; }

/* ── FAB ──────────────────────────────────────────────────────── */
.MuiFab-root {
  background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%) !important;
  box-shadow: 0 4px 18px rgba(255,107,0,0.45) !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}
.MuiFab-root:hover {
  background: linear-gradient(135deg, #FF4500 0%, #E03800 100%) !important;
  box-shadow: 0 6px 24px rgba(255,107,0,0.60) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

/* ── IconButton (global) ──────────────────────────────────────── */
.MuiIconButton-root {
  color: #6b7280 !important;
  border-radius: 8px !important;
  transition: all 0.18s ease !important;
}
.MuiIconButton-root:hover { color: #FF8C00 !important; background: rgba(255,107,0,0.10) !important; }
.MuiIconButton-colorPrimary { color: #FF6B00 !important; }
.MuiIconButton-colorPrimary:hover { color: #FF8C00 !important; background: rgba(255,107,0,0.12) !important; }
.MuiIconButton-root.Mui-disabled { color: rgba(255,255,255,0.18) !important; }

/* ================================================================
   16. CHIPS
   ================================================================ */

.MuiChip-root { border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; height: 22px !important; background: rgba(255,255,255,0.07) !important; color: #9ca3af !important; }
.MuiChip-root .MuiChip-deleteIcon { color: #6b7280 !important; }
.MuiChip-root .MuiChip-deleteIcon:hover { color: #FF6B00 !important; }
.MuiChip-colorPrimary { background: rgba(255,107,0,0.14) !important; color: #FF8C00 !important; border: 1px solid rgba(255,107,0,0.22) !important; }
.MuiChip-colorSuccess { background: rgba(16,185,129,0.14) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.22) !important; }
.MuiChip-colorError   { background: rgba(239,68,68,0.12)  !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.22) !important; }
.MuiChip-colorWarning { background: rgba(255,107,0,0.12)  !important; color: #FF8C00 !important; border: 1px solid rgba(255,107,0,0.22) !important; }
.MuiChip-colorInfo    { background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; border: 1px solid rgba(59,130,246,0.22) !important; }
.MuiChip-outlined { background: transparent !important; border-color: rgba(255,255,255,0.12) !important; }

/* ================================================================
   17. TOOLTIPS
   ================================================================ */

.MuiTooltip-tooltip {
  background: #1a1f2e !important;
  color: #e5e7eb !important;
  font-size: 12px !important;
  border-radius: 7px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45) !important;
}
.MuiTooltip-arrow { color: #1a1f2e !important; }

/* ================================================================
   18. SPEED DIAL & MAP OVERLAYS
   ================================================================ */

.MuiSpeedDial-root .MuiSpeedDialIcon-root {
  background: linear-gradient(135deg, #FF6B00, #FF4500) !important;
}
.MuiSpeedDialAction-fab {
  background: #0d1225 !important;
  color: #d1d5db !important;
  border: 1px solid rgba(255,107,0,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
}
.MuiSpeedDialAction-fab:hover { background: rgba(255,107,0,0.12) !important; color: #FF6B00 !important; }

/* ================================================================
   19. MAPLIBRE GL CONTROLS
   ================================================================ */

.maplibregl-ctrl-group {
  background: rgba(8,12,24,0.95) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,107,0,0.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,107,0,0.06) !important;
  overflow: hidden !important;
  backdrop-filter: blur(16px) !important;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  width: 36px !important; height: 36px !important;
  transition: background 0.18s ease !important;
}
.maplibregl-ctrl-group button:last-child { border-bottom: none !important; }
.maplibregl-ctrl-group button:hover { background: rgba(255,107,0,0.12) !important; }
.maplibregl-ctrl-icon { filter: invert(1) brightness(0.5) !important; }
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon { filter: invert(1) sepia(1) saturate(5) hue-rotate(340deg) brightness(1.1) !important; }
.maplibregl-ctrl-attrib { background: rgba(7,12,24,0.80) !important; border-radius: 8px 0 0 0 !important; color: #374151 !important; font-size: 10px !important; padding: 2px 8px !important; }
.maplibregl-ctrl-attrib a { color: #4b5563 !important; }
.maplibregl-ctrl-logo { opacity: 0.25 !important; }

/* ================================================================
   20. DIVIDERS
   ================================================================ */

.MuiDivider-root { border-color: rgba(255,255,255,0.06) !important; }

/* ================================================================
   21. STEPPER
   ================================================================ */

.MuiStepIcon-root { color: #1a1f2e !important; }
.MuiStepIcon-root.Mui-active { color: #FF6B00 !important; }
.MuiStepIcon-root.Mui-completed { color: #FF4500 !important; }
.MuiStepLabel-label { color: #6b7280 !important; font-size: 13.5px !important; }
.MuiStepLabel-label.Mui-active { color: #f9fafb !important; font-weight: 600 !important; }
.MuiStepLabel-label.Mui-completed { color: #d1d5db !important; }
.MuiStepConnector-line { border-color: rgba(255,255,255,0.08) !important; }

/* ================================================================
   22. SETTINGS & ACCOUNT PAGES — List items
   ================================================================ */

.MuiList-root { padding: 4px 0 !important; }
.MuiListItem-root { color: #d1d5db !important; }
.MuiListItemText-primary { color: #d1d5db !important; font-size: 14px !important; }
.MuiListItemText-secondary { color: #6b7280 !important; font-size: 12.5px !important; }
.MuiListItemIcon-root { color: #6b7280 !important; min-width: 42px !important; }
.MuiListItemButton-root { border-radius: 8px !important; transition: background 0.15s ease !important; }
.MuiListItemButton-root:hover { background: rgba(255,107,0,0.07) !important; }
.MuiListItemButton-root.Mui-selected { background: rgba(255,107,0,0.12) !important; }
.MuiListItemButton-root.Mui-selected .MuiListItemText-primary { color: #f9fafb !important; font-weight: 600 !important; }
.MuiListItemButton-root.Mui-selected .MuiListItemIcon-root { color: #FF6B00 !important; }
.MuiListSubheader-root { background: transparent !important; color: #374151 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1.4px !important; text-transform: uppercase !important; line-height: 2.5 !important; }

/* ================================================================
   23. BREADCRUMBS / NAV
   ================================================================ */

.MuiBreadcrumbs-root { color: #6b7280 !important; }
.MuiBreadcrumbs-separator { color: #374151 !important; }
.MuiBreadcrumbs-ol .MuiTypography-root { color: #6b7280 !important; font-size: 13px !important; }
.MuiBreadcrumbs-ol .MuiTypography-root:last-child { color: #d1d5db !important; font-weight: 500 !important; }

/* ================================================================
   24. AVATAR
   ================================================================ */

.MuiAvatar-root {
  background: rgba(255,107,0,0.18) !important;
  color: #FF8C00 !important;
  border: 1.5px solid rgba(255,107,0,0.22) !important;
  font-weight: 700 !important;
}
.MuiAvatar-colorDefault { background: #1a1f2e !important; color: #6b7280 !important; border-color: rgba(255,255,255,0.08) !important; }

/* ================================================================
   25. DATE / TIME PICKERS
   ================================================================ */

.MuiPickersPopper-paper,
.MuiDateCalendar-root,
.MuiTimeClock-root { background: #0d1225 !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 14px !important; }
.MuiPickersDay-root { color: #d1d5db !important; border-radius: 8px !important; }
.MuiPickersDay-root:hover { background: rgba(255,107,0,0.10) !important; color: #FF8C00 !important; }
.MuiPickersDay-root.Mui-selected { background: #FF6B00 !important; color: #ffffff !important; font-weight: 700 !important; }
.MuiPickersDay-today { border: 1px solid rgba(255,107,0,0.40) !important; }
.MuiDayCalendar-weekDayLabel { color: #4b5563 !important; font-size: 11px !important; font-weight: 700 !important; }
.MuiPickersCalendarHeader-label { color: #f9fafb !important; font-weight: 600 !important; }
.MuiPickersArrowSwitcher-root .MuiIconButton-root { color: #6b7280 !important; }
.MuiPickersArrowSwitcher-root .MuiIconButton-root:hover { color: #FF6B00 !important; }
.MuiClockPointer-root, .MuiClockPointer-thumb { background: #FF6B00 !important; border-color: #FF6B00 !important; }
.MuiClock-pin { background: #FF6B00 !important; }
.MuiClockNumber-root { color: #9ca3af !important; }
.MuiClockNumber-root.Mui-selected { color: #ffffff !important; }

/* ================================================================
   26. PAGINATION
   ================================================================ */

.MuiPagination-root .MuiPaginationItem-root { color: #6b7280 !important; border-radius: 8px !important; border-color: rgba(255,255,255,0.08) !important; }
.MuiPagination-root .MuiPaginationItem-root:hover { background: rgba(255,107,0,0.10) !important; color: #FF8C00 !important; border-color: rgba(255,107,0,0.25) !important; }
.MuiPagination-root .MuiPaginationItem-root.Mui-selected { background: rgba(255,107,0,0.15) !important; color: #FF6B00 !important; border-color: rgba(255,107,0,0.35) !important; font-weight: 700 !important; }

/* ================================================================
   27. DEVICE STATUS COLORS
   ================================================================ */

.MuiChip-root[class*="colorSuccess"] { background: rgba(16,185,129,0.14) !important; color: #34d399 !important; border: 1px solid rgba(16,185,129,0.22) !important; }
.MuiChip-root[class*="colorError"]   { background: rgba(239,68,68,0.12)  !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.22) !important; }
.MuiChip-root[class*="colorWarning"] { background: rgba(255,107,0,0.12)  !important; color: #FF8C00 !important; border: 1px solid rgba(255,107,0,0.22) !important; }

/* ================================================================
   28. DASHBOARD — AppBar Brand Header (injected by gps-anim.js)
   ================================================================ */

.trackec-appbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 16px !important;
  border-right: 1px solid rgba(255,107,0,0.15) !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.trackec-appbar-logo {
  height: 30px !important;
  width: auto !important;
  filter: drop-shadow(0 0 10px rgba(255,107,0,0.55)) !important;
  display: block !important;
}

.trackec-appbar-info {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
}

.trackec-appbar-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #f9fafb !important;
  letter-spacing: -0.3px !important;
  font-family: 'Inter', sans-serif !important;
}

.trackec-appbar-name span {
  color: #FF6B00 !important;
}

.trackec-appbar-sub {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
  font-family: 'Inter', sans-serif !important;
}

/* ================================================================
   29. DASHBOARD — Drawer Brand Header (injected by gps-anim.js)
   ================================================================ */

.trackec-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 14px 14px !important;
  background: linear-gradient(135deg, rgba(255,107,0,0.06) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,0.14) !important;
  flex-shrink: 0 !important;
}

.trackec-drawer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.trackec-drawer-logo {
  height: 38px !important;
  width: auto !important;
  filter: drop-shadow(0 0 12px rgba(255,107,0,0.50)) !important;
  display: block !important;
}

.trackec-drawer-brand-text {
  display: flex !important;
  flex-direction: column !important;
  line-height: 1 !important;
}

.trackec-drawer-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #f9fafb !important;
  letter-spacing: -0.4px !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
}

.trackec-drawer-name em {
  color: #FF6B00 !important;
  font-style: normal !important;
}

.trackec-drawer-tag {
  font-size: 8.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
  font-family: 'Inter', sans-serif !important;
}

.trackec-drawer-status {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(16,185,129,0.10) !important;
  border: 1px solid rgba(16,185,129,0.22) !important;
  border-radius: 20px !important;
  padding: 3px 8px 3px 6px !important;
}

.trackec-status-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  display: inline-block !important;
  box-shadow: 0 0 6px rgba(16,185,129,0.60) !important;
  animation: tcPulse 2s ease-in-out infinite !important;
}

.trackec-drawer-status span:last-child {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #10b981 !important;
  font-family: 'Inter', sans-serif !important;
}

@keyframes tcPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16,185,129,0.60); }
  50%       { opacity: 0.6; box-shadow: 0 0 12px rgba(16,185,129,0.90); }
}

/* ================================================================
   30. STATUS CARD — Popup del dispositivo
   ================================================================ */

/* Card container */
.MuiCard-root,
.MuiPaper-elevation4 {
  border-radius: 16px !important;
}

/* Título del popup (nombre del dispositivo) */
.MuiCardHeader-root {
  background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,0.12) !important;
  padding: 14px 16px !important;
}
.MuiCardHeader-title {
  color: #f9fafb !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.MuiCardHeader-action .MuiIconButton-root { color: #6b7280 !important; }
.MuiCardHeader-action .MuiIconButton-root:hover { color: #FF6B00 !important; }

/* Tabla interna del popup */
.MuiCardContent-root { padding: 8px 0 4px !important; }
.MuiCardContent-root table { width: 100% !important; border-collapse: collapse !important; }
.MuiCardContent-root table tr { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
.MuiCardContent-root table tr:last-child { border-bottom: none !important; }
.MuiCardContent-root table td {
  padding: 9px 16px !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  color: #9ca3af !important;
}
.MuiCardContent-root table td:first-child {
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  white-space: nowrap !important;
  width: 40% !important;
}
.MuiCardContent-root table td:last-child {
  color: #e5e7eb !important;
  font-weight: 400 !important;
  text-align: right !important;
}

/* Link "Más detalles" */
.MuiCardContent-root a,
.MuiCardContent-root .MuiLink-root {
  color: #FF6B00 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  padding: 6px 16px !important;
  display: inline-block !important;
}
.MuiCardContent-root a:hover,
.MuiCardContent-root .MuiLink-root:hover {
  color: #FF8C00 !important;
  text-decoration: underline !important;
}

/* Botones de acción (···, ruta, comando, editar, eliminar) */
.MuiCardActions-root {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 8px 10px !important;
  gap: 4px !important;
  justify-content: space-around !important;
}
.MuiCardActions-root .MuiIconButton-root {
  color: #6b7280 !important;
  border-radius: 10px !important;
  width: 40px !important; height: 40px !important;
  transition: all 0.18s ease !important;
}
.MuiCardActions-root .MuiIconButton-root:hover {
  background: rgba(255,107,0,0.10) !important;
  color: #FF6B00 !important;
}
/* Botón eliminar en rojo */
.MuiCardActions-root .MuiIconButton-root:last-child:hover {
  background: rgba(239,68,68,0.10) !important;
  color: #f87171 !important;
}

/* ================================================================
   31. MODERN UPGRADE v2 — Glassmorphism · Glow · Pill Nav
   ================================================================ */

/* ── Font rendering ───────────────────────────────────────────── */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── Animated gradient keyframes ──────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255,107,0,0.30), 0 0 40px rgba(255,107,0,0.08); }
  50%       { box-shadow: 0 0 24px rgba(255,107,0,0.55), 0 0 60px rgba(255,107,0,0.18); }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ================================================================
   32. DEVICE POPUP CARD — Full glassmorphism upgrade
   ================================================================ */

/* Wrapper glassmorphism */
.MuiCard-root,
.MuiPaper-elevation4 {
  background: rgba(8,12,28,0.92) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.07),
    0 20px 60px rgba(0,0,0,0.70),
    0 0 80px rgba(255,107,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.07) !important;
  animation: fadeSlideUp 0.25s ease !important;
  overflow: hidden !important;
}

/* Animated top gradient bar on popup */
.MuiCard-root::before,
.MuiPaper-elevation4::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2.5px !important;
  background: linear-gradient(90deg, #FF4500, #FF6B00, #FF8C00, #FFB347, #FF6B00, #FF4500) !important;
  background-size: 300% 100% !important;
  animation: gradientShift 4s linear infinite !important;
  z-index: 10 !important;
  border-radius: 20px 20px 0 0 !important;
}

/* Card header — gradient background */
.MuiCardHeader-root {
  background: linear-gradient(135deg, rgba(255,107,0,0.12) 0%, rgba(255,69,0,0.06) 50%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,0.14) !important;
  padding: 14px 16px 12px !important;
  position: relative !important;
}

/* Device name — glowing text */
.MuiCardHeader-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  background: linear-gradient(90deg, #ffffff 0%, #f9fafb 50%, #FF8C00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 8px rgba(255,107,0,0.35)) !important;
}

/* Data rows — improved */
.MuiCardContent-root { padding: 4px 0 6px !important; }
.MuiCardContent-root table { width: 100% !important; border-collapse: collapse !important; }
.MuiCardContent-root table tr {
  border-bottom: 1px solid rgba(255,255,255,0.035) !important;
  transition: background 0.15s ease !important;
}
.MuiCardContent-root table tr:hover { background: rgba(255,107,0,0.04) !important; }
.MuiCardContent-root table tr:last-child { border-bottom: none !important; }

.MuiCardContent-root table td {
  padding: 8px 16px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

/* Label column */
.MuiCardContent-root table td:first-child {
  color: #4b5563 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  width: 42% !important;
}

/* Value column */
.MuiCardContent-root table td:last-child {
  color: #e5e7eb !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  text-align: right !important;
}

/* "Más detalles" link */
.MuiCardContent-root a,
.MuiCardContent-root .MuiLink-root {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #FF8C00 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  padding: 5px 16px 8px !important;
  letter-spacing: 0.2px !important;
  transition: all 0.18s ease !important;
}
.MuiCardContent-root a:hover,
.MuiCardContent-root .MuiLink-root:hover {
  color: #FFB347 !important;
  filter: drop-shadow(0 0 6px rgba(255,140,0,0.45)) !important;
  text-decoration: none !important;
}

/* Action buttons bar */
.MuiCardActions-root {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,107,0,0.03) 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 10px 12px !important;
  gap: 2px !important;
  justify-content: space-around !important;
}

.MuiCardActions-root .MuiIconButton-root {
  color: #4b5563 !important;
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: all 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiCardActions-root .MuiIconButton-root:hover {
  background: rgba(255,107,0,0.12) !important;
  color: #FF6B00 !important;
  border-color: rgba(255,107,0,0.25) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255,107,0,0.25) !important;
}
.MuiCardActions-root .MuiIconButton-root:last-child:hover {
  background: rgba(239,68,68,0.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,0.25) !important;
  box-shadow: 0 6px 16px rgba(239,68,68,0.20) !important;
}

/* ================================================================
   33. BOTTOM NAVIGATION — Floating pill active indicator
   ================================================================ */

.MuiBottomNavigation-root {
  background: rgba(7,12,24,0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,107,0,0.10) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45) !important;
  height: 66px !important;
  padding: 6px 8px !important;
  gap: 4px !important;
}

.MuiBottomNavigationAction-root {
  color: #374151 !important;
  border-radius: 14px !important;
  margin: 0 !important;
  min-width: 0 !important;
  flex: 1 !important;
  padding: 6px 4px !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
}

/* Remove old top bar indicator */
.MuiBottomNavigationAction-root::before { display: none !important; }

.MuiBottomNavigationAction-root:hover {
  color: #9ca3af !important;
  background: rgba(255,255,255,0.05) !important;
}

/* Selected: floating pill glow */
.MuiBottomNavigationAction-root.Mui-selected {
  color: #FF6B00 !important;
  background: rgba(255,107,0,0.12) !important;
  box-shadow: 0 0 20px rgba(255,107,0,0.18) !important;
  transform: translateY(-1px) !important;
}
.MuiBottomNavigationAction-root.Mui-selected::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 20% !important; right: 20% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #FF6B00, transparent) !important;
  border-radius: 2px !important;
}

.MuiBottomNavigationAction-root .MuiBottomNavigationAction-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  margin-top: 3px !important;
  transition: all 0.20s ease !important;
}
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #FF6B00 !important;
}

/* ================================================================
   34. DRAWER DEVICE LIST — Card-style items with status dots
   ================================================================ */

/* Individual list item cards */
.MuiDrawer-paper .MuiListItemButton-root {
  border-radius: 12px !important;
  margin: 2px 10px !important;
  padding: 10px 12px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid transparent !important;
  transition: all 0.18s ease !important;
}
.MuiDrawer-paper .MuiListItemButton-root:hover {
  background: rgba(255,107,0,0.07) !important;
  border-color: rgba(255,107,0,0.12) !important;
  transform: translateX(2px) !important;
}
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected {
  background: rgba(255,107,0,0.10) !important;
  border-color: rgba(255,107,0,0.22) !important;
  box-shadow: 0 2px 12px rgba(255,107,0,0.10), inset 0 0 0 1px rgba(255,107,0,0.08) !important;
}

/* Remove old left bar pseudo */
.MuiDrawer-paper .MuiListItemButton-root::before { display: none !important; }

/* Device avatar dot — colored status */
.MuiDrawer-paper .MuiListItemAvatar-root .MuiAvatar-root {
  width: 36px !important;
  height: 36px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(255,107,0,0.25) 0%, rgba(255,69,0,0.15) 100%) !important;
  color: #FF8C00 !important;
  border: 1.5px solid rgba(255,107,0,0.28) !important;
  box-shadow: 0 0 10px rgba(255,107,0,0.15) !important;
}

/* Text hierarchy */
.MuiDrawer-paper .MuiListItemText-primary {
  color: #d1d5db !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
}
.MuiDrawer-paper .MuiListItemButton-root.Mui-selected .MuiListItemText-primary {
  color: #f9fafb !important;
  font-weight: 700 !important;
}
.MuiDrawer-paper .MuiListItemText-secondary {
  color: #374151 !important;
  font-size: 11px !important;
  margin-top: 2px !important;
}

/* Battery chip in list (MuiBadge) */
.MuiDrawer-paper .MuiBadge-badge {
  background: linear-gradient(135deg, #FF6B00, #FF4500) !important;
  box-shadow: 0 2px 8px rgba(255,107,0,0.40) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(7,12,24,0.8) !important;
}

/* ================================================================
   35. APPBAR — Enhanced brand + glass
   ================================================================ */

.MuiAppBar-root {
  background: linear-gradient(90deg, rgba(5,8,20,0.98) 0%, rgba(10,15,35,0.98) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,107,0,0.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 4px 32px rgba(0,0,0,0.60) !important;
}

/* Appbar logo glow animation */
.trackec-appbar-logo {
  animation: pulseGlow 3s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/* Appbar brand name enhanced */
.trackec-appbar-name {
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(90deg, #f9fafb 0%, #e5e7eb 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.trackec-appbar-name span {
  background: linear-gradient(90deg, #FF6B00, #FF8C00) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ================================================================
   36. DRAWER HEADER — Elevated brand block
   ================================================================ */

.trackec-drawer-header {
  background: linear-gradient(135deg, rgba(255,107,0,0.09) 0%, rgba(255,69,0,0.04) 60%, transparent 100%) !important;
  border-bottom: 1px solid rgba(255,107,0,0.15) !important;
  padding: 20px 16px 16px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle background shimmer */
.trackec-drawer-header::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,107,0,0.04) 50%,
    transparent 60%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 5s linear infinite !important;
  pointer-events: none !important;
}

.trackec-drawer-logo {
  height: 40px !important;
  filter: drop-shadow(0 0 16px rgba(255,107,0,0.60)) !important;
}

.trackec-drawer-name {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(90deg, #f9fafb, #e5e7eb) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.trackec-drawer-name em {
  background: linear-gradient(90deg, #FF6B00, #FF8C00) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
}

.trackec-drawer-tag {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  letter-spacing: 2.5px !important;
}

/* Status pill */
.trackec-drawer-status {
  background: rgba(16,185,129,0.10) !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  border-radius: 20px !important;
  padding: 4px 10px 4px 7px !important;
  box-shadow: 0 0 12px rgba(16,185,129,0.10) !important;
}

/* ================================================================
   37. MAP CONTROLS — refined glass pill
   ================================================================ */

.maplibregl-ctrl-group {
  background: rgba(6,10,22,0.93) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.60),
    0 0 0 1px rgba(255,107,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  overflow: hidden !important;
}
.maplibregl-ctrl-group button {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  width: 38px !important;
  height: 38px !important;
  transition: all 0.18s ease !important;
}
.maplibregl-ctrl-group button:last-child { border-bottom: none !important; }
.maplibregl-ctrl-group button:hover {
  background: rgba(255,107,0,0.14) !important;
}
.maplibregl-ctrl-icon {
  filter: invert(1) brightness(0.45) !important;
  transition: filter 0.18s ease !important;
}
.maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
  filter: invert(0.65) sepia(1) saturate(8) hue-rotate(340deg) brightness(1.1) !important;
}

/* ================================================================
   38. GLOBAL INPUTS — modern pill radius + glow focus
   ================================================================ */

.MuiOutlinedInput-root {
  border-radius: 12px !important;
  transition: all 0.20s ease !important;
}
.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12) !important;
}

/* Drawer search input */
.MuiDrawer-paper .MuiOutlinedInput-root {
  border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
}
.MuiDrawer-paper .MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12) !important;
}

/* ================================================================
   39. DIALOGS — enhanced glass
   ================================================================ */

.MuiDialog-paper {
  background: rgba(8,13,28,0.95) !important;
  backdrop-filter: blur(32px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.5) !important;
  border: 1px solid rgba(255,107,0,0.16) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.06),
    0 40px 80px rgba(0,0,0,0.75),
    0 0 100px rgba(255,107,0,0.05) !important;
  animation: fadeSlideUp 0.22s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Dialog animated top bar */
.MuiDialog-paper::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #FF4500, #FF6B00, #FF8C00, #FFB347, #FF6B00, #FF4500) !important;
  background-size: 300% 100% !important;
  animation: gradientShift 4s linear infinite !important;
  z-index: 10 !important;
}

.MuiDialogTitle-root {
  padding: 22px 24px 16px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

/* ================================================================
   40. MENUS — enhanced glass
   ================================================================ */

.MuiMenu-paper,
.MuiPopover-paper,
.MuiAutocomplete-paper {
  background: rgba(8,13,28,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,107,0,0.14) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.06),
    0 20px 60px rgba(0,0,0,0.70) !important;
  animation: fadeSlideUp 0.18s ease !important;
}

.MuiMenuItem-root {
  border-radius: 9px !important;
  margin: 2px 6px !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  transition: all 0.15s ease !important;
}
.MuiMenuItem-root:hover {
  background: rgba(255,107,0,0.10) !important;
  color: #f9fafb !important;
  padding-left: 16px !important;
}

/* ================================================================
   41. BUTTONS — spring animation + refined
   ================================================================ */

.MuiButton-containedPrimary {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #FF6B00 0%, #FF4500 100%) !important;
  box-shadow: 0 4px 18px rgba(255,107,0,0.40) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #FF5500 0%, #E03800 100%) !important;
  box-shadow: 0 6px 28px rgba(255,107,0,0.55) !important;
  transform: translateY(-2px) scale(1.01) !important;
}
.MuiButton-containedPrimary:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 2px 10px rgba(255,107,0,0.35) !important;
}

.MuiFab-root {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiFab-root:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

/* ================================================================
   42. SPEED DIAL — glass actions
   ================================================================ */

.MuiSpeedDialAction-fab {
  background: rgba(10,15,30,0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,107,0,0.18) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55) !important;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiSpeedDialAction-fab:hover {
  background: rgba(255,107,0,0.15) !important;
  color: #FF6B00 !important;
  transform: scale(1.08) !important;
  box-shadow: 0 8px 28px rgba(255,107,0,0.30) !important;
}

/* ================================================================
   43. CHIPS — pill refined
   ================================================================ */

.MuiChip-root {
  border-radius: 8px !important;
  font-size: 11.5px !important;
  height: 24px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}
.MuiChip-colorPrimary {
  background: rgba(255,107,0,0.14) !important;
  color: #FF8C00 !important;
  border: 1px solid rgba(255,107,0,0.25) !important;
  box-shadow: 0 2px 8px rgba(255,107,0,0.12) !important;
}

/* ================================================================
   44. TOOLTIPS — glass refined
   ================================================================ */

.MuiTooltip-tooltip {
  background: rgba(15,20,40,0.96) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 9px !important;
  font-size: 12.5px !important;
  padding: 7px 12px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55) !important;
}

/* ================================================================
   45. SCROLLBARS — refined
   ================================================================ */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,107,0,0.40); }

/* ================================================================
   46. DRAWER search toolbar — glass capsule
   ================================================================ */

.MuiDrawer-paper .MuiToolbar-root {
  background: rgba(5,8,20,0.90) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,107,0,0.08) !important;
  padding: 10px 10px !important;
  gap: 8px !important;
  min-height: 58px !important;
}

/* Add device button — orange glow */
.MuiDrawer-paper .MuiIconButton-colorPrimary {
  background: rgba(255,107,0,0.13) !important;
  border: 1px solid rgba(255,107,0,0.25) !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  box-shadow: 0 2px 12px rgba(255,107,0,0.18) !important;
  transition: all 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiDrawer-paper .MuiIconButton-colorPrimary:hover {
  background: rgba(255,107,0,0.22) !important;
  border-color: rgba(255,107,0,0.40) !important;
  box-shadow: 0 4px 20px rgba(255,107,0,0.35) !important;
  transform: scale(1.08) !important;
}

/* ================================================================
   47. TABS — enhanced indicator
   ================================================================ */

.MuiTabs-indicator {
  background: linear-gradient(90deg, #FF4500, #FF8C00) !important;
  height: 2.5px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 8px rgba(255,107,0,0.50) !important;
}
.MuiTab-root.Mui-selected {
  color: #FF6B00 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 16px rgba(255,107,0,0.25) !important;
}

/* ================================================================
   48. ACCORDION — refined
   ================================================================ */

.MuiAccordion-root {
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: all 0.20s ease !important;
}
.MuiAccordion-root:hover {
  border-color: rgba(255,107,0,0.12) !important;
}
.MuiAccordionSummary-root.Mui-expanded {
  border-bottom: 1px solid rgba(255,107,0,0.10) !important;
}
.MuiAccordionSummary-expandIconWrapper.Mui-expanded {
  color: #FF6B00 !important;
  filter: drop-shadow(0 0 6px rgba(255,107,0,0.40)) !important;
}

/* ================================================================
   49. ICON BUTTONS — spring hover
   ================================================================ */

.MuiIconButton-root {
  transition: all 0.20s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.MuiIconButton-root:hover {
  transform: scale(1.10) !important;
}
.MuiIconButton-root:active {
  transform: scale(0.95) !important;
}

/* AppBar icon buttons — no scale */
.MuiAppBar-root .MuiIconButton-root:hover {
  transform: none !important;
}

/* Drawer icon buttons — no scale */
.MuiDrawer-paper .MuiIconButton-root:hover {
  transform: none !important;
}

/* ================================================================
   50. LIVE DEVICE DATA CHIPS (inyectados por gps-anim.js)
   ================================================================ */

/* Filas de dispositivo = ListItemButton con avatar.
   Aplica tanto al Paper lateral (escritorio) como al Drawer (móvil). */
.MuiListItemButton-root:has(.MuiListItemAvatar-root) {
  border-radius: 12px !important;
  margin: 2px 8px !important;
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
  transition: all 0.18s ease !important;
}
.MuiListItemButton-root:has(.MuiListItemAvatar-root)::before { display: none !important; }
.MuiListItemButton-root:has(.MuiListItemAvatar-root):hover {
  background: rgba(255,107,0,0.07) !important;
  border-color: rgba(255,107,0,0.12) !important;
}
.MuiListItemButton-root.Mui-selected:has(.MuiListItemAvatar-root) {
  background: rgba(255,107,0,0.10) !important;
  border-color: rgba(255,107,0,0.22) !important;
  box-shadow: 0 2px 12px rgba(255,107,0,0.10), inset 0 0 0 1px rgba(255,107,0,0.08) !important;
}

/* Compactar texto para que quepan los chips (fila virtualizada 72px) */
.MuiListItemButton-root:has(.MuiListItemAvatar-root) .MuiListItemText-root {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.MuiListItemButton-root:has(.MuiListItemAvatar-root) .MuiListItemText-primary {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #e5e7eb !important;
  letter-spacing: -0.1px !important;
}
.MuiListItemButton-root.Mui-selected:has(.MuiListItemAvatar-root) .MuiListItemText-primary {
  color: #f9fafb !important;
  font-weight: 700 !important;
}
.MuiListItemButton-root:has(.MuiListItemAvatar-root) .MuiListItemText-secondary {
  color: #6b7280 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* Avatar del dispositivo */
.MuiListItemButton-root:has(.MuiListItemAvatar-root) .MuiAvatar-root {
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, rgba(255,107,0,0.25) 0%, rgba(255,69,0,0.12) 100%) !important;
  border: 1.5px solid rgba(255,107,0,0.28) !important;
  box-shadow: 0 0 10px rgba(255,107,0,0.15) !important;
}

/* Contenedor de datos en vivo (2 líneas: chips + odómetro/dirección) */
.tc-device-stats {
  display: block !important;
  margin-top: 3px !important;
  overflow: hidden !important;
}

/* Ocultar "hace X minutos" nativo solo cuando ya hay chips (el reloj lo reemplaza) */
.MuiListItemButton-root:has(.tc-device-stats) .MuiListItemText-secondary {
  display: none !important;
}

/* Permitir ellipsis en la dirección */
.MuiListItemButton-root:has(.MuiListItemAvatar-root) .MuiListItemText-root {
  min-width: 0 !important;
}

/* Línea 1: chips */
.tc-chip-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: hidden !important;
}

/* Línea 2: odómetro + dirección */
.tc-info-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 3px !important;
  font-size: 10px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
}

.tc-odo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #FF8C00 !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.tc-odo svg { flex-shrink: 0; }

.tc-addr {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.tc-addr svg { flex-shrink: 0; }
.tc-addr > span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tc-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  border: 1px solid !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  font-family: 'Inter', sans-serif !important;
}
.tc-chip svg { flex-shrink: 0; display: block; }

.tc-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 5px currentColor !important;
}