/* ========== SMART TRACKER GPS - TEMA PROFESIONAL COMPLETO ========== */
:root {
  --smarty-green: #1fc8a9;
  --smarty-green-dark: #15a88c;
  --smarty-green-light: #3de1c3;
  --smarty-green-bg: #eff7f6;
  --smarty-dark: #1a1a2e;
  --smarty-dark-secondary: #16213e;
  --smarty-accent: #0f3460;
  --smarty-radius: 10px;
  --smarty-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --smarty-shadow-hover: 0 6px 24px rgba(0,0,0,0.1);
  --smarty-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

html, body { height: 100%; }
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

@media (prefers-color-scheme: dark) {
  body { background: #0d1117; }
}

.root { display: flex; flex-direction: column; height: 100%; }

/* ============================================================
   HEADER - APP BAR
   ============================================================ */
.MuiAppBar-root {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3) !important;
  z-index: 1200 !important;
}
.MuiToolbar-root { min-height: 56px !important; padding: 0 16px !important; }

/* ============================================================
   SIDEBAR / DRAWER
   ============================================================ */
.MuiDrawer-paper {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%) !important;
  border-right: none !important;
  width: 240px !important;
}
.MuiDrawer-paper .MuiListItemButton-root {
  margin: 2px 10px !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-height: 40px !important;
  transition: all var(--smarty-transition) !important;
}
.MuiDrawer-paper .MuiListItemIcon-root {
  color: #1fc8a9 !important;
  min-width: 36px !important;
}
.MuiDrawer-paper .MuiListItemText-primary {
  color: #c8d6e5 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.MuiDrawer-paper .MuiListItemButton-root:hover {
  background: rgba(31,200,169,0.12) !important;
}
.MuiDrawer-paper .MuiListItemButton-root:hover .MuiListItemText-primary {
  color: #1fc8a9 !important;
}
.MuiDrawer-paper .Mui-selected {
  background: rgba(31,200,169,0.18) !important;
  border-left: 3px solid #1fc8a9 !important;
}
.MuiDrawer-paper .Mui-selected .MuiListItemText-primary {
  color: #1fc8a9 !important;
  font-weight: 700 !important;
}
.MuiDrawer-paper .Mui-selected .MuiListItemIcon-root {
  color: #1fc8a9 !important;
}
.MuiDrawer-paper .MuiDivider-root {
  border-color: rgba(255,255,255,0.06) !important;
  margin: 6px 16px !important;
}

/* ============================================================
   BOTONES
   ============================================================ */
.MuiButton-root {
  text-transform: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px !important;
  transition: all var(--smarty-transition) !important;
}
.MuiButton-containedPrimary {
  background: linear-gradient(135deg, #1fc8a9, #15a88c) !important;
  box-shadow: 0 2px 8px rgba(31,200,169,0.25) !important;
  color: #fff !important;
}
.MuiButton-containedPrimary:hover {
  background: linear-gradient(135deg, #3de1c3, #1fc8a9) !important;
  box-shadow: 0 4px 14px rgba(31,200,169,0.4) !important;
  transform: translateY(-1px) !important;
}
.MuiButton-outlinedPrimary {
  color: #1fc8a9 !important;
  border-color: #1fc8a9 !important;
}
.MuiButton-outlinedPrimary:hover {
  background: rgba(31,200,169,0.08) !important;
  border-color: #3de1c3 !important;
}
.MuiButton-containedError {
  background: #e74c3c !important;
  box-shadow: 0 2px 8px rgba(231,76,60,0.25) !important;
}
.MuiButton-containedSuccess {
  background: #27ae60 !important;
  box-shadow: 0 2px 8px rgba(39,174,96,0.25) !important;
}
.MuiButton-sizeSmall {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.MuiButton-sizeLarge {
  padding: 10px 24px !important;
  font-size: 15px !important;
}
.MuiIconButton-root {
  transition: all var(--smarty-transition) !important;
}
.MuiIconButton-root:hover {
  background: rgba(31,200,169,0.1) !important;
}

/* ============================================================
   INPUTS / TEXT FIELDS
   ============================================================ */
.MuiOutlinedInput-root {
  border-radius: 8px !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #1fc8a9 !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused { color: #1fc8a9 !important; }
.MuiInputBase-input { font-size: 14px !important; }
.MuiSelect-select { font-size: 14px !important; }

/* ============================================================
   CARDS
   ============================================================ */
.MuiCard-root {
  border-radius: 12px !important;
  box-shadow: var(--smarty-shadow) !important;
  border: 1px solid #f0f0f0 !important;
  transition: all var(--smarty-transition) !important;
}
.MuiCard-root:hover { box-shadow: var(--smarty-shadow-hover) !important; }

/* ============================================================
   TABLE
   ============================================================ */
.MuiTableHead-root .MuiTableCell-head {
  background: #eff7f6 !important;
  color: #1a1a2e !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid #1fc8a9 !important;
}
.MuiTableRow-root:hover { background: rgba(31,200,169,0.04) !important; }
.MuiTableCell-root { padding: 12px 16px !important; }
.MuiTableRow-root:last-child .MuiTableCell-root { border-bottom: none !important; }

/* ============================================================
   TABS
   ============================================================ */
.MuiTabs-root { border-bottom: 1px solid #eee !important; }
.MuiTabs-indicator { background-color: #1fc8a9 !important; height: 3px !important; border-radius: 2px 2px 0 0 !important; }
.MuiTab-root { text-transform: none !important; font-weight: 500 !important; font-size: 14px !important; }
.MuiTab-root.Mui-selected { color: #1fc8a9 !important; font-weight: 700 !important; }

/* ============================================================
   CHIPS / BADGES
   ============================================================ */
.MuiChip-root { border-radius: 8px !important; }
.MuiChip-colorPrimary { background: #1fc8a9 !important; font-weight: 600 !important; }
.MuiChip-colorSuccess { background: #27ae60 !important; color: #fff !important; font-weight: 600 !important; }
.MuiChip-colorError { background: #e74c3c !important; color: #fff !important; font-weight: 600 !important; }
.MuiChip-colorWarning { background: #f39c12 !important; color: #fff !important; font-weight: 600 !important; }
.MuiChip-sizeSmall { height: 22px !important; font-size: 11px !important; }
.MuiBadge-colorPrimary { background: #1fc8a9 !important; }
.MuiBadge-colorSuccess { background: #1fc8a9 !important; }
.MuiBadge-colorError { background: #e74c3c !important; }

/* ============================================================
   CHECKBOX / RADIO / SWITCH
   ============================================================ */
.MuiCheckbox-colorPrimary.Mui-checked,
.MuiRadio-colorPrimary.Mui-checked { color: #1fc8a9 !important; }
.MuiSwitch-colorPrimary.Mui-checked { color: #1fc8a9 !important; }
.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { background: #1fc8a9 !important; opacity: 0.4 !important; }

/* ============================================================
   DIALOGS / MODALS
   ============================================================ */
.MuiDialog-paper {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 48px rgba(0,0,0,0.15) !important;
}
.MuiDialogTitle-root {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
  color: #fff !important;
  padding: 16px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.MuiDialogContent-root { padding: 20px 24px !important; }
.MuiDialogActions-root { padding: 12px 24px 16px !important; gap: 8px !important; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.MuiTooltip-tooltip {
  background: #1a1a2e !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.MuiPaginationItem-root.Mui-selected {
  background: #1fc8a9 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.MuiPaginationItem-root.Mui-selected:hover { background: #15a88c !important; }

/* ============================================================
   FORMS
   ============================================================ */
.MuiFormLabel-root { font-size: 13px !important; }
.MuiFormHelperText-root { font-size: 11px !important; margin-top: 3px !important; }

/* ============================================================
   LOADING / PROGRESS
   ============================================================ */
.MuiCircularProgress-colorPrimary { color: #1fc8a9 !important; }
.MuiLinearProgress-colorPrimary { background-color: #3de1c3 !important; }
.MuiLinearProgress-barColorPrimary { background-color: #1fc8a9 !important; }

/* ============================================================
   FAB
   ============================================================ */
.MuiFab-primary {
  background: linear-gradient(135deg, #1fc8a9, #15a88c) !important;
  box-shadow: 0 4px 16px rgba(31,200,169,0.4) !important;
}
.MuiFab-primary:hover {
  background: linear-gradient(135deg, #3de1c3, #1fc8a9) !important;
  transform: scale(1.05) !important;
}

/* ============================================================
   SNACKBAR / ALERTS
   ============================================================ */
.MuiSnackbarContent-root { border-radius: 10px !important; font-weight: 500 !important; }
.MuiAlert-root { border-radius: 10px !important; }
.MuiAlert-standardSuccess {
  background: #eff7f6 !important;
  color: #1a5c50 !important;
  border-left: 4px solid #1fc8a9 !important;
}
.MuiAlert-standardError {
  border-left: 4px solid #e74c3c !important;
}
.MuiAlert-standardWarning {
  border-left: 4px solid #f39c12 !important;
}
.MuiAlert-standardInfo {
  border-left: 4px solid #3498db !important;
}

/* ============================================================
   STEPPER
   ============================================================ */
.MuiStepIcon-root.Mui-active { color: #1fc8a9 !important; }
.MuiStepIcon-root.Mui-completed { color: #1fc8a9 !important; }
.MuiStepLabel-label.Mui-active { color: #1fc8a9 !important; font-weight: 700 !important; }

/* ============================================================
   ACCORDION
   ============================================================ */
.MuiAccordion-root { border-radius: 10px !important; margin-bottom: 8px !important; }
.MuiAccordion-root:before { display: none !important; }
.MuiAccordionSummary-root.Mui-expanded { border-bottom: 2px solid #1fc8a9 !important; min-height: 48px !important; }

/* ============================================================
   AUTOCOMPLETE
   ============================================================ */
.MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected="true"] {
  background: rgba(31,200,169,0.12) !important;
}
.MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused {
  background: rgba(31,200,169,0.06) !important;
}

/* ============================================================
   MENÚ DESPLEGABLE
   ============================================================ */
.MuiMenu-paper { border-radius: 10px !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }
.MuiMenuItem-root { font-size: 13px !important; min-height: 38px !important; border-radius: 6px !important; margin: 2px 6px !important; }
.MuiMenuItem-root:hover { background: #eff7f6 !important; }
.MuiMenuItem-root.Mui-selected { background: rgba(31,200,169,0.12) !important; }

/* ============================================================
   AVATAR
   ============================================================ */
.MuiAvatar-root { font-weight: 600 !important; }
.MuiAvatar-colorDefault { background: #1fc8a9 !important; color: #fff !important; }

/* ============================================================
   DATA GRID
   ============================================================ */
.MuiDataGrid-root { border-radius: 10px !important; border: 1px solid #f0f0f0 !important; }
.MuiDataGrid-columnHeaders { background: #eff7f6 !important; }
.MuiDataGrid-row:hover { background: rgba(31,200,169,0.04) !important; }

/* ============================================================
   MAP
   ============================================================ */
.leaflet-container { border-radius: 10px !important; }
.leaflet-control-zoom a { border-radius: 6px !important; font-weight: 400 !important; }

/* ============================================================
   LINKS
   ============================================================ */
a, .MuiLink-root { color: #1fc8a9 !important; text-decoration: none !important; }
a:hover { color: #15a88c !important; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.MuiTypography-h4 { font-weight: 700 !important; color: #1a1a2e !important; }
.MuiTypography-h5 { font-weight: 600 !important; }
.MuiTypography-h6 { font-weight: 600 !important; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #1fc8a9; }

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */
@keyframes smartyFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.MuiCard-root { animation: smartyFadeUp 0.35s ease-out; }
.MuiDialog-root .MuiDialog-paper { animation: smartyFadeUp 0.25s ease-out; }

/* ============================================================
   DARK MODE (opcional)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  body { background: #0d1117 !important; }
  .MuiPaper-root:not(.MuiDrawer-paper):not(.MuiAppBar-root) {
    background: #161b22 !important;
    color: #c9d1d9 !important;
  }
  .MuiTableHead-root .MuiTableCell-head {
    background: #1c2333 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
  }
  .MuiCard-root { background: #161b22 !important; border-color: #30363d !important; }
  .MuiOutlinedInput-root { background: #0d1117 !important; }
  .MuiOutlinedInput-notchedOutline { border-color: #30363d !important; }
  .MuiTableCell-root { border-color: #21262d !important; color: #c9d1d9 !important; }
  .MuiInputBase-input { color: #c9d1d9 !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .MuiTableCell-root { padding: 8px 8px !important; font-size: 12px !important; }
  .MuiCard-root { border-radius: 8px !important; }
  .MuiButton-root { font-size: 13px !important; padding: 6px 14px !important; }
  .MuiDrawer-paper { width: 200px !important; }
}

@media (max-width: 480px) {
  .MuiDrawer-paper { width: 100% !important; }
  .MuiDialog-paper { margin: 16px !important; width: calc(100% - 32px) !important; }
}