/* ========================================================================== ELENST GPS — Tema visual personalizado sobre Traccar -------------------------------------------------------------------------- Este archivo NO reemplaza ni modifica el CSS original de Traccar. Se agrega como una hoja de estilos adicional, cargada DESPUÉS del CSS compilado de la aplicación (index-*.css), por lo que sus reglas ganan la cascada para las mismas clases sin necesidad de tocar el código fuente. ALCANCE — MUY IMPORTANTE: Todas las reglas de este archivo están encerradas dentro de: body:has(.muiltr-pzaggu-page) { ... } ".muiltr-pzaggu-page" es el contenedor raíz que React monta ÚNICAMENTE cuando el usuario ya inició sesión (se confirmó que aparece igual en /, /reports/* y /settings/*, y que NO existe en la pantalla de login). Gracias a esto, ninguna regla de este archivo puede afectar jamás la pantalla de inicio de sesión, incluso para componentes que Material UI dibuja fuera del árbol principal (menús, selects, tooltips, diálogos), ya que ":has()" evalúa la condición sobre completo. Nota de mantenimiento: la clase "muiltr-pzaggu-page" incluye un hash ("pzaggu") que Vite/Emotion genera en cada compilación. Si en el futuro se reconstruye/actualiza el frontend de Traccar desde su código fuente, ese hash podría cambiar y este archivo dejaría de aplicarse (sin romper nada — la interfaz simplemente volvería a verse como el Traccar original hasta actualizar este selector). ========================================================================== */ :root { /* Paleta corporativa Elenst */ --elenst-orange: #F26522; --elenst-orange-dark: #D1520F; --elenst-orange-darker: #B3450A; --elenst-orange-light: #FCE4D6; --elenst-orange-lighter: #FDF1E9; --elenst-white: #FFFFFF; --elenst-gray-50: #F7F8FA; --elenst-gray-100: #EEF0F3; --elenst-gray-200: #E2E5EA; --elenst-gray-300: #CBD0D7; --elenst-gray-400: #9AA1AC; --elenst-gray-600: #5B6470; --elenst-gray-800: #2A2E34; --elenst-black: #16181C; --elenst-radius-sm: 8px; --elenst-radius-md: 12px; --elenst-radius-lg: 16px; --elenst-shadow-sm: 0 1px 3px rgba(20,22,30,0.10), 0 1px 2px rgba(20,22,30,0.06); --elenst-shadow-md: 0 8px 24px rgba(20,22,30,0.12), 0 2px 6px rgba(20,22,30,0.06); --elenst-shadow-lg: 0 20px 48px rgba(20,22,30,0.18); } /* -------------------------------------------------------------------------- 1. Base tipográfica y suavizado (solo interfaz autenticada) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:has(.muiltr-pzaggu-page) .muiltr-pzaggu-page, body:has(.muiltr-pzaggu-page) .muiltr-pzaggu-page * { scrollbar-width: thin; scrollbar-color: var(--elenst-gray-300) transparent; } /* -------------------------------------------------------------------------- 2. Superficies elevadas: paneles flotantes, tarjetas, diálogos, menús -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiPaper-root:not(.MuiPaper-elevation0) { border-radius: var(--elenst-radius-md) !important; background-image: none !important; } body:has(.muiltr-pzaggu-page) .MuiPaper-elevation1, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation2, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation3, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation4 { box-shadow: var(--elenst-shadow-sm) !important; border: 1px solid rgba(20,22,30,0.05); } body:has(.muiltr-pzaggu-page) .MuiPaper-elevation6, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation8, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation12, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation16 { box-shadow: var(--elenst-shadow-md) !important; } body:has(.muiltr-pzaggu-page) .MuiDialog-paper, body:has(.muiltr-pzaggu-page) .MuiPaper-elevation24 { border-radius: var(--elenst-radius-lg) !important; box-shadow: var(--elenst-shadow-lg) !important; } body:has(.muiltr-pzaggu-page) .MuiDialogTitle-root { font-weight: 700 !important; color: var(--elenst-black) !important; } body:has(.muiltr-pzaggu-page) .MuiDialogActions-root { padding: 14px 20px !important; border-top: 1px solid var(--elenst-gray-100); } /* -------------------------------------------------------------------------- 3. Botones -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiButton-root { border-radius: var(--elenst-radius-sm) !important; font-weight: 600 !important; letter-spacing: 0.02em !important; box-shadow: none !important; } /* Nota: Traccar usa una versión de Material UI que separa la clase de variante ("contained"/"outlined"/"text") de la clase de color ("colorPrimary"). Se incluyen ambas formas (la combinada clásica y la separada) para que el tema funcione sin importar la versión exacta. */ body:has(.muiltr-pzaggu-page) .MuiButton-containedPrimary, body:has(.muiltr-pzaggu-page) .MuiButton-contained.MuiButton-colorPrimary { background-color: var(--elenst-orange) !important; color: var(--elenst-white) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-containedPrimary:hover, body:has(.muiltr-pzaggu-page) .MuiButton-contained.MuiButton-colorPrimary:hover { background-color: var(--elenst-orange-dark) !important; box-shadow: var(--elenst-shadow-sm) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-containedPrimary:active, body:has(.muiltr-pzaggu-page) .MuiButton-contained.MuiButton-colorPrimary:active { background-color: var(--elenst-orange-darker) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-containedPrimary.Mui-disabled, body:has(.muiltr-pzaggu-page) .MuiButton-contained.MuiButton-colorPrimary.Mui-disabled { background-color: var(--elenst-gray-200) !important; color: var(--elenst-gray-400) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-outlinedPrimary, body:has(.muiltr-pzaggu-page) .MuiButton-outlined.MuiButton-colorPrimary { border-color: var(--elenst-gray-300) !important; color: var(--elenst-gray-800) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-outlinedPrimary:hover, body:has(.muiltr-pzaggu-page) .MuiButton-outlined.MuiButton-colorPrimary:hover { border-color: var(--elenst-orange) !important; color: var(--elenst-orange-dark) !important; background-color: var(--elenst-orange-lighter) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-textPrimary, body:has(.muiltr-pzaggu-page) .MuiButton-text.MuiButton-colorPrimary { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiButton-textPrimary:hover, body:has(.muiltr-pzaggu-page) .MuiButton-text.MuiButton-colorPrimary:hover { background-color: var(--elenst-orange-lighter) !important; } body:has(.muiltr-pzaggu-page) .MuiFab-primary, body:has(.muiltr-pzaggu-page) .MuiFab-root.MuiFab-colorPrimary { background-color: var(--elenst-orange) !important; color: var(--elenst-white) !important; box-shadow: var(--elenst-shadow-md) !important; } body:has(.muiltr-pzaggu-page) .MuiFab-primary:hover, body:has(.muiltr-pzaggu-page) .MuiFab-root.MuiFab-colorPrimary:hover { background-color: var(--elenst-orange-dark) !important; } body:has(.muiltr-pzaggu-page) .MuiIconButton-colorPrimary { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiIconButton-root:hover { background-color: var(--elenst-orange-lighter) !important; } /* Botones/iconos en estado "activo" o "seleccionado" (p.ej. capas del mapa) */ body:has(.muiltr-pzaggu-page) .MuiIconButton-root.Mui-selected, body:has(.muiltr-pzaggu-page) .MuiToggleButton-root.Mui-selected { background-color: var(--elenst-orange) !important; color: var(--elenst-white) !important; } body:has(.muiltr-pzaggu-page) .MuiIconButton-root.Mui-selected:hover, body:has(.muiltr-pzaggu-page) .MuiToggleButton-root.Mui-selected:hover { background-color: var(--elenst-orange-dark) !important; } /* -------------------------------------------------------------------------- 4. Campos de texto, selects y autocompletar -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiOutlinedInput-root { border-radius: var(--elenst-radius-sm) !important; background-color: var(--elenst-gray-50); } body:has(.muiltr-pzaggu-page) .MuiOutlinedInput-notchedOutline { border-color: var(--elenst-gray-200) !important; } body:has(.muiltr-pzaggu-page) .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--elenst-gray-400) !important; } body:has(.muiltr-pzaggu-page) .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--elenst-orange) !important; border-width: 2px !important; } body:has(.muiltr-pzaggu-page) .MuiInputLabel-root.Mui-focused, body:has(.muiltr-pzaggu-page) .MuiFormLabel-root.Mui-focused { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiCheckbox-colorPrimary.Mui-checked, body:has(.muiltr-pzaggu-page) .MuiRadio-colorPrimary.Mui-checked { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiSwitch-colorPrimary.Mui-checked { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track { background-color: var(--elenst-orange) !important; opacity: 0.5 !important; } /* Menús desplegables de Select / Autocomplete (portales fuera de #root) */ body:has(.muiltr-pzaggu-page) .MuiAutocomplete-paper, body:has(.muiltr-pzaggu-page) .MuiMenu-paper, body:has(.muiltr-pzaggu-page) .MuiPopover-paper { border-radius: var(--elenst-radius-md) !important; box-shadow: var(--elenst-shadow-md) !important; border: 1px solid var(--elenst-gray-100); } body:has(.muiltr-pzaggu-page) .MuiMenuItem-root:hover, body:has(.muiltr-pzaggu-page) .MuiAutocomplete-option:hover, body:has(.muiltr-pzaggu-page) .MuiAutocomplete-option.Mui-focused { background-color: var(--elenst-orange-lighter) !important; } body:has(.muiltr-pzaggu-page) .MuiMenuItem-root.Mui-selected { background-color: var(--elenst-orange-light) !important; font-weight: 600 !important; } /* -------------------------------------------------------------------------- 5. Listas de navegación (Ajustes, Reportes, listado de dispositivos) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiListItemButton-root { border-radius: 0 !important; transition: background-color .15s ease; } body:has(.muiltr-pzaggu-page) .MuiListItemButton-root:hover { background-color: var(--elenst-gray-100) !important; } body:has(.muiltr-pzaggu-page) .MuiListItemButton-root.Mui-selected { background-color: var(--elenst-orange-light) !important; box-shadow: inset 3px 0 0 0 var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiListItemButton-root.Mui-selected:hover { background-color: var(--elenst-orange-light) !important; } body:has(.muiltr-pzaggu-page) .MuiListItemButton-root.Mui-selected .MuiListItemIcon-root { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiListItemButton-root.Mui-selected .MuiListItemText-primary { color: var(--elenst-black) !important; font-weight: 600 !important; } body:has(.muiltr-pzaggu-page) .MuiListItemIcon-root { color: var(--elenst-gray-600); min-width: 40px !important; } /* -------------------------------------------------------------------------- 6. Tablas (reportes, registros, auditoría) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiTableCell-head { background-color: var(--elenst-gray-50) !important; color: var(--elenst-gray-600) !important; font-weight: 700 !important; border-bottom: 2px solid var(--elenst-gray-200) !important; } body:has(.muiltr-pzaggu-page) .MuiTableCell-root { border-bottom-color: var(--elenst-gray-100) !important; } body:has(.muiltr-pzaggu-page) .MuiTableRow-root.MuiTableRow-hover:hover .MuiTableCell-root { background-color: var(--elenst-gray-50) !important; } /* -------------------------------------------------------------------------- 7. Navegación inferior (Mapa / Reportes / Ajustes / Cuenta) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiBottomNavigation-root { background-color: var(--elenst-white) !important; box-shadow: 0 -2px 10px rgba(20,22,30,0.06); border-top: 1px solid var(--elenst-gray-100); height: 62px !important; } body:has(.muiltr-pzaggu-page) .MuiBottomNavigationAction-root { color: var(--elenst-gray-400) !important; position: relative !important; } body:has(.muiltr-pzaggu-page) .MuiBottomNavigationAction-root .MuiBottomNavigationAction-label { font-weight: 500; transition: color .15s ease; } body:has(.muiltr-pzaggu-page) .MuiBottomNavigationAction-root.Mui-selected { color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiBottomNavigationAction-root.Mui-selected .MuiBottomNavigationAction-label { font-weight: 700 !important; color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiBottomNavigationAction-root.Mui-selected::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; background-color: var(--elenst-orange); border-radius: 0 0 4px 4px; } /* -------------------------------------------------------------------------- 8. Tooltips, notificaciones (snackbar) y badges -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiTooltip-tooltip { background-color: var(--elenst-black) !important; border-radius: 6px !important; font-size: 0.75rem !important; padding: 6px 10px !important; } body:has(.muiltr-pzaggu-page) .MuiTooltip-arrow { color: var(--elenst-black) !important; } body:has(.muiltr-pzaggu-page) .MuiSnackbarContent-root, body:has(.muiltr-pzaggu-page) .MuiAlert-root { border-radius: var(--elenst-radius-sm) !important; box-shadow: var(--elenst-shadow-md) !important; } body:has(.muiltr-pzaggu-page) .MuiBadge-colorPrimary .MuiBadge-badge { background-color: var(--elenst-orange) !important; } /* Chips neutros (no se tocan los colores semánticos de estado: éxito/error/alerta) */ body:has(.muiltr-pzaggu-page) .MuiChip-root:not(.MuiChip-colorSuccess):not(.MuiChip-colorError):not(.MuiChip-colorWarning):not(.MuiChip-colorInfo) { border-radius: 9999px !important; background-color: var(--elenst-gray-100); color: var(--elenst-gray-800); font-weight: 500; } /* -------------------------------------------------------------------------- 9. Pestañas (tabs) y enlaces -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiTabs-indicator { background-color: var(--elenst-orange) !important; } body:has(.muiltr-pzaggu-page) .MuiTab-root.Mui-selected { color: var(--elenst-orange) !important; font-weight: 600 !important; } body:has(.muiltr-pzaggu-page) a { color: var(--elenst-orange-dark); } /* -------------------------------------------------------------------------- 10. Encabezados de sección (títulos "Ajustes", "Reportes", etc.) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) .MuiTypography-h5, body:has(.muiltr-pzaggu-page) .MuiTypography-h6 { color: var(--elenst-black) !important; font-weight: 700 !important; } /* -------------------------------------------------------------------------- 11. Barras de desplazamiento (Webkit / Chromium) -------------------------------------------------------------------------- */ body:has(.muiltr-pzaggu-page) ::-webkit-scrollbar { width: 8px; height: 8px; } body:has(.muiltr-pzaggu-page) ::-webkit-scrollbar-track { background: transparent; } body:has(.muiltr-pzaggu-page) ::-webkit-scrollbar-thumb { background-color: var(--elenst-gray-300); border-radius: 8px; } body:has(.muiltr-pzaggu-page) ::-webkit-scrollbar-thumb:hover { background-color: var(--elenst-orange); } /* -------------------------------------------------------------------------- 12. Botón flotante "Planes y Suscripciones" -------------------------------------------------------------------------- El enlace vive como elemento estático en index.html (fuera de #root, no es parte de React). Por defecto está oculto (display:none más abajo, fuera de este bloque). Esta regla lo revela ÚNICAMENTE cuando el body contiene ".muiltr-pzaggu-page" — es decir, únicamente con sesión iniciada — por lo que jamás aparece en la pantalla de login. -------------------------------------------------------------------------- */ #elenst-plans-fab { display: none; } body:has(.muiltr-pzaggu-page) #elenst-plans-fab { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: 78px; z-index: 1200; padding: 10px 18px; border-radius: 999px; background-color: var(--elenst-orange); color: var(--elenst-white); font-family: Roboto, Arial, sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(242,101,34,0.35); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } body:has(.muiltr-pzaggu-page) #elenst-plans-fab:hover { background-color: var(--elenst-orange-dark); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(242,101,34,0.42); } /* En pantallas angostas lo subimos un poco más para no tapar la barra inferior de navegación en móvil. */ @media (max-width: 600px) { body:has(.muiltr-pzaggu-page) #elenst-plans-fab { bottom: 74px; right: 12px; padding: 9px 14px; font-size: 12px; } }