/* ============================================================
   RoTrack GPS — Custom Styles v2.0
   Paleta: #0A2472 (azul) | #0096C7 (cyan) | #FF9500 (naranja)
   ============================================================ */
html, body { height: 100%; }
body { margin: 0; padding: 0; }
@media (prefers-color-scheme: dark) { body { background: #06080f; } }
.root { display: flex; flex-direction: column; height: 100%; }
@media print { * { height: auto !important; overflow: visible !important; } }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #06080f; }
::-webkit-scrollbar-thumb { background: rgba(0,150,199,0.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #0096C7; }
.MuiDrawer-paper, .MuiList-root { background: linear-gradient(180deg, #06080f 0%, #090d1c 60%, #0d1530 100%) !important; border-right: 1px solid rgba(0,150,199,0.18) !important; }
.MuiListItemButton-root { border-radius: 8px !important; margin: 2px 6px !important; transition: all 0.18s ease !important; }
.MuiListItemButton-root:hover { background: rgba(255,149,0,0.1) !important; border-left: 3px solid #FF9500 !important; padding-left: 13px !important; }
.MuiListItemButton-root.Mui-selected { background: rgba(0,150,199,0.18) !important; border-left: 3px solid #0096C7 !important; padding-left: 13px !important; }
.MuiListItemIcon-root { color: rgba(0,150,199,0.7) !important; min-width: 38px !important; }
.MuiListItemButton-root:hover .MuiListItemIcon-root { color: #FF9500 !important; }
.MuiAppBar-root { background: linear-gradient(90deg, #06080f 0%, #0d1530 100%) !important; border-bottom: 1px solid rgba(0,150,199,0.2) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.7) !important; }
.MuiBottomNavigation-root { background: linear-gradient(0deg, #04060e 0%, #090d1c 100%) !important; border-top: 2px solid rgba(255,149,0,0.25) !important; height: 58px !important; }
.MuiBottomNavigationAction-root { color: rgba(140,170,210,0.45) !important; transition: color 0.2s ease !important; min-width: 56px !important; }
.MuiBottomNavigationAction-root.Mui-selected { color: #FF9500 !important; }
.MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label { font-size: 0.72rem !important; font-weight: 700 !important; }
[class*="positive"] { color: #29e87a !important; font-weight: 600 !important; }
[class*="negative"] { color: #ff4d4d !important; font-weight: 600 !important; }
.MuiListItem-root { border-bottom: 1px solid rgba(0,150,199,0.07) !important; }
.MuiInputBase-root { transition: box-shadow 0.2s ease !important; }
.MuiInputBase-root:focus-within { box-shadow: 0 0 0 2px rgba(0,150,199,0.25) !important; }
.MuiTableHead-root .MuiTableCell-root { background: linear-gradient(90deg, #090d1c 0%, #0d1530 100%) !important; color: #0096C7 !important; font-weight: 700 !important; font-size: 0.72rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; border-bottom: 2px solid rgba(0,150,199,0.35) !important; padding: 11px 16px !important; white-space: nowrap !important; }
.MuiTableBody-root .MuiTableRow-root:nth-of-type(odd) { background: rgba(9,13,28,0.7) !important; }
.MuiTableBody-root .MuiTableRow-root:nth-of-type(even) { background: rgba(13,21,48,0.5) !important; }
.MuiTableRow-root:hover { background: rgba(0,150,199,0.09) !important; box-shadow: inset 3px 0 0 #0096C7 !important; transition: background 0.15s ease !important; }
.MuiTableCell-root { border-bottom: 1px solid rgba(0,150,199,0.08) !important; color: #c0d4f8 !important; padding: 9px 16px !important; font-size: 0.87rem !important; }
.MuiOutlinedInput-root { background: rgba(9,13,28,0.85) !important; border-radius: 9px !important; color: #dce8ff !important; transition: box-shadow 0.2s ease !important; }
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: rgba(0,150,199,0.5) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #0096C7 !important; border-width: 2px !important; }
.MuiOutlinedInput-root.Mui-focused { box-shadow: 0 0 0 3px rgba(0,150,199,0.15) !important; }
.MuiInputBase-input { color: #c8d8ff !important; }
.MuiInputLabel-root { color: rgba(100,140,200,0.75) !important; }
.MuiInputLabel-root.Mui-focused { color: #0096C7 !important; }
.MuiSelect-select { background: rgba(9,13,28,0.9) !important; color: #dce8ff !important; }
.MuiMenu-paper { background: #0d1530 !important; border: 1px solid rgba(0,150,199,0.2) !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.7) !important; }
.MuiMenuItem-root { color: #c0d4f8 !important; font-size: 0.875rem !important; transition: background 0.15s ease !important; }
.MuiMenuItem-root:hover { background: rgba(0,150,199,0.14) !important; color: #fff !important; }
.MuiMenuItem-root.Mui-selected { background: rgba(0,150,199,0.22) !important; color: #fff !important; }
.MuiButton-containedSecondary, .MuiButton-containedPrimary { background: linear-gradient(135deg, #FF9500 0%, #e07800 100%) !important; color: #fff !important; font-weight: 700 !important; border-radius: 9px !important; letter-spacing: 0.04em !important; box-shadow: 0 4px 14px rgba(255,149,0,0.3) !important; transition: all 0.18s ease !important; }
.MuiButton-containedSecondary:hover, .MuiButton-containedPrimary:hover { box-shadow: 0 6px 20px rgba(255,149,0,0.5) !important; transform: translateY(-1px) !important; }
.MuiButton-colorError, .MuiButton-containedError { background: linear-gradient(135deg, #1c0909 0%, #2d1212 100%) !important; border: 1px solid rgba(255,70,70,0.4) !important; color: #ff7070 !important; border-radius: 9px !important; transition: all 0.18s ease !important; }
.MuiButton-colorInherit, .MuiButton-outlined, .MuiButton-colorInfo { background: linear-gradient(135deg, #0a1020 0%, #162040 100%) !important; border: 1px solid rgba(0,150,199,0.4) !important; color: #60b8ff !important; border-radius: 9px !important; transition: all 0.18s ease !important; }
.MuiButton-colorInherit:hover, .MuiButton-outlined:hover { border-color: #0096C7 !important; box-shadow: 0 0 12px rgba(0,150,199,0.25) !important; }
.MuiDialog-paper { background: linear-gradient(145deg, #08090f 0%, #0d1530 100%) !important; border: 1px solid rgba(0,150,199,0.28) !important; border-radius: 16px !important; box-shadow: 0 0 60px rgba(0,0,0,0.9), 0 0 30px rgba(0,150,199,0.1) !important; }
.MuiDialogTitle-root { color: #fff !important; font-weight: 700 !important; border-bottom: 1px solid rgba(0,150,199,0.15) !important; padding-bottom: 12px !important; }
.MuiDialogActions-root { border-top: 1px solid rgba(0,150,199,0.12) !important; padding: 12px 16px !important; }
.MuiPaper-root.MuiPopover-paper, .leaflet-popup-content-wrapper { background: linear-gradient(145deg, #07090e 0%, #0d1530 100%) !important; border: 1px solid rgba(0,150,199,0.4) !important; border-radius: 14px !important; box-shadow: 0 0 30px rgba(0,150,199,0.18), 0 12px 40px rgba(0,0,0,0.75) !important; min-width: 210px !important; }
.leaflet-popup-tip { background: #0d1530 !important; }
.MuiAccordion-root { background: rgba(9,13,28,0.75) !important; border: 1px solid rgba(0,150,199,0.13) !important; border-radius: 10px !important; margin-bottom: 6px !important; box-shadow: none !important; overflow: hidden !important; }
.MuiAccordionSummary-root { color: #dce8ff !important; transition: background 0.15s ease !important; }
.MuiAccordionSummary-root:hover { background: rgba(0,150,199,0.07) !important; }
.MuiAccordionSummary-expandIconWrapper { color: rgba(0,150,199,0.6) !important; }
.MuiChip-root { background: rgba(0,150,199,0.14) !important; color: #70ccff !important; border: 1px solid rgba(0,150,199,0.28) !important; border-radius: 20px !important; font-weight: 600 !important; font-size: 0.78rem !important; }
.MuiCheckbox-root.Mui-checked { color: #FF9500 !important; }
.MuiRadio-root.Mui-checked { color: #0096C7 !important; }
.MuiSwitch-switchBase.Mui-checked { color: #FF9500 !important; }
.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track { background-color: rgba(255,149,0,0.45) !important; }
.MuiTab-root { color: rgba(140,170,210,0.55) !important; font-weight: 600 !important; transition: color 0.2s ease !important; min-width: 90px !important; }
.MuiTab-root.Mui-selected { color: #FF9500 !important; }
.MuiTabs-indicator { background: #FF9500 !important; height: 3px !important; border-radius: 3px 3px 0 0 !important; }
.MuiTypography-root { color: #dce8ff !important; }
.MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 { color: #fff !important; font-weight: 700 !important; }
.MuiTypography-subtitle1, .MuiTypography-body1 { color: #c0d4f8 !important; }
.MuiTypography-body2, .MuiTypography-caption { color: rgba(160,190,240,0.65) !important; }
.MuiDivider-root { border-color: rgba(0,150,199,0.12) !important; }
.MuiTooltip-tooltip { background: #0d1530 !important; border: 1px solid rgba(0,150,199,0.3) !important; color: #dce8ff !important; border-radius: 8px !important; font-size: 0.75rem !important; padding: 6px 10px !important; }
.MuiInputBase-multiline, textarea { background: rgba(9,13,28,0.85) !important; color: #c8d8ff !important; border-radius: 10px !important; }
.MuiBox-root, .MuiContainer-root { background: transparent !important; }
.MuiGrid-root { background: rgba(9,13,28,0.6) !important; border: 1px solid rgba(0,150,199,0.1) !important; border-radius: 10px !important; }
@media (max-width: 768px) {
  .MuiListItemButton-root { padding: 10px 10px !important; margin: 1px 4px !important; }
  .MuiTableCell-root { padding: 8px 10px !important; font-size: 0.8rem !important; }
  .MuiButton-root { min-height: 44px !important; font-size: 0.875rem !important; border-radius: 10px !important; }
  .MuiDialog-paper { margin: 8px !important; width: calc(100% - 16px) !important; border-radius: 14px !important; }
  .MuiChip-root { font-size: 0.72rem !important; height: 26px !important; }
}
@media (max-width: 480px) {
  .MuiTableHead-root .MuiTableCell-root { font-size: 0.65rem !important; padding: 8px 8px !important; }
  .MuiTableCell-root { padding: 7px 8px !important; font-size: 0.75rem !important; }
  .MuiBottomNavigation-root { height: 54px !important; }
  .MuiBottomNavigationAction-root { min-width: 44px !important; padding: 4px 4px 2px !important; }
}

/* ── PUNTO PULSANTE EN LÍNEA ────────────────────────────── */
[class*="positive"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #29e87a;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  animation: pulsoVerde 2s ease-in-out infinite;
}

@keyframes pulsoVerde {
  0%   { box-shadow: 0 0 0 0 rgba(41,232,122,0.7); }
  60%  { box-shadow: 0 0 0 7px rgba(41,232,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(41,232,122,0); }
}

/* ── PUNTO FUERA DE LÍNEA ───────────────────────────────── */
[class*="negative"]::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4d4d;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.8;
}

/* ── NOMBRE DISPOSITIVO MÁS PROMINENTE ──────────────────── */
.MuiListItemText-primary {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.01em !important;
}

.MuiListItemText-secondary {
  font-size: 0.74rem !important;
  margin-top: 1px !important;
}

/* ── DISPOSITIVO SELECCIONADO CON GLOW ──────────────────── */
.MuiListItemButton-root.Mui-selected {
  box-shadow: inset 0 0 20px rgba(0,150,199,0.08) !important;
}

/* ── ICONOS DE TABLA VISIBLES ───────────────────────────── */
.MuiIconButton-root {
  color: rgba(0,150,199,0.45) !important;
  transition: all 0.18s ease !important;
}

.MuiIconButton-root:hover {
  color: #FF9500 !important;
  background: rgba(255,149,0,0.1) !important;
  transform: scale(1.12) !important;
}

/* ── CABECERA TABLA CON LÍNEA ACENTO ────────────────────── */
.MuiTableHead-root {
  border-top: 2px solid rgba(0,150,199,0.3) !important;
}

/* ── LINK EXPORTAR EN TABLA ─────────────────────────────── */
a[class*="export"], .MuiLink-root {
  color: #0096C7 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a[class*="export"]:hover, .MuiLink-root:hover {
  color: #FF9500 !important;
}
/* ==========================================
   PUNTO DE ESTADO DISPOSITIVOS v2
   ========================================== */

/* Punto pulsante VERDE — En línea */
.MuiListItemText-secondary span[class$="-success"] {
    position: relative;
    padding-left: 16px;
    display: inline-block;
}
.MuiListItemText-secondary span[class$="-success"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4caf50;
    animation: pulse-online 1.5s ease-in-out infinite;
}

/* Punto estático ROJO — Fuera de línea */
.MuiListItemText-secondary span[class$="-error"] {
    position: relative;
    padding-left: 16px;
    display: inline-block;
}
.MuiListItemText-secondary span[class$="-error"]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f44336;
}

/* Animación pulso */
@keyframes pulse-online {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}